@truefoundry/trueforge-ui 0.0.0 → 0.1.0-rc.0

package/dist/SettingsBuilder-64Y33NP3.js

@@ -0,0 +1,128 @@
+"use client";
+import {
+  Icon,
+  Spinner,
+  auiButtonClass,
+  useCompactLayout,
+  useOptionalCatalogServer,
+  useShellMode
+} from "./chunk-UHGSHDBM.js";
+import {
+  cn
+} from "./chunk-UBOFEI77.js";
+
+// src/containers/SettingsBuilder/index.tsx
+import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ModelSettings = lazy(() => import("./ModelSettings-IJ55QJQO.js"));
+var ConnectorSettings = lazy(() => import("./ConnectorSettings-CLBEWGQJ.js"));
+var SkillSettings = lazy(() => import("./SkillSettings-MXK4ZEI7.js"));
+var SandboxSettings = lazy(() => import("./SandboxSettings-S5XGZWOL.js"));
+function SettingsSectionFallback() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-center py-8", role: "status", "aria-live": "polite", "aria-busy": "true", children: [
+    /* @__PURE__ */ jsx(Spinner, { size: 20, className: "text-text-secondary" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+  ] });
+}
+var TruefoundrySettingsBuilder = () => {
+  const { settingsOpen, setSettingsOpen } = useShellMode();
+  const catalog = useOptionalCatalogServer();
+  const compact = useCompactLayout();
+  const [section, setSection] = useState("models");
+  const hasSkills = catalog?.skillCatalog != null;
+  const hasSandbox = catalog?.sandboxCatalog != null;
+  useEffect(() => {
+    if (!hasSkills && section === "skills") {
+      setSection("models");
+    }
+    if (!hasSandbox && section === "sandbox") {
+      setSection("models");
+    }
+  }, [hasSkills, hasSandbox, section]);
+  useEffect(() => {
+    if (!settingsOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.stopImmediatePropagation();
+      setSettingsOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => window.removeEventListener("keydown", onKeyDown, true);
+  }, [settingsOpen, setSettingsOpen]);
+  const sections = useMemo(() => {
+    const baseSections = [
+      { id: "models", label: "Models", icon: "cpu" },
+      { id: "connectors", label: "Connectors", icon: "plug" }
+    ];
+    if (hasSkills) {
+      baseSections.push({ id: "skills", label: "Skills", icon: "lightbulb" });
+    }
+    if (hasSandbox) {
+      baseSections.push({ id: "sandbox", label: "Sandbox providers", icon: "cube" });
+    }
+    return baseSections;
+  }, [hasSkills, hasSandbox]);
+  if (!settingsOpen || !catalog) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 w-full flex-col bg-primary-bg", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex shrink-0 items-center gap-2 border-b border-border px-2 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Back",
+          title: "Back",
+          className: auiButtonClass({ variant: "ghost", size: "icon" }),
+          onClick: () => setSettingsOpen(false),
+          children: /* @__PURE__ */ jsx(Icon, { name: "arrow-left" })
+        }
+      ),
+      /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold tracking-tight text-text-primary", children: "Settings" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 flex-col", !compact && "md:flex-row"), children: [
+      /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": "Settings sections",
+          className: cn(
+            "flex w-full gap-1 border-b border-border bg-secondary-bg/40 p-2",
+            compact ? "min-w-0" : "justify-center md:w-48 md:flex-col md:justify-start md:border-b-0 md:border-r"
+          ),
+          children: sections.map((item) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-current": section === item.id ? "page" : void 0,
+              ...compact ? { title: item.label } : {},
+              className: cn(
+                "flex min-h-9 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors",
+                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring",
+                // Narrow panels cannot fit fixed-width tabs, so tabs split the row instead.
+                compact ? "min-w-0 flex-1 justify-center gap-1.5 px-1.5" : "shrink-0",
+                section === item.id ? "bg-primary-button-bg text-primary-button-text" : "text-text-secondary hover:bg-ghost-button-hover/60 hover:text-text-primary"
+              ),
+              onClick: () => {
+                setSection(item.id);
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: item.icon, className: "h-4 w-4 shrink-0" }),
+                compact ? /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }) : item.label
+              ]
+            },
+            item.id
+          ))
+        }
+      ),
+      /* @__PURE__ */ jsx("section", { className: "flex flex-col h-full flex-1 overflow-y-hidden px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-210 h-full min-h-0 flex flex-col mx-auto", children: /* @__PURE__ */ jsxs(Suspense, { fallback: /* @__PURE__ */ jsx(SettingsSectionFallback, {}), children: [
+        section === "models" ? /* @__PURE__ */ jsx(ModelSettings, {}) : null,
+        section === "connectors" ? /* @__PURE__ */ jsx(ConnectorSettings, {}) : null,
+        section === "skills" && hasSkills ? /* @__PURE__ */ jsx(SkillSettings, {}) : null,
+        section === "sandbox" && hasSandbox ? /* @__PURE__ */ jsx(SandboxSettings, {}) : null
+      ] }) }) })
+    ] })
+  ] });
+};
+var SettingsBuilder_default = TruefoundrySettingsBuilder;
+export {
+  SettingsBuilder_default as default
+};
+//# sourceMappingURL=SettingsBuilder-64Y33NP3.js.map

