@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/shared/components/{CollapsiblePasteInput.tsx → chat/CollapsiblePasteInput.tsx}

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type RefObject, type TextareaHTMLAttributes } from 'react'
-import { insertPastedText, pastedTextLabel } from '../utils/pastedText'
-import '../css/collapsed-paste.css'
+import { insertPastedText, pastedTextLabel } from '../../utils/pastedText'
+import '../../css/collapsed-paste.css'
 
 type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {
   value: string

package/src/renderer/shared/components/{DiffReviewModal.tsx → chat/DiffReviewModal.tsx}

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import '../css/management-views.css'
+import '../../css/management-views.css'
 
 export interface DiffReviewModalProps {
   isOpen: boolean
@@ -246,8 +246,8 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                   style={{
                     fontSize: '0.75rem',
                     fontWeight: 700,
-                    color: 'var(--status-error, #f87171)',
-                    background: 'var(--hover-delete-bg, rgba(239, 68, 68, 0.15))',
+                    color: 'var(--status-error-fg)',
+                    background: 'var(--status-error-bg)',
                     padding: '1px 6px',
                     borderRadius: '4px',
                   }}
@@ -259,8 +259,8 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     style={{
                       fontSize: '0.72rem',
                       fontWeight: 700,
-                      color: '#fbbf24',
-                      background: 'rgba(245, 158, 11, 0.15)',
+                      color: 'var(--status-warning-fg)',
+                      background: 'var(--status-warning-bg)',
                       padding: '1px 6px',
                       borderRadius: '4px',
                       textTransform: 'none',
@@ -308,7 +308,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
             padding: 0,
             overflowY: 'auto',
             flex: 1,
-            background: '#090d16',
+            background: 'var(--bg-canvas)',
             fontFamily: 'Consolas, Monaco, "JetBrains Mono", monospace',
             fontSize: '0.8rem',
             lineHeight: 1.5,
@@ -322,11 +322,11 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                   position: 'sticky',
                   top: 0,
                   zIndex: 2,
-                  background: '#0e1526',
+                  background: 'var(--bg-surface-raised)',
                   padding: '6px 12px',
-                  borderBottom: '1px solid rgba(255,255,255,0.08)',
-                  borderRight: '1px solid rgba(255,255,255,0.08)',
-                  color: '#94a3b8',
+                  borderBottom: '1px solid var(--border-subtle)',
+                  borderRight: '1px solid var(--border-subtle)',
+                  color: 'var(--text-muted)',
                   fontWeight: 600,
                   fontSize: '0.75rem',
                 }}
@@ -339,10 +339,10 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                   position: 'sticky',
                   top: 0,
                   zIndex: 2,
-                  background: '#0e1526',
+                  background: 'var(--bg-surface-raised)',
                   padding: '6px 12px',
-                  borderBottom: '1px solid rgba(255,255,255,0.08)',
-                  color: '#94a3b8',
+                  borderBottom: '1px solid var(--border-subtle)',
+                  color: 'var(--text-muted)',
                   fontWeight: 600,
                   fontSize: '0.75rem',
                 }}
@@ -357,13 +357,13 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                       key={idx}
                       style={{
                         gridColumn: '1 / -1',
-                        background: 'rgba(56, 189, 248, 0.08)',
-                        color: '#38bdf8',
+                        background: 'var(--status-info-bg)',
+                        color: 'var(--status-info-fg)',
                         padding: '4px 12px',
                         fontSize: '0.72rem',
                         fontWeight: 600,
-                        borderTop: '1px solid rgba(56, 189, 248, 0.2)',
-                        borderBottom: '1px solid rgba(56, 189, 248, 0.2)',
+                        borderTop: '1px solid var(--status-info-border)',
+                        borderBottom: '1px solid var(--status-info-border)',
                       }}
                     >
                       {row.hunkHeader}
