From f8bf31a6886fc144ae04d92675a2bf94df02b682 Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Mon, 6 Apr 2026 20:26:57 +0100
Subject: [PATCH 1/4] feat(ui): add command strip above chat input

Move /, +, and mic buttons into a command strip row above the textarea.
Branch pill moves from the header to the command strip (center-left).

Mic behavior:
- Idle (no text): mic sits right-aligned in command strip, above send
- Has text: mic shifts left next to + in command strip, send button appears
- No voice: disabled send button shown instead

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ChatInput.tsx | 106 ++++++++++++++------------
 frontend/src/pages/ChatView.tsx       |  10 +--
 frontend/src/styles/global.css        |  43 ++++++++---
 3 files changed, 96 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/ChatInput.tsx b/frontend/src/components/ChatInput.tsx
index d92ef93..4960944 100644
--- a/frontend/src/components/ChatInput.tsx
+++ b/frontend/src/components/ChatInput.tsx
@@ -22,6 +22,8 @@ interface Props {
   initialText?: string;
   cwd?: string;
   voice?: UseVoiceReturn;
+  branch?: string;
+  isWorktree?: boolean;
 }
 
 export function ChatInput({
@@ -32,6 +34,8 @@ export function ChatInput({
   initialText,
   cwd,
   voice,
+  branch,
+  isWorktree,
 }: Props) {
   const [text, setText] = useState(initialText || '');
   const [images, setImages] = useState<ImageAttachment[]>([]);
@@ -150,6 +154,24 @@ export function ChatInput({
 
   const canSend = text.trim() || images.length > 0;
 
+  const micProps = voice
+    ? {
+        available: voice.available,
+        recording: voice.recording,
+        transcribing: voice.transcribing,
+        micBlocked: voice.micBlocked,
+        onRecordStart: voice.startRecording,
+        onRecordStop: async () => {
+          const transcript = await voice.stopRecording();
+          if (transcript) {
+            setText((prev) => (prev ? `${prev} ${transcript}` : transcript));
+            textareaRef.current?.focus();
+          }
+        },
+        onRecordCancel: voice.cancelRecording,
+      }
+    : null;
+
   function handleInterrupt() {
     if (!onInterrupt) return;
     const trimmed = text.trim();
@@ -191,54 +213,44 @@ export function ChatInput({
       {voice?.recording && voice.partialTranscript && (
         <div className="voice-partial">{voice.partialTranscript}</div>
       )}
-      <div className="chat-input-row">
-        <div className="chat-input-actions">
-          <button
-            className="chat-input-btn chat-input-btn--skills"
-            onClick={() => {
-              if (!text.startsWith('/')) setText('/');
-              setShowSlashPicker(true);
-              textareaRef.current?.focus();
-            }}
-            title="Skills"
-          >
-            /
-          </button>
-          <button
-            className="chat-input-btn chat-input-btn--attach"
-            onClick={() => fileInputRef.current?.click()}
-            disabled={images.length >= MAX_IMAGE_ATTACHMENTS}
-            title="Attach image"
-          >
-            +
-          </button>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            multiple
-            capture="environment"
-            onChange={handleFileChange}
-            className="sr-only"
-          />
-        </div>
-        {voice && (
-          <MicButton
-            available={voice.available}
-            recording={voice.recording}
-            transcribing={voice.transcribing}
-            micBlocked={voice.micBlocked}
-            onRecordStart={voice.startRecording}
-            onRecordStop={async () => {
-              const transcript = await voice.stopRecording();
-              if (transcript) {
-                setText((prev) => (prev ? `${prev} ${transcript}` : transcript));
-                textareaRef.current?.focus();
-              }
-            }}
-            onRecordCancel={voice.cancelRecording}
-          />
+      <div className="chat-input-command-strip">
+        <button
+          className="chat-input-btn chat-input-btn--skills"
+          onClick={() => {
+            if (!text.startsWith('/')) setText('/');
+            setShowSlashPicker(true);
+            textareaRef.current?.focus();
+          }}
+          title="Skills"
+        >
+          /
+        </button>
+        <button
+          className="chat-input-btn chat-input-btn--attach"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={images.length >= MAX_IMAGE_ATTACHMENTS}
+          title="Attach image"
+        >
+          +
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/jpeg,image/png,image/gif,image/webp"
+          multiple
+          capture="environment"
+          onChange={handleFileChange}
+          className="sr-only"
+        />
+        {micProps && canSend && <MicButton {...micProps} />}
+        {branch && (
+          <span className={`chat-input-branch${isWorktree ? ' chat-input-branch--wt' : ''}`}>
+            {branch}
+          </span>
         )}
+        {micProps && !canSend && <MicButton {...micProps} />}
+      </div>
+      <div className="chat-input-row">
         <textarea
           ref={textareaRef}
           className="chat-input-field"
diff --git a/frontend/src/pages/ChatView.tsx b/frontend/src/pages/ChatView.tsx
index a9d316e..c8839ae 100644
--- a/frontend/src/pages/ChatView.tsx
+++ b/frontend/src/pages/ChatView.tsx
@@ -269,13 +269,7 @@ export function ChatView() {
           onToggle={() => voice.setTtsEnabled(!voice.ttsEnabled)}
           onVoiceChange={voice.setVoice}
         />
-        {msgState.branch && (
-          <span
-            className={`chat-header-branch${msgState.isWorktree ? ' chat-header-branch--wt' : ''}`}
-          >
-            {msgState.branch}
-          </span>
-        )}
+        {/* Branch pill moved to command strip in ChatInput */}
         {msgState.running && (
           <button className="chat-header-stop" onClick={handleStop}>
             Stop
@@ -354,6 +348,8 @@ export function ChatView() {
         running={msgState.running}
         initialText={initialPrompt}
         voice={voice}
+        branch={msgState.branch}
+        isWorktree={msgState.isWorktree}
       />
     </div>
   );
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 8a22f7e..d946317 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1659,6 +1659,39 @@ textarea:focus {
   flex-shrink: 0;
 }
 
+.chat-input-command-strip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.25rem;
+}
+
+.chat-input-branch {
+  font-family: var(--code-font);
+  font-size: 0.65rem;
+  color: var(--text-dim);
+  background: var(--surface);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  max-width: 7rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 0.5rem;
+}
+
+.chat-input-branch--wt {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: rgba(108, 99, 255, 0.1);
+}
+
+/* When idle (no text), mic is the last child — push it right to align above send */
+.chat-input-command-strip > .mic-btn:last-child {
+  margin-left: auto;
+}
+
 .chat-input-row {
   display: flex;
   align-items: flex-end;
@@ -1667,15 +1700,7 @@ textarea:focus {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 22px;
-  padding: 0.35rem 0.35rem 0.35rem 0.35rem;
-}
-
-.chat-input-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  align-self: flex-end;
-  flex-shrink: 0;
+  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
 }
 
 .chat-input-field {

From 793f6260d28c75ef5c8d5f69f121849f79493753 Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Mon, 6 Apr 2026 20:32:42 +0100
Subject: [PATCH 2/4] fix(ui): handle null branch type from message state

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/ChatView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/ChatView.tsx b/frontend/src/pages/ChatView.tsx
index c8839ae..8106aa3 100644
--- a/frontend/src/pages/ChatView.tsx
+++ b/frontend/src/pages/ChatView.tsx
@@ -348,7 +348,7 @@ export function ChatView() {
         running={msgState.running}
         initialText={initialPrompt}
         voice={voice}
-        branch={msgState.branch}
+        branch={msgState.branch ?? undefined}
         isWorktree={msgState.isWorktree}
       />
     </div>

From b5f71489d4c1bd56decd255df20a62bd0dbe756a Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Mon, 6 Apr 2026 20:37:08 +0100
Subject: [PATCH 3/4] refactor(chat-input): keep mic button in fixed position
 on command strip

Remove the dual-render mic position swap (idle vs typing). The mic now
stays in a single spot on the command strip, preventing unmount/remount
on each keystroke which could interrupt active recordings.

Also removes dead comment from ChatView.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ChatInput.tsx | 3 +--
 frontend/src/pages/ChatView.tsx       | 1 -
 frontend/src/styles/global.css        | 5 -----
 3 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/components/ChatInput.tsx b/frontend/src/components/ChatInput.tsx
index 4960944..c22ec60 100644
--- a/frontend/src/components/ChatInput.tsx
+++ b/frontend/src/components/ChatInput.tsx
@@ -242,13 +242,12 @@ export function ChatInput({
           onChange={handleFileChange}
           className="sr-only"
         />
-        {micProps && canSend && <MicButton {...micProps} />}
+        {micProps && <MicButton {...micProps} />}
         {branch && (
           <span className={`chat-input-branch${isWorktree ? ' chat-input-branch--wt' : ''}`}>
             {branch}
           </span>
         )}
-        {micProps && !canSend && <MicButton {...micProps} />}
       </div>
       <div className="chat-input-row">
         <textarea
diff --git a/frontend/src/pages/ChatView.tsx b/frontend/src/pages/ChatView.tsx
index 8106aa3..c50ba49 100644
--- a/frontend/src/pages/ChatView.tsx
+++ b/frontend/src/pages/ChatView.tsx
@@ -269,7 +269,6 @@ export function ChatView() {
           onToggle={() => voice.setTtsEnabled(!voice.ttsEnabled)}
           onVoiceChange={voice.setVoice}
         />
-        {/* Branch pill moved to command strip in ChatInput */}
         {msgState.running && (
           <button className="chat-header-stop" onClick={handleStop}>
             Stop
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index d946317..7cf0a34 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1687,11 +1687,6 @@ textarea:focus {
   background: rgba(108, 99, 255, 0.1);
 }
 
-/* When idle (no text), mic is the last child — push it right to align above send */
-.chat-input-command-strip > .mic-btn:last-child {
-  margin-left: auto;
-}
-
 .chat-input-row {
   display: flex;
   align-items: flex-end;

From beaba61fccc3a9e43f3e0f227950155afc13e569 Mon Sep 17 00:00:00 2001
From: dimakis <dimitri.saridakis@gmail.com>
Date: Mon, 6 Apr 2026 20:38:56 +0100
Subject: [PATCH 4/4] fix(chat-input): address command strip review items

- Remove redundant `?? undefined` on branch prop
- Add vertical padding to command strip to prevent cramped layout
- Add title attribute on branch pill for long-press/hover on truncated names
- Add ChatInputCommandStrip test suite (8 tests): strip buttons, branch
  pill rendering, worktree class, title attr, mic stability across input

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ChatInput.tsx         |   5 +-
 .../__tests__/ChatInputCommandStrip.test.tsx  | 109 ++++++++++++++++++
 frontend/src/pages/ChatView.tsx               |   2 +-
 frontend/src/styles/global.css                |   2 +-
 4 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/__tests__/ChatInputCommandStrip.test.tsx

diff --git a/frontend/src/components/ChatInput.tsx b/frontend/src/components/ChatInput.tsx
index c22ec60..ec3459c 100644
--- a/frontend/src/components/ChatInput.tsx
+++ b/frontend/src/components/ChatInput.tsx
@@ -244,7 +244,10 @@ export function ChatInput({
         />
         {micProps && <MicButton {...micProps} />}
         {branch && (
-          <span className={`chat-input-branch${isWorktree ? ' chat-input-branch--wt' : ''}`}>
+          <span
+            className={`chat-input-branch${isWorktree ? ' chat-input-branch--wt' : ''}`}
+            title={branch}
+          >
             {branch}
           </span>
         )}
diff --git a/frontend/src/components/__tests__/ChatInputCommandStrip.test.tsx b/frontend/src/components/__tests__/ChatInputCommandStrip.test.tsx
new file mode 100644
index 0000000..2070a47
--- /dev/null
+++ b/frontend/src/components/__tests__/ChatInputCommandStrip.test.tsx
@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ChatInput } from '../ChatInput';
+import type { UseVoiceReturn } from '../../hooks/useVoice';
+
+vi.mock('../SlashPicker', () => ({
+  SlashPicker: () => null,
+}));
+
+afterEach(() => cleanup());
+
+function makeVoice(overrides: Partial<UseVoiceReturn> = {}): UseVoiceReturn {
+  return {
+    available: true,
+    recording: false,
+    transcribing: false,
+    partialTranscript: '',
+    micBlocked: false,
+    error: null,
+    startRecording: vi.fn(),
+    stopRecording: vi.fn(() => Promise.resolve('')),
+    cancelRecording: vi.fn(),
+    ttsAvailable: false,
+    ttsEnabled: false,
+    speaking: false,
+    voices: [],
+    selectedVoice: 'af_heart',
+    speak: vi.fn(),
+    stopSpeaking: vi.fn(),
+    setTtsEnabled: vi.fn(),
+    setVoice: vi.fn(),
+    ...overrides,
+  };
+}
+
+const noop = () => true;
+const noopVoid = () => {};
+
+describe('ChatInput command strip', () => {
+  it('renders slash and attach buttons', () => {
+    render(<ChatInput onSend={noop} onStop={noopVoid} running={false} />);
+    expect(screen.getByTitle('Skills')).toBeTruthy();
+    expect(screen.getByTitle('Attach image')).toBeTruthy();
+  });
+
+  it('renders branch pill when branch is provided', () => {
+    const { container } = render(
+      <ChatInput onSend={noop} onStop={noopVoid} running={false} branch="main" />,
+    );
+    const pill = container.querySelector('.chat-input-branch');
+    expect(pill).toBeTruthy();
+    expect(pill?.textContent).toBe('main');
+  });
+
+  it('does not render branch pill when branch is undefined', () => {
+    const { container } = render(<ChatInput onSend={noop} onStop={noopVoid} running={false} />);
+    expect(container.querySelector('.chat-input-branch')).toBeNull();
+  });
+
+  it('applies worktree class when isWorktree is true', () => {
+    const { container } = render(
+      <ChatInput onSend={noop} onStop={noopVoid} running={false} branch="feat/test" isWorktree />,
+    );
+    expect(container.querySelector('.chat-input-branch--wt')).toBeTruthy();
+  });
+
+  it('sets title attribute on branch pill for long names', () => {
+    const longBranch = 'feat/command-strip-redesign-v2-with-extra-context';
+    const { container } = render(
+      <ChatInput onSend={noop} onStop={noopVoid} running={false} branch={longBranch} />,
+    );
+    const pill = container.querySelector('.chat-input-branch');
+    expect(pill?.getAttribute('title')).toBe(longBranch);
+  });
+
+  it('renders mic button in command strip when voice is available', () => {
+    const voice = makeVoice();
+    const { container } = render(
+      <ChatInput onSend={noop} onStop={noopVoid} running={false} voice={voice} />,
+    );
+    const strip = container.querySelector('.chat-input-command-strip');
+    const mic = strip?.querySelector('.mic-btn');
+    expect(mic).toBeTruthy();
+  });
+
+  it('keeps single mic button regardless of text input', () => {
+    const voice = makeVoice();
+    const { container } = render(
+      <ChatInput onSend={noop} onStop={noopVoid} running={false} voice={voice} />,
+    );
+
+    // Initially empty — one mic
+    const mics = container.querySelectorAll('.mic-btn');
+    expect(mics).toHaveLength(1);
+
+    // Type text — still one mic in same position
+    const textarea = container.querySelector('textarea')!;
+    fireEvent.change(textarea, { target: { value: 'hello' } });
+    expect(container.querySelectorAll('.mic-btn')).toHaveLength(1);
+  });
+
+  it('opens slash picker when / button is clicked', () => {
+    const { container } = render(<ChatInput onSend={noop} onStop={noopVoid} running={false} />);
+    fireEvent.click(screen.getByTitle('Skills'));
+    const textarea = container.querySelector('textarea');
+    expect(textarea?.value).toBe('/');
+  });
+});
diff --git a/frontend/src/pages/ChatView.tsx b/frontend/src/pages/ChatView.tsx
index c50ba49..469b37c 100644
--- a/frontend/src/pages/ChatView.tsx
+++ b/frontend/src/pages/ChatView.tsx
@@ -347,7 +347,7 @@ export function ChatView() {
         running={msgState.running}
         initialText={initialPrompt}
         voice={voice}
-        branch={msgState.branch ?? undefined}
+        branch={msgState.branch || undefined}
         isWorktree={msgState.isWorktree}
       />
     </div>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 7cf0a34..f0018bb 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -1663,7 +1663,7 @@ textarea:focus {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0 0.25rem;
+  padding: 0.25rem 0.25rem;
 }
 
 .chat-input-branch {