@invana/ui 0.0.24 → 0.0.26

package/dist/index.cjs

@@ -3984,6 +3984,56 @@ var CitationRow = React23__namespace.forwardRef(
   )
 );
 CitationRow.displayName = "CitationRow";
+var ClampedText = React23__namespace.forwardRef(
+  ({
+    lines = 3,
+    moreLabel = "Show more",
+    lessLabel = "Show less",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [expanded, setExpanded] = React23__namespace.useState(false);
+    const [clipped, setClipped] = React23__namespace.useState(false);
+    const bodyRef = React23__namespace.useRef(null);
+    React23__namespace.useLayoutEffect(() => {
+      const el = bodyRef.current;
+      if (!el || expanded) return;
+      const measure = () => setClipped(el.scrollHeight - el.clientHeight > 1);
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [expanded, children, lines]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("min-w-0", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          ref: bodyRef,
+          className: cn(
+            "whitespace-pre-line",
+            !expanded && "overflow-hidden [-webkit-box-orient:vertical] [-webkit-line-clamp:var(--clamped-lines)] [display:-webkit-box]"
+          ),
+          style: { "--clamped-lines": lines },
+          children
+        }
+      ),
+      clipped ? /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "link",
+          size: "sm",
+          className: "h-auto p-0",
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((open) => !open),
+          children: expanded ? lessLabel : moreLabel
+        }
+      ) : null
+    ] });
+  }
+);
+ClampedText.displayName = "ClampedText";
 var ClarifyCard = React23__namespace.forwardRef(
   ({
     step,
@@ -4669,6 +4719,8 @@ function PanelContent({
 }
 function PanelStack({
   sections,
+  stackRef,
+  onCollapsedChange,
   headerHeight = 35,
   withHandle = false,
   className,
@@ -4713,19 +4765,26 @@ function PanelStack({
     for (const s of targets) refs.current[s.id]?.collapse();
     group.setLayout(next);
   }, []);
-  const toggle = (id) => {
+  const notify = React23__namespace.useRef(onCollapsedChange);
+  React23__namespace.useEffect(() => {
+    notify.current = onCollapsedChange;
+  }, [onCollapsedChange]);
+  const collapsedRef = React23__namespace.useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const collapsePanel = React23__namespace.useCallback((id) => {
     const ref = refs.current[id];
-    if (!ref) return;
-    if (!ref.isCollapsed()) {
-      ref.collapse();
-      return;
-    }
+    if (!ref || ref.isCollapsed()) return;
+    ref.collapse();
+  }, []);
+  const expandPanel = React23__namespace.useCallback((id) => {
+    const ref = refs.current[id];
+    if (!ref || !ref.isCollapsed()) return;
     ref.expand();
     if (!ref.isCollapsed()) return;
     const group = groupRef.current;
     if (!group) return;
     const layout = group.getLayout();
-    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsed[panelId]).sort((a, b) => b[1] - a[1])[0];
+    const donor = Object.entries(layout).filter(([panelId]) => panelId !== id && !collapsedRef.current[panelId]).sort((a, b) => b[1] - a[1])[0];
     if (!donor) return;
     const [donorId, donorPct] = donor;
     const share = donorPct / 2;
@@ -4734,7 +4793,26 @@ function PanelStack({
       [id]: (layout[id] ?? 0) + share,
       [donorId]: donorPct - share
     });
-  };
+  }, []);
+  const toggle = React23__namespace.useCallback(
+    (id) => {
+      const ref = refs.current[id];
+      if (!ref) return;
+      if (ref.isCollapsed()) expandPanel(id);
+      else collapsePanel(id);
+    },
+    [expandPanel, collapsePanel]
+  );
+  React23__namespace.useImperativeHandle(
+    stackRef,
+    () => ({
+      expand: expandPanel,
+      collapse: collapsePanel,
+      toggle,
+      isCollapsed: (id) => !!collapsedRef.current[id]
+    }),
+    [expandPanel, collapsePanel, toggle]
+  );
   return (
     // Header actions are nav items, and those carry tooltips — provide the
     // context here so a `PanelStack` works outside an app shell too. Nesting
@@ -4772,9 +4850,12 @@ function PanelStack({
                 },
                 onResize: (size) => {
                   const next = size.inPixels <= headerHeight + 1;
-                  setCollapsed(
-                    (prev) => prev[section.id] === next ? prev : { ...prev, [section.id]: next }
-                  );
+                  setCollapsed((prev) => {
+                    if (prev[section.id] === next) return prev;
+                    const map = { ...prev, [section.id]: next };
+                    notify.current?.(map);
+                    return map;
+                  });
                 },
                 className: "flex flex-col overflow-hidden",
                 children: [
@@ -5192,6 +5273,27 @@ var SearchInput = ({
     }
   );
 };
+var Eyebrow = React23__namespace.forwardRef(
+  ({ aside, tone = "muted", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-baseline gap-2 text-meta font-semibold uppercase tracking-wide",
+        tone === "muted" && "text-muted-foreground",
+        tone === "foreground" && "text-foreground",
+        tone === "accent" && "text-primary",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+        aside != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto shrink-0 font-normal normal-case tracking-normal text-muted-foreground", children: aside }) : null
+      ]
+    }
+  )
+);
+Eyebrow.displayName = "Eyebrow";
 var SectionHeader = React23__namespace.forwardRef(({ icon, title, count, actions, bare, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
@@ -5365,6 +5467,299 @@ function TabbedPanel({
     footerContent && /* @__PURE__ */ jsxRuntime.jsx(CardFooter, { className: cn("shrink-0", footerClassName), children: footerContent })
   ] }) }) });
 }
+var BAR = {
+  succeeded: "bg-success",
+  running: "bg-info",
+  failed: "bg-destructive",
+  needs_input: "bg-warning",
+  stopped: "bg-muted-foreground",
+  skipped: "bg-transparent",
+  queued: "bg-transparent"
+};
+var DOT = {
+  succeeded: "success",
+  running: "running",
+  failed: "error",
+  needs_input: "warning",
+  stopped: "muted",
+  skipped: "muted",
+  queued: "queued"
+};
+var STATUS_LABEL = {
+  succeeded: "succeeded",
+  running: "running",
+  failed: "failed",
+  needs_input: "needs input",
+  stopped: "stopped",
+  skipped: "never ran",
+  queued: "not started"
+};
+function renderResult(result) {
+  if (result == null) return null;
+  if (React23__namespace.isValidElement(result)) return result;
+  if (typeof result !== "object") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-meta", children: String(result) });
+  }
+  const entries = Object.entries(result);
+  const scalars = entries.filter(([, v]) => v == null || typeof v !== "object");
+  const nested = entries.filter(([, v]) => v != null && typeof v === "object");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    scalars.length ? /* @__PURE__ */ jsxRuntime.jsx(PropertyList, { labelWidth: 96, children: scalars.map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsx(PropertyRow, { label: k, mono: true, className: "py-0.5", children: v == null ? "\u2014" : String(v) }, k)) }) : null,
+    nested.map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-meta text-muted-foreground", children: k }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-40 overflow-auto border border-border bg-muted/40 p-1.5 font-mono text-meta", children: JSON.stringify(v, null, 2) })
+    ] }, k))
+  ] });
+}
+var TaskGanttDetailCard = React23__namespace.forwardRef(({ task, elapsedMs, formatDuration = defaultFormatDuration, className, ...props }, ref) => {
+  const status = task.status ?? "succeeded";
+  const ms = task.durationMs ?? elapsedMs;
+  const duration = task.duration ?? (ms != null ? formatDuration(ms) : "\u2014");
+  const attempts = task.attempts ?? [];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { tone: DOT[status], size: "md", className: "translate-y-px" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-meta font-medium", children: task.key }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-mono text-meta text-muted-foreground tabular-nums", children: duration })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-meta text-muted-foreground", children: [
+      STATUS_LABEL[status],
+      task.summary != null ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        " \xB7 ",
+        task.summary
+      ] }) : null
+    ] }),
+    attempts.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children: attempts.map((a, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-meta text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-warning", children: [
+        "attempt ",
+        i + 1
+      ] }),
+      " ",
+      a.title ?? `${a.status ?? "failed"}${a.durationMs != null ? ` \xB7 ${formatDuration(a.durationMs)}` : ""}`
+    ] }, i)) }) : null,
+    task.error != null ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { borderColor: "var(--color-destructive)" },
+        className: "border-l-2 bg-destructive/10 px-2 py-1.5",
+        children: [
+          task.error.code != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-meta font-medium text-destructive", children: task.error.code }) : null,
+          task.error.message != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-meta", children: task.error.message }) : null,
+          task.error.detail != null ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mt-1 max-h-32 overflow-auto whitespace-pre-wrap font-mono text-meta text-muted-foreground", children: task.error.detail }) : null
+        ]
+      }
+    ) : null,
+    task.result != null ? renderResult(task.result) : null,
+    task.log != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border pt-1.5 font-mono text-meta text-muted-foreground", children: task.log }) : null
+  ] });
+});
+TaskGanttDetailCard.displayName = "TaskGanttDetailCard";
+var toMs = (t) => t instanceof Date ? t.getTime() : typeof t === "number" ? t : Date.parse(t);
+var defaultFormatDuration = (ms) => {
+  if (ms < 100) return `${Math.round(ms)}ms`;
+  const s = ms / 1e3;
+  return s < 10 ? `${(Math.round(s * 10) / 10).toFixed(1)}s` : `${Math.round(s)}s`;
+};
+var defaultFormatTick = (ms) => {
+  if (ms === 0) return "0s";
+  const s = ms / 1e3;
+  return Number.isInteger(s) ? `${s}s` : `${(Math.round(s * 10) / 10).toFixed(1)}s`;
+};
+function place(seg, origin) {
+  let start = seg.startMs;
+  if (start == null && seg.startedAt != null && origin != null) {
+    start = toMs(seg.startedAt) - origin;
+  }
+  if (start == null || Number.isNaN(start)) return null;
+  let duration = seg.durationMs;
+  if (duration == null && seg.startedAt != null && seg.finishedAt != null) {
+    duration = toMs(seg.finishedAt) - toMs(seg.startedAt);
+  }
+  return { start, duration: duration != null && duration > 0 ? duration : 0 };
+}
+var TaskGantt = React23__namespace.forwardRef(
+  ({
+    tasks,
+    origin,
+    spanMs,
+    nowMs,
+    openEnded,
+    ticks = 4,
+    formatTick = defaultFormatTick,
+    formatDuration = defaultFormatDuration,
+    labelWidth = 112,
+    density = "comfortable",
+    showDetail = true,
+    renderDetail,
+    detailProps,
+    selectedKey,
+    onSelectTask,
+    className,
+    ...props
+  }, ref) => {
+    const barHeight = density === "compact" ? 11 : 13;
+    const durationWidth = 40;
+    const rows = React23__namespace.useMemo(() => {
+      const stamps = [];
+      for (const t of [...tasks, ...tasks.flatMap((t2) => t2.attempts ?? [])]) {
+        if (t.startedAt != null) stamps.push(toMs(t.startedAt));
+      }
+      const zero = origin != null ? toMs(origin) : stamps.length ? Math.min(...stamps) : void 0;
+      return tasks.map((task) => {
+        const segments = [...task.attempts ?? [], task].map((seg) => {
+          const at = place(seg, zero);
+          return at ? { ...at, status: seg.status ?? task.status ?? "succeeded", title: seg.title } : null;
+        }).filter((s) => s !== null);
+        const last = segments[segments.length - 1];
+        return { task, segments, end: last ? last.start + last.duration : 0 };
+      });
+    }, [tasks, origin]);
+    const span = Math.max(
+      spanMs ?? Math.max(nowMs ?? 0, ...rows.map((r) => r.end)),
+      1
+    );
+    const pct = (ms) => `${Math.max(0, Math.min(100, ms / span * 100))}%`;
+    const axis = Array.from(
+      { length: ticks + 1 },
+      (_, i) => formatTick(span / ticks * i)
+    );
+    const lastLabel = openEnded ? `${axis[axis.length - 1]}+` : axis[axis.length - 1];
+    const detailFor = (task, elapsedMs) => {
+      if (!showDetail) return null;
+      if (renderDetail) return renderDetail(task);
+      if (task.detail != null) return task.detail;
+      const hasBody = task.result != null || task.error != null || task.log != null || task.summary != null || (task.attempts?.length ?? 0) > 0;
+      if (!hasBody) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TaskGanttDetailCard,
+        {
+          task,
+          elapsedMs,
+          formatDuration
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex flex-col", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pt-0.5 pb-1", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { width: labelWidth } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex flex-1", children: axis.slice(0, -1).map((label, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "flex-1 border-l border-border pl-1 text-meta text-muted-foreground tabular-nums",
+            children: label
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "shrink-0 text-right text-meta text-muted-foreground tabular-nums",
+            style: { width: durationWidth },
+            children: lastLabel
+          }
+        )
+      ] }),
+      rows.map(({ task, segments }) => {
+        const neverRan = segments.length === 0;
+        const selected = selectedKey != null && selectedKey === task.key;
+        const pickable = onSelectTask != null;
+        const elapsed = task.durationMs ?? segments[segments.length - 1]?.duration;
+        const duration = task.duration ?? (neverRan || elapsed == null ? "\u2014" : formatDuration(elapsed));
+        const detail = detailFor(task, elapsed);
+        const row = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 py-[3px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "shrink-0 truncate font-mono text-meta",
+                neverRan && "text-muted-foreground"
+              ),
+              style: { width: labelWidth },
+              title: task.key,
+              children: task.label ?? task.key
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "relative min-w-0 flex-1 bg-muted/55",
+              style: { height: barHeight },
+              children: [
+                neverRan ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 border border-dashed border-border" }) : segments.map((seg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    title: seg.title ?? `${task.key} \xB7 ${seg.status} \xB7 ${formatDuration(seg.duration)}`,
+                    className: cn("absolute inset-y-0 rounded-[1px]", BAR[seg.status]),
+                    style: {
+                      left: pct(seg.start),
+                      width: pct(seg.duration),
+                      minWidth: 2
+                    }
+                  },
+                  i
+                )),
+                nowMs != null ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute -top-0.5 -bottom-0.5 w-px bg-info/70",
+                    style: { left: pct(nowMs) },
+                    "aria-hidden": true
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "shrink-0 text-right font-mono text-meta text-muted-foreground tabular-nums",
+              style: { width: durationWidth },
+              children: duration
+            }
+          )
+        ] }) });
+        const trigger = pickable ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": selected,
+            onClick: () => onSelectTask(task.key),
+            className: cn(
+              "w-full cursor-pointer text-left focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+              "hover:bg-accent/60",
+              selected && "bg-accent"
+            ),
+            children: row
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(detail != null && "hover:bg-accent/60"), children: row });
+        if (detail == null) return /* @__PURE__ */ jsxRuntime.jsx("div", { children: trigger }, task.key);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          HoverCard,
+          {
+            openDelay: detailProps?.openDelay ?? 200,
+            closeDelay: detailProps?.closeDelay ?? 80,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HoverCardTrigger, { asChild: true, children: trigger }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                HoverCardContent,
+                {
+                  side: detailProps?.side ?? "right",
+                  align: detailProps?.align ?? "start",
+                  sideOffset: detailProps?.sideOffset ?? 8,
+                  style: detailProps?.width != null ? { width: detailProps.width } : void 0,
+                  className: cn("w-72 p-3", detailProps?.className),
+                  children: detail
+                }
+              )
+            ]
+          },
+          task.key
+        );
+      })
+    ] });
+  }
+);
+TaskGantt.displayName = "TaskGantt";
 var TemplatePicker = React23__namespace.forwardRef(({ heading, options, value, onSelect, footnote, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   "div",
   {
@@ -6215,6 +6610,7 @@ exports.ChatSessionTaskRow = ChatSessionTaskRow;
 exports.CitationList = CitationList;
 exports.CitationMarker = CitationMarker;
 exports.CitationRow = CitationRow;
+exports.ClampedText = ClampedText;
 exports.ClarifyCard = ClarifyCard;
 exports.Command = Command;
 exports.CommandDialog = CommandDialog;
@@ -6261,6 +6657,7 @@ exports.EmissionHeader = EmissionHeader;
 exports.EmptyState = EmptyState;
 exports.EmptyStateLock = EmptyStateLock;
 exports.ErrorBoundary = ErrorBoundary;
+exports.Eyebrow = Eyebrow;
 exports.FilterBar = FilterBar;
 exports.FilterChip = FilterChip;
 exports.HeatStrip = HeatStrip;
@@ -6393,6 +6790,8 @@ exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
+exports.TaskGantt = TaskGantt;
+exports.TaskGanttDetailCard = TaskGanttDetailCard;
 exports.TemplatePicker = TemplatePicker;
 exports.Terminal = Terminal;
 exports.TerminalLine = TerminalLine;