@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/SessionBrowser.tsx

@@ -12,14 +12,7 @@ import {
   projectsOf,
   subsetSummary,
 } from '@workerdeck/protocol'
-import type {
-  GroupBy,
-  SessionRow,
-  SessionState,
-  SortBy,
-  ViewConfig,
-  WorkspaceScope,
-} from '@workerdeck/protocol'
+import type { GroupBy, SessionRow, SessionState, SortBy, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
 import { Button } from '../ui/Button.tsx'
 import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
@@ -28,121 +21,29 @@ import { ProjectIcon } from './ProjectIcon.tsx'
 import { SessionItem } from './SessionItem.tsx'
 import { cn } from '../../lib/utils.ts'
 
-// The state glyph moved to its own module when the card did — the extension's
-// list draws it too, and this file re-exports it only so the package's public
-// surface does not shift under a host that imports it from here.
 export { SessionStatusIcon } from './SessionStatusIcon.tsx'
 
-/**
- * A sessions list with the affordances a list of thirty needs: search, facets,
- * grouping, sorting, unread counts, and one honest line about what is hidden.
- *
- * The *rules* are `@workerdeck/protocol`'s (`filterRows`/`groupRows`/
- * `subsetSummary`), not this component's — the VS Code sidebar renders the same
- * model with workbench chrome, its activity-bar badge counts the same rows this
- * would show, and iOS mirrors them in Swift. What lives here is the styled
- * rendering of that model, so a host that wants the dashboard's look gets it
- * without reimplementing the model behind it.
- *
- * `SessionList` remains beside this for the plain case (a fixed set of rows, no
- * controls); this is what you reach for when the list is the screen.
- */
-
 export interface SessionBrowserProps {
   rows: SessionRow[]
   config: ViewConfig
   onConfigChange: (config: ViewConfig) => void
-  /** The host's own folders, if it has such a notion. Absent — a dashboard, a
-   * phone — makes the scope filter genuinely inert rather than empty. */
   scope?: WorkspaceScope
   activeId?: string
-  /**
-   * Which sub-agent the host currently has open, by tool-use id — the *finer*
-   * of the two selections. The card holding it drops to the secondary grey and
-   * that step takes the blue; see `SessionItem`. A host with no sub-agent
-   * surface leaves it undefined and nothing changes.
-   */
   activeSubagentId?: string
   onSelect?: (row: SessionRow) => void
   onDelete?: (row: SessionRow) => void
-  /**
-   * Rename, from the row's pencil. Empty string restores the derived title. A
-   * gateway edit (`PATCH /sessions/:id`), never a local override — every client
-   * should see the same name. Omit to make titles read-only.
-   *
-   * A hover affordance rather than the extension's double-click-the-title,
-   * because here a single click on the row navigates: the *first* click of a
-   * double-click would have already left the page.
-   */
   onRename?: (row: SessionRow, title: string) => void
-  /**
-   * Clear the conversation in place, from the row's eraser. Same session, empty
-   * context — **not** a delete: the engine keeps the old conversation and it
-   * stays resumable, which is why the row's copy never says "deleted".
-   *
-   * Rendered only where the session's own capability record allows it
-   * (`capabilities.clearContext`, absent = false), so a row that cannot be
-   * cleared has no eraser rather than one that errors. Omit the prop to have
-   * none at all — a host with no way to send a session command has nothing to
-   * hang it on (this is a WS command, not a REST route).
-   */
   onClearContext?: (row: SessionRow) => void
-  /** Open a session *at* one of its sub-agents, when the host can scroll a
-   * transcript to a `Task` row. Absent, the sub-agent list still expands and a
-   * step just opens its session — see `SessionRowItemProps`. */
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
-  /** Open a session and travel to one of its **tasks** — see
-   * `SessionItem.onRevealStep`. A task has no agent behind it, so it is a place
-   * to go rather than a thing to open, and framing it as an agent drew an empty
-   * view. */
   onRevealStep?: (row: SessionRow, toolUseId: string) => void
-  /** Rendered when nothing at all exists (as opposed to nothing matching). */
   emptyState?: React.ReactNode
-  /**
-   * Whether the search + facet bar is shown. Defaults to `true` — a list that
-   * *is* the screen shows its controls.
-   *
-   * A host with somewhere better to put the toggle (a view title bar) passes
-   * `false` and owns the boolean itself, the way the VS Code extension does: the
-   * key lives where the commands do. Two rules come with it, and they are why
-   * this hides only the bar and nothing else — **closing the bar never clears
-   * the filters**, and the subset line below it renders either way, so a list
-   * filtered by a control you can't currently see still says so.
-   */
   showControls?: boolean
-  /**
-   * Resolved project-icon bytes by content hash — `useProjectIcons`' output.
-   *
-   * Passed in rather than fetched here for the reason `ProjectIcon` states: the
-   * wire carries an *address*, and who can fetch it differs per client. Absent,
-   * or a hash not in it yet, simply draws no picture; the project's name is
-   * already there.
-   */
   projectIcons?: Record<string, string>
   className?: string
 }
 
-/**
- * How a list row is drawn, in one place, so `SidebarRow` in `web` matches this
- * exactly rather than approximating it — the dashboard's other three sidebars
- * are that component, and a sessions list that hovered differently from the
- * gateways list beside it would read as a different product.
- *
- * Two rules are load-bearing:
- *
- * - **Fill means hover, and only hover.** It stays on the row whether or not
- *   the row is selected, because a selected row still has to answer the
- *   pointer. Selection gets the gutter instead.
- * - **`ml-0` on the selected row is not cosmetic.** It hands the accent border
- *   the 4px the margin was holding, so the text does not shift sideways as a
- *   row becomes the selected one. The squared left corners are what let the bar
- *   sit flush against the sidebar edge.
- */
 export function rowShapeClass(active: boolean): string {
-  return cn(
-    'px-2 py-1.5 hover:bg-row-hover',
-    active ? 'mr-1 ml-0 rounded-r-md border-l-4 border-l-accent' : 'mx-1 rounded-md',
-  )
+  return cn('px-2 py-1.5 hover:bg-row-hover', active ? 'mr-1 ml-0 rounded-r-md border-l-4 border-l-accent' : 'mx-1 rounded-md')
 }
 
 export function SessionBrowser({
@@ -166,48 +67,43 @@ export function SessionBrowser({
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
   const groups = useMemo(() => groupRows(visible, config), [visible, config])
   const subset = subsetSummary(config, scope, visible.length, rows.length)
-  // Derived, not enumerated: a new engine or a new gateway needs no change here,
-  // and a facet with one possible value is not a choice worth showing.
   const adapters = useMemo(() => adaptersOf(rows), [rows])
   const projects = useMemo(() => projectsOf(rows), [rows])
   const gateways = useMemo(() => {
     const seen = new Map<string, string>()
-    for (const row of rows) seen.set(row.hostId, row.hostName)
+    for (const row of rows) {
+      seen.set(row.hostId, row.hostName)
+    }
     return [...seen].map(([id, name]) => ({ id, name }))
   }, [rows])
 
   const set = (patch: Partial<ViewConfig>) => onConfigChange({ ...config, ...patch })
 
   return (
-    <div data-slot='session-browser' className={cn('flex flex-col gap-3', className)}>
-      {/* One control per row, label left, input right — the shape VS Code uses
-          for its own filter surfaces. A wrapping row of pill-shaped selects
-          reflows into an unpredictable number of lines as facets appear and
-          disappear; a column of labelled rows is the same height every time and
-          reads at sidebar width, which is the only width this has. */}
+    <div data-slot="session-browser" className={cn('flex flex-col gap-3', className)}>
       <div className={cn('flex flex-col gap-1.5 px-2', !showControls && 'hidden')}>
-        <div className='relative'>
-          <Search className='pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-4' />
+        <div className="relative">
+          <Search className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-4" />
           <Input
             value={config.search}
             onChange={(e) => set({ search: e.target.value })}
-            placeholder='Search sessions'
-            aria-label='Search sessions'
-            className='pl-8'
+            placeholder="Search sessions"
+            aria-label="Search sessions"
+            className="pl-8"
           />
         </div>
-        <FilterRow label='State'>
+        <FilterRow label="State">
           <FacetSelect
-            label='State'
+            label="State"
             value={config.states}
             options={STATE_ORDER.map((s) => ({ value: s, label: STATE_LABELS[s] }))}
             onChange={(states) => set({ states: states as SessionState[] })}
           />
         </FilterRow>
         {adapters.length > 1 ? (
-          <FilterRow label='Engine'>
+          <FilterRow label="Engine">
             <FacetSelect
-              label='Engine'
+              label="Engine"
               value={config.adapters}
               options={adapters.map((a) => ({ value: a, label: a }))}
               onChange={(adapters) => set({ adapters })}
@@ -215,9 +111,9 @@ export function SessionBrowser({
           </FilterRow>
         ) : null}
         {gateways.length > 1 ? (
-          <FilterRow label='Gateway'>
+          <FilterRow label="Gateway">
             <FacetSelect
-              label='Gateway'
+              label="Gateway"
               value={config.gateways}
               options={gateways.map((g) => ({ value: g.id, label: g.name }))}
               onChange={(gateways) => set({ gateways })}
@@ -225,18 +121,18 @@ export function SessionBrowser({
           </FilterRow>
         ) : null}
         {projects.length > 1 ? (
-          <FilterRow label='Project'>
+          <FilterRow label="Project">
             <FacetSelect
-              label='Project'
+              label="Project"
               value={config.projects ?? []}
               options={projects.map((p) => ({ value: p.key, label: p.label }))}
               onChange={(next) => set({ projects: next })}
             />
           </FilterRow>
         ) : null}
-        <FilterRow label='Group'>
+        <FilterRow label="Group">
           <OneOfSelect
-            label='Group'
+            label="Group"
             value={config.groupBy}
             options={[
               { value: 'none', label: 'No grouping' },
@@ -248,9 +144,9 @@ export function SessionBrowser({
             onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
           />
         </FilterRow>
-        <FilterRow label='Sort'>
+        <FilterRow label="Sort">
           <OneOfSelect
-            label='Sort'
+            label="Sort"
             value={config.sortBy}
             options={[
               { value: 'recent', label: 'Recent' },
@@ -265,62 +161,46 @@ export function SessionBrowser({
       </div>
 
       {subset ? (
-        <div className='flex items-center gap-2 px-3 text-label text-fg-4'>
+        <div className="flex items-center gap-2 px-3 text-label text-fg-4">
           <span>
             {subset.shown} of {subset.total}
             {subset.causes.length ? ` · ${subset.causes.join(' · ')}` : null}
           </span>
           <button
-            type='button'
-            className='text-fg-3 underline underline-offset-2 hover:text-fg-1'
-            onClick={() => onConfigChange(clearFilters(config))}>
+            type="button"
+            className="text-fg-3 underline underline-offset-2 hover:text-fg-1"
+            onClick={() => onConfigChange(clearFilters(config))}
+          >
             Show all
           </button>
         </div>
       ) : null}
 
       {rows.length === 0 ? (
-        (emptyState ?? <Empty icon={<Layers />} title='No sessions yet' />)
+        (emptyState ?? <Empty icon={<Layers />} title="No sessions yet" />)
       ) : visible.length === 0 ? (
-        // Two different dead ends, two different ways out. "Nothing matches" is
-        // a filter someone set; anything else is the state of the world — and
-        // only the first has a button, because an action that does nothing is
-        // worse than none.
         hasFacetFilter(config) ? (
           <Empty
             icon={<SearchX />}
-            title='No matches'
-            description='No session matches the current search and filters.'
-            action='Clear filters'
+            title="No matches"
+            description="No session matches the current search and filters."
+            action="Clear filters"
             onAction={() => onConfigChange(clearFilters(config))}
           />
         ) : (
-          <Empty icon={<Layers />} title='Nothing here' description='No session to show.' />
+          <Empty icon={<Layers />} title="Nothing here" description="No session to show." />
         )
       ) : (
-        /* The list's own 4px inset, as **padding on the list** rather than
-           margins on the cards. `SessionItem` is `w-full` — it fills the slot it
-           is given, which is what lets a host size it — and `w-full` plus
-           `mx-1` is `100% + 8px`: an overflow by construction, which is exactly
-           what it did. The cards ran past the sidebar's right edge and the
-           column grew a horizontal scrollbar. Padding here cannot do that,
-           whatever the card's own width rule turns out to be. */
-        <div className='flex flex-col gap-4 px-1'>
+        <div className="flex flex-col gap-4 px-1">
           {groups.map((group) => (
-            <div key={group.key} className='flex flex-col gap-1'>
+            <div key={group.key} className="flex flex-col gap-1">
               {config.groupBy !== 'none' && group.label ? (
-                <div className='flex items-center gap-2 px-2 text-label font-medium text-fg-4'>
-                  {/* Only the project facet has a mark of its own, and a group
-                      IS one project root, so the first row is a fair source. */}
+                <div className="flex items-center gap-2 px-2 text-label font-medium text-fg-4">
                   {config.groupBy === 'project' ? (
-                    <ProjectIcon
-                      icon={group.rows[0]?.info.project?.icon}
-                      src={iconSrcOf(group.rows[0], projectIcons)}
-                      name={group.label}
-                    />
+                    <ProjectIcon icon={group.rows[0]?.info.project?.icon} src={iconSrcOf(group.rows[0], projectIcons)} name={group.label} />
                   ) : null}
-                  <span className='uppercase tracking-wide'>{group.label}</span>
-                  <span className='text-fg-4/70'>{group.rows.length}</span>
+                  <span className="uppercase tracking-wide">{group.label}</span>
+                  <span className="text-fg-4/70">{group.rows.length}</span>
                 </div>
               ) : null}
               {group.rows.map((row) => (
@@ -348,13 +228,7 @@ export function SessionBrowser({
   )
 }
 
-/** The bytes for a row's project icon, if it has an image one and the caller has
- * fetched it yet. Shared by the row and its group header so the two cannot draw
- * different pictures for one project. */
-function iconSrcOf(
-  row: SessionRow | undefined,
-  icons: Record<string, string> | undefined,
-): string | undefined {
+function iconSrcOf(row: SessionRow | undefined, icons: Record<string, string> | undefined): string | undefined {
   const icon = row?.info.project?.icon
   return icon?.type === 'image' ? icons?.[icon.hash] : undefined
 }
@@ -362,32 +236,15 @@ function iconSrcOf(
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
-  /** See `SessionBrowserProps.activeSubagentId`. */
   activeSubagentId?: string
   showGateway?: boolean
-  /** False when the list is already grouped by project — the header has said the
-   * name, so the row must not spend its metadata line repeating it. What takes
-   * the slot is the *sub-path inside the project* (`projectSubpath`), which is
-   * the one thing the header cannot say and the only thing that tells two
-   * sessions in the same repo apart; a session sitting at the project root has
-   * nothing to add and the slot disappears entirely. The rule `showGateway`
-   * follows one facet over. */
   showProject?: boolean
   projectIcons?: Record<string, string>
   onSelect?: (row: SessionRow) => void
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
-  /** See `SessionBrowserProps.onClearContext` — gated on the row's own
-   * capability record, not on the engine name. */
   onClearContext?: (row: SessionRow) => void
-  /** Open one of a session's sub-agents — which now means handing the session
-   * panel over to that agent's own work (`SessionPanel.openSubagent`), and meant
-   * "scroll to its `Task` row" before that surface existed. Both are honest; a
-   * host picks what it can draw. Optional, and its absence is not a missing
-   * feature: without it a step just opens the session, which is all a host with
-   * neither can offer. Only *agent* steps ever call it — see `Step.kind`. */
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
-  /** See `SessionBrowserProps.onRevealStep`. */
   onRevealStep?: (row: SessionRow, toolUseId: string) => void
 }
 
@@ -406,10 +263,6 @@ function SessionRowItem({
   onRevealStep,
 }: SessionRowItemProps) {
   const { info } = row
-  // The rename affordance here is a pencil, not the card's own double-click:
-  // the dashboard already spends the row's hover on two other actions, and a
-  // gesture that only one of the three responds to is a gesture nobody finds.
-  // So the trigger is `external` and this owns the flag.
   const [editing, setEditing] = useState(false)
 
   return (
@@ -424,32 +277,28 @@ function SessionRowItem({
       onSelectSubagent={onSelectSubagent ? (id) => onSelectSubagent(row, id) : undefined}
       onRevealStep={onRevealStep ? (id) => onRevealStep(row, id) : undefined}
       onRename={onRename ? (title) => onRename(row, title) : undefined}
-      renameOn='external'
+      renameOn="external"
       editing={editing}
       onEditingChange={setEditing}
       actions={
         <>
           {onRename && !editing ? (
-            <RowAction
-              label='Rename session'
-              onClick={() => setEditing(true)}>
-              <Pencil className='size-3 text-fg-3' />
+            <RowAction label="Rename session" onClick={() => setEditing(true)}>
+              <Pencil className="size-3 text-fg-3" />
             </RowAction>
           ) : null}
-          {/* Gated on the row's own capability record, not on the engine name —
-              an engine that grows the ability gets the button with no change
-              here, and one that loses it stops offering a control that fails. */}
           {onClearContext && info.capabilities?.clearContext ? (
             <RowAction
-              label='Clear context'
-              title='Clear the conversation — the session keeps running and the old conversation stays resumable'
-              onClick={() => onClearContext(row)}>
-              <Eraser className='size-3 text-fg-3' />
+              label="Clear context"
+              title="Clear the conversation — the session keeps running and the old conversation stays resumable"
+              onClick={() => onClearContext(row)}
+            >
+              <Eraser className="size-3 text-fg-3" />
             </RowAction>
           ) : null}
           {onDelete ? (
-            <RowAction label='Close session' onClick={() => onDelete(row)}>
-              <Trash2 className='size-3 text-fg-3' />
+            <RowAction label="Close session" onClick={() => onDelete(row)}>
+              <Trash2 className="size-3 text-fg-3" />
             </RowAction>
           ) : null}
         </>
@@ -458,58 +307,31 @@ function SessionRowItem({
   )
 }
 
-/**
- * One of the dashboard's hover actions.
- *
- * Hover-revealed rather than always on, which is the opposite of the
- * extension's single overflow glyph and the right call for each: there are
- * three of them here and a sidebar card has room for one, so the extension
- * spends that room on a menu and this spends the row's hover on the actions
- * themselves. Both stop the click — the whole card is pressable underneath, and
- * an action that also selected the session would do two things per press.
- */
-function RowAction({
-  label,
-  title,
-  onClick,
-  children,
-}: {
-  label: string
-  title?: string
-  onClick: () => void
-  children: ReactNode
-}) {
+function RowAction({ label, title, onClick, children }: { label: string; title?: string; onClick: () => void; children: ReactNode }) {
   return (
     <Button
-      variant='ghost'
-      size='icon-sm'
+      variant="ghost"
+      size="icon-sm"
       aria-label={label}
       title={title ?? label}
-      className='size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100'
+      className="size-5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
       onClick={(e) => {
         e.stopPropagation()
         onClick()
-      }}>
+      }}
+    >
       {children}
     </Button>
   )
 }
 
-
-/** A multi-select facet. Empty = no filter, which is why the trigger reads the
- * facet's name rather than "All": nothing is being excluded. */
-/**
- * One labelled control row. The label column is fixed so every control starts
- * on the same x — the thing that makes a stack of them read as a form rather
- * than as five unrelated widgets.
- */
 function FilterRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className='flex items-center gap-2'>
-      <span aria-hidden className='w-14 shrink-0 truncate text-label text-fg-3'>
+    <div className="flex items-center gap-2">
+      <span aria-hidden className="w-14 shrink-0 truncate text-label text-fg-3">
         {label}
       </span>
-      <div className='min-w-0 flex-1'>{children}</div>
+      <div className="min-w-0 flex-1">{children}</div>
     </div>
   )
 }
@@ -526,11 +348,10 @@ function FacetSelect({
   onChange: (value: string[]) => void
 }) {
   return (
-    <div className='flex items-center gap-1'>
+    <div className="flex items-center gap-1">
       <Select multiple value={value} onValueChange={(v) => onChange(v as string[])}>
-        <SelectTrigger aria-label={label} className='min-w-0 flex-1'>
+        <SelectTrigger aria-label={label} className="min-w-0 flex-1">
           <SelectValue>
-            {/* "All" rather than the label, which the row already carries. */}
             {value.length === 0
               ? 'All'
               : value.length === 1
@@ -547,8 +368,8 @@ function FacetSelect({
         </SelectContent>
       </Select>
       {value.length > 0 ? (
-        <Button variant='ghost' size='icon-sm' aria-label={`Clear ${label}`} onClick={() => onChange([])}>
-          <X className='size-3 text-fg-4' />
+        <Button variant="ghost" size="icon-sm" aria-label={`Clear ${label}`} onClick={() => onChange([])}>
+          <X className="size-3 text-fg-4" />
         </Button>
       ) : null}
     </div>
@@ -568,7 +389,7 @@ function OneOfSelect({
 }) {
   return (
     <Select value={value} onValueChange={(v) => onChange(v as string)}>
-      <SelectTrigger aria-label={label} className='w-full min-w-0'>
+      <SelectTrigger aria-label={label} className="w-full min-w-0">
         <SelectValue>{options.find((o) => o.value === value)?.label ?? label}</SelectValue>
       </SelectTrigger>
       <SelectContent>

package/src/components/agent/SessionEmptyState.tsx

@@ -3,60 +3,30 @@ import { cn } from '../../lib/utils.ts'
 
 export interface SessionEmptyStateProps {
   cwd?: string
-  /** Whether `/command` completion is live yet — the CLI reports its commands a
-   * beat after the session starts, and promising a feature that isn't wired up
-   * yet is worse than not mentioning it. */
   hasCommands?: boolean
-  /** Whether the engine has reported skills the `/` popover can offer. Its own
-   * flag, not a variant of `hasCommands`: what `/` does differs — a command is
-   * submitted, a skill is typed for you to edit — and an engine can have one
-   * without the other. */
   hasSkills?: boolean
-  /** Whether this gateway serves `@file` search for the session's directory. */
   canBrowseFiles?: boolean
   className?: string
 }
 
-/**
- * What a session shows before it has said anything: where the agent is sitting,
- * and what the composer accepts beyond prose.
- *
- * Every hint is conditional on the affordance actually existing — an engine
- * without slash commands, or a gateway without host files, is not told about
- * them. Deliberately no project name (the header already carries it) and no
- * brand mark (its geometry is inlined in several places already and they are
- * meant to stay identical).
- */
-export function SessionEmptyState({
-  cwd,
-  hasCommands,
-  hasSkills,
-  canBrowseFiles,
-  className,
-}: SessionEmptyStateProps) {
+export function SessionEmptyState({ cwd, hasCommands, hasSkills, canBrowseFiles, className }: SessionEmptyStateProps) {
   const hints = [
     { icon: MessageSquareText, text: 'Tell the agent what to do.' },
-    // Two keys, two hints — they are different features, not two spellings of
-    // one. `$` is codex's own sigil for skills; `/` stays the CLI's commands.
     ...(hasCommands ? [{ icon: SlashSquare, text: 'Type / for the CLI’s slash commands.' }] : []),
-    ...(hasSkills
-      ? [{ icon: Sparkles, text: 'Type $ to draft a message for one of the agent’s skills.' }]
-      : []),
-    ...(canBrowseFiles
-      ? [{ icon: AtSign, text: 'Type @ to search this project’s files.' }]
-      : []),
+    ...(hasSkills ? [{ icon: Sparkles, text: 'Type $ to draft a message for one of the agent’s skills.' }] : []),
+    ...(canBrowseFiles ? [{ icon: AtSign, text: 'Type @ to search this project’s files.' }] : []),
   ]
   return (
     <div className={cn('flex flex-col items-center gap-4 py-10', className)}>
-      <div className='flex size-12 items-center justify-center rounded-xl bg-surface text-fg-3'>
-        <Terminal className='size-5' />
+      <div className="flex size-12 items-center justify-center rounded-xl bg-surface text-fg-3">
+        <Terminal className="size-5" />
       </div>
-      {cwd ? <p className='max-w-full truncate font-mono text-label text-fg-4'>{cwd}</p> : null}
-      <ul className='w-full max-w-sm divide-y divide-border overflow-hidden rounded-lg bg-surface'>
+      {cwd ? <p className="max-w-full truncate font-mono text-label text-fg-4">{cwd}</p> : null}
+      <ul className="w-full max-w-sm divide-y divide-border overflow-hidden rounded-lg bg-surface">
         {hints.map((hint) => (
-          <li key={hint.text} className='flex items-center gap-3 px-3.5 py-2.5'>
-            <hint.icon className='size-4 shrink-0 text-fg-4' />
-            <span className='text-body-sm text-fg-3'>{hint.text}</span>
+          <li key={hint.text} className="flex items-center gap-3 px-3.5 py-2.5">
+            <hint.icon className="size-4 shrink-0 text-fg-4" />
+            <span className="text-body-sm text-fg-3">{hint.text}</span>
           </li>
         ))}
       </ul>