@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/ai/SessionInspector.js

@@ -1,25 +1,25 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
-import { SegmentedControl } from "../../components/SegmentedControl.js";
 import { cn } from "../../lib/utils.js";
-import { CodeBlock } from "../CodeBlock.js";
-import { KeyValueList } from "../KeyValueList.js";
+import { TabButton } from "../TabButton.js";
+import { costTotal } from "./session-cost.js";
+import { SessionInspectorPanel } from "./SessionInspector.panels.js";
+import { SessionInspectorHeader, SessionInspectorSidebar } from "./SessionInspector.summary.js";
+import { SessionTranscript } from "./SessionInspector.transcript.js";
+import { isSessionCollectionInput } from "./SessionInspector.collection.js";
+import { SessionHierarchyPicker } from "./SessionInspector.hierarchy.js";
+import { useSessionHierarchy } from "./SessionInspector.hierarchy-state.js";
 import { SessionViewer } from "./SessionViewer.js";
-import { tokenTotal, costTotal } from "./session-cost.js";
 import { UiChatDots } from "../../icons/components/UiChatDots.js";
-import { UiRepeat } from "../../icons/components/UiRepeat.js";
-import { UiRobotAi } from "../../icons/components/UiRobotAi.js";
 import { UiFileText } from "../../icons/components/UiFileText.js";
 import { UiStrategy } from "../../icons/components/UiStrategy.js";
 import { UiSealCheck } from "../../icons/components/UiSealCheck.js";
 import { UiCoins } from "../../icons/components/UiCoins.js";
 import { UiListDashes } from "../../icons/components/UiListDashes.js";
 import { UiBraces } from "../../icons/components/UiBraces.js";