@@ -381,8 +381,8 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                       style={{
                         display: 'flex',
                         borderRight: '1px solid var(--border)',
-                        background: left?.isDel ? 'color-mix(in srgb, var(--status-error, #ef4444) 14%, transparent)' : 'transparent',
-                        borderLeft: left?.isDel ? '3px solid var(--status-error, #ef4444)' : '3px solid transparent',
+                        background: left?.isDel ? 'var(--diff-del-bg)' : 'transparent',
+                        borderLeft: left?.isDel ? '3px solid var(--diff-del-border)' : '3px solid transparent',
                         minHeight: '22px',
                       }}
                     >
@@ -391,7 +391,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           width: '44px',
                           textAlign: 'right',
                           paddingRight: '10px',
-                          color: left?.isDel ? 'var(--status-error, #f87171)' : 'var(--text-muted)',
+                          color: left?.isDel ? 'var(--diff-del-gutter)' : 'var(--text-muted)',
                           userSelect: 'none',
                           flexShrink: 0,
                         }}
@@ -403,7 +403,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           whiteSpace: 'pre-wrap',
                           wordBreak: 'break-all',
                           paddingRight: '8px',
-                          color: left?.isDel ? 'var(--hover-delete, #fca5a5)' : 'var(--text-chat, var(--text-main))',
+                          color: left?.isDel ? 'var(--diff-del-text)' : 'var(--text-chat, var(--text-main))',
                         }}
                       >
                         {left ? left.content : ''}
@@ -414,8 +414,8 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     <div
                       style={{
                         display: 'flex',
-                        background: right?.isAdd ? 'color-mix(in srgb, var(--accent) 14%, transparent)' : 'transparent',
-                        borderLeft: right?.isAdd ? '3px solid var(--accent)' : '3px solid transparent',
+                        background: right?.isAdd ? 'var(--diff-add-bg)' : 'transparent',
+                        borderLeft: right?.isAdd ? '3px solid var(--diff-add-border)' : '3px solid transparent',
                         minHeight: '22px',
                       }}
                     >
@@ -424,7 +424,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           width: '44px',
                           textAlign: 'right',
                           paddingRight: '10px',
-                          color: right?.isAdd ? 'var(--accent)' : 'var(--text-muted)',
+                          color: right?.isAdd ? 'var(--diff-add-gutter)' : 'var(--text-muted)',
                           userSelect: 'none',
                           flexShrink: 0,
                         }}
@@ -436,7 +436,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                           whiteSpace: 'pre-wrap',
                           wordBreak: 'break-all',
                           paddingRight: '8px',
-                          color: right?.isAdd ? 'var(--accent-hover, var(--accent))' : 'var(--text-chat, var(--text-main))',
+                          color: right?.isAdd ? 'var(--diff-add-text)' : 'var(--text-chat, var(--text-main))',
                         }}
                       >
                         {right ? right.content : ''}
@@ -454,13 +454,13 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     <div
                       key={idx}
                       style={{
-                        background: 'rgba(56, 189, 248, 0.08)',
-                        color: '#38bdf8',
+                        background: 'var(--status-info-bg)',
+                        color: 'var(--status-info-fg)',
                         padding: '4px 12px',
                         fontSize: '0.72rem',
                         fontWeight: 600,
-                        borderTop: '1px solid rgba(56, 189, 248, 0.2)',
-                        borderBottom: '1px solid rgba(56, 189, 248, 0.2)',
+                        borderTop: '1px solid var(--status-info-border)',
+                        borderBottom: '1px solid var(--status-info-border)',
                       }}
                     >
                       {line.content}
