@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/SessionWorkspace.tsx

@@ -1,14 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'
 import { createPortal } from 'react-dom'
 import type { WorkerDeckClient } from '@workerdeck/client'
-import {
-  useHostFileRoots,
-  useHostFileSearch,
-  useHostFileTree,
-  useOpenFiles,
-  useSessionInfo,
-  isDirty,
-} from '@workerdeck/react'
+import { useHostFileRoots, useHostFileSearch, useHostFileTree, useOpenFiles, useSessionInfo, isDirty } from '@workerdeck/react'
 import { PanelLeftOpen } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
 import { Button } from '../ui/Button.tsx'
@@ -22,86 +15,35 @@ import { resolveAgainstCwd, usePathLinks } from './use-path-links.ts'
 export interface SessionWorkspaceProps {
   client: WorkerDeckClient
   sessionId: string | undefined
-  /** Passed straight through to {@link SessionPanel} — including the render-prop
-   * form that claims the session-actions menu. */
   header?: SessionPanelProps['header']
-  /**
-   * Panel seams the workspace does not interpret, forwarded verbatim.
-   *
-   * They are listed rather than spread so the workspace stays explicit about
-   * what it passes on: the panel owns the session's one attach, and a seam that
-   * silently arrived here would be a second place to look for why a session
-   * renders the way it does.
-   */
   transcriptVariant?: SessionPanelProps['transcriptVariant']
   transcriptDensity?: SessionPanelProps['transcriptDensity']
   transcriptFont?: SessionPanelProps['transcriptFont']
-  /** The overview ruler in place of the scrollbar — see `SessionPanel`. */
   scrubber?: SessionPanelProps['scrubber']
-  scrubberMarks?: SessionPanelProps['scrubberMarks']
-  /** The last prompt pinned above the transcript — see `SessionPanel`. */
+  bookmarks?: SessionPanelProps['bookmarks']
+  onToggleBookmark?: SessionPanelProps['onToggleBookmark']
   stickyPrompt?: SessionPanelProps['stickyPrompt']
-  /** Take the panel body over with one sub-agent's work — see `SessionPanel`. */
   openSubagent?: SessionPanelProps['openSubagent']
-  /** Travel to a row in the conversation without framing anything — where a
-   * **task** press lands, as opposed to `openSubagent`'s takeover. See
-   * `SessionPanel`. */
   reveal?: SessionPanelProps['reveal']
-  /** The outward half of `openSubagent`: which sub-agent the panel now has
-   * framed, or `undefined` for the conversation — see `SessionPanel`. */
   onSubagentChange?: SessionPanelProps['onSubagentChange']
-  /** Which end of the panel the status bar sits at — see `SessionPanel`. */
   statusPlacement?: SessionPanelProps['statusPlacement']
   controlsSurface?: SessionPanelProps['controlsSurface']
+  fontSize?: SessionPanelProps['fontSize']
+  onLinkClick?: SessionPanelProps['onLinkClick']
   unseen?: SessionPanelProps['unseen']
-  /** Viewer mode — no composer, no approval prompts. Forwarded verbatim to
-   * {@link SessionPanel}; the file tree and editor are unaffected, since reading
-   * a run's files is the point of a read-only view. */
   readOnly?: SessionPanelProps['readOnly']
   onVitals?: SessionPanelProps['onVitals']
-  /** Rail width in pixels on first render. */
   defaultRailWidth?: number
-  /** Start with the file rail collapsed even on a wide viewport. */
   defaultRailCollapsed?: boolean
-  /**
-   * The rail moved. Paired with the two defaults so an embedder can persist the
-   * layout — the workspace deliberately does not, because *where* to keep it (a
-   * Memento, localStorage, a workspace file) is the embedder's call, and a
-   * component that picked one would be wrong in the other hosts.
-   */
   onRailChange?: (rail: { width: number; collapsed: boolean }) => void
   className?: string
 }
 
 const RAIL_MIN = 180
 const RAIL_MAX = 520
