@tonyclaw/agent-inspector 3.0.41 → 3.0.43

package/src/components/ProxyViewer.tsx

@@ -1,6 +1,7 @@
 import {
   type ChangeEvent,
   type JSX,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
   useCallback,
   useEffect,
@@ -189,16 +190,29 @@ function formatTimeRange(logs: CapturedLog[], timeDisplayFormat: TimeDisplayForm
 function slateMetricToneClass(tone: SessionSlateMetricTone): string {
   switch (tone) {
     case "cool":
-      return "text-cyan-100";
+      return "text-status-cool";
     case "danger":
-      return "text-red-100";
+      return "text-status-danger";
     case "watch":
-      return "text-amber-100";
+      return "text-status-watch";
     case "neutral":
       return "text-foreground";
   }
 }
 
+function statusMetricIcon(status: SessionSlateStatus): ReactNode {
+  switch (status) {
+    case "rolling":
+      return <RefreshCw className="size-3 text-status-cool" />;
+    case "failed":
+      return <Siren className="size-3 text-status-danger" />;
+    case "watch":
+      return <Timer className="size-3 text-status-watch" />;
+    case "clear":
+      return <Check className="size-3 text-status-success" />;
+  }
+}
+
 function statusMetricTone(status: SessionSlateStatus): SessionSlateMetricTone {
   switch (status) {
     case "rolling":
@@ -232,7 +246,7 @@ function SessionSlateMetric({
   tone?: SessionSlateMetricTone;
 }): JSX.Element {
   return (
-    <div className="min-w-0 border-t border-white/10 px-4 py-3">
+    <div className="min-w-0 border-t border-border/60 px-4 py-3">
       <div className="flex items-center gap-1 text-[10px] uppercase text-muted-foreground">
         {icon}
         {label}
@@ -249,7 +263,7 @@ function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Eleme
   if (stats.requests === 0) return null;
 
   return (
-    <div className="border border-border bg-card shadow-sm mb-4 overflow-hidden rounded-[8px]">
+    <div className="mb-4 overflow-hidden rounded-[8px] border border-border bg-card">
       <div className="px-4 py-3">
         <div className="flex flex-wrap items-end justify-between gap-3">
           <div className="min-w-0">
@@ -267,11 +281,12 @@ function SessionOpeningSlate({ stats }: { stats: SessionSlateStats }): JSX.Eleme
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-2 border-t border-white/10 md:grid-cols-3 2xl:grid-cols-6">
+      <div className="grid grid-cols-2 border-t border-border/60 md:grid-cols-3 2xl:grid-cols-6">
         <SessionSlateMetric
           label="Status"
           value={stats.statusLabel}
           detail={requestHealthDetail(stats)}
+          icon={statusMetricIcon(stats.status)}
           tone={statusMetricTone(stats.status)}
         />
         <SessionSlateMetric
@@ -770,14 +785,9 @@ function SidebarPanel({
   className?: string;
 }): JSX.Element {
   return (
-    <section
-      className={cn(
-        "bg-white/[0.028] shadow-[inset_0_1px_0_rgba(255,255,255,0.035)] rounded-[8px]",
-        className,
-      )}
-    >
+    <section className={cn("rounded-[8px] border border-border/60 bg-card/55", className)}>
       <div className="px-3 pt-3">
-        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
+        <div className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-text-subtle">
           {label}
         </div>
       </div>
@@ -788,11 +798,11 @@ function SidebarPanel({
 
 function SidebarMetric({ label, value }: { label: string; value: string | number }): JSX.Element {
   return (
-    <div className="bg-black/20 min-w-0 rounded-md px-2 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]">
-      <div className="truncate font-mono text-lg font-semibold leading-6 text-slate-100">
+    <div className="min-w-0 rounded-md border border-border/50 bg-muted/30 px-2 py-2">
+      <div className="truncate font-mono text-lg font-semibold leading-6 text-text-strong">
         {value}
       </div>
-      <div className="mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-white/35">
+      <div className="mt-0.5 truncate font-mono text-[10px] uppercase tracking-[0.12em] text-text-subtle">
         {label}
       </div>
     </div>
@@ -804,7 +814,7 @@ function ThemeModeToggle(): JSX.Element {
 
   return (
     <div
-      className="border-border/70 bg-muted/70 inline-flex h-8 items-center rounded-md border p-0.5 shadow-sm"
+      className="inline-flex h-9 items-center rounded-md border border-border/70 bg-muted/70 p-0.5"
       aria-label="Theme mode"
       role="group"
     >
@@ -812,7 +822,7 @@ function ThemeModeToggle(): JSX.Element {
         type="button"
         onClick={() => setThemeMode("light")}
         className={cn(
-          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+          "inline-flex size-8 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-lg:size-11",
           themeMode === "light" && "bg-background text-foreground shadow-sm",
         )}
         aria-label="Use light mode"
@@ -825,7 +835,7 @@ function ThemeModeToggle(): JSX.Element {
         type="button"
         onClick={() => setThemeMode("eye-care")}
         className={cn(
-          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+          "inline-flex size-8 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-lg:size-11",
           themeMode === "eye-care" && "bg-background text-foreground shadow-sm",
         )}
         aria-label="Use eye care mode"
@@ -838,7 +848,7 @@ function ThemeModeToggle(): JSX.Element {
         type="button"
         onClick={() => setThemeMode("dark")}
         className={cn(
-          "inline-flex size-7 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
+          "inline-flex size-8 items-center justify-center rounded-[6px] text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-lg:size-11",
           themeMode === "dark" && "bg-background text-foreground shadow-sm",
         )}
         aria-label="Use dark mode"
@@ -896,7 +906,7 @@ function UiScaleControl({
     >
       <SelectTrigger
         size="sm"
-        className="bg-white/[0.035] hover:bg-white/[0.065] h-8 min-w-[4rem] justify-center gap-1 border-0 px-2 py-0 text-muted-foreground shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)] [&>svg:last-child]:hidden"
+        className="h-9 min-w-[4.5rem] justify-center gap-1 border-border/70 bg-muted/70 px-2 py-0 text-muted-foreground hover:bg-muted max-lg:h-11 [&>svg:last-child]:hidden"
         aria-label={`Interface size: ${currentLabel}`}
       >
         <ALargeSmall className="size-3.5" />
@@ -913,12 +923,42 @@ function UiScaleControl({
 }
 
 const DETAILS_PANEL_COLLAPSED_STORAGE_KEY = "agent-inspector.detailsPanelCollapsed";
+const DETAILS_PANEL_WIDTH_STORAGE_KEY = "agent-inspector.detailsPanelWidth";
 const INSPECTOR_PET_VISIBLE_STORAGE_KEY = "agent-inspector.pet.visible";
+const DETAILS_PANEL_DEFAULT_WIDTH = 360;
+const DETAILS_PANEL_MIN_WIDTH = 288;
+const DETAILS_PANEL_MAX_WIDTH = 520;
+
+type DetailsPanelResizeState = {
+  startX: number;
+  startWidth: number;
+  pointerId: number;
+};
+
+function clampDetailsPanelWidth(width: number): number {
+  return Math.min(Math.max(width, DETAILS_PANEL_MIN_WIDTH), DETAILS_PANEL_MAX_WIDTH);
+}
 
 function readStoredDetailsPanelCollapsed(): boolean {
   if (typeof window === "undefined") return true;
-  const stored = window.localStorage.getItem(DETAILS_PANEL_COLLAPSED_STORAGE_KEY);
-  return stored === null || stored === "1";
+  try {
+    const stored = window.localStorage.getItem(DETAILS_PANEL_COLLAPSED_STORAGE_KEY);
+    return stored === null || stored === "1";
+  } catch {
+    return true;
+  }
+}
+
+function readStoredDetailsPanelWidth(): number {
+  if (typeof window === "undefined") return DETAILS_PANEL_DEFAULT_WIDTH;
+  try {
+    const stored = window.localStorage.getItem(DETAILS_PANEL_WIDTH_STORAGE_KEY);
+    if (stored === null) return DETAILS_PANEL_DEFAULT_WIDTH;
+    const parsed = Number.parseInt(stored, 10);
+    return Number.isFinite(parsed) ? clampDetailsPanelWidth(parsed) : DETAILS_PANEL_DEFAULT_WIDTH;
+  } catch {
+    return DETAILS_PANEL_DEFAULT_WIDTH;
+  }
 }
 
 function readStoredInspectorPetVisible(): boolean {
@@ -1013,7 +1053,7 @@ function SessionModelContextRow({ summary }: { summary: SessionModelContextSumma
           <button
             type="button"
             onClick={openLatestContext}
-            className="min-w-0 truncate rounded-sm text-left font-mono font-semibold text-foreground transition-colors hover:text-cyan-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+            className="min-w-0 truncate rounded-sm text-left font-mono font-semibold text-foreground transition-colors hover:text-text-link focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
             title={`Open latest Context for ${summary.model}`}
           >
             {summary.model}
@@ -1328,6 +1368,8 @@ export function ProxyViewer({
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deletingCurrentView, setDeletingCurrentView] = useState(false);
   const [detailsPanelCollapsed, setDetailsPanelCollapsed] = useState(true);
+  const [detailsPanelWidth, setDetailsPanelWidth] = useState(DETAILS_PANEL_DEFAULT_WIDTH);
+  const [detailsPanelResizing, setDetailsPanelResizing] = useState(false);
   const [detailsPanelStorageLoaded, setDetailsPanelStorageLoaded] = useState(false);
   const [petVisible, setPetVisible] = useState(true);
   const [petVisibilityStorageLoaded, setPetVisibilityStorageLoaded] = useState(false);
@@ -1340,6 +1382,7 @@ export function ProxyViewer({
   const importInputRef = useRef<HTMLInputElement>(null);
   const exportAbortRef = useRef<AbortController | null>(null);
   const exportRequestIdRef = useRef(0);
+  const detailsPanelResizeRef = useRef<DetailsPanelResizeState | null>(null);
   useKeyboardNavigation(logListRef, logListWrapperRef, { pageWide: true });
   const proxyEndpoint = useMemo(() => {
     const origin = typeof window === "undefined" ? "http://localhost:9527" : window.location.origin;
@@ -1365,6 +1408,7 @@ export function ProxyViewer({
 
   useEffect(() => {
     setDetailsPanelCollapsed(readStoredDetailsPanelCollapsed());
+    setDetailsPanelWidth(readStoredDetailsPanelWidth());
     setDetailsPanelStorageLoaded(true);
   }, []);
 
@@ -1376,6 +1420,15 @@ export function ProxyViewer({
     );
   }, [detailsPanelCollapsed, detailsPanelStorageLoaded]);
 
+  useEffect(() => {
+    if (!detailsPanelStorageLoaded) return;
+    try {
+      window.localStorage.setItem(DETAILS_PANEL_WIDTH_STORAGE_KEY, String(detailsPanelWidth));
+    } catch {
+      // Local storage can be unavailable in hardened browser profiles.
+    }
+  }, [detailsPanelStorageLoaded, detailsPanelWidth]);
+
   useEffect(() => {
     setPetVisible(readStoredInspectorPetVisible());
     setPetVisibilityStorageLoaded(true);
@@ -1545,6 +1598,40 @@ export function ProxyViewer({
   const toggleDetailsPanelCollapsed = useCallback(() => {
     setDetailsPanelCollapsed((value) => !value);
   }, []);
+  const handleDetailsPanelResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      detailsPanelResizeRef.current = {
+        startX: event.clientX,
+        startWidth: detailsPanelWidth,
+        pointerId: event.pointerId,
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setDetailsPanelResizing(true);
+    },
+    [detailsPanelWidth],
+  );
+  const handleDetailsPanelResizeMove = useCallback(
+    (event: ReactPointerEvent<HTMLButtonElement>) => {
+      const resize = detailsPanelResizeRef.current;
+      if (resize === null || resize.pointerId !== event.pointerId) return;
+      setDetailsPanelWidth(
+        clampDetailsPanelWidth(resize.startWidth + resize.startX - event.clientX),
+      );
+    },
+    [],
+  );
+  const handleDetailsPanelResizeEnd = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const resize = detailsPanelResizeRef.current;
+    if (resize === null || resize.pointerId !== event.pointerId) return;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    detailsPanelResizeRef.current = null;
+    setDetailsPanelResizing(false);
+  }, []);
+  const resetDetailsPanelWidth = useCallback(() => {
+    setDetailsPanelWidth(DETAILS_PANEL_DEFAULT_WIDTH);
+  }, []);
   const togglePetVisibility = useCallback(() => {
     setPetVisible((value) => !value);
   }, []);
@@ -1633,15 +1720,12 @@ export function ProxyViewer({
         type="button"
         onClick={toggleDetailsPanelCollapsed}
         className={cn(
-          "group fixed top-1/2 right-3 z-40 inline-flex h-14 w-7 -translate-y-1/2 items-center justify-center rounded-l-md border border-white/[0.08] bg-background/90 text-muted-foreground shadow-[0_12px_34px_rgba(0,0,0,0.26),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur transition-[right,background-color,color,border-color] duration-200 motion-reduce:transition-none hover:border-white/[0.16] hover:bg-white/[0.07] hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none",
-          detailsPanelCollapsed
-            ? "right-3"
-            : "lg:right-[calc(21.25rem-0.875rem)] xl:right-[calc(22.5rem-0.875rem)]",
+          "group fixed top-1/2 right-3 z-50 inline-flex h-14 w-8 -translate-y-1/2 items-center justify-center rounded-l-md border border-border/70 bg-background/90 text-muted-foreground shadow-lg backdrop-blur transition-colors motion-reduce:transition-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
         )}
         aria-label={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
         title={detailsPanelCollapsed ? "Show details panel" : "Hide details panel"}
       >
-        <span className="absolute left-1 top-2 bottom-2 w-px rounded-full bg-white/[0.16] transition-colors group-hover:bg-white/[0.28]" />
+        <span className="absolute bottom-2 left-1 top-2 w-px rounded-full bg-border transition-colors group-hover:bg-foreground/35" />
         {detailsPanelCollapsed ? (
           <PanelRightOpen className="size-3.5" />
         ) : (
@@ -1657,94 +1741,124 @@ export function ProxyViewer({
       )}
       <div
         className={cn(
-          "grid w-full min-w-0 grid-cols-1 lg:min-h-0 lg:flex-1 lg:overflow-hidden",
-          detailsPanelCollapsed
-            ? "lg:grid-cols-[minmax(0,1fr)]"
-            : "lg:grid-cols-[minmax(0,1fr)_21.25rem] xl:grid-cols-[minmax(0,1fr)_22.5rem]",
+          "flex w-full min-w-0 flex-col lg:min-h-0 lg:flex-1 lg:flex-row lg:overflow-hidden",
+          detailsPanelResizing && "cursor-col-resize select-none",
         )}
       >
         {!detailsPanelCollapsed && (
-          <aside className="bg-background/95 order-1 border-b border-white/[0.045] lg:order-2 lg:h-full lg:overflow-y-auto lg:border-b-0 lg:border-l lg:border-white/[0.055] inspector-scrollbar">
-            <div className="flex min-h-full flex-col gap-4 p-4">
-              <div className="bg-background/95 sticky top-0 z-20 -mx-4 -mt-4 px-4 pt-4 pb-3 shadow-[0_12px_24px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] backdrop-blur">
-                <SidebarPanel label="Tools">
-                  <div className="flex flex-wrap items-center gap-1.5">
-                    <ThemeModeToggle />
-                    <UiScaleControl
-                      preference={uiScalePreference}
-                      resolvedScale={resolvedUiScale}
-                      onChange={setUiScalePreference}
+          <>
+            <button
+              type="button"
+              className="fixed inset-0 z-30 bg-background/70 backdrop-blur-sm lg:hidden"
+              onClick={toggleDetailsPanelCollapsed}
+              aria-label="Close details panel"
+            />
+            <aside
+              className="inspector-scrollbar fixed inset-x-3 bottom-3 top-24 z-40 order-1 overflow-y-auto rounded-lg border border-border bg-background/98 shadow-2xl max-lg:!w-auto lg:relative lg:inset-auto lg:order-2 lg:h-full lg:shrink-0 lg:rounded-none lg:border-y-0 lg:border-r-0 lg:shadow-none"
+              style={{ width: detailsPanelWidth }}
+            >
+              <button
+                type="button"
+                className="absolute bottom-0 left-0 top-0 z-30 hidden w-2 -translate-x-1/2 cursor-col-resize touch-none items-center justify-center lg:flex"
+                onPointerDown={handleDetailsPanelResizeStart}
+                onPointerMove={handleDetailsPanelResizeMove}
+                onPointerUp={handleDetailsPanelResizeEnd}
+                onPointerCancel={handleDetailsPanelResizeEnd}
+                onDoubleClick={resetDetailsPanelWidth}
+                aria-label="Resize details panel"
+                title="Drag to resize; double-click to reset"
+              >
+                <span className="h-12 w-1 rounded-full bg-border transition-colors hover:bg-primary" />
+              </button>
+              <div className="flex min-h-full flex-col gap-4 p-4">
+                <div className="sticky top-0 z-20 -mx-4 -mt-4 grid gap-2 border-b border-border/60 bg-background/95 px-4 pb-3 pt-4 backdrop-blur">
+                  <SidebarPanel label="View">
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      <ThemeModeToggle />
+                      <UiScaleControl
+                        preference={uiScalePreference}
+                        resolvedScale={resolvedUiScale}
+                        onChange={setUiScalePreference}
+                      />
+                    </div>
+                  </SidebarPanel>
+                  <SidebarPanel label="Workspace">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <GroupsDialog labelledTrigger />
+                      <AgentLabDialog
+                        currentSessionId={labSessionId}
+                        logCount={logs.length}
+                        labelledTrigger
+                      />
+                    </div>
+                  </SidebarPanel>
+                </div>
+
+                <SidebarPanel label="Current scope">
+                  <div className="mb-2 rounded-md border border-border/50 bg-muted/25 px-3 py-2">
+                    <div
+                      className="truncate font-mono text-xs font-semibold text-text-link"
+                      title={activeScopeLabel}
+                    >
+                      {activeScopeLabel}
+                    </div>
+                    <div className="mt-1 text-[11px] text-muted-foreground">
+                      {isPinnedSessionPage ? "Pinned session" : "Live Inspector data"}
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                    <SidebarMetric
+                      label={assistantSearchResult === null ? "Requests" : "Results"}
+                      value={displayedLogs.length}
+                    />
+                    <SidebarMetric label="Sessions" value={sessions.length} />
+                    <SidebarMetric
+                      label="Input"
+                      value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
+                    />
+                    <SidebarMetric
+                      label="Output"
+                      value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
                     />
-                    <GroupsDialog />
-                    <AgentLabDialog currentSessionId={labSessionId} logCount={logs.length} />
                   </div>
+                  {sessionLoadProgress !== undefined && (
+                    <div className="mt-2 rounded-md border border-border/50 bg-muted/25 px-2 py-2">
+                      <SessionLoadProgressBar progress={sessionLoadProgress} />
+                    </div>
+                  )}
                 </SidebarPanel>
-              </div>
 
-              <SidebarPanel label="Current scope">
-                <div className="mb-2 rounded-md bg-black/20 px-3 py-2 shadow-[inset_0_1px_0_rgba(255,255,255,0.035)]">
-                  <div
-                    className="truncate font-mono text-xs font-semibold text-cyan-100"
-                    title={activeScopeLabel}
-                  >
-                    {activeScopeLabel}
-                  </div>
-                  <div className="mt-1 text-[11px] text-muted-foreground">
-                    {isPinnedSessionPage ? "Pinned session" : "Live Inspector data"}
-                  </div>
-                </div>
-                <div className="grid grid-cols-2 gap-2">
-                  <SidebarMetric
-                    label={assistantSearchResult === null ? "Requests" : "Results"}
-                    value={displayedLogs.length}
-                  />
-                  <SidebarMetric label="Sessions" value={sessions.length} />
-                  <SidebarMetric
-                    label="Input"
-                    value={formatTokens(hasSessionContext ? sessionContextTotalIn : totalIn)}
-                  />
-                  <SidebarMetric
-                    label="Output"
-                    value={formatTokens(hasSessionContext ? sessionContextTotalOut : totalOut)}
+                {hasSessionContext && sessionContextScope !== null && (
+                  <SessionContextBar
+                    label={sessionContextScope.label}
+                    logs={sessionContextLogs}
+                    totalIn={sessionContextTotalIn}
+                    totalOut={sessionContextTotalOut}
+                    timeDisplayFormat={timeDisplayFormat}
+                    contextSummary={sessionContextSummary}
+                    showBackLink={sessionContextScope.showBackLink}
                   />
-                </div>
-                {sessionLoadProgress !== undefined && (
-                  <div className="mt-2 rounded-md bg-black/20 px-2 py-2 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.045)]">
-                    <SessionLoadProgressBar progress={sessionLoadProgress} />
-                  </div>
                 )}
-              </SidebarPanel>
-
-              {hasSessionContext && sessionContextScope !== null && (
-                <SessionContextBar
-                  label={sessionContextScope.label}
-                  logs={sessionContextLogs}
-                  totalIn={sessionContextTotalIn}
-                  totalOut={sessionContextTotalOut}
-                  timeDisplayFormat={timeDisplayFormat}
-                  contextSummary={sessionContextSummary}
-                  showBackLink={sessionContextScope.showBackLink}
-                />
-              )}
 
-              {hasSessionContext &&
-                pinnedSessionId !== undefined &&
-                sessionMemberships.length > 0 && (
-                  <SessionMembershipPanel memberships={sessionMemberships} />
-                )}
+                {hasSessionContext &&
+                  pinnedSessionId !== undefined &&
+                  sessionMemberships.length > 0 && (
+                    <SessionMembershipPanel memberships={sessionMemberships} />
+                  )}
 
-              <div className="flex-1" />
+                <div className="flex-1" />
 
-              <PiAgentPanel
-                currentSessionId={labSessionId}
-                logCount={logs.length}
-                onResultChange={setAssistantSearchResult}
-              />
-            </div>
-          </aside>
+                <PiAgentPanel
+                  currentSessionId={labSessionId}
+                  logCount={logs.length}
+                  onResultChange={setAssistantSearchResult}
+                />
+              </div>
+            </aside>
+          </>
         )}
 
-        <main className="order-2 min-w-0 lg:order-1 lg:h-full lg:overflow-y-auto inspector-scrollbar">
+        <main className="inspector-scrollbar order-2 min-w-0 lg:order-1 lg:h-full lg:flex-1 lg:overflow-y-auto">
           <div className="bg-background/95 shadow-[0_12px_36px_rgba(0,0,0,0.18),inset_0_-1px_0_rgba(255,255,255,0.045)] sticky top-0 z-30 px-4 py-3 lg:px-5">
             <div className="flex flex-wrap items-center gap-2">
               <div className="min-w-[180px] flex-1">

package/src/components/alerts/AlertsDialog.tsx

@@ -74,33 +74,33 @@ function categoryLabel(category: AlertCategory): string {
 function severityAccent(severity: AlertSeverity): string {
   switch (severity) {
     case "critical":
-      return "border-red-400/40 bg-red-500/12 text-red-100";
+      return "border-status-danger/40 bg-status-danger/10 text-status-danger";
     case "warning":
-      return "border-amber-300/35 bg-amber-400/12 text-amber-100";
+      return "border-status-watch/40 bg-status-watch/10 text-status-watch";
     case "notice":
-      return "border-sky-300/35 bg-sky-400/12 text-sky-100";
+      return "border-status-cool/40 bg-status-cool/10 text-status-cool";
   }
 }
 
 function severityDot(severity: AlertSeverity): string {
   switch (severity) {
     case "critical":
-      return "bg-red-400";
+      return "bg-status-danger";
     case "warning":
-      return "bg-amber-300";
+      return "bg-status-watch";
     case "notice":
-      return "bg-sky-300";
+      return "bg-status-cool";
   }
 }
 
 function severityText(severity: AlertSeverity): string {
   switch (severity) {
     case "critical":
-      return "text-red-200";
+      return "text-status-danger";
     case "warning":
-      return "text-amber-100";
+      return "text-status-watch";
     case "notice":
-      return "text-sky-100";
+      return "text-status-cool";
   }
 }
 
@@ -169,11 +169,11 @@ function AlertSummaryPill({
 }): JSX.Element {
   const toneClass =
     tone === "critical"
-      ? "border-red-400/30 bg-red-500/10 text-red-100"
+      ? "border-status-danger/30 bg-status-danger/10 text-status-danger"
       : tone === "warning"
-        ? "border-amber-300/30 bg-amber-400/10 text-amber-100"
+        ? "border-status-watch/30 bg-status-watch/10 text-status-watch"
         : tone === "notice"
-          ? "border-sky-300/30 bg-sky-400/10 text-sky-100"
+          ? "border-status-cool/30 bg-status-cool/10 text-status-cool"
           : "border-border bg-muted/40 text-foreground";
 
   return (
@@ -263,7 +263,7 @@ function AlertList({
 
   if (error !== undefined) {
     return (
-      <div className="rounded-md border border-red-300/30 bg-red-500/10 px-3 py-2 text-xs text-red-100">
+      <div className="rounded-md border border-status-danger/30 bg-status-danger/10 px-3 py-2 text-xs text-status-danger">
         {error.message}
       </div>
     );
@@ -470,10 +470,10 @@ export function AlertsDialog(): JSX.Element {
   const noticeCount = summary?.notice ?? 0;
   const triggerTone =
     criticalCount > 0
-      ? "bg-red-600 text-white"
+      ? "bg-status-danger text-primary-foreground"
       : warningCount > 0
-        ? "bg-amber-400 text-zinc-950"
-        : "bg-sky-400 text-zinc-950";
+        ? "bg-status-watch text-primary-foreground"
+        : "bg-status-cool text-primary-foreground";
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
@@ -505,7 +505,7 @@ export function AlertsDialog(): JSX.Element {
       <DialogContent className="flex max-h-[86vh] max-w-6xl flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2 pr-8">
-            <Siren className="size-5 text-red-300" />
+            <Siren className="size-5 text-status-danger" />
             <span>Alerts</span>
             <Badge variant="outline">{formatCount(totalCount)}</Badge>
           </DialogTitle>

package/src/components/ecosystem/AgentLabDialog.tsx

@@ -621,7 +621,11 @@ function ExecutionConfirmationDialog({
   );
 }
 
-export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogProps): JSX.Element {
+export function AgentLabDialog({
+  currentSessionId,
+  logCount,
+  labelledTrigger = false,
+}: AgentLabDialogProps & { labelledTrigger?: boolean }): JSX.Element {
   const [open, setOpen] = useState(false);
   const [copied, setCopied] = useState(false);
   const [copiedPresets, setCopiedPresets] = useState(false);
@@ -737,13 +741,16 @@ export function AgentLabDialog({ currentSessionId, logCount }: AgentLabDialogPro
       <DialogTrigger asChild>
         <Button
           variant="ghost"
-          size="icon"
-          className={INSPECTOR_ICON_TRIGGER_CLASS}
+          size={labelledTrigger ? "default" : "icon"}
+          className={cn(
+            INSPECTOR_ICON_TRIGGER_CLASS,
+            labelledTrigger && "w-auto gap-2 px-3 text-xs max-lg:h-11 max-lg:w-auto",
+          )}
           aria-label="TonyClaw Lab"
           title="TonyClaw Lab"
         >
           <FlaskConical className="size-4" />
-          <span className="sr-only">TonyClaw Lab</span>
+          <span className={labelledTrigger ? "" : "sr-only"}>Lab</span>
         </Button>
       </DialogTrigger>
       <DialogContent className="flex max-h-[84vh] max-w-5xl flex-col overflow-hidden">