@flanksource/clicky-ui 0.3.36 → 0.3.38

package/dist/data/ai/SessionInspector.hierarchy.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionInspector.hierarchy.js","sources":["../../../src/data/ai/SessionInspector.hierarchy.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { UiChevronDown, UiRepeat, UiRobotAi } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { formatDuration } from \"../../lib/format\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { StatusDot } from \"../cells/StatusDot\";\nimport { formatRelativeTime } from \"../cells/timestamp-format\";\nimport { Tree } from \"../Tree\";\nimport { Icon } from \"../Icon\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport { effortIcon, WORKFLOW_PHASES } from \"./agent-action-icons\";\nimport { SPEC_RUNTIME_FAMILIES } from \"../runtime/runtime-mode\";\nimport { formatCost } from \"./session-cost\";\nimport {\n  hierarchyCheckState,\n  selectedSessionCount,\n  sessionKey,\n  type SessionCollectionInput,\n  type SessionCollectionItem,\n  type SessionHierarchyNode,\n} from \"./SessionInspector.collection\";\nimport type { SessionHierarchyState } from \"./SessionInspector.hierarchy-state\";\n\nexport function SessionHierarchyPicker({\n  collection,\n  state,\n  renderSessionActions,\n}: {\n  collection: SessionCollectionInput;\n  state: SessionHierarchyState;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n}) {\n  const selected = selectedSessionCount(state.roots, state.checked);\n  const total = collection.sessions.length;\n  const label = `${selected} of ${total} session${total === 1 ? \"\" : \"s\"}`;\n  return (\n    <DropdownMenu\n      className=\"shrink-0\"\n      align=\"left\"\n      menuLabel=\"Session content\"\n      menuClassName=\"h-[min(58vh,34rem)] w-[min(42rem,calc(100vw-2rem))] overflow-hidden p-2\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`Select session content: ${label}`}\n          className=\"flex h-control-h max-w-56 items-center gap-density-2 rounded-md border border-border bg-background px-density-2 text-left text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted/40\"\n        >\n          <Icon\n            icon={UiRobotAi}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n          <Icon\n            icon={UiChevronDown}\n            className=\"size-3.5 shrink-0 text-muted-foreground\"\n          />\n        </button>\n      }\n    >\n      {() => (\n        <Tree\n          roots={state.roots}\n          ariaLabel=\"Session content\"\n          className=\"h-full\"\n          showControls\n          getKey={(node) => node.key}\n          getChildren={(node) => node.children}\n          getSearchText={(node) =>\n            [node.label, node.model, node.effort, node.mode]\n              .filter(Boolean)\n              .join(\" \")\n          }\n          defaultOpen={(node) =>\n            node.key === sessionKey(collection.currentSessionId)\n          }\n          hasMoreChildren={(node) =>\n            node.kind === \"session\" &&\n            Boolean(\n              node.item &&\n              !state.loadedSessionIds.has(node.item.id) &&\n              collection.loadSession,\n            )\n          }\n          loadChildren={state.loadChildren}\n          renderRow={({ node, loading, error }) => {\n            const message = error\n              ? String(error)\n              : state.errors.get(node.itemId);\n            const actions =\n              node.kind === \"session\" && node.item\n                ? renderSessionActions?.(node.item)\n                : undefined;\n            return (\n              <HierarchyRow\n                node={node}\n                checkState={hierarchyCheckState(node, state.checked)}\n                loading={loading || state.loading.has(node.itemId)}\n                onChecked={(include) => {\n                  void state\n                    .setBranchChecked(node, include)\n                    .catch(() => undefined);\n                }}\n                {...(message ? { error: message } : {})}\n                {...(actions ? { actions } : {})}\n              />\n            );\n          }}\n        />\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction HierarchyRow({\n  node,\n  checkState,\n  loading,\n  error,\n  onChecked,\n  actions,\n}: {\n  node: SessionHierarchyNode;\n  checkState: \"checked\" | \"indeterminate\" | \"unchecked\";\n  loading: boolean;\n  error?: string;\n  onChecked: (include: boolean) => void;\n  actions?: ReactNode;\n}) {\n  const ProviderIcon =\n    node.kind === \"session\" ? providerIcon(node.provider) : undefined;\n  const EffortIcon = node.effort ? effortIcon(node.effort) : undefined;\n  const ModeIcon = node.mode ? modeIcon(node.mode) : undefined;\n  const NodeIcon = node.kind === \"turn\" ? UiRepeat : UiRobotAi;\n  const age = useRelativeAge(node.updatedAt);\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-density-2 py-1\">\n      <HierarchyCheckbox\n        label={`Include ${node.label}`}\n        state={checkState}\n        onChange={onChecked}\n      />\n      <Icon\n        icon={ProviderIcon ?? NodeIcon}\n        className={cn(\n          \"size-4 shrink-0 text-muted-foreground\",\n          ProviderIcon && providerIconColor(node.provider),\n        )}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex min-w-0 items-center gap-density-2\">\n          <span className=\"truncate text-xs font-medium text-foreground\">\n            {node.label}\n          </span>\n          {node.status ? (\n            <span className=\"inline-flex items-center gap-1 text-[10px] text-muted-foreground\">\n              <StatusDot status={statusDotStatus(node.status)} size=\"xs\" />\n              {node.status}\n            </span>\n          ) : null}\n        </div>\n        <div className=\"flex min-w-0 flex-wrap gap-x-density-2 text-[10px] text-muted-foreground\">\n          {node.model ? <span>{node.model}</span> : null}\n          {node.effort ? (\n            <span className=\"inline-flex items-center gap-0.5\">\n              {EffortIcon ? (\n                <Icon\n                  icon={EffortIcon.icon}\n                  title={`${EffortIcon.label} effort`}\n                  className={cn(\"size-3\", effortToneClass(EffortIcon.tone))}\n                />\n              ) : null}\n              {node.effort} effort\n            </span>\n          ) : null}\n          {ModeIcon?.icon ? (\n            <Icon\n              icon={ModeIcon.icon}\n              title={`${ModeIcon.label} mode`}\n              className=\"size-3 text-muted-foreground\"\n            />\n          ) : null}\n          {node.pid ? <span>pid {node.pid}</span> : null}\n          {node.durationMs !== undefined ? (\n            <span>{formatDuration(node.durationMs)}</span>\n          ) : null}\n          {age ? <span title={node.updatedAt}>{age}</span> : null}\n          <span>{node.cost ? formatCost(node.cost) : \"-\"}</span>\n          {loading ? <span>Loading…</span> : null}\n          {error ? (\n            <span role=\"alert\" className=\"text-destructive\">\n              {error}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {actions ? (\n        <span className=\"shrink-0\" onClick={(event) => event.stopPropagation()}>\n          {actions}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nconst EFFORT_TONE_CLASS = {\n  sky: \"text-sky-600\",\n  amber: \"text-amber-600\",\n  violet: \"text-violet-600\",\n  emerald: \"text-emerald-600\",\n  teal: \"text-teal-600\",\n  orange: \"text-orange-600\",\n  rose: \"text-rose-600\",\n  indigo: \"text-indigo-600\",\n  fuchsia: \"text-fuchsia-600\",\n  pink: \"text-pink-600\",\n  slate: \"text-slate-500\",\n} as const;\n\nfunction effortToneClass(tone: keyof typeof EFFORT_TONE_CLASS) {\n  return EFFORT_TONE_CLASS[tone];\n}\n\nfunction modeIcon(mode: string) {\n  const key = mode.trim().toLowerCase();\n  if (key in WORKFLOW_PHASES) {\n    return WORKFLOW_PHASES[key as keyof typeof WORKFLOW_PHASES];\n  }\n  for (const family of SPEC_RUNTIME_FAMILIES) {\n    const match = family.modes.find(\n      (candidate) => candidate.id === key,\n    );\n    if (match) return { icon: match.icon, label: match.label };\n  }\n  return undefined;\n}\n\nfunction statusDotStatus(status: string) {\n  switch (status.trim().toLowerCase()) {\n    case \"completed\":\n    case \"succeeded\":\n      return \"success\" as const;\n    case \"failed\":\n    case \"cancelled\":\n    case \"zombie\":\n      return \"error\" as const;\n    case \"planning\":\n    case \"ask\":\n    case \"stopping\":\n      return \"warning\" as const;\n    default:\n      return \"info\" as const;\n  }\n}\n\nfunction useRelativeAge(updatedAt: string | undefined) {\n  const [, setTick] = useState(0);\n  useEffect(() => {\n    if (!updatedAt) return undefined;\n    const timer = window.setInterval(\n      () => setTick((value) => value + 1),\n      30_000,\n    );\n    return () => window.clearInterval(timer);\n  }, [updatedAt]);\n  if (!updatedAt) return \"\";\n  const date = new Date(updatedAt);\n  return Number.isNaN(date.getTime()) ? \"\" : formatRelativeTime(date);\n}\n\nfunction HierarchyCheckbox({\n  label,\n  state,\n  onChange,\n}: {\n  label: string;\n  state: \"checked\" | \"indeterminate\" | \"unchecked\";\n  onChange: (checked: boolean) => void;\n}) {\n  const ref = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (ref.current) ref.current.indeterminate = state === \"indeterminate\";\n  }, [state]);\n  return (\n    <input\n      ref={ref}\n      type=\"checkbox\"\n      aria-label={label}\n      checked={state === \"checked\"}\n      onClick={(event) => event.stopPropagation()}\n      onChange={(event) => onChange(event.target.checked)}\n      className=\"size-3.5 shrink-0 accent-primary\"\n    />\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SessionInspector.hierarchy.js","sources":["../../../src/data/ai/SessionInspector.hierarchy.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { UiChevronDown, UiRepeat, UiRobotAi } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { formatDuration } from \"../../lib/format\";\nimport { DropdownMenu } from \"../../overlay/DropdownMenu\";\nimport { StatusDot } from \"../cells/StatusDot\";\nimport { formatRelativeTime } from \"../cells/timestamp-format\";\nimport { Tree } from \"../Tree\";\nimport { Icon } from \"../Icon\";\nimport { providerIcon, providerIconColor } from \"../chat/provider-icons\";\nimport { effortIcon, WORKFLOW_PHASES } from \"./agent-action-icons\";\nimport { SPEC_RUNTIME_FAMILIES } from \"../runtime/runtime-mode\";\nimport { formatCost } from \"./session-cost\";\nimport {\n  hierarchyCheckState,\n  selectedSessionCount,\n  sessionKey,\n  type SessionCollectionInput,\n  type SessionCollectionItem,\n  type SessionHierarchyNode,\n} from \"./SessionInspector.collection\";\nimport type { SessionHierarchyState } from \"./SessionInspector.hierarchy-state\";\n\nexport function SessionHierarchyPicker({\n  collection,\n  state,\n  renderSessionActions,\n}: {\n  collection: SessionCollectionInput;\n  state: SessionHierarchyState;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n}) {\n  const selected = selectedSessionCount(state.roots, state.checked);\n  const total = collection.sessions.length;\n  const label = `${selected} of ${total} session${total === 1 ? \"\" : \"s\"}`;\n  return (\n    <DropdownMenu\n      className=\"shrink-0\"\n      align=\"left\"\n      menuLabel=\"Session content\"\n      menuClassName=\"h-[min(58vh,34rem)] w-[min(42rem,calc(100vw-2rem))] overflow-hidden p-2\"\n      trigger={\n        <button\n          type=\"button\"\n          aria-label={`Select session content: ${label}`}\n          className=\"flex h-control-h max-w-56 items-center gap-density-2 rounded-md border border-border bg-background px-density-2 text-left text-xs font-medium text-foreground shadow-sm transition-colors hover:bg-muted/40\"\n        >\n          <Icon\n            icon={UiRobotAi}\n            className=\"size-4 shrink-0 text-muted-foreground\"\n          />\n          <span className=\"min-w-0 flex-1 truncate\">{label}</span>\n          <Icon\n            icon={UiChevronDown}\n            className=\"size-3.5 shrink-0 text-muted-foreground\"\n          />\n        </button>\n      }\n    >\n      {() => (\n        <SessionHierarchyTree\n          collection={collection}\n          state={state}\n          {...(renderSessionActions ? { renderSessionActions } : {})}\n          className=\"h-full\"\n        />\n      )}\n    </DropdownMenu>\n  );\n}\n\nexport function SessionHierarchyTree({\n  collection,\n  state,\n  renderSessionActions,\n  className,\n}: {\n  collection: SessionCollectionInput;\n  state: SessionHierarchyState;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n  className?: string;\n}) {\n  return (\n    <Tree\n      roots={state.roots}\n      ariaLabel=\"Session content\"\n      {...(className ? { className } : {})}\n      showControls\n      getKey={(node) => node.key}\n      getChildren={(node) => node.children}\n      getSearchText={(node) =>\n        [node.label, node.model, node.effort, node.mode]\n          .filter(Boolean)\n          .join(\" \")\n      }\n      defaultOpen={(node) =>\n        node.key === sessionKey(collection.currentSessionId)\n      }\n      hasMoreChildren={(node) =>\n        node.kind === \"session\" &&\n        Boolean(\n          node.item &&\n          !state.loadedSessionIds.has(node.item.id) &&\n          collection.loadSession,\n        )\n      }\n      loadChildren={state.loadChildren}\n      renderRow={({ node, loading, error }) => {\n        const message = error ? String(error) : state.errors.get(node.itemId);\n        const actions =\n          node.kind === \"session\" && node.item\n            ? renderSessionActions?.(node.item)\n            : undefined;\n        return (\n          <HierarchyRow\n            node={node}\n            checkState={hierarchyCheckState(node, state.checked)}\n            loading={loading || state.loading.has(node.itemId)}\n            onChecked={(include) => {\n              void state.setBranchChecked(node, include).catch(() => undefined);\n            }}\n            {...(message ? { error: message } : {})}\n            {...(actions ? { actions } : {})}\n          />\n        );\n      }}\n    />\n  );\n}\n\nfunction HierarchyRow({\n  node,\n  checkState,\n  loading,\n  error,\n  onChecked,\n  actions,\n}: {\n  node: SessionHierarchyNode;\n  checkState: \"checked\" | \"indeterminate\" | \"unchecked\";\n  loading: boolean;\n  error?: string;\n  onChecked: (include: boolean) => void;\n  actions?: ReactNode;\n}) {\n  const ProviderIcon =\n    node.kind === \"session\" ? providerIcon(node.provider) : undefined;\n  const EffortIcon = node.effort ? effortIcon(node.effort) : undefined;\n  const ModeIcon = node.mode ? modeIcon(node.mode) : undefined;\n  const NodeIcon = node.kind === \"turn\" ? UiRepeat : UiRobotAi;\n  const age = useRelativeAge(node.updatedAt);\n  return (\n    <div className=\"flex min-w-0 flex-1 items-center gap-density-2 py-1\">\n      <HierarchyCheckbox\n        label={`Include ${node.label}`}\n        state={checkState}\n        onChange={onChecked}\n      />\n      <Icon\n        icon={ProviderIcon ?? NodeIcon}\n        className={cn(\n          \"size-4 shrink-0 text-muted-foreground\",\n          ProviderIcon && providerIconColor(node.provider),\n        )}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex min-w-0 items-center gap-density-2\">\n          <span className=\"truncate text-xs font-medium text-foreground\">\n            {node.label}\n          </span>\n          {node.status ? (\n            <span className=\"inline-flex items-center gap-1 text-[10px] text-muted-foreground\">\n              <StatusDot status={statusDotStatus(node.status)} size=\"xs\" />\n              {node.status}\n            </span>\n          ) : null}\n        </div>\n        <div className=\"flex min-w-0 flex-wrap gap-x-density-2 text-[10px] text-muted-foreground\">\n          {node.model ? <span>{node.model}</span> : null}\n          {node.effort ? (\n            <span className=\"inline-flex items-center gap-0.5\">\n              {EffortIcon ? (\n                <Icon\n                  icon={EffortIcon.icon}\n                  title={`${EffortIcon.label} effort`}\n                  className={cn(\"size-3\", effortToneClass(EffortIcon.tone))}\n                />\n              ) : null}\n              {node.effort} effort\n            </span>\n          ) : null}\n          {ModeIcon?.icon ? (\n            <Icon\n              icon={ModeIcon.icon}\n              title={`${ModeIcon.label} mode`}\n              className=\"size-3 text-muted-foreground\"\n            />\n          ) : null}\n          {node.pid ? <span>pid {node.pid}</span> : null}\n          {node.durationMs !== undefined ? (\n            <span>{formatDuration(node.durationMs)}</span>\n          ) : null}\n          {age ? <span title={node.updatedAt}>{age}</span> : null}\n          <span>{node.cost ? formatCost(node.cost) : \"-\"}</span>\n          {loading ? <span>Loading…</span> : null}\n          {error ? (\n            <span role=\"alert\" className=\"text-destructive\">\n              {error}\n            </span>\n          ) : null}\n        </div>\n      </div>\n      {actions ? (\n        <span className=\"shrink-0\" onClick={(event) => event.stopPropagation()}>\n          {actions}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nconst EFFORT_TONE_CLASS = {\n  sky: \"text-sky-600\",\n  amber: \"text-amber-600\",\n  violet: \"text-violet-600\",\n  emerald: \"text-emerald-600\",\n  teal: \"text-teal-600\",\n  orange: \"text-orange-600\",\n  rose: \"text-rose-600\",\n  indigo: \"text-indigo-600\",\n  fuchsia: \"text-fuchsia-600\",\n  pink: \"text-pink-600\",\n  slate: \"text-slate-500\",\n} as const;\n\nfunction effortToneClass(tone: keyof typeof EFFORT_TONE_CLASS) {\n  return EFFORT_TONE_CLASS[tone];\n}\n\nfunction modeIcon(mode: string) {\n  const key = mode.trim().toLowerCase();\n  if (key in WORKFLOW_PHASES) {\n    return WORKFLOW_PHASES[key as keyof typeof WORKFLOW_PHASES];\n  }\n  for (const family of SPEC_RUNTIME_FAMILIES) {\n    const match = family.modes.find((candidate) => candidate.id === key);\n    if (match) return { icon: match.icon, label: match.label };\n  }\n  return undefined;\n}\n\nfunction statusDotStatus(status: string) {\n  switch (status.trim().toLowerCase()) {\n    case \"completed\":\n    case \"succeeded\":\n      return \"success\" as const;\n    case \"failed\":\n    case \"cancelled\":\n    case \"zombie\":\n      return \"error\" as const;\n    case \"planning\":\n    case \"ask\":\n    case \"stopping\":\n      return \"warning\" as const;\n    default:\n      return \"info\" as const;\n  }\n}\n\nfunction useRelativeAge(updatedAt: string | undefined) {\n  const [, setTick] = useState(0);\n  useEffect(() => {\n    if (!updatedAt) return undefined;\n    const timer = window.setInterval(\n      () => setTick((value) => value + 1),\n      30_000,\n    );\n    return () => window.clearInterval(timer);\n  }, [updatedAt]);\n  if (!updatedAt) return \"\";\n  const date = new Date(updatedAt);\n  return Number.isNaN(date.getTime()) ? \"\" : formatRelativeTime(date);\n}\n\nfunction HierarchyCheckbox({\n  label,\n  state,\n  onChange,\n}: {\n  label: string;\n  state: \"checked\" | \"indeterminate\" | \"unchecked\";\n  onChange: (checked: boolean) => void;\n}) {\n  const ref = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (ref.current) ref.current.indeterminate = state === \"indeterminate\";\n  }, [state]);\n  return (\n    <input\n      ref={ref}\n      type=\"checkbox\"\n      aria-label={label}\n      checked={state === \"checked\"}\n      onClick={(event) => event.stopPropagation()}\n      onChange={(event) => onChange(event.target.checked)}\n      className=\"size-3.5 shrink-0 accent-primary\"\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,WAAW,qBAAqB,MAAM,OAAO,MAAM,OAAO;AAChE,QAAM,QAAQ,WAAW,SAAS;AAClC,QAAM,QAAQ,GAAG,QAAQ,OAAO,KAAK,WAAW,UAAU,IAAI,KAAK,GAAG;AACtE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAM;AAAA,MACN,WAAU;AAAA,MACV,eAAc;AAAA,MACd,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,2BAA2B,KAAK;AAAA,UAC5C,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEZ,oBAAC,QAAA,EAAK,WAAU,2BAA2B,UAAA,OAAM;AAAA,YACjD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MAAA;AAAA,MAIH,UAAA,MACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAI,uBAAuB,EAAE,qBAAA,IAAyB,CAAA;AAAA,UACvD,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAIR;AAEO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM;AAAA,MACb,WAAU;AAAA,MACT,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA;AAAA,MACjC,cAAY;AAAA,MACZ,QAAQ,CAAC,SAAS,KAAK;AAAA,MACvB,aAAa,CAAC,SAAS,KAAK;AAAA,MAC5B,eAAe,CAAC,SACd,CAAC,KAAK,OAAO,KAAK,OAAO,KAAK,QAAQ,KAAK,IAAI,EAC5C,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEb,aAAa,CAAC,SACZ,KAAK,QAAQ,WAAW,WAAW,gBAAgB;AAAA,MAErD,iBAAiB,CAAC,SAChB,KAAK,SAAS,aACd;AAAA,QACE,KAAK,QACL,CAAC,MAAM,iBAAiB,IAAI,KAAK,KAAK,EAAE,KACxC,WAAW;AAAA,MAAA;AAAA,MAGf,cAAc,MAAM;AAAA,MACpB,WAAW,CAAC,EAAE,MAAM,SAAS,YAAY;AACvC,cAAM,UAAU,QAAQ,OAAO,KAAK,IAAI,MAAM,OAAO,IAAI,KAAK,MAAM;AACpE,cAAM,UACJ,KAAK,SAAS,aAAa,KAAK,OAC5B,6DAAuB,KAAK,QAC5B;AACN,eACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,YAAY,oBAAoB,MAAM,MAAM,OAAO;AAAA,YACnD,SAAS,WAAW,MAAM,QAAQ,IAAI,KAAK,MAAM;AAAA,YACjD,WAAW,CAAC,YAAY;AACtB,mBAAK,MAAM,iBAAiB,MAAM,OAAO,EAAE,MAAM,MAAM,MAAS;AAAA,YAClE;AAAA,YACC,GAAI,UAAU,EAAE,OAAO,QAAA,IAAY,CAAA;AAAA,YACnC,GAAI,UAAU,EAAE,YAAY,CAAA;AAAA,UAAC;AAAA,QAAA;AAAA,MAGpC;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,eACJ,KAAK,SAAS,YAAY,aAAa,KAAK,QAAQ,IAAI;AAC1D,QAAM,aAAa,KAAK,SAAS,WAAW,KAAK,MAAM,IAAI;AAC3D,QAAM,WAAW,KAAK,OAAO,SAAS,KAAK,IAAI,IAAI;AACnD,QAAM,WAAW,KAAK,SAAS,SAAS,WAAW;AACnD,QAAM,MAAM,eAAe,KAAK,SAAS;AACzC,SACE,qBAAC,OAAA,EAAI,WAAU,uDACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,WAAW,KAAK,KAAK;AAAA,QAC5B,OAAO;AAAA,QACP,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,gBAAgB;AAAA,QACtB,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,kBAAkB,KAAK,QAAQ;AAAA,QAAA;AAAA,MACjD;AAAA,IAAA;AAAA,IAEF,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,2CACb,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,gDACb,UAAA,KAAK,OACR;AAAA,QACC,KAAK,SACJ,qBAAC,QAAA,EAAK,WAAU,oEACd,UAAA;AAAA,UAAA,oBAAC,aAAU,QAAQ,gBAAgB,KAAK,MAAM,GAAG,MAAK,MAAK;AAAA,UAC1D,KAAK;AAAA,QAAA,EAAA,CACR,IACE;AAAA,MAAA,GACN;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,4EACZ,UAAA;AAAA,QAAA,KAAK,QAAQ,oBAAC,QAAA,EAAM,UAAA,KAAK,OAAM,IAAU;AAAA,QACzC,KAAK,SACJ,qBAAC,QAAA,EAAK,WAAU,oCACb,UAAA;AAAA,UAAA,aACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,WAAW;AAAA,cACjB,OAAO,GAAG,WAAW,KAAK;AAAA,cAC1B,WAAW,GAAG,UAAU,gBAAgB,WAAW,IAAI,CAAC;AAAA,YAAA;AAAA,UAAA,IAExD;AAAA,UACH,KAAK;AAAA,UAAO;AAAA,QAAA,EAAA,CACf,IACE;AAAA,SACH,qCAAU,QACT;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,SAAS;AAAA,YACf,OAAO,GAAG,SAAS,KAAK;AAAA,YACxB,WAAU;AAAA,UAAA;AAAA,QAAA,IAEV;AAAA,QACH,KAAK,MAAM,qBAAC,QAAA,EAAK,UAAA;AAAA,UAAA;AAAA,UAAK,KAAK;AAAA,QAAA,EAAA,CAAI,IAAU;AAAA,QACzC,KAAK,eAAe,SACnB,oBAAC,UAAM,UAAA,eAAe,KAAK,UAAU,EAAA,CAAE,IACrC;AAAA,QACH,MAAM,oBAAC,QAAA,EAAK,OAAO,KAAK,WAAY,eAAI,IAAU;AAAA,QACnD,oBAAC,UAAM,UAAA,KAAK,OAAO,WAAW,KAAK,IAAI,IAAI,KAAI;AAAA,QAC9C,UAAU,oBAAC,QAAA,EAAK,UAAA,WAAA,CAAQ,IAAU;AAAA,QAClC,4BACE,QAAA,EAAK,MAAK,SAAQ,WAAU,oBAC1B,iBACH,IACE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA,GACF;AAAA,IACC,UACC,oBAAC,QAAA,EAAK,WAAU,YAAW,SAAS,CAAC,UAAU,MAAM,gBAAA,GAClD,UAAA,QAAA,CACH,IACE;AAAA,EAAA,GACN;AAEJ;AAEA,MAAM,oBAAoB;AAAA,EACxB,KAAK;AAAA,EACL,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AACT;AAEA,SAAS,gBAAgB,MAAsC;AAC7D,SAAO,kBAAkB,IAAI;AAC/B;AAEA,SAAS,SAAS,MAAc;AAC9B,QAAM,MAAM,KAAK,KAAA,EAAO,YAAA;AACxB,MAAI,OAAO,iBAAiB;AAC1B,WAAO,gBAAgB,GAAmC;AAAA,EAC5D;AACA,aAAW,UAAU,uBAAuB;AAC1C,UAAM,QAAQ,OAAO,MAAM,KAAK,CAAC,cAAc,UAAU,OAAO,GAAG;AACnE,QAAI,cAAc,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,MAAA;AAAA,EACrD;AACA,SAAO;AACT;AAEA,SAAS,gBAAgB,QAAgB;AACvC,UAAQ,OAAO,KAAA,EAAO,YAAA,GAAY;AAAA,IAChC,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EAAA;AAEb;AAEA,SAAS,eAAe,WAA+B;AACrD,QAAM,GAAG,OAAO,IAAI,SAAS,CAAC;AAC9B,YAAU,MAAM;AACd,QAAI,CAAC,UAAW,QAAO;AACvB,UAAM,QAAQ,OAAO;AAAA,MACnB,MAAM,QAAQ,CAAC,UAAU,QAAQ,CAAC;AAAA,MAClC;AAAA,IAAA;AAEF,WAAO,MAAM,OAAO,cAAc,KAAK;AAAA,EACzC,GAAG,CAAC,SAAS,CAAC;AACd,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,OAAO,IAAI,KAAK,SAAS;AAC/B,SAAO,OAAO,MAAM,KAAK,QAAA,CAAS,IAAI,KAAK,mBAAmB,IAAI;AACpE;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,MAAM,OAAyB,IAAI;AACzC,YAAU,MAAM;AACd,QAAI,IAAI,QAAS,KAAI,QAAQ,gBAAgB,UAAU;AAAA,EACzD,GAAG,CAAC,KAAK,CAAC;AACV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,SAAS,UAAU;AAAA,MACnB,SAAS,CAAC,UAAU,MAAM,gBAAA;AAAA,MAC1B,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,OAAO;AAAA,MAClD,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;"}