package/dist/SettingsBuilder-64Y33NP3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/containers/SettingsBuilder/index.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense, useEffect, useMemo, useState } from 'react';\n\nimport { auiButtonClass } from '@/atoms/lib/buttonClasses.js';\nimport { cn } from '@/atoms/lib/cn.js';\nimport { useCompactLayout } from '@/atoms/lib/CompactLayoutContext.js';\nimport { Spinner } from '@/atoms/primitives/Spinner.js';\nimport { Icon } from '@/icons/Icon.js';\nimport { useOptionalCatalogServer } from '@/server/ServerContext.js';\nimport { useShellMode } from '@/server/ShellModeContext.js';\n\n// Section modules (and their list/catalog APIs) load only when that tab mounts.\nconst ModelSettings = lazy(() => import('./ModelSettings.js'));\nconst ConnectorSettings = lazy(() => import('./ConnectorSettings.js'));\nconst SkillSettings = lazy(() => import('./SkillSettings.js'));\nconst SandboxSettings = lazy(() => import('./SandboxSettings.js'));\n\nfunction SettingsSectionFallback() {\n  return (\n    <div className=\"flex flex-1 items-center justify-center py-8\" role=\"status\" aria-live=\"polite\" aria-busy=\"true\">\n      <Spinner size={20} className=\"text-text-secondary\" />\n      <span className=\"sr-only\">Loading</span>\n    </div>\n  );\n}\n\ntype SettingsSection = 'models' | 'connectors' | 'skills' | 'sandbox';\n\nconst TruefoundrySettingsBuilder = () => {\n  const { settingsOpen, setSettingsOpen } = useShellMode();\n  const catalog = useOptionalCatalogServer();\n  // dock/widget panels are ~mobile width even on a wide viewport — keep Settings stacked.\n  const compact = useCompactLayout();\n  const [section, setSection] = useState<SettingsSection>('models');\n\n  const hasSkills = catalog?.skillCatalog != null;\n  const hasSandbox = catalog?.sandboxCatalog != null;\n\n  useEffect(() => {\n    if (!hasSkills && section === 'skills') {\n      setSection('models');\n    }\n    if (!hasSandbox && section === 'sandbox') {\n      setSection('models');\n    }\n  }, [hasSkills, hasSandbox, section]);\n\n  useEffect(() => {\n    if (!settingsOpen) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== 'Escape') return;\n      event.stopImmediatePropagation();\n      setSettingsOpen(false);\n    };\n    // Capture so layout Escape handlers (sessions drawer / widget) do not also fire.\n    window.addEventListener('keydown', onKeyDown, true);\n    return () => window.removeEventListener('keydown', onKeyDown, true);\n  }, [settingsOpen, setSettingsOpen]);\n\n  const sections = useMemo<\n    Array<{\n      id: SettingsSection;\n      label: string;\n      icon: 'cpu' | 'plug' | 'lightbulb' | 'cube';\n    }>\n  >(() => {\n    const baseSections: Array<{\n      id: SettingsSection;\n      label: string;\n      icon: 'cpu' | 'plug' | 'lightbulb' | 'cube';\n    }> = [\n      { id: 'models', label: 'Models', icon: 'cpu' },\n      { id: 'connectors', label: 'Connectors', icon: 'plug' },\n    ];\n    if (hasSkills) {\n      baseSections.push({ id: 'skills', label: 'Skills', icon: 'lightbulb' });\n    }\n    if (hasSandbox) {\n      baseSections.push({ id: 'sandbox', label: 'Sandbox providers', icon: 'cube' });\n    }\n    return baseSections;\n  }, [hasSkills, hasSandbox]);\n\n  if (!settingsOpen || !catalog) return null;\n\n  return (\n    <div className=\"flex h-full min-h-0 w-full flex-col bg-primary-bg\">\n      <header className=\"flex shrink-0 items-center gap-2 border-b border-border px-2 py-1.5\">\n        <button\n          type=\"button\"\n          aria-label=\"Back\"\n          title=\"Back\"\n          className={auiButtonClass({ variant: 'ghost', size: 'icon' })}\n          onClick={() => setSettingsOpen(false)}\n        >\n          <Icon name=\"arrow-left\" />\n        </button>\n        <h1 className=\"text-lg font-semibold tracking-tight text-text-primary\">Settings</h1>\n      </header>\n\n      <div className={cn('flex min-h-0 flex-1 flex-col', !compact && 'md:flex-row')}>\n        <nav\n          aria-label=\"Settings sections\"\n          className={cn(\n            'flex w-full gap-1 border-b border-border bg-secondary-bg/40 p-2',\n            compact ? 'min-w-0' : 'justify-center md:w-48 md:flex-col md:justify-start md:border-b-0 md:border-r',\n          )}\n        >\n          {sections.map(item => (\n            <button\n              key={item.id}\n              type=\"button\"\n              aria-current={section === item.id ? 'page' : undefined}\n              {...(compact ? { title: item.label } : {})}\n              className={cn(\n                'flex min-h-9 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors',\n                'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus-ring',\n                // Narrow panels cannot fit fixed-width tabs, so tabs split the row instead.\n                compact ? 'min-w-0 flex-1 justify-center gap-1.5 px-1.5' : 'shrink-0',\n                section === item.id\n                  ? 'bg-primary-button-bg text-primary-button-text'\n                  : 'text-text-secondary hover:bg-ghost-button-hover/60 hover:text-text-primary',\n              )}\n              onClick={() => {\n                setSection(item.id);\n              }}\n            >\n              <Icon name={item.icon} className=\"h-4 w-4 shrink-0\" />\n              {compact ? <span className=\"truncate\">{item.label}</span> : item.label}\n            </button>\n          ))}\n        </nav>\n\n        <section className=\"flex flex-col h-full flex-1 overflow-y-hidden px-6 py-4\">\n          <div className=\"w-full max-w-210 h-full min-h-0 flex flex-col mx-auto\">\n            <Suspense fallback={<SettingsSectionFallback />}>\n              {section === 'models' ? <ModelSettings /> : null}\n              {section === 'connectors' ? <ConnectorSettings /> : null}\n              {section === 'skills' && hasSkills ? <SkillSettings /> : null}\n              {section === 'sandbox' && hasSandbox ? <SandboxSettings /> : null}\n            </Suspense>\n          </div>\n        </section>\n      </div>\n    </div>\n  );\n};\n\nexport default TruefoundrySettingsBuilder;\n"],"mappings":"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","names":[]}