-import { compactTokens, formatCost } from "../../lib/tokens.js";
-const TAB_OPTIONS = [
+import { formatCost } from "../../lib/tokens.js";
+const TABS = [
   { id: "transcript", label: "Transcript", icon: UiChatDots },
-  { id: "turns", label: "Turns", icon: UiRepeat },
-  { id: "agents", label: "Agents", icon: UiRobotAi },
   { id: "files", label: "Files", icon: UiFileText },
   { id: "plan", label: "Plan", icon: UiStrategy },
   { id: "approvals", label: "Approvals", icon: UiSealCheck },
@@ -31,401 +31,241 @@ function SessionInspector({
   session,
   className,
   defaultTab = "transcript",
-  transcriptProps
+  transcriptProps,
+  renderSessionActions,
+  onPlanChange,
+  composer
 }) {
-  const detail = useMemo(() => asUnifiedSession(session), [session]);
-  const [tab, setTab] = useState(defaultTab);
-  const transcriptClassName = cn("h-full", transcriptProps == null ? void 0 : transcriptProps.className);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col bg-background text-sm", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border p-density-3", children: /* @__PURE__ */ jsx(
-      SegmentedControl,
-      {
-        value: tab,
-        options: TAB_OPTIONS,
-        onChange: setTab,
-        size: "sm",
-        wrap: true,
-        "aria-label": "Session detail view"
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "min-h-0 flex-1",
-          tab === "transcript" ? "overflow-hidden" : "overflow-auto p-density-4"
-        ),
-        children: tab === "transcript" ? /* @__PURE__ */ jsx(
-          SessionViewer,
-          {
-            session,
-            scrollable: true,
-            showRowMetadata: true,
-            ...transcriptProps,
-            className: transcriptClassName
-          }
-        ) : /* @__PURE__ */ jsx(InspectorTab, { tab, detail, session })
-      }
-    )
-  ] });
-}
-function InspectorTab({
-  tab,
-  detail,
-  session
-}) {
-  switch (tab) {
-    case "turns":
-      return /* @__PURE__ */ jsx(TurnsPanel, { turns: detail == null ? void 0 : detail.turns });
-    case "agents":
-      return /* @__PURE__ */ jsx(AgentsPanel, { root: detail == null ? void 0 : detail.root, agents: detail == null ? void 0 : detail.agents });
-    case "files":
-      return /* @__PURE__ */ jsx(FilesPanel, { files: detail == null ? void 0 : detail.files });
-    case "plan":
-      return /* @__PURE__ */ jsx(PlanPanel, { plan: detail == null ? void 0 : detail.plan });
-    case "approvals":
-      return /* @__PURE__ */ jsx(ApprovalsPanel, { approvals: detail == null ? void 0 : detail.approvals });
-    case "costs":
-      return /* @__PURE__ */ jsx(CostsPanel, { usage: detail == null ? void 0 : detail.usage, cost: detail == null ? void 0 : detail.cost, toolCosts: detail == null ? void 0 : detail.toolCosts });
-    case "metadata":
-      return /* @__PURE__ */ jsx(MetadataPanel, { session: detail });
-    case "raw":
-      return /* @__PURE__ */ jsx(RawPanel, { value: detail ?? session });
-    default:
-      return null;
-  }
-}
-function TurnsPanel({ turns }) {
-  if (!(turns == null ? void 0 : turns.length)) return /* @__PURE__ */ jsx(EmptyState, { children: "No turn metadata." });
-  return /* @__PURE__ */ jsx("div", { className: "overflow-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[720px] border-collapse text-left text-sm", children: [
-    /* @__PURE__ */ jsx("thead", { className: "bg-muted/60 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx(Th, { children: "Turn" }),
-      /* @__PURE__ */ jsx(Th, { children: "Time" }),
-      /* @__PURE__ */ jsx(Th, { children: "Model" }),
-      /* @__PURE__ */ jsx(Th, { children: "Stop" }),
-      /* @__PURE__ */ jsx(Th, { children: "Usage" }),
-      /* @__PURE__ */ jsx(Th, { children: "Cost" }),
-      /* @__PURE__ */ jsx(Th, { children: "Context" }),
-      /* @__PURE__ */ jsx(Th, { children: "Messages" }),
-      /* @__PURE__ */ jsx(Th, { children: "Events" })
-    ] }) }),
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: turns.map((turn) => {
-      var _a, _b;
-      return /* @__PURE__ */ jsxs("tr", { className: "align-top", children: [
-        /* @__PURE__ */ jsxs(Td, { children: [
-          /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground", children: turn.index || turn.id }),
-          /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: turn.id })
-        ] }),
-        /* @__PURE__ */ jsx(Td, { children: timeRange(turn.startedAt, turn.endedAt) }),
-        /* @__PURE__ */ jsx(Td, { children: turn.model || muted("-") }),
-        /* @__PURE__ */ jsx(Td, { children: turn.stopReason || muted("-") }),
-        /* @__PURE__ */ jsx(Td, { children: usageLabel(turn.usage) }),
-        /* @__PURE__ */ jsx(Td, { children: costLabel(turn.cost) }),
-        /* @__PURE__ */ jsx(Td, { children: contextLabel(turn.context) }),
-        /* @__PURE__ */ jsx(Td, { children: countLabel((_a = turn.messageIds) == null ? void 0 : _a.length, "message") }),
-        /* @__PURE__ */ jsx(Td, { children: countLabel((_b = turn.events) == null ? void 0 : _b.length, "event") })
-      ] }, turn.id);
-    }) })
-  ] }) });
-}
-function AgentsPanel({
-  root,
-  agents
-}) {
-  const nodes = root ? [root] : agents ?? [];
-  if (!nodes.length) return /* @__PURE__ */ jsx(EmptyState, { children: "No agent hierarchy." });
-  return /* @__PURE__ */ jsx("div", { className: "space-y-density-2", children: nodes.map((agent, index) => /* @__PURE__ */ jsx(AgentNode, { agent }, agent.id || index)) });
-}
-function AgentNode({ agent, depth = 0 }) {
-  var _a;
-  return /* @__PURE__ */ jsxs("div", { className: cn(depth > 0 && "ml-density-5 border-l border-border pl-density-3"), children: [
-    /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-border p-density-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-density-2", children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: agent.isRoot ? "Root" : agent.type || "Agent" }),
-        agent.id && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: agent.id })
-      ] }),
-      agent.desc && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: agent.desc }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-2 grid gap-density-2 text-xs text-muted-foreground md:grid-cols-3", children: [
-        agent.historyFile && /* @__PURE__ */ jsxs("div", { className: "truncate", children: [
-          "History: ",
-          agent.historyFile
-        ] }),
-        /* @__PURE__ */ jsx("div", { children: usageLabel(agent.usage) }),
-        /* @__PURE__ */ jsx("div", { children: costLabel(agent.cost) })
-      ] })
-    ] }),
-    ((_a = agent.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx("div", { className: "mt-density-2 space-y-density-2", children: agent.children.map((child, index) => /* @__PURE__ */ jsx(AgentNode, { agent: child, depth: depth + 1 }, child.id || index)) }) : null
-  ] });
-}
-function FilesPanel({ files }) {
-  const read = (files == null ? void 0 : files.read) ?? [];
-  const written = (files == null ? void 0 : files.written) ?? [];
-  if (read.length === 0 && written.length === 0) return /* @__PURE__ */ jsx(EmptyState, { children: "No changed-file summary." });
-  return /* @__PURE__ */ jsxs("div", { className: "grid gap-density-4 md:grid-cols-2", children: [
-    /* @__PURE__ */ jsx(PathList, { title: `Read (${read.length})`, paths: read }),
-    /* @__PURE__ */ jsx(PathList, { title: `Written (${written.length})`, paths: written })
-  ] });
-}
-function PathList({ title, paths }) {
-  return /* @__PURE__ */ jsxs("section", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-density-2 text-xs font-semibold uppercase text-muted-foreground", children: title }),
-    paths.length ? /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border rounded-md border border-border", children: paths.map((path) => /* @__PURE__ */ jsx("li", { className: "truncate px-density-3 py-density-2 font-mono text-xs", children: path }, path)) }) : /* @__PURE__ */ jsx(EmptyState, { compact: true, children: "None." })
-  ] });
-}
-function PlanPanel({ plan }) {
-  var _a, _b;
-  if (!plan) return /* @__PURE__ */ jsx(EmptyState, { children: "No plan metadata." });
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-4", children: [
-    /* @__PURE__ */ jsx(
-      KeyValueList,
-      {
-        items: [
-          kv("Path", plan.path),
-          kv("Slug", plan.slug),
-          kv("Explicit", plan.explicit === void 0 ? void 0 : String(plan.explicit)),
-          kv("Events", countLabel((_a = plan.events) == null ? void 0 : _a.length, "event"))
-        ]
-      }
-    ),
-    plan.content && /* @__PURE__ */ jsx(CodeBlock, { language: "markdown", source: plan.content, copyable: true }),
-    ((_b = plan.events) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx(
-      SimpleList,
+  const detail = useMemo(
+    () => isSessionCollectionInput(session) ? void 0 : asUnifiedSession(session),
+    [session]
+  );
+  const collection = useMemo(
+    () => isSessionCollectionInput(session) ? session : detail ? singleSessionCollection(detail) : void 0,
+    [detail, session]
+  );
+  if (collection) {
+    const optionalProps = {
+      ...className ? { className } : {},
+      ...transcriptProps ? { transcriptProps } : {},
+      ...renderSessionActions ? { renderSessionActions } : {},
+      ...onPlanChange ? { onPlanChange } : {},
+      ...composer ? { composer } : {}
+    };
+    return /* @__PURE__ */ jsx(
+      CollectionSessionInspector,
       {
-        title: "Plan Events",
-        rows: plan.events.map((event, index) => ({
-          key: `${event.kind}-${index}`,
-          title: event.kind,
-          detail: [formatTime(event.timestamp), event.reason].filter(Boolean).join(" - ")
-        }))
+        collection,
+        defaultTab,
+        ...optionalProps
       }
-    ) : null
-  ] });
-}
-function ApprovalsPanel({ approvals }) {
-  var _a, _b;
-  if (!approvals || !approvals.approved && !approvals.denied && !((_a = approvals.denials) == null ? void 0 : _a.length)) {
-    return /* @__PURE__ */ jsx(EmptyState, { children: "No approval metadata." });
+    );
   }
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-4", children: [
-    /* @__PURE__ */ jsx(
-      KeyValueList,
-      {
-        items: [
-          kv("Approved", approvals.approved ?? 0),
-          kv("Denied", approvals.denied ?? 0)
-        ]
-      }
-    ),
-    ((_b = approvals.denials) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx(
-      SimpleList,
-      {
-        title: "Denials",
-        rows: approvals.denials.map((denial, index) => ({
-          key: denial.toolUseId || `${denial.tool}-${index}`,
-          title: [denial.tool, denial.toolUseId].filter(Boolean).join(" "),
-          detail: denial.reason
-        }))
-      }
-    ) : null
-  ] });
+  return /* @__PURE__ */ jsx(
+    LegacySessionInspector,
+    {
+      session,
+      defaultTab,
+      ...className ? { className } : {},
+      ...transcriptProps ? { transcriptProps } : {},
+      ...composer ? { composer } : {}
+    }
+  );
 }
