@swarmclawai/swarmclaw 0.5.3 → 0.6.0

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>
+  )
+}

package/src/components/shared/notification-center.tsx

@@ -34,7 +34,25 @@ const TYPE_ICON_COLORS: Record<AppNotification['type'], string> = {
   error: 'text-red-400',
 }
 
-export function NotificationCenter() {
+function resolveHttpUrl(raw: string | undefined): string | null {
+  if (!raw) return null
+  try {
+    const parsed = new URL(raw)
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:' ? parsed.toString() : null
+  } catch {
+    return null
+  }
+}
+
+export function NotificationCenter({
+  variant = 'icon',
+  align = 'right',
+  direction = 'down',
+}: {
+  variant?: 'icon' | 'row'
+  align?: 'left' | 'right'
+  direction?: 'up' | 'down'
+}) {
   const [open, setOpen] = useState(false)
   const panelRef = useRef<HTMLDivElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -76,27 +94,42 @@ export function NotificationCenter() {
     if (!n.read) {
       markRead(n.id)
     }
-    // If there's an entity, we could navigate - for now just mark as read
+    const actionUrl = resolveHttpUrl(n.actionUrl)
+    if (actionUrl) {
+      window.open(actionUrl, '_blank', 'noopener,noreferrer')
+    }
     setOpen(false)
   }
 
+  const isRow = variant === 'row'
+  const panelAlignClass = align === 'left' ? 'left-0' : 'right-0'
+  const panelDirectionClass = direction === 'up' ? 'bottom-full mb-2' : 'top-full mt-2'
+
   return (
     <div className="relative">
       <button
         ref={buttonRef}
         onClick={() => setOpen((v) => !v)}
-        className="relative flex items-center justify-center w-8 h-8 rounded-[8px] bg-transparent hover:bg-white/[0.05] transition-colors cursor-pointer border-none"
+        className={
+          isRow
+            ? 'relative w-full flex items-center gap-2.5 px-3 py-2 rounded-[10px] text-[13px] font-500 cursor-pointer transition-all bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04] border-none'
+            : 'relative flex items-center justify-center w-8 h-8 rounded-[8px] bg-transparent hover:bg-white/[0.05] transition-colors cursor-pointer border-none'
+        }
         aria-label="Notifications"
         title={unreadCount > 0 ? `${unreadCount} unread notifications` : 'Notifications'}
       >
         {/* Bell icon */}
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-text-2">
+        <svg width={isRow ? '16' : '16'} height={isRow ? '16' : '16'} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={isRow ? 'text-text-3 shrink-0' : 'text-text-2'}>
           <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
           <path d="M13.73 21a2 2 0 0 1-3.46 0" />
         </svg>
+        {isRow && <span className="text-[13px] font-500">Notifications</span>}
         {/* Badge */}
         {unreadCount > 0 && (
-          <span className="absolute -top-0.5 -right-0.5 min-w-[16px] h-4 flex items-center justify-center rounded-full bg-red-500 text-[10px] font-700 text-white px-1 leading-none">
+          <span className={isRow
+            ? 'ml-auto min-w-[18px] h-[18px] flex items-center justify-center rounded-full bg-red-500 text-[10px] font-700 text-white px-1 leading-none'
+            : 'absolute -top-0.5 -right-0.5 min-w-[16px] h-4 flex items-center justify-center rounded-full bg-red-500 text-[10px] font-700 text-white px-1 leading-none'}
+          >
             {unreadCount > 99 ? '99+' : unreadCount}
           </span>
         )}
@@ -105,7 +138,7 @@ export function NotificationCenter() {
       {open && (
         <div
           ref={panelRef}
-          className="absolute right-0 top-full mt-2 w-[340px] max-h-[460px] bg-raised border border-white/[0.06] rounded-[14px] shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl z-90 flex flex-col overflow-hidden"
+          className={`absolute ${panelAlignClass} ${panelDirectionClass} w-[340px] max-h-[460px] bg-raised border border-white/[0.06] rounded-[14px] shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl z-90 flex flex-col overflow-hidden`}
           style={{ animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)' }}
         >
           {/* Header */}
@@ -164,6 +197,11 @@ export function NotificationCenter() {
                           {n.message}
                         </p>
                       )}
+                      {resolveHttpUrl(n.actionUrl) && (
+                        <span className="inline-block mt-1 text-[11px] text-accent-bright/90">
+                          {n.actionLabel || 'Open link'}
+                        </span>
+                      )}
                       {n.entityType && (
                         <span className="inline-block mt-1 text-[10px] text-text-3/40 font-mono">
                           {n.entityType}{n.entityId ? `:${n.entityId.slice(0, 8)}` : ''}