package/dist/data/ai/SessionInspector.js

@@ -1,33 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, useState, useEffect } from "react";
 import { cn } from "../../lib/utils.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 { CompactSessionInspectorToolbar } from "./SessionInspector.compact.js";
+import { InspectorTabs } from "./SessionInspector.tabs.js";
+import { hasStructuredOutput, inspectorTabs } from "./SessionInspector.tabs.model.js";
 import { SessionTranscript } from "./SessionInspector.transcript.js";
 import { isSessionCollectionInput } from "./SessionInspector.collection.js";
-import { SessionHierarchyPicker } from "./SessionInspector.hierarchy.js";
+import { SessionHierarchyTree, SessionHierarchyPicker } from "./SessionInspector.hierarchy.js";
 import { useSessionHierarchy } from "./SessionInspector.hierarchy-state.js";
-import { pendingApprovalRequests } from "./SessionInspector.approvals-model.js";
 import { SessionViewer } from "./SessionViewer.js";
-import { UiChatDots } from "../../icons/components/UiChatDots.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 { formatCost } from "../../lib/tokens.js";
-const TABS = [
-  { id: "transcript", label: "Transcript", icon: UiChatDots },
-  { id: "files", label: "Files", icon: UiFileText },
-  { id: "plan", label: "Plan", icon: UiStrategy },
-  { id: "approvals", label: "Approvals", icon: UiSealCheck },
-  { id: "costs", label: "Costs", icon: UiCoins },
-  { id: "metadata", label: "Metadata", icon: UiListDashes },
-  { id: "raw", label: "Raw", icon: UiBraces }
-];
+import { getSessionMetadata } from "./SessionViewer.model.js";
 function SessionInspector({
   session,
   className,
@@ -36,7 +20,10 @@ function SessionInspector({
   renderSessionActions,
   onPlanChange,
   onResolveApproval,
-  composer
+  composer,
+  layout = "default",
+  metadata,
+  toolbarActions
 }) {
   const detail = useMemo(
     () => isSessionCollectionInput(session) ? void 0 : asUnifiedSession(session),
@@ -53,7 +40,10 @@ function SessionInspector({
       ...renderSessionActions ? { renderSessionActions } : {},
       ...onPlanChange ? { onPlanChange } : {},
       ...onResolveApproval ? { onResolveApproval } : {},
-      ...composer ? { composer } : {}
+      ...composer ? { composer } : {},
+      ...layout === "compact" ? { layout } : {},
+      ...metadata ? { metadata } : {},
+      ...toolbarActions ? { toolbarActions } : {}
     };
     return /* @__PURE__ */ jsx(
       CollectionSessionInspector,
@@ -71,7 +61,10 @@ function SessionInspector({
       defaultTab,
       ...className ? { className } : {},
       ...transcriptProps ? { transcriptProps } : {},
-      ...composer ? { composer } : {}
+      ...composer ? { composer } : {},
+      ...layout === "compact" ? { layout } : {},
+      ...metadata ? { metadata } : {},
+      ...toolbarActions ? { toolbarActions } : {}
     }
   );
 }
@@ -83,100 +76,169 @@ function CollectionSessionInspector({
   renderSessionActions,
   onPlanChange,
   onResolveApproval,
-  composer
+  composer,
+  layout = "default",
+  metadata,
+  toolbarActions
 }) {
   const hierarchy = useSessionHierarchy(collection);
-  const [tab, setTab] = useState(defaultTab);
+  const compact = layout === "compact";
+  const [menuHost, setMenuHost] = useState(null);
+  const outputVisible = hasStructuredOutput(hierarchy.current);
+  const [tab, setTab] = useState(
+    defaultTab === "output" && !outputVisible ? "transcript" : defaultTab
+  );
   const transcriptClassName = cn("h-full", transcriptProps == null ? void 0 : transcriptProps.className);
   const panelDetail = tab === "costs" ? hierarchy.filtered : hierarchy.current;
+  const compactMetadata = metadata ?? getSessionMetadata(hierarchy.current);
+  const compactTabs = inspectorTabs(
+    outputVisible,
+    hierarchy.current,
+    hierarchy.filtered
+  );
+  const compactMenuHeader = /* @__PURE__ */ jsxs("div", { className: "w-[min(38rem,calc(100vw-4rem))]", children: [
+    /* @__PURE__ */ jsx("p", { className: "px-1 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Session content" }),
+    /* @__PURE__ */ jsx(
+      SessionHierarchyTree,
+      {
+        collection,
+        state: hierarchy,
+        ...renderSessionActions ? { renderSessionActions } : {},
+        className: "h-[min(32rem,52vh)]"
+      }
+    ),
+    (transcriptProps == null ? void 0 : transcriptProps.menuHeader) ? /* @__PURE__ */ jsx("div", { className: "mt-1 border-t border-border pt-1", children: transcriptProps.menuHeader }) : null
+  ] });
+  const compactTranscriptProps = compact ? {
+    ...transcriptProps,
+    menuContainer: menuHost,
+    menuHeader: compactMenuHeader,
+    showMenu: menuHost !== null && (transcriptProps == null ? void 0 : transcriptProps.showMenu) !== false
+  } : transcriptProps;
+  useEffect(() => {
+    if (tab === "output" && !outputVisible) setTab("transcript");
+  }, [outputVisible, tab]);
   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",
+        "flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden bg-background text-sm",
+        compact ? "@container rounded-none border-0 shadow-none" : "rounded-xl border border-border shadow-sm",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(SessionInspectorHeader, { session: hierarchy.current }),
-        /* @__PURE__ */ jsx(
-          "div",
+        compact ? /* @__PURE__ */ jsx(
+          CompactSessionInspectorToolbar,
           {
-            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 } : {}
-              }
-            )
+            tabs: compactTabs,
+            activeTab: tab,
+            onSelect: (next) => setTab(next),
+            onMenuHost: setMenuHost,
+            ...compactMetadata ? { metadata: compactMetadata } : {},
+            ...toolbarActions ? { toolbarActions } : {}
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsxs(Fragment, { 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(InspectorTabs, { tab, tabs: compactTabs, onSelect: setTab })
+        ] }),
+        /* @__PURE__ */ jsxs(
           "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 badge = tabBadge(item.id, hierarchy.current);
-              return /* @__PURE__ */ jsx(
-                TabButton,
+            className: cn(
+              "min-h-0 flex-1 overflow-y-auto",
+              !compact && "grid lg:grid-cols-[minmax(0,1fr)_18rem] lg:overflow-hidden"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "main",
                 {
-                  active: tab === item.id,
-                  onClick: () => setTab(item.id),
-                  label: tabLabel(
-                    item.id,
-                    item.label,
-                    item.id === "costs" ? hierarchy.filtered : hierarchy.current
+                  className: cn(
+                    "flex min-w-0 flex-col",
+                    compact ? "min-h-0" : "min-h-[28rem] lg:min-h-0"
                   ),
-                  icon: item.icon,
-                  variant: "underline",
-                  ...badge.count === void 0 ? {} : { count: badge.count },
-                  ...badge.color ? { countColor: badge.color } : {},
-                  className: "shrink-0 py-density-2 [&_svg]:text-muted-foreground"
-                },
-                item.id
-              );
-            })
+                  children: [
+                    compact ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            "min-h-0 flex-1 overflow-hidden",
+                            tab !== "transcript" && "hidden"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            SessionTranscript,
+                            {
+                              session: hierarchy.filtered,
+                              viewerProps: {
+                                ...compactTranscriptProps,
+                                className: transcriptClassName
+                              }
+                            }
+                          )
+                        }
+                      ),
+                      tab !== "transcript" ? /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto p-density-4", children: /* @__PURE__ */ jsx(
+                        SessionInspectorPanel,
+                        {
+                          tab,
+                          detail: panelDetail,
+                          session: hierarchy.current,
+                          ...onPlanChange ? { onPlanChange } : {},
+                          ...onResolveApproval ? { onResolveApproval } : {}
+                        }
+                      ) }) : null
+                    ] }) : /* @__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 } : {},
+                            ...onResolveApproval ? { onResolveApproval } : {}
+                          }
+                        )
+                      }
+                    ),
+                    composer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-density-3", children: composer }) : null
+                  ]
+                }
+              ),
+              !compact ? /* @__PURE__ */ jsx(SessionInspectorSidebar, { session: hierarchy.current }) : null
+            ]
           }
