style: aesthetic polish for workspace shell, transcript, and home pane (#76)

Co-authored-by: Wolfgang Schoenberger <221313372+wolfiesch@users.noreply.github.com>

Author: wolfiesch

apps/web/src/components/HomePane.tsx

@@ -15,6 +15,7 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@t4-code/ui";
+import { History } from "lucide-react";
 import { useEffect, useMemo, useSyncExternalStore } from "react";
 
 import { desktopRuntime, useDesktopRuntimeSnapshot } from "../platform/desktop-runtime.ts";
@@ -290,8 +291,8 @@ function BrowserHomePane({ railOverlaid }: { railOverlaid: boolean }) {
       </div>
       <Empty className="flex-1 border-0">
         <EmptyHeader>
-          <EmptyMedia variant="default">
-            <BrandLockup byline size="lg" />
+          <EmptyMedia variant="icon">
+            <History aria-hidden="true" className="size-5 text-muted-foreground" />
           </EmptyMedia>
           <EmptyTitle>Pick up where a session left off</EmptyTitle>
           <EmptyDescription>
@@ -317,7 +318,7 @@ function BrowserHomePane({ railOverlaid }: { railOverlaid: boolean }) {
               Search sessions
             </Button>
           </div>
-          <p className="text-muted-foreground text-xs">
+          <p className="text-muted-foreground text-sm">
             {modKey}K searches, {modKey}1 to {modKey}9 jump straight to a session.
           </p>
         </EmptyContent>

apps/web/src/components/SessionScreen.tsx

@@ -10,6 +10,9 @@ import {
   Sheet,
   SheetPopup,
   StatusPill,
+  Tooltip,
+  TooltipPopup,
+  TooltipTrigger,
   useReducedMotion,
 } from "@t4-code/ui";
 import { Popover } from "@base-ui/react/popover";
@@ -400,25 +403,29 @@ export function SessionScreen({
               className="flex min-h-0 shrink-0 flex-col bg-(--sidebar-background)"
               style={{ width: `min(${paneWidth}px, 42vw)` }}
             >
-              <div className="surface-subheader gap-2 px-3">
-                <span className="font-medium text-xs">{activeMeta.label}</span>
-                <span className="flex-1" />
-                <IconButton
-                  aria-label={`Close ${activeMeta.label}`}
-                  onClick={() => workspaceStore.getState().setPaneOpen(session.id, false)}
-                  size="icon-xs"
-                >
-                  <X />
-                </IconButton>
-              </div>
               <ScrollArea className="min-h-0 flex-1">
                 <div className="pane-content-enter" key={viewPaneFamily}>
-                  <PaneContent family={viewPaneFamily} />
+                  <PaneContent
+                    family={viewPaneFamily}
+                    trailing={
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <IconButton
+                              aria-label={`Close ${activeMeta.label}`}
+                              onClick={() => workspaceStore.getState().setPaneOpen(session.id, false)}
+                              size="icon-xs"
+                            >
+                              <X />
+                            </IconButton>
+                          }
+                        />
+                        <TooltipPopup side="bottom">Close (Esc)</TooltipPopup>
+                      </Tooltip>
+                    }
+                  />
                 </div>
               </ScrollArea>
-              <p className="border-border border-t px-3 py-2 text-muted-foreground text-xs">
-                Esc closes this panel.
-              </p>
             </aside>
           </div>
         )}
@@ -430,9 +437,6 @@ export function SessionScreen({
           open={viewPaneOpen}
         >
           <SheetPopup aria-label={activeMeta.label} side="right">
-            <div className="surface-subheader gap-2 px-3">
-              <span className="font-medium text-xs">{activeMeta.label}</span>
-            </div>
             <PaneContent family={viewPaneFamily} />
           </SheetPopup>
         </Sheet>

apps/web/src/features/composer/Composer.tsx

@@ -532,6 +532,8 @@ export function Composer({
               onIntent={onIntent}
             />
             <span className="min-w-0 flex-1" />
+            <ContextMeter usedTokens={contextUsedTokens} windowTokens={contextWindowTokens} />
+            <span className="mx-1 h-4 w-px shrink-0 bg-border" aria-hidden="true" />
             <Tooltip>
               <TooltipTrigger
                 render={
@@ -554,7 +556,6 @@ export function Composer({
                     "This host does not support image prompts yet")}
               </TooltipPopup>
             </Tooltip>
-            <ContextMeter usedTokens={contextUsedTokens} windowTokens={contextWindowTokens} />
             {turnActive && (
               <>
                 <Tooltip>

apps/web/src/features/panes/ActivityPane.tsx

@@ -19,6 +19,7 @@ import {
   X,
 } from "lucide-react";
 import { memo, useMemo, useRef, useState, type ComponentType } from "react";
+import type * as React from "react";
 
 import { useMediaQuery } from "../../hooks/useMediaQuery.ts";
 import { exportActivity, redactPayload, selectVisibleActivity } from "./activity-log.ts";
@@ -183,7 +184,7 @@ function ActivityInspector({
   );
 }
 
-export function ActivityPane({ api }: { readonly api: InspectorStoreApi }) {
+export function ActivityPane({ api, trailing }: { readonly api: InspectorStoreApi; readonly trailing?: React.ReactNode | undefined }) {
   const entries = useInspector(api, (state) => state.activity);
   const filter = useInspector(api, (state) => state.activityFilter);
   const query = useInspector(api, (state) => state.activityQuery);
@@ -229,6 +230,7 @@ export function ActivityPane({ api }: { readonly api: InspectorStoreApi }) {
       <PaneHeading
         family="activity"
         summary={`${entries.length} recorded${pausedAtSeq !== null ? " · paused" : ""}`}
+        trailing={trailing}
       />
       <div className="flex shrink-0 flex-wrap items-center gap-1 border-border border-b px-2 py-1.5">
         <div

apps/web/src/features/panes/AgentsPane.tsx

@@ -13,6 +13,7 @@ import {
   DialogTitle,
 } from "@t4-code/ui";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
+import type * as React from "react";
 
 import type { TranscriptImageSource } from "../session-runtime/transcript-images.ts";
 import { TranscriptRowContent } from "../transcript/TranscriptRows.tsx";
@@ -103,7 +104,7 @@ const AgentRow = memo(function AgentRow({
       className={cn(
         "flex min-h-11 cursor-pointer flex-col justify-center gap-0.5 rounded-md pe-2 py-1.5 outline-none transition-colors duration-(--motion-duration-fast) sm:min-h-0",
         selected ? "bg-secondary" : "hover:bg-secondary/60",
-        focused && "ring-2 ring-ring ring-offset-1 ring-offset-background",
+        focused && "group-focus-visible/tree:ring-2 group-focus-visible/tree:ring-ring group-focus-visible/tree:ring-offset-1 group-focus-visible/tree:ring-offset-background",
       )}
       id={`agent-row-${id}`}
       onClick={() => onSelect(id)}
@@ -422,10 +423,12 @@ export function AgentsPane({
   api,
   sessionId,
   imageSource,
+  trailing,
 }: {
   readonly api: InspectorStoreApi;
   readonly sessionId: string;
   readonly imageSource?: TranscriptImageSource | undefined;
+  readonly trailing?: React.ReactNode | undefined;
 }) {
   // Structure fingerprint: rows rebuild only when membership/nesting change,
   // never on progress or state patches.
@@ -469,11 +472,11 @@ export function AgentsPane({
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <PaneHeading family="agents" summary={summary} />
+      <PaneHeading family="agents" summary={summary} trailing={trailing} />
       <div
         aria-activedescendant={`agent-row-${rows[activeIndex]?.id ?? ""}`}
         aria-label="Agents in this session"
-        className="min-h-0 flex-1 overflow-y-auto p-1.5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
+        className="group/tree min-h-0 flex-1 overflow-y-auto p-1.5 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
         onKeyDown={(event) => {
           if (event.key === "ArrowDown") {
             event.preventDefault();

apps/web/src/features/panes/FilesPane.tsx

@@ -4,6 +4,7 @@
 import { Badge, Button, cn, Skeleton } from "@t4-code/ui";
 import { ChevronRight, FileText, Folder, ImageIcon, WifiOff } from "lucide-react";
 import { useEffect, useMemo } from "react";
+import type * as React from "react";
 
 import { FamilyEmpty } from "./FamilyEmpty.tsx";
 import { PaneHeading } from "./PaneHeading.tsx";
@@ -246,7 +247,7 @@ function EditorBody({
   );
 }
 
-export function FilesPane({ api }: { readonly api: InspectorStoreApi }) {
+export function FilesPane({ api, trailing }: { readonly api: InspectorStoreApi; readonly trailing?: React.ReactNode | undefined }) {
   const query = useInspector(api, (state) => state.files.query);
   const selectedPath = useInspector(api, (state) => state.files.selectedPath);
   const preview = useInspector(api, (state) => state.files.preview);
@@ -269,7 +270,7 @@ export function FilesPane({ api }: { readonly api: InspectorStoreApi }) {
   if (offline) {
     return (
       <div className="flex h-full min-h-0 flex-col">
-        <PaneHeading family="files" summary="host unreachable" />
+        <PaneHeading family="files" summary="host unreachable" trailing={trailing} />
         <FamilyEmpty family="files" />
         <p className="border-border border-t px-3 py-2 text-muted-foreground text-xs">
           This session's host is offline. Files return when the host does.
@@ -280,7 +281,7 @@ export function FilesPane({ api }: { readonly api: InspectorStoreApi }) {
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <PaneHeading family="files" summary={selectedPath ?? undefined} />
+      <PaneHeading family="files" summary={selectedPath ?? undefined} trailing={trailing} />
       <div className="shrink-0 border-border border-b px-2 py-1.5">
         <input
           aria-label="Search loaded files"

apps/web/src/features/panes/PaneContent.tsx

@@ -1,6 +1,7 @@
 // Right-pane family body: routes the active family to its panel, bound to
 // the active session's inspector store. The shell owns the frame; this seam
 // owns everything inside it.
+import type * as React from "react";
 import { FamilyEmpty } from "./FamilyEmpty.tsx";
 import { desktopRuntime } from "../../platform/desktop-runtime.ts";
 import { rendererPlatform, useWorkspace } from "../../state/store-instance.ts";
@@ -70,10 +71,12 @@ if (rendererPlatform.mode === "browser") {
 
 export interface PaneContentProps {
   readonly family: PaneFamily;
+  /** Optional trailing action forwarded to the pane heading (e.g. dock close button). */
+  readonly trailing?: React.ReactNode | undefined;
 }
 
 
-export function PaneContent({ family }: PaneContentProps) {
+export function PaneContent({ family, trailing }: PaneContentProps) {
   const sessionId = useWorkspace((state) => state.activeSessionId);
   const store = sessionId === null ? null : getInspectorStore(sessionId);
   if (sessionId === null || store === null) return <FamilyEmpty family={family} />;
@@ -86,15 +89,15 @@ export function PaneContent({ family }: PaneContentProps) {
         address === null
           ? undefined
           : (transcriptImageSourceForSession(address.hostId, address.sessionId) ?? undefined);
-      return <AgentsPane api={store} imageSource={imageSource} sessionId={sessionId} />;
+      return <AgentsPane api={store} imageSource={imageSource} sessionId={sessionId} trailing={trailing} />;
     }
     case "activity":
-      return <ActivityPane api={store} />;
+      return <ActivityPane api={store} trailing={trailing} />;
     case "review":
-      return <ReviewPane api={store} />;
+      return <ReviewPane api={store} trailing={trailing} />;
     case "files":
-      return <FilesPane api={store} />;
+      return <FilesPane api={store} trailing={trailing} />;
     case "terminals":
-      return <TerminalsPane api={store} sessionId={sessionId} />;
+      return <TerminalsPane api={store} sessionId={sessionId} trailing={trailing} />;
   }
 }

apps/web/src/features/panes/PaneHeading.tsx

@@ -1,6 +1,7 @@
 // Panel heading: every family body opens with its own name in text, so the
 // active family is unmistakable even when the shell's icon toggles are
 // ambiguous (200% zoom, narrow sheets, screen readers).
+import type * as React from "react";
 import { cn } from "@t4-code/ui";
 
 import { PANE_FAMILY_META } from "../../components/pane-families.tsx";
@@ -10,19 +11,22 @@ export function PaneHeading({
   family,
   summary,
   className,
+  trailing,
 }: {
   readonly family: PaneFamily;
   /** One short live fact ("6 agents · 2 running"); plain language. */
   readonly summary?: string | undefined;
-  readonly className?: string;
+  readonly className?: string | undefined;
+  /** Optional trailing action rendered at the row's end (e.g. the dock close button). */
+  readonly trailing?: React.ReactNode | undefined;
 }) {
   const meta = PANE_FAMILY_META.find((entry) => entry.id === family);
   if (meta === undefined) return null;
   const Icon = meta.icon;
   return (
     <h2
       className={cn(
-        "flex shrink-0 items-center gap-1.5 border-border border-b px-3 py-1.5",
+        "flex shrink-0 items-center gap-1.5 border-border border-b px-3 py-1.5 in-[[data-slot=sheet-popup]]:pe-14",
         className,
       )}
     >
@@ -33,6 +37,9 @@ export function PaneHeading({
           {summary}
         </span>
       )}
+      {trailing !== undefined && (
+        <span className="ms-auto flex shrink-0 items-center gap-1">{trailing}</span>
+      )}
     </h2>
   );
 }

apps/web/src/features/panes/ReviewPane.tsx

@@ -14,6 +14,7 @@ import {
 } from "@t4-code/ui";
 import { Check, MessageSquarePlus, WrapText, X } from "lucide-react";
 import { Fragment, useMemo, useState } from "react";
+import type * as React from "react";
 
 import { FamilyEmpty } from "./FamilyEmpty.tsx";
 import { PaneHeading } from "./PaneHeading.tsx";
@@ -383,7 +384,7 @@ function FileBody({
   );
 }
 
-export function ReviewPane({ api }: { readonly api: InspectorStoreApi }) {
+export function ReviewPane({ api, trailing }: { readonly api: InspectorStoreApi; readonly trailing?: React.ReactNode | undefined }) {
   const files = useInspector(api, (state) => state.review.files);
   const selectedPath = useInspector(api, (state) => state.review.selectedPath);
   const view = useInspector(api, (state) => state.review.view);
@@ -407,6 +408,7 @@ export function ReviewPane({ api }: { readonly api: InspectorStoreApi }) {
       <PaneHeading
         family="review"
         summary={`${files.length} ${files.length === 1 ? "file" : "files"} · +${additions} −${deletions} · ${viewedCount}/${files.length} viewed`}
+        trailing={trailing}
       />
       <div
         aria-label="Changed files"

apps/web/src/features/panes/TerminalsPane.tsx

@@ -4,6 +4,7 @@
 // into the bottom drawer, which is the only interactive terminal surface.
 import { Badge, Button, cn } from "@t4-code/ui";
 import { SquareTerminal } from "lucide-react";
+import type * as React from "react";
 
 import { workspaceStore } from "../../state/store-instance.ts";
 import {
@@ -69,9 +70,11 @@ function ShellRow({
 export function TerminalsPane({
   api,
   sessionId,
+  trailing,
 }: {
   readonly api: InspectorStoreApi;
   readonly sessionId: string;
+  readonly trailing?: React.ReactNode | undefined;
 }) {
   const agentShells = useInspector(api, (state) => state.terminals);
   const drawerApi = getTerminalStore(sessionId);
@@ -106,6 +109,7 @@ export function TerminalsPane({
       <PaneHeading
         family="terminals"
         summary={`${agentShells.length + userTabs.length} shells · ${runningCount} running`}
+        trailing={trailing}
       />
       <div className="min-h-0 flex-1 overflow-y-auto p-1.5">
         {agentShells.length > 0 && (