@swarmclawai/swarmclaw 0.2.0

package/src/components/shared/settings/section-runtime-loop.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import {
+  DEFAULT_AGENT_LOOP_RECURSION_LIMIT,
+  DEFAULT_CLAUDE_CODE_TIMEOUT_SEC,
+  DEFAULT_CLI_PROCESS_TIMEOUT_SEC,
+  DEFAULT_LEGACY_ORCHESTRATOR_MAX_TURNS,
+  DEFAULT_ONGOING_LOOP_MAX_ITERATIONS,
+  DEFAULT_ONGOING_LOOP_MAX_RUNTIME_MINUTES,
+  DEFAULT_ORCHESTRATOR_LOOP_RECURSION_LIMIT,
+  DEFAULT_SHELL_COMMAND_TIMEOUT_SEC,
+} from '@/lib/runtime-loop'
+import type { LoopMode } from '@/types'
+import type { SettingsSectionProps } from './types'
+
+export function RuntimeLoopSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  const loopMode: LoopMode = appSettings.loopMode === 'ongoing' ? 'ongoing' : 'bounded'
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Runtime &amp; Loop Controls
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Choose bounded or ongoing agent loops and set safety guards for task execution.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Loop Mode</label>
+        <div className="grid grid-cols-2 gap-2 mb-5">
+          {([
+            { id: 'bounded' as const, name: 'Bounded' },
+            { id: 'ongoing' as const, name: 'Ongoing' },
+          ]).map((mode) => (
+            <button
+              key={mode.id}
+              onClick={() => patchSettings({ loopMode: mode.id })}
+              className={`py-3 px-3 rounded-[12px] text-center cursor-pointer transition-all text-[13px] font-600 border
+                ${loopMode === mode.id
+                  ? 'bg-accent-soft border-accent-bright/25 text-accent-bright'
+                  : 'bg-bg border-white/[0.06] text-text-2 hover:bg-surface-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {mode.name}
+            </button>
+          ))}
+        </div>
+
+        {loopMode === 'bounded' ? (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-5">
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Agent Steps</label>
+              <input
+                type="number"
+                min={1}
+                max={200}
+                value={appSettings.agentLoopRecursionLimit ?? DEFAULT_AGENT_LOOP_RECURSION_LIMIT}
+                onChange={(e) => {
+                  const n = Number.parseInt(e.target.value, 10)
+                  patchSettings({ agentLoopRecursionLimit: Number.isFinite(n) ? n : DEFAULT_AGENT_LOOP_RECURSION_LIMIT })
+                }}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Orchestrator Steps</label>
+              <input
+                type="number"
+                min={1}
+                max={300}
+                value={appSettings.orchestratorLoopRecursionLimit ?? DEFAULT_ORCHESTRATOR_LOOP_RECURSION_LIMIT}
+                onChange={(e) => {
+                  const n = Number.parseInt(e.target.value, 10)
+                  patchSettings({ orchestratorLoopRecursionLimit: Number.isFinite(n) ? n : DEFAULT_ORCHESTRATOR_LOOP_RECURSION_LIMIT })
+                }}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Legacy Turns</label>
+              <input
+                type="number"
+                min={1}
+                max={300}
+                value={appSettings.legacyOrchestratorMaxTurns ?? DEFAULT_LEGACY_ORCHESTRATOR_MAX_TURNS}
+                onChange={(e) => {
+                  const n = Number.parseInt(e.target.value, 10)
+                  patchSettings({ legacyOrchestratorMaxTurns: Number.isFinite(n) ? n : DEFAULT_LEGACY_ORCHESTRATOR_MAX_TURNS })
+                }}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Max Steps (Safety Cap)</label>
+              <input
+                type="number"
+                min={10}
+                max={5000}
+                value={appSettings.ongoingLoopMaxIterations ?? DEFAULT_ONGOING_LOOP_MAX_ITERATIONS}
+                onChange={(e) => {
+                  const n = Number.parseInt(e.target.value, 10)
+                  patchSettings({ ongoingLoopMaxIterations: Number.isFinite(n) ? n : DEFAULT_ONGOING_LOOP_MAX_ITERATIONS })
+                }}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
+            <div>
+              <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Max Runtime (Minutes)</label>
+              <input
+                type="number"
+                min={0}
+                max={1440}
+                value={appSettings.ongoingLoopMaxRuntimeMinutes ?? DEFAULT_ONGOING_LOOP_MAX_RUNTIME_MINUTES}
+                onChange={(e) => {
+                  const n = Number.parseInt(e.target.value, 10)
+                  patchSettings({ ongoingLoopMaxRuntimeMinutes: Number.isFinite(n) ? n : DEFAULT_ONGOING_LOOP_MAX_RUNTIME_MINUTES })
+                }}
+                className={inputClass}
+                style={{ fontFamily: 'inherit' }}
+              />
+              <p className="text-[11px] text-text-3/60 mt-2">Set to 0 to disable the runtime guard.</p>
+            </div>
+          </div>
+        )}
+
+        <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-3">Execution Timeouts (Seconds)</label>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">Shell</label>
+            <input
+              type="number"
+              min={1}
+              max={600}
+              value={appSettings.shellCommandTimeoutSec ?? DEFAULT_SHELL_COMMAND_TIMEOUT_SEC}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ shellCommandTimeoutSec: Number.isFinite(n) ? n : DEFAULT_SHELL_COMMAND_TIMEOUT_SEC })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">Claude Code Tool</label>
+            <input
+              type="number"
+              min={5}
+              max={7200}
+              value={appSettings.claudeCodeTimeoutSec ?? DEFAULT_CLAUDE_CODE_TIMEOUT_SEC}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ claudeCodeTimeoutSec: Number.isFinite(n) ? n : DEFAULT_CLAUDE_CODE_TIMEOUT_SEC })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div>
+            <label className="block text-[11px] text-text-3 mb-2">CLI Provider Process</label>
+            <input
+              type="number"
+              min={10}
+              max={7200}
+              value={appSettings.cliProcessTimeoutSec ?? DEFAULT_CLI_PROCESS_TIMEOUT_SEC}
+              onChange={(e) => {
+                const n = Number.parseInt(e.target.value, 10)
+                patchSettings({ cliProcessTimeoutSec: Number.isFinite(n) ? n : DEFAULT_CLI_PROCESS_TIMEOUT_SEC })
+              }}
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,132 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import { toast } from 'sonner'
+import type { SettingsSectionProps } from './types'
+
+export function SecretsSection({ appSettings, inputClass }: SettingsSectionProps) {
+  const secrets = useAppStore((s) => s.secrets)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
+  const agents = useAppStore((s) => s.agents)
+
+  const [addingSecret, setAddingSecret] = useState(false)
+  const [secretName, setSecretName] = useState('')
+  const [secretService, setSecretService] = useState('')
+  const [secretValue, setSecretValue] = useState('')
+  const [secretScope, setSecretScope] = useState<'global' | 'agent'>('global')
+  const [secretAgentIds, setSecretAgentIds] = useState<string[]>([])
+  const [deletingSecret, setDeletingSecret] = useState<string | null>(null)
+
+  const handleAddSecret = async () => {
+    if (!secretName.trim() || !secretValue.trim()) return
+    try {
+      await api('POST', '/secrets', {
+        name: secretName,
+        service: secretService || 'custom',
+        value: secretValue,
+        scope: secretScope,
+        agentIds: secretScope === 'agent' ? secretAgentIds : [],
+      })
+      await loadSecrets()
+      setAddingSecret(false)
+      setSecretName('')
+      setSecretService('')
+      setSecretValue('')
+      setSecretScope('global')
+      setSecretAgentIds([])
+      toast.success('Credential added')
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to add credential')
+    }
+  }
+
+  const handleDeleteSecret = async (id: string) => {
+    try {
+      await api('DELETE', `/secrets/${id}`)
+      await loadSecrets()
+      setDeletingSecret(null)
+      toast.success('Credential deleted')
+    } catch (err: unknown) {
+      toast.error(err instanceof Error ? err.message : 'Failed to delete credential')
+    }
+  }
+
+  const orchestrators = Object.values(agents).filter((p) => p.isOrchestrator)
+  const secretList = Object.entries(secrets).map(([rowId, secret]) => ({ ...secret, rowId }))
+
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Service Credentials
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Credentials for external services (Gmail, APIs, etc.) that orchestrators can use during task execution.
+      </p>
+
+      {secretList.length > 0 && (
+        <div className="space-y-2.5 mb-4">
+          {secretList.map((secret) => (
+            <div key={secret.rowId} className="flex items-center gap-3 py-3 px-4 rounded-[14px] bg-surface border border-white/[0.06]">
+              <div className="flex-1 min-w-0">
+                <div className="text-[14px] font-600 text-text truncate">{secret.name}</div>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <span className="text-[11px] font-mono text-text-3">{secret.service}</span>
+                  <span className={`text-[10px] font-600 px-1.5 py-0.5 rounded-[4px] ${
+                    secret.scope === 'global'
+                      ? 'bg-emerald-500/10 text-emerald-400'
+                      : 'bg-amber-500/10 text-amber-400'
+                  }`}>
+                    {secret.scope === 'global' ? 'All orchestrators' : `${secret.agentIds.length} orchestrator(s)`}
+                  </span>
+                </div>
+              </div>
+              {deletingSecret === secret.rowId ? (
+                <div className="flex gap-2">
+                  <button onClick={() => setDeletingSecret(null)} className="px-3 py-1.5 text-[13px] font-600 bg-transparent border-none text-text-3 cursor-pointer hover:text-text-2 transition-colors" style={{ fontFamily: 'inherit' }}>Keep</button>
+                  <button onClick={() => handleDeleteSecret(secret.rowId)} className="px-3 py-1.5 text-[13px] font-600 bg-danger text-white border-none cursor-pointer rounded-[8px] transition-colors hover:brightness-110" style={{ fontFamily: 'inherit' }}>Delete</button>
+                </div>
+              ) : (
+                <button onClick={() => setDeletingSecret(secret.rowId)} className="px-3 py-1.5 text-[13px] font-500 bg-transparent border-none text-text-3 cursor-pointer hover:text-danger transition-colors" style={{ fontFamily: 'inherit' }}>Remove</button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {addingSecret ? (
+        <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06] space-y-4">
+          <div className="font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em]">New Secret</div>
+          <input type="text" value={secretName} onChange={(e) => setSecretName(e.target.value)} placeholder="Name (e.g. My Gmail)" className={inputClass} style={{ fontFamily: 'inherit' }} />
+          <input type="text" value={secretService} onChange={(e) => setSecretService(e.target.value)} placeholder="Service (e.g. gmail, ahrefs, custom)" className={inputClass} style={{ fontFamily: 'inherit' }} />
+          <input type="password" value={secretValue} onChange={(e) => setSecretValue(e.target.value)} placeholder="Value (API key, password, token...)" className={inputClass} style={{ fontFamily: 'inherit' }} />
+
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Scope</label>
+            <div className="flex p-1 rounded-[12px] bg-bg border border-white/[0.06]">
+              {(['global', 'agent'] as const).map((s) => (
+                <button key={s} onClick={() => setSecretScope(s)} className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 capitalize ${secretScope === s ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`} style={{ fontFamily: 'inherit' }}>{s === 'global' ? 'All Orchestrators' : 'Specific'}</button>
+              ))}
+            </div>
+          </div>
+
+          {secretScope === 'agent' && orchestrators.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {orchestrators.map((p) => (
+                <button key={p.id} onClick={() => setSecretAgentIds((prev) => prev.includes(p.id) ? prev.filter((x) => x !== p.id) : [...prev, p.id])} className={`px-3 py-2 rounded-[10px] text-[12px] font-600 cursor-pointer transition-all border ${secretAgentIds.includes(p.id) ? 'bg-accent-soft border-accent-bright/25 text-accent-bright' : 'bg-bg border-white/[0.06] text-text-3 hover:text-text-2'}`} style={{ fontFamily: 'inherit' }}>{p.name}</button>
+              ))}
+            </div>
+          )}
+
+          <div className="flex gap-3 pt-2">
+            <button onClick={() => setAddingSecret(false)} className="flex-1 py-3 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[14px] font-600 cursor-pointer hover:bg-surface-2 transition-colors" style={{ fontFamily: 'inherit' }}>Cancel</button>
+            <button onClick={handleAddSecret} disabled={!secretName.trim() || !secretValue.trim()} className="flex-1 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110" style={{ fontFamily: 'inherit' }}>Save Secret</button>
+          </div>
+        </div>
+      ) : (
+        <button onClick={() => setAddingSecret(true)} className="w-full py-3 rounded-[12px] border border-dashed border-white/[0.1] bg-transparent text-text-3 text-[13px] font-600 cursor-pointer hover:border-accent-bright/30 hover:text-accent-bright hover:bg-accent-soft transition-all duration-200" style={{ fontFamily: 'inherit' }}>+ Add Service Credential</button>
+      )}
+    </div>
+  )
+}