-function CostsPanel({
-  usage,
-  cost,
-  toolCosts
+function CollectionSessionInspector({
+  collection,
+  className,
+  defaultTab = "transcript",
+  transcriptProps,
+  renderSessionActions,
+  onPlanChange,
+  composer
 }) {
-  var _a, _b, _c, _d, _e;
-  if (!usage && !cost && !(toolCosts == null ? void 0 : toolCosts.length)) return /* @__PURE__ */ jsx(EmptyState, { children: "No cost metadata." });
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-4", children: [
-    /* @__PURE__ */ jsx(
-      KeyValueList,
-      {
-        items: [
-          kv("Tokens", usageLabel(usage ?? cost)),
-          kv("Cost", costLabel(cost)),
-          kv("Input", compactTokens((_a = usage ?? cost) == null ? void 0 : _a.inputTokens)),
-          kv("Output", compactTokens((_b = usage ?? cost) == null ? void 0 : _b.outputTokens)),
-          kv("Reasoning", compactTokens((_c = usage ?? cost) == null ? void 0 : _c.reasoningTokens)),
-          kv("Cache Read", compactTokens((_d = usage ?? cost) == null ? void 0 : _d.cacheReadTokens)),
-          kv("Cache Write", compactTokens((_e = usage ?? cost) == null ? void 0 : _e.cacheWriteTokens))
-        ]
-      }
-    ),
-    (toolCosts == null ? void 0 : toolCosts.length) ? /* @__PURE__ */ jsx(CostBreakdown, { costs: toolCosts }) : null
-  ] });
-}
-function CostBreakdown({ costs }) {
-  return /* @__PURE__ */ jsx("div", { className: "overflow-auto rounded-md border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full min-w-[560px] border-collapse text-left text-sm", children: [
-    /* @__PURE__ */ jsx("thead", { className: "bg-muted/60 text-xs text-muted-foreground", children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx(Th, { children: "Model" }),
-      /* @__PURE__ */ jsx(Th, { children: "Tokens" }),
-      /* @__PURE__ */ jsx(Th, { children: "Input" }),
-      /* @__PURE__ */ jsx(Th, { children: "Output" }),
-      /* @__PURE__ */ jsx(Th, { children: "Cache" }),
-      /* @__PURE__ */ jsx(Th, { children: "Cost" })
-    ] }) }),
-    /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-border", children: costs.map((entry, index) => /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx(Td, { children: entry.model || muted("unknown") }),
-      /* @__PURE__ */ jsx(Td, { children: compactTokens(tokenTotal(entry)) }),
-      /* @__PURE__ */ jsx(Td, { children: compactTokens(entry.inputTokens) }),
-      /* @__PURE__ */ jsx(Td, { children: compactTokens(entry.outputTokens) }),
-      /* @__PURE__ */ jsx(Td, { children: compactTokens((entry.cacheReadTokens ?? 0) + (entry.cacheWriteTokens ?? 0)) }),
-      /* @__PURE__ */ jsx(Td, { children: costLabel(entry) })
-    ] }, `${entry.model || "model"}-${index}`)) })
-  ] }) });
-}
-function MetadataPanel({ session }) {
-  if (!session) return /* @__PURE__ */ jsx(EmptyState, { children: "No unified session metadata." });
-  const identity = [
-    kv("ID", session.id),
-    kv("Source", session.source),
-    kv("Project", session.project),
-    kv("CWD", session.cwd),
-    kv("History", session.historyFile),
-    kv("Model", session.model),
-    kv("Provider", session.provider),
-    kv("Version", session.version),
-    kv("Git", gitLabel(session.git)),
-    kv("Started", formatTime(session.startedAt)),
-    kv("Ended", formatTime(session.endedAt)),
-    kv("Duration", durationLabel(session.startedAt, session.endedAt)),
-    kv("Live", liveLabel(session.live)),
-    kv("Health", healthLabel(session.health))
-  ];
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-density-4", children: [
-    /* @__PURE__ */ jsx(KeyValueList, { items: identity }),
-    /* @__PURE__ */ jsx(JsonSection, { title: "Capabilities", value: session.capabilities }),
-    /* @__PURE__ */ jsx(JsonSection, { title: "Context", value: session.context }),
-    /* @__PURE__ */ jsx(JsonSection, { title: "Budget", value: session.budget }),
-    /* @__PURE__ */ jsx(JsonSection, { title: "Events", value: session.events }),
-    /* @__PURE__ */ jsx(JsonSection, { title: "Prompt", value: session.prompt })
-  ] });
-}
-function RawPanel({ value }) {
-  return /* @__PURE__ */ jsx(CodeBlock, { language: "json", source: jsonSource(value), copyable: true, jsonDefaultOpenDepth: 1 });
-}
-function JsonSection({ title, value }) {
-  if (value === void 0 || value === null || Array.isArray(value) && value.length === 0) return null;
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-density-2 text-xs font-semibold uppercase text-muted-foreground", children: title }),
-    /* @__PURE__ */ jsx(CodeBlock, { language: "json", source: jsonSource(value), jsonDefaultOpenDepth: 1 })
-  ] });
+  const hierarchy = useSessionHierarchy(collection);
+  const [tab, setTab] = useState(defaultTab);
+  const transcriptClassName = cn("h-full", transcriptProps == null ? void 0 : transcriptProps.className);
+  const panelDetail = tab === "costs" ? hierarchy.filtered : hierarchy.current;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden rounded-xl border border-border bg-background text-sm shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(SessionInspectorHeader, { session: hierarchy.current }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "toolbar",
+            "aria-label": "Session content controls",
+            className: "flex shrink-0 justify-start border-b border-border px-density-2 py-density-2",
+            children: /* @__PURE__ */ jsx(
+              SessionHierarchyPicker,
+              {
+                collection,
+                state: hierarchy,
+                ...renderSessionActions ? { renderSessionActions } : {}
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": "Session detail view",
+            className: "flex shrink-0 overflow-x-auto border-b border-border px-density-2",
+            children: TABS.map((item) => {
+              const count = tabCount(item.id, hierarchy.current);
+              return /* @__PURE__ */ jsx(
+                TabButton,
+                {
+                  active: tab === item.id,
+                  onClick: () => setTab(item.id),
+                  label: tabLabel(
+                    item.id,
+                    item.label,
+                    item.id === "costs" ? hierarchy.filtered : hierarchy.current
+                  ),
+                  icon: item.icon,
+                  variant: "underline",
+                  ...count === void 0 ? {} : { count },
+                  className: "shrink-0 py-density-2 [&_svg]:text-muted-foreground"
+                },
+                item.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "grid min-h-0 flex-1 overflow-y-auto lg:grid-cols-[minmax(0,1fr)_18rem] lg:overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("main", { className: "flex min-h-[28rem] min-w-0 flex-col lg:min-h-0", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "min-h-0 flex-1",
+                  tab === "transcript" ? "overflow-hidden" : "overflow-auto p-density-4"
+                ),
+                children: tab === "transcript" ? /* @__PURE__ */ jsx(
+                  SessionTranscript,
+                  {
+                    session: hierarchy.filtered,
+                    viewerProps: {
+                      ...transcriptProps,
+                      className: transcriptClassName
+                    }
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  SessionInspectorPanel,
+                  {
+                    tab,
+                    detail: panelDetail,
+                    session: hierarchy.current,
+                    ...onPlanChange ? { onPlanChange } : {}
+                  }
+                )
+              }
+            ),
+            composer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-density-3", children: composer }) : null
+          ] }),
+          /* @__PURE__ */ jsx(SessionInspectorSidebar, { session: hierarchy.current })
+        ] })
+      ]
+    }
+  );
 }
