@frontera-sdk/chat-ui 1.50.83 → 1.51.0

package/dist/chat.js

@@ -1,21 +1,21 @@
 'use client';
 import { offset, flip, autoUpdate, computePosition } from './chunk-I7SXWUAN.js';
 import { isFullscreenHotkey, DeckNotesCard, deckOwnsArrowKeys } from './chunk-4FRTPVJT.js';
-import { ArtifactSkeleton, resolveStageWidth, zoomPercent, DECK_ZOOM_LEVELS, LazyThumb } from './chunk-ZA7CTXPL.js';
-import { NewSessionPrompt, keepCaretOnTap } from './chunk-KJ33HNY4.js';
+import { ArtifactSkeleton, resolveStageWidth, zoomPercent, DECK_ZOOM_LEVELS, LazyThumb } from './chunk-DTMMKNUM.js';
+import { NewSessionPrompt, keepCaretOnTap } from './chunk-DBF7MVXX.js';
 import { PendingCards } from './chunk-UZ6RDWCT.js';
 import { themeToStyle } from './chunk-6HYPVNVA.js';
 import { useChatAgents } from './chunk-FLOAEPRU.js';
 import { subjectOfChatToken, capabilitiesOfChatToken } from './chunk-CCVPZVFK.js';
 import { useChatCredential } from './chunk-37G6MHWS.js';
 import './chunk-WDYCLC4F.js';
-import { chatSidePanelSessionKey, Chart1Icon, useTemplatePreviewStore, useHasTemplatePreviewHost, useChatSidePanelStore, ChatHeader, ChatHeaderActions, useRightPane, getChatOverviewAgentStatus, useChatOverviewVisible, useConversationArtifacts, PENDING_CHART_TAB_PREFIX, CHART_TAB_PREFIX, AGENT_WORK_TAB_ID, AGENT_ROUTINES_TAB_ID, SOURCES_TAB_ID, TEMPLATE_TAB_ID, OutputsSection, ChainLink1Icon, ChatOverviewContent, COMPUTER_TAB_PREFIX, SourceRow, motion, MAX_CHAT_SIDE_PANEL_SESSIONS, DEFAULT_CHAT_SIDE_PANEL_SIZE, TableIcon } from './chunk-FUAY64JS.js';
+import { chatSidePanelSessionKey, Chart1Icon, useTemplatePreviewStore, useHasTemplatePreviewHost, useChatSidePanelStore, ChatHeader, ChatHeaderActions, useRightPane, getChatOverviewAgentStatus, useChatOverviewVisible, useConversationArtifacts, PENDING_CHART_TAB_PREFIX, CHART_TAB_PREFIX, AGENT_WORK_TAB_ID, AGENT_ROUTINES_TAB_ID, SOURCES_TAB_ID, TEMPLATE_TAB_ID, OutputsSection, ChainLink1Icon, ChatOverviewContent, COMPUTER_TAB_PREFIX, SourceRow, motion, MAX_CHAT_SIDE_PANEL_SESSIONS, DEFAULT_CHAT_SIDE_PANEL_SIZE, TableIcon } from './chunk-TY6XSNUD.js';
 import './chunk-X3QVICX7.js';
