@swarmclawai/swarmclaw 0.6.8 → 0.7.0

package/src/components/agents/agent-card.tsx

@@ -45,6 +45,22 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
   const approvals = useApprovalStore((s) => s.approvals)
   const pendingApprovalCount = Object.values(approvals).filter((a) => a.agentId === agent.id).length
   const [heartbeatPulse, setHeartbeatPulse] = useState(false)
+  const monthlyBudget = typeof agent.monthlyBudget === 'number' && agent.monthlyBudget > 0
+    ? agent.monthlyBudget
+    : null
+  const hasMonthlyBudget = monthlyBudget !== null
+  const spendWindows = [
+    {
+      key: '1h',
+      spend: agent.hourlySpend ?? 0,
+      budget: typeof agent.hourlyBudget === 'number' && agent.hourlyBudget > 0 ? agent.hourlyBudget : null,
+    },
+    {
+      key: '24h',
+      spend: agent.dailySpend ?? 0,
+      budget: typeof agent.dailyBudget === 'number' && agent.dailyBudget > 0 ? agent.dailyBudget : null,
+    },
+  ].filter((entry) => entry.budget !== null)
   useWs(`heartbeat:agent:${agent.id}`, () => {
     setHeartbeatPulse(true)
     setTimeout(() => setHeartbeatPulse(false), 1500)
@@ -226,28 +242,58 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
             <span>Cost: ${agent.totalCost.toFixed(2)}</span>
           )}
         </div>
