@pheem49/mint 1.16.0 → 1.18.0

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))',
         }}
       >
@@ -100,7 +100,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
               style={{
                 width: '32px',
                 height: '32px',
-                borderRadius: '8px',
+                borderRadius: 'var(--radius-sm, 8px)',
                 background: 'color-mix(in srgb, var(--status-error, #ef4444) 15%, transparent)',
                 color: 'var(--status-error, #ef4444)',
                 display: 'inline-flex',
@@ -133,7 +133,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
               color: 'var(--text-muted)',
               cursor: isLoading ? 'not-allowed' : 'pointer',
               padding: '6px',
-              borderRadius: '6px',
+              borderRadius: 'var(--radius-xs, 6px)',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
@@ -152,7 +152,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
           <div
             style={{
               padding: '12px 14px',
-              borderRadius: '10px',
+              borderRadius: 'var(--radius-md, 10px)',
               background: 'color-mix(in srgb, var(--status-error, #ef4444) 10%, transparent)',
               border: '1px solid color-mix(in srgb, var(--status-error, #ef4444) 25%, transparent)',
               fontSize: '13px',
@@ -181,7 +181,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
             style={{
               background: 'var(--surface-bg)',
               border: '1px solid var(--border)',
-              borderRadius: '10px',
+              borderRadius: 'var(--radius-md, 10px)',
               padding: '14px',
               display: 'flex',
               flexDirection: 'column',
@@ -213,7 +213,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                 <span
                   style={{
                     padding: '3px 8px',
-                    borderRadius: '6px',
+                    borderRadius: 'var(--radius-xs, 6px)',
                     background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
                     color: 'var(--interactive-fg)',
                     fontWeight: 600,
@@ -225,8 +225,8 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                 <code
                   style={{
                     padding: '3px 7px',
-                    borderRadius: '6px',
-                    background: 'var(--input-bg, rgba(0,0,0,0.3))',
+                    borderRadius: 'var(--radius-xs, 6px)',
+                    background: 'var(--bg-input, var(--bg-surface-soft))',
                     color: 'var(--text-main)',
                     fontSize: '12px',
                     border: '1px solid var(--border)',
@@ -263,7 +263,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                   maxHeight: '160px',
                   overflowY: 'auto',
                   border: '1px solid var(--border)',
-                  borderRadius: '8px',
+                  borderRadius: 'var(--radius-sm, 8px)',
                   background: 'var(--surface-bg)',
                   display: 'flex',
                   flexDirection: 'column',
@@ -307,7 +307,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                             fontSize: '10.5px',
                             fontWeight: 600,
                             padding: '1px 6px',
-                            borderRadius: '4px',
+                            borderRadius: 'var(--radius-xs, 6px)',
                             background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
                             color: 'var(--interactive-fg)',
                           }}
@@ -354,7 +354,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
             disabled={isLoading}
             style={{
               padding: '8px 16px',
-              borderRadius: '8px',
+              borderRadius: 'var(--radius-sm, 8px)',
               border: '1px solid var(--border)',
               background: 'transparent',
               color: 'var(--text-main)',
@@ -373,7 +373,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
             disabled={isLoading}
             style={{
               padding: '8px 18px',
-              borderRadius: '8px',
+              borderRadius: 'var(--radius-sm, 8px)',
               border: 'none',
               background: 'var(--status-error, #ef4444)',
               color: '#ffffff',

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.test.tsx → chat/SlashSuggestions.test.tsx}

@@ -2,6 +2,7 @@ import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import SlashSuggestions from './SlashSuggestions'
+import { executeSlashCommand } from '../../utils/slashCommandProcessor'
 
 const render = (message: string, suppressed = false) => renderToStaticMarkup(
   <SlashSuggestions message={message} onComplete={() => {}} anchorRef={{ current: null }} suppressed={suppressed} />,
@@ -18,6 +19,10 @@ describe('composer command suggestions', () => {
     const html = render('/st')
     expect(html.indexOf('>/stats<')).toBeLessThan(html.indexOf('>/mods<'))
   })
+  it('shows /resume above /retry when typing /r', () => {
+    const html = render('/r')
+    expect(html.indexOf('>/resume<')).toBeLessThan(html.indexOf('>/retry<'))
+  })
   it('keeps a command argument as a usage hint instead of unrelated search results', () => {
     const html = render('/remember a durable fact')
     expect(html).toContain('/remember')
@@ -30,4 +35,13 @@ describe('composer command suggestions', () => {
     expect(html).not.toContain('/theme')
     expect(render('/', true)).toBe('')
   })
+  it('lists /voice in the graphical menu and routes /voice to start_voice action', () => {
+    const html = render('/voice')
+    expect(html).toContain('/voice')
+    expect(executeSlashCommand('/voice')).toEqual({
+      handled: true,
+      action: 'start_voice',
+      payload: { mode: '' },
+    })
+  })
 })

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. */

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import SourcesBlock, { groupSourcesByDomain } from './SourcesBlock'
+import type { WebSearchSource } from '../../utils/agentActivity'
+
+describe('SourcesBlock', () => {
+  const mockSources: WebSearchSource[] = [
+    {
+      title: 'Nahida Cosplay Album 1',
+      url: 'https://mitaku.net/album-1',
+      domain: 'mitaku.net',
+      faviconUrl: 'https://mitaku.net/favicon.ico',
+    },
+    {
+      title: 'Nahida Cosplay Album 2',
+      url: 'https://mitaku.net/album-2',
+      domain: 'mitaku.net',
+      faviconUrl: 'https://mitaku.net/favicon.ico',
+    },
+    {
+      title: 'Mococo Cosplay',
+      url: 'https://e-hentai.org/g/12345',
+      domain: 'e-hentai.org',
+      faviconUrl: 'https://e-hentai.org/favicon.ico',
+    },
+  ]
+
+  it('groups sources by domain correctly', () => {
+    const groups = groupSourcesByDomain(mockSources)
+    expect(groups.length).toBe(2)
+    expect(groups[0].domain).toBe('mitaku.net')
+    expect(groups[0].displayDomain).toBe('mitaku')
+    expect(groups[0].items.length).toBe(2)
+    expect(groups[1].domain).toBe('e-hentai.org')
+    expect(groups[1].displayDomain).toBe('e-hentai')
+    expect(groups[1].items.length).toBe(1)
+  })
+
+  it('renders domain group cards with extra count badge', () => {
+    const html = renderToStaticMarkup(<SourcesBlock sources={mockSources} />)
+    expect(html).toContain('Sources')
+    expect(html).toContain('mitaku')
+    expect(html).toContain('+1')
+    expect(html).toContain('e-hentai')
+    expect(html).toContain('extra-badge-btn')
+  })
+
+  it('returns null when sources list is empty', () => {
+    const html = renderToStaticMarkup(<SourcesBlock sources={[]} />)
+    expect(html).toBe('')
+  })
+})