package/src/components/shared/settings/section-user-preferences.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+export function UserPreferencesSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        User Preferences
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Global instructions injected into ALL agent system prompts. Define your style, rules, and preferences.
+      </p>
+      <textarea
+        value={appSettings.userPrompt || ''}
+        onChange={(e) => patchSettings({ userPrompt: e.target.value })}
+        placeholder="e.g. Always respond concisely. Use TypeScript over JavaScript. Prefer functional patterns. My timezone is PST."
+        rows={4}
+        className={`${inputClass} resize-y min-h-[100px]`}
+        style={{ fontFamily: 'inherit' }}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,53 @@
+'use client'
+
+import type { SettingsSectionProps } from './types'
+
+export function VoiceSection({ appSettings, patchSettings, inputClass }: SettingsSectionProps) {
+  return (
+    <div className="mb-10">
+      <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+        Voice
+      </h3>
+      <p className="text-[12px] text-text-3 mb-5">
+        Configure voice playback (TTS) and speech-to-text input.
+      </p>
+      <div className="p-6 rounded-[18px] bg-surface border border-white/[0.06]">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-5">
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">ElevenLabs API Key</label>
+            <input
+              type="password"
+              value={appSettings.elevenLabsApiKey || ''}
+              onChange={(e) => patchSettings({ elevenLabsApiKey: e.target.value || null })}
+              placeholder="sk_..."
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <div>
+            <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">ElevenLabs Voice ID</label>
+            <input
+              type="text"
+              value={appSettings.elevenLabsVoiceId || ''}
+              onChange={(e) => patchSettings({ elevenLabsVoiceId: e.target.value || null })}
+              placeholder="JBFqnCBsd6RMkjVDRZzb"
+              className={inputClass}
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block font-display text-[11px] font-600 text-text-3 uppercase tracking-[0.08em] mb-2">Speech Recognition Language</label>
+          <input
+            type="text"
+            value={appSettings.speechRecognitionLang || ''}
+            onChange={(e) => patchSettings({ speechRecognitionLang: e.target.value || null })}
+            placeholder="en-US (blank = browser default)"
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,88 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { BottomSheet } from '../bottom-sheet'
+import { inputClass } from './utils'
+import { UserPreferencesSection } from './section-user-preferences'
+import { OrchestratorSection } from './section-orchestrator'
+import { RuntimeLoopSection } from './section-runtime-loop'
+import { CapabilityPolicySection } from './section-capability-policy'
+import { VoiceSection } from './section-voice'
+import { HeartbeatSection } from './section-heartbeat'
+import { EmbeddingSection } from './section-embedding'
+import { MemorySection } from './section-memory'
+import { SecretsSection } from './section-secrets'
+import { ProvidersSection } from './section-providers'
+import { PluginManager } from './plugin-manager'
+
+export function SettingsSheet() {
+  const open = useAppStore((s) => s.settingsOpen)
+  const setOpen = useAppStore((s) => s.setSettingsOpen)
+  const loadProviders = useAppStore((s) => s.loadProviders)
+  const loadCredentials = useAppStore((s) => s.loadCredentials)
+  const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
+  const updateSettings = useAppStore((s) => s.updateSettings)
+  const loadSecrets = useAppStore((s) => s.loadSecrets)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const credentials = useAppStore((s) => s.credentials)
+
+  useEffect(() => {
+    if (open) {
+      loadProviders()
+      loadCredentials()
+      loadSettings()
+      loadSecrets()
+      loadAgents()
+    }
+  }, [open])
+
+  const credList = Object.values(credentials)
+  const patchSettings = updateSettings
+
+  return (
+    <BottomSheet open={open} onClose={() => setOpen(false)} wide>
+      {/* Header */}
+      <div className="mb-10">
+        <h2 className="font-display text-[28px] font-700 tracking-[-0.03em] mb-2">Settings</h2>
+        <p className="text-[14px] text-text-3">Manage providers, API keys & orchestrator engine</p>
+      </div>
+
+      <UserPreferencesSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <OrchestratorSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <RuntimeLoopSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <CapabilityPolicySection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <VoiceSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <HeartbeatSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <EmbeddingSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} credList={credList} />
+      <MemorySection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <SecretsSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+      <ProvidersSection appSettings={appSettings} patchSettings={patchSettings} inputClass={inputClass} />
+
+      {/* Plugins */}
+      <div className="mb-10">
+        <h3 className="font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+          Plugins
+        </h3>
+        <p className="text-[12px] text-text-3 mb-5">
+          Extend agent behavior with hooks. Install from the marketplace, a URL, or drop .js files into <code className="text-[11px] font-mono text-text-2">data/plugins/</code>.
+          <span className="text-text-3/70 ml-1">OpenClaw plugins are also supported.</span>
+        </p>
+        <PluginManager />
+      </div>
+
+      {/* Done */}
+      <div className="pt-2 border-t border-white/[0.04]">
+        <button
+          onClick={() => setOpen(false)}
+          className="w-full py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer
+            hover:bg-surface-2 transition-all duration-200"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Done
+        </button>
+      </div>
+    </BottomSheet>
+  )
+}

package/src/components/shared/settings/types.ts

@@ -0,0 +1,7 @@
+import type { AppSettings } from '@/types'
+
+export interface SettingsSectionProps {
+  appSettings: AppSettings
+  patchSettings: (patch: Partial<AppSettings>) => void
+  inputClass: string
+}

package/src/components/shared/settings/utils.ts

@@ -0,0 +1,13 @@
+import { useCallback } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import type { AppSettings } from '@/types'
+
+export const inputClass = "w-full px-4 py-3.5 rounded-[14px] border border-white/[0.08] bg-bg text-text text-[15px] outline-none transition-all duration-200 placeholder:text-text-3/50 focus-glow"
+
+export function usePatchSettings() {
+  const updateSettings = useAppStore((s) => s.updateSettings)
+  return useCallback(
+    (patch: Partial<AppSettings>) => updateSettings(patch),
+    [updateSettings],
+  )
+}

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

@@ -0,0 +1 @@
+export { SettingsSheet } from './settings/settings-sheet'

package/src/components/shared/skeleton.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+interface Props {
+  className?: string
+  width?: string | number
+  height?: string | number
+}
+
+export function Skeleton({ className = '', width, height }: Props) {
+  return (
+    <div
+      className={`bg-white/[0.06] animate-pulse rounded ${className}`}
+      style={{
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+      }}
+    />
+  )
+}

package/src/components/shared/usage-badge.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+interface Props {
+  inputTokens: number
+  outputTokens: number
+  totalTokens: number
+  estimatedCost: number
+}
+
+export function UsageBadge({ totalTokens, estimatedCost }: Props) {
+  if (!totalTokens) return null
+
+  const costStr = estimatedCost < 0.001
+    ? '<$0.001'
+    : `$${estimatedCost.toFixed(3)}`
+
+  const tokenStr = totalTokens >= 1000
+    ? `${(totalTokens / 1000).toFixed(1)}k`
+    : String(totalTokens)
+
+  return (
+    <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-[7px] bg-white/[0.04] text-[10px] font-mono text-text-3/60">
+      <span>{tokenStr} tok</span>
+      <span className="text-text-3/60">·</span>
+      <span className="text-emerald-400/60">{costStr}</span>
+    </span>
+  )
+}