@bibobonking/opensol 3.1.5 → 3.2.0

package/src/components/Composer.tsx

@@ -8,33 +8,20 @@ import {
   type DragEvent,
   type KeyboardEvent,
 } from 'react'
-import {
-  Check,
-  ChevronDown,
-  FileText,
-  FolderOpen,
-  Globe2,
-  ListChecks,
-  Paperclip,
-  ShieldCheck,
-  Slash,
-  Sparkles,
-  Square,
-  Upload,
-  X,
-} from 'lucide-react'
+import { Check, FileText, ListChecks, Sparkles, ShieldCheck, Slash, Square, Upload, X } from 'lucide-react'
 import type { Attachment } from '../types'
-import { useSkills } from '../store/skills'
 import { activeModelId, hasCredentials, useSettings } from '../store/settings'
 import { useActiveModel, useProviderModels } from '../store/models'
 import { useUi } from '../store/ui'
-import { useWorkspace } from '../store/workspace'
+import { effortLabel, EFFORT_LABELS } from '../data/providers'
 import { effortOptions } from '../lib/reasoning'
 import { PERMISSION_MODES, permissionLabel, permissionMode, permissionTools } from '../lib/permissions'
-import { useClickOutside } from '../lib/hooks'
 import { cn, formatBytes, readFileAsDataUrl, readFileAsText } from '../lib/utils'
 import { ModelDeck, ModelDeckTrigger } from './ModelDeck'
 import { PixleSol } from './PixleSol'
+import { Popover, MenuLabel, TextButton } from './composer/Popover'
+import { PlusMenu } from './composer/PlusMenu'
+import { WorkspacePicker } from './composer/WorkspacePicker'
 import type { PixleMood } from '../lib/pixlesol'
 
 const TEXT_EXTENSIONS = /\.(txt|md|markdown|ts|tsx|js|jsx|mjs|cjs|json|css|scss|html|vue|svelte|py|go|rs|rb|java|kt|cs|c|h|cpp|hpp|php|swift|sh|bash|zsh|yml|yaml|toml|ini|sql|csv|xml|gitignore|env)$/i
@@ -50,6 +37,7 @@ const SLASH_COMMANDS = [
   { name: 'workspace', usage: '/workspace', description: 'Open the folder panel', takesArgs: false },
   { name: 'deploy', usage: '/deploy', description: 'Deploy a project folder', takesArgs: false },
   { name: 'settings', usage: '/settings', description: 'Open settings', takesArgs: false },
+  { name: 'compact', usage: '/compact [focus]', description: 'Summarise older context to free up space', takesArgs: true },
   { name: 'clear', usage: '/clear', description: 'Clear this conversation', takesArgs: false },
 ]
 