-function SimpleList({
-  title,
-  rows
+function LegacySessionInspector({
+  session,
+  className,
+  defaultTab = "transcript",
+  transcriptProps,
+  composer
 }) {
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-density-2 text-xs font-semibold uppercase text-muted-foreground", children: title }),
-    /* @__PURE__ */ jsx("ul", { className: "divide-y divide-border rounded-md border border-border", children: rows.map((row) => /* @__PURE__ */ jsxs("li", { className: "px-density-3 py-density-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: row.title || row.key }),
-      row.detail ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-muted-foreground", children: row.detail }) : null
-    ] }, row.key)) })
-  ] });
-}
-function Th({ children }) {
-  return /* @__PURE__ */ jsx("th", { className: "px-density-3 py-density-2 font-medium", children });
-}
-function Td({ children }) {
-  return /* @__PURE__ */ jsx("td", { className: "px-density-3 py-density-2", children });
-}
-function EmptyState({ children, compact = false }) {
-  return /* @__PURE__ */ jsx(
+  const [tab, setTab] = useState(defaultTab);
+  const transcriptClassName = cn("h-full", transcriptProps == null ? void 0 : transcriptProps.className);
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "rounded-md border border-dashed border-border text-sm text-muted-foreground",
-        compact ? "p-density-3" : "p-density-6 text-center"
+        "flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden rounded-xl border border-border bg-background text-sm shadow-sm",
+        className
       ),
-      children
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": "Session detail view",
+            className: "flex shrink-0 overflow-x-auto border-b border-border px-density-2",
+            children: TABS.map((item) => /* @__PURE__ */ jsx(
+              TabButton,
+              {
+                active: tab === item.id,
+                onClick: () => setTab(item.id),
+                label: item.label,
+                icon: item.icon,
+                variant: "underline",
+                className: "shrink-0 py-density-2 [&_svg]:text-muted-foreground"
+              },
+              item.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: tab === "transcript" ? /* @__PURE__ */ jsx(
+            SessionViewer,
+            {
+              session,
+              scrollable: true,
+              showRowMetadata: true,
+              ...transcriptProps,
+              className: transcriptClassName
+            }
+          ) : /* @__PURE__ */ jsx(
+            SessionInspectorPanel,
+            {
+              tab,
+              detail: void 0,
+              session
+            }
+          ) }),
+          composer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-density-3", children: composer }) : null
+        ] })
+      ]
     }
   );
 }
