@protolabsai/ui 0.22.0 → 0.22.1

package/dist/plugin-kit.css

@@ -2896,11 +2896,16 @@ a.pl-changelog__version:hover {
   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;
-  width: 100%;
   padding: 6px 9px;
   background: none;
   border: none;
@@ -2910,6 +2915,14 @@ a.pl-changelog__version:hover {
   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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protolabsai/ui",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/ToolCard.stories.tsx

@@ -21,7 +21,26 @@ export const States: Story = {
   render: () => (
     <div style={{ maxWidth: 460 }}>
       <ToolCardList>
-        <ToolCard name="web_fetch" status="done" icon={<Globe />} duration={1240} defaultOpen>
+        <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>

package/src/styles/tool-card.css

@@ -24,11 +24,16 @@
   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;
-  width: 100%;
   padding: 6px 9px;
   background: none;
   border: none;
@@ -38,6 +43,14 @@
   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;
 }

package/src/tool-card.tsx

@@ -61,6 +61,7 @@ export function ToolCard({
   duration,
   defaultOpen = false,
   nested,
+  actions,
   children,
   className,
 }: {
@@ -73,6 +74,9 @@ export function ToolCard({
   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;
@@ -81,34 +85,37 @@ export function ToolCard({
   const hasBody = children != null;
   const card = (
     <div className={cx("pl-toolcard", `pl-toolcard--${status}`, className)}>
-      <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
+      <div className="pl-toolcard__head-row">
+        <button
+          type="button"
+          className="pl-toolcard__head"
+          aria-expanded={hasBody ? open : undefined}
+          disabled={!hasBody}
+          onClick={() => setOpen((v) => !v)}
         >
-          <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
+            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>
-        )}
-        <span className="pl-toolcard__name">{name}</span>
-        {duration != null && <span className="pl-toolcard__dur">{formatDuration(duration)}</span>}
-        <StatusGlyph status={status} />
-      </button>
+          {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>
   );