@protolabsai/ui 0.21.0 → 0.22.1

package/dist/plugin-kit.css

@@ -2869,6 +2869,188 @@ a.pl-changelog__version:hover {
   gap: var(--pl-space-2);
 }
 
+/* ── ui component: tool-card.css ───────────────────────────────────────────── */
+/* @protolabsai/ui — ToolCard (streamed tool-call disclosure). Ported from the
+   protoAgent console's tool-card family onto --pl-* tokens. The frame only — the
+   body is a host-filled slot (per-tool value rendering stays app-side). */
+
+.pl-toolcard-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pl-space-2);
+  min-width: 0;
+}
+.pl-toolcard-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.pl-toolcard {
+  min-width: 0;
+  max-width: 100%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  overflow: hidden;
+}
+
+.pl-toolcard__head-row {
+  display: flex;
+  align-items: center;
+}
+.pl-toolcard__head {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 9px;
+  background: none;
+  border: none;
+  color: var(--pl-color-fg-muted);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.pl-toolcard__actions {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 6px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-toolcard__head:disabled {
+  cursor: default;
+}
+.pl-toolcard__head:hover:not(:disabled) .pl-toolcard__name {
+  color: var(--pl-color-fg);
+}
+
+.pl-toolcard__caret {
+  flex: none;
+  display: inline-flex;
+  color: var(--pl-color-fg-subtle);
+  transition: transform var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-toolcard__caret--open {
+  transform: rotate(90deg);
+}
+.pl-toolcard__caret--hidden {
+  visibility: hidden;
+}
+
+.pl-toolcard__icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--pl-color-fg-muted);
+}
+.pl-toolcard__icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pl-toolcard__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--pl-font-mono);
+  color: var(--pl-color-fg);
+}
+
+.pl-toolcard__dur {
+  flex: none;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  color: var(--pl-color-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.pl-toolcard__status {
+  flex: none;
+  display: inline-flex;
+}
+.pl-toolcard__status--done {
+  color: var(--pl-color-status-success);
+}
+.pl-toolcard__status--error {
+  color: var(--pl-color-status-error);
+}
+.pl-toolcard__status--running {
+  color: var(--pl-color-status-warning);
+}
+.pl-toolcard__spin {
+  animation: pl-toolcard-spin 0.8s linear infinite;
+}
+@keyframes pl-toolcard-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pl-toolcard__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 9px;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+}
+
+/* subagent `task` nesting — indented rail of child cards */
+.pl-toolcard__children {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  margin-left: 14px;
+  padding-left: 10px;
+  border-left: 2px solid var(--pl-color-border);
+}
+
+/* body section (input / result) */
+.pl-toolcard__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.pl-toolcard__section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.pl-toolcard__label {
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-toolcard__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg-muted);
+  cursor: pointer;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-toolcard__copy:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}
+
 /* ── ui component: theming.css ─────────────────────────────────────────────── */
 /* @protolabsai/ui — ThemePanel (live token editor). All --pl-* driven, so the
    panel itself re-skins live as you edit. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -21,6 +21,7 @@
     "./data": "./src/data.tsx",
     "./menu": "./src/menu.tsx",
     "./app-shell": "./src/app-shell.tsx",
+    "./tool-card": "./src/tool-card.tsx",
     "./theming": "./src/theming.tsx",
     "./styles.css": "./src/styles.css",
     "./plugin-kit.css": "./dist/plugin-kit.css",

package/src/ToolCard.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToolCard, ToolCardList, ToolSection } from "./tool-card";
+
+const meta: Meta = { title: "Components/ToolCard" };
+export default meta;
+type Story = StoryObj;
+
+const Mono = ({ children }: { children: string }) => (
+  <pre style={{ margin: 0, fontFamily: "var(--pl-font-mono)", fontSize: 12, color: "var(--pl-color-fg-muted)", whiteSpace: "pre-wrap" }}>{children}</pre>
+);
+
+const Globe = () => (
+  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+    <circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
+  </svg>
+);
+
+/** The three states + a collapsed (no-detail) running call. Body is a host slot —
+ *  here filled with `ToolSection`s; in protoAgent it's the per-tool value renderer. */
+export const States: Story = {
+  render: () => (
+    <div style={{ maxWidth: 460 }}>
+      <ToolCardList>
+        <ToolCard
+          name="web_fetch"
+          status="done"
+          icon={<Globe />}
+          duration={1240}
+          defaultOpen
+          actions={
+            <button
+              type="button"
+              className="pl-btn pl-btn--ghost pl-btn--icon pl-btn--sm"
+              title="Re-run"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M23 4v6h-6M1 20v-6h6" />
+                <path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15" />
+              </svg>
+            </button>
+          }
+        >
+          <ToolSection label="input" copyText='{"url":"https://protolabs.studio"}'>
+            <Mono>{`{ "url": "https://protolabs.studio" }`}</Mono>
+          </ToolSection>
+          <ToolSection label="result" copyText="200 OK · 18kb">
+            <Mono>200 OK · 18kb · text/html</Mono>
+          </ToolSection>
+        </ToolCard>
+        <ToolCard name="web_search" status="running" duration={820}>
+          <ToolSection label="input">
+            <Mono>protoLabs design system</Mono>
+          </ToolSection>
+        </ToolCard>
+        <ToolCard name="calculator" status="error">
+          <ToolSection label="result">
+            <Mono>SyntaxError: unexpected token</Mono>
+          </ToolSection>
+        </ToolCard>
+        <ToolCard name="current_time" status="done" duration={12} />
+      </ToolCardList>
+    </div>
+  ),
+};
+
+/** Subagent `task` with nested child tool calls (the `parentId` grouping). */
+export const Nested: Story = {
+  render: () => (
+    <div style={{ maxWidth: 460 }}>
+      <ToolCard
+        name="task"
+        status="done"
+        duration={4300}
+        nested={
+          <>
+            <ToolCard name="web_search" status="done" duration={910}>
+              <ToolSection label="result"><Mono>7 results</Mono></ToolSection>
+            </ToolCard>
+            <ToolCard name="web_fetch" status="done" duration={1320}>
+              <ToolSection label="result"><Mono>200 OK</Mono></ToolSection>
+            </ToolCard>
+          </>
+        }
+      >
+        <ToolSection label="input"><Mono>research the brand voice</Mono></ToolSection>
+      </ToolCard>
+    </div>
+  ),
+};