-        ),
-        /* @__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 } : {},
-                    ...onResolveApproval ? { onResolveApproval } : {}
-                  }
-                )
-              }
-            ),
-            composer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-density-3", children: composer }) : null
-          ] }),
-          /* @__PURE__ */ jsx(SessionInspectorSidebar, { session: hierarchy.current })
-        ] })
+        )
       ]
     }
   );
@@ -186,40 +248,76 @@ function LegacySessionInspector({
   className,
   defaultTab = "transcript",
   transcriptProps,
-  composer
+  composer,
+  layout = "default",
+  metadata,
+  toolbarActions
 }) {
-  const [tab, setTab] = useState(defaultTab);
+  const compact = layout === "compact";
+  const [menuHost, setMenuHost] = useState(null);
+  const [tab, setTab] = useState(
+    defaultTab === "output" ? "transcript" : defaultTab
+  );
   const transcriptClassName = cn("h-full", transcriptProps == null ? void 0 : transcriptProps.className);
+  const compactTabs = inspectorTabs(false);
+  const compactMetadata = metadata ?? getSessionMetadata(session);
+  const viewerProps = compact ? {
+    ...transcriptProps,
+    menuContainer: menuHost,
+    showMenu: menuHost !== null && (transcriptProps == null ? void 0 : transcriptProps.showMenu) !== false
+  } : transcriptProps;
   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",
+        "flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden bg-background text-sm",
+        compact ? "@container rounded-none border-0 shadow-none" : "rounded-xl border border-border shadow-sm",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
+        compact ? /* @__PURE__ */ jsx(
+          CompactSessionInspectorToolbar,
           {
-            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
-            ))
+            tabs: compactTabs,
+            activeTab: tab,
+            onSelect: (next) => setTab(next),
+            onMenuHost: setMenuHost,
+            ...compactMetadata ? { metadata: compactMetadata } : {},
+            ...toolbarActions ? { toolbarActions } : {}
           }