-function kv(label, value) {
+function tabCount(tab, session) {
+  var _a, _b, _c, _d, _e, _f;
+  switch (tab) {
+    case "files":
+      return (((_b = (_a = session == null ? void 0 : session.files) == null ? void 0 : _a.read) == null ? void 0 : _b.length) ?? 0) + (((_d = (_c = session == null ? void 0 : session.files) == null ? void 0 : _c.written) == null ? void 0 : _d.length) ?? 0);
+    case "approvals":
+      return (((_e = session == null ? void 0 : session.approvals) == null ? void 0 : _e.approved) ?? 0) + (((_f = session == null ? void 0 : session.approvals) == null ? void 0 : _f.denied) ?? 0);
+    default:
+      return void 0;
+  }
+}
+function singleSessionCollection(session) {
+  const id = session.id || "session";
   return {
-    key: String(label),
-    label,
-    value: value === void 0 || value === null || value === "" ? muted("-") : value,
-    hidden: value === void 0 || value === null || value === ""
+    kind: "session-collection",
+    id,
+    currentSessionId: id,
+    sessions: [{ id, session }]
   };
 }
-function muted(value) {
-  return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: value });
+function tabLabel(tab, label, session) {
+  if (tab !== "costs") return label;
+  const total = costTotal(session == null ? void 0 : session.cost);
+  return total ? `${label} ${formatCost(total)}` : label;
 }
 function asUnifiedSession(session) {
-  if (typeof session !== "object" || session === null || Array.isArray(session)) return void 0;
+  if (typeof session !== "object" || session === null || Array.isArray(session))
+    return void 0;
   return session;
 }
