devnonla-ui 0.1.0

package/src/chat/message-ui/MermaidBlock.tsx

@@ -0,0 +1,266 @@
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { CodeBlock } from "../../codeblock/CodeBlock";
+import { cn } from "../../lib/cn";
+import { sanitizeMermaid } from "./sanitizeMermaid";
+
+export type MermaidBlockProps = {
+  children: string;
+  className?: string;
+};
+
+type MermaidTheme = "light" | "dark";
+
+const btnClass = "flex items-center gap-1 px-2 py-1 rounded-lg border border-border text-muted-foreground text-xs cursor-pointer transition-colors hover:text-primary hover:border-primary/30 bg-transparent";
+
+function IconSun({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.75" />
+      <path d="M12 3v2M12 19v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M3 12h2M19 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconMoon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M21 14.5A8.5 8.5 0 1 1 12 3a7 7 0 0 0 9 11.5z" stroke="currentColor" strokeWidth="1.75" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconDownload({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M12 4v12M7 12l5 5 5-5M5 20h14" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconFullScreen({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M8 4H4v4M16 4h4v4M8 20H4v-4M16 20h4v-4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconQuitFullScreen({ size = 16 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
+      <path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export function MermaidBlock({ children, className }: MermaidBlockProps) {
+  const id = useId().replace(/:/g, "_");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const fullscreenRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [svgContent, setSvgContent] = useState("");
+  const [theme, setTheme] = useState<MermaidTheme>("light");
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const dragRef = useRef({ active: false, startX: 0, startY: 0, panX: 0, panY: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+
+  const isDark = theme === "dark";
+  const surfaceClass = isDark ? "bg-[#1e1e1e]" : "bg-card";
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const render = async () => {
+      const { default: mermaid } = await import("mermaid");
+      mermaid.initialize({
+        startOnLoad: false,
+        theme: isDark ? "dark" : "default",
+      });
+
+      const raw = children.trim();
+      const renderId = `mermaid-${id}-${theme}`;
+
+      try {
+        document.getElementById(`d${renderId}`)?.remove();
+        const { svg } = await mermaid.render(renderId, raw);
+        if (!cancelled) {
+          setSvgContent(svg);
+          setError(null);
+        }
+        return;
+      } catch {
+        document.getElementById(`d${renderId}`)?.remove();
+      }
+
+      const sanitized = sanitizeMermaid(raw);
+      try {
+        const sanitizedId = `${renderId}-s`;
+        document.getElementById(sanitizedId)?.remove();
+        document.getElementById(`d${sanitizedId}`)?.remove();
+        const { svg } = await mermaid.render(sanitizedId, sanitized);
+        if (!cancelled) {
+          setSvgContent(svg);
+          setError(null);
+        }
+      } catch (err) {
+        if (!cancelled) setError(String(err));
+      }
+    };
+
+    void render();
+    return () => {
+      cancelled = true;
+    };
+  }, [children, id, theme, isDark]);
+
+  useEffect(() => {
+    if (containerRef.current && svgContent) containerRef.current.innerHTML = svgContent;
+  }, [svgContent]);
+
+  useEffect(() => {
+    if (dialogRef.current?.open && fullscreenRef.current && svgContent) {
+      fullscreenRef.current.innerHTML = svgContent;
+    }
+  }, [svgContent]);
+
+  const resetView = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
+
+  const toggleTheme = () => setTheme((prev) => (prev === "light" ? "dark" : "light"));
+
+  const downloadSvg = () => {
+    if (!svgContent) return;
+    const blob = new Blob([svgContent], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "diagram.svg";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const openFullscreen = () => {
+    if (dialogRef.current && fullscreenRef.current) {
+      fullscreenRef.current.innerHTML = svgContent;
+      resetView();
+      dialogRef.current.showModal();
+    }
+  };
+
+  const closeFullscreen = () => {
+    dialogRef.current?.close();
+    resetView();
+  };
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setZoom((prev) => {
+      const delta = e.deltaY > 0 ? 0.9 : 1.1;
+      return Math.min(5, Math.max(0.3, prev * delta));
+    });
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest("button")) return;
+    e.preventDefault();
+    dragRef.current = { active: true, startX: e.clientX, startY: e.clientY, panX: 0, panY: 0 };
+    setIsDragging(true);
+    setPan((prev) => {
+      dragRef.current.panX = prev.x;
+      dragRef.current.panY = prev.y;
+      return prev;
+    });
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    const d = dragRef.current;
+    if (!d.active) return;
+    e.preventDefault();
+    setPan({ x: d.panX + (e.clientX - d.startX), y: d.panY + (e.clientY - d.startY) });
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    dragRef.current.active = false;
+    setIsDragging(false);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    if (dragRef.current.active) {
+      dragRef.current.active = false;
+      setIsDragging(false);
+    }
+  }, []);
+
+  const isDefaultView = zoom === 1 && pan.x === 0 && pan.y === 0;
+
+  if (error) {
+    return (
+      <div className={cn("my-3 rounded-lg bg-accent border border-destructive/30 p-4 text-xs text-destructive", className)}>
+        <p className="font-medium mb-1">Mermaid render error</p>
+        <pre className="whitespace-pre-wrap text-[11px] opacity-70">{error}</pre>
+      </div>
+    );
+  }
+
+  if (!svgContent) {
+        return <CodeBlock code={children} language="mermaid" wordWrap className={cn("my-3 last:mb-0", className)} />;
+  }
+
+  return (
+    <>
+      <div className={cn("my-3 last:mb-0 group relative rounded-xl border border-border overflow-hidden", surfaceClass, className)}>
+        <div className="absolute top-2 right-2 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button type="button" onClick={toggleTheme} className={cn(btnClass, surfaceClass)} title={isDark ? "Light theme" : "Dark theme"}>
+            {isDark ? <IconSun /> : <IconMoon />}
+          </button>
+          <button type="button" onClick={downloadSvg} className={cn(btnClass, surfaceClass)} title="Download SVG" disabled={!svgContent}>
+            <IconDownload />
+          </button>
+          <button type="button" onClick={openFullscreen} className={cn(btnClass, surfaceClass)} title="Fullscreen">
+            <IconFullScreen />
+          </button>
+        </div>
+        <div ref={containerRef} className="flex justify-center p-6 overflow-x-auto [&_svg]:max-w-full" />
+      </div>
+
+      <dialog
+        ref={dialogRef}
+        className={cn("m-0 p-0 w-screen h-screen max-w-none max-h-none backdrop:bg-black/40 open:flex open:flex-col", surfaceClass)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") closeFullscreen();
+        }}
+      >
+        <div className="fixed top-5 right-5 z-50 flex items-center gap-1.5">
+          <button type="button" onClick={toggleTheme} className={cn(btnClass, surfaceClass, "px-3 py-2 text-sm shadow-md")} title={isDark ? "Light theme" : "Dark theme"}>
+            {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
+          </button>
+          <button type="button" onClick={downloadSvg} className={cn(btnClass, surfaceClass, "px-3 py-2 text-sm shadow-md")} title="Download SVG" disabled={!svgContent}>
+            <IconDownload size={16} />
+          </button>
+          <button type="button" onClick={closeFullscreen} className={cn(btnClass, surfaceClass, "px-3 py-2 text-sm shadow-md")} title="Exit fullscreen">
+            <IconQuitFullScreen />
+            <span>Exit</span>
+          </button>
+        </div>
+
+        <div className={cn("fixed bottom-5 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 px-3 py-1.5 rounded-full border border-border text-xs text-muted-foreground shadow-md select-none", surfaceClass)}>
+          <span>{Math.round(zoom * 100)}%</span>
+          {!isDefaultView ? (
+            <button type="button" onClick={resetView} className="text-muted-foreground hover:text-primary cursor-pointer transition-colors border-0 bg-transparent p-0 font-[inherit]">
+              Reset
+            </button>
+          ) : null}
+        </div>
+
+        <div onWheel={handleWheel} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseLeave} onDoubleClick={resetView} className={cn("flex-1 overflow-hidden w-full h-full select-none", isDragging ? "cursor-grabbing" : "cursor-grab")}>
+          <div ref={fullscreenRef} className="flex items-center justify-center w-full h-full origin-center [&_svg]:max-w-none [&_svg]:max-h-none pointer-events-none" style={{ transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})` }} />
+        </div>
+      </dialog>
+    </>
+  );
+}

package/src/chat/message-ui/mermaidFence.ts

@@ -0,0 +1,55 @@
+type FenceScan = {
+  mermaidCount: number;
+  hasUnclosedMermaid: boolean;
+};
+
+export function scanMermaidFences(markdown: string): FenceScan {
+  let openLang: string | null = null;
+  let mermaidCount = 0;
+
+  for (const line of markdown.split("\n")) {
+    const m = /^(```+|~~~+)(.*)$/.exec(line);
+    if (!m) continue;
+
+    const info = m[2].trim();
+    if (openLang === null) {
+      openLang = (info.split(/\s+/)[0] ?? "").toLowerCase();
+      if (openLang === "mermaid") mermaidCount += 1;
+    } else if (!info) {
+      openLang = null;
+    }
+  }
+
+  return { mermaidCount, hasUnclosedMermaid: openLang === "mermaid" };
+}
+
+/** Body of the still-open mermaid fence (no closing ```), or null if none. */
+export function getOpenMermaidBody(markdown: string): string | null {
+  let openLang: string | null = null;
+  let bodyStart = -1;
+  const lines = markdown.split("\n");
+
+  for (let i = 0; i < lines.length; i++) {
+    const m = /^(```+|~~~+)(.*)$/.exec(lines[i]!);
+    if (!m) continue;
+
+    const info = m[2]!.trim();
+    if (openLang === null) {
+      openLang = (info.split(/\s+/)[0] ?? "").toLowerCase();
+      bodyStart = openLang === "mermaid" ? i + 1 : -1;
+    } else if (!info) {
+      openLang = null;
+      bodyStart = -1;
+    }
+  }
+
+  if (openLang !== "mermaid" || bodyStart < 0) return null;
+  return lines.slice(bodyStart).join("\n").replace(/\n$/, "");
+}
+
+/** True when this mermaid code block is the still-streaming (unclosed) fence. */
+export function isPendingMermaidBlock(markdown: string, codeText: string, streaming: boolean): boolean {
+  if (!streaming) return false;
+  const openBody = getOpenMermaidBody(markdown);
+  return openBody !== null && openBody === codeText;
+}

package/src/chat/message-ui/sanitizeMermaid.ts

@@ -0,0 +1,135 @@
+const SHAPES: [string, string][] = [
+  ["([", "])"],
+  ["[[", "]]"],
+  ["[(", ")]"],
+  ["((", "))"],
+  ["{{", "}}"],
+  ["[/", "/]"],
+  ["[\\", "\\]"],
+  ["[", "]"],
+  ["(", ")"],
+  ["{", "}"],
+];
+
+const KEYWORDS = new Set(["graph", "flowchart", "subgraph", "end", "direction", "click", "style", "classDef", "class", "linkStyle", "sequenceDiagram", "classDiagram", "stateDiagram", "erDiagram", "gantt", "pie", "journey", "gitGraph", "mindmap", "timeline", "TB", "TD", "BT", "RL", "LR"]);
+
+const ENTITY: Record<string, string> = {
+  "(": "#40;",
+  ")": "#41;",
+  "[": "#91;",
+  "]": "#93;",
+  "{": "#123;",
+  "}": "#125;",
+  "<": "#60;",
+  ">": "#62;",
+  '"': "#34;",
+};
+
+const HAS_BRACKET_RE = /[()[\]{}<>]/;
+const HAS_INNER_QUOTE_RE = /"/;
+
+function findCloser(line: string, start: number, closer: string): number {
+  let inQ = false;
+  for (let i = start; i <= line.length - closer.length; i++) {
+    if (line[i] === '"' && (i === 0 || line[i - 1] !== "\\")) inQ = !inQ;
+    if (!inQ && line.slice(i, i + closer.length) === closer) return i;
+  }
+  for (let i = start; i <= line.length - closer.length; i++) {
+    if (line.slice(i, i + closer.length) === closer) return i;
+  }
+  return -1;
+}
+
+function escapeLabel(raw: string): string {
+  let content = raw.trim();
+  if (/^".*"$/.test(content)) content = content.slice(1, -1);
+  content = content
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s{2,}/g, " ")
+    .trim();
+  let out = "";
+  for (const ch of content) out += ENTITY[ch] ?? ch;
+  return `"${out}"`;
+}
+
+function fixSubgraphTitles(code: string): string {
+  return code.replace(/^(\s*subgraph\s+)(?!")(.*\S.*)$/gm, (_, pre: string, title: string) => {
+    const t = title.trim();
+    if (/^".*"$/.test(t)) return `${pre}${t}`;
+    return /\s/.test(t) || HAS_BRACKET_RE.test(t) ? `${pre}"${t}"` : `${pre}${t}`;
+  });
+}
+
+function fixLine(line: string): string {
+  const trimmed = line.trim();
+  if (!trimmed || trimmed.startsWith("%%") || /^subgraph\b/.test(trimmed) || trimmed === "end") {
+    return line;
+  }
+
+  let result = "";
+  let i = 0;
+
+  while (i < line.length) {
+    const m = line.slice(i).match(/^([a-zA-Z_]\w*)/);
+    if (!m) {
+      result += line[i];
+      i++;
+      continue;
+    }
+
+    const id = m[1];
+    const afterId = i + id.length;
+
+    if (KEYWORDS.has(id)) {
+      result += id;
+      i = afterId;
+      continue;
+    }
+
+    let opener: string | null = null;
+    let closer: string | null = null;
+    for (const [op, cl] of SHAPES) {
+      if (line.startsWith(op, afterId)) {
+        opener = op;
+        closer = cl;
+        break;
+      }
+    }
+
+    if (!opener || !closer) {
+      result += id;
+      i = afterId;
+      continue;
+    }
+
+    const labelStart = afterId + opener.length;
+    const closerPos = findCloser(line, labelStart, closer);
+
+    if (closerPos === -1) {
+      result += id + opener;
+      i = labelStart;
+      continue;
+    }
+
+    const rawLabel = line.slice(labelStart, closerPos);
+    const unquoted = rawLabel.replace(/"[^"]*"/g, "");
+    if (HAS_BRACKET_RE.test(unquoted) || HAS_INNER_QUOTE_RE.test(unquoted) || /<[^>]+>/.test(rawLabel) || (rawLabel.match(/"/g) ?? []).length > 2) {
+      result += id + opener + escapeLabel(rawLabel) + closer;
+    } else {
+      result += id + opener + rawLabel + closer;
+    }
+
+    i = closerPos + closer.length;
+  }
+
+  return result;
+}
+
+/** Auto-fix common Mermaid syntax issues produced by LLMs. */
+export function sanitizeMermaid(raw: string): string {
+  let code = raw.trim();
+  code = code.replace(/\*\*([^*]+)\*\*/g, "$1");
+  code = code.replace(/(?<!\w)\*([^*]+)\*(?!\w)/g, "$1");
+  code = fixSubgraphTitles(code);
+  return code.split("\n").map(fixLine).join("\n");
+}

package/src/chat/tool-ui/BackgroundTaskToolUI.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import { formatBgElapsed, parseBgTaskRef } from "../common/bgTasks";
+import { formatToolName, timestampMs } from "../common/utils";
+import { ChatSpinner } from "../message-ui/ChatSpinner";
+import { ToolUiBadge } from "./ToolUiBadge";
+import type { ToolUIProps } from "./types";
+
+export function BackgroundTaskToolUI({ msg, assistantLabel = "Assistant", assistantColor, showAvatar = false }: ToolUIProps) {
+  const ref = parseBgTaskRef(msg.toolOutput);
+  const [now, setNow] = useState(() => Date.now());
+  const label = formatToolName(ref?.toolName ?? msg.toolLabel ?? msg.toolName ?? "Tool");
+
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div className="mt-1 animate-fadeIn">
+      <ToolUiBadge show={showAvatar} label={assistantLabel} color={assistantColor} />
+      <div className="px-4 pb-1">
+        <div className="flex gap-0">
+          <div className="w-0.5 shrink-0 self-stretch rounded-full bg-brand-700" />
+          <div className="min-w-0 flex-1 pl-2">
+            <div className="flex items-center gap-2 py-1">
+              <ChatSpinner />
+              <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">{label}</span>
+              <span className="shrink-0 rounded px-1 py-px text-[9px] font-semibold uppercase tracking-wider text-brand-700">Background</span>
+              <span className="shrink-0 text-[14px] tabular-nums text-muted-foreground">{formatBgElapsed(timestampMs(msg.timestamp), now)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/chat/tool-ui/BackgroundTasksBar.tsx

@@ -0,0 +1,152 @@
+import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { FluentIcon } from "../../icon/FluentIcon";
+import { cn } from "../../lib/cn";
+import { Modal } from "../../modal/Modal";
+import { Popconfirm } from "../../popconfirm/Popconfirm";
+import type { ChatBgTask } from "../common/bgTasks";
+import { formatBgElapsed } from "../common/bgTasks";
+import { formatToolName } from "../common/utils";
+import { ChatSpinner } from "../message-ui/ChatSpinner";
+
+function TaskLogsModal({
+  task,
+  open,
+  onClose,
+}: {
+  task: ChatBgTask | null;
+  open: boolean;
+  onClose: () => void;
+}) {
+  const logs = (task?.console ?? "").trim();
+  const preRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    const el = preRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [logs]);
+
+  return (
+    <Modal open={open} onCancel={onClose} footer={null} title={task ? formatToolName(task.toolName) : "Logs"} width={560}>
+      <pre ref={preRef} className="m-0 max-h-[50vh] overflow-auto rounded-md border border-border-subtle bg-muted px-3 py-2 font-mono text-[14px] leading-relaxed whitespace-pre-wrap break-all text-foreground">
+        {logs || "Waiting for output…"}
+      </pre>
+    </Modal>
+  );
+}
+
+function TaskRow({
+  task,
+  now,
+  cancelling,
+  onCancel,
+  onLogs,
+}: {
+  task: ChatBgTask;
+  now: number;
+  cancelling: boolean;
+  onCancel: () => void;
+  onLogs: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 px-2.5 py-1">
+      <ChatSpinner className="size-2.5" />
+      <div className="min-w-0 flex-1 truncate text-[14px] text-foreground">{formatToolName(task.toolName)}</div>
+      <span className="shrink-0 text-[14px] tabular-nums text-muted-foreground">{formatBgElapsed(task.startedAt, now)}</span>
+      <button type="button" onClick={onLogs} title="Logs" aria-label={`Logs ${formatToolName(task.toolName)}`} className="inline-flex size-5 shrink-0 items-center justify-center cursor-pointer rounded text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground">
+        <FluentIcon name="document-text-24" size={12} />
+      </button>
+      <Popconfirm title={`Stop ${formatToolName(task.toolName)}?`} okText="Stop" okType="danger" onConfirm={onCancel} getPopupContainer={() => document.body}>
+        <button type="button" disabled={cancelling} title="Stop" aria-label={`Stop ${formatToolName(task.toolName)}`} className="inline-flex h-5 shrink-0 items-center rounded px-1.5 text-[10px] cursor-pointer text-muted-foreground transition-colors hover:bg-secondary hover:text-destructive disabled:opacity-40">
+          Stop
+        </button>
+      </Popconfirm>
+    </div>
+  );
+}
+
+export type BackgroundTasksBarProps = {
+  children: ReactNode;
+  tasks?: ChatBgTask[];
+  cancellingIds?: ReadonlySet<string>;
+  onCancel?: (taskId: string) => void | Promise<void>;
+};
+
+export function BackgroundTasksBar({ children, tasks = [], cancellingIds, onCancel }: BackgroundTasksBarProps) {
+  const [open, setOpen] = useState(false);
+  const [now, setNow] = useState(() => Date.now());
+  const [logsTaskId, setLogsTaskId] = useState<string | null>(null);
+  const logsTask = logsTaskId ? (tasks.find((t) => t.taskId === logsTaskId) ?? null) : null;
+
+  useEffect(() => {
+    if (logsTaskId && !tasks.some((t) => t.taskId === logsTaskId)) {
+      setLogsTaskId(null);
+    }
+  }, [tasks, logsTaskId]);
+
+  useEffect(() => {
+    if (tasks.length === 0) {
+      setOpen(false);
+      return;
+    }
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [tasks.length]);
+
+  const listInnerRef = useRef<HTMLDivElement>(null);
+  const [listH, setListH] = useState(0);
+
+  useLayoutEffect(() => {
+    const el = listInnerRef.current;
+    if (!el) {
+      setListH(0);
+      return;
+    }
+    const update = () => setListH(el.scrollHeight);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [tasks.length, open]);
+
+  const label = tasks.length === 1 ? "1 background task" : `${tasks.length} background tasks`;
+  const reserve = tasks.length > 0 ? 28 + (open ? listH : 0) : 0;
+
+  return (
+    <>
+      <div className="pointer-events-none shrink-0 overflow-hidden transition-[height] duration-200 ease-out" style={{ height: reserve }} aria-hidden />
+      <div className="relative">
+        {children}
+
+        {tasks.length > 0 ? (
+          <div className="absolute right-5 bottom-[calc(100%)] left-5 z-20 overflow-hidden rounded-t-lg border-x border-t border-border">
+            <div className={cn("flex h-7.5 items-center gap-1 px-1", open && "border-b border-border-subtle")}>
+              <button type="button" onClick={() => setOpen((v) => !v)} className="flex min-w-0 flex-1 font-medium items-center gap-1 rounded-md px-1.5 py-1 text-[14px] text-muted-foreground/90 transition-colors hover:text-foreground" aria-expanded={open} aria-label={label}>
+                {open ? <FluentIcon name="arrow-square-down-24" size={12} /> : <FluentIcon name="arrow-square-down-24" size={12} className="-rotate-90" />}
+                <span className="truncate">{label}</span>
+              </button>
+            </div>
+
+            <div className={cn("overflow-hidden transition-[max-height] duration-200 ease-out", open ? "max-h-55" : "max-h-0")}>
+              <div ref={listInnerRef} className="max-h-55 overflow-y-auto py-0.5">
+                {tasks.map((task) => (
+                  <TaskRow
+                    key={task.taskId}
+                    task={task}
+                    now={now}
+                    cancelling={cancellingIds?.has(task.taskId) ?? false}
+                    onCancel={() => {
+                      void onCancel?.(task.taskId);
+                    }}
+                    onLogs={() => setLogsTaskId(task.taskId)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <TaskLogsModal task={logsTask} open={Boolean(logsTask)} onClose={() => setLogsTaskId(null)} />
+    </>
+  );
+}