-        ),
+        ) : /* @__PURE__ */ jsx(InspectorTabs, { tab, tabs: compactTabs, onSelect: setTab }),
         /* @__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(
+          compact ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "min-h-0 flex-1 overflow-hidden",
+                  tab !== "transcript" && "hidden"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  SessionViewer,
+                  {
+                    session,
+                    scrollable: true,
+                    showRowMetadata: true,
+                    ...viewerProps,
+                    className: transcriptClassName,
+                    showHeader: false,
+                    showContextMeter: false
+                  }
+                )
+              }
+            ),
+            tab !== "transcript" ? /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto p-density-4", children: /* @__PURE__ */ jsx(
+              SessionInspectorPanel,
+              {
+                tab,
+                detail: void 0,
+                session
+              }
+            ) }) : null
+          ] }) : /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: tab === "transcript" ? /* @__PURE__ */ jsx(
             SessionViewer,
             {
               session,
@@ -242,24 +340,6 @@ function LegacySessionInspector({
     }
   );
 }
-function tabBadge(tab, session) {
-  var _a, _b, _c, _d, _e, _f;
-  switch (tab) {
-    case "files":
-      return {
-        count: (((_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": {
-      const pending = pendingApprovalRequests(session == null ? void 0 : session.requests).length;
-      if (pending) return { count: pending, color: "bg-amber-500" };
-      return {
-        count: (((_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 {};
-  }
-}
 function singleSessionCollection(session) {
   const id = session.id || "session";
   return {
@@ -269,11 +349,6 @@ function singleSessionCollection(session) {
     sessions: [{ id, session }]
   };
 }
-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;

package/dist/data/ai/SessionInspector.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionInspector.js","sources":["../../../src/data/ai/SessionInspector.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport {\n  UiBraces,\n  UiChatDots,\n  UiCoins,\n  UiFileText,\n  UiListDashes,\n  UiSealCheck,\n  UiStrategy,\n} from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { TabButton } from \"../TabButton\";\nimport { formatCost, costTotal } from \"./session-cost\";\nimport { SessionInspectorPanel } from \"./SessionInspector.panels\";\nimport {\n  SessionInspectorHeader,\n  SessionInspectorSidebar,\n} from \"./SessionInspector.summary\";\nimport { SessionTranscript } from \"./SessionInspector.transcript\";\nimport {\n  isSessionCollectionInput,\n  type SessionCollectionInput,\n  type SessionCollectionItem,\n  type SessionInspectorInput,\n} from \"./SessionInspector.collection\";\nimport { SessionHierarchyPicker } from \"./SessionInspector.hierarchy\";\nimport { useSessionHierarchy } from \"./SessionInspector.hierarchy-state\";\nimport {\n  pendingApprovalRequests,\n  type ApprovalResolveHandler,\n} from \"./SessionInspector.approvals-model\";\nimport { SessionViewer, type SessionViewerProps } from \"./SessionViewer\";\nimport type { SessionInput } from \"./SessionViewer.model\";\nimport type { UnifiedSessionInput } from \"./SessionViewer.unified\";\n\nexport type SessionInspectorTab =\n  | \"transcript\"\n  | \"files\"\n  | \"plan\"\n  | \"approvals\"\n  | \"costs\"\n  | \"metadata\"\n  | \"raw\";\n\nexport interface SessionInspectorProps {\n  session: SessionInspectorInput;\n  className?: string;\n  defaultTab?: SessionInspectorTab;\n  transcriptProps?: Omit<SessionViewerProps, \"session\">;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n  /** Receives edits made in the Plan tab. The inspector also keeps the draft visible locally. */\n  onPlanChange?: (content: string) => void;\n  /** Resolves one pending tool approval from the Approvals tab. Omitted, the\n   *  tab still lists pending requests but renders no Approve/Deny controls. */\n  onResolveApproval?: ApprovalResolveHandler;\n  composer?: ReactNode;\n}\n\nconst TABS = [\n  { id: \"transcript\", label: \"Transcript\", icon: UiChatDots },\n  { id: \"files\", label: \"Files\", icon: UiFileText },\n  { id: \"plan\", label: \"Plan\", icon: UiStrategy },\n  { id: \"approvals\", label: \"Approvals\", icon: UiSealCheck },\n  { id: \"costs\", label: \"Costs\", icon: UiCoins },\n  { id: \"metadata\", label: \"Metadata\", icon: UiListDashes },\n  { id: \"raw\", label: \"Raw\", icon: UiBraces },\n] as const;\n\nexport function SessionInspector({\n  session,\n  className,\n  defaultTab = \"transcript\",\n  transcriptProps,\n  renderSessionActions,\n  onPlanChange,\n  onResolveApproval,\n  composer,\n}: SessionInspectorProps) {\n  const detail = useMemo(\n    () =>\n      isSessionCollectionInput(session) ? undefined : asUnifiedSession(session),\n    [session],\n  );\n  const collection = useMemo(\n    () =>\n      isSessionCollectionInput(session)\n        ? session\n        : detail\n          ? singleSessionCollection(detail)\n          : undefined,\n    [detail, session],\n  );\n\n  if (collection) {\n    const optionalProps = {\n      ...(className ? { className } : {}),\n      ...(transcriptProps ? { transcriptProps } : {}),\n      ...(renderSessionActions ? { renderSessionActions } : {}),\n      ...(onPlanChange ? { onPlanChange } : {}),\n      ...(onResolveApproval ? { onResolveApproval } : {}),\n      ...(composer ? { composer } : {}),\n    };\n    return (\n      <CollectionSessionInspector\n        collection={collection}\n        defaultTab={defaultTab}\n        {...optionalProps}\n      />\n    );\n  }\n\n  return (\n    <LegacySessionInspector\n      session={session as SessionInput}\n      defaultTab={defaultTab}\n      {...(className ? { className } : {})}\n      {...(transcriptProps ? { transcriptProps } : {})}\n      {...(composer ? { composer } : {})}\n    />\n  );\n}\n\nfunction CollectionSessionInspector({\n  collection,\n  className,\n  defaultTab = \"transcript\",\n  transcriptProps,\n  renderSessionActions,\n  onPlanChange,\n  onResolveApproval,\n  composer,\n}: Omit<SessionInspectorProps, \"session\"> & {\n  collection: SessionCollectionInput;\n}) {\n  const hierarchy = useSessionHierarchy(collection);\n  const [tab, setTab] = useState<SessionInspectorTab>(defaultTab);\n  const transcriptClassName = cn(\"h-full\", transcriptProps?.className);\n  const panelDetail = tab === \"costs\" ? hierarchy.filtered : hierarchy.current;\n\n  return (\n    <div\n      className={cn(\n        \"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\",\n        className,\n      )}\n    >\n      <SessionInspectorHeader session={hierarchy.current} />\n      <div\n        role=\"toolbar\"\n        aria-label=\"Session content controls\"\n        className=\"flex shrink-0 justify-start border-b border-border px-density-2 py-density-2\"\n      >\n        <SessionHierarchyPicker\n          collection={collection}\n          state={hierarchy}\n          {...(renderSessionActions ? { renderSessionActions } : {})}\n        />\n      </div>\n      <div\n        role=\"tablist\"\n        aria-label=\"Session detail view\"\n        className=\"flex shrink-0 overflow-x-auto border-b border-border px-density-2\"\n      >\n        {TABS.map((item) => {\n          const badge = tabBadge(item.id, hierarchy.current);\n          return (\n            <TabButton\n              key={item.id}\n              active={tab === item.id}\n              onClick={() => setTab(item.id)}\n              label={tabLabel(\n                item.id,\n                item.label,\n                item.id === \"costs\" ? hierarchy.filtered : hierarchy.current,\n              )}\n              icon={item.icon}\n              variant=\"underline\"\n              {...(badge.count === undefined ? {} : { count: badge.count })}\n              {...(badge.color ? { countColor: badge.color } : {})}\n              className=\"shrink-0 py-density-2 [&_svg]:text-muted-foreground\"\n            />\n          );\n        })}\n      </div>\n      <div className=\"grid min-h-0 flex-1 overflow-y-auto lg:grid-cols-[minmax(0,1fr)_18rem] lg:overflow-hidden\">\n        <main className=\"flex min-h-[28rem] min-w-0 flex-col lg:min-h-0\">\n          <div\n            className={cn(\n              \"min-h-0 flex-1\",\n              tab === \"transcript\"\n                ? \"overflow-hidden\"\n                : \"overflow-auto p-density-4\",\n            )}\n          >\n            {tab === \"transcript\" ? (\n              <SessionTranscript\n                session={hierarchy.filtered}\n                viewerProps={{\n                  ...transcriptProps,\n                  className: transcriptClassName,\n                }}\n              />\n            ) : (\n              <SessionInspectorPanel\n                tab={tab}\n                detail={panelDetail}\n                session={hierarchy.current}\n                {...(onPlanChange ? { onPlanChange } : {})}\n                {...(onResolveApproval ? { onResolveApproval } : {})}\n              />\n            )}\n          </div>\n          {composer ? (\n            <div className=\"shrink-0 border-t border-border p-density-3\">\n              {composer}\n            </div>\n          ) : null}\n        </main>\n        <SessionInspectorSidebar session={hierarchy.current} />\n      </div>\n    </div>\n  );\n}\n\nfunction LegacySessionInspector({\n  session,\n  className,\n  defaultTab = \"transcript\",\n  transcriptProps,\n  composer,\n}: Pick<\n  SessionInspectorProps,\n  \"className\" | \"defaultTab\" | \"transcriptProps\" | \"composer\"\n> & {\n  session: SessionInput;\n}) {\n  const [tab, setTab] = useState<SessionInspectorTab>(defaultTab);\n  const transcriptClassName = cn(\"h-full\", transcriptProps?.className);\n  return (\n    <div\n      className={cn(\n        \"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\",\n        className,\n      )}\n    >\n      <div\n        role=\"tablist\"\n        aria-label=\"Session detail view\"\n        className=\"flex shrink-0 overflow-x-auto border-b border-border px-density-2\"\n      >\n        {TABS.map((item) => (\n          <TabButton\n            key={item.id}\n            active={tab === item.id}\n            onClick={() => setTab(item.id)}\n            label={item.label}\n            icon={item.icon}\n            variant=\"underline\"\n            className=\"shrink-0 py-density-2 [&_svg]:text-muted-foreground\"\n          />\n        ))}\n      </div>\n      <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\">\n        <div className=\"min-h-0 flex-1 overflow-hidden\">\n          {tab === \"transcript\" ? (\n            <SessionViewer\n              session={session}\n              scrollable\n              showRowMetadata\n              {...transcriptProps}\n              className={transcriptClassName}\n            />\n          ) : (\n            <SessionInspectorPanel\n              tab={tab}\n              detail={undefined}\n              session={session}\n            />\n          )}\n        </div>\n        {composer ? (\n          <div className=\"shrink-0 border-t border-border p-density-3\">\n            {composer}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\n/** The tab's count badge and, for a pending-approvals badge, an amber\n *  override so an unresolved approval reads as urgent rather than blending\n *  into the neutral resolved-count badge every other tab uses. */\nfunction tabBadge(\n  tab: SessionInspectorTab,\n  session?: UnifiedSessionInput,\n): { count?: number; color?: string } {\n  switch (tab) {\n    case \"files\":\n      return {\n        count:\n          (session?.files?.read?.length ?? 0) +\n          (session?.files?.written?.length ?? 0),\n      };\n    case \"approvals\": {\n      const pending = pendingApprovalRequests(session?.requests).length;\n      if (pending) return { count: pending, color: \"bg-amber-500\" };\n      return {\n        count:\n          (session?.approvals?.approved ?? 0) +\n          (session?.approvals?.denied ?? 0),\n      };\n    }\n    default:\n      return {};\n  }\n}\n\nfunction singleSessionCollection(\n  session: UnifiedSessionInput,\n): SessionCollectionInput {\n  const id = session.id || \"session\";\n  return {\n    kind: \"session-collection\",\n    id,\n    currentSessionId: id,\n    sessions: [{ id, session }],\n  };\n}\n\nfunction tabLabel(\n  tab: SessionInspectorTab,\n  label: string,\n  session?: UnifiedSessionInput,\n) {\n  if (tab !== \"costs\") return label;\n  const total = costTotal(session?.cost);\n  return total ? `${label} ${formatCost(total)}` : label;\n}\n\nfunction asUnifiedSession(\n  session: SessionInput,\n): UnifiedSessionInput | undefined {\n  if (typeof session !== \"object\" || session === null || Array.isArray(session))\n    return undefined;\n  return session as UnifiedSessionInput;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SessionInspector.js","sources":["../../../src/data/ai/SessionInspector.tsx"],"sourcesContent":["import { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { SessionInspectorPanel } from \"./SessionInspector.panels\";\nimport {\n  SessionInspectorHeader,\n  SessionInspectorSidebar,\n} from \"./SessionInspector.summary\";\nimport { CompactSessionInspectorToolbar } from \"./SessionInspector.compact\";\nimport { InspectorTabs } from \"./SessionInspector.tabs\";\nimport {\n  hasStructuredOutput,\n  inspectorTabs,\n  type SessionInspectorTab,\n} from \"./SessionInspector.tabs.model\";\nimport { SessionTranscript } from \"./SessionInspector.transcript\";\nimport {\n  isSessionCollectionInput,\n  type SessionCollectionInput,\n  type SessionCollectionItem,\n  type SessionInspectorInput,\n} from \"./SessionInspector.collection\";\nimport {\n  SessionHierarchyPicker,\n  SessionHierarchyTree,\n} from \"./SessionInspector.hierarchy\";\nimport { useSessionHierarchy } from \"./SessionInspector.hierarchy-state\";\nimport { type ApprovalResolveHandler } from \"./SessionInspector.approvals-model\";\nimport { SessionViewer, type SessionViewerProps } from \"./SessionViewer\";\nimport {\n  getSessionMetadata,\n  type SessionInput,\n  type SessionMetadataSummary,\n} from \"./SessionViewer.model\";\nimport type { UnifiedSessionInput } from \"./SessionViewer.unified\";\n\nexport type { SessionInspectorTab } from \"./SessionInspector.tabs.model\";\n\nexport interface SessionInspectorProps {\n  session: SessionInspectorInput;\n  className?: string;\n  /** Compact keeps tabs, runtime context, host actions, and session options on one line. */\n  layout?: \"default\" | \"compact\";\n  /** Runtime metadata to display in the compact context bar. Defaults to session metadata. */\n  metadata?: SessionMetadataSummary;\n  /** Host controls rendered before Session options in the compact toolbar. */\n  toolbarActions?: ReactNode;\n  defaultTab?: SessionInspectorTab;\n  transcriptProps?: Omit<SessionViewerProps, \"session\">;\n  renderSessionActions?: (item: SessionCollectionItem) => ReactNode;\n  /** Receives edits made in the Plan tab. The inspector also keeps the draft visible locally. */\n  onPlanChange?: (content: string) => void;\n  /** Resolves one pending tool approval from the Approvals tab. Omitted, the\n   *  tab still lists pending requests but renders no Approve/Deny controls. */\n  onResolveApproval?: ApprovalResolveHandler;\n  composer?: ReactNode;\n}\n\nexport function SessionInspector({\n  session,\n  className,\n  defaultTab = \"transcript\",\n  transcriptProps,\n  renderSessionActions,\n  onPlanChange,\n  onResolveApproval,\n  composer,\n  layout = \"default\",\n  metadata,\n  toolbarActions,\n}: SessionInspectorProps) {\n  const detail = useMemo(\n    () =>\n      isSessionCollectionInput(session) ? undefined : asUnifiedSession(session),\n    [session],\n  );\n  const collection = useMemo(\n    () =>\n      isSessionCollectionInput(session)\n        ? session\n        : detail\n          ? singleSessionCollection(detail)\n          : undefined,\n    [detail, session],\n  );\n\n  if (collection) {\n    const optionalProps = {\n      ...(className ? { className } : {}),\n      ...(transcriptProps ? { transcriptProps } : {}),\n      ...(renderSessionActions ? { renderSessionActions } : {}),\n      ...(onPlanChange ? { onPlanChange } : {}),\n      ...(onResolveApproval ? { onResolveApproval } : {}),\n      ...(composer ? { composer } : {}),\n      ...(layout === \"compact\" ? { layout } : {}),\n      ...(metadata ? { metadata } : {}),\n      ...(toolbarActions ? { toolbarActions } : {}),\n    };\n    return (\n      <CollectionSessionInspector\n        collection={collection}\n        defaultTab={defaultTab}\n        {...optionalProps}\n      />\n    );\n  }\n\n  return (\n    <LegacySessionInspector\n      session={session as SessionInput}\n      defaultTab={defaultTab}\n      {...(className ? { className } : {})}\n      {...(transcriptProps ? { transcriptProps } : {})}\n      {...(composer ? { composer } : {})}\n      {...(layout === \"compact\" ? { layout } : {})}\n      {...(metadata ? { metadata } : {})}\n      {...(toolbarActions ? { toolbarActions } : {})}\n    />\n  );\n}\n\nfunction CollectionSessionInspector({\n  collection,\n  className,\n  defaultTab = \"transcript\",\n  transcriptProps,\n  renderSessionActions,\n  onPlanChange,\n  onResolveApproval,\n  composer,\n  layout = \"default\",\n  metadata,\n  toolbarActions,\n}: Omit<SessionInspectorProps, \"session\"> & {\n  collection: SessionCollectionInput;\n}) {\n  const hierarchy = useSessionHierarchy(collection);\n  const compact = layout === \"compact\";\n  const [menuHost, setMenuHost] = useState<HTMLSpanElement | null>(null);\n  const outputVisible = hasStructuredOutput(hierarchy.current);\n  const [tab, setTab] = useState<SessionInspectorTab>(\n    defaultTab === \"output\" && !outputVisible ? \"transcript\" : defaultTab,\n  );\n  const transcriptClassName = cn(\"h-full\", transcriptProps?.className);\n  const panelDetail = tab === \"costs\" ? hierarchy.filtered : hierarchy.current;\n  const compactMetadata = metadata ?? getSessionMetadata(hierarchy.current);\n  const compactTabs = inspectorTabs(\n    outputVisible,\n    hierarchy.current,\n    hierarchy.filtered,\n  );\n  const compactMenuHeader = (\n    <div className=\"w-[min(38rem,calc(100vw-4rem))]\">\n      <p className=\"px-1 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n        Session content\n      </p>\n      <SessionHierarchyTree\n        collection={collection}\n        state={hierarchy}\n        {...(renderSessionActions ? { renderSessionActions } : {})}\n        className=\"h-[min(32rem,52vh)]\"\n      />\n      {transcriptProps?.menuHeader ? (\n        <div className=\"mt-1 border-t border-border pt-1\">\n          {transcriptProps.menuHeader}\n        </div>\n      ) : null}\n    </div>\n  );\n  const compactTranscriptProps = compact\n    ? {\n        ...transcriptProps,\n        menuContainer: menuHost,\n        menuHeader: compactMenuHeader,\n        showMenu: menuHost !== null && transcriptProps?.showMenu !== false,\n      }\n    : transcriptProps;\n\n  useEffect(() => {\n    if (tab === \"output\" && !outputVisible) setTab(\"transcript\");\n  }, [outputVisible, tab]);\n\n  return (\n    <div\n      className={cn(\n        \"flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden bg-background text-sm\",\n        compact\n          ? \"@container rounded-none border-0 shadow-none\"\n          : \"rounded-xl border border-border shadow-sm\",\n        className,\n      )}\n    >\n      {compact ? (\n        <CompactSessionInspectorToolbar\n          tabs={compactTabs}\n          activeTab={tab}\n          onSelect={(next) => setTab(next as SessionInspectorTab)}\n          onMenuHost={setMenuHost}\n          {...(compactMetadata ? { metadata: compactMetadata } : {})}\n          {...(toolbarActions ? { toolbarActions } : {})}\n        />\n      ) : (\n        <>\n          <SessionInspectorHeader session={hierarchy.current} />\n          <div\n            role=\"toolbar\"\n            aria-label=\"Session content controls\"\n            className=\"flex shrink-0 justify-start border-b border-border px-density-2 py-density-2\"\n          >\n            <SessionHierarchyPicker\n              collection={collection}\n              state={hierarchy}\n              {...(renderSessionActions ? { renderSessionActions } : {})}\n            />\n          </div>\n          <InspectorTabs tab={tab} tabs={compactTabs} onSelect={setTab} />\n        </>\n      )}\n      <div\n        className={cn(\n          \"min-h-0 flex-1 overflow-y-auto\",\n          !compact &&\n            \"grid lg:grid-cols-[minmax(0,1fr)_18rem] lg:overflow-hidden\",\n        )}\n      >\n        <main\n          className={cn(\n            \"flex min-w-0 flex-col\",\n            compact ? \"min-h-0\" : \"min-h-[28rem] lg:min-h-0\",\n          )}\n        >\n          {compact ? (\n            <>\n              <div\n                className={cn(\n                  \"min-h-0 flex-1 overflow-hidden\",\n                  tab !== \"transcript\" && \"hidden\",\n                )}\n              >\n                <SessionTranscript\n                  session={hierarchy.filtered}\n                  viewerProps={{\n                    ...compactTranscriptProps,\n                    className: transcriptClassName,\n                  }}\n                />\n              </div>\n              {tab !== \"transcript\" ? (\n                <div className=\"min-h-0 flex-1 overflow-auto p-density-4\">\n                  <SessionInspectorPanel\n                    tab={tab}\n                    detail={panelDetail}\n                    session={hierarchy.current}\n                    {...(onPlanChange ? { onPlanChange } : {})}\n                    {...(onResolveApproval ? { onResolveApproval } : {})}\n                  />\n                </div>\n              ) : null}\n            </>\n          ) : (\n            <div\n              className={cn(\n                \"min-h-0 flex-1\",\n                tab === \"transcript\"\n                  ? \"overflow-hidden\"\n                  : \"overflow-auto p-density-4\",\n              )}\n            >\n              {tab === \"transcript\" ? (\n                <SessionTranscript\n                  session={hierarchy.filtered}\n                  viewerProps={{\n                    ...transcriptProps,\n                    className: transcriptClassName,\n                  }}\n                />\n              ) : (\n                <SessionInspectorPanel\n                  tab={tab}\n                  detail={panelDetail}\n                  session={hierarchy.current}\n                  {...(onPlanChange ? { onPlanChange } : {})}\n                  {...(onResolveApproval ? { onResolveApproval } : {})}\n                />\n              )}\n            </div>\n          )}\n          {composer ? (\n            <div className=\"shrink-0 border-t border-border p-density-3\">\n              {composer}\n            </div>\n          ) : null}\n        </main>\n        {!compact ? (\n          <SessionInspectorSidebar session={hierarchy.current} />\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nfunction LegacySessionInspector({\n  session,\n  className,\n  defaultTab = \"transcript\",\n  transcriptProps,\n  composer,\n  layout = \"default\",\n  metadata,\n  toolbarActions,\n}: Pick<\n  SessionInspectorProps,\n  | \"className\"\n  | \"defaultTab\"\n  | \"transcriptProps\"\n  | \"composer\"\n  | \"layout\"\n  | \"metadata\"\n  | \"toolbarActions\"\n> & {\n  session: SessionInput;\n}) {\n  const compact = layout === \"compact\";\n  const [menuHost, setMenuHost] = useState<HTMLSpanElement | null>(null);\n  const [tab, setTab] = useState<SessionInspectorTab>(\n    defaultTab === \"output\" ? \"transcript\" : defaultTab,\n  );\n  const transcriptClassName = cn(\"h-full\", transcriptProps?.className);\n  const compactTabs = inspectorTabs(false);\n  const compactMetadata = metadata ?? getSessionMetadata(session);\n  const viewerProps = compact\n    ? {\n        ...transcriptProps,\n        menuContainer: menuHost,\n        showMenu: menuHost !== null && transcriptProps?.showMenu !== false,\n      }\n    : transcriptProps;\n  return (\n    <div\n      className={cn(\n        \"flex h-full min-h-0 w-full max-w-full flex-col overflow-hidden bg-background text-sm\",\n        compact\n          ? \"@container rounded-none border-0 shadow-none\"\n          : \"rounded-xl border border-border shadow-sm\",\n        className,\n      )}\n    >\n      {compact ? (\n        <CompactSessionInspectorToolbar\n          tabs={compactTabs}\n          activeTab={tab}\n          onSelect={(next) => setTab(next as SessionInspectorTab)}\n          onMenuHost={setMenuHost}\n          {...(compactMetadata ? { metadata: compactMetadata } : {})}\n          {...(toolbarActions ? { toolbarActions } : {})}\n        />\n      ) : (\n        <InspectorTabs tab={tab} tabs={compactTabs} onSelect={setTab} />\n      )}\n      <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\">\n        {compact ? (\n          <>\n            <div\n              className={cn(\n                \"min-h-0 flex-1 overflow-hidden\",\n                tab !== \"transcript\" && \"hidden\",\n              )}\n            >\n              <SessionViewer\n                session={session}\n                scrollable\n                showRowMetadata\n                {...viewerProps}\n                className={transcriptClassName}\n                showHeader={false}\n                showContextMeter={false}\n              />\n            </div>\n            {tab !== \"transcript\" ? (\n              <div className=\"min-h-0 flex-1 overflow-auto p-density-4\">\n                <SessionInspectorPanel\n                  tab={tab}\n                  detail={undefined}\n                  session={session}\n                />\n              </div>\n            ) : null}\n          </>\n        ) : (\n          <div className=\"min-h-0 flex-1 overflow-hidden\">\n            {tab === \"transcript\" ? (\n              <SessionViewer\n                session={session}\n                scrollable\n                showRowMetadata\n                {...transcriptProps}\n                className={transcriptClassName}\n              />\n            ) : (\n              <SessionInspectorPanel\n                tab={tab}\n                detail={undefined}\n                session={session}\n              />\n            )}\n          </div>\n        )}\n        {composer ? (\n          <div className=\"shrink-0 border-t border-border p-density-3\">\n            {composer}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n\nfunction singleSessionCollection(\n  session: UnifiedSessionInput,\n): SessionCollectionInput {\n  const id = session.id || \"session\";\n  return {\n    kind: \"session-collection\",\n    id,\n    currentSessionId: id,\n    sessions: [{ id, session }],\n  };\n}\n\nfunction asUnifiedSession(\n  session: SessionInput,\n): UnifiedSessionInput | undefined {\n  if (typeof session !== \"object\" || session === null || Array.isArray(session))\n    return undefined;\n  return session as UnifiedSessionInput;\n}\n"],"names":[],"mappings":"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"}