package/src/styles/tool-card.css

@@ -0,0 +1,180 @@
+/* @protolabsai/ui — ToolCard (streamed tool-call disclosure). Ported from the
+   protoAgent console's tool-card family onto --pl-* tokens. The frame only — the
+   body is a host-filled slot (per-tool value rendering stays app-side). */
+
+.pl-toolcard-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pl-space-2);
+  min-width: 0;
+}
+.pl-toolcard-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.pl-toolcard {
+  min-width: 0;
+  max-width: 100%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  overflow: hidden;
+}
+
+.pl-toolcard__head-row {
+  display: flex;
+  align-items: center;
+}
+.pl-toolcard__head {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 9px;
+  background: none;
+  border: none;
+  color: var(--pl-color-fg-muted);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.pl-toolcard__actions {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 6px;
+  color: var(--pl-color-fg-muted);
+}
+.pl-toolcard__head:disabled {
+  cursor: default;
+}
+.pl-toolcard__head:hover:not(:disabled) .pl-toolcard__name {
+  color: var(--pl-color-fg);
+}
+
+.pl-toolcard__caret {
+  flex: none;
+  display: inline-flex;
+  color: var(--pl-color-fg-subtle);
+  transition: transform var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-toolcard__caret--open {
+  transform: rotate(90deg);
+}
+.pl-toolcard__caret--hidden {
+  visibility: hidden;
+}
+
+.pl-toolcard__icon {
+  flex: none;
+  display: inline-flex;
+  color: var(--pl-color-fg-muted);
+}
+.pl-toolcard__icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pl-toolcard__name {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--pl-font-mono);
+  color: var(--pl-color-fg);
+}
+
+.pl-toolcard__dur {
+  flex: none;
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  color: var(--pl-color-fg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.pl-toolcard__status {
+  flex: none;
+  display: inline-flex;
+}
+.pl-toolcard__status--done {
+  color: var(--pl-color-status-success);
+}
+.pl-toolcard__status--error {
+  color: var(--pl-color-status-error);
+}
+.pl-toolcard__status--running {
+  color: var(--pl-color-status-warning);
+}
+.pl-toolcard__spin {
+  animation: pl-toolcard-spin 0.8s linear infinite;
+}
+@keyframes pl-toolcard-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.pl-toolcard__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 9px;
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+}
+
+/* subagent `task` nesting — indented rail of child cards */
+.pl-toolcard__children {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  margin-left: 14px;
+  padding-left: 10px;
+  border-left: 2px solid var(--pl-color-border);
+}
+
+/* body section (input / result) */
+.pl-toolcard__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.pl-toolcard__section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.pl-toolcard__label {
+  font-family: var(--pl-font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pl-color-fg-subtle);
+}
+.pl-toolcard__copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg-muted);
+  cursor: pointer;
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-toolcard__copy:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}

package/src/styles.css

@@ -10,4 +10,5 @@
 @import "./styles/data.css";
 @import "./styles/menu.css";
 @import "./styles/app-shell.css";
+@import "./styles/tool-card.css";
 @import "./styles/theming.css";

package/src/tool-card.tsx

