@tangle-network/ui 11.0.0 → 11.2.0

package/src/chat/agent-timeline.test.tsx

@@ -126,6 +126,40 @@ describe("AgentTimeline tool actions", () => {
     ).toBeInTheDocument()
   })
 
+  it("renders every row and no toggle when collapseAfter is unset", () => {
+    const items: AgentTimelineItem[] = Array.from({ length: 5 }, (_, i) => ({
+      id: `s-${i}`,
+      kind: "status",
+      label: `Step ${i}`,
+    }))
+    render(<AgentTimeline items={items} />)
+    expect(screen.getByText("Step 4")).toBeInTheDocument()
+    expect(
+      screen.queryByRole("button", { name: /more step/i }),
+    ).not.toBeInTheDocument()
+  })
+
+  it("collapses to the first N spine rows behind a toggle and reveals the rest", async () => {
+    const user = userEvent.setup()
+    const items: AgentTimelineItem[] = Array.from({ length: 5 }, (_, i) => ({
+      id: `s-${i}`,
+      kind: "status",
+      label: `Step ${i}`,
+    }))
+    render(<AgentTimeline items={items} collapseAfter={2} />)
+
+    // First 2 visible, the other 3 hidden behind the toggle
+    expect(screen.getByText("Step 0")).toBeInTheDocument()
+    expect(screen.getByText("Step 1")).toBeInTheDocument()
+    expect(screen.queryByText("Step 4")).not.toBeInTheDocument()
+
+    const toggle = screen.getByRole("button", { name: /show 3 more steps/i })
+    await user.click(toggle)
+
+    expect(screen.getByText("Step 4")).toBeInTheDocument()
+    expect(screen.getByRole("button", { name: /show less/i })).toBeInTheDocument()
+  })
+
   it("renders the source part's real input in the expanded detail", async () => {
     const user = userEvent.setup()
     const probePart: ToolPart = {

package/src/chat/agent-timeline.tsx

@@ -1,4 +1,4 @@
-import { type KeyboardEvent, type ReactNode } from "react";
+import { useState, type KeyboardEvent, type ReactNode } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -88,6 +88,9 @@ export interface AgentTimelineProps {
   /** Optional actions rendered beside each tool item (e.g. "open in artifacts").
    *  Receives the source tool part carried on the item. */
   renderToolActions?: (part: ToolPart) => ReactNode;
+  /** When set, collapse the timeline to the first N spine rows behind a
+   *  "Show N more steps" toggle. Omit to always show every row. */
+  collapseAfter?: number;
 }
 
 const TONE_STYLES: Record<AgentTimelineTone, { dot: string; card: string; text: string; icon: typeof Info }> = {
@@ -130,17 +133,24 @@ function formatTime(date: Date): string {
 interface AgentTimelineRowProps {
   isLast: boolean;
   accentClassName: string;
+  /** Dot top-offset. Defaults to aligning with the first text line; card rows
+   * pass CARD_ROW_DOT to center the dot on the card header instead. */
+  dotClassName?: string;
   children: ReactNode;
 }
 
-function AgentTimelineRow({ isLast, accentClassName, children }: AgentTimelineRowProps) {
+// Centers the dot on a RunRowShell card header (2.5rem: h-6 badge + py-2),
+// so tool and reasoning rows read as dot-aligned rather than top-anchored.
+const CARD_ROW_DOT = "mt-[calc((2.5rem-var(--timeline-dot-size))/2)]";
+
+function AgentTimelineRow({ isLast, accentClassName, dotClassName = "mt-2", children }: AgentTimelineRowProps) {
   return (
     <div className="grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4">
       <div className="relative flex justify-center">
         {!isLast && (
           <span className="absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-border" />
         )}
-        <span className={cn("relative mt-2 h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", accentClassName)} />
+        <span className={cn("relative h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", dotClassName, accentClassName)} />
       </div>
       <div className="min-w-0 pb-3">{children}</div>
     </div>
@@ -245,7 +255,10 @@ export function AgentTimeline({
   emptyState,
   className,
   renderToolActions,
+  collapseAfter,
 }: AgentTimelineProps) {
+  const [expanded, setExpanded] = useState(false);
+
   if (items.length === 0 && !isThinking) {
     return emptyState ? (
       <div className={cn("flex h-full items-center justify-center p-4", className)}>
@@ -258,13 +271,41 @@ export function AgentTimeline({
     ? [...items, { id: "__thinking__", kind: "custom", content: <ThinkingIndicator /> }]
     : items;
 
-  // Determine which items participate in the timeline connector (non-user-message items)
-  // User messages are rendered outside the timeline grid
-  const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
+  const isUserMessage = (item: AgentTimelineItem) =>
+    item.kind === "message" && item.role === "user";
+
+  // Items on the vertical connector (user messages render off-spine).
+  const timelineItems = renderedItems.filter((item) => !isUserMessage(item));
+
+  const limit = collapseAfter ?? Infinity;
+  const collapsible = timelineItems.length > limit;
+  const collapsed = collapsible && !expanded;
+
+  // While collapsed, keep only the first `limit` spine rows (and any user
+  // messages that precede them); the rest hides behind the toggle.
+  let renderList = renderedItems;
+  let hiddenCount = 0;
+  if (collapsed) {
+    const visible: AgentTimelineItem[] = [];
+    let spineCount = 0;
+    for (const item of renderedItems) {
+      if (spineCount >= limit) break;
+      visible.push(item);
+      if (!isUserMessage(item)) spineCount += 1;
+    }
+    renderList = visible;
+    hiddenCount = timelineItems.length - limit;
+  }
+
+  const visibleSpine = renderList.filter((item) => !isUserMessage(item));
+  // When a toggle row follows, no real row is last — the toggle owns the tail.
+  const lastSpineItem = collapsible
+    ? undefined
+    : visibleSpine[visibleSpine.length - 1];
 
   return (
     <div className={cn("mx-auto w-full max-w-5xl px-4 py-4", className)}>
-      {renderedItems.map((item, index) => {
+      {renderList.map((item) => {
         // User messages: right-aligned bubble, off-spine — needs its own vertical
         // rhythm so it doesn't sit flush against the status/tool/agent row below.
         if (item.kind === "message" && item.role === "user") {
@@ -275,8 +316,7 @@ export function AgentTimeline({
           );
         }
 
-        const timelineIndex = timelineItems.indexOf(item);
-        const isLast = timelineIndex === timelineItems.length - 1;
+        const isLast = item === lastSpineItem;
 
         if (item.kind === "message") {
           return (
@@ -288,7 +328,7 @@ export function AgentTimeline({
 
         if (item.kind === "tool") {
           return (
-            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]" dotClassName={CARD_ROW_DOT}>
               <ToolCallStep
                 type={item.call.type}
                 label={item.call.label}
@@ -305,7 +345,7 @@ export function AgentTimeline({
 
         if (item.kind === "tool_group") {
           return (
-            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+            <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]" dotClassName={CARD_ROW_DOT}>
               <ToolCallGroup title={item.title}>
                 {item.calls.map((call, callIndex) => {
                   const part = item.parts?.[callIndex];
@@ -354,11 +394,24 @@ export function AgentTimeline({
 
         // custom
         return (
-          <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]">
+          <AgentTimelineRow key={item.id} isLast={isLast} accentClassName="bg-[var(--border-hover)]" dotClassName={CARD_ROW_DOT}>
             {(item as AgentTimelineCustomItem).content}
           </AgentTimelineRow>
         );
       })}
+      {collapsible ? (
+        <AgentTimelineRow isLast accentClassName="bg-[var(--border-hover)]">
+          <button
+            type="button"
+            onClick={() => setExpanded((value) => !value)}
+            className="text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            {collapsed
+              ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}`
+              : "Show less"}
+          </button>
+        </AgentTimelineRow>
+      ) : null}
     </div>
   );
 }

package/src/chat/chat-container.tsx

@@ -63,6 +63,9 @@ export interface ChatContainerProps {
   /** Optional actions rendered beside individual tool items in the `timeline`
    *  presentation, which has no run/message grouping (hence part-only). */
   renderTimelineToolActions?: (part: ToolPart) => ReactNode;
+  /** In the `timeline` presentation, collapse to the first N spine rows behind
+   *  a "Show N more steps" toggle. Omit to always show every row. */
+  collapseTimelineAfter?: number;
 }
 
 const OPENUI_NODE_TYPES = new Set([
@@ -373,6 +376,7 @@ export const ChatContainer = memo(
     renderUserMessageActions,
     renderToolActions,
     renderTimelineToolActions,
+    collapseTimelineAfter,
   }: ChatContainerProps) => {
     const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -414,6 +418,7 @@ export const ChatContainer = memo(
                 items={timeline.items}
                 isThinking={timeline.showThinking}
                 renderToolActions={renderTimelineToolActions}
+                collapseAfter={collapseTimelineAfter}
               />
             </div>
           ) : (

package/src/editor/document-editor-pane.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DocumentEditorPane } from './document-editor-pane'
+
+const MARKDOWN_SOURCE = `# GTM Agent Repository Overview
+
+Source: \`github.com/tangle-network/gtm-agent\`
+
+---
+
+## What It Is
+
+GTM Agent is an AI-powered go-to-market workspace where founders get a sandboxed environment.
+
+## Architecture
+
+| Layer | Owns | Location |
+| --- | --- | --- |
+| Engine | Stream normalization | \`@tangle-network/agent-app\` |
+| Shell | Auth, billing, RBAC, vault | \`src/routes/**\` |
+
+## Tech Stack
+
+- Frontend: Remix + Tailwind v4
+- Database: SQLite + Drizzle ORM
+- Sandbox: \`@tangle-network/sandbox\`
+
+[Launch](https://gtm.tangle.tools)
+`
+
+const meta: Meta<typeof DocumentEditorPane> = {
+  title: 'Editor/DocumentEditorPane',
+  component: DocumentEditorPane,
+  parameters: { layout: 'fullscreen', backgrounds: { default: 'dark' } },
+  decorators: [
+    (Story) => (
+      <div className="h-[620px] w-[900px] bg-background text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof DocumentEditorPane>
+
+export const PreviewDark: Story = {
+  name: 'Preview (dark theme)',
+  args: {
+    title: 'gtm-agent-repo.md',
+    subtitle: 'knowledge/gtm-agent-repo.md',
+    eyebrow: 'Artifact',
+    markdown: MARKDOWN_SOURCE,
+    mode: 'preview',
+  },
+}
+
+export const PreviewLight: Story = {
+  name: 'Preview (light theme)',
+  parameters: { backgrounds: { default: 'light' } },
+  decorators: [
+    (Story) => (
+      <div data-theme="tangle-light" className="h-[620px] w-[900px] bg-background text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    title: 'gtm-agent-repo.md',
+    subtitle: 'knowledge/gtm-agent-repo.md',
+    eyebrow: 'Artifact',
+    markdown: MARKDOWN_SOURCE,
+    mode: 'preview',
+  },
+}

package/src/editor/document-editor-pane.tsx

@@ -182,6 +182,8 @@ export function DocumentEditorPane({
   footer,
   className,
   contentClassName,
+  headerClassName,
+  hideTitleBlock,
   tabs,
   toolbar,
   markdown = "",
@@ -287,11 +289,14 @@ export function DocumentEditorPane({
   const preview = (
     <div
       className={cn(
-        "rounded-[var(--radius-lg)] border border-border bg-background p-5",
+        // The outer margin is the card's gutter (rather than padding on the tab
+        // panel) so `previewClassName` can govern the whole box — gutter, border,
+        // surface, and inner padding — e.g. to render the document full-bleed.
+        "m-4 rounded-[var(--radius-lg)] border border-border bg-card p-5",
         previewClassName,
       )}
     >
-      <Markdown className="prose-sm max-w-none">{draft}</Markdown>
+      <Markdown>{draft}</Markdown>
     </div>
   );
 
@@ -337,9 +342,11 @@ export function DocumentEditorPane({
         tabs={tabs}
         className={className}
         contentClassName={contentClassName}
+        headerClassName={headerClassName}
         toolbar={editorToolbar}
+        hideTitleBlock={hideTitleBlock}
       >
-        <TabsContent value="preview" className="mt-0 h-full px-4 py-4">
+        <TabsContent value="preview" className="mt-0 h-full">
           {preview}
         </TabsContent>
         <TabsContent value="edit" className="mt-0 h-full px-4 py-4">

package/src/files/file-artifact-pane.tsx

@@ -44,6 +44,8 @@ export interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className
   toolbar?: ArtifactPaneProps["toolbar"];
   footer?: ArtifactPaneProps["footer"];
   className?: string;
+  headerClassName?: ArtifactPaneProps["headerClassName"];
+  hideTitleBlock?: ArtifactPaneProps["hideTitleBlock"];
   editor?: FileArtifactPaneEditorOptions;
 }
 
@@ -68,6 +70,8 @@ export function FileArtifactPane({
   toolbar,
   footer,
   className,
+  headerClassName,
+  hideTitleBlock,
   editor,
 }: FileArtifactPaneProps) {
   const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
@@ -83,7 +87,9 @@ export function FileArtifactPane({
     detectFileFormat(filename, mimeType) === "markdown" ||
     (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
-  const headerActions = (
+  // Undefined (not an empty fragment) when there are no actions, so ArtifactPane
+  // can collapse the header row entirely under hideTitleBlock.
+  const headerActions = onDownload || onClose ? (
     <>
       {onDownload && (
         <button
@@ -106,7 +112,7 @@ export function FileArtifactPane({
         </button>
       )}
     </>
-  );
+  ) : undefined;
 
   if (isEditableMarkdown) {
     return (
@@ -122,6 +128,8 @@ export function FileArtifactPane({
             className={className}
             tabs={paneTabs}
             headerActions={headerActions}
+            headerClassName={headerClassName}
+            hideTitleBlock={hideTitleBlock}
           >
             <div className="flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground">
               Loading editor…
@@ -139,6 +147,8 @@ export function FileArtifactPane({
           className={className}
           tabs={paneTabs}
           headerActions={headerActions}
+          headerClassName={headerClassName}
+          hideTitleBlock={hideTitleBlock}
           markdown={content ?? ""}
           mode={editor.mode}
           defaultMode={editor.defaultMode}
@@ -170,6 +180,8 @@ export function FileArtifactPane({
       className={className}
       tabs={paneTabs}
       headerActions={headerActions}
+      headerClassName={headerClassName}
+      hideTitleBlock={hideTitleBlock}
     >
       <FilePreview
         filename={filename}

package/src/files/file-preview.stories.tsx

@@ -43,7 +43,15 @@ Markdown still renders as **prose**, not as a code block.
 
 - Themed headings
 - \`inline code\`
-- [links](https://tangle.tools)`
+- [links](https://tangle.tools)
+
+---
+
+| Element | Expected |
+| --- | --- |
+| Body | readable foreground |
+| Table | subtle borders |
+| Code | tokenized accent |`
 
 const meta: Meta<typeof FilePreview> = {
   title: 'Files/FilePreview',
@@ -85,3 +93,16 @@ export const MarkdownProse: Story = {
   name: 'Markdown (rendered prose)',
   args: { filename: 'README.md', content: MARKDOWN_SOURCE },
 }
+
+export const MarkdownProseLight: Story = {
+  name: 'Markdown (light theme)',
+  parameters: { backgrounds: { default: 'light' } },
+  decorators: [
+    (Story) => (
+      <div data-theme="tangle-light" className="h-[560px] w-[760px] bg-background text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+  args: { filename: 'README.md', content: MARKDOWN_SOURCE },
+}

package/src/files/file-preview.tsx

@@ -171,7 +171,7 @@ function PdfPreview({ blobUrl, filename }: { blobUrl: string; filename: string }
 
 function TextPreview({ content }: { content: string }) {
   return (
-    <pre className="bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]">
+    <pre className="bg-card rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]">
       {content}
     </pre>
   );
@@ -199,7 +199,7 @@ function UnsupportedPreview({
 function MarkdownPreview({ content }: { content: string }) {
   return (
     <div className="rounded-[var(--radius-md)] border border-border bg-background p-5">
-      <Markdown className="prose-sm max-w-none">{content}</Markdown>
+      <Markdown>{content}</Markdown>
     </div>
   );
 }

package/src/markdown/markdown.stories.tsx

@@ -10,7 +10,7 @@ const markdownMeta: Meta<typeof Markdown> = {
   parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
   decorators: [
     (Story) => (
-      <div className="w-[680px] p-6 rounded-xl bg-card text-foreground">
+      <div className="w-[680px] rounded-xl bg-card p-6 text-foreground">
         <Story />
       </div>
     ),
@@ -20,6 +20,60 @@ const markdownMeta: Meta<typeof Markdown> = {
 export default markdownMeta
 type Story = StoryObj<typeof Markdown>
 
+const CONTRAST_MARKDOWN = `# GTM Agent Repository Overview
+
+Source: \`github.com/tangle-network/gtm-agent\` Live at: [gtm.tangle.tools](https://gtm.tangle.tools)
+
+---
+
+## What It Is
+
+GTM Agent is an AI-powered go-to-market workspace where founders get a sandboxed environment with an AI co-founder.
+
+## Architecture
+
+| Layer | Owns | Location |
+|------|------|----------|
+| Engine | Stream normalization, DB port, harness | \`@tangle-network/agent-app\` |
+| Shell | Auth, billing, RBAC, vault | \`src/routes/**\` |
+| Runtime | Customer motion | Live sandbox |
+
+## Tech Stack
+
+- **Frontend:** Remix + Tailwind v4
+- **Database:** SQLite + Drizzle ORM
+- **Sandbox:** \`@tangle-network/sandbox\`
+
+> Prime directive: ship the shell, never hardcode customer motion.
+
+\`inline code\` stays readable beside paragraphs.
+
+\`\`\`ts
+export function readable(theme: 'light' | 'dark') {
+  return theme
+}
+\`\`\`
+`
+
+export const LightThemeRegression: Story = {
+  name: 'Light theme regression',
+  parameters: { backgrounds: { default: 'light' } },
+  render: () => (
+    <div data-theme="tangle-light" className="rounded-xl bg-background p-6 text-foreground">
+      <Markdown>{CONTRAST_MARKDOWN}</Markdown>
+    </div>
+  ),
+}
+
+export const DarkThemeRegression: Story = {
+  name: 'Dark theme regression',
+  render: () => (
+    <div className="rounded-xl bg-background p-6 text-foreground">
+      <Markdown>{CONTRAST_MARKDOWN}</Markdown>
+    </div>
+  ),
+}
+
 export const Prose: Story = {
   name: 'Prose',
   args: {

package/src/markdown/markdown.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { Markdown } from "./markdown";
+
+describe("Markdown", () => {
+  it("uses the tokenized Tangle prose class instead of host typography defaults", () => {
+    const { container } = render(<Markdown>{"# Heading\n\nBody with `code`."}</Markdown>);
+    const surface = container.firstElementChild;
+
+    expect(surface).toHaveClass("tangle-prose");
+    expect(surface).not.toHaveClass("prose");
+    expect(surface).not.toHaveClass("dark:prose-invert");
+  });
+
+  it("keeps inline code on semantic tokens", () => {
+    const { container } = render(<Markdown>{"Use `token` values."}</Markdown>);
+    const inlineCode = container.querySelector("code");
+
+    expect(inlineCode).toHaveClass("border-border");
+    expect(inlineCode).toHaveClass("bg-card");
+    expect(inlineCode).toHaveClass("text-[var(--code-keyword)]");
+  });
+});

package/src/markdown/markdown.tsx

@@ -17,7 +17,7 @@ export interface MarkdownProps {
 export const Markdown = memo(({ children, className }: MarkdownProps) => {
   return (
     <div
-      className={cn("prose prose-sm dark:prose-invert max-w-none", className)}
+      className={cn("tangle-prose max-w-none text-sm", className)}
     >
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}

package/src/primitives/artifact-pane.tsx

@@ -14,6 +14,15 @@ export interface ArtifactPaneProps {
   children?: ReactNode;
   className?: string;
   contentClassName?: string;
+  /** Extra classes for the header band (e.g. to align its surface with the host chrome). */
+  headerClassName?: string;
+  /**
+   * Suppress the eyebrow/title/subtitle/meta block. Use when the host already
+   * shows the artifact's identity elsewhere (e.g. a surrounding path row), so the
+   * pane keeps only its tabs, toolbar, and header actions. The whole header row
+   * collapses when nothing else would render in it.
+   */
+  hideTitleBlock?: boolean;
 }
 
 /**
@@ -33,8 +42,17 @@ export function ArtifactPane({
   children,
   className,
   contentClassName,
+  headerClassName,
+  hideTitleBlock = false,
 }: ArtifactPaneProps) {
   const hasContent = children !== undefined && children !== null;
+  // With the title block hidden, still render the top row if there are header
+  // actions to place; the block itself just collapses to empty.
+  const showTitleRow = !hideTitleBlock || Boolean(headerActions);
+  const hasHeader = showTitleRow || Boolean(tabs) || Boolean(toolbar);
+  // The toolbar's top divider only reads as a separator when something sits
+  // above it; as the header's first row it would double the host's own border.
+  const toolbarNeedsDivider = showTitleRow || Boolean(tabs);
 
   return (
     <section
@@ -43,35 +61,43 @@ export function ArtifactPane({
         className,
       )}
     >
-      <header className="border-b border-border bg-muted/10">
-        <div className="flex items-start justify-between gap-3 px-3 py-2">
-          <div className="min-w-0 flex-1">
-            {eyebrow && (
-              <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
-                {eyebrow}
+      {hasHeader && (
+        <header className={cn("border-b border-border bg-muted/10", headerClassName)}>
+          {showTitleRow && (
+            <div className="flex items-start justify-between gap-3 px-3 py-2">
+              <div className="min-w-0 flex-1">
+                {!hideTitleBlock && (
+                  <>
+                    {eyebrow && (
+                      <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                        {eyebrow}
+                      </div>
+                    )}
+                    <div className="min-w-0 text-[13px] font-medium text-foreground">
+                      {title}
+                    </div>
+                    {(subtitle || meta) && (
+                      <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground">
+                        {subtitle && <span className="truncate">{subtitle}</span>}
+                        {meta && <span className="flex items-center gap-2">{meta}</span>}
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
-            )}
-            <div className="min-w-0 text-[13px] font-medium text-foreground">
-              {title}
+              {headerActions && (
+                <div className="flex shrink-0 items-center gap-1.5">{headerActions}</div>
+              )}
+            </div>
+          )}
+          {tabs}
+          {toolbar && (
+            <div className={cn("px-3 py-2", toolbarNeedsDivider && "border-t border-border")}>
+              {toolbar}
             </div>
-            {(subtitle || meta) && (
-              <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground">
-                {subtitle && <span className="truncate">{subtitle}</span>}
-                {meta && <span className="flex items-center gap-2">{meta}</span>}
-              </div>
-            )}
-          </div>
-          {headerActions && (
-            <div className="flex shrink-0 items-center gap-1.5">{headerActions}</div>
           )}
-        </div>
-        {tabs}
-        {toolbar && (
-          <div className="border-t border-border px-3 py-2">
-            {toolbar}
-          </div>
-        )}
-      </header>
+        </header>
+      )}
 
       <div className={cn("min-h-0 flex-1 overflow-auto", contentClassName)}>
         {hasContent ? (