From 9315b7ce5ad0334eb5a2f7f0703e68e5694e9e14 Mon Sep 17 00:00:00 2001
From: Michael <mpmisha@gmail.com>
Date: Sun, 14 Jun 2026 10:21:42 +0300
Subject: [PATCH 1/3] feat: add prompt composer to terminal context menu
 (TASK-180)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a notepad-style scratchpad to each terminal pane, accessible from the
pane right-click menu (📝 Prompt composer). Lets users compose long,
multi-line prompts in a real text editor before sending them - avoids the
fiddliness of editing multi-line input directly in the terminal and stops
stray Enter keys from submitting half-written messages.

The modal has three footer buttons:
- Copy:   writes the draft to the clipboard.
- Submit: bracketed-pastes the draft into the focused terminal. We do not
          also send Enter - the user reviews in the terminal and presses
          Enter themselves. Intentional: avoids accidental submission and
          Ink-based AI CLIs handle programmatic \r post-paste inconsistently.
- Close:  dismiss (also bound to Esc and backdrop click).

Drafts are per-terminal and persist for the session; they're dropped when
the owning pane closes (and the composer auto-dismisses if its target pane
goes away).

Reuses the existing prepareClipboardPaste helper for bracketed-paste
wrapping + CRLF→LF normalization (so Windows-CRLF drafts work cleanly).

Pure draft-map helpers (updateComposerDrafts, dropComposerDraft) extracted
to src/renderer/utils/prompt-composer.ts and covered by 14 focused tests in
tests/e2e/task-180-prompt-composer.spec.ts. All tests pass; tsc error count
unchanged vs main; renderer vite build succeeds.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 ...rompt-composer-to-terminal-context-menu.md | 107 ++++++++++++
 src/renderer/App.tsx                          |   2 +
 src/renderer/components/PromptComposer.tsx    | 160 ++++++++++++++++++
 src/renderer/components/TerminalPanel.tsx     |   4 +
 src/renderer/state/terminal-store.ts          |  33 ++++
 src/renderer/styles/global.css                | 103 +++++++++++
 src/renderer/utils/prompt-composer.ts         |  46 +++++
 tests/e2e/task-180-prompt-composer.spec.ts    |  98 +++++++++++
 8 files changed, 553 insertions(+)
 create mode 100644 backlog/tasks/task-180 - Add-prompt-composer-to-terminal-context-menu.md
 create mode 100644 src/renderer/components/PromptComposer.tsx
 create mode 100644 src/renderer/utils/prompt-composer.ts
 create mode 100644 tests/e2e/task-180-prompt-composer.spec.ts

