@pheem49/mint 1.15.0 → 1.17.0

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

@@ -0,0 +1,430 @@
+import React, { memo, useMemo, useState } from 'react'
+import { EMPTY_AGENT_PROGRESS, parseFileChangesFromProgress } from '../../agentProgress'
+import { conversationPlatform } from '../../platform'
+import type { AgentProgress, FileChange, GitCheckpoint } from '../../types'
+import type { ArtifactFile } from '../../utils/artifacts'
+
+const { listGitCheckpoints } = conversationPlatform
+
+export interface RewindRequestPayload {
+  interaction: any
+  changes: FileChange[]
+  checkpoints: GitCheckpoint[]
+  targetCheckpoint: GitCheckpoint | null
+}
+
+export function getCommonDirectory(paths: string[]): string {
+  if (paths.length === 0) return ''
+  const dirPaths = paths.map((p) => {
+    const normalized = p.replace(/\\/g, '/')
+    const slashIdx = normalized.lastIndexOf('/')
+    return slashIdx !== -1 ? normalized.substring(0, slashIdx) : ''
+  })
+  if (dirPaths.length === 1) return dirPaths[0]
+  if (dirPaths.some((d) => !d)) return ''
+
+  const firstParts = dirPaths[0].split('/')
+  const commonParts: string[] = []
+
+  for (let i = 0; i < firstParts.length; i++) {
+    const part = firstParts[i]
+    if (dirPaths.every((d) => d.split('/')[i] === part)) {
+      commonParts.push(part)
+    } else {
+      break
+    }
+  }
+
+  return commonParts.join('/')
+}
+
+export interface TurnFileChangesProps {
+  progress?: AgentProgress[]
+  changes?: FileChange[]
+  interaction?: any
+  isLive?: boolean
+  defaultOpen?: boolean
+  onOpenArtifact?: (artifact: ArtifactFile) => void
+  onOpenReview?: () => void
+  onRewindRequest?: (payload: RewindRequestPayload) => void
+  onRewindError?: (message: string) => void
+}
+
+export const TurnFileChanges = memo(function TurnFileChanges({
+  progress,
+  changes: providedChanges,
+  interaction,
+  isLive = false,
+  defaultOpen = true,
+  onOpenArtifact,
+  onOpenReview,
+  onRewindRequest,
+  onRewindError,
+}: TurnFileChangesProps) {
+  const changes = useMemo(
+    () => providedChanges ?? parseFileChangesFromProgress(progress ?? EMPTY_AGENT_PROGRESS),
+    [providedChanges, progress],
+  )
+  const [isOpen] = useState(defaultOpen)
+  const [showAll, setShowAll] = useState(false)
+  const [openFileDiffs, setOpenFileDiffs] = useState<Record<string, boolean>>({})
+
+  const commonDir = useMemo(
+    () => getCommonDirectory(changes.map((c) => c.path)),
+    [changes],
+  )
+
+  if (changes.length === 0) return null
+
+  const totalAdditions = changes.reduce((sum, c) => sum + c.additions, 0)
+  const totalDeletions = changes.reduce((sum, c) => sum + c.deletions, 0)
+  const createdCount = changes.filter((c) => c.created).length
+  const modifiedCount = changes.length - createdCount
+
+  let summaryLabel = ''
+  if (createdCount > 0 && modifiedCount === 0) {
+    summaryLabel = `${createdCount} ${createdCount === 1 ? 'file created' : 'files created'}`
+  } else if (createdCount > 0 && modifiedCount > 0) {
+    summaryLabel = `${createdCount} created, ${modifiedCount} modified`
+  } else {
+    summaryLabel = `${changes.length} ${changes.length === 1 ? 'file changed' : 'files changed'}`
+  }
+
+  const visibleChanges = showAll ? changes : changes.slice(0, 3)
+
+  const handleRewind = async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!interaction || !onRewindRequest) return
+    const chatId = interaction.chatId || 'cli'
+    try {
+      const checkpoints = await listGitCheckpoints(chatId)
+      if (!checkpoints || checkpoints.length === 0) {
+        onRewindError?.('No git checkpoints recorded for this session.')
+        return
+      }
+
+      const changePaths = new Set(changes.map((c) => c.path.trim().toLowerCase()))
+      const matching = checkpoints.filter((cp) => {
+        if (!cp.targetPath) return false
+        const cpPath = cp.targetPath.trim().toLowerCase()
+        return changePaths.has(cpPath) || Array.from(changePaths).some((p) => cpPath.endsWith(p) || p.endsWith(cpPath))
+      })
+
+      let targetCp: GitCheckpoint | null = null
+      if (matching.length > 0) {
+        targetCp = matching.reduce((earliest, curr) => (curr.step < earliest.step ? curr : earliest), matching[0])
+      } else {
+        const interactionTs = interaction.createdAt ? new Date(interaction.createdAt).getTime() / 1000 : 0
+        if (interactionTs > 0) {
+          const afterCreated = checkpoints.filter((cp) => cp.timestamp >= interactionTs - 10)
+          if (afterCreated.length > 0) {
+            targetCp = afterCreated[0]
+          }
+        }
+        if (!targetCp) {
+          targetCp = checkpoints[checkpoints.length - 1]
+        }
+      }
+
+      onRewindRequest({
+        interaction,
+        changes,
+        checkpoints,
+        targetCheckpoint: targetCp,
+      })
+    } catch (err: any) {
+      onRewindError?.(`Failed to load checkpoints: ${err?.message || String(err)}`)
+    }
+  }
+
+  const renderChangesList = () => (
+    <div className="file-changes-list" style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+      {visibleChanges.map((change) => {
+        const isDiffOpen = Boolean(openFileDiffs[change.path])
+        const normalized = change.path.replace(/\\/g, '/')
+        let relativePath = normalized
+        if (commonDir && (normalized === commonDir || normalized.startsWith(commonDir + '/'))) {
+          relativePath = normalized.slice(commonDir.length + 1)
+        }
+        const fileName = relativePath.split('/').pop() || relativePath
+        const subDir = relativePath.includes('/') ? relativePath.substring(0, relativePath.lastIndexOf('/')) : ''
+        const dirPath = !commonDir && change.path.includes('/') ? change.path.substring(0, change.path.lastIndexOf('/')) : ''
+
+        return (
+          <div key={change.path} className="file-changes-item">
+            <div
+              className="file-changes-item-header"
+              onClick={() => setOpenFileDiffs((current) => ({ ...current, [change.path]: !current[change.path] }))}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{ color: 'var(--text-muted)', flexShrink: 0 }}
+                  aria-hidden="true"
+                >
+                  <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                  <polyline points="14 2 14 8 20 8" />
+                </svg>
+                <span className={`file-changes-filename ${change.created ? 'is-new' : ''}`}>
+                  <span className="file-changes-name">{fileName}</span>
+                  {subDir && <span className="file-changes-subdir">{subDir}/</span>}
+                  {dirPath && <span className="file-changes-dirpath">{dirPath}</span>}
+                  {change.created && <span className="file-changes-chip-new">New file</span>}
+                </span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.76rem', flexShrink: 0 }}>
+                {change.created ? (
+                  <span className="file-changes-count-add">
+                    +{change.additions} {change.additions === 1 ? 'line' : 'lines'}
+                  </span>
+                ) : (
+                  <>
+                    {change.additions > 0 && <span className="file-changes-count-add">+{change.additions}</span>}
+                    {change.deletions > 0 && <span className="file-changes-count-del">-{change.deletions}</span>}
+                  </>
+                )}
+                {onOpenArtifact && (
+                  <button
+                    type="button"
+                    className="file-changes-preview-btn"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      const fallbackContent =
+                        change.created && change.hunks.length > 0
+                          ? change.hunks.map((h) => h.newText).filter(Boolean).join('\n')
+                          : undefined
+                      onOpenArtifact({ path: change.path, content: fallbackContent })
+                    }}
+                    title="Open Live Preview Split View"
+                  >
+                    Preview
+                  </button>
+                )}
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  style={{
+                    color: 'var(--text-muted)',
+                    transform: isDiffOpen ? 'rotate(90deg)' : 'none',
+                    display: 'inline-block',
+                    transition: 'transform 0.15s ease',
+                  }}
+                  aria-hidden="true"
+                >
+                  <polyline points="9 18 15 12 9 6" />
+                </svg>
+              </div>
+            </div>
+
+            {isDiffOpen && (
+              <div className="file-changes-diff-box">
+                {change.hunks.map((hunk, hIdx) => (
+                  <div
+                    key={hIdx}
+                    className="file-changes-diff-hunk"
+                    style={{ marginBottom: hIdx < change.hunks.length - 1 ? '10px' : 0 }}
+                  >
+                    {hunk.oldText && (
+                      <div className="file-changes-diff-del">
+                        {hunk.oldText.split('\n').map((line, lIdx) => (
+                          <div key={lIdx} style={{ display: 'flex' }}>
+                            <span className="file-changes-diff-sign-del">-</span>
+                            <span>{line}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    {hunk.newText && (
+                      <div className="file-changes-diff-add">
+                        {hunk.newText.split('\n').map((line, lIdx) => (
+                          <div key={lIdx} style={{ display: 'flex' }}>
+                            <span className="file-changes-diff-sign-add">+</span>
+                            <span>{line}</span>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      })}
+      {changes.length > 3 && (
+        <button
+          type="button"
+          className="file-changes-show-more"
+          aria-expanded={showAll}
+          onClick={() => setShowAll((prev) => !prev)}
+        >
+          <span>{showAll ? 'Show fewer files' : `Show ${changes.length - 3} more ${changes.length - 3 === 1 ? 'file' : 'files'}`}</span>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+
+  if (isLive) {
+    return (
+      <div className="message ai-message agent-activity-message" style={{ marginTop: '4px', marginBottom: '8px' }}>
+        <div className="agent-activity-card file-changes-card">
+          <div className="file-changes-summary-row">
+            <div className="file-changes-summary">
+              <span className="file-changes-summary-icon" aria-hidden="true">
+                ✓
+              </span>
+              <span className="file-changes-summary-copy">
+                <div className="file-changes-summary-heading">
+                  <span className="file-changes-summary-label">{summaryLabel}</span>
+                  <span className="file-changes-summary-counts">
+                    {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
+                    {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
+                  </span>
+                </div>
+                {commonDir && (
+                  <span className="file-changes-common-dir" title={commonDir}>
+                    <svg
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      aria-hidden="true"
+                    >
+                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                    </svg>
+                    <span className="file-changes-common-dir-text">{commonDir}</span>
+                  </span>
+                )}
+              </span>
+            </div>
+            {onOpenReview && (
+              <button
+                type="button"
+                className="file-changes-review-btn"
+                title="Review changed code"
+                onClick={onOpenReview}
+              >
+                Review
+              </button>
+            )}
+          </div>
+
+          {isOpen && (
+            <div className="file-changes-list-container" style={{ marginTop: '8px' }}>
+              {renderChangesList()}
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="file-changes-summary-container">
+      <div className="agent-activity-card file-changes-card">
+        <div className="file-changes-summary-row">
+          <div className="file-changes-summary">
+            <span className="file-changes-summary-icon" aria-hidden="true">
+              ⊞
+            </span>
+            <span className="file-changes-summary-copy">
+              <div className="file-changes-summary-heading">
+                <span className="file-changes-summary-label">{summaryLabel}</span>
+                <span className="file-changes-summary-counts">
+                  {totalAdditions > 0 && <span className="file-changes-count-add">+{totalAdditions}</span>}
+                  {totalDeletions > 0 && <span className="file-changes-count-del">-{totalDeletions}</span>}
+                </span>
+              </div>
+              {commonDir && (
+                <span className="file-changes-common-dir" title={commonDir}>
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                  </svg>
+                  <span className="file-changes-common-dir-text">{commonDir}</span>
+                </span>
+              )}
+            </span>
+          </div>
+          <div className="file-changes-summary-actions">
+            {onRewindRequest && (
+              <button
+                type="button"
+                className="file-changes-rewind-btn"
+                onClick={handleRewind}
+                title="Rewind workspace to before these file edits (Git Checkpoint)"
+              >
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <polyline points="1 4 7 4 7 10" />
+                  <path d="M3 9a9 9 0 1 0 2.13-5.36L1 7" />
+                </svg>
+                Undo
+              </button>
+            )}
+            {onOpenReview && (
+              <button
+                type="button"
+                className="file-changes-review-btn"
+                title="Review changed code"
+                onClick={onOpenReview}
+              >
+                Review
+              </button>
+            )}
+          </div>
+        </div>
+        {isOpen && <div className="file-changes-list-container">{renderChangesList()}</div>}
+      </div>
+    </div>
+  )
+})
+
+export default TurnFileChanges

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

@@ -0,0 +1,82 @@
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react'
+import { defaultRangeExtractor, useVirtualizer, type Range } from '@tanstack/react-virtual'
+
+export interface VirtualChatHistoryHandle {
+  scrollToEnd: () => void
+}
+
+interface Props {
+  items: Array<{ id: string | number }>
+  scrollRef: RefObject<HTMLDivElement | null>
+  renderRow: (index: number) => ReactNode
+  tail?: ReactNode
+  hasOlder?: boolean
+}
+
+// The live turn is a measured row too: image, tool, and approval growth obey the
+// same anchoring policy as history. Only the viewport and a few neighbors mount.
+export const VirtualChatHistory = memo(forwardRef<VirtualChatHistoryHandle, Props>(function VirtualChatHistory({ items, scrollRef, renderRow, tail, hasOlder }, ref) {
+  const container = useRef<HTMLDivElement>(null)
+  const [scrollMargin, setScrollMargin] = useState(0)
+  const measuredMargin = useRef<number | null>(null)
+  // Parent DOM refs attach after child layout effects. Publish the scroll host
+  // after the commit so a newly mounted list always installs its observers.
+  const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null)
+  useEffect(() => { setScrollElement(scrollRef.current) }, [scrollRef])
+  const getItemKey = useCallback((index: number) => index < items.length ? `turn:${items[index].id}` : 'live-turn', [items])
+  const hasTail = Boolean(tail)
+  const rangeExtractor = useCallback((range: Range) => {
+    const indexes = defaultRangeExtractor(range)
+    // Approval inputs and other live controls must retain their local state
+    // while the reader scrolls into history. Keep just this one extra row alive.
+    if (hasTail && !indexes.includes(items.length)) indexes.push(items.length)
+    return indexes
+  }, [items.length, hasTail])
+  const virtualizer = useVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count: items.length + (tail ? 1 : 0),
+    getScrollElement: () => scrollElement,
+    getItemKey,
+    rangeExtractor,
+    estimateSize: () => 320,
+    overscan: 4,
+    gap: 10,
+    scrollMargin,
+    anchorTo: 'end',
+    followOnAppend: true,
+    scrollEndThreshold: 240,
+    useAnimationFrameWithResizeObserver: true,
+  })
+
+  useImperativeHandle(ref, () => ({ scrollToEnd: () => virtualizer.scrollToEnd() }), [virtualizer])
+
+  useLayoutEffect(() => {
+    const scroll = scrollElement
+    const list = container.current
+    if (!scroll || !list) return
+    const measureStart = () => {
+      const margin = list.getBoundingClientRect().top - scroll.getBoundingClientRect().top - scroll.clientTop + scroll.scrollTop
+      const previous = measuredMargin.current
+      measuredMargin.current = margin
+      setScrollMargin(margin)
+      // A disappearing Load older button shifts the list without changing a
+      // row's measured size. Compensate that prefix separately from row anchors.
+      if (previous !== null && previous !== margin && scroll.scrollTop > Math.min(previous, margin)) {
+        virtualizer.scrollToOffset(scroll.scrollTop + margin - previous)
+      }
+    }
+    measureStart()
+    const observer = new ResizeObserver(measureStart)
+    observer.observe(scroll)
+    return () => observer.disconnect()
+  }, [scrollElement, hasOlder, virtualizer])
+
+  useLayoutEffect(() => { if (scrollElement) virtualizer.scrollToEnd() }, [virtualizer, scrollElement])
+
+  return <div ref={container} className="virtual-chat-history" style={{ position: 'relative', width: '100%', height: virtualizer.getTotalSize(), flexShrink: 0, overflowAnchor: 'none' }}>
+    {virtualizer.getVirtualItems().map(row => <div key={row.key} data-index={row.index}
+      ref={virtualizer.measureElement} className="virtual-chat-row"
+      style={{ position: 'absolute', top: 0, left: 0, width: '100%', display: 'flow-root', transform: `translateY(${row.start - scrollMargin}px)` }}>
+      {row.index < items.length ? renderRow(row.index) : tail}
+    </div>)}
+  </div>
+}))

package/src/renderer/shared/components/chat/VoicePill.css

@@ -0,0 +1,85 @@
+.voice-pill {
+  --vp-accent: var(--text-primary, #f5f5f5); --vp-icon: var(--text-muted, #a1a1aa); --vp-bg: var(--bg-surface-soft, #27272a); --vp-size: 28px; --vp-radius: 14px;
+  --vp-reach: 8px; --vp-extra: 0px; --vp-clock-w: 0px; --vp-wave-w: 0px; --vp-slide: 0px; --vp-cancel: 0;
+  --vp-stop: 9px; --vp-icon-size: 15px; --vp-time-size: 10px; --vp-open: 200ms; --vp-press: 0.95; --vp-hit: 8px;
+  --vp-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  position: relative; display: inline-grid; place-items: center; isolation: isolate;
+  width: var(--vp-size); height: var(--vp-size); margin: 0; padding: 0; border: 0;
+  border-radius: var(--vp-radius); background: transparent; color: var(--vp-icon); font-family: inherit;
+  cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent; touch-action: none;
+  transition: transform 160ms var(--vp-ease-out), color 150ms ease;
+}
+.voice-pill::before { content: ''; position: absolute; inset: calc(-1 * var(--vp-hit)); }
+.voice-pill[data-state='listening'] { z-index: 1; color: var(--vp-accent); }
+.voice-pill[data-pressed] { transform: scale(var(--vp-press)); }
+.voice-pill:disabled { opacity: 0.55; cursor: default; pointer-events: none; }
+.voice-pill__capsule {
+  position: absolute; inset: 0 0 0 calc(-1 * (var(--vp-reach) + var(--vp-extra)));
+  border-radius: var(--vp-radius); background: var(--vp-bg);
+  clip-path: inset(0 0 0 calc(var(--vp-reach) + var(--vp-extra)) round var(--vp-radius)); pointer-events: none;
+  transition: clip-path var(--vp-open) var(--vp-ease-out), background-color 150ms ease;
+}
+@media (hover: hover) and (pointer: fine) {
+  .voice-pill[data-state='idle']:not(:disabled):hover .voice-pill__capsule { background: color-mix(in srgb, var(--vp-icon) 10%, var(--vp-bg)); }
+}
+.voice-pill[data-state='listening'] .voice-pill__capsule { clip-path: inset(0 0 round var(--vp-radius)); }
+.voice-pill__time {
+  position: absolute; top: 0; bottom: 0; right: 100%; display: grid; place-items: center; width: var(--vp-clock-w); box-sizing: border-box;
+  color: var(--vp-accent); font-size: var(--vp-time-size); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1;
+  opacity: 0; filter: blur(2px); transform: translateX(var(--vp-slide)); pointer-events: none;
+  transition: opacity 200ms ease, filter 200ms ease, transform 240ms var(--vp-ease-out);
+}
+.voice-pill[data-state='listening'] .voice-pill__time { opacity: calc(1 - var(--vp-cancel)); filter: blur(0); }
+.voice-pill__wave {
+  position: absolute; top: 18%; right: calc(100% + var(--vp-clock-w)); width: var(--vp-wave-w); height: 64%;
+  opacity: 0; filter: blur(2px); transform: translateX(var(--vp-slide)); pointer-events: none;
+  transition: opacity 200ms ease, filter 200ms ease, transform 240ms var(--vp-ease-out);
+}
+.voice-pill[data-state='listening'] .voice-pill__wave { opacity: calc(1 - var(--vp-cancel)); filter: blur(0); }
+.voice-pill__cancel {
+  position: absolute; top: 0; bottom: 0; right: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
+  width: var(--vp-extra); color: var(--vp-accent); font-size: var(--vp-time-size); font-weight: 500; line-height: 1;
+  opacity: var(--vp-cancel); pointer-events: none;
+}
+.voice-pill[data-sliding] .voice-pill__time, .voice-pill[data-sliding] .voice-pill__wave, .voice-pill[data-sliding] .voice-pill__glyph { transition-property: opacity, filter; }
+.voice-pill__glyph { position: relative; display: grid; place-items: center; width: var(--vp-size); height: var(--vp-size); transform: translateX(var(--vp-slide)); transition: transform 240ms var(--vp-ease-out); }
+.voice-pill__glyph > * { grid-area: 1 / 1; transition: opacity 200ms ease, filter 200ms ease, transform 200ms var(--vp-ease-out); }
+.voice-pill__mic { display: inline-flex; }
+.voice-pill__stop { width: var(--vp-stop); height: var(--vp-stop); border-radius: 22%; background: currentColor; opacity: 0; filter: blur(2px); transform: scale(0.6); }
+.voice-pill[data-state='listening'] .voice-pill__mic { opacity: 0; filter: blur(2px); transform: scale(0.7); }
+.voice-pill[data-state='listening'] .voice-pill__stop { opacity: 1; filter: blur(0); transform: scale(1); }
+.voice-pill[data-input='key'] .voice-pill__capsule, .voice-pill[data-input='key'] .voice-pill__time, .voice-pill[data-input='key'] .voice-pill__glyph > * { transition-duration: 0ms; }
+.voice-pill:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: 3px; }
+.composer-voice-feedback {
+  margin: 8px 4px 0; color: var(--text-muted); font-size: 12px; line-height: 1.5;
+  overflow-wrap: anywhere;
+}
+/* VoicePill owns the microphone appearance and state; the composer owns placement. */
+#chat-form:has(.voice-pill.composer-voice-pill) {
+  /* Reserve capsule space immediately; only the capsule itself should expand. */
+  transition-property: background-color, border-color, box-shadow;
+}
+#chat-form .voice-pill.composer-voice-pill {
+  grid-column: 4; grid-row: 3;
+  width: var(--vp-size); height: var(--vp-size); display: inline-grid; justify-self: end; align-self: center;
+  border: 0; border-radius: var(--vp-radius); padding: 0; background: transparent; color: var(--vp-icon);
+  -webkit-app-region: no-drag;
+  transition: transform 160ms var(--vp-ease-out), color 150ms ease;
+}
+#chat-form .voice-pill.composer-voice-pill[data-state='listening'] { color: var(--vp-accent); }
+#chat-form .voice-pill.composer-voice-pill[data-pressed] { transform: scale(var(--vp-press)); }
+#chat-form:not(:has(.mint-attachment)) .composer-voice-pill { grid-row: 2; }
+#chat-form:has(.voice-pill.composer-voice-pill[data-state='listening']) { grid-template-columns: 32px 32px minmax(0, 1fr) 118px 32px; }
+#chat-form.has-live-btn:has(.voice-pill.composer-voice-pill[data-state='listening']) { grid-template-columns: 32px 32px minmax(0, 1fr) 118px 32px 32px; }
+@media (prefers-reduced-motion: reduce) {
+  .voice-pill, #chat-form .voice-pill.composer-voice-pill[data-pressed] { transform: none !important; transition: color 150ms ease; }
+  .voice-pill__capsule { transition: background-color 150ms ease; }
+  .voice-pill__glyph > * { filter: none !important; transform: none !important; transition: opacity 200ms ease; }
+  .voice-pill__time, .voice-pill__wave, .voice-pill__glyph { filter: none !important; transition-property: opacity; }
+}
+@media (forced-colors: active) {
+  .voice-pill { border: 1px solid ButtonText; }
+  .voice-pill:focus-visible { outline-color: Highlight; }
+  .voice-pill__stop { background: ButtonText; }
+}

package/src/renderer/shared/components/chat/VoicePill.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+export type VoiceStopReason = 'release' | 'tap' | 'key' | 'escape' | 'blur' | 'cancel' | 'disabled' | 'mic-denied' | 'unmount'
+export interface VoicePillProps {
+  accentColor?: string; iconColor?: string; background?: string; size?: number; shape?: 'pill' | 'rounded'; reach?: number
+  showTime?: boolean; waveform?: boolean; slideToCancel?: boolean; cancelDistance?: number; attack?: number; release?: number
+  sensitivity?: number; floor?: number; openDuration?: number; pressScale?: number; mode?: 'auto' | 'hold' | 'toggle'; holdAfter?: number
+  reactive?: 'simulated' | 'mic'; disabled?: boolean; ariaLabel?: string; className?: string
+  onStart?: (event: { source: 'simulated' | 'mic' }) => void | boolean | Promise<void | boolean>
+  onStop?: (event: { reason: VoiceStopReason; duration: number }) => void
+  active?: boolean; id?: string; title?: string
+}
+export default function VoicePill(props: VoicePillProps): ReactNode