-import { dynamic, useChatStreamStore, useComposerStore, Message, Thinking, setPendingFiles, useLivePreviewUrl, ArrowRotateClockwiseIcon, useComputerFiles, useUploadComputerFile, CanvasWidget, isPlainTextLanguage, useUploadFile, COMPOSER_ID_MAIN, useContextWindowInfo, useIsCompacting, useQueuedMessages, VolumeFullIcon, WarningSignIcon, useComputer, csvTextToWorkbookJson, CSV_PREVIEW_MAX_ROWS, CopyButton, COMPOSER_ID_COPILOT, ModelIcon, modeToBrandRow, useBackDismiss, PdfViewer, brandLabel, Spinner } from './chunk-SZYQPW6R.js';
-import { Textarea, artifactFormatIcon, BookIcon, useAgentRoster, ShieldCheckIcon, useArtifactStore, useCanvasStore, useChatOverviewStore, setSdkConversationPath, setSdkDarkMode, AgentsProvider, PluginProvider, WorkspaceProvider, TooltipProvider, isToolPart, getToolState, getToolName, getToolInput, sourceKind, extractDomain, CitationViewerContext, MarkdownRenderer, ConnectRunnerContext, usePathname, usePaneFocusStore, useAgentPanelStore, Tooltip, TooltipTrigger, TooltipContent, StudioDisplayIcon, WorldIcon, SlidesWideIcon, ArtifactActionsMenu, DotGrid1x3HorizontalTightIcon, ArrowsShowIcon, useKeyboardInset, ExclamationCircleIcon, getToolOutput, useArtifact, useUpdateArtifact, useArtifactFileObjectUrl, resolveArtifactIconFormat, useSourcesEnrichment, LoaderIcon, FileDownloadIcon, Label, Input, renderPluginBlock, useArtifactVersion, useChatCapabilities, useChatOptInEnabled, useSessionPendingApprovals, tableToCsv, tableToXlsx, tableToMarkdown, DropdownMenu, DropdownMenuTrigger, StyledDropdownMenuContent, StyledDropdownMenuItem, useArtifactVersions, useClient, unwrapData, authFetch, getBearerHeadersForApi, EyeOpenIcon, EyeSlashIcon, useRestoreArtifactVersion, ZoomableImage, ChatImageLightbox, useDownloadArtifact, useArtifactFileBytes, useArtifactPreviewFileObjectUrl, useArtifactVersionPreviewFileObjectUrl, SpreadsheetIcon, FilePdfIcon, useOptionalWorkspaceContext, useAgentConnectionStatus, useArtifacts, useConversationDesktopStatus, isRequestHumanTool, appsKeys, useSession, useWorkspaceContext, errorText, unwrapDataDeep, useRouter, Images1Icon, ArrowUpIcon, VideoIcon, AudioIcon, useBrand, resolveBearerHeaders, subscribeSdkDarkMode, getSdkDarkMode, unwrap, useConnectRunner, useStartUserConnect, useUpsertGrant, useRevokeGrant, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, LayoutGrid1Icon, useCatalog, useInstalls, useWorkspaceSlug, buildTenantUrlAbsolute } from './chunk-BGRFXLUY.js';
+import { dynamic, useChatStreamStore, useComposerStore, Message, Thinking, setPendingFiles, useLivePreviewUrl, ArrowRotateClockwiseIcon, useComputerFiles, useUploadComputerFile, CanvasWidget, isPlainTextLanguage, useUploadFile, COMPOSER_ID_MAIN, useContextWindowInfo, useIsCompacting, useQueuedMessages, VolumeFullIcon, WarningSignIcon, useComputer, csvTextToWorkbookJson, CSV_PREVIEW_MAX_ROWS, CopyButton, COMPOSER_ID_COPILOT, ModelIcon, modeToBrandRow, useBackDismiss, PdfViewer, brandLabel, Spinner } from './chunk-R4S5G3UV.js';
+import { Textarea, artifactFormatIcon, BookIcon, useAgentRoster, ShieldCheckIcon, useArtifactStore, useCanvasStore, useChatOverviewStore, setSdkConversationPath, setSdkDarkMode, AgentsProvider, PluginProvider, WorkspaceProvider, TooltipProvider, isToolPart, getToolState, getToolName, getToolInput, sourceKind, extractDomain, CitationViewerContext, MarkdownRenderer, ConnectRunnerContext, usePathname, usePaneFocusStore, useAgentPanelStore, Tooltip, TooltipTrigger, TooltipContent, StudioDisplayIcon, WorldIcon, SlidesWideIcon, ArtifactActionsMenu, DotGrid1x3HorizontalTightIcon, ArrowsShowIcon, useKeyboardInset, ExclamationCircleIcon, getToolOutput, useArtifact, useUpdateArtifact, useArtifactFileObjectUrl, resolveArtifactIconFormat, useSourcesEnrichment, LoaderIcon, FileDownloadIcon, Label, Input, renderPluginBlock, useArtifactVersion, useChatCapabilities, useChatOptInEnabled, useSessionPendingApprovals, tableToCsv, tableToXlsx, tableToMarkdown, DropdownMenu, DropdownMenuTrigger, StyledDropdownMenuContent, StyledDropdownMenuItem, useArtifactVersions, useClient, unwrapData, authFetch, getBearerHeadersForApi, EyeOpenIcon, EyeSlashIcon, useRestoreArtifactVersion, ZoomableImage, ChatImageLightbox, useDownloadArtifact, useArtifactFileBytes, useArtifactPreviewFileObjectUrl, useArtifactVersionPreviewFileObjectUrl, SpreadsheetIcon, FilePdfIcon, useOptionalWorkspaceContext, useAgentConnectionStatus, useArtifacts, useConversationDesktopStatus, isRequestHumanTool, appsKeys, useSession, useWorkspaceContext, errorText, unwrapDataDeep, useRouter, Images1Icon, ArrowUpIcon, VideoIcon, AudioIcon, useBrand, resolveBearerHeaders, subscribeSdkDarkMode, getSdkDarkMode, unwrap, useConnectRunner, useStartUserConnect, useUpsertGrant, useRevokeGrant, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, LayoutGrid1Icon, useCatalog, useInstalls, useWorkspaceSlug, buildTenantUrlAbsolute } from './chunk-LBMYYA6P.js';
 import { ChevronLeftIcon } from './chunk-CWAOLMFS.js';
 import { Popover, PopoverTrigger, PopoverContent, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './chunk-T5SANYSX.js';
-import { MOBILE_BREAKPOINT, useIsMobile, I18nProvider, useTranslation } from './chunk-T4RG6NMW.js';
+import { MOBILE_BREAKPOINT, useIsMobile, I18nProvider, useTranslation } from './chunk-3GRFS7S5.js';
 import './chunk-QBV7MAFV.js';
 import { AppIcon, frontera_icon_default, PhotoIcon, Folder1Icon, FileTextIcon, describeToolRow, SquareArrowTopRightIcon, ClipboardIcon, getToolMeta, useStreamdownPlugins, AppIconFrame, MessageResponse } from './chunk-PKNEC4LJ.js';
 import { Skeleton, Button, ScrollArea, ChevronDownMediumIcon, buttonVariants } from './chunk-UWKO24VT.js';
@@ -42449,7 +42449,7 @@ function SheetEditor({ content, onSave, readOnly = false }) {
   );
 }
 var PdfDocumentViewInner = dynamic(
-  () => import('./pdf-document-view-inner-T3OS2MHL.js'),
+  () => import('./pdf-document-view-inner-HGUV2NLJ.js'),
   {
     ssr: false,
     loading: () => /* @__PURE__ */ jsx(ArtifactSkeleton, { format: "pdf" })
@@ -43266,7 +43266,7 @@ function HtmlDeckView({ content, inChat = false, versionSlot }) {
     !present && inChat && /* @__PURE__ */ jsx(DeckEditPanel, { currentIndex: sel, currentHtml: slides[sel]?.html ?? "" })
   ] });
 }