@@ -469,7 +469,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                 }
                 if (line.type === 'meta') {
                   return (
-                    <div key={idx} style={{ color: '#64748b', padding: '2px 12px', fontWeight: 600 }}>
+                    <div key={idx} style={{ color: 'var(--text-muted)', padding: '2px 12px', fontWeight: 600 }}>
                       {line.content}
                     </div>
                   )
@@ -481,14 +481,14 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                 let prefix = ' '
 
                 if (line.type === 'add') {
-                  bg = 'color-mix(in srgb, var(--accent) 14%, transparent)'
-                  borderL = '3px solid var(--accent)'
-                  textCol = 'var(--text-chat, var(--text-main))'
+                  bg = 'var(--diff-add-bg)'
+                  borderL = '3px solid var(--diff-add-border)'
+                  textCol = 'var(--diff-add-text)'
                   prefix = '+'
                 } else if (line.type === 'del') {
-                  bg = 'color-mix(in srgb, var(--status-error, #ef4444) 14%, transparent)'
-                  borderL = '3px solid var(--status-error, #ef4444)'
-                  textCol = 'var(--text-chat, var(--text-main))'
+                  bg = 'var(--diff-del-bg)'
+                  borderL = '3px solid var(--diff-del-border)'
+                  textCol = 'var(--diff-del-text)'
                   prefix = '-'
                 }
 
@@ -508,7 +508,7 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
                     <span style={{ width: '42px', textAlign: 'right', color: 'var(--text-muted)', paddingRight: '8px', userSelect: 'none', flexShrink: 0 }}>
                       {line.newNum || ''}
                     </span>
-                    <span style={{ width: '16px', color: line.type === 'add' ? 'var(--accent)' : line.type === 'del' ? 'var(--status-error, #f87171)' : 'var(--text-muted)', userSelect: 'none' }}>
+                    <span style={{ width: '16px', color: line.type === 'add' ? 'var(--diff-add-gutter)' : line.type === 'del' ? 'var(--diff-del-gutter)' : 'var(--text-muted)', userSelect: 'none' }}>
                       {prefix}
                     </span>
                     <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', color: textCol }}>
@@ -531,11 +531,11 @@ export const DiffReviewModal: React.FC<DiffReviewModalProps> = ({
             justifyContent: 'space-between',
           }}
         >
-          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted, #94a3b8)' }}>
+          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
             <span>Shortcut: </span>
-            <kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '2px 5px', borderRadius: 4, fontSize: '0.72rem' }}>Esc</kbd> Cancel
+            <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '2px 5px', borderRadius: 4, fontSize: '0.72rem' }}>Esc</kbd> Cancel
             <span style={{ margin: '0 8px' }}>•</span>
-            <kbd style={{ background: 'rgba(255,255,255,0.1)', padding: '2px 5px', borderRadius: 4, fontSize: '0.72rem' }}>Cmd/Ctrl+Enter</kbd> Approve
+            <kbd style={{ background: 'var(--bg-surface-soft)', border: '1px solid var(--border-subtle)', padding: '2px 5px', borderRadius: 4, fontSize: '0.72rem' }}>Cmd/Ctrl+Enter</kbd> Approve
           </div>
 
           <div style={{ display: 'flex', gap: 10 }}>

package/src/renderer/shared/components/{GeminiLiveOverlay.tsx → chat/GeminiLiveOverlay.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState, type RefObject } from 'react'
 import { createPortal } from 'react-dom'
 import { Mic, MicOff, PhoneOff, Volume2 } from 'lucide-react'
