clawtap/docs/superpowers/specs/2026-03-26-send-to-menu-settings-design.md

Send-to Menu Redesign + Settings Page

Overview

Redesign the "Send to Other AI" menu for cross-AI review, add a Settings page for managing preferences and saved instructions.

Three deliverables:

1. Send-to Menu — Two-step bottom sheet with adapter selection, model picker, Direct Send / With Instructions
2. Settings Page — Centralized preferences: saved instructions, per-adapter defaults, notifications, about
3. Saved Instructions DB — Server-side storage for reusable instruction templates

Part 1: Send-to Menu

Layout: Two-Step Bottom Sheet

Step 1 — Adapter Selection:

• Bottom sheet titled "Send to…"
• Lists all available adapters (excluding current)
• Each row: adapter icon (official SVG from AdapterIcon.tsx) + adapter name
• No model shown here (model is selected in step 2)
• Tap row → navigates to step 2

Step 2 — Action Selection:

• Header: ‹ {AdapterName} (back arrow + colored adapter name)
• Model dropdown: Model: [gpt-5.4 ▾] — uses native <select>, options from GET /api/adapter/:name/config
• Two action buttons:
  • Direct Send — icon ↗, subtitle "直接送出，不加 instructions"
  • With Instructions — icon ✎, subtitle "自訂或使用已儲存的", has ▼/▲ chevron for expand/collapse

With Instructions (expandable section):

• Saved instructions list (from DB) — tap to select and send immediately
• Divider: "或輸入新的"
• Text input + send button
• Tapping ▼/▲ toggles the section open/closed

Behavior

Direct Send:

• Sends ONLY the raw response text (the message the user clicked ↗ on)
• No context wrapper, no conversation history, no instructions
• Immediately opens FloatingReviewPanel

With Instructions (saved):

• Sends: {instruction}\n\n{response_text}
• Immediately opens FloatingReviewPanel

With Instructions (new):

• Same format as saved
• After sending, show a toast at bottom: "存成常用？" + [Save] button
• Toast auto-dismisses after 3 seconds
• Tapping Save → POST /api/instructions with auto-generated label (first 30 chars of instruction)
• Saved instructions then appear in the list for future use

Components Changed

Component	Change
ReviewActionMenu.tsx	Complete rewrite — two-step bottom sheet
MessageBubble.tsx / SendDropdown	Unchanged (still triggers onSendTo)
ChatView.tsx handleReviewSelect	Simplify — remove promptTemplates, context assembly. Direct Send = raw text, Instructions = instruction + raw text
AdapterIcon.tsx	Unchanged (already uses official SVGs)

Part 2: Settings Page

Entry Point

• New ⚙️ icon button in the project list header (next to Logout)
• Navigates to Settings view

Settings Structure

Settings
├── Saved Instructions
│   └── List with Add/Delete, tap to edit
├── Claude (per-adapter)
│   ├── Model: [dropdown]
│   ├── Permission Mode: [dropdown] (label from adapter)
│   └── Thinking: [dropdown] (label from adapter, "Thinking" for Claude)
├── Codex (per-adapter)
│   ├── Model: [dropdown]
│   ├── Permission Mode: [dropdown]
│   └── Effort: [dropdown] (label from adapter, "Effort" for Codex)
├── Notifications
│   └── Push Notifications: [toggle]
└── About
    └── CodeTap v{version}

Per-Adapter Settings

• Options fetched dynamically from GET /api/adapter/:name/config
• Each adapter has its own models, permission modes, effort levels, and effort label
• Changes saved to localStorage via existing adapter-prefs.ts (same as current cycle buttons)
• NewChat page cycle buttons remain as shortcuts

Saved Instructions Sub-page

‹ Saved Instructions              [+ Add]
──────────────────────────────────────────
  Code Review                          ✕
  Review for correctness, edge cases…

  Suggest Alternatives                 ✕
  Suggest 3 alternative approaches…

• + Add → inline input or modal to enter label + instruction text
• ✕ → delete with confirmation
• v1: no edit — delete and recreate

Version Number

• Read from /api/health endpoint (already returns version from package.json)

Components

Component	Type
SettingsView.tsx	New — main settings page
SavedInstructionsView.tsx	New — instruction management sub-page
AdapterSettingsSection.tsx	New — per-adapter dropdown settings
SessionsView.tsx	Modified — add ⚙️ icon in header

Part 3: Saved Instructions DB

Schema

CREATE TABLE saved_instructions (
  id TEXT PRIMARY KEY,
  label TEXT NOT NULL,
  instruction TEXT NOT NULL,
  created_at TEXT DEFAULT (datetime('now'))
);

API Endpoints

Method	Path	Body	Description
GET	/api/instructions	—	List all, ordered by created_at
POST	/api/instructions	{label, instruction}	Create new
DELETE	/api/instructions/:id	—	Delete

No update endpoint — delete and recreate. Keeps it simple.

Client API

Add to src/lib/api.ts:

• api.getInstructions(): Promise<Instruction[]>
• api.createInstruction(label, instruction): Promise<Instruction>
• api.deleteInstruction(id): Promise<void>

Data Flow Summary

User clicks ↗ on message
  → ReviewActionMenu opens (Step 1: pick adapter)
  → Step 2: pick model + Direct Send or With Instructions
  → Direct Send: sendMessage(rawText) to child adapter
  → With Instructions: sendMessage(instruction + rawText) to child adapter
  → FloatingReviewPanel opens (same as current QUERY path)
  → If new instruction used, toast offers to save

Out of Scope

• Instruction editing (v1: delete + recreate)
• Instruction reordering (v1: created_at order)
• Per-adapter instructions (v1: global list)
• Theme/appearance settings
• Server-side config management