@swarmclawai/swarmclaw 0.6.7 → 0.7.0

package/src/components/auth/access-key-gate.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { setStoredAccessKey } from '@/lib/api-client'
 import { fetchWithTimeout } from '@/lib/fetch-timeout'
+import { copyTextToClipboard } from '@/lib/clipboard'
 
 interface AccessKeyGateProps {
   onAuthenticated: () => void
@@ -42,7 +43,8 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
 
   const handleCopyKey = async () => {
     try {
-      await navigator.clipboard.writeText(generatedKey)
+      const copiedKey = await copyTextToClipboard(generatedKey)
+      if (!copiedKey) return
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch {
@@ -121,12 +123,9 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
         />
       </div>
 
-      <div
-        className="relative max-w-[440px] w-full text-center"
-        style={{ animation: 'fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)' }}
-      >
+      <div className="relative max-w-[440px] w-full text-center">
         {/* Lock / Key icon */}
-        <div className="flex justify-center mb-6">
+        <div className="flex justify-center mb-6" style={{ animation: 'spring-in 0.6s var(--ease-spring)' }}>
           <div className="relative w-12 h-12 flex items-center justify-center">
             <svg
               width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -151,15 +150,17 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
         {firstTime ? (
           /* ── First-time setup: show the generated key ── */
           <>
-            <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
-              Your Access Key
-            </h1>
-            <p className="text-[14px] text-text-2 mb-8">
-              This key was generated for your server. Copy it somewhere safe — you&apos;ll need it to connect from other devices.
-            </p>
+            <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.1s both' }}>
+              <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
+                Your Access Key
+              </h1>
+              <p className="text-[14px] text-text-2 mb-8">
+                This key was generated for your server. Copy it somewhere safe — you&apos;ll need it to connect from other devices.
+              </p>
+            </div>
 
             {/* Key display */}
-            <div className="mb-3">
+            <div className="mb-3" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both' }}>
               <div
                 className="inline-flex items-center gap-3 px-5 py-3.5 rounded-[14px] border border-white/[0.08] bg-surface
                   cursor-pointer hover:border-accent-bright/20 transition-all duration-200"
@@ -185,7 +186,7 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
               </div>
             </div>
 
-            <div className="relative h-5 mb-8">
+            <div className="relative h-5 mb-8" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
               <p
                 className="absolute inset-x-0 text-[12px] transition-all duration-300"
                 style={{
@@ -207,56 +208,64 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
               </p>
             </div>
 
-            <button
-              onClick={handleClaimKey}
-              disabled={loading}
-              className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
-                cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
-                shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
-            >
-              {loading ? 'Connecting...' : 'Continue'}
-            </button>
+            <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
+              <button
+                onClick={handleClaimKey}
+                disabled={loading}
+                className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
+                  cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
+                  shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
+              >
+                {loading ? 'Connecting...' : 'Continue'}
+              </button>
+            </div>
           </>
         ) : (
           /* ── Returning user: enter key ── */
           <>
-            <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
-              Connect
-            </h1>
-            <p className="text-[14px] text-text-2 mb-2">
-              Enter the access key to connect to this server.
-            </p>
-            <p className="text-[12px] text-text-3 mb-8">
-              You can find it in <code className="text-text-2">.env.local</code> in the project root.
-            </p>
+            <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.1s both' }}>
+              <h1 className="font-display text-[36px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
+                Connect
+              </h1>
+              <p className="text-[14px] text-text-2 mb-2">
+                Enter the access key to connect to this server.
+              </p>
+              <p className="text-[12px] text-text-3 mb-8">
+                You can find it in <code className="text-text-2">.env.local</code> in the project root.
+              </p>
+            </div>
 
             <form onSubmit={handleSubmit} className="flex flex-col items-center gap-4">
-              <input
-                type="password"
-                value={key}
-                onChange={(e) => { setKey(e.target.value); setError('') }}
-                placeholder="Access key"
-                autoFocus
-                autoComplete="off"
-                className="w-full max-w-[320px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
-                  text-text text-[16px] text-center font-mono outline-none
-                  transition-all duration-200 placeholder:text-text-3/70
-                  focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
-              />
+              <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both', width: '100%', display: 'flex', justifyContent: 'center' }}>
+                <input
+                  type="password"
+                  value={key}
+                  onChange={(e) => { setKey(e.target.value); setError('') }}
+                  placeholder="Access key"
+                  autoFocus
+                  autoComplete="off"
+                  className="w-full max-w-[320px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
+                    text-text text-[16px] text-center font-mono outline-none
+                    transition-all duration-200 placeholder:text-text-3/70
+                    focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
+                />
+              </div>
 
               {error && (
-                <p className="text-[13px] text-red-400">{error}</p>
+                <p className="text-[13px] text-red-400" style={{ animation: 'ai-shake 0.5s' }}>{error}</p>
               )}
 
-              <button
-                type="submit"
-                disabled={!key.trim() || loading}
-                className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
-                  cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
-                  shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
-              >
-                {loading ? 'Connecting...' : 'Connect'}
-              </button>
+              <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
+                <button
+                  type="submit"
+                  disabled={!key.trim() || loading}
+                  className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
+                    cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
+                    shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
+                >
+                  {loading ? 'Connecting...' : 'Connect'}
+                </button>
+              </div>
             </form>
           </>
         )}

package/src/components/auth/user-picker.tsx

@@ -39,11 +39,10 @@ export function UserPicker() {
           }} />
       </div>
 
-      <div className="relative max-w-[420px] w-full text-center"
-        style={{ animation: 'fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)' }}>
+      <div className="relative max-w-[420px] w-full text-center">
 
         {/* Sparkle icon */}
-        <div className="flex justify-center mb-6">
+        <div className="flex justify-center mb-6" style={{ animation: 'spring-in 0.6s var(--ease-spring)' }}>
           <div className="relative w-12 h-12">
             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" className="text-accent-bright"
               style={{ animation: 'sparkle-spin 8s linear infinite' }}>
@@ -54,29 +53,33 @@ export function UserPicker() {
           </div>
         </div>
 
-        <h1 className="font-display text-[42px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
-          Welcome
-        </h1>
-        <p className="text-[15px] text-text-2 mb-10">
-          What should we call you?
-        </p>
+        <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.1s both' }}>
+          <h1 className="font-display text-[42px] font-800 leading-[1.05] tracking-[-0.04em] mb-3">
+            Welcome
+          </h1>
+          <p className="text-[15px] text-text-2 mb-10">
+            What should we call you?
+          </p>
+        </div>
 
         <form onSubmit={handleSubmit} className="flex flex-col items-center gap-5">
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder="Your name"
-            autoFocus
-            className="w-full max-w-[280px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
-              text-text text-[18px] text-center font-display font-600 outline-none
-              transition-all duration-200 placeholder:text-text-3/70
-              focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
-            style={{ fontFamily: 'inherit' }}
-          />
+          <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.2s both', width: '100%', display: 'flex', justifyContent: 'center' }}>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Your name"
+              autoFocus
+              className="w-full max-w-[280px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
+                text-text text-[18px] text-center font-display font-600 outline-none
+                transition-all duration-200 placeholder:text-text-3/70
+                focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
 
           {/* Avatar picker */}
-          <div className="flex flex-col items-center gap-3">
+          <div className="flex flex-col items-center gap-3" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.3s both' }}>
             <AgentAvatar seed={avatarSeed || null} name={name || '?'} size={64} />
             <div className="flex items-center gap-2">
               <input
@@ -99,16 +102,18 @@ export function UserPicker() {
             </div>
           </div>
 
-          <button
-            type="submit"
-            disabled={!name.trim()}
-            className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
-              cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
-              shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
-            style={{ fontFamily: 'inherit' }}
-          >
-            Get Started
-          </button>
+          <div style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.4s both' }}>
+            <button
+              type="submit"
+              disabled={!name.trim()}
+              className="px-12 py-4 rounded-[16px] border-none bg-accent-bright text-white text-[16px] font-display font-600
+                cursor-pointer hover:brightness-110 active:scale-[0.97] transition-all duration-200
+                shadow-[0_6px_28px_rgba(99,102,241,0.3)] disabled:opacity-30"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Get Started
+            </button>
+          </div>
         </form>
       </div>
     </div>

package/src/components/chat/activity-moment.tsx

@@ -7,6 +7,7 @@ const NOTABLE_TOOLS: Record<string, { label: string; color: string; icon: 'brain
   memory_tool: { label: 'Committed to memory', color: '#A855F7', icon: 'brain' },
   manage_tasks: { label: 'Created a task', color: '#EC4899', icon: 'clipboard' },
   manage_schedules: { label: 'Scheduled something', color: '#EC4899', icon: 'clipboard' },
+  schedule_wake: { label: 'Set a reminder', color: '#F59E0B', icon: 'clipboard' },
   manage_agents: { label: 'Created an agent', color: '#EC4899', icon: 'clipboard' },
   delegate_to_claude_code: { label: 'Delegated to Claude Code', color: '#38BDF8', icon: 'delegate' },
   delegate_to_codex_cli: { label: 'Delegated to Codex', color: '#38BDF8', icon: 'delegate' },
@@ -24,6 +25,7 @@ function extractSnippet(toolName: string, toolInput: string): string | null {
     if ((toolName === 'memory' || toolName === 'memory_tool') && parsed.key) return parsed.key
     if (toolName === 'manage_tasks' && parsed.title) return parsed.title
     if (toolName === 'manage_schedules' && parsed.name) return parsed.name
+    if (toolName === 'schedule_wake' && parsed.message) return parsed.message
     if (toolName === 'manage_agents' && parsed.name) return parsed.name
     if (toolName === 'delegate_to_agent' && (parsed.agentName || parsed.agentId)) return parsed.agentName || parsed.agentId
     if (toolName === 'check_delegation_status' && parsed.agentName) return parsed.agentName

package/src/components/chat/chat-area.tsx

@@ -21,6 +21,7 @@ import { HeartbeatHistoryPanel } from './heartbeat-history-panel'
 import { Dropdown, DropdownItem } from '@/components/shared/dropdown'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
+import { api } from '@/lib/api-client'
 
 const PROMPT_SUGGESTIONS = [
   { text: 'What can you help me with?', icon: 'book', gradient: 'from-[#6366F1]/10 to-[#818CF8]/5' },
@@ -66,6 +67,15 @@ export function ChatArea() {
   const [heartbeatHistoryOpen, setHeartbeatHistoryOpen] = useState(false)
   const [messagesLoading, setMessagesLoading] = useState(true)
   const [connectorFilter, setConnectorFilter] = useState<string | null>(null)
+  const [pluginChatActions, setPluginChatActions] = useState<Array<{ id: string; label: string; action: string; value: string; tooltip?: string }>>([])
+
+  useEffect(() => {
+    if (sessionId) {
+      api<Array<{ id: string; label: string; action: string; value: string; tooltip?: string }>>('GET', '/plugins/ui?type=chat_actions').then(actions => {
+        if (Array.isArray(actions)) setPluginChatActions(actions)
+      }).catch(() => {})
+    }
+  }, [sessionId])
 
   // Collect unique connector sources from messages for filter UI
   const { connectorSources, hasDirectMessages } = useMemo(() => {
@@ -421,6 +431,7 @@ export function ChatArea() {
         streaming={streamingForThisSession}
         onSend={sendMessage}
         onStop={stopStreaming}
+        pluginChatActions={pluginChatActions}
       />
 
       <Dropdown open={menuOpen} onClose={() => setMenuOpen(false)}>

package/src/components/chat/chat-header.tsx

@@ -5,7 +5,6 @@ import type { Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
 import { IconButton } from '@/components/shared/icon-button'
-import { UsageBadge } from '@/components/shared/usage-badge'
 import { ChatToolToggles } from './chat-tool-toggles'
 import { api } from '@/lib/api-client'
 import {
@@ -17,6 +16,7 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ModelCombobox } from '@/components/shared/model-combobox'
 import { toast } from 'sonner'
 import type { ProviderType } from '@/types'
+import { copyTextToClipboard } from '@/lib/clipboard'
 import { useWs } from '@/hooks/use-ws'
 
 function shortPath(p: string): string {
@@ -67,7 +67,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const toggleSound = useChatStore((s) => s.toggleSound)
   const debugOpen = useChatStore((s) => s.debugOpen)
   const setDebugOpen = useChatStore((s) => s.setDebugOpen)
-  const lastUsage = useChatStore((s) => s.lastUsage)
   const agentStatus = useChatStore((s) => s.agentStatus)
   const agents = useAppStore((s) => s.agents)
   const tasks = useAppStore((s) => s.tasks)
@@ -109,18 +108,50 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const renameContainerRef = useRef<HTMLSpanElement>(null)
   const setWalletPanelAgentId = useAppStore((s) => s.setWalletPanelAgentId)
   const [walletBalance, setWalletBalance] = useState<number | null>(null)
+  const [headerWidgets, setHeaderWidgets] = useState<Array<{ id: string; label: string; icon?: string }>>([])
+
+  useEffect(() => {
+    api<Array<{ id: string; label: string; icon?: string }>>('GET', `/plugins/ui?type=header&sessionId=${session.id}`).then(widgets => {
+      if (Array.isArray(widgets)) setHeaderWidgets(widgets)
+    }).catch(() => {})
+  }, [session.id])
 
   const fetchWalletBalance = useCallback(async () => {
-    if (!agent?.walletId) { setWalletBalance(null); return }
+    if (!agent?.walletId) {
+      setWalletBalance(null)
+      return
+    }
     try {
       const data = await api<{ balanceSol?: number }>('GET', `/wallets/${agent.walletId}`)
       setWalletBalance(data.balanceSol ?? null)
-    } catch { setWalletBalance(null) }
+    } catch {
+      setWalletBalance(null)
+    }
   }, [agent?.walletId])
 
-  useEffect(() => { fetchWalletBalance() }, [fetchWalletBalance])
+  useEffect(() => {
+    void fetchWalletBalance()
+  }, [fetchWalletBalance])
   useWs('wallets', fetchWalletBalance)
 
+
+  const visibleHeaderWidgets = useMemo(() => {
+    const seen = new Set<string>()
+    return headerWidgets.filter((widget) => {
+      const key = widget.id || widget.label
+      if (seen.has(key)) return false
+      seen.add(key)
+      return true
+    })
+  }, [headerWidgets])
+
+  const handleHeaderWidgetClick = (widgetId: string) => {
+    if (widgetId === 'wallet-status') {
+      if (agent?.id) setWalletPanelAgentId(agent.id)
+      setActiveView('wallets')
+    }
+  }
+
   // Find linked task for this session
   const linkedTask = useMemo(() => {
     return Object.values(tasks).find((t) => t.sessionId === session.id)
@@ -156,9 +187,11 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
 
   const handleCopySessionId = () => {
     if (!resumeHandle) return
-    navigator.clipboard.writeText(resumeHandle.command)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    void copyTextToClipboard(resumeHandle.command).then((copiedCommand) => {
+      if (!copiedCommand) return
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
   }
 
   const handleDismissResumeHandle = async (e: React.MouseEvent) => {
@@ -606,21 +639,37 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
           {/* Metadata tray: wallet · model · path · status */}
           <div className="flex items-center gap-1.5 min-w-0 overflow-hidden">
             <span className="text-text-3/10 text-[10px] select-none shrink-0">/</span>
-            {walletBalance !== null && (
-              <>
+            {visibleHeaderWidgets.map((widget) => {
+              const actionable = widget.id === 'wallet-status'
+              const walletLabel = walletBalance !== null
+                ? `${walletBalance.toFixed(3)} SOL`
+                : (widget.label || 'Wallet')
+              return (
                 <button
+                  key={widget.id}
                   type="button"
-                  onClick={() => { setWalletPanelAgentId(agent!.id); setActiveView('wallets') }}
-                  className="inline-flex items-center gap-1 shrink-0 bg-transparent border-none p-0.5 rounded-[4px] cursor-pointer text-[11px] text-text-3/45 font-mono hover:text-text-3/70 hover:bg-white/[0.04] transition-colors"
-                  title="View wallet"
+                  onClick={actionable ? () => handleHeaderWidgetClick(widget.id) : undefined}
+                  className={`inline-flex items-center gap-1 shrink-0 bg-transparent border-none p-0.5 rounded-[4px] text-[11px] font-mono transition-colors ${
+                    actionable ? 'cursor-pointer text-text-3/45 hover:text-text-3/70 hover:bg-white/[0.04]' : 'cursor-default text-text-3/55'
+                  }`}
+                  title={actionable ? 'View wallet' : widget.label}
                 >
-                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                    <rect x="2" y="6" width="20" height="14" rx="2" /><path d="M22 10H18a2 2 0 0 0 0 4h4" />
-                  </svg>
-                  {walletBalance.toFixed(3)} SOL
+                  {actionable ? (
+                    <>
+                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <rect x="2" y="6" width="20" height="14" rx="2" />
+                        <path d="M22 10H18a2 2 0 0 0 0 4h4" />
+                      </svg>
+                      {walletLabel}
+                    </>
+                  ) : (
+                    widget.label
+                  )}
                 </button>
-                <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
-              </>
+              )
+            })}
+            {visibleHeaderWidgets.length > 0 && (
+              <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
             )}
             {modelName && (
               <div className="relative shrink-0" ref={modelSwitcherRef}>
@@ -668,12 +717,6 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 )}
               </div>
             )}
-            {lastUsage && !streaming && (
-              <>
-                <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
-                <UsageBadge {...lastUsage} />
-              </>
-            )}
             <button
               type="button"
               onClick={() => { api('POST', '/files/open', { path: session.cwd }).catch(() => {}) }}
@@ -855,6 +898,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 <span className={`w-1.5 h-1.5 rounded-full ${missionPaused ? 'bg-amber-300' : 'bg-emerald-400'}`} />
                 {missionPaused ? 'Paused' : 'Live'}
               </button>
+
               <button
                 onClick={handleToggleMissionMode}
                 disabled={mainLoopSaving}

package/src/components/chat/chat-tool-toggles.tsx

@@ -8,8 +8,8 @@ import type { ToolDefinition } from '@/lib/tool-definitions'
 import type { Session } from '@/types'
 
 const TOOL_GROUPS: { label: string; tools: ToolDefinition[] }[] = [
-  { label: 'Tools', tools: AVAILABLE_TOOLS },
-  { label: 'Platform', tools: PLATFORM_TOOLS },
+  { label: 'Plugins', tools: AVAILABLE_TOOLS },
+  { label: 'Platform Plugins', tools: PLATFORM_TOOLS },
 ]
 
 const TOTAL_TOOL_COUNT = AVAILABLE_TOOLS.length + PLATFORM_TOOLS.length

package/src/components/chat/checkpoint-timeline.tsx

@@ -0,0 +1,112 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+import { toast } from 'sonner'
+
+interface Checkpoint {
+  checkpointId: string
+  parentCheckpointId?: string
+  metadata: Record<string, unknown>
+  createdAt: number
+  values?: Record<string, unknown>
+}
+
+interface Props {
+  sessionId: string
+}
+
+export function CheckpointTimeline({ sessionId }: Props) {
+  const [checkpoints, setCheckpoints] = useState<Checkpoint[]>([])
+  const [loading, setLoading] = useState(true)
+  const [restoringId, setRestoringId] = useState<string | null>(null)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      const data = await api<Checkpoint[]>('GET', `/sessions/${sessionId}/checkpoints`)
+      setCheckpoints(data)
+    } catch (err) {
+      console.error('Failed to load checkpoints', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const handleRestore = async (checkpoint: Checkpoint) => {
+    if (!confirm('Restore session to this point? This will delete all subsequent history.')) return
+    
+    setRestoringId(checkpoint.checkpointId)
+    try {
+      await api('POST', `/sessions/${sessionId}/restore`, {
+        checkpointId: checkpoint.checkpointId,
+        timestamp: checkpoint.createdAt
+      })
+      toast.success('Session restored successfully')
+      await loadSessions()
+      await load()
+    } catch (err) {
+      toast.error('Failed to restore session')
+      console.error(err)
+    } finally {
+      setRestoringId(null)
+    }
+  }
+
+  if (loading) {
+    return <div className="p-8 text-center text-text-3 text-[13px]">Retrieving history...</div>
+  }
+
+  if (checkpoints.length === 0) {
+    return (
+      <div className="p-8 text-center">
+        <p className="text-text-3 text-[13px]">No checkpoints found for this session.</p>
+        <p className="text-[11px] text-text-3/50 mt-1">Only LangGraph-orchestrated sessions support time travel.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 p-5">
+      {checkpoints.map((cp, i) => (
+        <div 
+          key={cp.checkpointId}
+          className="group relative flex flex-col gap-2 p-3 rounded-[12px] border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] transition-all"
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex flex-col">
+              <span className="text-[11px] font-700 text-accent-bright uppercase tracking-wider">
+                {i === 0 ? 'Current State' : `Point ${checkpoints.length - i}`}
+              </span>
+              <span className="text-[10px] text-text-3 font-mono">
+                {new Date(cp.createdAt).toLocaleString()}
+              </span>
+            </div>
+            {i > 0 && (
+              <button
+                onClick={() => handleRestore(cp)}
+                disabled={!!restoringId}
+                className="px-3 py-1 rounded-[6px] bg-accent-soft text-accent-bright text-[11px] font-600 border-none cursor-pointer hover:brightness-110 disabled:opacity-50"
+              >
+                {restoringId === cp.checkpointId ? 'Restoring...' : 'Restore here'}
+              </button>
+            )}
+          </div>
+          
+          {cp.values && Array.isArray(cp.values.messages) && cp.values.messages.length > 0 && (
+            <div className="mt-1 p-2 rounded-[8px] bg-black/20 text-[11px] text-text-3 line-clamp-2 italic">
+              Last message: {String((cp.values.messages[cp.values.messages.length - 1] as Record<string, unknown>)?.content ?? 'Empty state')}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/chat/code-block.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useCallback, useState, type ReactNode } from 'react'
+import { copyTextToClipboard } from '@/lib/clipboard'
 
 function extractText(node: ReactNode): string {
   if (typeof node === 'string') return node
@@ -29,7 +30,8 @@ export function CodeBlock({ children, className }: Props) {
   const getText = useCallback(() => extractText(children), [children])
 
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(getText()).then(() => {
+    void copyTextToClipboard(getText()).then((copiedText) => {
+      if (!copiedText) return
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     })