-/** How little of the agent column the editor may leave. Below this the composer
- * and a line of transcript stop fitting together, which is the point at which the
- * agent has stopped being usable rather than merely small. */
 const AGENT_MIN = 220
 const EDITOR_MIN = 120
 
-/**
- * A VS Code-shaped workspace around a live session: file tree on the left, open
- * files above, the agent below.
- *
- * **Strictly additive.** {@link SessionPanel} is untouched and still the whole
- * session surface on its own — an embedder picks one or the other, and one that
- * has its own file tree keeps using the panel.
- *
- * Two things here are load-bearing and easy to break:
- *
- * 1. **The editor region is absent from the layout when nothing is open**, not
- *    collapsed to zero height. A zero-height pane leaves a draggable splitter and
- *    parks the composer at an odd offset; absence is what makes the agent's
- *    "claims the full column" state actually look like the panel alone.
- * 2. **`SessionPanel` keeps its position in the tree across that transition.** It
- *    holds the WebSocket attach and the entire transcript, so moving it between
- *    parents — or wrapping it conditionally — would remount it and drop the
- *    session's rendered history on the floor the first time someone opens a file.
- *    The conditional children before it are `? :` expressions that leave a null in
- *    their slot, which is exactly what keeps its index stable.
- */
 export function SessionWorkspace({
   client,
   sessionId,
@@ -110,13 +52,16 @@ export function SessionWorkspace({
   transcriptDensity,
   transcriptFont,
   scrubber,
-  scrubberMarks,
+  bookmarks,
+  onToggleBookmark,
   stickyPrompt,
   openSubagent,
   reveal,
   onSubagentChange,
   statusPlacement,
   controlsSurface,
+  fontSize,
+  onLinkClick,
   unseen,
   readOnly,
   onVitals,
@@ -125,26 +70,18 @@ export function SessionWorkspace({
   onRailChange,
   className,
 }: SessionWorkspaceProps) {
-  // The cwd is the tree's root, and it comes from the registry rather than from
-  // the panel: reading it off the panel's own session hook would mean attaching
-  // a second WebSocket client, and the tool bridge asks the *first* attached
-  // client — a second one changes who answers.
   const { info } = useSessionInfo(client, sessionId)
   const cwd = info?.cwd
 
   const tree = useHostFileTree(client, cwd)
   const search = useHostFileSearch(client, cwd)
   const files = useOpenFiles(client)
-  // Writing is a separate server opt-in from reading and defaults off, so the
-  // editor asks before it offers to save anything.
   const { canWrite } = useHostFileRoots(client)
 
-
-  // Nothing here can save on the user's behalf when the tab is going away, so
-  // the browser's own guard is the last line. Registered only while there is
-  // something to lose — an unconditional handler makes every navigation prompt.
   useEffect(() => {
-    if (!files.hasUnsaved) return
+    if (!files.hasUnsaved) {
+      return
+    }
     const warn = (event: BeforeUnloadEvent) => event.preventDefault()
     window.addEventListener('beforeunload', warn)
     return () => window.removeEventListener('beforeunload', warn)
@@ -153,8 +90,6 @@ export function SessionWorkspace({
   const wide = useIsWide()
   const [railCollapsed, setRailCollapsed] = useState(defaultRailCollapsed ?? false)
   const [railWidth, setRailWidth] = useState(defaultRailWidth)
-  // Reported rather than stored. Kept in a ref so the effect below fires on a
-  // real change instead of on every render an inline callback would cause.
   const onRailChangeRef = useRef(onRailChange)
   onRailChangeRef.current = onRailChange
   useEffect(() => {
@@ -162,30 +97,24 @@ export function SessionWorkspace({
   }, [railWidth, railCollapsed])
   const [editorHeight, setEditorHeight] = useState(360)
 
-  // Closing every tab returns the agent to the full column; opening one again
-  // should restore the height the user had chosen, so this is not reset here.
   const hasFiles = files.files.length > 0
 
-  // A narrow viewport cannot spare 260px of rail beside a transcript, so there
-  // the rail overlays the workspace instead of sitting next to it — and starts
-  // out of the way.
   const overlayRail = !wide
   const railOpen = tree.available && !railCollapsed
   useEffect(() => {
-    if (overlayRail) setRailCollapsed(true)
+    if (overlayRail) {
+      setRailCollapsed(true)
+    }
   }, [overlayRail])
 
-  // Closing a dirty tab is the one destructive thing the strip can do, and the
-  // edits are not recoverable once the tab is gone. `confirm` rather than a
-  // styled dialog on purpose: it is modal, it cannot be missed, and a
-  // custom one here would be a second modal system inside a component an
-  // embedder already renders inside their own.
   const closeTab = useCallback(
     (path: string) => {
       const file = files.files.find((f) => f.path === path)
       if (file && isDirty(file)) {
         const name = file.name
-        if (!window.confirm(`${name} has unsaved changes. Close it and lose them?`)) return
+        if (!window.confirm(`${name} has unsaved changes. Close it and lose them?`)) {
+          return
+        }
       }
       files.close(path)
     },
@@ -194,16 +123,7 @@ export function SessionWorkspace({
 
   const column = useRef<HTMLDivElement>(null)
   const columnHeight = useElementHeight(column)
-  // Cmd/Ctrl+click a file the agent named and it opens in the editor above —
-  // the workspace is the only surface that *has* an editor, which is why this
-  // lives here and not in the panel. Gated on the tree being available: without
-  // a host filesystem there is nothing to open, and a link that cannot resolve
-  // is worse than plain text. Monaco is excluded because Cmd+click already
-  // means go-to-definition in there, and every identifier would match.
-  const openPath = useCallback(
-    ({ path }: { path: string }) => files.open(resolveAgainstCwd(path, cwd)),
-    [files.open, cwd],
-  )
+  const openPath = useCallback(({ path }: { path: string }) => files.open(resolveAgainstCwd(path, cwd)), [files.open, cwd])
   usePathLinks({
     container: column,
     onOpen: openPath,
@@ -212,11 +132,6 @@ export function SessionWorkspace({
   })
   const editorMax = Math.max(EDITOR_MIN, columnHeight - AGENT_MIN)
 
-  // The embedder's header is app chrome and belongs above everything — but only
-  // `SessionPanel` can *build* the `⋯` menu it is handed, and only if it is the
-  // one calling the render-prop. So the panel still calls it, in its own tree,
-  // and the result is portalled up here. That keeps `SessionPanel` untouched and
-  // keeps the menu's own context (it is a Base UI popup) intact.
   const [topBar, setTopBar] = useState<HTMLDivElement | null>(null)
   const hoisted: SessionPanelProps['header'] =
     header === undefined || topBar === null
@@ -226,119 +141,98 @@ export function SessionWorkspace({
         : createPortal(header, topBar)
 
   return (
-    <div
-      data-slot='session-workspace'
-      className={cn('flex h-full min-h-0 w-full flex-col overflow-hidden bg-bg', className)}>
-      {header !== undefined ? <div ref={setTopBar} className='shrink-0' /> : null}
-      <div className='relative flex min-h-0 flex-1'>
-      {railOpen ? (
-        <FileTree
-          tree={tree}
-          search={search}
-          activePath={files.activePath}
-          onOpenFile={files.open}
-          onCollapse={() => setRailCollapsed(true)}
-          style={{ width: overlayRail ? Math.min(railWidth, 320) : railWidth }}
-          className={cn(
-            'shrink-0 border-r border-border',
-            overlayRail && 'absolute inset-y-0 left-0 z-20 shadow-lg',
-          )}
-        />
-      ) : tree.available ? (
-        // Collapsed: a slim strip that keeps the rail one click away. In flow
-        // rather than floating over the panel, so it can never land on top of an
-        // embedder's own header controls.
-        <div className='flex w-8 shrink-0 flex-col items-center border-r border-border bg-surface pt-1.5'>
-          <Button
-            variant='ghost'
-            size='icon-sm'
-            aria-label='Show project files'
-            onClick={() => setRailCollapsed(false)}>
-            <PanelLeftOpen className='size-4 text-fg-3' />
-          </Button>
-        </div>
-      ) : null}
-      {/* No splitter over an overlay rail — dragging a drawer's edge on a phone
-          fights the scroll it is sitting on top of. */}
-      {railOpen && !overlayRail ? (
-        <Splitter
-          orientation='vertical'
-          value={railWidth}
-          onValueChange={setRailWidth}
-          min={RAIL_MIN}
-          max={RAIL_MAX}
-          defaultValue={defaultRailWidth}
-          aria-label='Resize the file tree'
-        />
-      ) : null}
-
-      <div ref={column} className='flex min-h-0 min-w-0 flex-1 flex-col'>
-        {/* Slot 1 of 3. The `? :` leaves a null here when nothing is open, which
-            is what holds the agent's slot below and keeps it from remounting. */}
-        {hasFiles ? (
-          <div
-            className='flex min-h-0 shrink-0 flex-col overflow-hidden'
-            style={{ height: Math.min(editorHeight, editorMax || editorHeight) }}>
-            <EditorTabs
-              files={files.files}
-              activePath={files.activePath}
-              onActivate={files.activate}
-              onClose={closeTab}
-            />
-            <FileViewer
-              file={files.active}
-              canWrite={canWrite}
-              onChange={files.edit}
-              onSave={(path) => void files.save(path)}
-              onRevert={files.revert}
-              onReload={files.reload}
-              onOverwrite={(path) => void files.overwrite(path)}
-              onDismissConflict={files.dismissConflict}
-            />
+    <div data-slot="session-workspace" className={cn('flex h-full min-h-0 w-full flex-col overflow-hidden bg-bg', className)}>
+      {header !== undefined ? <div ref={setTopBar} className="shrink-0" /> : null}
+      <div className="relative flex min-h-0 flex-1">
+        {railOpen ? (
+          <FileTree
+            tree={tree}
+            search={search}
+            activePath={files.activePath}
+            onOpenFile={files.open}
+            onCollapse={() => setRailCollapsed(true)}
+            style={{ width: overlayRail ? Math.min(railWidth, 320) : railWidth }}
+            className={cn('shrink-0 border-r border-border', overlayRail && 'absolute inset-y-0 left-0 z-20 shadow-lg')}
+          />
+        ) : tree.available ? (
+          <div className="flex w-8 shrink-0 flex-col items-center border-r border-border bg-surface pt-1.5">
+            <Button variant="ghost" size="icon-sm" aria-label="Show project files" onClick={() => setRailCollapsed(false)}>
+              <PanelLeftOpen className="size-4 text-fg-3" />
+            </Button>
           </div>
         ) : null}
-        {/* Slot 2 of 3. */}
-        {hasFiles ? (
+        {railOpen && !overlayRail ? (
           <Splitter
-            orientation='horizontal'
-            value={Math.min(editorHeight, editorMax || editorHeight)}
-            onValueChange={setEditorHeight}
-            min={EDITOR_MIN}
-            max={editorMax}
-            aria-label='Resize the open file'
+            orientation="vertical"
+            value={railWidth}
+            onValueChange={setRailWidth}
+            min={RAIL_MIN}
+            max={RAIL_MAX}
+            defaultValue={defaultRailWidth}
+            aria-label="Resize the file tree"
           />
         ) : null}
-        {/* Slot 3 of 3 — always here, always at this index. */}
-        <SessionPanel
-          client={client}
-          sessionId={sessionId}
-          header={hoisted}
-          transcriptVariant={transcriptVariant}
-          transcriptDensity={transcriptDensity}
-          transcriptFont={transcriptFont}
-          scrubber={scrubber}
-          scrubberMarks={scrubberMarks}
-          stickyPrompt={stickyPrompt}
-          openSubagent={openSubagent}
-          reveal={reveal}
-          onSubagentChange={onSubagentChange}
-          controlsSurface={controlsSurface}
-          statusPlacement={statusPlacement}
-          unseen={unseen}
-          readOnly={readOnly}
-          onVitals={onVitals}
-          className='min-h-0 flex-1'
-        />
-      </div>
 
-        {/* Tapping away closes the drawer, which is the only way back to the
-            transcript on a narrow screen. */}
+        <div ref={column} className="flex min-h-0 min-w-0 flex-1 flex-col">
+          {hasFiles ? (
+            <div
+              className="flex min-h-0 shrink-0 flex-col overflow-hidden"
+              style={{ height: Math.min(editorHeight, editorMax || editorHeight) }}
+            >
+              <EditorTabs files={files.files} activePath={files.activePath} onActivate={files.activate} onClose={closeTab} />
+              <FileViewer
+                file={files.active}
+                canWrite={canWrite}
+                onChange={files.edit}
+                onSave={(path) => void files.save(path)}
+                onRevert={files.revert}
+                onReload={files.reload}
+                onOverwrite={(path) => void files.overwrite(path)}
+                onDismissConflict={files.dismissConflict}
+              />
+            </div>
+          ) : null}
+          {hasFiles ? (
+            <Splitter
+              orientation="horizontal"
+              value={Math.min(editorHeight, editorMax || editorHeight)}
+              onValueChange={setEditorHeight}
+              min={EDITOR_MIN}
+              max={editorMax}
+              aria-label="Resize the open file"
+            />
+          ) : null}
+          <SessionPanel
+            client={client}
+            sessionId={sessionId}
+            header={hoisted}
+            transcriptVariant={transcriptVariant}
+            transcriptDensity={transcriptDensity}
+            transcriptFont={transcriptFont}
+            scrubber={scrubber}
+            bookmarks={bookmarks}
+            onToggleBookmark={onToggleBookmark}
+            stickyPrompt={stickyPrompt}
+            openSubagent={openSubagent}
+            reveal={reveal}
+            onSubagentChange={onSubagentChange}
+            controlsSurface={controlsSurface}
+            fontSize={fontSize}
+            onLinkClick={onLinkClick}
+            statusPlacement={statusPlacement}
+            unseen={unseen}
+            readOnly={readOnly}
+            onVitals={onVitals}
+            className="min-h-0 flex-1"
+          />
+        </div>
+
         {overlayRail && railOpen ? (
           <button
-            type='button'
-            aria-label='Close the file tree'
+            type="button"
+            aria-label="Close the file tree"
             onClick={() => setRailCollapsed(true)}
-            className='absolute inset-0 z-10 bg-black/30'
+            className="absolute inset-0 z-10 bg-black/30"
           />
         ) : null}
       </div>
@@ -346,16 +240,17 @@ export function SessionWorkspace({
   )
 }
 
-/** Live height of an element, for a splitter that needs to know how much room it
- * is dividing. Zero until the first observation, which callers treat as
- * "unmeasured" rather than as a real bound. */
 function useElementHeight(ref: RefObject<HTMLElement | null>): number {
   const [height, setHeight] = useState(0)
   useLayoutEffect(() => {
     const element = ref.current
-    if (!element) return
+    if (!element) {
+      return
+    }
     const observer = new ResizeObserver(([entry]) => {
-      if (entry) setHeight(entry.contentRect.height)
+      if (entry) {
+        setHeight(entry.contentRect.height)
+      }
     })
     observer.observe(element)
     return () => observer.disconnect()
@@ -363,8 +258,6 @@ function useElementHeight(ref: RefObject<HTMLElement | null>): number {
   return height
 }
 
-/** Whether there is room for a rail beside the content. Presentation only — the
- * workspace's actual state lives in the hooks from `@workerdeck/react`. */
 function useIsWide(): boolean {
   const [wide, setWide] = useState(true)
   useEffect(() => {

package/src/components/agent/SkillsDialog.tsx

@@ -9,14 +9,10 @@ export interface SkillsDialogProps {
   skills: SkillInfo[] | undefined
   open: boolean
   onOpenChange: (open: boolean) => void
-  /** Insert a skill's opening message into the composer, if the host offers
-   * that. Omit and the dialog is read-only. */
   onUse?: (skill: SkillInfo) => void
   className?: string
 }
 
-/** Where the skill came from. The engine's set is open, so an unrecognised
- * scope renders as itself rather than being forced into a bucket. */
 const SCOPE_LABEL: Record<string, string> = {
   user: 'Personal',
   repo: 'This project',
@@ -24,19 +20,6 @@ const SCOPE_LABEL: Record<string, string> = {
   admin: 'Managed',
 }
 
-/**
- * What this session's engine can do beyond its own tools: the skills it found,
- * grouped by where they came from, with one drilled-down view each.
- *
- * The framing matters more here than in most panels. A skill is **not** a
- * command — the model decides to use one by reading its description, and there
- * is no wire syntax that invokes it. So this screen is a *discovery* surface,
- * and the one action it offers ("Use this skill") is honest about being a
- * drafting aid: it types a message for the operator to edit and send.
- *
- * Fed from the session's `skills` event rather than a REST route, because that
- * is the channel the engine refreshes on its own when a skill changes on disk.
- */
 export function SkillsDialog({ skills, open, onOpenChange, onUse, className }: SkillsDialogProps) {
   const [selected, setSelected] = useState<string | undefined>()
   const skill = skills?.find((s) => s.name === selected)
@@ -45,9 +28,12 @@ export function SkillsDialog({ skills, open, onOpenChange, onUse, className }: S
     <Dialog
       open={open}
       onOpenChange={(next) => {
-        if (!next) setSelected(undefined)
+        if (!next) {
+          setSelected(undefined)
+        }
         onOpenChange(next)
-      }}>
+      }}
+    >
       <DialogContent className={className}>
         <DialogHeader
           title={skill ? (skill.displayName ?? skill.name) : 'Skills'}
@@ -60,8 +46,8 @@ export function SkillsDialog({ skills, open, onOpenChange, onUse, className }: S
           }
           actions={
             skill ? (
-              <Button variant='ghost' size='xs' onClick={() => setSelected(undefined)}>
-                <ChevronLeft className='size-3.5' />
+              <Button variant="ghost" size="xs" onClick={() => setSelected(undefined)}>
+                <ChevronLeft className="size-3.5" />
                 Back
               </Button>
             ) : undefined
@@ -79,59 +65,41 @@ export function SkillsDialog({ skills, open, onOpenChange, onUse, className }: S
   )
 }
 
-function SkillList({
-  skills,
-  onSelect,
-}: {
-  skills: SkillInfo[] | undefined
-  onSelect: (name: string) => void
-}) {
+function SkillList({ skills, onSelect }: { skills: SkillInfo[] | undefined; onSelect: (name: string) => void }) {
   if (!skills) {
-    // Not "none" — codex can only list skills over a live child, which it does
-    // not spawn until the session has something to do. Saying so beats an empty
-    // list that reads as "you have no skills".
-    return (
-      <p className='py-6 text-center text-body-sm text-fg-4'>
-        Skills are listed once the session connects — send a message first.
-      </p>
-    )
+    return <p className="py-6 text-center text-body-sm text-fg-4">Skills are listed once the session connects — send a message first.</p>
   }
   if (skills.length === 0) {
-    return <p className='py-6 text-center text-body-sm text-fg-4'>This session found no skills.</p>
+    return <p className="py-6 text-center text-body-sm text-fg-4">This session found no skills.</p>
   }
   const scopes = [...new Set(skills.map((s) => s.scope ?? 'other'))]
   return (
-    <div className='flex flex-col gap-4'>
+    <div className="flex flex-col gap-4">
       {scopes.map((scope) => (
         <div key={scope}>
-          <h3 className='text-label font-medium text-fg-3'>{SCOPE_LABEL[scope] ?? scope}</h3>
-          <ul className='mt-1 flex flex-col'>
+          <h3 className="text-label font-medium text-fg-3">{SCOPE_LABEL[scope] ?? scope}</h3>
+          <ul className="mt-1 flex flex-col">
             {skills
               .filter((s) => (s.scope ?? 'other') === scope)
               .map((s) => (
                 <li key={s.name}>
                   <button
-                    type='button'
+                    type="button"
                     onClick={() => onSelect(s.name)}
-                    className='flex w-full items-start gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover'>
-                    <span className='min-w-0 flex-1'>
-                      <span className='block truncate text-body-sm text-fg-1'>
-                        {s.displayName ?? s.name}
-                      </span>
-                      {s.shortDescription ?? s.description ? (
-                        <span className='block truncate text-label text-fg-4'>
-                          {s.shortDescription ?? s.description}
-                        </span>
+                    className="flex w-full items-start gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover"
+                  >
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-body-sm text-fg-1">{s.displayName ?? s.name}</span>
+                      {(s.shortDescription ?? s.description) ? (
+                        <span className="block truncate text-label text-fg-4">{s.shortDescription ?? s.description}</span>
                       ) : null}
                     </span>
-                    {/* Listed but switched off: a different answer from absent,
-                        and the one an operator hunting for a missing skill needs. */}
                     {!s.enabled ? (
-                      <Badge variant='neutral' className='mt-0.5 shrink-0'>
+                      <Badge variant="neutral" className="mt-0.5 shrink-0">
                         off
                       </Badge>
                     ) : null}
-                    <ChevronRight className='mt-0.5 size-3.5 shrink-0 text-fg-4' />
+                    <ChevronRight className="mt-0.5 size-3.5 shrink-0 text-fg-4" />
                   </button>
                 </li>
               ))}
@@ -142,22 +110,12 @@ function SkillList({
   )
 }
 
-function SkillView({
-  skill,
-  onUse,
-  onUsed,
-}: {
-  skill: SkillInfo
-  onUse?: (skill: SkillInfo) => void
-  onUsed: () => void
-}) {
+function SkillView({ skill, onUse, onUsed }: { skill: SkillInfo; onUse?: (skill: SkillInfo) => void; onUsed: () => void }) {
   return (
-    <div className='flex flex-col gap-4'>
+    <div className="flex flex-col gap-4">
       <div>
-        {skill.scope ? (
-          <DialogRow label='Scope'>{SCOPE_LABEL[skill.scope] ?? skill.scope}</DialogRow>
-        ) : null}
-        <DialogRow label='Status'>
+        {skill.scope ? <DialogRow label="Scope">{SCOPE_LABEL[skill.scope] ?? skill.scope}</DialogRow> : null}
+        <DialogRow label="Status">
           <Badge variant={skill.enabled ? 'success' : 'neutral'} dot>
             {skill.enabled ? 'enabled' : 'disabled'}
           </Badge>
@@ -165,29 +123,26 @@ function SkillView({
       </div>
       {skill.description ? (
         <div>
-          <h3 className='text-label font-medium text-fg-3'>Description</h3>
-          {/* Shown verbatim because this is the text the MODEL selects on —
-              paraphrasing it here would describe a different skill than the one
-              the agent is reading about. */}
-          <p className='mt-1 text-body-sm whitespace-pre-wrap text-fg-2'>{skill.description}</p>
+          <h3 className="text-label font-medium text-fg-3">Description</h3>
+          <p className="mt-1 text-body-sm whitespace-pre-wrap text-fg-2">{skill.description}</p>
         </div>
       ) : (
-        <p className='text-body-sm text-fg-4'>This skill carries no description.</p>
+        <p className="text-body-sm text-fg-4">This skill carries no description.</p>
       )}
       {onUse && skill.enabled ? (
         <div>
           <Button
-            variant='outline'
-            size='sm'
+            variant="outline"
+            size="sm"
             onClick={() => {
               onUse(skill)
               onUsed()
-            }}>
+            }}
+          >
             Use this skill
           </Button>
-          <p className='mt-1.5 text-label text-fg-4'>
-            Writes an opening message into the composer for you to edit — it isn’t sent, and there
-            is no command that runs a skill directly.
+          <p className="mt-1.5 text-label text-fg-4">
+            Writes an opening message into the composer for you to edit — it isn’t sent, and there is no command that runs a skill directly.
           </p>
         </div>
       ) : null}