-function jsonSource(value) {
-  if (typeof value === "string") {
-    try {
-      return JSON.stringify(JSON.parse(value), null, 2);
-    } catch {
-      return value;
-    }
-  }
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch {
-    return String(value);
-  }
-}
-function formatTime(value) {
-  if (!value) return "";
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString();
-}
-function timeRange(start, end) {
-  const parts = [formatTime(start), formatTime(end)].filter(Boolean);
-  return parts.length ? parts.join(" - ") : muted("-");
-}
-function durationLabel(start, end) {
-  if (!start || !end) return "";
-  const s = new Date(start).getTime();
-  const e = new Date(end).getTime();
-  if (Number.isNaN(s) || Number.isNaN(e) || e < s) return "";
-  const seconds = Math.round((e - s) / 1e3);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const rem = seconds % 60;
-  if (minutes < 60) return rem ? `${minutes}m ${rem}s` : `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  const min = minutes % 60;
-  return min ? `${hours}h ${min}m` : `${hours}h`;
-}
-function usageLabel(usage) {
-  const total = tokenTotal(usage);
-  if (!total) return muted("-");
-  return `${compactTokens(total)} tokens`;
-}
-function costLabel(cost) {
-  const total = costTotal(cost);
-  if (!total) return muted("-");
-  return formatCost(total);
-}
-function countLabel(count, label) {
-  if (!count) return muted("-");
-  return `${count} ${label}${count === 1 ? "" : "s"}`;
-}
-function contextLabel(context) {
-  if (!context) return muted("-");
-  const used = compactTokens(context.usedTokens);
-  const total = compactTokens(context.windowTokens);
-  return total ? `${context.freePercent}% free (${used}/${total})` : `${context.freePercent}% free`;
-}
-function gitLabel(git) {
-  if (!git) return "";
-  return [git.branch, git.commit, git.worktree, git.diff ? "diff" : ""].filter(Boolean).join(" ");
-}
-function liveLabel(live) {
-  if (!live) return "";
-  return [live.status || (live.active ? "active" : "inactive"), live.pid ? `pid ${live.pid}` : "", live.command].filter(Boolean).join(" - ");
-}
-function healthLabel(health) {
-  if (!(health == null ? void 0 : health.length)) return "";
-  return health.map((item) => `${item.severity}:${item.kind}`).join(", ");
-}
 export {
   SessionInspector
 };