@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/shared/agent-picker-list.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { CheckIcon } from '@/components/shared/check-icon'
+import type { Agent } from '@/types'
+
+interface Props {
+  agents: Agent[]
+  /** Currently selected agent ID(s). String for single-select, string[] for multi-select. */
+  selected: string | string[]
+  /** Called when an agent is clicked. In multi mode, caller should toggle; in single mode, set. */
+  onSelect: (agentId: string) => void
+  /** Show a "None" option at the top for optional single-select */
+  noneOption?: { label: string; onSelect: () => void }
+  /** Show orchestrator badge */
+  showOrchBadge?: boolean
+  /** Max height of the scrollable list */
+  maxHeight?: number
+}
+
+export function AgentPickerList({
+  agents,
+  selected,
+  onSelect,
+  noneOption,
+  showOrchBadge,
+  maxHeight = 220,
+}: Props) {
+  const isSelected = (id: string) =>
+    Array.isArray(selected) ? selected.includes(id) : selected === id
+  const noneSelected = Array.isArray(selected) ? selected.length === 0 : !selected
+
+  if (agents.length === 0 && !noneOption) {
+    return <p className="text-[13px] text-text-3">No agents configured.</p>
+  }
+
+  return (
+    <div
+      className="flex flex-col gap-1 rounded-[14px] border border-white/[0.06] bg-surface p-1.5 overflow-y-auto"
+      style={{ maxHeight }}
+    >
+      {noneOption && (
+        <button
+          onClick={noneOption.onSelect}
+          className={`relative flex items-center gap-3 px-3 py-2.5 rounded-[10px] cursor-pointer transition-all w-full text-left border-none
+            ${noneSelected ? 'bg-accent-soft' : 'bg-transparent hover:bg-white/[0.03]'}`}
+          style={{ fontFamily: 'inherit' }}
+        >
+          {noneSelected && (
+            <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
+          )}
+          <div className="w-[28px] h-[28px] rounded-full bg-white/[0.06] flex items-center justify-center shrink-0">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className={noneSelected ? 'text-accent-bright' : 'text-text-3'}>
+              <circle cx="12" cy="12" r="10" /><line x1="8" y1="12" x2="16" y2="12" />
+            </svg>
+          </div>
+          <span className={`text-[13px] font-600 flex-1 ${noneSelected ? 'text-accent-bright' : 'text-text-2'}`}>
+            {noneOption.label}
+          </span>
+        </button>
+      )}
+      {agents.map((a) => {
+        const active = isSelected(a.id)
+        return (
+          <button
+            key={a.id}
+            onClick={() => onSelect(a.id)}
+            className={`relative flex items-center gap-3 px-3 py-2.5 rounded-[10px] cursor-pointer transition-all w-full text-left border-none
+              ${active ? 'bg-accent-soft' : 'bg-transparent hover:bg-white/[0.03]'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {active && (
+              <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
+            )}
+            <AgentAvatar seed={a.avatarSeed || null} name={a.name} size={28} />
+            <span className={`text-[13px] font-600 flex-1 truncate ${active ? 'text-accent-bright' : 'text-text-2'}`}>
+              {a.name}
+            </span>
+            {showOrchBadge && a.isOrchestrator && (
+              <span className="text-[10px] text-text-3/60 flex items-center gap-0.5">
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M16 3h5v5"/><path d="M21 3l-7 7"/><path d="M8 21H3v-5"/><path d="M3 21l7-7"/></svg>
+              </span>
+            )}
+            {active && <CheckIcon className="text-accent-bright shrink-0" />}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/shared/agent-switch-dialog.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+
+export function AgentSwitchDialog() {
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const [selectedIdx, setSelectedIdx] = useState(0)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const agents = useAppStore((s) => s.agents)
+  const currentAgentId = useAppStore((s) => s.currentAgentId)
+  const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
+
+  // Global Cmd+Shift+A / Ctrl+Shift+A listener
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'a') {
+        e.preventDefault()
+        setOpen((v) => !v)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  // Reset on open
+  useEffect(() => {
+    if (open) {
+      setQuery('')
+      setSelectedIdx(0)
+      setTimeout(() => inputRef.current?.focus(), 50)
+    }
+  }, [open])
+
+  const filtered = useMemo(() => {
+    const all = Object.values(agents).filter((a) => !a.trashedAt)
+    if (!query.trim()) return all
+    const q = query.toLowerCase()
+    return all.filter(
+      (a) => a.name.toLowerCase().includes(q) || (a.description || '').toLowerCase().includes(q),
+    )
+  }, [agents, query])
+
+  const handleSelect = useCallback((agentId: string) => {
+    setOpen(false)
+    void setCurrentAgent(agentId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setSelectedIdx((i) => Math.min(i + 1, filtered.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setSelectedIdx((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter' && filtered[selectedIdx]) {
+      e.preventDefault()
+      handleSelect(filtered[selectedIdx].id)
+    }
+  }
+
+  // Scroll selected into view
+  useEffect(() => {
+    if (!listRef.current) return
+    const el = listRef.current.children[selectedIdx] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [selectedIdx])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-[440px] p-0 bg-[#1a1a2e]/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+        onKeyDown={handleKeyDown}
+      >
+        <DialogTitle className="sr-only">Switch Agent</DialogTitle>
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-white/[0.06]">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3 shrink-0">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(e) => { setQuery(e.target.value); setSelectedIdx(0) }}
+            placeholder="Switch agent..."
+            className="flex-1 bg-transparent border-none outline-none text-[14px] text-text placeholder:text-text-3/60 font-[inherit]"
+            autoFocus
+          />
+          <kbd className="px-1.5 py-0.5 rounded-[5px] bg-white/[0.06] border border-white/[0.08] text-[10px] font-mono text-text-3 shrink-0">
+            ESC
+          </kbd>
+        </div>
+
+        {/* Agent list */}
+        <div ref={listRef} className="max-h-[360px] overflow-y-auto py-1">
+          {filtered.length === 0 && (
+            <div className="px-4 py-8 text-center text-[13px] text-text-3/60">
+              No agents found
+            </div>
+          )}
+          {filtered.map((agent, idx) => (
+            <button
+              key={agent.id}
+              onClick={() => handleSelect(agent.id)}
+              onMouseEnter={() => setSelectedIdx(idx)}
+              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left cursor-pointer transition-colors border-none bg-transparent
+                ${idx === selectedIdx ? 'bg-white/[0.06]' : 'hover:bg-white/[0.04]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-[13px] font-500 text-text truncate">{agent.name}</span>
+                  {agent.id === currentAgentId && (
+                    <span className="px-1.5 py-0.5 rounded-[4px] bg-accent-bright/15 text-[10px] font-500 text-accent-bright shrink-0">
+                      current
+                    </span>
+                  )}
+                </div>
+                {agent.description && (
+                  <p className="text-[11px] text-text-3 truncate mt-0.5 m-0">{agent.description}</p>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* Footer hint */}
+        {filtered.length > 0 && (
+          <div className="flex items-center gap-3 px-4 py-2 border-t border-white/[0.06] text-[11px] text-text-3/50">
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px] font-mono">↑↓</kbd>
+              navigate
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px] font-mono">↵</kbd>
+              select
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 rounded bg-white/[0.06] text-[10px] font-mono">esc</kbd>
+              close
+            </span>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/shared/attachment-chip.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import { useState } from 'react'
+import { CodeBlock } from '@/components/chat/code-block'
+
+export const IMAGE_ATTACH_RE = /\.(png|jpg|jpeg|gif|webp|svg|bmp|ico)$/i
+export const PREVIEWABLE_ATTACH_RE = /\.(html?|svg)$/i
+export const CODE_ATTACH_RE = /\.(js|jsx|ts|tsx|css|json|md|txt|py|sh|rb|go|rs|c|cpp|h|java|yaml|yml|toml|xml|sql|graphql)$/i
+export const PDF_ATTACH_RE = /\.pdf$/i
+export const FILE_TYPE_COLORS: Record<string, string> = {
+  html: 'text-orange-400', htm: 'text-orange-400', svg: 'text-emerald-400',
+  js: 'text-yellow-400', jsx: 'text-yellow-400', ts: 'text-blue-400', tsx: 'text-blue-400',
+  py: 'text-green-400', json: 'text-amber-300', css: 'text-purple-400', scss: 'text-pink-400',
+  md: 'text-text-2', txt: 'text-text-3', pdf: 'text-red-400',
+}
+
+export function parseAttachmentUrl(filePath?: string, fileUrl?: string) {
+  const url = fileUrl || (filePath ? `/api/uploads/${filePath.split('/').pop()}` : '')
+  const rawName = filePath?.split('/').pop() || fileUrl?.split('/').pop() || 'file'
+  const filename = rawName.replace(/^[a-f0-9]+-/, '').split('?')[0]
+  return { url, filename }
+}
+
+export function AttachmentChip({ url, filename, isUserMsg }: { url: string; filename: string; isUserMsg?: boolean }) {
+  const isImage = IMAGE_ATTACH_RE.test(filename)
+  const isCode = CODE_ATTACH_RE.test(filename)
+  const isPdf = PDF_ATTACH_RE.test(filename)
+  const [lightbox, setLightbox] = useState(false)
+  const [codePreview, setCodePreview] = useState<string | null>(null)
+  const [codeExpanded, setCodeExpanded] = useState(false)
+
+  if (isImage) {
+    return (
+      <>
+        <img
+          src={url} alt="Attached"
+          loading="lazy"
+          className="max-w-[240px] rounded-[12px] mb-2 border border-white/10 cursor-pointer hover:border-white/25 transition-colors"
+          onClick={() => setLightbox(true)}
+          onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
+        />
+        {lightbox && (
+          <div
+            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm cursor-pointer"
+            onClick={() => setLightbox(false)}
+          >
+            <img src={url} alt="Preview" className="max-w-[90vw] max-h-[90vh] rounded-[12px] shadow-2xl" />
+          </div>
+        )}
+      </>
+    )
+  }
+
+  if (isPdf) {
+    return (
+      <div className="mb-2 rounded-[12px] border border-white/[0.08] bg-[rgba(255,255,255,0.02)] overflow-hidden" style={{ maxWidth: 480 }}>
+        <div className="flex items-center gap-3 px-4 py-2.5">
+          <div className="flex items-center justify-center w-8 h-8 rounded-[8px] shrink-0 bg-red-500/10 text-red-400">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+          </div>
+          <span className="text-[13px] font-500 truncate flex-1">{filename}</span>
+          <a href={url} download={filename} className="text-[11px] font-600 text-text-3 hover:text-text-2 no-underline">Download</a>
+        </div>
+        <iframe src={url} loading="lazy" className="w-full h-[300px] border-t border-white/[0.06]" title={filename} />
+      </div>
+    )
+  }
+
+  const ext = filename.split('.').pop()?.toLowerCase() || ''
+  const colorClass = FILE_TYPE_COLORS[ext] || 'text-text-3'
+  const isPreviewable = PREVIEWABLE_ATTACH_RE.test(filename)
+
+  const chipBg = isUserMsg
+    ? 'bg-[rgba(0,0,0,0.25)] border-white/[0.12]'
+    : 'bg-[rgba(255,255,255,0.04)] border-white/[0.08]'
+  const iconBg = isUserMsg ? 'bg-white/[0.12]' : 'bg-white/[0.05]'
+  const btnBg = isUserMsg
+    ? 'bg-white/[0.12] hover:bg-white/[0.18] text-white/80'
+    : 'bg-white/[0.06] hover:bg-white/[0.10] text-text-3'
+
+  const handleCodePreview = async () => {
+    if (codePreview !== null) { setCodeExpanded(!codeExpanded); return }
+    try {
+      const serveUrl = `/api/files/serve?path=${encodeURIComponent(url.replace('/api/uploads/', ''))}`
+      const res = await fetch(url.startsWith('/api/files/') ? url : serveUrl)
+      if (!res.ok) return
+      const text = await res.text()
+      setCodePreview(text)
+      setCodeExpanded(true)
+    } catch {
+      // ignore
+    }
+  }
+
+  return (
+    <div className="mb-2">
+      <div className={`flex items-center gap-3 px-4 py-2.5 rounded-[12px] border ${chipBg}`}>
+        <div className={`flex items-center justify-center w-8 h-8 rounded-[8px] shrink-0 ${iconBg} ${colorClass}`}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+          </svg>
+        </div>
+        <div className="flex flex-col flex-1 min-w-0">
+          <span className={`text-[13px] font-500 truncate ${isUserMsg ? 'text-white' : 'text-text'}`}>{filename}</span>
+          <span className={`text-[11px] uppercase tracking-wide ${isUserMsg ? 'text-white/50' : 'text-text-3/70'}`}>{ext || 'file'}</span>
+        </div>
+        {isCode && (
+          <button
+            onClick={handleCodePreview}
+            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 border-none cursor-pointer ${
+              isUserMsg ? 'bg-white/[0.15] hover:bg-white/[0.22] text-white' : 'bg-accent-soft hover:bg-accent-soft/80 text-accent-bright'
+            }`}
+          >
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <polyline points="16 18 22 12 16 6" />
+              <polyline points="8 6 2 12 8 18" />
+            </svg>
+            {codeExpanded ? 'Hide' : 'Preview'}
+          </button>
+        )}
+        {isPreviewable && (
+          <a href={url} target="_blank" rel="noopener noreferrer"
+            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 ${
+              isUserMsg ? 'bg-white/[0.15] hover:bg-white/[0.22] text-white' : 'bg-accent-soft hover:bg-accent-soft/80 text-accent-bright'
+            }`}
+            title="Preview in new tab">
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+            Preview
+          </a>
+        )}
+        <a href={url} download={filename}
+          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 ${btnBg}`}>
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" y1="15" x2="12" y2="3" />
+          </svg>
+          Download
+        </a>
+      </div>
+      {isCode && codeExpanded && codePreview !== null && (
+        <div className="mt-1 rounded-[10px] border border-white/[0.06] overflow-hidden" style={{ animation: 'fade-in 0.2s ease' }}>
+          <CodeBlock className={`language-${ext}`}>
+            {codePreview.split('\n').slice(0, codeExpanded ? undefined : 10).join('\n')}
+          </CodeBlock>
+          {codePreview.split('\n').length > 10 && (
+            <button
+              onClick={() => setCodeExpanded((v) => !v)}
+              className="w-full px-3 py-1.5 text-[10px] text-text-3 hover:text-text-2 bg-white/[0.02] hover:bg-white/[0.04] border-none border-t border-white/[0.06] cursor-pointer transition-colors"
+            >
+              {codePreview.split('\n').length > 10 ? `Show all ${codePreview.split('\n').length} lines` : 'Show less'}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/shared/avatar.tsx

@@ -1,8 +1,11 @@
 'use client'
 
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+
 interface Props {
   user: string
   size?: 'xs' | 'sm' | 'md' | 'lg'
+  avatarSeed?: string
 }
 
 const sizes = {
@@ -22,7 +25,13 @@ function userGradient(name: string): string {
   return `linear-gradient(135deg, hsl(${hue}, 70%, 35%), hsl(${(hue + 30) % 360}, 75%, 50%))`
 }
 
-export function Avatar({ user, size = 'md' }: Props) {
+const pixelSizes: Record<string, number> = { xs: 24, sm: 28, md: 36, lg: 72 }
+
+export function Avatar({ user, size = 'md', avatarSeed }: Props) {
+  if (avatarSeed) {
+    return <AgentAvatar seed={avatarSeed} name={user} size={pixelSizes[size] || 36} />
+  }
+
   const initial = (user || '?')[0].toUpperCase()
   return (
     <div

package/src/components/shared/check-icon.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  size?: number
+  className?: string
+}
+
+export function CheckIcon({ size = 14, className }: Props) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}

package/src/components/shared/confirm-dialog.tsx

@@ -35,7 +35,7 @@ export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm',
             className={`flex-1 py-2.5 rounded-[12px] border-none text-[13px] font-600 cursor-pointer active:scale-[0.97] transition-all duration-200
               ${danger
                 ? 'bg-danger text-white shadow-[0_4px_20px_rgba(244,63,94,0.2)]'
-                : 'bg-[#6366F1] text-white shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
+                : 'bg-accent-bright text-white shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
             style={{ fontFamily: 'inherit' }}
           >
             {confirmLabel}

package/src/components/shared/empty-state.tsx

@@ -0,0 +1,32 @@
+interface Props {
+  icon: React.ReactNode
+  title: string
+  subtitle?: string
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+export function EmptyState({ icon, title, subtitle, action }: Props) {
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+      <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
+        {icon}
+      </div>
+      <p className="font-display text-[15px] font-600 text-text-2">{title}</p>
+      {subtitle && <p className="text-[13px] text-text-3/50">{subtitle}</p>}
+      {action && (
+        <button
+          onClick={action.onClick}
+          className="mt-3 px-8 py-3 rounded-[14px] border-none bg-accent-bright text-white
+            text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
+            shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  )
+}

package/src/components/shared/file-preview.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import type { PendingFile } from '@/stores/use-chat-store'
+
+export function FilePreview({ file, onRemove }: { file: PendingFile; onRemove: () => void }) {
+  const isImage = file.file.type.startsWith('image/')
+  return (
+    <div className="relative">
+      {isImage ? (
+        <img
+          src={URL.createObjectURL(file.file)}
+          alt="Preview"
+          className="h-16 rounded-[10px] object-cover border border-white/[0.06]"
+        />
+      ) : (
+        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-[10px] border border-white/[0.06] bg-white/[0.03]">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14 2 14 8 20 8" />
+          </svg>
+          <span className="text-[13px] text-text-2 font-500 truncate max-w-[180px]">{file.file.name}</span>
+        </div>
+      )}
+      <button
+        onClick={onRemove}
+        className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full border border-white/10 bg-raised
+          text-text-2 text-[10px] cursor-pointer flex items-center justify-center
+          hover:bg-danger-soft hover:text-danger hover:border-danger/20 transition-colors"
+      >
+        &times;
+      </button>
+    </div>
+  )
+}

package/src/components/shared/form-styles.ts

@@ -0,0 +1,2 @@
+/** Standard input class for sheet/form inputs */
+export const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"

package/src/components/shared/keyboard-shortcuts-dialog.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+
+interface Shortcut {
+  keys: string[]
+  description: string
+}
+
+interface ShortcutGroup {
+  title: string
+  shortcuts: Shortcut[]
+}
+
+const isMac = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent)
+const MOD = isMac ? '\u2318' : 'Ctrl'
+
+const GROUPS: ShortcutGroup[] = [
+  {
+    title: 'Navigation',
+    shortcuts: [
+      { keys: [MOD, 'K'], description: 'Open search' },
+      { keys: [MOD, 'Shift', 'A'], description: 'Switch agent' },
+      { keys: [MOD, 'N'], description: 'New chat' },
+      { keys: [MOD, 'Shift', 'T'], description: 'Jump to tasks' },
+    ],
+  },
+  {
+    title: 'Chat',
+    shortcuts: [
+      { keys: ['Enter'], description: 'Send message' },
+      { keys: ['Shift', 'Enter'], description: 'New line' },
+      { keys: ['Esc'], description: 'Cancel reply / close' },
+    ],
+  },
+  {
+    title: 'General',
+    shortcuts: [
+      { keys: ['?'], description: 'Show keyboard shortcuts' },
+    ],
+  },
+]
+
+function Kbd({ children }: { children: string }) {
+  return (
+    <kbd className="inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-[5px] bg-white/[0.08] border border-white/[0.1] text-[11px] font-mono text-text-2 leading-none">
+      {children}
+    </kbd>
+  )
+}
+
+export function KeyboardShortcutsDialog() {
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      // Ctrl+/ or Cmd+/
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+        e.preventDefault()
+        setOpen((v) => !v)
+        return
+      }
+      const tag = (e.target as HTMLElement)?.tagName
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+      if ((e.target as HTMLElement)?.isContentEditable) return
+      if (e.key === '?' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        e.preventDefault()
+        setOpen((v) => !v)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        showCloseButton={false}
+        className="sm:max-w-[420px] p-0 bg-[#1a1a2e]/95 backdrop-blur-xl border-white/[0.08] shadow-[0_24px_80px_rgba(0,0,0,0.6)] rounded-[16px] overflow-hidden gap-0"
+      >
+        <DialogTitle className="sr-only">Keyboard shortcuts</DialogTitle>
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-white/[0.06]">
+          <span className="text-[14px] font-600 text-text">Keyboard Shortcuts</span>
+          <kbd className="px-1.5 py-0.5 rounded-[5px] bg-white/[0.06] border border-white/[0.08] text-[10px] font-mono text-text-3">
+            ESC
+          </kbd>
+        </div>
+        <div className="py-2 max-h-[400px] overflow-y-auto">
+          {GROUPS.map((group) => (
+            <div key={group.title} className="px-5 py-2">
+              <h3 className="text-[11px] font-700 uppercase tracking-wider text-text-3/60 mb-2">
+                {group.title}
+              </h3>
+              <div className="flex flex-col gap-1.5">
+                {group.shortcuts.map((shortcut) => (
+                  <div
+                    key={shortcut.description}
+                    className="flex items-center justify-between py-1"
+                  >
+                    <span className="text-[13px] text-text-2">{shortcut.description}</span>
+                    <div className="flex items-center gap-1">
+                      {shortcut.keys.map((key, i) => (
+                        <Kbd key={i}>{key}</Kbd>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}