-import { VoicePoweredOrb } from './ui/voice-powered-orb'
-import { Button } from './ui/button'
+import { VoicePoweredOrb } from '../ui/voice-powered-orb'
+import { Button } from '../ui/button'
 import './GeminiLiveOverlay.css'
 
 export interface GeminiLiveOverlayProps {

package/src/renderer/shared/components/{ModelSelectorPopover.tsx → chat/ModelSelectorPopover.tsx}

@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 import { useProviderModels } from '@/hooks/useProviderModels'
-import { catalogPlatform } from '../platform'
-import { HF_MODELS, getModelMetadata, isFreeModel, OPENROUTER_POPULAR_MODELS } from '../constants/models'
-import type { CustomProviderConfig } from '../types'
+import { catalogPlatform } from '../../platform'
+import { HF_MODELS, getModelMetadata, isFreeModel, OPENROUTER_POPULAR_MODELS } from '../../constants/models'
+import type { CustomProviderConfig } from '../../types'
 import anthropicLogo from '@lobehub/icons-static-svg/icons/anthropic.svg?url'
 import deepseekLogo from '@lobehub/icons-static-svg/icons/deepseek-color.svg?url'
 import geminiLogo from '@lobehub/icons-static-svg/icons/gemini-color.svg?url'

package/src/renderer/shared/components/chat/QueuedMessagesBanner.test.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import QueuedMessagesBanner from './QueuedMessagesBanner'
+import type { QueuedPrompt } from '../../types'
+
+describe('QueuedMessagesBanner', () => {
+  it('renders null when queuedPrompts is empty', () => {
+    const html = renderToStaticMarkup(
+      <QueuedMessagesBanner
+        queuedPrompts={[]}
+        queuePaused={false}
+        sending={false}
+        onRemove={() => {}}
+        onEdit={() => {}}
+        onClear={() => {}}
+        onSteer={() => {}}
+      />
+    )
+    expect(html).toBe('')
+  })
+
+  it('renders queued prompts list with text and attachments', () => {
+    const mockPrompts: QueuedPrompt[] = [
+      {
+        id: 'q-1',
+        chatId: 'chat-1',
+        text: 'First instruction in queue',
+        createdAt: 1000,
+      },
+      {
+        id: 'q-2',
+        chatId: 'chat-1',
+        text: 'Second instruction with image',
+        imageAttachments: [{ dataUri: 'data:...', name: 'diagram.png' }],
+        documentAttachment: { filename: 'notes.pdf', dataUri: 'data:...' },
+        createdAt: 2000,
+      },
+    ]
+
+    const html = renderToStaticMarkup(
+      <QueuedMessagesBanner
+        queuedPrompts={mockPrompts}
+        queuePaused={false}
+        sending={true}
+        onRemove={() => {}}
+        onEdit={() => {}}
+        onClear={() => {}}
+        onSteer={() => {}}
+      />
+    )
+
+    expect(html).toContain('Queued')
+    expect(html).toContain('2') // Badge count
+    expect(html).toContain('First instruction in queue')
+    expect(html).toContain('Second instruction with image')
+    expect(html).toContain('1 image')
+    expect(html).toContain('notes.pdf')
+    expect(html).toContain('Sends automatically after current turn completes')
+    expect(html).toContain('Send now')
+  })
+
+  it('renders paused status and resume button when queuePaused is true', () => {
+    const mockPrompts: QueuedPrompt[] = [
+      {
+        id: 'q-1',
+        chatId: 'chat-1',
+        text: 'Paused message',
+        createdAt: 1000,
+      },
+    ]
+
+    const html = renderToStaticMarkup(
+      <QueuedMessagesBanner
+        queuedPrompts={mockPrompts}
+        queuePaused={true}
+        sending={false}
+        onRemove={() => {}}
+        onEdit={() => {}}
+        onClear={() => {}}
+        onSteer={() => {}}
+        onResumeQueue={() => {}}
+      />
+    )
+
+    expect(html).toContain('Queue paused')
+    expect(html).toContain('Resume')
+  })
+})

package/src/renderer/shared/components/chat/QueuedMessagesBanner.tsx

@@ -0,0 +1,201 @@
+import { useState } from 'react'
+import type { QueuedPrompt } from '../../types'
+import '../../css/queued-messages.css'
+
+export interface QueuedMessagesBannerProps {
+  queuedPrompts: QueuedPrompt[]
+  queuePaused: boolean
+  sending: boolean
+  onRemove: (id: string) => void
+  onEdit: (id: string) => void
+  onClear: () => void
+  onSteer: (id: string) => void
+  onResumeQueue?: () => void
+}
+
+export default function QueuedMessagesBanner({
+  queuedPrompts,
+  queuePaused,
+  sending,
+  onRemove,
+  onEdit,
+  onClear,
+  onSteer,
+  onResumeQueue,
+}: QueuedMessagesBannerProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  if (!queuedPrompts || queuedPrompts.length === 0) return null
+
+  return (
+    <div className="queued-messages-tray" role="region" aria-label="Queued messages">
+      <div className="queued-messages-header">
+        <div className="queued-messages-title-wrap">
+          <span className="queued-messages-title">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <line x1="8" y1="6" x2="21" y2="6"></line>
+              <line x1="8" y1="12" x2="21" y2="12"></line>
+              <line x1="8" y1="18" x2="21" y2="18"></line>
+              <line x1="3" y1="6" x2="3.01" y2="6"></line>
+              <line x1="3" y1="12" x2="3.01" y2="12"></line>
+              <line x1="3" y1="18" x2="3.01" y2="18"></line>
+            </svg>
+            <span>Queued</span>
+            <span className="queued-messages-badge">{queuedPrompts.length}</span>
+          </span>
+          <span className={`queued-messages-status ${queuePaused ? 'is-paused' : ''}`}>
+            {queuePaused ? (
+              <>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ display: 'inline', verticalAlign: '-1px', marginRight: 4 }}>
+                  <rect x="6" y="4" width="4" height="16" rx="1"></rect>
+                  <rect x="14" y="4" width="4" height="16" rx="1"></rect>
+                </svg>
+                Queue paused · Click arrow to steer or resume
+              </>
+            ) : sending ? (
+              'Sends automatically after current turn completes'
+            ) : (
+              'Ready to send'
+            )}
+          </span>
+        </div>
+        <div className="queued-messages-actions">
+          {queuePaused && onResumeQueue && (
+            <button
+              type="button"
+              className="queued-messages-btn btn-resume"
+              onClick={onResumeQueue}
+              title="Resume queue and send first message"
+              aria-label="Resume queue"
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <polygon points="5 3 19 12 5 21 5 3"></polygon>
+              </svg>
+              <span>Resume</span>
+            </button>
+          )}
+          <button
+            type="button"
+            className="queued-messages-btn"
+            onClick={onClear}
+            title="Clear all queued messages"
+            aria-label="Clear all queued messages"
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <polyline points="3 6 5 6 21 6"></polyline>
+              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+            </svg>
+            <span>Clear</span>
+          </button>
+          <button
+            type="button"
+            className="queued-messages-btn"
+            onClick={() => setIsCollapsed((prev) => !prev)}
+            title={isCollapsed ? 'Expand queue' : 'Collapse queue'}
+            aria-label={isCollapsed ? 'Expand queue' : 'Collapse queue'}
+          >
+            {isCollapsed ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <polyline points="18 15 12 9 6 15"></polyline>
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
+            )}
+          </button>
+        </div>
+      </div>
+      {!isCollapsed && (
+        <div className="queued-messages-list">
+          {queuedPrompts.map((prompt, index) => {
+            const imageCount = prompt.imageAttachments?.length || 0
+            const videoCount = prompt.videoAttachments?.length || 0
+            const docName = prompt.documentAttachment?.filename
+            return (
+              <div key={prompt.id} className="queued-message-item">
+                <span className="queued-message-index">#{index + 1}</span>
+                <div className="queued-message-content">
+                  <div className="queued-message-text" title={prompt.text}>
+                    {prompt.text || '(No text prompt)'}
+                  </div>
+                  {(imageCount > 0 || videoCount > 0 || docName) && (
+                    <div className="queued-message-attachments">
+                      {imageCount > 0 && (
+                        <span className="queued-attachment-pill">
+                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                            <polyline points="21 15 16 10 5 21"></polyline>
+                          </svg>
+                          {imageCount} {imageCount === 1 ? 'image' : 'images'}
+                        </span>
+                      )}
+                      {videoCount > 0 && (
+                        <span className="queued-attachment-pill">
+                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                          </svg>
+                          {videoCount} {videoCount === 1 ? 'video' : 'videos'}
+                        </span>
+                      )}
+                      {docName && (
+                        <span className="queued-attachment-pill" title={docName}>
+                          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                          </svg>
+                          {docName}
+                        </span>
+                      )}
+                    </div>
+                  )}
+                </div>
+                <div className="queued-item-actions">
+                  <button
+                    type="button"
+                    className="queued-icon-btn btn-steer"
+                    onClick={() => onSteer(prompt.id)}
+                    title="Send now (interrupt current turn and steer agent)"
+                    aria-label="Send now"
+                  >
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <line x1="5" y1="12" x2="19" y2="12"></line>
+                      <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
+                  </button>
+                  <button
+                    type="button"
+                    className="queued-icon-btn"
+                    onClick={() => onEdit(prompt.id)}
+                    title="Edit (restore to composer)"
+                    aria-label="Edit message"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
+                    </svg>
+                  </button>
+                  <button
+                    type="button"
+                    className="queued-icon-btn btn-delete"
+                    onClick={() => onRemove(prompt.id)}
+                    title="Remove from queue"
+                    aria-label="Remove from queue"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                      <polyline points="3 6 5 6 21 6"></polyline>
+                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                      <line x1="10" y1="11" x2="10" y2="17"></line>
+                      <line x1="14" y1="11" x2="14" y2="17"></line>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/renderer/shared/components/{RewindModal.tsx → chat/RewindModal.tsx}

@@ -1,6 +1,6 @@
-import SelectField from './SelectField'
+import SelectField from '../ui/SelectField'
 import React, { useState, useEffect } from 'react'
-import type { GitCheckpoint, FileChange } from '../types'
+import type { GitCheckpoint, FileChange } from '../../types'
 
 export interface RewindModalProps {
   isOpen: boolean
@@ -80,7 +80,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
           width: '100%',
           display: 'flex',
           flexDirection: 'column',
-          boxShadow: '0 24px 48px rgba(0, 0, 0, 0.65)',
+          boxShadow: 'var(--shadow-lg)',
           border: '1px solid color-mix(in srgb, var(--status-error, #ef4444) 30%, var(--border))',
         }}
       >
@@ -226,7 +226,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                   style={{
                     padding: '3px 7px',
                     borderRadius: '6px',
-                    background: 'var(--input-bg, rgba(0,0,0,0.3))',
+                    background: 'var(--bg-input, var(--bg-surface-soft))',
                     color: 'var(--text-main)',
                     fontSize: '12px',
                     border: '1px solid var(--border)',

package/src/renderer/shared/components/{SlashChoicePanel.tsx → chat/SlashChoicePanel.tsx}

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, type RefObject } from 'react'
-import type { SlashChoice } from '../platform'
-import '../css/slash-choice.css'
+import type { SlashChoice } from '../../platform'
+import '../../css/slash-choice.css'
 
 interface Props {
   choice: { command: string; title: string; options: SlashChoice[] }

package/src/renderer/shared/components/{SlashSuggestions.tsx → chat/SlashSuggestions.tsx}

@@ -9,10 +9,10 @@ import {
   type RefObject,
 } from 'react'
 import { Terminal, Brain, Folder, Wrench, BookOpen, AtSign } from 'lucide-react'
-import '../css/slash-suggestions.css'
-import { SLASH_COMMANDS, type SlashCommand } from '../constants/slashCommands'
-import { catalogPlatform } from '../platform'
-import type { LearnedSkill } from '../types'
+import '../../css/slash-suggestions.css'
+import { SLASH_COMMANDS, type SlashCommand } from '../../constants/slashCommands'
+import { catalogPlatform } from '../../platform'
+import type { LearnedSkill } from '../../types'
 
 /** Parent calls `handleKeyDown` from the textarea's onKeyDown; a `true` return
  *  means the menu consumed the key and the caller should stop. */