-        {typeof agent.monthlyBudget === 'number' && agent.monthlyBudget > 0 && (
+        {hasMonthlyBudget && (
           <div className="mt-2">
             <div className="flex items-center justify-between text-[10px] text-text-3/60 mb-1">
-              <span>${(agent.monthlySpend ?? 0).toFixed(2)} / ${agent.monthlyBudget.toFixed(2)}</span>
-              <span className={`font-600 ${(agent.monthlySpend ?? 0) >= agent.monthlyBudget ? 'text-red-400' : 'text-text-3/50'}`}>
+              <span>${(agent.monthlySpend ?? 0).toFixed(2)} / ${monthlyBudget.toFixed(2)}</span>
+              <span className={`font-600 ${(agent.monthlySpend ?? 0) >= monthlyBudget ? 'text-red-400' : 'text-text-3/50'}`}>
                 {agent.budgetAction === 'block' ? 'hard cap' : 'soft cap'}
               </span>
             </div>
-            <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden">
+            <div className="h-1 rounded-full bg-white/[0.06] overflow-hidden relative">
               <div
-                className={`h-full rounded-full transition-all duration-300 ${
-                  (agent.monthlySpend ?? 0) >= agent.monthlyBudget
+                className={`h-full rounded-full transition-all duration-300 relative ${
+                  (agent.monthlySpend ?? 0) >= monthlyBudget
                     ? 'bg-red-400'
-                    : (agent.monthlySpend ?? 0) >= agent.monthlyBudget * 0.8
+                    : (agent.monthlySpend ?? 0) >= monthlyBudget * 0.8
                       ? 'bg-amber-400'
                       : 'bg-accent'
                 }`}
-                style={{ width: `${Math.min(100, ((agent.monthlySpend ?? 0) / agent.monthlyBudget) * 100)}%` }}
-              />
+                style={{ width: `${Math.min(100, ((agent.monthlySpend ?? 0) / monthlyBudget) * 100)}%` }}
+              >
+                {/* Shimmer overlay for active feel */}
+                <div
+                  className="absolute inset-0 w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
+                  style={{ animation: 'shimmer-bar 2s linear infinite' }}
+                />
+              </div>
             </div>
           </div>
         )}
+        {spendWindows.length > 0 && (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {spendWindows.map((entry) => {
+              const budget = entry.budget as number
+              const ratio = budget > 0 ? (entry.spend / budget) : 0
+              const overCap = ratio >= 1
+              const nearCap = !overCap && ratio >= 0.8
+              return (
+                <span
+                  key={entry.key}
+                  className={`text-[10px] px-2 py-0.5 rounded-[6px] border ${
+                    overCap
+                      ? 'text-red-400 border-red-400/25 bg-red-400/[0.06]'
+                      : nearCap
+                        ? 'text-amber-400 border-amber-400/20 bg-amber-400/[0.06]'
+                        : 'text-text-3/70 border-white/[0.08] bg-white/[0.03]'
+                  }`}
+                >
+                  {entry.key}: ${entry.spend.toFixed(2)} / ${budget.toFixed(2)}
+                </span>
+              )
+            })}
+          </div>
+        )}
       </div>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>

package/src/components/agents/agent-sheet.tsx

@@ -14,6 +14,7 @@ import { NATIVE_CAPABILITY_PROVIDER_IDS, NON_LANGGRAPH_PROVIDER_IDS } from '@/li
 import { AgentAvatar } from './agent-avatar'
 import { AgentPickerList } from '@/components/shared/agent-picker-list'
 import { randomSoul } from '@/lib/soul-suggestions'
+import { copyTextToClipboard } from '@/lib/clipboard'
 import { SectionLabel } from '@/components/shared/section-label'
 import { SoulLibraryPicker } from './soul-library-picker'
 import { HintTip } from '@/components/shared/hint-tip'
@@ -117,6 +118,8 @@ export function AgentSheet() {
   const [heartbeatModel, setHeartbeatModel] = useState('')
   const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
   const [budgetEnabled, setBudgetEnabled] = useState(false)
+  const [hourlyBudget, setHourlyBudget] = useState('')
+  const [dailyBudget, setDailyBudget] = useState('')
   const [monthlyBudget, setMonthlyBudget] = useState('')
   const [budgetAction, setBudgetAction] = useState<'warn' | 'block'>('warn')
   const [agentWallet, setAgentWallet] = useState<(Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }) | null>(null)
@@ -201,7 +204,13 @@ export function AgentSheet() {
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
         setHeartbeatPrompt(editing.heartbeatPrompt || '')
-        setBudgetEnabled(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0)
+        setBudgetEnabled(
+          (typeof editing.hourlyBudget === 'number' && editing.hourlyBudget > 0)
+          || (typeof editing.dailyBudget === 'number' && editing.dailyBudget > 0)
+          || (typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0),
+        )
+        setHourlyBudget(typeof editing.hourlyBudget === 'number' && editing.hourlyBudget > 0 ? String(editing.hourlyBudget) : '')
+        setDailyBudget(typeof editing.dailyBudget === 'number' && editing.dailyBudget > 0 ? String(editing.dailyBudget) : '')
         setMonthlyBudget(typeof editing.monthlyBudget === 'number' && editing.monthlyBudget > 0 ? String(editing.monthlyBudget) : '')
         setBudgetAction(editing.budgetAction || 'warn')
         // Load wallet if agent has one
@@ -245,6 +254,8 @@ export function AgentSheet() {
         setHeartbeatModel('')
         setHeartbeatPrompt('')
         setBudgetEnabled(false)
+        setHourlyBudget('')
+        setDailyBudget('')
         setMonthlyBudget('')
         setBudgetAction('warn')
       }
@@ -315,6 +326,9 @@ export function AgentSheet() {
       const url = normalizedEndpoint.trim().replace(/\/+$/, '')
       normalizedEndpoint = /^(https?|wss?):\/\//i.test(url) ? url : `http://${url}`
     }
+    const parsedHourlyBudget = budgetEnabled && hourlyBudget ? Number(hourlyBudget) : null
+    const parsedDailyBudget = budgetEnabled && dailyBudget ? Number(dailyBudget) : null
+    const parsedMonthlyBudget = budgetEnabled && monthlyBudget ? Number(monthlyBudget) : null
     const data = {
       name: name.trim() || 'Unnamed Agent',
       description,
@@ -345,7 +359,9 @@ export function AgentSheet() {
       heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
       heartbeatModel: heartbeatModel.trim() || null,
       heartbeatPrompt: heartbeatPrompt.trim() || null,
-      monthlyBudget: budgetEnabled && monthlyBudget ? Number(monthlyBudget) : null,
+      hourlyBudget: parsedHourlyBudget && parsedHourlyBudget > 0 ? parsedHourlyBudget : null,
+      dailyBudget: parsedDailyBudget && parsedDailyBudget > 0 ? parsedDailyBudget : null,
+      monthlyBudget: parsedMonthlyBudget && parsedMonthlyBudget > 0 ? parsedMonthlyBudget : null,
       budgetAction: budgetEnabled ? budgetAction : undefined,
     }
     if (editing) {
@@ -425,11 +441,14 @@ export function AgentSheet() {
         setTestStatus('fail')
         setTestMessage(result.message)
         setTestErrorCode(result.errorCode || null)
+        toast.error(result.message || 'Connection test failed')
         return false
       }
     } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Connection test failed'
       setTestStatus('fail')
-      setTestMessage(err instanceof Error ? err.message : 'Connection test failed')
+      setTestMessage(msg)
+      toast.error(msg)
       return false
     }
   }
@@ -537,7 +556,10 @@ export function AgentSheet() {
                       if (data.url) {
                         setAvatarUrl(data.url)
                         setAvatarSeed('')
+                        toast.success('Avatar image uploaded')
                       }
+                    } catch (err: unknown) {
+                      toast.error('Failed to upload image')
                     } finally {
                       setUploading(false)
                       e.target.value = ''
@@ -763,10 +785,10 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Periodic check-in runs on idle sessions using this agent. Processes pending events and monitors status.</p>
       </div>
 
-      {/* Monthly Budget */}
+      {/* Spend Limits */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
-          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Monthly Budget <HintTip text="Set a spending limit for this agent's API usage" /></label>
+          <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">Spend Limits <HintTip text="Set hourly, daily, and monthly API spend limits for this agent" /></label>
           <button
             type="button"
             onClick={() => setBudgetEnabled(!budgetEnabled)}
@@ -777,20 +799,54 @@ export function AgentSheet() {
         </div>
         {budgetEnabled && (
           <div className="space-y-4 mt-3">
-            <div>
-              <label className="block text-[12px] text-text-3/70 mb-1.5">Budget cap (USD)</label>
-              <div className="relative">
-                <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
-                <input
-                  type="number"
-                  min="0.01"
-                  step="0.01"
-                  value={monthlyBudget}
-                  onChange={(e) => setMonthlyBudget(e.target.value)}
-                  placeholder="10.00"
-                  className={`${inputClass} pl-7`}
-                  style={{ fontFamily: 'inherit' }}
-                />
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+              <div>
+                <label className="block text-[12px] text-text-3/70 mb-1.5">Hourly cap (USD)</label>
+                <div className="relative">
+                  <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={hourlyBudget}
+                    onChange={(e) => setHourlyBudget(e.target.value)}
+                    placeholder="0.50"
+                    className={`${inputClass} pl-7`}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-[12px] text-text-3/70 mb-1.5">Daily cap (USD)</label>
+                <div className="relative">
+                  <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={dailyBudget}
+                    onChange={(e) => setDailyBudget(e.target.value)}
+                    placeholder="5.00"
+                    className={`${inputClass} pl-7`}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-[12px] text-text-3/70 mb-1.5">Monthly cap (USD)</label>
+                <div className="relative">
+                  <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-text-3/50 text-[14px]">$</span>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={monthlyBudget}
+                    onChange={(e) => setMonthlyBudget(e.target.value)}
+                    placeholder="20.00"
+                    className={`${inputClass} pl-7`}
+                    style={{ fontFamily: 'inherit' }}
+                  />
+                </div>
               </div>
             </div>
             <div>
@@ -826,8 +882,8 @@ export function AgentSheet() {
         )}
         <p className="text-[11px] text-text-3/70 mt-1.5">
           {budgetAction === 'block'
-            ? 'Cap monthly spend for this agent. When exceeded, chat runs are blocked until the next month.'
-            : 'Cap monthly spend for this agent. When exceeded, a warning is shown but runs continue.'}
+            ? 'When any configured cap is exceeded, runs are blocked until spend drops below that cap window.'
+            : 'When a configured cap is exceeded, a warning is shown but runs continue.'}
         </p>
       </div>
 
@@ -1101,9 +1157,11 @@ export function AgentSheet() {
                     <button
                       type="button"
                       onClick={() => {
-                        navigator.clipboard.writeText((testDeviceId || openclawDeviceId)!)
-                        setConfigCopied(true)
-                        setTimeout(() => setConfigCopied(false), 2000)
+                        void copyTextToClipboard((testDeviceId || openclawDeviceId)!).then((copiedId) => {
+                          if (!copiedId) return
+                          setConfigCopied(true)
+                          setTimeout(() => setConfigCopied(false), 2000)
+                        })
                       }}
                       className="text-[12px] text-text-3/60 hover:text-text-3/80 transition-colors cursor-pointer bg-transparent border-none"
                     >
@@ -1307,11 +1365,11 @@ export function AgentSheet() {
         </div>
       )}
 
-      {/* Tools — hidden for providers that manage capabilities outside LangGraph */}
+      {/* Plugins — hidden for providers that manage capabilities outside LangGraph */}
       {!hasNativeCapabilities && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Tools</label>
-          <p className="text-[12px] text-text-3/60 mb-3">Enable tools for LangGraph agent sessions.</p>
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Plugins</label>
+          <p className="text-[12px] text-text-3/60 mb-3">Enable capabilities and plugins for this agent.</p>
           <div className="space-y-3">
             {AVAILABLE_TOOLS.map((t) => (
               <label key={t.id} className="flex items-center gap-3 cursor-pointer">
@@ -1334,7 +1392,7 @@ export function AgentSheet() {
       {/* Platform — hidden for providers that manage capabilities outside LangGraph */}
       {!hasNativeCapabilities && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Platform</label>
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">Platform Plugins</label>
           <p className="text-[12px] text-text-3/60 mb-3">Allow this agent to manage platform resources directly.</p>
           <div className="space-y-3">
             {PLATFORM_TOOLS.map((t) => (
@@ -1622,4 +1680,3 @@ export function AgentSheet() {
     </>
   )
 }
-

package/src/components/agents/inspector-panel.tsx

@@ -173,7 +173,7 @@ function OverviewTab({ agent, onEditAgent, onClearHistory, onDeleteAgent, onDele
       )}
       {agent.tools && agent.tools.length > 0 && (
         <div>
-          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Tools</label>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Plugins</label>
           <div className="flex flex-wrap gap-1">
             {agent.tools.map((tool) => (
               <span key={tool} className="px-2 py-0.5 rounded-[6px] text-[11px] font-600 bg-sky-400/[0.08] text-sky-400/70">

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