diff --git a/backlog/tasks/task-180 - Add-prompt-composer-to-terminal-context-menu.md b/backlog/tasks/task-180 - Add-prompt-composer-to-terminal-context-menu.md
new file mode 100644
index 00000000..15b81e13
--- /dev/null
+++ b/backlog/tasks/task-180 - Add-prompt-composer-to-terminal-context-menu.md	
@@ -0,0 +1,107 @@
+---
+id: TASK-180
+title: Add prompt composer to terminal context menu
+status: In Progress
+assignee:
+  - '@mpmisha'
+created_date: '2026-06-14 06:39'
+updated_date: '2026-06-14 06:54'
+labels:
+  - feature
+  - frontend
+  - ux
+dependencies: []
+priority: medium
+---
+
+## Description
+
+<!-- SECTION:DESCRIPTION:BEGIN -->
+Add a new option to each terminal's context (pane) menu that opens a lightweight notepad-style text editor, similar in style/placement to the existing transcript/prompts and SessionSummary popovers.
+
+Motivation: composing multi-line prompts directly in the terminal is awkward - newlines/paste are fiddly and a stray Enter submits a half-written message. A scratch composer lets the user write/edit freely, then copy the whole thing to paste into the terminal as a single prompt.
+
+Scope (v1):
+- New context menu item in the pane menu (TerminalPanel right-click menu) labeled something like "📝 Prompt composer".
+- Opens a modal dialog (palette-backdrop pattern, like SessionSummary) with a multi-line <textarea>, a Copy button, and a Close (✕) button.
+- Textarea preserves newlines, paste, undo/redo (native browser behavior).
+- Copy button writes the full textarea contents to the clipboard via window.terminalAPI.clipboardWrite and shows brief "Copied!" feedback.
+- Esc closes; clicking the backdrop closes; clicking inside the card does not close.
+- Per-terminal text persists in the store for the session (so closing & reopening keeps draft); cleared when the terminal is closed.
+
+Out of scope (v1):
+- Submit-directly-to-terminal button (deferred - user is still deciding).
+- Rich text / markdown rendering.
+- Persisting drafts across app restarts.
+<!-- SECTION:DESCRIPTION:END -->
+
+## Acceptance Criteria
+<!-- AC:BEGIN -->
+- [x] #1 New 📝 Prompt composer item appears in the terminal pane context menu
+- [x] #2 Clicking it opens a modal with a multi-line textarea, Copy button, and Close button
+- [x] #3 Textarea accepts newlines, paste, and arbitrary length text
+- [x] #4 Copy button puts the full textarea contents on the system clipboard and shows transient 'Copied!' feedback
+- [x] #5 Esc and backdrop click close the dialog; clicks inside the card don't
+- [x] #6 Reopening the composer for the same terminal restores the previously typed draft within the session
+- [x] #7 Draft is cleared when the terminal pane is closed
+- [x] #8 Bottom action bar contains three buttons: Copy, Submit, Close
+- [x] #9 Submit button writes the textarea contents into the focused terminal using bracketed paste, then closes the dialog
+<!-- AC:END -->
+
+## Implementation Plan
+
+<!-- SECTION:PLAN:BEGIN -->
+1. Add prompt composer state to terminal store: promptComposerRequest (terminalId|null), composerDrafts map by terminalId, plus actions openPromptComposer, closePromptComposer, setPromptComposerDraft.
+2. Clear composerDrafts[terminalId] in the terminal-removal path (closeTerminal or wherever active terminals are removed).
+3. Create PromptComposer.tsx component: modal using palette-backdrop pattern (mirrors SessionSummary structure), textarea, Copy button with "Copied!" feedback, Close button, Esc + backdrop close.
+4. Add CSS for .prompt-composer-card / .prompt-composer-textarea etc. in global.css (mirror session-summary-* tokens).
+5. Mount <PromptComposer /> in App.tsx near <SessionSummary />.
+6. Add 📝 Prompt composer item to the TerminalPanel pane context menu, near Show prompts / Session summary.
+7. Verify with npm run lint and npm test (or whatever the repo uses). Manually smoke-test in the dev build.
+<!-- SECTION:PLAN:END -->
+
+## Implementation Notes
+
+<!-- SECTION:NOTES:BEGIN -->
+Plan confirmed with user (2026-06-14):
+- Three buttons at the bottom of the editor: Copy, Submit, Close.
+- Submit uses bracketed paste (\x1b[200~...\x1b[201~) via window.terminalAPI.writePty, same pattern as DiffReview.sendComments.
+- Submit does NOT auto-press Enter (user wants to review in the terminal before sending).
+
+Implementation done on branch users/mimer/feature/prompt-composer.
+- Added promptComposerRequest + composerDrafts state and openPromptComposer/closePromptComposer/setPromptComposerDraft actions to terminal-store.ts.
+- closeTerminal now drops the per-pane draft and clears the composer request if it was targeting the closed pane.
+- New PromptComposer.tsx renders the modal (textarea + Copy/Submit/Close footer), wired with Esc-to-close and click-backdrop-to-close.
+- Submit uses bracketed paste via writePty without a trailing \r (user reviews before pressing Enter).
+- CSS added under "Prompt Composer" section in global.css.
+- Menu item added in TerminalPanel pane context menu, immediately after "Show prompts".
+- Verified: tsc --noEmit error count went from 36 (main) to 32 on branch; vite renderer build succeeds.
+<!-- SECTION:NOTES:END -->
+
+## Final Summary
+
+<!-- SECTION:FINAL_SUMMARY:BEGIN -->
+Adds a notepad-style prompt composer to each terminal pane, accessible from the pane right-click menu (📝 Prompt composer).
+
+Why:
+Composing multi-line prompts directly in the terminal is awkward - newlines and paste are fiddly, and a stray Enter submits a half-written message. The composer is a plain modal textarea so the user can write/edit freely, then copy or paste the whole thing into the terminal as a single block.
+
+What changed:
+- New PromptComposer.tsx modal (palette-backdrop pattern, mirrors SessionSummary). Bottom footer holds three buttons: Copy, Submit, Close.
+  - Copy: writes the textarea contents to the clipboard via window.terminalAPI.clipboardWrite, with transient "✓ Copied" feedback.
+  - Submit: pastes into the focused terminal using bracketed paste (\x1b[200~...\x1b[201~) - no trailing \r, so the user reviews before pressing Enter. Same pattern as DiffReview.sendComments.
+  - Close / Esc / backdrop click: dismiss without sending.
+- Terminal store gets promptComposerRequest (TerminalId | null) and composerDrafts (per-pane drafts) with openPromptComposer / closePromptComposer / setPromptComposerDraft.
+- closeTerminal drops the draft and clears the composer request when the targeted pane goes away, so drafts never outlive their terminal.
+- TerminalPanel pane context menu gets a new "📝 Prompt composer" item placed right after "Show prompts".
+- Mounted in App.tsx alongside <SessionSummary />.
+- CSS in global.css under a new "Prompt Composer" section, styled to match the session summary card family.
+
+Scope notes:
+- Drafts persist only for the current app session (no disk persistence by design).
+- No keyboard shortcut yet; opens via the context menu only.
+
+Validation:
+- npx tsc --noEmit: no new errors introduced (count went 36 -> 32 vs. main; remaining errors are pre-existing and unrelated).
+- npx vite build --config vite.renderer.config.ts: succeeds.
+<!-- SECTION:FINAL_SUMMARY:END -->
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 1b627d8b..d3ff36fa 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -30,6 +30,7 @@ import FileExplorer from './components/FileExplorer';
 import FloatingRenameInput from './components/FloatingRenameInput';
 import Toast from './components/Toast';
 import SessionSummary from './components/SessionSummary';
+import PromptComposer from './components/PromptComposer';
 import MarkdownPreviewOverlay from './components/MarkdownPreviewOverlay';
 import AppDialogHost from './components/AppDialog';
 
@@ -335,6 +336,7 @@ const App: React.FC = () => {
         <DiffReview />
         <FloatingRenameInput />
         <SessionSummary />
+        <PromptComposer />
         <MarkdownPreviewOverlay />
         <Toast />
         <AppDialogHost />
diff --git a/src/renderer/components/PromptComposer.tsx b/src/renderer/components/PromptComposer.tsx
new file mode 100644
index 00000000..36bc833b
--- /dev/null
+++ b/src/renderer/components/PromptComposer.tsx
@@ -0,0 +1,160 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTerminalStore } from '../state/terminal-store';
+import { prepareClipboardPaste } from '../utils/paste';
+
+/**
+ * Notepad-style scratchpad for composing long, multi-line prompts before
+ * pasting them into the terminal. Opened from the per-pane context menu
+ * (TerminalPanel → "📝 Prompt composer").
+ *
+ * Why this exists: editing multi-line text directly in a terminal is
+ * awkward - newlines and paste are fiddly, and a stray Enter submits a
+ * half-written message. The composer is a plain <textarea> with three
+ * actions in the footer:
+ *   - Copy:   write the draft to the system clipboard.
+ *   - Submit: bracketed-paste the draft into the focused terminal. We do
+ *             NOT also press Enter - the user reviews in the terminal and
+ *             hits Enter themselves. This is intentional: it avoids
+ *             accidental submission of half-thought-out prompts, and
+ *             Ink-based AI CLIs (Copilot CLI, Claude Code) handle a
+ *             programmatic \r after bracketed paste inconsistently.
+ *   - Close:  dismiss without sending (also bound to Esc and backdrop click).
+ *
+ * Drafts are kept per-terminal in the store for the current session so
+ * closing and reopening the dialog doesn't lose work; they're dropped
+ * when the owning pane is closed.
+ */
+const PromptComposer: React.FC = () => {
+  const terminalId = useTerminalStore((s) => s.promptComposerRequest);
+  const draft = useTerminalStore((s) =>
+    terminalId ? s.composerDrafts[terminalId] ?? '' : ''
+  );
+  const setDraft = useTerminalStore((s) => s.setPromptComposerDraft);
+  const close = useTerminalStore((s) => s.closePromptComposer);
+
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+
+  // Autofocus + Esc-to-close while the dialog is mounted. Reset transient
+  // button feedback whenever a fresh composer instance opens.
+  useEffect(() => {
+    if (!terminalId) return;
+    setCopied(false);
+    setSubmitted(false);
+    const t = setTimeout(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        // Park the caret at the end so reopening with an existing draft
+        // doesn't trap the user typing in the middle.
+        el.setSelectionRange(el.value.length, el.value.length);
+      }
+    }, 0);
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        close();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => {
+      clearTimeout(t);
+      window.removeEventListener('keydown', onKey);
+    };
+  }, [terminalId, close]);
+
+  const onCopy = useCallback(() => {
+    if (!draft) return;
+    try {
+      window.terminalAPI.clipboardWrite(draft);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard surface failure is non-fatal */
+    }
+  }, [draft]);
+
+  const onSubmit = useCallback(() => {
+    if (!terminalId || !draft) return;
+    // Reuse the shared paste helper so we get bracketed-paste wrapping
+    // and CRLF→LF normalization for free (matters when users paste
+    // Windows-CRLF content into the composer).
+    const payload = prepareClipboardPaste(draft, true);
+    try {
+      window.terminalAPI.writePty(terminalId, payload);
+      // Sent prompts shouldn't linger in the composer - clear the draft
+      // so reopening for the same pane starts fresh.
+      setDraft(terminalId, '');
+      setSubmitted(true);
+      setTimeout(() => {
+        close();
+      }, 250);
+    } catch {
+      /* terminal may have closed under us */
+    }
+  }, [terminalId, draft, close, setDraft]);
+
+  if (!terminalId) return null;
+
+  const hasText = draft.length > 0;
+
+  return (
+    <div className="palette-backdrop" onClick={close} style={{ paddingTop: 60 }}>
+      <div
+        className="prompt-composer-card"
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Prompt composer"
+      >
+        <div className="prompt-composer-header">
+          <span className="prompt-composer-title">📝 Prompt composer</span>
+          <button
+            className="prompt-composer-close-x"
+            onClick={close}
+            aria-label="Close"
+            title="Close (Esc)"
+          >
+            &times;
+          </button>
+        </div>
+        <textarea
+          ref={textareaRef}
+          className="prompt-composer-textarea"
+          value={draft}
+          onChange={(e) => setDraft(terminalId, e.target.value)}
+          placeholder="Write your prompt here. Newlines, paste, and long text all work. Use Copy or Submit when you're ready."
+          spellCheck={false}
+        />
+        <div className="prompt-composer-footer">
+          <button
+            className="prompt-composer-btn"
+            onClick={onCopy}
+            disabled={!hasText}
+            title="Copy the text to the clipboard"
+          >
+            {copied ? '✓ Copied' : '📋 Copy'}
+          </button>
+          <button
+            className="prompt-composer-btn prompt-composer-btn-primary"
+            onClick={onSubmit}
+            disabled={!hasText}
+            title="Paste into the terminal (you press Enter to send)"
+          >
+            {submitted ? '✓ Sent' : '➤ Submit'}
+          </button>
+          <button
+            className="prompt-composer-btn"
+            onClick={close}
+            title="Close without sending (Esc)"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PromptComposer;
diff --git a/src/renderer/components/TerminalPanel.tsx b/src/renderer/components/TerminalPanel.tsx
index 9e60b306..4c8500ec 100644
--- a/src/renderer/components/TerminalPanel.tsx
+++ b/src/renderer/components/TerminalPanel.tsx
@@ -3046,6 +3046,10 @@ const TerminalPanel: React.FC<TerminalPanelProps> = ({ terminalId, floatTitleBar
                 useTerminalStore.getState().showPromptsForTerminal(terminalId);
               }}>💬 Show prompts <span className="context-menu-shortcut">Ctrl+Shift+K</span></button>
             )}
+            <button className="context-menu-item" onClick={() => {
+              setPaneMenuPos(null);
+              useTerminalStore.getState().openPromptComposer(terminalId);
+            }}>📝 Prompt composer</button>
             {aiSessionId && (
               <button className="context-menu-item" onClick={() => {
                 setPaneMenuPos(null);
diff --git a/src/renderer/state/terminal-store.ts b/src/renderer/state/terminal-store.ts
index 1eab4e91..3c512587 100644
--- a/src/renderer/state/terminal-store.ts
+++ b/src/renderer/state/terminal-store.ts
@@ -23,6 +23,7 @@ import type { DiffMode } from '../../shared/diff-types';
 import type { RepoWorktrees } from '../../shared/worktree-types';
 import { getAllTerminals, getTerminalEntry } from '../terminal-registry';
 import { confirmDialog } from '../components/AppDialog';
+import { dropComposerDraft, updateComposerDrafts } from '../utils/prompt-composer';
 
 // Session IDs must be alphanumeric/dash/dot/underscore only (prevent shell injection)
 const SAFE_SESSION_ID = /^[a-zA-Z0-9._-]+$/;
@@ -950,6 +951,13 @@ interface TerminalStore {
   promptsDialogRequest: { terminalId?: TerminalId; sessionId?: string } | null;
   // AI session summary popover - holds the session ID that should be shown.
   sessionSummaryRequest: string | null;
+  // Prompt composer dialog - notepad-style scratchpad opened from the per-pane
+  // context menu. promptComposerRequest holds the target terminal id (or null
+  // when closed); composerDrafts stores the in-flight text per terminal so a
+  // user can close and reopen the dialog without losing their draft for the
+  // current session.
+  promptComposerRequest: TerminalId | null;
+  composerDrafts: Record<string, string>;
   // Side-panel preview state. Despite the legacy name, also carries image
   // previews now (kind: 'image') - the same overlay component branches on
   // kind to render <img> vs sanitized markdown.
@@ -1177,6 +1185,10 @@ interface TerminalStore {
   clearPromptsDialogRequest: () => void;
   showSessionSummary: (sessionId: string) => void;
   clearSessionSummary: () => void;
+  // Prompt composer actions
+  openPromptComposer: (terminalId: TerminalId) => void;
+  closePromptComposer: () => void;
+  setPromptComposerDraft: (terminalId: TerminalId, draft: string) => void;
   // Self-healing: in grid mode, ensures every tiled terminal is present in
   // the tilingRoot. Called from a subscribe() side-effect so any code path
   // that accidentally leaves an orphan pane gets reconciled on the next tick.
@@ -1285,6 +1297,8 @@ export const useTerminalStore = create<TerminalStore>((set, get) => ({
   aiSessionHighlightRequest: 0,
   promptsDialogRequest: null,
   sessionSummaryRequest: null,
+  promptComposerRequest: null,
+  composerDrafts: {},
   copilotSessions: [],
   claudeCodeSessions: [],
   copilotSessionsTotal: 0,
@@ -1581,6 +1595,12 @@ export const useTerminalStore = create<TerminalStore>((set, get) => ({
     const newTerminals = new Map(terminals);
     newTerminals.delete(id);
 
+    // Drop any prompt-composer draft for this pane so its memory doesn't
+    // outlive the terminal, and close the composer if it was targeting us.
+    const newDrafts = dropComposerDraft(get().composerDrafts, id);
+    const newComposerRequest =
+      get().promptComposerRequest === id ? null : get().promptComposerRequest;
+
     let newRoot = layout.tilingRoot;
     let newFloating = layout.floatingPanels;
 
@@ -1623,6 +1643,8 @@ export const useTerminalStore = create<TerminalStore>((set, get) => ({
       focusedTerminalId: newFocus,
       preGridRoot: newPreGridRoot,
       closedTerminals: newClosedTerminals,
+      composerDrafts: newDrafts,
+      promptComposerRequest: newComposerRequest,
     });
 
     // After React processes the layout change, force-focus the new terminal.
@@ -3545,6 +3567,17 @@ export const useTerminalStore = create<TerminalStore>((set, get) => ({
     set({ sessionSummaryRequest: null });
   },
 
+  // ── Prompt composer actions ────────────────────────────────────────
+  openPromptComposer: (terminalId: TerminalId) => {
+    set({ promptComposerRequest: terminalId });
+  },
+  closePromptComposer: () => {
+    set({ promptComposerRequest: null });
+  },
+  setPromptComposerDraft: (terminalId: TerminalId, draft: string) => {
+    set({ composerDrafts: updateComposerDrafts(get().composerDrafts, terminalId, draft) });
+  },
+
   // ── Workspaces (TASK-40) ─────────────────────────────────────────
   // Phase 1 keeps the top-level `layout` as the canonical mutable
   // source for the active workspace. Workspaces map mirrors it; on
diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
index 700f1ea5..c5b6dc0f 100644
--- a/src/renderer/styles/global.css
+++ b/src/renderer/styles/global.css
@@ -1736,6 +1736,109 @@ html.transparency-active .input-dialog {
 }
 .session-summary-quote:last-child { margin-bottom: 0; }
 
+/* ===== Prompt Composer ===== */
+/* Notepad-style scratchpad opened from the per-pane context menu. Mirrors
+   the .session-summary-card visual language so the two popovers feel
+   like part of the same family. */
+.prompt-composer-card {
+  width: 640px;
+  max-width: 92vw;
+  height: 60vh;
+  max-height: 80vh;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 10px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  align-self: flex-start;
+}
+
+.prompt-composer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.prompt-composer-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.prompt-composer-close-x {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 22px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+}
+.prompt-composer-close-x:hover { color: var(--text-primary); }
+
+.prompt-composer-textarea {
+  flex: 1 1 auto;
+  width: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  padding: 14px 18px;
+  font-family: var(--font-mono, ui-monospace, Menlo, Monaco, Consolas, monospace);
+  font-size: 13px;
+  line-height: 1.55;
+  tab-size: 4;
+}
+.prompt-composer-textarea::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.7;
+}
+
+.prompt-composer-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-top: 1px solid var(--border-color);
+}
+
+.prompt-composer-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  padding: 5px 12px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.prompt-composer-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-primary);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.prompt-composer-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.prompt-composer-btn-primary {
+  background: var(--accent, #4a9eff);
+  border-color: var(--accent, #4a9eff);
+  color: #fff;
+}
+.prompt-composer-btn-primary:hover:not(:disabled) {
+  background: var(--accent-hover, #5fb0ff);
+  border-color: var(--accent-hover, #5fb0ff);
+  color: #fff;
+}
+
 /* ===== Pane Drop Zones (inside each pane) ===== */
 .pane-drop-zones-container {
   position: absolute;
diff --git a/src/renderer/utils/prompt-composer.ts b/src/renderer/utils/prompt-composer.ts
new file mode 100644
index 00000000..433ab93f
--- /dev/null
+++ b/src/renderer/utils/prompt-composer.ts
@@ -0,0 +1,46 @@
+/**
+ * Pure helper for updating the prompt-composer's per-terminal draft map.
+ *
+ * Why this lives here: the actual store action in `terminal-store.ts`
+ * needs to read-modify-write through zustand, but the actual update rule
+ * is simple and worth pinning with focused tests:
+ *   - non-empty draft → store the string under terminalId
+ *   - empty draft     → remove the terminalId key entirely (so the map
+ *                       doesn't accumulate empty entries for every pane
+ *                       the user ever opened the composer in)
+ *
+ * Returns a NEW object - never mutates the input. The caller decides
+ * whether to skip the `set()` when nothing changed (cheap reference
+ * equality check), but for now the store always commits because draft
+ * updates fire on every keystroke and will essentially always differ.
+ */
+export function updateComposerDrafts(
+  drafts: Record<string, string>,
+  terminalId: string,
+  draft: string,
+): Record<string, string> {
+  const next = { ...drafts };
+  if (draft) {
+    next[terminalId] = draft;
+  } else {
+    delete next[terminalId];
+  }
+  return next;
+}
+
+/**
+ * Drop a terminal's draft when its owning pane is closed. Returns the
+ * same reference when there was nothing to drop, so the store can do a
+ * cheap referential check before committing a new object.
+ */
+export function dropComposerDraft(
+  drafts: Record<string, string>,
+  terminalId: string,
+): Record<string, string> {
+  if (!Object.prototype.hasOwnProperty.call(drafts, terminalId)) {
+    return drafts;
+  }
+  const next = { ...drafts };
+  delete next[terminalId];
+  return next;
+}
diff --git a/tests/e2e/task-180-prompt-composer.spec.ts b/tests/e2e/task-180-prompt-composer.spec.ts
new file mode 100644
index 00000000..bd188fac
--- /dev/null
+++ b/tests/e2e/task-180-prompt-composer.spec.ts
@@ -0,0 +1,98 @@
+// TASK-180: prompt composer — pure-function tests for the draft map helpers
+// and the bracketed-paste payload Submit emits.
+//
+// Pure tests; Electron is not launched. Mirrors the style of
+// smart-unwrap-on-copy.spec.ts and paste-wrap.spec.ts.
+
+import { test, expect } from '@playwright/test';
+import {
+  dropComposerDraft,
+  updateComposerDrafts,
+} from '../../src/renderer/utils/prompt-composer';
+import { prepareClipboardPaste } from '../../src/renderer/utils/paste';
+
+test.describe('updateComposerDrafts', () => {
+  test('non-empty draft stores text under terminalId', () => {
+    const out = updateComposerDrafts({}, 't1', 'hello');
+    expect(out).toEqual({ t1: 'hello' });
+  });
+
+  test('non-empty draft overwrites existing entry for same terminalId', () => {
+    const out = updateComposerDrafts({ t1: 'old' }, 't1', 'new');
+    expect(out).toEqual({ t1: 'new' });
+  });
+
+  test('non-empty draft preserves other terminals untouched', () => {
+    const out = updateComposerDrafts({ t1: 'one', t2: 'two' }, 't1', 'NEW');
+    expect(out).toEqual({ t1: 'NEW', t2: 'two' });
+  });
+
+  test('empty draft removes the terminalId key so the map does not accumulate empties', () => {
+    const out = updateComposerDrafts({ t1: 'hello', t2: 'world' }, 't1', '');
+    expect(out).toEqual({ t2: 'world' });
+    expect('t1' in out).toBe(false);
+  });
+
+  test('empty draft on missing terminalId is a no-op', () => {
+    const out = updateComposerDrafts({ t2: 'world' }, 't1', '');
+    expect(out).toEqual({ t2: 'world' });
+  });
+
+  test('does not mutate the input object', () => {
+    const input = { t1: 'hello' };
+    updateComposerDrafts(input, 't2', 'world');
+    expect(input).toEqual({ t1: 'hello' });
+  });
+
+  test('multi-line drafts (with newlines) are stored verbatim', () => {
+    const draft = 'line 1\nline 2\n\nline 4';
+    const out = updateComposerDrafts({}, 't1', draft);
+    expect(out.t1).toBe(draft);
+  });
+});
+
+test.describe('dropComposerDraft', () => {
+  test('removes the entry for an existing terminalId', () => {
+    const out = dropComposerDraft({ t1: 'hello', t2: 'world' }, 't1');
+    expect(out).toEqual({ t2: 'world' });
+  });
+
+  test('returns the SAME reference when the terminalId is not present', () => {
+    // Reference equality matters: it lets the store skip a needless
+    // re-render when an unrelated terminal is closed.
+    const input = { t1: 'hello' };
+    const out = dropComposerDraft(input, 't2');
+    expect(out).toBe(input);
+  });
+
+  test('does not mutate the input object', () => {
+    const input = { t1: 'hello', t2: 'world' };
+    dropComposerDraft(input, 't1');
+    expect(input).toEqual({ t1: 'hello', t2: 'world' });
+  });
+
+  test('clearing the last entry yields an empty object, not undefined', () => {
+    const out = dropComposerDraft({ t1: 'only' }, 't1');
+    expect(out).toEqual({});
+  });
+});
+
+test.describe('Submit payload (bracketed paste + CRLF normalization)', () => {
+  // The composer's Submit handler delegates to prepareClipboardPaste with
+  // bracketedPaste=true. These tests pin that contract from the composer's
+  // perspective so a future refactor that drops the helper doesn't silently
+  // change Submit behavior.
+
+  test('single-line draft is wrapped in CSI 200~ / 201~', () => {
+    expect(prepareClipboardPaste('hello world', true)).toBe('\x1b[200~hello world\x1b[201~');
+  });
+
+  test('multi-line draft preserves newlines inside the bracketed paste', () => {
+    const draft = 'first\nsecond\nthird';
+    expect(prepareClipboardPaste(draft, true)).toBe('\x1b[200~first\nsecond\nthird\x1b[201~');
+  });
+
+  test('CRLF in a draft (e.g. pasted Windows clipboard) is normalized to LF', () => {
+    expect(prepareClipboardPaste('a\r\nb', true)).toBe('\x1b[200~a\nb\x1b[201~');
+  });
+});

From ae5d3663cd95161b936bf45375efcc19e9634fa3 Mon Sep 17 00:00:00 2001
From: Michael <mpmisha@gmail.com>
Date: Sun, 14 Jun 2026 10:37:50 +0300
Subject: [PATCH 2/3] feat(prompt-composer): add Ctrl+Alt+P shortcut + fix Mac
 Option-key matcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bind Ctrl+Alt+P (⌘⌥P on Mac) to open the prompt composer for the
  focused pane. Ctrl+Shift+P was already taken by the command palette.
- Surface the shortcut in the pane context menu hint, the Command
  Palette ('Open Prompt Composer'), and the Shortcuts Help overlay.
- Fix matchesCombo() to also compare against event.code on Mac for
  letter/digit keys. Without this, Option+P reports event.key='π'
  (Option+R → '®', etc.) and every Cmd+Option+<letter> shortcut
  silently no-ops on Mac. Side benefit: the pre-existing Ctrl+Alt+R
  (refresh pane) and Ctrl+Alt+N (new terminal in place) bindings now
  also work on Mac.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/renderer/components/CommandPalette.tsx |  1 +
 src/renderer/components/ShortcutsHelp.tsx  |  1 +
 src/renderer/components/TerminalPanel.tsx  |  2 +-
 src/renderer/hooks/useKeybindings.ts       | 20 +++++++++++++++++++-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/CommandPalette.tsx b/src/renderer/components/CommandPalette.tsx
index e6595020..28f6a96b 100644
--- a/src/renderer/components/CommandPalette.tsx
+++ b/src/renderer/components/CommandPalette.tsx
@@ -89,6 +89,7 @@ const CommandPalette: React.FC = () => {
         }
       }},
       { id: 'jumpToPrompt', label: 'Jump to Prompt', shortcut: 'Ctrl+Shift+K', action: () => { const id = focusedId(); if (id) store().showPromptsForTerminal(id); } },
+      { id: 'promptComposer', label: 'Open Prompt Composer', shortcut: 'Ctrl+Alt+P', action: () => { const id = focusedId(); if (id) store().openPromptComposer(id); } },
       { id: 'searchPrompts', label: 'Search Prompts Across All Panes', shortcut: 'Ctrl+Shift+Y', action: () => store().togglePromptSearch() },
       { id: 'shortcuts', label: 'Show Keyboard Shortcuts', shortcut: 'Ctrl+Shift+?', action: () => store().toggleShortcuts() },
       { id: 'settings', label: 'Open Settings', shortcut: 'Ctrl+,', action: () => store().toggleSettings() },
diff --git a/src/renderer/components/ShortcutsHelp.tsx b/src/renderer/components/ShortcutsHelp.tsx
index f9e3dcc6..912b519f 100644
--- a/src/renderer/components/ShortcutsHelp.tsx
+++ b/src/renderer/components/ShortcutsHelp.tsx
@@ -33,6 +33,7 @@ const shortcuts = [
   ]},
   { category: 'AI', items: [
     { key: 'Ctrl+Shift+K', action: 'Jump to prompt in terminal' },
+    { key: 'Ctrl+Alt+P', action: 'Open prompt composer' },
     { key: 'Ctrl+Shift+C', action: 'AI Sessions panel' },
   ]},
   { category: 'Other', items: [
diff --git a/src/renderer/components/TerminalPanel.tsx b/src/renderer/components/TerminalPanel.tsx
index 4c8500ec..f845765e 100644
--- a/src/renderer/components/TerminalPanel.tsx
+++ b/src/renderer/components/TerminalPanel.tsx
@@ -3049,7 +3049,7 @@ const TerminalPanel: React.FC<TerminalPanelProps> = ({ terminalId, floatTitleBar
             <button className="context-menu-item" onClick={() => {
               setPaneMenuPos(null);
               useTerminalStore.getState().openPromptComposer(terminalId);
-            }}>📝 Prompt composer</button>
+            }}>📝 Prompt composer <span className="context-menu-shortcut">Ctrl+Alt+P</span></button>
             {aiSessionId && (
               <button className="context-menu-item" onClick={() => {
                 setPaneMenuPos(null);
diff --git a/src/renderer/hooks/useKeybindings.ts b/src/renderer/hooks/useKeybindings.ts
index d7db7389..3a6e1b6a 100644
--- a/src/renderer/hooks/useKeybindings.ts
+++ b/src/renderer/hooks/useKeybindings.ts
@@ -45,11 +45,23 @@ function matchesCombo(event: KeyboardEvent, combo: KeyCombo): boolean {
   // On macOS, Cmd (metaKey) is the primary app modifier instead of Ctrl
   if (isMac) {
     const shiftedKey = combo.shiftKey ? (MAC_SHIFT_MAP[eventKey] ?? eventKey) : eventKey;
+    // When Option/Alt is held on macOS, event.key contains the special
+    // character the OS produces (Option+P → "π", Option+R → "®", etc.),
+    // not the underlying letter. event.code stays layout-stable
+    // ("KeyP", "KeyR"...) so we fall back to it for letter/digit
+    // shortcuts. Without this, every Cmd+Option+<letter> binding
+    // silently no-ops on Mac.
+    const codeKey = (() => {
+      const c = event.code;
+      if (c.startsWith('Key') && c.length === 4) return c.slice(3).toLowerCase();
+      if (c.startsWith('Digit') && c.length === 6) return c.slice(5);
+      return '';
+    })();
     return (
       event.metaKey === combo.ctrlKey &&
       event.shiftKey === combo.shiftKey &&
       event.altKey === combo.altKey &&
-      (eventKey === combo.key || shiftedKey === combo.key)
+      (eventKey === combo.key || shiftedKey === combo.key || codeKey === combo.key)
     );
   }
   return (
@@ -146,6 +158,9 @@ const DEFAULT_BINDINGS: Record<string, string> = {
   // Ctrl+Alt+N: replace the focused pane with a fresh shell in the same
   // slot. TASK-173.
   'Ctrl+Alt+N': 'replaceTerminal',
+  // Ctrl+Alt+P: open the prompt composer for the focused pane (TASK-180).
+  // Ctrl+Shift+P is the command palette, so Alt instead of Shift.
+  'Ctrl+Alt+P': 'promptComposer',
 };
 
 export function useKeybindings(): void {
@@ -313,6 +328,9 @@ function dispatchAction(action: string): void {
     case 'showPrompts':
       if (focusedId) store.showPromptsForTerminal(focusedId);
       break;
+    case 'promptComposer':
+      if (focusedId) store.openPromptComposer(focusedId);
+      break;
     case 'searchPrompts':
       store.togglePromptSearch();
       break;

From 760c234038b9bda97f661f8f99287dea5f8b27f1 Mon Sep 17 00:00:00 2001
From: Michael <mpmisha@gmail.com>
Date: Sun, 14 Jun 2026 10:41:40 +0300
Subject: [PATCH 3/3] feat(prompt-composer): gate to AI sessions only

The prompt composer is mainly useful for drafting chat prompts for AI
CLIs; on a plain shell pane it would be a surprising surface. Hide it
in all three entry points when the focused/target pane has no
aiSessionId:

- Pane context menu item: wrapped in {aiSessionId && (...)}, same as
  'Show prompts' and 'Session summary'.
- Ctrl+Alt+P shortcut: no-ops when the focused pane isn't AI.
- Command Palette 'Open Prompt Composer' entry: conditionally included
  based on the focused pane's aiSessionId; useMemo dep added so the
  list rebuilds on focus changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/renderer/components/CommandPalette.tsx | 18 ++++++++++++++++--
 src/renderer/components/TerminalPanel.tsx  | 10 ++++++----
 src/renderer/hooks/useKeybindings.ts       |  8 +++++++-
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/CommandPalette.tsx b/src/renderer/components/CommandPalette.tsx
index 28f6a96b..1013a729 100644
--- a/src/renderer/components/CommandPalette.tsx
+++ b/src/renderer/components/CommandPalette.tsx
@@ -14,6 +14,13 @@ interface Command {
 
 const CommandPalette: React.FC = () => {
   const show = useTerminalStore((s) => s.showCommandPalette);
+  // Subscribe to the focused pane's aiSessionId so commands that only make
+  // sense for an AI session (Prompt Composer, etc.) can be filtered out
+  // when the user has a plain shell focused.
+  const focusedAiSessionId = useTerminalStore((s) => {
+    const id = s.focusedTerminalId;
+    return id ? s.terminals.get(id)?.aiSessionId ?? null : null;
+  });
   const [query, setQuery] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [dialog, setDialog] = useState<{ title: string; placeholder?: string; options?: string[]; onSubmit: (value: string) => void } | null>(null);
@@ -89,7 +96,14 @@ const CommandPalette: React.FC = () => {
         }
       }},
       { id: 'jumpToPrompt', label: 'Jump to Prompt', shortcut: 'Ctrl+Shift+K', action: () => { const id = focusedId(); if (id) store().showPromptsForTerminal(id); } },
-      { id: 'promptComposer', label: 'Open Prompt Composer', shortcut: 'Ctrl+Alt+P', action: () => { const id = focusedId(); if (id) store().openPromptComposer(id); } },
+      // Prompt composer is AI-session-only (mirrors the per-pane context
+      // menu). Hide the entry when the focused pane isn't an AI session.
+      ...(focusedAiSessionId ? [{
+        id: 'promptComposer',
+        label: 'Open Prompt Composer',
+        shortcut: 'Ctrl+Alt+P',
+        action: () => { const id = focusedId(); if (id) store().openPromptComposer(id); },
+      }] : []),
       { id: 'searchPrompts', label: 'Search Prompts Across All Panes', shortcut: 'Ctrl+Shift+Y', action: () => store().togglePromptSearch() },
       { id: 'shortcuts', label: 'Show Keyboard Shortcuts', shortcut: 'Ctrl+Shift+?', action: () => store().toggleShortcuts() },
       { id: 'settings', label: 'Open Settings', shortcut: 'Ctrl+,', action: () => store().toggleSettings() },
@@ -203,7 +217,7 @@ const CommandPalette: React.FC = () => {
         action: () => store().createTerminal(shell.id),
       })),
     ];
-  }, []);
+  }, [focusedAiSessionId]);
 
   const filtered = useMemo(() => {
     const tokens = tokenizeAnd(query);
diff --git a/src/renderer/components/TerminalPanel.tsx b/src/renderer/components/TerminalPanel.tsx
index f845765e..98f44bc5 100644
--- a/src/renderer/components/TerminalPanel.tsx
+++ b/src/renderer/components/TerminalPanel.tsx
@@ -3046,10 +3046,12 @@ const TerminalPanel: React.FC<TerminalPanelProps> = ({ terminalId, floatTitleBar
                 useTerminalStore.getState().showPromptsForTerminal(terminalId);
               }}>💬 Show prompts <span className="context-menu-shortcut">Ctrl+Shift+K</span></button>
             )}
-            <button className="context-menu-item" onClick={() => {
-              setPaneMenuPos(null);
-              useTerminalStore.getState().openPromptComposer(terminalId);
-            }}>📝 Prompt composer <span className="context-menu-shortcut">Ctrl+Alt+P</span></button>
+            {aiSessionId && (
+              <button className="context-menu-item" onClick={() => {
+                setPaneMenuPos(null);
+                useTerminalStore.getState().openPromptComposer(terminalId);
+              }}>📝 Prompt composer <span className="context-menu-shortcut">Ctrl+Alt+P</span></button>
+            )}
             {aiSessionId && (
               <button className="context-menu-item" onClick={() => {
                 setPaneMenuPos(null);
diff --git a/src/renderer/hooks/useKeybindings.ts b/src/renderer/hooks/useKeybindings.ts
index 3a6e1b6a..2928687e 100644
--- a/src/renderer/hooks/useKeybindings.ts
+++ b/src/renderer/hooks/useKeybindings.ts
@@ -329,7 +329,13 @@ function dispatchAction(action: string): void {
       if (focusedId) store.showPromptsForTerminal(focusedId);
       break;
     case 'promptComposer':
-      if (focusedId) store.openPromptComposer(focusedId);
+      // AI-session-only, mirroring the pane context menu. The composer is
+      // mainly useful for drafting chat prompts; on a plain shell pane
+      // the shortcut would surprise the user.
+      if (focusedId) {
+        const inst = store.terminals.get(focusedId);
+        if (inst?.aiSessionId) store.openPromptComposer(focusedId);
+      }
       break;
     case 'searchPrompts':
       store.togglePromptSearch();