package/dist/SidebarLayout-M7HEOZVK.js

@@ -0,0 +1,236 @@
+"use client";
+import {
+  NamedAgentHeaderLabel,
+  ShellActions
+} from "./chunk-WFC3W4C3.js";
+import {
+  Thread,
+  ThreadListContainer
+} from "./chunk-UXZOL5GO.js";
+import {
+  useAui
+} from "./chunk-M6MHLVSO.js";
+import {
+  useBrandName,
+  useChatHeaderContentVisible,
+  useSlot
+} from "./chunk-XSHXH6EI.js";
+import {
+  Icon,
+  Spinner,
+  auiButtonClass,
+  useOptionalShellMode
+} from "./chunk-UHGSHDBM.js";
+import "./chunk-42GF723P.js";
+import {
+  cn
+} from "./chunk-UBOFEI77.js";
+
+// src/layouts/SidebarLayout.tsx
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TruefoundrySettingsBuilder = lazy(() => import("./SettingsBuilder-64Y33NP3.js"));
+var desktopCollapsed = false;
+function SidebarLayout({ className }) {
+  const aui = useAui();
+  const shell = useOptionalShellMode();
+  const brandName = useBrandName();
+  const BrandLogo = useSlot("BrandLogo");
+  const AgentsLibraryButton = useSlot("AgentsLibraryButton");
+  const ClearChatButton = useSlot("ClearChatButton");
+  const SaveAgentButton = useSlot("SaveAgentButton");
+  const SelectAgentEmptyState = useSlot("SelectAgentEmptyState");
+  const [collapsed, setCollapsed] = useState(desktopCollapsed);
+  const setDesktopCollapsed = (value) => {
+    setCollapsed((prev) => {
+      const next = typeof value === "function" ? value(prev) : value;
+      desktopCollapsed = next;
+      return next;
+    });
+  };
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const menuBtnRef = useRef(null);
+  const dialogRef = useRef(null);
+  const mainRef = useRef(null);
+  const wasOpen = useRef(false);
+  const isIdle = shell?.mode.status === "idle";
+  const settingsOpen = shell?.settingsOpen === true;
+  const hasChatHeaderContent = useChatHeaderContentVisible();
+  useEffect(() => {
+    if (!mobileNavOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setMobileNavOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [mobileNavOpen]);
+  useEffect(() => {
+    const main = mainRef.current;
+    if (mobileNavOpen) {
+      wasOpen.current = true;
+      if (main) main.inert = true;
+      dialogRef.current?.focus();
+      return;
+    }
+    if (wasOpen.current) {
+      if (main) main.inert = false;
+      menuBtnRef.current?.focus();
+      wasOpen.current = false;
+    }
+  }, [mobileNavOpen]);
+  const handleNewChat = () => {
+    if (shell?.isComposerEnabled) {
+      shell.openDraft();
+      return;
+    }
+    shell?.setSettingsOpen(false);
+    void Promise.resolve(aui.threads().switchToNewThread()).catch(() => void 0);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex h-full min-h-0 w-full min-w-0", className), children: [
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        className: cn(
+          "hidden min-h-0 shrink-0 flex-col border-r border-border bg-sidebar-bg transition-[width] duration-300 ease-in-out md:flex",
+          collapsed ? "w-16" : "w-64"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn("flex shrink-0 items-center px-3 py-3", collapsed ? "flex-col gap-3" : "justify-between gap-2"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center text-text-primary", collapsed ? "justify-center" : "gap-2"), children: [
+                  /* @__PURE__ */ jsx(BrandLogo, { className: "size-5 shrink-0 object-contain" }),
+                  !collapsed ? /* @__PURE__ */ jsx("span", { className: "truncate text-lg font-semibold tracking-tight", children: brandName }) : null
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    "aria-expanded": !collapsed,
+                    className: auiButtonClass({ variant: "ghost", size: "icon" }),
+                    onClick: () => setDesktopCollapsed((value) => !value),
+                    children: /* @__PURE__ */ jsx(Icon, { name: collapsed ? "panel-left-open" : "panel-left-close" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("nav", { className: "flex min-h-0 flex-1 flex-col items-center gap-2 px-3", hidden: !collapsed, "aria-label": "Sidebar", children: [
+            shell?.isNewChatEnabled !== false ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Start new chat",
+                title: "New chat",
+                className: auiButtonClass({ variant: "ghost", size: "icon" }),
+                onClick: handleNewChat,
+                children: /* @__PURE__ */ jsx(Icon, { name: "square-pen" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(AgentsLibraryButton, { compact: true })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden", hidden: collapsed, children: /* @__PURE__ */ jsx(ThreadListContainer, {}) }),
+          /* @__PURE__ */ jsx(
+            "footer",
+            {
+              className: cn(
+                "flex shrink-0 border-t border-border px-3 py-2",
+                collapsed ? "flex-col items-center gap-2" : "items-center gap-1"
+              ),
+              children: /* @__PURE__ */ jsx(ShellActions, { className: collapsed ? "flex-col" : void 0 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col bg-primary-bg", children: [
+      /* @__PURE__ */ jsxs(
+        "header",
+        {
+          className: cn(
+            "flex shrink-0 items-center gap-1 border-b border-border bg-topbar-bg px-2 py-1.5",
+            // Desktop: hide when settings/idle or the thread header has nothing to show
+            // (empty untitled draft). Mobile still needs Sessions + ShellActions.
+            (settingsOpen || isIdle || !hasChatHeaderContent) && "md:hidden"
+          ),
+          children: [
+            !settingsOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: menuBtnRef,
+                  type: "button",
+                  "aria-label": "Sessions",
+                  "aria-expanded": mobileNavOpen,
+                  className: cn(auiButtonClass({ variant: "ghost", size: "icon" }), "md:hidden"),
+                  onClick: () => setMobileNavOpen(true),
+                  children: /* @__PURE__ */ jsx(Icon, { name: "bars" })
+                }
+              ),
+              /* @__PURE__ */ jsx(NamedAgentHeaderLabel, {}),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+              /* @__PURE__ */ jsx(ClearChatButton, {}),
+              /* @__PURE__ */ jsx(SaveAgentButton, {})
+            ] }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+            /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(ShellActions, {}) }, "mobile-shell-actions")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: mainRef, className: "min-h-0 min-w-0 flex-1", children: settingsOpen ? /* @__PURE__ */ jsx(
+        Suspense,
+        {
+          fallback: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex h-full items-center justify-center",
+              role: "status",
+              "aria-live": "polite",
+              "aria-busy": "true",
+              children: [
+                /* @__PURE__ */ jsx(Spinner, { size: 28, className: "text-text-primary" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+              ]
+            }
+          ),
+          children: /* @__PURE__ */ jsx(TruefoundrySettingsBuilder, {})
+        }
+      ) : isIdle ? /* @__PURE__ */ jsx(SelectAgentEmptyState, {}) : /* @__PURE__ */ jsx(Thread, {}) })
+    ] }),
+    mobileNavOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Close sessions",
+          className: "absolute inset-0 z-[9] cursor-pointer bg-[var(--overlay)] md:hidden",
+          onClick: () => setMobileNavOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dialogRef,
+          className: "absolute inset-y-0 left-0 z-10 flex w-full max-w-80 flex-col border-r border-border bg-sidebar-bg shadow-lg outline-none md:hidden",
+          role: "dialog",
+          "aria-label": "Sessions",
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 border-b border-border px-3 py-3 text-text-primary", children: [
+              /* @__PURE__ */ jsx(BrandLogo, { className: "size-5 shrink-0 object-contain" }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-lg font-semibold tracking-tight", children: brandName })
+            ] }),
+            /* @__PURE__ */ jsx(ThreadListContainer, { onThreadOpen: () => setMobileNavOpen(false) })
+          ]
+        }
+      )
+    ] }) : null
+  ] });
+}
+export {
+  SidebarLayout
+};
+//# sourceMappingURL=SidebarLayout-M7HEOZVK.js.map