@@ -0,0 +1,184 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { cx } from "./internal";
+
+// The disclosure FRAME for a streamed tool call. Presentation only: the host owns
+// the ToolCall data (name/status/duration come straight off the wire type) and fills
+// the body slot with its own per-tool value renderers. The DS deliberately does NOT
+// render tool output — that's domain logic (calculator equations, fetched-page
+// previews, KV grids …) that stays app-side. See protoContent issue #187.
+
+/** Mirrors the host's `ToolCall.status`. */
+export type ToolCardStatus = "running" | "done" | "error";
+
+/** Optional wrapper around a stream of ToolCards — a gapped column. */
+export function ToolCardList({ children, className }: { children: ReactNode; className?: string }) {
+  return <div className={cx("pl-toolcard-list", className)}>{children}</div>;
+}
+
+function formatDuration(ms: number): string {
+  return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
+}
+
+function StatusGlyph({ status }: { status: ToolCardStatus }) {
+  if (status === "running") {
+    return (
+      <span className="pl-toolcard__status pl-toolcard__status--running" aria-label="running">
+        <svg className="pl-toolcard__spin" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
+          <path d="M21 12a9 9 0 1 1-6.2-8.5" />
+        </svg>
+      </span>
+    );
+  }
+  if (status === "error") {
+    return (
+      <span className="pl-toolcard__status pl-toolcard__status--error" aria-label="error">
+        <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
+          <path d="M6 6l12 12M18 6L6 18" />
+        </svg>
+      </span>
+    );
+  }
+  return (
+    <span className="pl-toolcard__status pl-toolcard__status--done" aria-label="done">
+      <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 6L9 17l-5-5" />
+      </svg>
+    </span>
+  );
+}
+
+/** A single tool-call disclosure: a row with leading icon, name, duration, and a
+ *  running→done/error status glyph, expanding to a body slot. Collapsed and STICKY
+ *  by default — the open state is the user's explicit choice, so the message never
+ *  reflows as tools start and finish. `status`/`name`/`duration` come off the host's
+ *  ToolCall; `children` is the rendered input/result (compose `ToolSection`s);
+ *  `nested` holds child cards for a subagent `task` (indented). */
+export function ToolCard({
+  name,
+  status,
+  icon,
+  duration,
+  defaultOpen = false,
+  nested,
+  actions,
+  children,
+  className,
+}: {
+  name: ReactNode;
+  status: ToolCardStatus;
+  /** Leading glyph — the host maps tool→icon (the DS stays icon-agnostic). */
+  icon?: ReactNode;
+  /** Elapsed ms (`ToolCall.durationMs`) — rendered "820ms" / "1.2s". */
+  duration?: number;
+  defaultOpen?: boolean;
+  /** Indented child tool cards for a subagent `task`. */
+  nested?: ReactNode;
+  /** Trailing header slot — hang a re-run / per-tool affordance here. Sits outside
+   *  the disclosure toggle (so it can hold its own buttons). */
+  actions?: ReactNode;
+  /** Expanded body — the rendered input/result (compose `ToolSection`s). */
+  children?: ReactNode;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const hasBody = children != null;
+  const card = (
+    <div className={cx("pl-toolcard", `pl-toolcard--${status}`, className)}>
+      <div className="pl-toolcard__head-row">
+        <button
+          type="button"
+          className="pl-toolcard__head"
+          aria-expanded={hasBody ? open : undefined}
+          disabled={!hasBody}
+          onClick={() => setOpen((v) => !v)}
+        >
+          <span
+            className={cx(
+              "pl-toolcard__caret",
+              !hasBody && "pl-toolcard__caret--hidden",
+              open && "pl-toolcard__caret--open",
+            )}
+            aria-hidden
+          >
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 6l6 6-6 6" />
+            </svg>
+          </span>
+          {icon != null && (
+            <span className="pl-toolcard__icon" aria-hidden>
+              {icon}
+            </span>
+          )}
+          <span className="pl-toolcard__name">{name}</span>
+          {duration != null && <span className="pl-toolcard__dur">{formatDuration(duration)}</span>}
+          <StatusGlyph status={status} />
+        </button>
+        {actions != null && <div className="pl-toolcard__actions">{actions}</div>}
+      </div>
+      {hasBody && open && <div className="pl-toolcard__body">{children}</div>}
+    </div>
+  );
+  if (nested == null) return card;
+  return (
+    <div className="pl-toolcard-group">
+      {card}
+      <div className="pl-toolcard__children">{nested}</div>
+    </div>
+  );
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      type="button"
+      className="pl-toolcard__copy"
+      title="Copy to clipboard"
+      aria-label={copied ? "Copied" : "Copy"}
+      onClick={async () => {
+        try {
+          await navigator.clipboard.writeText(text);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 1200);
+        } catch {
+          /* clipboard unavailable (insecure context / denied) */
+        }
+      }}
+    >
+      {copied ? (
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M20 6L9 17l-5-5" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="2" />
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+/** A labelled body section with an optional copy affordance — e.g. input / result.
+ *  Compose inside `ToolCard`'s body; fill `children` with the rendered value. */
+export function ToolSection({
+  label,
+  copyText,
+  children,
+}: {
+  label: ReactNode;
+  /** When set, renders a self-contained copy-to-clipboard button. */
+  copyText?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="pl-toolcard__section">
+      <div className="pl-toolcard__section-head">
+        <span className="pl-toolcard__label">{label}</span>
+        {copyText != null && <CopyButton text={copyText} />}
+      </div>
+      {children}
+    </div>
+  );
+}