@@ -90,22 +78,19 @@ export function Composer({
   const update = useSettings((state) => state.update)
   const setMode = useSettings((state) => state.setMode)
   const notify = useUi((state) => state.notify)
-  const openSettings = useUi((state) => state.openSettings)
   const focusToken = useUi((state) => state.composerFocus)
-  const setWorkspaceOpen = useUi((state) => state.setWorkspaceOpen)
-  const workspace = useWorkspace((state) => state.info)
   const [attachments, setAttachments] = useState<Attachment[]>([])
   const [focused, setFocused] = useState(false)
   const [dragging, setDragging] = useState(false)
   const [pickerOpen, setPickerOpen] = useState(false)
   const [permissionOpen, setPermissionOpen] = useState(false)
+  const [effortOpen, setEffortOpen] = useState(false)
+  const [modeOpen, setModeOpen] = useState(false)
   const [submitting, setSubmitting] = useState(false)
   const [commandIndex, setCommandIndex] = useState(0)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const fileRef = useRef<HTMLInputElement>(null)
   const modelTriggerRef = useRef<HTMLButtonElement>(null)
-  const permissionRef = useRef<HTMLDivElement>(null)
-  const permissionTriggerRef = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
     const onKey = (event: globalThis.KeyboardEvent) => {
@@ -118,14 +103,11 @@ export function Composer({
     return () => window.removeEventListener('keydown', onKey)
   }, [])
 
-  useClickOutside(permissionRef, () => setPermissionOpen(false), permissionOpen, permissionTriggerRef)
-
   const modelId = activeModelId(settings)
   const providerModels = useProviderModels(settings.provider)
   const activeModel = useActiveModel()
   const connected = hasCredentials(settings)
   const efforts = effortOptions(activeModel)
-  const activeSkills = useSkills((state) => state.skills.filter((skill) => skill.enabled).length)
   const permission = permissionMode(settings.tools)
   const modelLabel = !connected
     ? 'No provider'
@@ -153,7 +135,7 @@ export function Composer({
     const node = textareaRef.current
     if (!node) return
     node.style.height = 'auto'
-    node.style.height = `${Math.min(Math.max(node.scrollHeight, 52), 220)}px`
+    node.style.height = `${Math.min(Math.max(node.scrollHeight, 36), 220)}px`
   }, [value])
 
   useEffect(() => {
@@ -377,49 +359,8 @@ export function Composer({
         </div>
       )}
 
-      <div className="mb-2 flex flex-wrap items-center gap-1.5">
-        <button
-          type="button"
-          onClick={() => setWorkspaceOpen(true)}
-          className="chip h-7 max-w-[220px] gap-1.5 px-2.5 text-[11px]"
-          title={workspace.available ? workspace.root : 'Choose a project folder'}
-        >
-          <FolderOpen size={12} className="shrink-0 text-faint" />
-          <span className="truncate">{workspace.available ? workspace.name : 'No folder'}</span>
-        </button>
-        <button
-          type="button"
-          onClick={() => setMode(settings.mode === 'plan' ? 'build' : 'plan')}
-          className="chip h-7 gap-1.5 px-2.5 text-[11px]"
-          title={settings.mode === 'plan' ? 'Switch to Build mode' : 'Switch to Plan mode (read-only)'}
-        >
-          {settings.mode === 'plan' ? (
-            <ListChecks size={12} className="text-faint" />
-          ) : (
-            <Sparkles size={12} className="text-faint" />
-          )}
-          {settings.mode === 'plan' ? 'Plan mode' : 'Build mode'}
-        </button>
-        <button
-          type="button"
-          onClick={() => update({ webSearchEnabled: !settings.webSearchEnabled })}
-          className={cn('chip h-7 gap-1.5 px-2.5 text-[11px]', settings.webSearchEnabled && 'chip-active')}
-          title="Allow OpenSol to search the web and read pages"
-          aria-pressed={settings.webSearchEnabled}
-        >
-          <Globe2 size={12} />
-          Search
-        </button>
-        {activeSkills > 0 && (
-          <button
-            type="button"
-            onClick={() => openSettings('skills')}
-            className="chip h-7 gap-1 px-2.5 text-[11px]"
-            title="Manage loaded skills"
-          >
-            {activeSkills} skill{activeSkills === 1 ? '' : 's'}
-          </button>
-        )}
+      <div className="mb-1 flex flex-wrap items-center gap-x-1 px-0.5">
+        <WorkspacePicker />
       </div>
 
       <div
@@ -433,17 +374,17 @@ export function Composer({
         }}
         onDrop={onDrop}
         className={cn(
-          'surface-lift composer-shadow relative rounded-2xl border transition-all duration-200',
+          'surface-lift composer-shadow relative rounded-xl border transition-all duration-200',
           focused || dragging ? 'border-accent/35' : 'border-line',
           streaming && 'composer-glow border-accent/30',
           dragging && 'ring-4 ring-accent/10',
         )}
       >
         {focused && !dragging && (
-          <div className="pointer-events-none absolute inset-0 rounded-2xl ring-4 ring-accent/[0.03]" aria-hidden="true" />
+          <div className="pointer-events-none absolute inset-0 rounded-xl ring-4 ring-accent/[0.03]" aria-hidden="true" />
         )}
 
-        <div className="relative px-3.5 pb-1 pt-3">
+        <div className="relative px-3 pb-0 pt-2">
           {attachments.length > 0 && (
             <div className="flex flex-wrap gap-2 px-1 pb-2">
               {attachments.map((attachment) =>
@@ -496,69 +437,138 @@ export function Composer({
             placeholder={placeholder}
             rows={1}
             aria-label="Message OpenSol"
-            className="block w-full resize-none bg-transparent px-2 py-1.5 text-[15.5px] leading-[1.6] text-ink outline-none placeholder:text-faint"
-            style={{ minHeight: 52, maxHeight: 220 }}
+            className="block w-full resize-none bg-transparent px-1.5 py-1 text-[14.5px] leading-[1.55] text-ink outline-none placeholder:text-faint"
+            style={{ minHeight: 36, maxHeight: 220 }}
           />
         </div>
 
-        <div className="flex items-end justify-between gap-2 px-2.5 pb-2 pt-1">
+        <div className="flex items-center justify-between gap-2 px-1.5 pb-1.5 pt-0.5">
           <div className="flex min-w-0 items-center gap-0.5">
-            <div className="relative">
-              <button
-                ref={permissionTriggerRef}
-                type="button"
-                onClick={() => setPermissionOpen((open) => !open)}
-                className="flex h-8 items-center gap-1.5 rounded-lg px-2 text-[11px] font-medium text-muted transition-colors hover:bg-raised hover:text-ink"
-                title="Choose how much OpenSol can do without asking"
-                aria-expanded={permissionOpen}
-              >
-                <ShieldCheck size={13} className="text-faint" />
-                {permissionLabel(permission)}
-                <ChevronDown size={11} className={cn('text-faint transition-transform', permissionOpen && 'rotate-180')} />
-              </button>
-              {permissionOpen && (
-                <div
-                  ref={permissionRef}
-                  className="surface-lift absolute bottom-[calc(100%+8px)] left-0 z-40 w-[290px] overflow-hidden rounded-2xl border border-line p-1.5 shadow-float"
+            <PlusMenu onAddFiles={() => fileRef.current?.click()} />
+            <Popover
+              open={modeOpen}
+              onClose={() => setModeOpen(false)}
+              width={230}
+              trigger={
+                <TextButton
+                  open={modeOpen}
+                  onClick={() => {
+                    setPermissionOpen(false)
+                    setEffortOpen(false)
+                    setModeOpen((open) => !open)
+                  }}
+                  title="Build edits files and runs commands; Plan is read-only"
                 >
-                  <p className="px-2 pb-1 pt-1.5 text-[10px] font-medium uppercase tracking-[0.1em] text-faint">
-                    Permissions
-                  </p>
-                  {PERMISSION_MODES.map((entry) => (
-                    <button
-                      key={entry.value}
-                      type="button"
-                      onClick={() => {
-                        update({ tools: permissionTools(settings.tools, entry.value) })
-                        setPermissionOpen(false)
-                      }}
-                      className="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-raised"
-                    >
-                      <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
-                        {permission === entry.value ? (
-                          <Check size={12} className="text-accent" />
-                        ) : (
-                          <span className="h-1.5 w-1.5 rounded-full bg-line" />
-                        )}
-                      </span>
-                      <span className="min-w-0">
-                        <span className="block text-[11.5px] font-medium text-ink">{entry.label}</span>
-                        <span className="mt-0.5 block text-[10px] leading-relaxed text-faint">{entry.description}</span>
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-            <button
-              type="button"
-              className="icon-button h-8 w-8"
-              onClick={() => fileRef.current?.click()}
-              title="Attach images or text files"
-              aria-label="Attach files"
+                  {settings.mode === 'plan' ? 'Plan' : 'Build'}
+                </TextButton>
+              }
             >
-              <Paperclip size={15} />
-            </button>
+              <MenuLabel>Mode</MenuLabel>
+              {(
+                [
+                  { value: 'build', label: 'Build', hint: 'Edit files and run commands', icon: Sparkles },
+                  { value: 'plan', label: 'Plan', hint: 'Read-only investigation', icon: ListChecks },
+                ] as const
+              ).map((entry) => (
+                <button
+                  key={entry.value}
+                  type="button"
+                  onClick={() => {
+                    setMode(entry.value)
+                    setModeOpen(false)
+                  }}
+                  className="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-raised"
+                >
+                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
+                    {settings.mode === entry.value ? <Check size={12} className="text-accent" /> : <entry.icon size={12} className="text-faint" />}
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block text-[11.5px] font-medium text-ink">{entry.label}</span>
+                    <span className="mt-0.5 block text-[10px] leading-relaxed text-faint">{entry.hint}</span>
+                  </span>
+                </button>
+              ))}
+            </Popover>
+            <Popover
+              open={permissionOpen}
+              onClose={() => setPermissionOpen(false)}
+              width={290}
+              trigger={
+                <TextButton
+                  open={permissionOpen}
+                  onClick={() => {
+                    setEffortOpen(false)
+                    setModeOpen(false)
+                    setPermissionOpen((open) => !open)
+                  }}
+                  title="Choose how much OpenSol can do without asking"
+                >
+                  {permissionLabel(permission)}
+                </TextButton>
+              }
+            >
+              <MenuLabel>Permissions</MenuLabel>
+              {PERMISSION_MODES.map((entry) => (
+                <button
+                  key={entry.value}
+                  type="button"
+                  onClick={() => {
+                    update({ tools: permissionTools(settings.tools, entry.value) })
+                    setPermissionOpen(false)
+                  }}
+                  className="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-raised"
+                >
+                  <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
+                    {permission === entry.value ? <Check size={12} className="text-accent" /> : <span className="h-1.5 w-1.5 rounded-full bg-line" />}
+                  </span>
+                  <span className="min-w-0">
+                    <span className="block text-[11.5px] font-medium text-ink">{entry.label}</span>
+                    <span className="mt-0.5 block text-[10px] leading-relaxed text-faint">{entry.description}</span>
+                  </span>
+                </button>
+              ))}
+            </Popover>
+            {efforts.length > 1 && (
+              <Popover
+                open={effortOpen}
+                onClose={() => setEffortOpen(false)}
+                width={250}
+                trigger={
+                  <TextButton
+                    open={effortOpen}
+                    onClick={() => {
+                      setPermissionOpen(false)
+                      setModeOpen(false)
+                      setEffortOpen((open) => !open)
+                    }}
+                    title="Reasoning effort for this model"
+                  >
+                    {effortLabel(settings.effort)}
+                  </TextButton>
+                }
+              >
+                <MenuLabel>Effort</MenuLabel>
+                {efforts.map((effort) => (
+                  <button
+                    key={effort}
+                    type="button"
+                    onClick={() => {
+                      update({ effort })
+                      setEffortOpen(false)
+                    }}
+                    className="flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-raised"
+                  >
+                    <span className="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center">
+                      {settings.effort === effort ? <Check size={12} className="text-accent" /> : <span className="h-1.5 w-1.5 rounded-full bg-line" />}
+                    </span>
+                    <span className="min-w-0">
+                      <span className="block text-[11.5px] font-medium text-ink">{EFFORT_LABELS[effort].label}</span>
+                      <span className="mt-0.5 block text-[10px] leading-relaxed text-faint">{EFFORT_LABELS[effort].description}</span>
+                    </span>
+                  </button>
+                ))}
+              </Popover>
+            )}
             <input
               ref={fileRef}
               type="file"
@@ -588,9 +598,7 @@ export function Composer({
               open={pickerOpen}
               disabled={!connected}
               onClick={() => setPickerOpen((open) => !open)}
-              efforts={efforts}
-              effort={settings.effort}
-              title={connected ? 'Model deck: choose model and reasoning effort (Ctrl M)' : 'Add a provider key in Settings first'}
+              title={connected ? 'Choose a model (Ctrl M)' : 'Add a provider key in Settings first'}
             />
             {streaming ? (
               <button
@@ -625,14 +633,14 @@ export function Composer({
         </div>
 
         {dragging && (
-          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-1.5 rounded-2xl border-2 border-dashed border-accent/45 bg-panel/95">
+          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-1.5 rounded-xl border-2 border-dashed border-accent/45 bg-panel/95">
             <Upload size={18} className="text-accent" />
             <p className="text-[12px] font-medium text-ink">Drop files to attach</p>
             <p className="text-[10.5px] text-faint">Images up to 5 MB · text up to 512 KB</p>
           </div>
         )}
 
-        {pixleMood && (
+        {pixleMood && settings.showMascot && (
           <PixleSol
             mood={pixleMood}
             size={44}

package/src/components/ContextBar.tsx

@@ -9,7 +9,7 @@
 import { useMemo } from 'react'
 import type { ModelInfo, Message } from '../types'
 import { getContextUsage, AUTO_COMPACT_THRESHOLD } from '../lib/context'
-import { isCompacting } from '../agent/compact'
+import { useRuntime } from '../store/ui'
 import { formatCredits, sumCost } from '../lib/credits'
 import { cn } from '../lib/utils'
 
@@ -28,7 +28,7 @@ function formatTokens(n: number): string {
 export function ContextBar({ messages, model, sessionId }: ContextBarProps) {
   const usage = useMemo(() => getContextUsage(messages, model), [messages, model])
   const spent = useMemo(() => sumCost(messages), [messages])
-  const compacting = sessionId ? isCompacting(sessionId) : false
+  const compacting = useRuntime((state) => (sessionId ? Boolean(state.compacting[sessionId]) : false))
 
   if (messages.length === 0) return null
 

package/src/components/HomeDashboard.tsx

@@ -44,15 +44,18 @@ function Stat({ icon: Icon, label, value }: { icon: typeof Activity; label: stri
 
 export function HomeGreeting() {
   const daemon = useSettings((state) => state.daemon)
+  const showMascot = useSettings((state) => state.showMascot)
   const workspace = useWorkspace((state) => state.info)
   const home = daemon?.home ?? ''
   const name = home.split(/[\\/]/).filter(Boolean).pop() || workspace.name || 'there'
   return (
     <div className="flex flex-col items-center gap-4 text-center">
-      <div className="relative">
-        <span className="absolute inset-0 -z-10 m-auto h-16 w-16 rounded-full bg-accent/20 blur-2xl" aria-hidden="true" />
-        <PixleSol mood="wave" size={60} />
-      </div>
+      {showMascot && (
+        <div className="relative">
+          <span className="absolute inset-0 -z-10 m-auto h-16 w-16 rounded-full bg-accent/20 blur-2xl" aria-hidden="true" />
+          <PixleSol mood="wave" size={60} />
+        </div>
+      )}
       <h1 className="text-[28px] font-semibold leading-tight tracking-[-0.035em] text-ink sm:text-[34px]">
         What should we build, <span className="text-solar">{name}</span>?
       </h1>

package/src/components/MessageItem.tsx

@@ -18,7 +18,7 @@ import { regenerateLastTurn, runAgent } from '../agent'
 import { restoreCheckpoint } from '../lib/daemon'
 import { useWorkspace } from '../store/workspace'
 import { createId, useChats } from '../store/chats'
-import { toolLabel } from '../agent/tools'
+import { toolLabel } from '../lib/tool-meta'
 import { formatBytes, cn } from '../lib/utils'
 import { Markdown } from './Markdown'
 import { ToolCallCard, diffForTool } from './ToolCallCard'
@@ -375,6 +375,37 @@ export function UsedGroup({ tools, streaming = false }: { tools: ToolMessage[];
   return <TaskCompletedBox tools={tools} streaming={streaming} />
 }
 
+const COMPACTION_PREFIX = /^\[Summary of the earlier conversation[^\n]*\]\n\n/
+
+/** The summary that replaced older messages: a quiet divider that opens to the full text. */
+function CompactionNote({ message }: { message: AssistantMessage }) {
+  const [open, setOpen] = useState(false)
+  const meta = message.compaction
+  if (!meta) return null
+  return (
+    <div className="my-1">
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="group/compact flex w-full items-center gap-3 text-[11.5px] text-faint"
+        aria-expanded={open}
+      >
+        <span className="h-px flex-1 bg-line" />
+        <span className="shrink-0 transition-colors group-hover/compact:text-ink">
+          Context compacted · {meta.turns} turn{meta.turns === 1 ? '' : 's'}, {meta.toolCalls} tool call{meta.toolCalls === 1 ? '' : 's'} summarised
+          {meta.fallback ? ' · without the model' : ''}
+        </span>
+        <span className="h-px flex-1 bg-line" />
+      </button>
+      {open && (
+        <div className="animate-fade mt-2 rounded-xl border border-line bg-raised/40 px-4 py-3">
+          <Markdown content={message.content.replace(COMPACTION_PREFIX, '')} />
+        </div>
+      )}
+    </div>
+  )
+}
+
 export function AssistantBlock({
   message,
   sessionId,
@@ -402,6 +433,7 @@ export function AssistantBlock({
   // Thoughts stay closed until the person opens them, even while the model is still thinking.
   const [reasoningOpen, setReasoningOpen] = useState(false)
   const hasBody = Boolean(message.content.trim() || message.reasoning.trim() || message.error)
+  if (message.compaction) return <CompactionNote message={message} />
   const modelName =
     providerModels?.find((model) => model.id === message.model)?.name ?? message.model ?? ''
   const needsConfig = Boolean(message.error && /api key|base url|settings|credential|403|401/i.test(message.error))

package/src/components/ModelDeck.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type FormEvent, type KeyboardEvent } from 'react'
 import { createPortal } from 'react-dom'
-import { AlertCircle, Brain, Check, Eye, KeyRound, Plus, RefreshCw, Search, Settings2, X, Zap } from 'lucide-react'
+import { AlertCircle, Brain, Check, ChevronDown, Eye, KeyRound, Plus, RefreshCw, Search, Settings2, X, Zap } from 'lucide-react'
 import { PROVIDERS, PROVIDER_MAP, EFFORT_LABELS, effortLabel } from '../data/providers'
 import type { Effort, ModelInfo, ProviderId } from '../types'
 import { activeModelId, providerHasCredentials, useSettings } from '../store/settings'
@@ -33,25 +33,6 @@ function monogram(name: string) {
   return (words.length > 1 ? words[0][0] + words[1][0] : name.slice(0, 2)).toUpperCase()
 }
 
-/** Signal-bar style effort meter used on the composer trigger. */
-export function EffortBars({ efforts, value, className }: { efforts: Effort[]; value: Effort; className?: string }) {
-  const index = Math.max(0, efforts.indexOf(value))
-  return (
-    <span className={cn('flex h-3.5 items-end gap-[2px]', className)} aria-hidden>
-      {efforts.map((effort, i) => (
-        <span
-          key={effort}
-          style={{ height: `${38 + (i / Math.max(1, efforts.length - 1)) * 62}%` }}
-          className={cn(
-            'w-[3px] rounded-[1px] transition-all duration-300 ease-spring',
-            i <= index ? 'bg-accent' : 'bg-line',
-          )}
-        />
-      ))}
-    </span>
-  )
-}
-
 function EffortThrottle({
   efforts,
   value,
@@ -628,14 +609,13 @@ export function ModelDeck({ open, onClose }: { open: boolean; onClose: () => voi
 }
 
 /** Composer trigger: model name with live effort bars, no dropdown chevron. */
+/** Plain-text model name for the composer; opens the deck. */
 export function ModelDeckTrigger({
   label,
   open,
   disabled,
   onClick,
   triggerRef,
-  efforts,
-  effort,
   title,
 }: {
   label: string
@@ -643,8 +623,6 @@ export function ModelDeckTrigger({
   disabled: boolean
   onClick: () => void
   triggerRef: React.RefObject<HTMLButtonElement | null>
-  efforts: Effort[]
-  effort: Effort
   title: string
 }) {
   return (
@@ -657,12 +635,12 @@ export function ModelDeckTrigger({
       aria-expanded={open}
       title={title}
       className={cn(
-        'deck-trigger group/deck flex h-8 max-w-[200px] items-center gap-2 rounded-full border border-transparent pl-2.5 pr-2.5 text-[11px] font-medium text-muted transition-all duration-200 hover:border-line hover:bg-raised hover:text-ink active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-45 sm:max-w-[270px]',
-        open && 'border-accent/40 bg-accent-soft text-accent',
+        'deck-trigger flex h-8 max-w-[180px] items-center gap-1 rounded-lg px-2 text-[12px] font-medium text-muted transition-colors hover:text-ink disabled:cursor-not-allowed disabled:opacity-45 sm:max-w-[260px]',
+        open && 'text-ink',
       )}
     >
       <span className="truncate">{label}</span>
-      {efforts.length > 1 && <EffortBars efforts={efforts} value={effort} />}
+      <ChevronDown size={11} className={cn('shrink-0 text-faint transition-transform', open && 'rotate-180')} />
     </button>
   )
 }

package/src/components/SettingsModal.tsx

@@ -1602,6 +1602,14 @@ function GeneralTab() {
         />
       </div>
 
+      <div className="settings-row">
+        <div className="min-w-0">
+          <p className="settings-label">Show mascot</p>
+          <p className="settings-hint">The pixel mascot on the home screen and above the message box. Off by default.</p>
+        </div>
+        <Switch checked={settings.showMascot} onChange={(showMascot) => update({ showMascot })} label="Show mascot" />
+      </div>
+
       <div className="settings-row">
         <div className="min-w-0">
           <p className="settings-label">Show token estimates</p>

package/src/components/ToolCallCard.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 import { ArrowRight } from 'lucide-react'
 import type { FileDiff, ToolMessage, ToolName } from '../types'
-import { toolLabel, toolSummary } from '../agent/tools'
-import { resolveApproval } from '../agent/approval'
+import { toolLabel, toolSummary } from '../lib/tool-meta'
+import { resolveApproval } from '../core/services/approval'
 import { useUi } from '../store/ui'
 import { cn } from '../lib/utils'
 import { diffLines, diffStats } from '../lib/diff'

package/src/components/TrajectoryView.tsx

@@ -9,7 +9,7 @@ import {
   Wrench,
 } from 'lucide-react'
 import type { ChatSession, Message } from '../types'
-import { toolLabel, toolSummary } from '../agent/tools'
+import { toolLabel, toolSummary } from '../lib/tool-meta'
 import { cn } from '../lib/utils'
 import { LogoMark } from './Logo'