@swarmclawai/swarmclaw 0.7.3 → 0.7.4

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

@@ -1,5 +1,14 @@
 'use client'
 
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
 interface Props {
   open: boolean
   title: string
@@ -11,37 +20,43 @@ interface Props {
 }
 
 export function ConfirmDialog({ open, title, message, confirmLabel = 'Confirm', danger, onConfirm, onCancel }: Props) {
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-100 flex items-center justify-center p-6">
-      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onCancel} />
-      <div className="relative glass rounded-[20px] p-6 w-full max-w-[380px]
-        shadow-[0_24px_80px_rgba(0,0,0,0.5)]"
-        style={{ animation: 'fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}>
-        <h3 className="font-display text-[18px] font-700 tracking-[-0.02em] mb-2">{title}</h3>
-        <p className="text-[13px] text-text-2 mb-6 leading-relaxed">{message}</p>
-        <div className="flex gap-2.5">
-          <button
-            onClick={onCancel}
-            className="flex-1 py-2.5 rounded-[12px] border border-white/[0.06] bg-transparent text-text-2 text-[13px] font-600 cursor-pointer
-              hover:bg-surface transition-all duration-200"
-            style={{ fontFamily: 'inherit' }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            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-accent-bright text-white shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
-            style={{ fontFamily: 'inherit' }}
-          >
-            {confirmLabel}
-          </button>
+    <Dialog open={open} onOpenChange={(nextOpen) => { if (!nextOpen) onCancel() }}>
+      <DialogContent
+        className="sm:max-w-[400px] rounded-[20px] border-white/[0.06] bg-raised p-0 shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
+      >
+        <div className="p-6">
+          <DialogHeader className="text-left">
+            <DialogTitle className="font-display text-[18px] font-700 tracking-[-0.02em] text-text">
+              {title}
+            </DialogTitle>
+            <DialogDescription className="mt-2 text-[13px] leading-relaxed text-text-2">
+              {message}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="mt-6">
+            <button
+              type="button"
+              onClick={onCancel}
+              className="flex-1 rounded-[12px] border border-white/[0.06] bg-transparent px-4 py-2.5 text-[13px] font-600 text-text-2 transition-all duration-200 hover:bg-surface"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={onConfirm}
+              className={`flex-1 rounded-[12px] border-none px-4 py-2.5 text-[13px] font-600 text-white transition-all duration-200 active:scale-[0.98]
+                ${danger
+                  ? 'bg-danger shadow-[0_4px_20px_rgba(244,63,94,0.2)]'
+                  : 'bg-accent-bright shadow-[0_4px_20px_rgba(99,102,241,0.2)]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {confirmLabel}
+            </button>
+          </DialogFooter>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }

package/src/components/shared/model-combobox.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState, useRef, useEffect, useCallback } from 'react'
+import { useState, useRef, useEffect, useCallback, useEffectEvent } from 'react'
 import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
+import { fetchProviderModelDiscovery } from '@/lib/provider-model-discovery-client'
 
 interface ModelComboboxProps {
   providerId: string
@@ -10,6 +11,9 @@ interface ModelComboboxProps {
   onChange: (model: string) => void
   models: string[]
   defaultModels?: string[]
+  credentialId?: string | null
+  apiEndpoint?: string | null
+  supportsDiscovery?: boolean
   className?: string
 }
 
@@ -19,20 +23,31 @@ export function ModelCombobox({
   onChange,
   models,
   defaultModels = [],
+  credentialId,
+  apiEndpoint,
+  supportsDiscovery = true,
   className,
 }: ModelComboboxProps) {
   const [open, setOpen] = useState(false)
   const [query, setQuery] = useState('')
+  const [discoveredModels, setDiscoveredModels] = useState<string[]>([])
+  const [discoveryState, setDiscoveryState] = useState<'idle' | 'loading' | 'ready' | 'notice'>('idle')
+  const [discoveryMessage, setDiscoveryMessage] = useState('')
+  const [discoveryCached, setDiscoveryCached] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const lastDiscoveryKeyRef = useRef<string | null>(null)
   const loadProviders = useAppStore((s) => s.loadProviders)
 
-  const filtered = query
-    ? models.filter((m) => m.toLowerCase().includes(query.toLowerCase()))
-    : models
+  const availableModels = [...models, ...discoveredModels].filter((model, index, source) => source.indexOf(model) === index)
+  const trimmedQuery = query.trim()
+  const filtered = trimmedQuery
+    ? availableModels.filter((m) => m.toLowerCase().includes(trimmedQuery.toLowerCase()))
+    : availableModels
 
-  const isCustom = (m: string) => defaultModels.length > 0 && !defaultModels.includes(m)
-  const showAdd = query && !models.some((m) => m.toLowerCase() === query.toLowerCase())
+  const isCustom = (m: string) => models.includes(m) && defaultModels.length > 0 && !defaultModels.includes(m)
+  const showAdd = trimmedQuery && !availableModels.some((m) => m.toLowerCase() === trimmedQuery.toLowerCase())
+  const discoveryKey = `${providerId}::${credentialId || ''}::${apiEndpoint?.trim() || ''}`
 
   const persistModels = useCallback(async (next: string[]) => {
     await api('PUT', `/providers/${providerId}/models`, { models: next })
@@ -65,6 +80,43 @@ export function ModelCombobox({
     setOpen(false)
   }, [onChange])
 
+  const loadDiscoveredModels = useCallback(async (force = false) => {
+    if (!supportsDiscovery) return
+    if (!force && lastDiscoveryKeyRef.current === discoveryKey) return
+    setDiscoveryState('loading')
+    setDiscoveryMessage('')
+    try {
+      const result = await fetchProviderModelDiscovery({
+        providerId,
+        credentialId,
+        endpoint: apiEndpoint,
+        force,
+      })
+      lastDiscoveryKeyRef.current = discoveryKey
+      setDiscoveryCached(result.cached)
+      setDiscoveredModels(result.models)
+      setDiscoveryState(result.ok ? 'ready' : 'notice')
+      setDiscoveryMessage(result.message || '')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to load live models.'
+      setDiscoveryState('notice')
+      setDiscoveryMessage(message)
+    }
+  }, [apiEndpoint, credentialId, discoveryKey, providerId, supportsDiscovery])
+
+  const resetDiscoveryState = useEffectEvent(() => {
+    lastDiscoveryKeyRef.current = null
+    setDiscoveredModels([])
+    setDiscoveryState('idle')
+    setDiscoveryMessage('')
+    setDiscoveryCached(false)
+  })
+
+  const syncDiscoveryOnOpen = useEffectEvent(() => {
+    if (!open || !supportsDiscovery) return
+    void loadDiscoveredModels()
+  })
+
   useEffect(() => {
     const handler = (e: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
@@ -76,6 +128,14 @@ export function ModelCombobox({
     return () => document.removeEventListener('mousedown', handler)
   }, [])
 
+  useEffect(() => {
+    resetDiscoveryState()
+  }, [providerId, credentialId, apiEndpoint])
+
+  useEffect(() => {
+    syncDiscoveryOnOpen()
+  }, [open, supportsDiscovery, loadDiscoveredModels])
+
   return (
     <div ref={containerRef} className="relative">
       <div
@@ -105,6 +165,28 @@ export function ModelCombobox({
 
       {open && (
         <div className="absolute z-50 top-full left-0 right-0 mt-1 max-h-[240px] overflow-y-auto rounded-[12px] border border-white/[0.08] bg-surface-2 shadow-xl">
+          {supportsDiscovery && (
+            <div className="sticky top-0 z-[1] flex items-center justify-between gap-3 border-b border-white/[0.06] bg-surface-2/95 px-3 py-2 backdrop-blur">
+              <div className={`min-w-0 text-[11px] ${discoveryState === 'notice' ? 'text-text-3/80' : 'text-text-3/60'}`}>
+                {discoveryState === 'loading'
+                  ? 'Checking live model catalog...'
+                  : discoveryMessage || 'Type any model name or load the live catalog.'}
+                {discoveryCached && discoveryState === 'ready' ? ' Cached.' : ''}
+              </div>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  void loadDiscoveredModels(true)
+                }}
+                disabled={discoveryState === 'loading'}
+                className="shrink-0 rounded-[7px] border border-white/[0.08] bg-white/[0.03] px-2 py-1 text-[10px] font-600 text-text-3/80 transition-colors hover:bg-white/[0.06] hover:text-text disabled:cursor-default disabled:opacity-60"
+              >
+                {discoveryState === 'loading' ? 'Loading...' : discoveredModels.length > 0 ? 'Refresh' : 'Fetch live'}
+              </button>
+            </div>
+          )}
+
           {filtered.map((m) => (
             <div
               key={m}
@@ -128,13 +210,13 @@ export function ModelCombobox({
 
           {showAdd && (
             <div
-              onClick={() => addModel(query.trim())}
+              onClick={() => addModel(trimmedQuery)}
               className="flex items-center gap-2 px-3 py-2 text-[14px] cursor-pointer transition-colors hover:bg-white/[0.04] text-accent-bright border-t border-white/[0.06]"
             >
               <svg className="w-3.5 h-3.5 shrink-0" viewBox="0 0 16 16" fill="none">
                 <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
               </svg>
-              <span className="truncate">Add &ldquo;{query.trim()}&rdquo;</span>
+              <span className="truncate">Add &ldquo;{trimmedQuery}&rdquo;</span>
             </div>
           )}
 

package/src/components/shared/settings/section-heartbeat.tsx

@@ -1,5 +1,10 @@
 'use client'
 
+import {
+  DEFAULT_HEARTBEAT_ACK_MAX_CHARS,
+  DEFAULT_HEARTBEAT_SHOW_ALERTS,
+  DEFAULT_HEARTBEAT_SHOW_OK,
+} from '@/lib/heartbeat-defaults'
 import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
@@ -63,10 +68,10 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
             <input
               type="number"
               min={0}
-              value={appSettings.heartbeatAckMaxChars ?? 300}
+              value={appSettings.heartbeatAckMaxChars ?? DEFAULT_HEARTBEAT_ACK_MAX_CHARS}
               onChange={(e) => {
                 const n = Number.parseInt(e.target.value, 10)
-                patchSettings({ heartbeatAckMaxChars: Number.isFinite(n) ? Math.max(0, n) : 300 })
+                patchSettings({ heartbeatAckMaxChars: Number.isFinite(n) ? Math.max(0, n) : DEFAULT_HEARTBEAT_ACK_MAX_CHARS })
               }}
               className={inputClass}
               style={{ fontFamily: 'inherit' }}
@@ -79,7 +84,7 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
           <div>
             <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Show OK Messages</label>
             <button
-              onClick={() => patchSettings({ heartbeatShowOk: !(appSettings.heartbeatShowOk ?? false) })}
+              onClick={() => patchSettings({ heartbeatShowOk: !(appSettings.heartbeatShowOk ?? DEFAULT_HEARTBEAT_SHOW_OK) })}
               className={`px-3 py-2 rounded-[10px] border text-[12px] font-600 transition-colors cursor-pointer ${
                 appSettings.heartbeatShowOk
                   ? 'border-emerald-400/25 bg-emerald-500/10 text-emerald-300'
@@ -93,15 +98,15 @@ export function HeartbeatSection({ appSettings, patchSettings, inputClass }: Set
           <div>
             <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Show Alert Messages</label>
             <button
-              onClick={() => patchSettings({ heartbeatShowAlerts: !(appSettings.heartbeatShowAlerts ?? true) })}
+              onClick={() => patchSettings({ heartbeatShowAlerts: !(appSettings.heartbeatShowAlerts ?? DEFAULT_HEARTBEAT_SHOW_ALERTS) })}
               className={`px-3 py-2 rounded-[10px] border text-[12px] font-600 transition-colors cursor-pointer ${
-                (appSettings.heartbeatShowAlerts ?? true)
+                (appSettings.heartbeatShowAlerts ?? DEFAULT_HEARTBEAT_SHOW_ALERTS)
                   ? 'border-emerald-400/25 bg-emerald-500/10 text-emerald-300'
                   : 'border-white/[0.08] bg-white/[0.03] text-text-3'
               }`}
               style={{ fontFamily: 'inherit' }}
             >
-              {(appSettings.heartbeatShowAlerts ?? true) ? 'On' : 'Off'}
+              {(appSettings.heartbeatShowAlerts ?? DEFAULT_HEARTBEAT_SHOW_ALERTS) ? 'On' : 'Off'}
             </button>
           </div>
           <div>

package/src/components/shared/settings/section-orchestrator.tsx

@@ -67,6 +67,9 @@ export function OrchestratorSection({ appSettings, patchSettings, inputClass }:
               onChange={(m) => patchSettings({ langGraphModel: m })}
               models={lgProviderInfo.models}
               defaultModels={lgProviderInfo.defaultModels}
+              credentialId={appSettings.langGraphCredentialId}
+              apiEndpoint={appSettings.langGraphEndpoint}
+              supportsDiscovery={lgProviderInfo.supportsModelDiscovery}
               className={`${inputClass} cursor-pointer`}
             />
           </div>

package/src/components/shared/settings/settings-page.tsx

@@ -117,8 +117,9 @@ export function SettingsPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const credList = Object.values(credentials)
   const patchSettings = updateSettings
-  const sectionProps = { appSettings, patchSettings, inputClass }
-  const sections = useMemo<SettingsSectionDef[]>(() => [
+  const sections = useMemo<SettingsSectionDef[]>(() => {
+    const sectionProps = { appSettings, patchSettings, inputClass }
+    return [
     {
       id: 'user-preferences',
       tabId: 'general',
@@ -223,7 +224,8 @@ export function SettingsPage() {
       keywords: ['secrets', 'credentials', 'api keys', 'tokens'],
       render: () => <SecretsSection {...sectionProps} />,
     },
-  ], [credList, sectionProps])
+    ]
+  }, [appSettings, credList, patchSettings])
   const sectionsByTab = useMemo(() => {
     const map = new Map<string, SettingsSectionDef[]>()
     for (const section of sections) {

package/src/components/tasks/approvals-panel.tsx

@@ -72,6 +72,12 @@ export function ApprovalsPanel() {
   const [search, setSearch] = useState('')
   const [scope, setScope] = useState<ApprovalScope>('all')
   const [categoryFilter, setCategoryFilter] = useState('all')
+  const [now, setNow] = useState(() => Date.now())
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => setNow(Date.now()), 60_000)
+    return () => window.clearInterval(intervalId)
+  }, [])
 
   const taskApprovals = useMemo(() => {
     return Object.values(tasks)
@@ -168,7 +174,7 @@ export function ApprovalsPanel() {
     },
     {
       label: 'Recently Active',
-      value: workflowApprovals.filter((req) => Date.now() - req.updatedAt < 60 * 60 * 1000).length,
+      value: workflowApprovals.filter((req) => now - req.updatedAt < 60 * 60 * 1000).length,
       tone: 'text-emerald-400',
       hint: 'Updated in the last hour',
     },

package/src/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/72 backdrop-blur-md",
         className
       )}
       {...props}
@@ -71,7 +71,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-4 right-4 inline-flex h-9 w-9 items-center justify-center rounded-[12px] border border-white/[0.06] bg-white/[0.03] text-text-3 transition-all hover:bg-white/[0.06] hover:text-text-2 focus:outline-none focus:ring-2 focus:ring-accent-bright/30 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>

package/src/components/wallets/wallet-approval-dialog.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useCallback } from 'react'
 import { api } from '@/lib/api-client'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import type { WalletTransaction } from '@/types'
 
 interface WalletApprovalDialogProps {
@@ -35,65 +36,69 @@ export function WalletApprovalDialog({ transaction, walletAddress, onClose, onRe
   const amountSol = transaction.amountLamports / 1e9
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
-      <div className="relative w-full max-w-md rounded-[16px] border border-white/[0.08] bg-surface-1 shadow-2xl p-6 space-y-5">
-        <div className="flex items-center gap-2">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-amber-400">
-            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-            <line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
-          </svg>
-          <h3 className="font-display text-[15px] font-600 text-text-1">Transaction Approval</h3>
-        </div>
+    <Dialog open onOpenChange={(nextOpen) => { if (!nextOpen) onClose() }}>
+      <DialogContent className="sm:max-w-[460px] rounded-[20px] border-white/[0.08] bg-surface/95 p-0 shadow-[0_24px_80px_rgba(0,0,0,0.6)]">
+        <div className="p-6 space-y-5">
+          <DialogHeader className="text-left">
+            <div className="flex items-center gap-2">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-amber-400">
+                <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+                <line x1="12" y1="9" x2="12" y2="13" /><line x1="12" y1="17" x2="12.01" y2="17" />
+              </svg>
+              <DialogTitle className="font-display text-[16px] font-700 tracking-[-0.02em] text-text-1">
+                Transaction Approval
+              </DialogTitle>
+            </div>
+            <DialogDescription className="text-[12px] leading-relaxed text-text-3">
+              Crypto transactions are irreversible. Verify the recipient address carefully before approving.
+            </DialogDescription>
+          </DialogHeader>
 
-        <div className="p-4 rounded-[12px] bg-black/20 border border-white/[0.06] space-y-3">
-          <div className="flex items-center justify-between">
-            <span className="text-[11px] text-text-3/70 uppercase tracking-wide">Amount</span>
-            <span className="text-[16px] font-600 text-text-1">{amountSol.toFixed(4)} SOL</span>
-          </div>
-          <div>
-            <span className="text-[11px] text-text-3/70 uppercase tracking-wide block mb-1">From</span>
-            <code className="text-[10px] text-text-3 font-mono break-all">{walletAddress}</code>
-          </div>
-          <div>
-            <span className="text-[11px] text-text-3/70 uppercase tracking-wide block mb-1">To</span>
-            <code className="text-[10px] text-text-3 font-mono break-all">{transaction.toAddress}</code>
-          </div>
-          {transaction.memo && (
+          <div className="rounded-[14px] border border-white/[0.06] bg-black/20 p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <span className="text-[11px] uppercase tracking-wide text-text-3/70">Amount</span>
+              <span className="text-[16px] font-600 text-text-1">{amountSol.toFixed(4)} SOL</span>
+            </div>
             <div>
-              <span className="text-[11px] text-text-3/70 uppercase tracking-wide block mb-1">Reason</span>
-              <p className="text-[12px] text-text-2">{transaction.memo}</p>
+              <span className="mb-1 block text-[11px] uppercase tracking-wide text-text-3/70">From</span>
+              <code className="text-[10px] text-text-3 font-mono break-all">{walletAddress}</code>
             </div>
-          )}
-        </div>
-
-        <p className="text-[11px] text-amber-400/80">
-          Crypto transactions are irreversible. Verify the recipient address carefully.
-        </p>
+            <div>
+              <span className="mb-1 block text-[11px] uppercase tracking-wide text-text-3/70">To</span>
+              <code className="text-[10px] text-text-3 font-mono break-all">{transaction.toAddress}</code>
+            </div>
+            {transaction.memo && (
+              <div>
+                <span className="mb-1 block text-[11px] uppercase tracking-wide text-text-3/70">Reason</span>
+                <p className="text-[12px] text-text-2">{transaction.memo}</p>
+              </div>
+            )}
+          </div>
 
-        {error && <p className="text-[11px] text-red-400">{error}</p>}
+          {error && <p className="text-[11px] text-red-400">{error}</p>}
 
-        <div className="flex gap-3">
-          <button
-            type="button"
-            onClick={() => handleDecision('deny')}
-            disabled={submitting}
-            className="flex-1 px-4 py-2.5 rounded-[10px] border border-white/[0.08] bg-surface text-text-3 text-[12px] font-600 hover:text-red-400 hover:border-red-400/30 transition-colors cursor-pointer disabled:opacity-50"
-            style={{ fontFamily: 'inherit' }}
-          >
-            Deny
-          </button>
-          <button
-            type="button"
-            onClick={() => handleDecision('approve')}
-            disabled={submitting}
-            className="flex-1 px-4 py-2.5 rounded-[10px] bg-accent text-white text-[12px] font-600 hover:brightness-110 transition-all cursor-pointer disabled:opacity-50"
-            style={{ fontFamily: 'inherit' }}
-          >
-            {submitting ? 'Processing...' : 'Approve & Send'}
-          </button>
+          <DialogFooter>
+            <button
+              type="button"
+              onClick={() => handleDecision('deny')}
+              disabled={submitting}
+              className="flex-1 rounded-[12px] border border-white/[0.08] bg-surface px-4 py-2.5 text-[12px] font-600 text-text-3 transition-colors hover:border-red-400/30 hover:text-red-400 disabled:opacity-50"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Deny
+            </button>
+            <button
+              type="button"
+              onClick={() => handleDecision('approve')}
+              disabled={submitting}
+              className="flex-1 rounded-[12px] bg-accent px-4 py-2.5 text-[12px] font-600 text-white transition-all hover:brightness-110 disabled:opacity-50"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {submitting ? 'Processing...' : 'Approve & Send'}
+            </button>
+          </DialogFooter>
         </div>
-      </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }

package/src/lib/heartbeat-defaults.ts

@@ -0,0 +1,48 @@
+export const DEFAULT_HEARTBEAT_INTERVAL_SEC = 1800
+export const DEFAULT_HEARTBEAT_ACK_MAX_CHARS = 300
+export const DEFAULT_HEARTBEAT_SHOW_OK = false
+export const DEFAULT_HEARTBEAT_SHOW_ALERTS = true
+
+function parseIntSetting(value: unknown, fallback: number, min: number, max: number): number {
+  const parsed = typeof value === 'number'
+    ? value
+    : typeof value === 'string'
+      ? Number.parseInt(value, 10)
+      : Number.NaN
+  if (!Number.isFinite(parsed)) return fallback
+  return Math.max(min, Math.min(max, Math.trunc(parsed)))
+}
+
+function parseBoolSetting(value: unknown, fallback: boolean): boolean {
+  if (typeof value === 'boolean') return value
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (['1', 'true', 'yes', 'on'].includes(normalized)) return true
+    if (['0', 'false', 'no', 'off'].includes(normalized)) return false
+  }
+  return fallback
+}
+
+export interface NormalizedHeartbeatSettingFields {
+  heartbeatIntervalSec: number
+  heartbeatAckMaxChars: number
+  heartbeatShowOk: boolean
+  heartbeatShowAlerts: boolean
+  heartbeatTarget: string | null
+  heartbeatPrompt: string | null
+}
+
+export function normalizeHeartbeatSettingFields(settings: Record<string, unknown>): NormalizedHeartbeatSettingFields {
+  return {
+    heartbeatIntervalSec: parseIntSetting(settings.heartbeatIntervalSec, DEFAULT_HEARTBEAT_INTERVAL_SEC, 0, 86_400),
+    heartbeatAckMaxChars: parseIntSetting(settings.heartbeatAckMaxChars, DEFAULT_HEARTBEAT_ACK_MAX_CHARS, 0, 8_000),
+    heartbeatShowOk: parseBoolSetting(settings.heartbeatShowOk, DEFAULT_HEARTBEAT_SHOW_OK),
+    heartbeatShowAlerts: parseBoolSetting(settings.heartbeatShowAlerts, DEFAULT_HEARTBEAT_SHOW_ALERTS),
+    heartbeatTarget: typeof settings.heartbeatTarget === 'string' && settings.heartbeatTarget.trim()
+      ? settings.heartbeatTarget.trim()
+      : null,
+    heartbeatPrompt: typeof settings.heartbeatPrompt === 'string' && settings.heartbeatPrompt.trim()
+      ? settings.heartbeatPrompt.trim()
+      : null,
+  }
+}

package/src/lib/memory-presentation.ts

@@ -0,0 +1,59 @@
+import type { MemoryEntry } from '@/types'
+
+export type MemoryTier = 'working' | 'durable' | 'archive'
+export type MemoryScopeBadge = 'global' | 'agent' | 'shared' | 'session' | 'project'
+
+const WORKING_CATEGORIES = new Set(['execution', 'working', 'scratch', 'breadcrumb'])
+const ARCHIVE_CATEGORIES = new Set(['session_archive'])
+
+function hasProjectRoot(entry: Pick<MemoryEntry, 'metadata' | 'references' | 'filePaths'>): boolean {
+  const metadataRoot = typeof entry.metadata?.projectRoot === 'string' ? entry.metadata.projectRoot.trim() : ''
+  if (metadataRoot) return true
+
+  if (Array.isArray(entry.references)) {
+    for (const ref of entry.references) {
+      if (typeof ref.projectRoot === 'string' && ref.projectRoot.trim()) return true
+      if ((ref.type === 'project' || ref.type === 'folder' || ref.type === 'file') && typeof ref.path === 'string' && ref.path.trim()) {
+        return true
+      }
+    }
+  }
+
+  if (Array.isArray(entry.filePaths)) {
+    for (const ref of entry.filePaths) {
+      if (typeof ref.projectRoot === 'string' && ref.projectRoot.trim()) return true
+      if (typeof ref.path === 'string' && ref.path.trim()) return true
+    }
+  }
+
+  return false
+}
+
+export function getMemoryTierForCategory(category: unknown): MemoryTier {
+  const normalized = typeof category === 'string' ? category.trim().toLowerCase() : ''
+  if (ARCHIVE_CATEGORIES.has(normalized)) return 'archive'
+  if (WORKING_CATEGORIES.has(normalized)) return 'working'
+  return 'durable'
+}
+
+export function getMemoryTier(entry: Pick<MemoryEntry, 'category' | 'metadata'>): MemoryTier {
+  const metadataTier = typeof entry.metadata?.tier === 'string' ? entry.metadata.tier.trim().toLowerCase() : ''
+  if (metadataTier === 'working' || metadataTier === 'durable' || metadataTier === 'archive') {
+    return metadataTier
+  }
+  if (metadataTier === 'session_archive') return 'archive'
+  return getMemoryTierForCategory(entry.category)
+}
+
+export function deriveMemoryScope(entry: Pick<MemoryEntry, 'agentId' | 'sessionId' | 'sharedWith' | 'metadata' | 'references' | 'filePaths'>): MemoryScopeBadge {
+  if (entry.sessionId) return 'session'
+  if (hasProjectRoot(entry)) return 'project'
+  if (entry.agentId && Array.isArray(entry.sharedWith) && entry.sharedWith.length > 0) return 'shared'
+  if (entry.agentId) return 'agent'
+  return 'global'
+}
+
+export function getMemoryScopeLabel(scope: MemoryScopeBadge): string {
+  if (scope === 'agent') return 'private'
+  return scope
+}