@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/SessionInfoDialog.tsx

@@ -17,67 +17,39 @@ export interface SessionInfoDialogProps {
   onOpenChange: (open: boolean) => void
 }
 
-/**
- * What this session *is*: engine, profile, model, mode, where it runs, which
- * credentials it found, and the files it has handed over.
- *
- * The identity half of the session's facts. Context and usage have their own
- * panels — they change every turn and are consulted mid-run, while everything
- * here is fixed at creation and looked up once.
- */
-export function SessionInfoDialog({
-  state,
-  client,
-  sessionId,
-  open,
-  onOpenChange,
-}: SessionInfoDialogProps) {
+export function SessionInfoDialog({ state, client, sessionId, open, onOpenChange }: SessionInfoDialogProps) {
   const session = state.session
   const mode = state.permissionMode ? permissionModeMeta(state.permissionMode) : undefined
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
-        <DialogHeader title='Session info' description={session?.title} />
+        <DialogHeader title="Session info" description={session?.title} />
         <DialogBody>
-          <div className='flex flex-col divide-y divide-border'>
-            <div className='pb-2'>
-              <DialogRow label='Engine'>{state.engine ?? 'claude'}</DialogRow>
-              {session?.profile ? (
-                <DialogRow label='Profile'>{session.profile}</DialogRow>
-              ) : null}
+          <div className="flex flex-col divide-y divide-border">
+            <div className="pb-2">
+              <DialogRow label="Engine">{state.engine ?? 'claude'}</DialogRow>
+              {session?.profile ? <DialogRow label="Profile">{session.profile}</DialogRow> : null}
               {state.model ? (
-                <DialogRow label='Model' mono>
+                <DialogRow label="Model" mono>
                   {state.model}
                 </DialogRow>
               ) : null}
-              {mode ? <DialogRow label='Permission mode'>{mode.label}</DialogRow> : null}
-              {session?.apiKeySource ? (
-                <DialogRow label='Credentials'>{session.apiKeySource}</DialogRow>
-              ) : null}
+              {mode ? <DialogRow label="Permission mode">{mode.label}</DialogRow> : null}
+              {session?.apiKeySource ? <DialogRow label="Credentials">{session.apiKeySource}</DialogRow> : null}
             </div>
-            <div className='py-2'>
-              {state.cwd ? <CopyRow label='Working directory' value={state.cwd} /> : null}
-              {state.sdkSessionId ? (
-                <CopyRow label='Engine session id' value={state.sdkSessionId} />
-              ) : null}
-              {session ? <CopyRow label='Gateway session id' value={session.id} /> : null}
+            <div className="py-2">
+              {state.cwd ? <CopyRow label="Working directory" value={state.cwd} /> : null}
+              {state.sdkSessionId ? <CopyRow label="Engine session id" value={state.sdkSessionId} /> : null}
+              {session ? <CopyRow label="Gateway session id" value={session.id} /> : null}
             </div>
-            <div className='py-2'>
-              {session?.createdAt ? (
-                <DialogRow label='Started'>{formatRelativeTime(session.createdAt)}</DialogRow>
-              ) : null}
-              {session?.numTurns !== undefined ? (
-                <DialogRow label='Turns'>{session.numTurns}</DialogRow>
-              ) : null}
-              <DialogRow label='Cost' mono>
+            <div className="py-2">
+              {session?.createdAt ? <DialogRow label="Started">{formatRelativeTime(session.createdAt)}</DialogRow> : null}
+              {session?.numTurns !== undefined ? <DialogRow label="Turns">{session.numTurns}</DialogRow> : null}
+              <DialogRow label="Cost" mono>
                 {formatCost(state.totalCostUsd)}
               </DialogRow>
             </div>
-            {/* Only for an engine that has a scratch VFS — for the rest the route
-                404s, and a "Files" heading over nothing reads as a failed load. */}
-            {state.capabilities.vfs ? (
-              <SessionFiles client={client} sessionId={sessionId} open={open} />
-            ) : null}
+            {state.capabilities.vfs ? <SessionFiles client={client} sessionId={sessionId} open={open} /> : null}
           </div>
         </DialogBody>
       </DialogContent>
@@ -85,47 +57,44 @@ export function SessionInfoDialog({
   )
 }
 
-/** Long ids are for pasting elsewhere, so give them a copy target. */
 function CopyRow({ label, value }: { label: string; value: string }) {
   return (
-    <div className='flex items-start justify-between gap-2 py-1.5'>
-      <div className='min-w-0 flex-1'>
-        <div className='text-label text-fg-3'>{label}</div>
-        <div className='mt-0.5 font-mono text-label break-all text-fg-1'>{value}</div>
+    <div className="flex items-start justify-between gap-2 py-1.5">
+      <div className="min-w-0 flex-1">
+        <div className="text-label text-fg-3">{label}</div>
+        <div className="mt-0.5 font-mono text-label break-all text-fg-1">{value}</div>
       </div>
       <CopyButton value={value} aria-label={`Copy ${label.toLowerCase()}`} />
     </div>
   )
 }
 
-/** Files the agent produced inside the session's VFS. Fetched when the panel
- * opens — this is not a live list and nothing pushes changes to it. */
-function SessionFiles({
-  client,
-  sessionId,
-  open,
-}: {
-  client: WorkerDeckClient
-  sessionId: string | undefined
-  open: boolean
-}) {
+function SessionFiles({ client, sessionId, open }: { client: WorkerDeckClient; sessionId: string | undefined; open: boolean }) {
   const [files, setFiles] = useState<SessionFileInfo[] | undefined>()
   const [loading, setLoading] = useState(false)
 
   useEffect(() => {
-    if (!open || !sessionId) return
+    if (!open || !sessionId) {
+      return
+    }
     let cancelled = false
     setLoading(true)
     client
       .listSessionFiles(sessionId)
       .then((list) => {
-        if (!cancelled) setFiles(list)
+        if (!cancelled) {
+          setFiles(list)
+        }
       })
       .catch(() => {
-        if (!cancelled) setFiles([])
+        if (!cancelled) {
+          setFiles([])
+        }
       })
       .finally(() => {
-        if (!cancelled) setLoading(false)
+        if (!cancelled) {
+          setLoading(false)
+        }
       })
     return () => {
       cancelled = true
@@ -133,26 +102,25 @@ function SessionFiles({
   }, [client, sessionId, open])
 
   return (
-    <div className='pt-3'>
-      <h3 className='text-label font-medium text-fg-3'>Files</h3>
+    <div className="pt-3">
+      <h3 className="text-label font-medium text-fg-3">Files</h3>
       {loading ? (
-        <div className='py-3 text-center'>
-          <Spinner className='size-4 text-fg-4' />
+        <div className="py-3 text-center">
+          <Spinner className="size-4 text-fg-4" />
         </div>
       ) : !files?.length ? (
-        <p className='py-2 text-body-sm text-fg-4'>Nothing delivered yet.</p>
+        <p className="py-2 text-body-sm text-fg-4">Nothing delivered yet.</p>
       ) : (
-        <ul className='mt-1 flex flex-col'>
+        <ul className="mt-1 flex flex-col">
           {files.map((file) => (
             <li key={file.path}>
               <a
                 href={sessionId ? client.sessionFileUrl(sessionId, file.path) : undefined}
-                className='flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-surface-hover'>
-                <Download className='size-3.5 shrink-0 text-fg-4' />
-                <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-1'>
-                  {file.path}
-                </span>
-                <span className='shrink-0 text-label text-fg-4'>{formatBytes(file.bytes)}</span>
+                className="flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-surface-hover"
+              >
+                <Download className="size-3.5 shrink-0 text-fg-4" />
+                <span className="min-w-0 flex-1 truncate font-mono text-label text-fg-1">{file.path}</span>
+                <span className="shrink-0 text-label text-fg-4">{formatBytes(file.bytes)}</span>
               </a>
             </li>
           ))}