package/dist/SidebarLayout-M7HEOZVK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layouts/SidebarLayout.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense, useEffect, useRef, useState } from 'react';\n\nimport { useAui } from '../assistant-ui.js';\nimport { auiButtonClass } from '../atoms/lib/buttonClasses.js';\nimport { cn } from '../atoms/lib/cn.js';\nimport { NamedAgentHeaderLabel } from '../atoms/NamedAgentHeaderLabel.js';\nimport { Spinner } from '../atoms/primitives/Spinner.js';\nimport { ShellActions } from '../atoms/ShellActions.js';\nimport { Thread } from '../containers/Thread.js';\nimport { ThreadListContainer } from '../containers/ThreadListContainer.js';\nimport { useChatHeaderContentVisible } from '../hooks/useChatChromeActionsVisible.js';\nimport { Icon } from '../icons/Icon.js';\nimport { useOptionalShellMode } from '../server/ShellModeContext.js';\nimport { useBrandName } from '../theme/brand.js';\nimport { useSlot } from '../theme/SlotsProvider.js';\n\nconst TruefoundrySettingsBuilder = lazy(() => import('../containers/SettingsBuilder/index.js'));\n\n// Survives ChatProvider remounts when openDraft / selectAgent bumps runtimeKey.\nlet desktopCollapsed = false;\n\nexport function SidebarLayout({ className }: { className?: string }) {\n  const aui = useAui();\n  const shell = useOptionalShellMode();\n  const brandName = useBrandName();\n  const BrandLogo = useSlot('BrandLogo');\n  const AgentsLibraryButton = useSlot('AgentsLibraryButton');\n  const ClearChatButton = useSlot('ClearChatButton');\n  const SaveAgentButton = useSlot('SaveAgentButton');\n  const SelectAgentEmptyState = useSlot('SelectAgentEmptyState');\n  const [collapsed, setCollapsed] = useState(desktopCollapsed);\n  const setDesktopCollapsed = (value: boolean | ((prev: boolean) => boolean)) => {\n    setCollapsed(prev => {\n      const next = typeof value === 'function' ? value(prev) : value;\n      desktopCollapsed = next;\n      return next;\n    });\n  };\n  const [mobileNavOpen, setMobileNavOpen] = useState(false);\n  const menuBtnRef = useRef<HTMLButtonElement>(null);\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const mainRef = useRef<HTMLDivElement>(null);\n  const wasOpen = useRef(false);\n  const isIdle = shell?.mode.status === 'idle';\n  const settingsOpen = shell?.settingsOpen === true;\n  const hasChatHeaderContent = useChatHeaderContentVisible();\n\n  useEffect(() => {\n    if (!mobileNavOpen) return;\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setMobileNavOpen(false);\n    };\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [mobileNavOpen]);\n\n  useEffect(() => {\n    const main = mainRef.current;\n    if (mobileNavOpen) {\n      wasOpen.current = true;\n      if (main) main.inert = true;\n      dialogRef.current?.focus();\n      return;\n    }\n    if (wasOpen.current) {\n      if (main) main.inert = false;\n      menuBtnRef.current?.focus();\n      wasOpen.current = false;\n    }\n  }, [mobileNavOpen]);\n\n  const handleNewChat = () => {\n    if (shell?.isComposerEnabled) {\n      shell.openDraft();\n      return;\n    }\n    shell?.setSettingsOpen(false);\n    void Promise.resolve(aui.threads().switchToNewThread()).catch(() => undefined);\n  };\n\n  return (\n    <div className={cn('relative flex h-full min-h-0 w-full min-w-0', className)}>\n      {/* Desktop sidebar */}\n      <aside\n        className={cn(\n          'hidden min-h-0 shrink-0 flex-col border-r border-border bg-sidebar-bg transition-[width] duration-300 ease-in-out md:flex',\n          collapsed ? 'w-16' : 'w-64',\n        )}\n      >\n        <div\n          className={cn('flex shrink-0 items-center px-3 py-3', collapsed ? 'flex-col gap-3' : 'justify-between gap-2')}\n        >\n          <div className={cn('flex min-w-0 items-center text-text-primary', collapsed ? 'justify-center' : 'gap-2')}>\n            <BrandLogo className=\"size-5 shrink-0 object-contain\" />\n            {!collapsed ? <span className=\"truncate text-lg font-semibold tracking-tight\">{brandName}</span> : null}\n          </div>\n          <button\n            type=\"button\"\n            aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n            aria-expanded={!collapsed}\n            className={auiButtonClass({ variant: 'ghost', size: 'icon' })}\n            onClick={() => setDesktopCollapsed(value => !value)}\n          >\n            <Icon name={collapsed ? 'panel-left-open' : 'panel-left-close'} />\n          </button>\n        </div>\n\n        {/* Keep both trees mounted; toggle with `hidden` so AgentsLibraryButton does not remount. */}\n        <nav className=\"flex min-h-0 flex-1 flex-col items-center gap-2 px-3\" hidden={!collapsed} aria-label=\"Sidebar\">\n          {shell?.isNewChatEnabled !== false ? (\n            <button\n              type=\"button\"\n              aria-label=\"Start new chat\"\n              title=\"New chat\"\n              className={auiButtonClass({ variant: 'ghost', size: 'icon' })}\n              onClick={handleNewChat}\n            >\n              <Icon name=\"square-pen\" />\n            </button>\n          ) : null}\n          <AgentsLibraryButton compact />\n        </nav>\n        <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden\" hidden={collapsed}>\n          <ThreadListContainer />\n        </div>\n\n        <footer\n          className={cn(\n            'flex shrink-0 border-t border-border px-3 py-2',\n            collapsed ? 'flex-col items-center gap-2' : 'items-center gap-1',\n          )}\n        >\n          <ShellActions className={collapsed ? 'flex-col' : undefined} />\n        </footer>\n      </aside>\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col bg-primary-bg\">\n        {/* Mobile ShellActions stay mounted while Settings is open so host overrides (e.g. logout) do not remount.\n            Desktop keeps shell chrome in the aside footer (always mounted). */}\n        <header\n          className={cn(\n            'flex shrink-0 items-center gap-1 border-b border-border bg-topbar-bg px-2 py-1.5',\n            // Desktop: hide when settings/idle or the thread header has nothing to show\n            // (empty untitled draft). Mobile still needs Sessions + ShellActions.\n            (settingsOpen || isIdle || !hasChatHeaderContent) && 'md:hidden',\n          )}\n        >\n          {!settingsOpen ? (\n            <>\n              <button\n                ref={menuBtnRef}\n                type=\"button\"\n                aria-label=\"Sessions\"\n                aria-expanded={mobileNavOpen}\n                className={cn(auiButtonClass({ variant: 'ghost', size: 'icon' }), 'md:hidden')}\n                onClick={() => setMobileNavOpen(true)}\n              >\n                <Icon name=\"bars\" />\n              </button>\n              <NamedAgentHeaderLabel />\n              <span className=\"min-w-0 flex-1\" />\n              <ClearChatButton />\n              <SaveAgentButton />\n            </>\n          ) : (\n            <span className=\"min-w-0 flex-1\" />\n          )}\n          <div key=\"mobile-shell-actions\" className=\"md:hidden\">\n            <ShellActions />\n          </div>\n        </header>\n\n        <div ref={mainRef} className=\"min-h-0 min-w-0 flex-1\">\n          {settingsOpen ? (\n            <Suspense\n              fallback={\n                <div\n                  className=\"flex h-full items-center justify-center\"\n                  role=\"status\"\n                  aria-live=\"polite\"\n                  aria-busy=\"true\"\n                >\n                  <Spinner size={28} className=\"text-text-primary\" />\n                  <span className=\"sr-only\">Loading</span>\n                </div>\n              }\n            >\n              <TruefoundrySettingsBuilder />\n            </Suspense>\n          ) : isIdle ? (\n            <SelectAgentEmptyState />\n          ) : (\n            <Thread />\n          )}\n        </div>\n      </div>\n\n      {/* Mobile sessions drawer */}\n      {mobileNavOpen ? (\n        <>\n          <button\n            type=\"button\"\n            aria-label=\"Close sessions\"\n            className=\"absolute inset-0 z-[9] cursor-pointer bg-[var(--overlay)] md:hidden\"\n            onClick={() => setMobileNavOpen(false)}\n          />\n          <div\n            ref={dialogRef}\n            className=\"absolute inset-y-0 left-0 z-10 flex w-full max-w-80 flex-col border-r border-border bg-sidebar-bg shadow-lg outline-none md:hidden\"\n            role=\"dialog\"\n            aria-label=\"Sessions\"\n            tabIndex={-1}\n          >\n            <div className=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-3 text-text-primary\">\n              <BrandLogo className=\"size-5 shrink-0 object-contain\" />\n              <span className=\"truncate text-lg font-semibold tracking-tight\">{brandName}</span>\n            </div>\n            <ThreadListContainer onThreadOpen={() => setMobileNavOpen(false)} />\n          </div>\n        </>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}