@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/app/settings/about-settings.tsx

@@ -1,7 +1,9 @@
 import { useStore } from '@nanostores/react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
+import { BrandMark } from '@/components/brand-mark'
 import { Button } from '@/components/ui/button'
+import { type Translations, useI18n } from '@/i18n'
 import { CheckCircle2, ExternalLink, Loader2, RefreshCw, Sparkles } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import {
@@ -10,42 +12,54 @@ import {
   $updateChecking,
   $updateStatus,
   checkUpdates,
-  openUpdatesWindow
+  openUpdatesWindow,
+  refreshDesktopVersion
 } from '@/store/updates'
 
 import { ListRow, SectionHeading, SettingsContent } from './primitives'
+import { UninstallSection } from './uninstall-section'
 
 const RELEASE_NOTES_URL = 'https://github.com/NousResearch/hermes-agent/releases'
 
-function relativeTime(ms: number | undefined) {
+function relativeTime(ms: number | undefined, a: Translations['settings']['about']) {
   if (!ms) {
-    return 'never'
+    return a.never
   }
 
   const diff = Date.now() - ms
 
   if (diff < 60_000) {
-    return 'just now'
+    return a.justNow
   }
 
   if (diff < 3_600_000) {
-    return `${Math.round(diff / 60_000)} min ago`
+    return a.minAgo(Math.round(diff / 60_000))
   }
 
   if (diff < 86_400_000) {
-    return `${Math.round(diff / 3_600_000)} hours ago`
+    return a.hoursAgo(Math.round(diff / 3_600_000))
   }
 
-  return `${Math.round(diff / 86_400_000)} days ago`
+  return a.daysAgo(Math.round(diff / 86_400_000))
 }
 
 export function AboutSettings() {
+  const { t } = useI18n()
+  const a = t.settings.about
   const version = useStore($desktopVersion)
   const status = useStore($updateStatus)
   const apply = useStore($updateApply)
   const checking = useStore($updateChecking)
   const [justChecked, setJustChecked] = useState(false)
 
+  // The version atom is loaded once at app boot, which makes About show a
+  // stale number after a self-update (the running binary is current, the
+  // displayed string is not). Re-read on mount so opening About always
+  // reflects the running build.
+  useEffect(() => {
+    void refreshDesktopVersion()
+  }, [])
+
   const behind = status?.behind ?? 0
   const supported = status?.supported !== false
   const applying = apply.applying || apply.stage === 'restart'
@@ -60,39 +74,37 @@ export function AboutSettings() {
   let statusTone: 'idle' | 'available' | 'error' = 'idle'
 
   if (!supported) {
-    statusLine = status?.message ?? "This build can't update itself from inside the app."
+    statusLine = status?.message ?? a.cantUpdate
     statusTone = 'error'
   } else if (status?.error) {
-    statusLine = "We couldn't reach the update server."
+    statusLine = a.cantReach
     statusTone = 'error'
   } else if (applying) {
-    statusLine = 'An update is currently installing.'
+    statusLine = a.installing
     statusTone = 'available'
   } else if (behind > 0) {
-    statusLine = `A new update is ready (${behind} change${behind === 1 ? '' : 's'} included).`
+    statusLine = a.updateReady(behind)
     statusTone = 'available'
   } else if (status) {
-    statusLine = "You're on the latest version."
+    statusLine = a.onLatest
   } else {
-    statusLine = 'Tap "Check now" to look for updates.'
+    statusLine = a.tapCheck
   }
 
   return (
     <SettingsContent>
       <div className="flex flex-col items-center gap-3 pt-6 pb-2 text-center">
-        <span className="flex size-16 items-center justify-center rounded-2xl bg-primary/10 text-primary">
-          <Sparkles className="size-8" />
-        </span>
+        <BrandMark className="size-16" />
         <div>
-          <h2 className="text-lg font-semibold tracking-tight">Hermes Desktop</h2>
+          <h2 className="text-lg font-semibold tracking-tight">{a.heading}</h2>
           <p className="mt-1 text-xs text-muted-foreground">
-            {version?.appVersion ? `Version ${version.appVersion}` : 'Version unavailable'}
+            {version?.appVersion ? a.version(version.appVersion) : a.versionUnavailable}
           </p>
         </div>
       </div>
 
       <div className="mx-auto mt-4 w-full max-w-2xl">
-        <SectionHeading icon={RefreshCw} title="Updates" />
+        <SectionHeading icon={RefreshCw} title={a.updates} />
 
         <div
           className={cn(
@@ -111,35 +123,30 @@ export function AboutSettings() {
             <div className="min-w-0">
               <p className="font-medium">{statusLine}</p>
               <p className="mt-1 text-xs text-muted-foreground">
-                Last checked {relativeTime(status?.fetchedAt)}
-                {justChecked && !checking ? ' · just now' : ''}
+                {a.lastChecked(relativeTime(status?.fetchedAt, a))}
+                {justChecked && !checking ? a.justNowSuffix : ''}
               </p>
             </div>
           </div>
 
-          <div className="mt-3 flex flex-wrap items-center gap-2">
+          <div className="mt-3 flex flex-wrap items-center gap-4">
             <Button
               disabled={checking || applying || !supported}
               onClick={() => void handleCheck()}
               size="sm"
-              variant="outline"
+              variant="textStrong"
             >
               {checking ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
-              {checking ? 'Checking…' : 'Check now'}
+              {checking ? a.checking : a.checkNow}
             </Button>
 
             {behind > 0 && supported && !applying && (
               <Button onClick={() => openUpdatesWindow()} size="sm">
-                See what&apos;s new
+                {a.seeWhatsNew}
               </Button>
             )}
 
-            <Button
-              asChild
-              className="ml-auto text-xs text-muted-foreground hover:text-foreground"
-              size="sm"
-              variant="ghost"
-            >
+            <Button asChild className="ml-auto" size="sm" variant="text">
               <a
                 href={RELEASE_NOTES_URL}
                 onClick={event => {
@@ -150,17 +157,19 @@ export function AboutSettings() {
                 target="_blank"
               >
                 <ExternalLink className="size-3" />
-                Release notes
+                {a.releaseNotes}
               </a>
             </Button>
           </div>
         </div>
 
         <ListRow
-          description="Hermes checks for updates automatically in the background and lets you know when one is ready."
-          hint={`Branch ${status?.branch ?? 'unknown'} · Commit ${status?.currentSha?.slice(0, 7) ?? 'unknown'}`}
-          title="Automatic updates"
+          description={a.automaticUpdatesDesc}
+          hint={a.branchCommit(status?.branch ?? 'unknown', status?.currentSha?.slice(0, 7) ?? 'unknown')}
+          title={a.automaticUpdates}
         />
+
+        <UninstallSection />
       </div>
     </SettingsContent>
   )

package/agent/apps/desktop/src/app/settings/appearance-settings.tsx

@@ -1,18 +1,24 @@
 import { useStore } from '@nanostores/react'
+import { useState } from 'react'
 
+import { LanguageSwitcher } from '@/components/language-switcher'
+import { SegmentedControl } from '@/components/ui/segmented-control'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
-import { Check, Palette } from '@/lib/icons'
+import { Check, Download, Loader2, Palette, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
+import { $activeGatewayProfile, $profiles, normalizeProfileKey } from '@/store/profile'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
+import { $translucency, setTranslucency } from '@/store/translucency'
 import { useTheme } from '@/themes/context'
-import { BUILTIN_THEMES } from '@/themes/presets'
+import { installVscodeThemeFromMarketplace } from '@/themes/install'
+import { isUserTheme, removeUserTheme, resolveTheme } from '@/themes/user-themes'
 
 import { MODE_OPTIONS } from './constants'
-import { prettyName } from './helpers'
-import { Pill, SectionHeading, SettingsContent } from './primitives'
+import { ListRow, SectionHeading, SettingsContent } from './primitives'
 
 function ThemePreview({ name }: { name: string }) {
-  const t = BUILTIN_THEMES[name]
+  const t = resolveTheme(name)
 
   if (!t) {
     return null
@@ -51,174 +57,249 @@ function ThemePreview({ name }: { name: string }) {
   )
 }
 
+function VscodeThemeInstaller() {
+  const { t } = useI18n()
+  const { setTheme } = useTheme()
+  const a = t.settings.appearance
+  const [id, setId] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState<{ kind: 'error' | 'success'; text: string } | null>(null)
+
+  const install = async () => {
+    const trimmed = id.trim()
+
+    if (!trimmed || busy) {
+      return
+    }
+
+    setBusy(true)
+    setStatus(null)
+
+    try {
+      const theme = await installVscodeThemeFromMarketplace(trimmed)
+
+      triggerHaptic('crisp')
+      setTheme(theme.name)
+      setStatus({ kind: 'success', text: a.installed(theme.label) })
+      setId('')
+    } catch (error) {
+      setStatus({ kind: 'error', text: error instanceof Error ? error.message : a.installError })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="mt-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          className="min-w-0 flex-1 rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) px-3 py-1.5 font-mono text-[length:var(--conversation-caption-font-size)] outline-none placeholder:text-(--ui-text-tertiary) focus:border-(--ui-stroke-secondary)"
+          disabled={busy}
+          onChange={event => {
+            setId(event.target.value)
+            setStatus(null)
+          }}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              void install()
+            }
+          }}
+          placeholder={a.installPlaceholder}
+          spellCheck={false}
+          value={id}
+        />
+        <button
+          className="inline-flex items-center gap-1.5 rounded-lg border border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary) px-3 py-1.5 text-[length:var(--conversation-caption-font-size)] font-medium transition hover:bg-(--chrome-action-hover) disabled:opacity-50"
+          disabled={busy || !id.trim()}
+          onClick={() => void install()}
+          type="button"
+        >
+          {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Download className="size-3.5" />}
+          {busy ? a.installing : a.installButton}
+        </button>
+      </div>
+      {status && (
+        <p
+          className={cn(
+            'mt-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height)',
+            status.kind === 'error' ? 'text-(--ui-red)' : 'text-(--ui-text-tertiary)'
+          )}
+        >
+          {status.text}
+        </p>
+      )}
+    </div>
+  )
+}
+
 export function AppearanceSettings() {
+  const { t, isSavingLocale } = useI18n()
   const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
   const toolViewMode = useStore($toolViewMode)
-  const activeTheme = availableThemes.find(t => t.name === themeName)
+  const translucency = useStore($translucency)
+  const profiles = useStore($profiles)
+  const activeProfileKey = normalizeProfileKey(useStore($activeGatewayProfile))
+  const a = t.settings.appearance
+
+  // Themes save per profile. Surface that only when the user actually has more
+  // than one profile (single-profile installs never see the distinction).
+  const showProfileNote = profiles.length > 1
+
+  const activeProfileName =
+    profiles.find(profile => normalizeProfileKey(profile.name) === activeProfileKey)?.name ?? activeProfileKey
+
+  const modeOptions = MODE_OPTIONS.map(({ id, icon }) => ({ icon, id, label: t.settings.modeOptions[id].label }))
+
+  const toolOptions = [
+    { id: 'product', label: a.product },
+    { id: 'technical', label: a.technical }
+  ] as const
 
   return (
     <SettingsContent>
-      <div className="space-y-5">
-        <div>
-          <SectionHeading icon={Palette} title="Appearance" />
-          <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-            These are desktop-only display preferences. Mode controls brightness; theme controls the accent palette and
-            chat surface styling.
-          </p>
-        </div>
+      <div>
+        <SectionHeading icon={Palette} title={a.title} />
+        <p className="max-w-2xl text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+          {a.intro}
+        </p>
 
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Color Mode</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Pick a fixed mode or let Hermes follow your system setting.
-              </div>
-            </div>
-            <Pill>{prettyName(mode)}</Pill>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-3">
-            {MODE_OPTIONS.map(({ id, label, description, icon: Icon }) => {
-              const active = mode === id
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={id}
-                  onClick={() => {
-                    triggerHaptic('crisp')
-                    setMode(id)
-                  }}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <span className="flex size-9 items-center justify-center rounded-lg bg-muted text-foreground transition group-hover:bg-background">
-                      <Icon className="size-4" />
-                    </span>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-2 text-[length:var(--conversation-text-font-size)] font-medium">{label}</div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                    {description}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
-
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Tool Call Display</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Product hides raw tool payloads; Technical shows full input/output.
-              </div>
-            </div>
-            <Pill>{toolViewMode === 'technical' ? 'Technical' : 'Product'}</Pill>
-          </div>
-          <div className="grid gap-2 sm:grid-cols-2">
-            {(
-              [
-                {
-                  id: 'product',
-                  label: 'Product',
-                  description: 'Human-friendly tool activity with concise summaries.'
-                },
-                {
-                  id: 'technical',
-                  label: 'Technical',
-                  description: 'Include raw tool args/results and low-level details.'
-                }
-              ] as const
-            ).map(option => {
-              const active = toolViewMode === option.id
-
-              return (
-                <button
-                  className={cn(
-                    'group rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2.5 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={option.id}
-                  onClick={() => {
+        <div className="mt-2 divide-y divide-(--ui-stroke-tertiary)">
+          <ListRow
+            action={<LanguageSwitcher />}
+            description={isSavingLocale ? t.language.saving : t.language.description}
+            title={t.language.label}
+          />
+
+          <ListRow
+            action={
+              <SegmentedControl
+                onChange={id => {
+                  triggerHaptic('crisp')
+                  setMode(id)
+                }}
+                options={modeOptions}
+                value={mode}
+              />
+            }
+            description={a.colorModeDesc}
+            title={a.colorMode}
+          />
+
+          <ListRow
+            action={
+              <div className="flex items-center gap-3">
+                <input
+                  aria-label={a.translucencyTitle}
+                  className="h-1 w-40 cursor-pointer appearance-none rounded-full bg-(--ui-stroke-tertiary)"
+                  max={100}
+                  min={0}
+                  onChange={event => {
                     triggerHaptic('selection')
-                    setToolViewMode(option.id)
+                    setTranslucency(Number(event.target.value))
                   }}
-                  type="button"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div className="text-[length:var(--conversation-text-font-size)] font-medium">{option.label}</div>
-                    {active && (
-                      <span className="grid size-5 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-1 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                    {option.description}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
-
-        <section className="rounded-xl border border-(--ui-stroke-tertiary) bg-(--ui-chat-bubble-background) p-3 shadow-sm">
-          <div className="mb-3 flex items-center justify-between gap-3">
-            <div>
-              <div className="text-sm font-medium">Theme</div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                Desktop palettes only. The selected mode is applied on top.
+                  step={5}
+                  style={{ accentColor: 'var(--dt-primary)' }}
+                  type="range"
+                  value={translucency}
+                />
+                <span className="w-9 text-right text-[length:var(--conversation-caption-font-size)] tabular-nums text-(--ui-text-tertiary)">
+                  {translucency}%
+                </span>
               </div>
-            </div>
-            {activeTheme && <Pill>{activeTheme.label}</Pill>}
-          </div>
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-            {availableThemes.map(theme => {
-              const active = themeName === theme.name
-
-              return (
-                <button
-                  className={cn(
-                    'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
-                    active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                  )}
-                  key={theme.name}
-                  onClick={() => {
-                    triggerHaptic('crisp')
-                    setTheme(theme.name)
-                  }}
-                  type="button"
-                >
-                  <ThemePreview name={theme.name} />
-                  <div className="mt-3 flex items-start justify-between gap-3 px-1">
-                    <div className="min-w-0">
-                      <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
-                        {theme.label}
-                      </div>
-                      <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                        {theme.description}
+            }
+            description={a.translucencyDesc}
+            title={a.translucencyTitle}
+          />
+
+          <ListRow
+            below={
+              <>
+                <div className="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+                  {availableThemes.map(theme => {
+                    const active = themeName === theme.name
+                    const removable = isUserTheme(theme.name)
+
+                    return (
+                      <div className="group relative" key={theme.name}>
+                        <button
+                          className={cn(
+                            'w-full rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
+                            active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
+                          )}
+                          onClick={() => {
+                            triggerHaptic('crisp')
+                            setTheme(theme.name)
+                          }}
+                          type="button"
+                        >
+                          <ThemePreview name={theme.name} />
+                          <div className="mt-3 flex items-start justify-between gap-3 px-1">
+                            <div className="min-w-0">
+                              <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
+                                {theme.label}
+                              </div>
+                              <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                                {theme.description}
+                              </div>
+                            </div>
+                            {active && (
+                              <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
+                                <Check className="size-3.5" />
+                              </span>
+                            )}
+                          </div>
+                        </button>
+                        {removable && (
+                          <button
+                            aria-label={a.removeTheme}
+                            className="absolute right-1.5 top-1.5 grid size-6 place-items-center rounded-md bg-(--ui-bg-elevated)/80 text-(--ui-text-tertiary) opacity-0 backdrop-blur-sm transition hover:text-(--ui-red) focus-visible:opacity-100 group-hover:opacity-100"
+                            onClick={() => {
+                              triggerHaptic('crisp')
+                              removeUserTheme(theme.name)
+
+                              // Re-normalize off the now-missing skin → default.
+                              if (active) {
+                                setTheme(theme.name)
+                              }
+                            }}
+                            title={a.removeTheme}
+                            type="button"
+                          >
+                            <Trash2 className="size-3.5" />
+                          </button>
+                        )}
                       </div>
-                    </div>
-                    {active && (
-                      <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
-                        <Check className="size-3.5" />
-                      </span>
-                    )}
-                  </div>
-                </button>
-              )
-            })}
-          </div>
-        </section>
+                    )
+                  })}
+                </div>
+                <VscodeThemeInstaller />
+                {showProfileNote && (
+                  <p className="mt-3 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                    {a.themeProfileNote(activeProfileName)}
+                  </p>
+                )}
+              </>
+            }
+            description={a.themeDesc}
+            title={a.themeTitle}
+            wide
+          />
+
+          <ListRow
+            action={
+              <SegmentedControl
+                onChange={id => {
+                  triggerHaptic('selection')
+                  setToolViewMode(id)
+                }}
+                options={toolOptions}
+                value={toolViewMode}
+              />
+            }
+            description={a.toolViewDesc}
+            title={a.toolViewTitle}
+          />
+        </div>
       </div>
     </SettingsContent>
   )