-var Inner = dynamic(() => import('./pdf-deck-view-inner-QBQHKZKH.js'), {
+var Inner = dynamic(() => import('./pdf-deck-view-inner-XEJ5S7KB.js'), {
   ssr: false,
   loading: () => /* @__PURE__ */ jsx(ArtifactSkeleton, { format: "htmldeck" })
 });
@@ -45393,15 +45393,27 @@ function SourcesTabView({
     `${citation.url}-${index}`
   )) }) });
 }
-function RightPanelTab({
+function DocumentTab({
   active,
   title,
   icon,
   onSelect,
   onClose,
-  closeLabel
+  closeLabel,
+  tooltip,
+  ref,
+  className,
+  ...rest
 }) {
   const tabRef = useRef(null);
+  const setTabRef = useCallback(
+    (node) => {
+      tabRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
   useEffect(() => {
     if (active) {
       tabRef.current?.scrollIntoView({
@@ -45415,7 +45427,10 @@ function RightPanelTab({
     /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: tabRef,
+        ...rest,
+        ref: setTabRef,
+        "data-slot": "document-tab",
+        "data-active": active || void 0,
         role: "button",
         tabIndex: 0,
         onClick: onSelect,
@@ -45426,14 +45441,15 @@ function RightPanelTab({
           }
         },
         className: cn(
-          // Sized to its label, capped so one long artifact title cannot
-          // push the rest of the strip off-screen. The trailing padding
-          // lives on the LABEL rather than here: `text-fade` masks the last
-          // 0.75rem of the element it is on, so on a shrink-to-fit tab it
-          // would eat the final glyphs of a short name — over the padding it
-          // fades nothing until the name actually overflows.
+          // Sized to its label, capped so one long title cannot push the
+          // rest of the strip off-screen. The trailing padding lives on the
+          // LABEL rather than here: `text-fade` masks the last 0.75rem of
+          // the element it is on, so on a shrink-to-fit tab it would eat the
+          // final glyphs of a short name — over the padding it fades nothing
+          // until the name actually overflows.
           "group/tab relative flex h-8 w-fit max-w-32 flex-none cursor-pointer select-none items-center gap-1.5 whitespace-nowrap rounded-lg pl-3 text-xs transition-colors",
-          active ? "bg-muted font-medium text-foreground hover:bg-surface-hover dark:bg-surface-raised dark:hover:bg-surface-hover" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground focus-within:bg-surface-hover"
+          active ? "bg-muted font-medium text-foreground hover:bg-surface-hover dark:bg-surface-raised dark:hover:bg-surface-hover" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground focus-within:bg-surface-hover",
+          className
         ),
         children: [
           icon,
@@ -45442,6 +45458,7 @@ function RightPanelTab({
             "button",
             {
               type: "button",
+              "data-slot": "document-tab-close",
               onClick: (event) => {
                 event.stopPropagation();
                 onClose();
@@ -45458,9 +45475,46 @@ function RightPanelTab({
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", sideOffset: 6, children: title })
+    /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", sideOffset: 6, children: tooltip ?? title })
   ] });
 }
+function scrollStripWithWheel(event) {
+  const el = event.currentTarget;
+  if (el.scrollWidth <= el.clientWidth) return;
+  const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+  if (delta === 0) return;
+  event.preventDefault();
+  el.scrollLeft += delta;
+}
+function DocumentTabStrip({ ref, className, ...rest }) {
+  const stripRef = useRef(null);
+  const setStripRef = useCallback(
+    (node) => {
+      stripRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  useEffect(() => {
+    const el = stripRef.current;
+    if (!el) return;
+    el.addEventListener("wheel", scrollStripWithWheel, { passive: false });
+    return () => el.removeEventListener("wheel", scrollStripWithWheel);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: setStripRef,
+      "data-slot": "document-tab-strip",
+      className: cn(
+        "scroll-fade-x flex h-10 min-w-0 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain px-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        className
+      )
+    }
+  );
+}
 function useHorizontalOverflow(contentKey) {
   const containerRef = useRef(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -45886,154 +45940,139 @@ function RightPanel({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-stretch h-10 shrink-0 border-b", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: tabStripRef,
-              className: "scroll-fade-x flex h-10 min-w-0 flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden overscroll-x-contain px-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-              onWheel: (e) => {
-                const el = e.currentTarget;
-                if (el.scrollWidth <= el.clientWidth) return;
-                const delta = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
-                if (delta === 0) return;
-                e.preventDefault();
-                el.scrollLeft += delta;
-              },
-              children: [
-                hasAgentTabs && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    RightPanelTab,
-                    {
-                      active: effectiveActiveId === AGENT_WORK_TAB_ID,
-                      title: t2("agentMode.work.title"),
-                      icon: /* @__PURE__ */ jsx(ChecklistIcon, { className: "size-3.5 shrink-0" }),
-                      onSelect: () => {
-                        setActiveId(AGENT_WORK_TAB_ID);
-                        setShowPicker(false);
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    RightPanelTab,
-                    {
-                      active: effectiveActiveId === AGENT_ROUTINES_TAB_ID,
-                      title: t2("agentMode.routines.title"),
-                      icon: /* @__PURE__ */ jsx(CalendarRepeatIcon, { className: "size-3.5 shrink-0" }),
-                      onSelect: () => {
-                        setActiveId(AGENT_ROUTINES_TAB_ID);
-                        setShowPicker(false);
-                      }
-                    }
-                  )
-                ] }),
-                tabArtifacts.map((a) => /* @__PURE__ */ jsx(
-                  RightPanelTab,
-                  {
-                    active: effectiveActiveId === a.id,
-                    title: a.title,
-                    icon: /* @__PURE__ */ jsx(
-                      ArtifactTabIcon,
-                      {
-                        format: a.format,
-                        artifactId: a.id,
-                        mimeType: "mimeType" in a ? a.mimeType : void 0,
-                        title: a.title
-                      }
-                    ),
-                    onSelect: () => selectArtifact(a.id),
-                    onClose: () => closeTab(a.id),
-                    closeLabel: t2("library.close")
-                  },
-                  a.id
-                )),
-                canvasItems.map((it) => {
-                  const tid = chartTabId(it.id);
-                  return /* @__PURE__ */ jsx(
-                    RightPanelTab,
-                    {
-                      active: effectiveActiveId === tid,
-                      title: it.title || "Chart",
-                      icon: /* @__PURE__ */ jsx(Chart1Icon, { className: "size-3.5 shrink-0" }),
-                      onSelect: () => {
-                        setActiveId(tid);
-                        setShowPicker(false);
-                      },
-                      onClose: () => closeTab(tid),
-                      closeLabel: t2("library.close")
-                    },
-                    tid
-                  );
-                }),
-                pendingCanvasRefs.map((ref) => {
-                  const tid = pendingCanvasTabId(ref);
-                  return /* @__PURE__ */ jsx(
-                    RightPanelTab,
-                    {
-                      active: effectiveActiveId === tid,
-                      title: ref.t || "Chart",
-                      icon: /* @__PURE__ */ jsx(Chart1Icon, { className: "size-3.5 shrink-0" }),
-                      onSelect: () => {
-                        setActiveId(tid);
-                        setShowPicker(false);
-                      },
-                      onClose: () => closeTab(tid),
-                      closeLabel: t2("library.close")
-                    },
-                    tid
-                  );
-                }),
-                computerTabs.map((ct) => {
-                  const tid = computerTabId(ct.id);
-                  const icon = ct.kind === "app" ? /* @__PURE__ */ jsx(StudioDisplayIcon, { className: "size-3.5 shrink-0" }) : ct.kind === "files" ? /* @__PURE__ */ jsx(Folder1Icon, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsx(WorldIcon, { className: "size-3.5 shrink-0" });
-                  return /* @__PURE__ */ jsx(
-                    RightPanelTab,
-                    {
-                      active: effectiveActiveId === tid,
-                      title: ct.title,
-                      icon,
-                      onSelect: () => {
-                        setActiveId(tid);
-                        setActiveComputer(ct.id);
-                        setShowPicker(false);
-                      },
-                      onClose: () => closeTab(tid),
-                      closeLabel: t2("library.close")
-                    },
-                    tid
-                  );
-                }),
-                templateTabId && /* @__PURE__ */ jsx(
-                  RightPanelTab,
-                  {
-                    active: effectiveActiveId === templateTabId,
-                    title: templateTabTitle,
-                    icon: /* @__PURE__ */ jsx(SlidesWideIcon, { className: "size-3.5 shrink-0" }),
-                    onSelect: () => {
-                      setActiveId(templateTabId);
-                      setShowPicker(false);
-                    },
-                    onClose: () => closeTab(templateTabId),
-                    closeLabel: t2("library.close")
+          /* @__PURE__ */ jsxs(DocumentTabStrip, { ref: tabStripRef, children: [
+            hasAgentTabs && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                DocumentTab,
+                {
+                  active: effectiveActiveId === AGENT_WORK_TAB_ID,
+                  title: t2("agentMode.work.title"),
+                  icon: /* @__PURE__ */ jsx(ChecklistIcon, { className: "size-3.5 shrink-0" }),
+                  onSelect: () => {
+                    setActiveId(AGENT_WORK_TAB_ID);
+                    setShowPicker(false);
                   }
-                ),
-                hasSourcesTab && /* @__PURE__ */ jsx(
-                  RightPanelTab,
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                DocumentTab,
+                {
+                  active: effectiveActiveId === AGENT_ROUTINES_TAB_ID,
+                  title: t2("agentMode.routines.title"),
+                  icon: /* @__PURE__ */ jsx(CalendarRepeatIcon, { className: "size-3.5 shrink-0" }),
+                  onSelect: () => {
+                    setActiveId(AGENT_ROUTINES_TAB_ID);
+                    setShowPicker(false);
+                  }
+                }
+              )
+            ] }),
+            tabArtifacts.map((a) => /* @__PURE__ */ jsx(
+              DocumentTab,
+              {
+                active: effectiveActiveId === a.id,
+                title: a.title,
+                icon: /* @__PURE__ */ jsx(
+                  ArtifactTabIcon,
                   {
-                    active: effectiveActiveId === SOURCES_TAB_ID,
-                    title: t2("chat.overview.sources"),
-                    icon: /* @__PURE__ */ jsx(ChainLink1Icon, { className: "size-3.5 shrink-0" }),
-                    onSelect: () => {
-                      setActiveId(SOURCES_TAB_ID);
-                      setShowPicker(false);
-                    },
-                    onClose: () => closeTab(SOURCES_TAB_ID),
-                    closeLabel: t2("library.close")
+                    format: a.format,
+                    artifactId: a.id,
+                    mimeType: "mimeType" in a ? a.mimeType : void 0,
+                    title: a.title
                   }
                 ),
-                !tabStripOverflows && addTabButton
-              ]
-            }
-          ),
+                onSelect: () => selectArtifact(a.id),
+                onClose: () => closeTab(a.id),
+                closeLabel: t2("library.close")
+              },
+              a.id
+            )),
+            canvasItems.map((it) => {
+              const tid = chartTabId(it.id);
+              return /* @__PURE__ */ jsx(
+                DocumentTab,
+                {
+                  active: effectiveActiveId === tid,
+                  title: it.title || "Chart",
+                  icon: /* @__PURE__ */ jsx(Chart1Icon, { className: "size-3.5 shrink-0" }),
+                  onSelect: () => {
+                    setActiveId(tid);
+                    setShowPicker(false);
+                  },
+                  onClose: () => closeTab(tid),
+                  closeLabel: t2("library.close")
+                },
+                tid
+              );
+            }),
+            pendingCanvasRefs.map((ref) => {
+              const tid = pendingCanvasTabId(ref);
+              return /* @__PURE__ */ jsx(
+                DocumentTab,
+                {
+                  active: effectiveActiveId === tid,
+                  title: ref.t || "Chart",
+                  icon: /* @__PURE__ */ jsx(Chart1Icon, { className: "size-3.5 shrink-0" }),
+                  onSelect: () => {
+                    setActiveId(tid);
+                    setShowPicker(false);
+                  },
+                  onClose: () => closeTab(tid),
+                  closeLabel: t2("library.close")
+                },
+                tid
+              );
+            }),
+            computerTabs.map((ct) => {
+              const tid = computerTabId(ct.id);
+              const icon = ct.kind === "app" ? /* @__PURE__ */ jsx(StudioDisplayIcon, { className: "size-3.5 shrink-0" }) : ct.kind === "files" ? /* @__PURE__ */ jsx(Folder1Icon, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsx(WorldIcon, { className: "size-3.5 shrink-0" });
+              return /* @__PURE__ */ jsx(
+                DocumentTab,
+                {
+                  active: effectiveActiveId === tid,
+                  title: ct.title,
+                  icon,
+                  onSelect: () => {
+                    setActiveId(tid);
+                    setActiveComputer(ct.id);
+                    setShowPicker(false);
+                  },
+                  onClose: () => closeTab(tid),
+                  closeLabel: t2("library.close")
+                },
+                tid
+              );
+            }),
+            templateTabId && /* @__PURE__ */ jsx(
+              DocumentTab,
+              {
+                active: effectiveActiveId === templateTabId,
+                title: templateTabTitle,
+                icon: /* @__PURE__ */ jsx(SlidesWideIcon, { className: "size-3.5 shrink-0" }),
+                onSelect: () => {
+                  setActiveId(templateTabId);
+                  setShowPicker(false);
+                },
+                onClose: () => closeTab(templateTabId),
+                closeLabel: t2("library.close")
+              }
+            ),
+            hasSourcesTab && /* @__PURE__ */ jsx(
+              DocumentTab,
+              {
+                active: effectiveActiveId === SOURCES_TAB_ID,
+                title: t2("chat.overview.sources"),
+                icon: /* @__PURE__ */ jsx(ChainLink1Icon, { className: "size-3.5 shrink-0" }),
+                onSelect: () => {
+                  setActiveId(SOURCES_TAB_ID);
+                  setShowPicker(false);
+                },
+                onClose: () => closeTab(SOURCES_TAB_ID),
+                closeLabel: t2("library.close")
+              }
+            ),
+            !tabStripOverflows && addTabButton
+          ] }),
           tabStripOverflows && /* @__PURE__ */ jsx("div", { className: "flex h-10 shrink-0 items-center pl-1", children: addTabButton }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 pl-2 pr-3 shrink-0", children: [
             sourcesActive ? null : computerActive ? /* @__PURE__ */ jsxs(Fragment, { children: [