@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/src/components/model-picker.tsx

@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
 
+import { useI18n } from '@/i18n'
+import { currentPickerSelection } from '@/lib/model-status-label'
 import type { ModelOptionProvider, ModelOptionsResponse, ModelPricing } from '@/types/hermes'
 
 import type { HermesGateway } from '../hermes'
@@ -10,7 +12,6 @@ import { startManualOnboarding } from '../store/onboarding'
 
 import { InlineNotice } from './notifications'
 import { Button } from './ui/button'
-import { Checkbox } from './ui/checkbox'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './ui/command'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './ui/dialog'
 import { Skeleton } from './ui/skeleton'
@@ -22,7 +23,7 @@ interface ModelPickerDialogProps {
   sessionId?: string | null
   currentModel: string
   currentProvider: string
-  onSelect: (selection: { provider: string; model: string; persistGlobal: boolean }) => void
+  onSelect: (selection: { provider: string; model: string }) => void
   /**
    * Optional class to apply to DialogContent. Use to override z-index when
    * stacking the picker on top of another fixed overlay (e.g. the desktop
@@ -42,7 +43,8 @@ export function ModelPickerDialog({
   onSelect,
   contentClassName
 }: ModelPickerDialogProps) {
-  const [persistGlobal, setPersistGlobal] = useState(!sessionId)
+  const { t } = useI18n()
+  const copy = t.modelPicker
   // Own the search term so we can filter manually. cmdk's built-in
   // shouldFilter reorders items by its fuzzy-match score (≈alphabetical with
   // an empty query), which destroys the backend's curated order. We disable
@@ -65,8 +67,13 @@ export function ModelPickerDialog({
   })
 
   const providers = modelOptions.data?.providers ?? []
-  const optionsModel = String(modelOptions.data?.model ?? currentModel ?? '')
-  const optionsProvider = String(modelOptions.data?.provider ?? currentProvider ?? '')
+
+  const { model: optionsModel, provider: optionsProvider } = currentPickerSelection(
+    !!sessionId,
+    { model: currentModel, provider: currentProvider },
+    modelOptions.data
+  )
+
   const loading = modelOptions.isPending && !modelOptions.data
 
   const error = modelOptions.error
@@ -76,11 +83,7 @@ export function ModelPickerDialog({
     : null
 
   const selectModel = (provider: ModelOptionProvider, model: string) => {
-    onSelect({
-      provider: provider.slug,
-      model,
-      persistGlobal: persistGlobal || !sessionId
-    })
+    onSelect({ provider: provider.slug, model })
     onOpenChange(false)
   }
 
@@ -97,9 +100,9 @@ export function ModelPickerDialog({
     <Dialog onOpenChange={onOpenChange} open={open}>
       <DialogContent className={cn('max-h-[85vh] max-w-2xl gap-0 overflow-hidden p-0', contentClassName)}>
         <DialogHeader className="border-b border-border px-4 py-3">
-          <DialogTitle>Switch model</DialogTitle>
+          <DialogTitle>{copy.title}</DialogTitle>
           <DialogDescription className="font-mono text-xs leading-relaxed">
-            current: {optionsModel || currentModel || '(unknown)'}
+            {copy.current} {optionsModel || currentModel || copy.unknown}
             {optionsProvider || currentProvider ? ` · ${optionsProvider || currentProvider}` : ''}
           </DialogDescription>
         </DialogHeader>
@@ -108,11 +111,11 @@ export function ModelPickerDialog({
           <CommandInput
             autoFocus
             onValueChange={setSearch}
-            placeholder="Filter providers and models..."
+            placeholder={copy.search}
             value={search}
           />
           <CommandList className="max-h-96">
-            {!loading && !error && <CommandEmpty>No models found.</CommandEmpty>}
+            {!loading && !error && <CommandEmpty>{copy.noModels}</CommandEmpty>}
             <ModelResults
               currentModel={optionsModel || currentModel}
               currentProvider={optionsProvider || currentProvider}
@@ -125,24 +128,13 @@ export function ModelPickerDialog({
           </CommandList>
         </Command>
 
-        <DialogFooter className="flex-row items-center justify-between gap-3 border-t border-border bg-card p-3 sm:justify-between">
-          <label className="flex cursor-pointer select-none items-center gap-2 text-xs text-muted-foreground">
-            <Checkbox
-              checked={persistGlobal || !sessionId}
-              disabled={!sessionId}
-              onCheckedChange={checked => setPersistGlobal(checked === true)}
-            />
-            {sessionId ? 'Persist globally (otherwise this session only)' : 'Persist globally'}
-          </label>
-
-          <div className="flex items-center gap-2">
-            <Button onClick={addProvider} variant="ghost">
-              Add provider
-            </Button>
-            <Button onClick={() => onOpenChange(false)} variant="outline">
-              Cancel
-            </Button>
-          </div>
+        <DialogFooter className="flex-row items-center justify-end gap-2 bg-card p-3">
+          <Button onClick={addProvider} variant="ghost">
+            {copy.addProvider}
+          </Button>
+          <Button onClick={() => onOpenChange(false)} variant="outline">
+            {t.common.cancel}
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -166,6 +158,9 @@ function ModelResults({
   onSelectModel: (provider: ModelOptionProvider, model: string) => void
   search: string
 }) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+
   if (loading) {
     return <LoadingResults />
   }
@@ -173,7 +168,7 @@ function ModelResults({
   if (error) {
     return (
       <div className="px-3 py-3">
-        <InlineNotice kind="error" title="Could not load models">
+        <InlineNotice kind="error" title={copy.loadFailed}>
           {error}
         </InlineNotice>
       </div>
@@ -181,10 +176,11 @@ function ModelResults({
   }
 
   if (providers.length === 0) {
-    return <div className="px-4 py-6 text-sm text-muted-foreground">No authenticated providers.</div>
+    return <div className="px-4 py-6 text-sm text-muted-foreground">{copy.noAuthenticatedProviders}</div>
   }
 
   const q = search.trim().toLowerCase()
+
   const matches = (provider: ModelOptionProvider, model: string) =>
     !q ||
     model.toLowerCase().includes(q) ||
@@ -240,14 +236,14 @@ function ModelResults({
                   value={`${provider.slug}:${model}`}
                 >
                   <span className="min-w-0 flex-1 truncate">{model}</span>
-                  {locked && <span className="shrink-0 text-[0.62rem] uppercase tracking-wide opacity-80">Pro</span>}
+                  {locked && <span className="shrink-0 text-[0.62rem] uppercase tracking-wide opacity-80">{copy.pro}</span>}
                   <ModelPrice isCurrent={isCurrent} price={price} />
                 </CommandItem>
               )
             })}
             {unavailable.size > 0 && (
               <div className="px-6 pb-2 pt-1 text-[0.62rem] leading-relaxed text-muted-foreground">
-                Pro models need a paid Nous subscription.
+                {copy.proNeedsSubscription}
               </div>
             )}
           </CommandGroup>
@@ -260,6 +256,9 @@ function ModelResults({
 // Compact In/Out $/Mtok price tag, mirroring the CLI picker's price columns.
 // Renders nothing when pricing is unavailable for the model.
 function ModelPrice({ price, isCurrent }: { price?: ModelPricing; isCurrent: boolean }) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+
   if (!price || (!price.input && !price.output)) {
     return null
   }
@@ -272,7 +271,7 @@ function ModelPrice({ price, isCurrent }: { price?: ModelPricing; isCurrent: boo
           isCurrent ? 'bg-primary-foreground/20' : 'bg-emerald-500/15 text-emerald-600 dark:text-emerald-400'
         )}
       >
-        Free
+        {copy.free}
       </span>
     )
   }
@@ -283,7 +282,7 @@ function ModelPrice({ price, isCurrent }: { price?: ModelPricing; isCurrent: boo
         'shrink-0 text-[0.66rem] tabular-nums',
         isCurrent ? 'text-primary-foreground/80' : 'text-muted-foreground'
       )}
-      title="Input / Output price per million tokens"
+      title={copy.priceTitle}
     >
       {price.input || '?'} / {price.output || '?'}
     </span>
@@ -303,15 +302,18 @@ function LoadingResults() {
 }
 
 function ProviderHeading({ provider }: { provider: ModelOptionProvider }) {
+  const { t } = useI18n()
+  const copy = t.modelPicker
+
   // free_tier is only set for Nous. true → "Free tier", false → "Pro".
   const tierBadge =
     provider.free_tier === true ? (
       <span className="rounded-sm bg-emerald-500/15 px-1 py-0.5 text-[0.6rem] font-semibold uppercase tracking-wide text-emerald-600 dark:text-emerald-400">
-        Free tier
+        {copy.freeTier}
       </span>
     ) : provider.free_tier === false ? (
       <span className="rounded-sm bg-primary/15 px-1 py-0.5 text-[0.6rem] font-semibold uppercase tracking-wide text-primary">
-        Pro
+        {copy.pro}
       </span>
     ) : null
 

package/agent/apps/desktop/src/components/model-visibility-dialog.tsx

@@ -0,0 +1,166 @@
+import { useStore } from '@nanostores/react'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { GlyphSpinner } from '@/components/ui/glyph-spinner'
+import { Switch } from '@/components/ui/switch'
+import type { HermesGateway } from '@/hermes'
+import { getGlobalModelOptions } from '@/hermes'
+import { useI18n } from '@/i18n'
+import { displayModelName, modelDisplayParts } from '@/lib/model-status-label'
+import {
+  $visibleModels,
+  collapseModelFamilies,
+  effectiveVisibleKeys,
+  emptyProviderSentinelKey,
+  isProviderSentinel,
+  modelVisibilityKey,
+  setVisibleModels
+} from '@/store/model-visibility'
+import type { ModelOptionProvider, ModelOptionsResponse } from '@/types/hermes'
+
+interface ModelVisibilityDialogProps {
+  gw?: HermesGateway
+  onOpenChange: (open: boolean) => void
+  onOpenProviders: () => void
+  open: boolean
+  sessionId?: string | null
+}
+
+export function ModelVisibilityDialog({
+  gw,
+  onOpenChange,
+  onOpenProviders,
+  open,
+  sessionId
+}: ModelVisibilityDialogProps) {
+  const { t } = useI18n()
+  const copy = t.modelVisibility
+  const [search, setSearch] = useState('')
+  const stored = useStore($visibleModels)
+
+  const modelOptions = useQuery({
+    queryKey: ['model-options', sessionId || 'global'],
+    queryFn: (): Promise<ModelOptionsResponse> => {
+      if (gw && sessionId) {
+        return gw.request<ModelOptionsResponse>('model.options', { session_id: sessionId })
+      }
+
+      return getGlobalModelOptions()
+    },
+    enabled: open
+  })
+
+  const providers = useMemo(
+    () => (modelOptions.data?.providers ?? []).filter(provider => (provider.models ?? []).length > 0),
+    [modelOptions.data]
+  )
+
+  const visible = effectiveVisibleKeys(stored, providers)
+
+  const toggle = (provider: ModelOptionProvider, model: string) => {
+    const next = new Set(effectiveVisibleKeys($visibleModels.get(), providers))
+    const key = modelVisibilityKey(provider.slug, model)
+    const sentinel = emptyProviderSentinelKey(provider.slug)
+
+    if (next.has(key)) {
+      next.delete(key)
+
+      // Check if this was the last real model for this provider.
+      const remainingForProvider = [...next].some(k => k.startsWith(`${provider.slug}::`) && !isProviderSentinel(k))
+
+      if (!remainingForProvider) {
+        next.add(sentinel)
+      }
+    } else {
+      next.delete(sentinel)
+      next.add(key)
+    }
+
+    setVisibleModels(next)
+  }
+
+  const q = search.trim().toLowerCase()
+
+  const matches = (provider: ModelOptionProvider, model: string) =>
+    !q || `${model} ${provider.name} ${provider.slug} ${displayModelName(model)}`.toLowerCase().includes(q)
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent className="max-w-xs gap-0 overflow-hidden p-0">
+        <DialogHeader className="px-3 pb-1 pt-3">
+          <DialogTitle className="text-[0.8125rem]">{copy.title}</DialogTitle>
+        </DialogHeader>
+
+        <div className="px-3 py-1.5">
+          <input
+            autoFocus
+            className="h-5 w-full bg-transparent text-xs text-foreground placeholder:text-(--ui-text-tertiary) focus:outline-none"
+            onChange={event => setSearch(event.target.value)}
+            placeholder={copy.search}
+            type="text"
+            value={search}
+          />
+        </div>
+
+        <div className="max-h-[55vh] overflow-y-auto pb-1">
+          {providers.length === 0 ? (
+            <div className="px-3 py-5 text-center text-xs text-muted-foreground">
+              {modelOptions.isPending ? <GlyphSpinner className="mx-auto text-sm" /> : copy.noAuthenticatedProviders}
+            </div>
+          ) : (
+            providers.map(provider => {
+              const models = collapseModelFamilies(provider.models ?? []).filter(family => matches(provider, family.id))
+
+              if (models.length === 0) {
+                return null
+              }
+
+              return (
+                <div className="py-0.5" key={provider.slug}>
+                  <div className="px-3 pb-0.5 pt-1 text-[0.625rem] font-medium uppercase tracking-wide text-(--ui-text-tertiary)">
+                    {provider.name}
+                  </div>
+                  {models.map(family => {
+                    const { name, tag } = modelDisplayParts(family.id)
+                    const key = modelVisibilityKey(provider.slug, family.id)
+
+                    return (
+                      <label
+                        className="flex cursor-pointer items-center gap-2 px-3 py-1 text-xs hover:bg-accent/50"
+                        key={key}
+                      >
+                        <span className="min-w-0 flex-1 truncate">
+                          {name}
+                          {tag ? <span className="text-(--ui-text-tertiary)"> {tag}</span> : null}
+                        </span>
+                        <Switch checked={visible.has(key)} onCheckedChange={() => toggle(provider, family.id)} />
+                      </label>
+                    )
+                  })}
+                </div>
+              )
+            })
+          )}
+        </div>
+
+        <div className="px-3 py-2">
+          <Button
+            className="-ml-2 text-(--ui-text-tertiary)"
+            onClick={() => {
+              onOpenChange(false)
+              onOpenProviders()
+            }}
+            size="xs"
+            type="button"
+            variant="text"
+          >
+            {copy.addProvider}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/agent/apps/desktop/src/components/notifications.tsx

@@ -1,9 +1,12 @@
 import { useStore } from '@nanostores/react'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
 import { Codicon } from '@/components/ui/codicon'
 import { CopyButton } from '@/components/ui/copy-button'
+import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
 import { AlertCircle, AlertTriangle, CheckCircle2, type IconComponent, Info } from '@/lib/icons'
 import { cn } from '@/lib/utils'
@@ -24,13 +27,14 @@ const tone: Record<NotificationKind, { icon: IconComponent; iconClass: string; v
   success: { icon: CheckCircle2, iconClass: 'text-primary', variant: 'success' }
 }
 
-const STACK_SURFACE = 'pointer-events-auto border-border/80 bg-popover/95 shadow-lg shadow-black/5 backdrop-blur-md'
-const GHOST_BTN = 'bg-transparent text-muted-foreground hover:text-foreground'
+const STACK_SURFACE = 'pointer-events-auto border border-(--stroke-nous) bg-popover/95 shadow-nous backdrop-blur-md'
 
 export function NotificationStack() {
   const notifications = useStore($notifications)
+  const { t } = useI18n()
   const lastNotificationIdRef = useRef<string | null>(null)
   const [expanded, setExpanded] = useState(false)
+  const copy = t.notifications
 
   useEffect(() => {
     if (notifications.length <= 1) {
@@ -63,25 +67,32 @@ export function NotificationStack() {
   const [latest, ...olderNotifications] = notifications
   const overflowCount = olderNotifications.length
 
-  return (
+  // Portaled to <body> with a z above the Radix dialog layer (overlay z-[120],
+  // content z-[130]). Without the portal the stack lives inside the React root
+  // subtree, which any body-level dialog/overlay portal paints over — so a
+  // success toast fired while a dialog is open (or over an OverlayView page)
+  // was invisible. The titlebar-height var only exists inside the app shell
+  // scope, so fall back to its constant (34px) when mounted on <body>.
+  return createPortal(
     <div
-      aria-label="Notifications"
-      className="pointer-events-none absolute left-1/2 top-[calc(var(--titlebar-height)+0.75rem)] z-1050 flex w-[min(32rem,calc(100%-2rem))] -translate-x-1/2 flex-col gap-2"
+      aria-label={copy.region}
+      className="pointer-events-none fixed left-1/2 top-[calc(var(--titlebar-height,34px)+0.75rem)] z-[200] flex w-[min(32rem,calc(100%-2rem))] -translate-x-1/2 flex-col gap-2"
       role="region"
     >
       <NotificationItem notification={latest} />
       {expanded && olderNotifications.map(n => <NotificationItem key={n.id} notification={n} />)}
       {overflowCount > 0 && (
         <div className={cn(STACK_SURFACE, 'flex min-h-8 items-center justify-between rounded-lg px-3 text-xs')}>
-          <button className={cn(GHOST_BTN, 'font-medium')} onClick={() => setExpanded(v => !v)} type="button">
-            {expanded ? 'Hide' : 'Show'} {overflowCount} more {overflowCount === 1 ? 'notification' : 'notifications'}
-          </button>
-          <button className={GHOST_BTN} onClick={clearNotifications} type="button">
-            Clear all
-          </button>
+          <Button className="-ml-2 font-medium" onClick={() => setExpanded(v => !v)} size="xs" type="button" variant="text">
+            {expanded ? copy.hide : copy.show} {copy.more(overflowCount)}
+          </Button>
+          <Button className="-mr-2" onClick={clearNotifications} size="xs" type="button" variant="text">
+            {copy.clearAll}
+          </Button>
         </div>
       )}
-    </div>
+    </div>,
+    document.body
   )
 }
 
@@ -89,6 +100,8 @@ function NotificationItem({ notification }: { notification: AppNotification }) {
   const styles = tone[notification.kind]
   const Icon = styles.icon
   const hasDetail = Boolean(notification.detail && notification.detail !== notification.message)
+  const { t } = useI18n()
+  const copy = t.notifications
 
   return (
     <Alert
@@ -104,50 +117,58 @@ function NotificationItem({ notification }: { notification: AppNotification }) {
           <p className="m-0">{notification.message}</p>
           {hasDetail && <NotificationDetail detail={notification.detail || ''} />}
           {notification.action && (
-            <button
-              className="mt-1.5 inline-flex items-center rounded-md bg-primary/15 px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/25"
+            <Button
+              className="mt-1.5 bg-primary/15 font-medium text-primary hover:bg-primary/25 hover:text-primary"
               onClick={() => {
                 notification.action?.onClick()
                 dismissNotification(notification.id)
               }}
+              size="xs"
               type="button"
+              variant="ghost"
             >
               {notification.action.label}
-            </button>
+            </Button>
           )}
         </AlertDescription>
       </div>
-      <button
-        aria-label="Dismiss notification"
-        className="col-start-3 -mr-1 grid size-6 place-items-center rounded-md bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      <Button
+        aria-label={copy.dismiss}
+        className="col-start-3 -mr-1 text-muted-foreground"
         onClick={() => dismissNotification(notification.id)}
+        size="icon-xs"
         type="button"
+        variant="ghost"
       >
         <Codicon name="close" size="0.875rem" />
-      </button>
+      </Button>
     </Alert>
   )
 }
 
 function NotificationDetail({ detail }: { detail: string }) {
+  const { t } = useI18n()
+  const copy = t.notifications
+
   return (
     <details className="mt-2 text-xs text-muted-foreground">
-      <summary className="cursor-pointer select-none font-medium text-muted-foreground hover:text-foreground">
-        Details
-      </summary>
-      <div className="mt-1 rounded-md border border-border/70 bg-background/65 p-2">
-        <pre className="max-h-32 whitespace-pre-wrap wrap-break-word font-mono text-[0.6875rem] leading-relaxed">
+      <summary className="select-none font-medium text-muted-foreground hover:text-foreground">{copy.details}</summary>
+      <div className="mt-1 rounded-md bg-background/65 p-2">
+        <pre
+          className="max-h-32 whitespace-pre-wrap wrap-break-word font-mono text-[0.6875rem] leading-relaxed"
+          data-selectable-text="true"
+        >
           {detail}
         </pre>
         <CopyButton
           appearance="inline"
           className="mt-1 inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[0.6875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
-          errorMessage="Could not copy notification detail"
+          errorMessage={copy.copyDetailFailed}
           iconClassName="size-3"
-          label="Copy detail"
+          label={copy.copyDetail}
           text={detail}
         >
-          Copy detail
+          {copy.copyDetail}
         </CopyButton>
       </div>
     </details>

package/agent/apps/desktop/src/components/pane-shell/index.ts

@@ -1,4 +1,4 @@
 export type { PaneShellContextValue, PaneSlot } from './context'
 export { PaneShellContext } from './context'
-export { Pane, PaneMain, PaneShell } from './pane-shell'
+export { Pane, PANE_TOGGLE_REVEAL_EVENT, PaneMain, PaneShell } from './pane-shell'
 export type { PaneMainProps, PaneProps, PaneShellProps } from './pane-shell'