@stigmer/react 3.1.16 → 3.2.0

package/src/environment/useToolCredentialsReadiness.ts

@@ -0,0 +1,122 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import type { ResourceRef } from "@stigmer/sdk";
+import { useStigmer } from "../hooks.js";
+
+/**
+ * Readiness of a connection's tool credentials for its visitors'
+ * executions. Shared vocabulary for every connection kind that binds
+ * `environment_refs` (shares, channels):
+ *
+ * - `na` — nothing to check: the caller decided the check does not
+ *   apply (no MCP tools, connection disabled, local deployment, …).
+ * - `needs-credentials` — the check applies but no environments are
+ *   bound: tool calls will fail until credentials are bound.
+ * - `checking` — lookups in flight.
+ * - `ready` — every bound environment is shared with the organization.
+ * - `blocked` — one or more bound environments are private; their
+ *   `org/slug` references are listed for the hint copy.
+ */
+export type ToolCredentialsReadiness =
+  | { readonly status: "na" }
+  | { readonly status: "needs-credentials" }
+  | { readonly status: "checking" }
+  | { readonly status: "ready" }
+  | { readonly status: "blocked"; readonly privateEnvironments: readonly string[] };
+
+const NA: ToolCredentialsReadiness = { status: "na" };
+const NEEDS_CREDENTIALS: ToolCredentialsReadiness = { status: "needs-credentials" };
+
+/**
+ * Data hook that checks whether a connection's bound credentials will
+ * work at runtime — i.e. whether environments are bound and each one is
+ * shared with the organization (`visibility_org`).
+ *
+ * The runtime resolves connection-bound credentials exclusively through
+ * the org-shared environment seam (decision 011 — the agent's default
+ * instance stays pristine and is never consulted). So a tool-using
+ * agent with an empty binding list is *guaranteed* broken for the
+ * connection's users, and this hook says so explicitly
+ * (`needs-credentials`) instead of staying silent — the gap that made a
+ * share misconfiguration invisible until a visitor's first message
+ * failed (sharing project, session 12).
+ *
+ * `applicable` is the caller's predicate: connection kinds differ in
+ * when the check matters (shares add an audience arm; channels do not),
+ * so the caller owns that decision and this hook owns the lookups. All
+ * lookups run as the owner viewing the dialog, who can read the bound
+ * environments.
+ *
+ * Connection-kind wrappers: {@link useShareToolReadiness} (shares),
+ * {@link useChannelToolReadiness} (channels).
+ */
+export function useToolCredentialsReadiness(
+  applicable: boolean,
+  environmentRefs: readonly ResourceRef[],
+): ToolCredentialsReadiness {
+  const stigmer = useStigmer();
+  const [checked, setChecked] = useState<ToolCredentialsReadiness>(NA);
+
+  // Stable key for the effect: the visibility lookups depend only on
+  // which environments are bound, not on the array's identity.
+  const refsKey = useMemo(
+    () => environmentRefs.map((ref) => `${ref.org}/${ref.slug}`).join(","),
+    [environmentRefs],
+  );
+
+  const shouldFetch = applicable && refsKey !== "";
+
+  useEffect(() => {
+    if (!shouldFetch) {
+      setChecked(NA);
+      return;
+    }
+
+    let cancelled = false;
+    setChecked({ status: "checking" });
+
+    (async (): Promise<ToolCredentialsReadiness> => {
+      const privateRefs: string[] = [];
+      for (const ref of refsKey.split(",")) {
+        const [org, slug] = ref.split("/");
+        try {
+          const env = await stigmer.environment.getByReference({ org, slug });
+          if (
+            env.metadata?.visibility !== ApiResourceVisibility.visibility_org
+          ) {
+            privateRefs.push(ref);
+          }
+        } catch {
+          // Unreadable ref (deleted, foreign): the runtime's merge will
+          // skip it too — surface it as blocking.
+          privateRefs.push(ref);
+        }
+      }
+
+      return privateRefs.length === 0
+        ? { status: "ready" }
+        : { status: "blocked", privateEnvironments: privateRefs };
+    })().then(
+      (result) => {
+        if (!cancelled) setChecked(result);
+      },
+      () => {
+        // The hint is best-effort pre-flight advice — a failed check must
+        // never block the dialog. The runtime error path still diagnoses.
+        if (!cancelled) setChecked(NA);
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [shouldFetch, refsKey, stigmer]);
+
+  if (!applicable) return NA;
+  // Zero bindings needs no lookup: a tool-using agent without bound
+  // credentials is broken for the connection's users by construction.
+  if (refsKey === "") return NEEDS_CREDENTIALS;
+  return checked;
+}

package/src/execution/ArtifactContentBody.tsx

@@ -2,7 +2,7 @@
 
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
 import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { ArtifactContentRenderer } from "./ArtifactContentRenderer.js";
+import { ArtifactFileContent } from "./ArtifactFileContent.js";
 import type { SkillPackageDetection } from "../library/detect-skill-package.js";
 
 /** Props for {@link ArtifactContentBody}. */
@@ -55,8 +55,10 @@ export function ArtifactContentBody({
       {isDirectory ? (
         <DirectoryContentView artifact={artifact} skillDetection={skillDetection} />
       ) : (
-        <FileContentStateView
-          artifact={artifact}
+        // File states delegate to the shared, model-agnostic component so the
+        // workflow's Artifact-resource document renders content identically.
+        <ArtifactFileContent
+          fileName={artifact.name}
           content={content}
           contentType={contentType}
           isLoading={isLoading}
@@ -68,69 +70,6 @@ export function ArtifactContentBody({
   );
 }
 
-// ---------------------------------------------------------------------------
-// File content states (loading / error / binary / text)
-// ---------------------------------------------------------------------------
-
-const SKELETON_LINE_WIDTHS = [85, 72, 90, 65, 78, 88, 70, 82] as const;
-
-function FileContentStateView({
-  artifact,
-  content,
-  contentType,
-  isLoading,
-  error,
-  isTruncated,
-}: {
-  readonly artifact: ExecutionArtifact;
-  readonly content: string | null;
-  readonly contentType: string | null;
-  readonly isLoading: boolean;
-  readonly error: Error | null;
-  readonly isTruncated: boolean;
-}) {
-  if (isLoading) {
-    return (
-      <div className="space-y-2 p-4" aria-busy="true" aria-label="Loading content">
-        {SKELETON_LINE_WIDTHS.map((width, i) => (
-          <div
-            key={i}
-            className="h-4 animate-pulse rounded bg-muted"
-            style={{ width: `${width}%` }}
-            aria-hidden="true"
-          />
-        ))}
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
-        <ErrorAlertIcon />
-        <p className="text-sm text-destructive">{error.message}</p>
-      </div>
-    );
-  }
-
-  if (content === null) {
-    return (
-      <div className="p-8 text-center text-sm text-muted-foreground">
-        Content not available for preview.
-      </div>
-    );
-  }
-
-  return (
-    <ArtifactContentRenderer
-      content={content}
-      fileName={artifact.name}
-      contentType={contentType}
-      isTruncated={isTruncated}
-    />
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Directory content (skill banner + file listing)
 // ---------------------------------------------------------------------------
@@ -231,25 +170,4 @@ function FolderSmallIcon() {
       <path d="M13 11C13 11.55 12.55 12 12 12H2C1.45 12 1 11.55 1 11V3C1 2.45 1.45 2 2 2H5L7 4H12C12.55 4 13 4.45 13 5V11Z" />
     </svg>
   );
-}
-
-function ErrorAlertIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-destructive"
-      aria-hidden="true"
-    >
-      <circle cx="8" cy="8" r="6.5" />
-      <path d="M8 5.5V8.5" />
-      <circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none" />
-    </svg>
-  );
-}
+}

package/src/execution/ArtifactFileContent.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+// The shared file-content state machine for artifact bodies (loading / error /
+// unavailable / text). Domain: execution (data-model-agnostic).
+
+import { ArtifactContentRenderer } from "./ArtifactContentRenderer.js";
+
+/** Props for {@link ArtifactFileContent}. */
+export interface ArtifactFileContentProps {
+  /** File name driving the render-mode dispatch (markdown / yaml / json / text). */
+  readonly fileName: string;
+  /** Decoded text content, or `null` (binary / loading / error). */
+  readonly content: string | null;
+  /** Server-detected content type (rendering-strategy fallback). */
+  readonly contentType: string | null;
+  /** `true` while the content request is in-flight. */
+  readonly isLoading: boolean;
+  /** Content-fetch error, or `null`. */
+  readonly error: Error | null;
+  /** Whether the fetched content was truncated by the server's size cap. */
+  readonly isTruncated: boolean;
+}
+
+const SKELETON_LINE_WIDTHS = [85, 72, 90, 65, 78, 88, 70, 82] as const;
+
+/**
+ * The file-content states of an artifact body: loading skeleton, error,
+ * "not available for preview" (binary / unfetched), or the rendered text via
+ * {@link ArtifactContentRenderer}.
+ *
+ * Extracted from `ArtifactContentBody` so surfaces on BOTH artifact data
+ * models render file content identically — the session's `ExecutionArtifact`
+ * bodies (modal + document) and the workflow's `Artifact`-resource document.
+ * Deliberately takes plain fields, not an artifact type: the two models share
+ * no proto, only this presentation.
+ */
+export function ArtifactFileContent({
+  fileName,
+  content,
+  contentType,
+  isLoading,
+  error,
+  isTruncated,
+}: ArtifactFileContentProps) {
+  if (isLoading) {
+    return (
+      <div className="space-y-2 p-4" aria-busy="true" aria-label="Loading content">
+        {SKELETON_LINE_WIDTHS.map((width, i) => (
+          <div
+            key={i}
+            className="h-4 animate-pulse rounded bg-muted"
+            style={{ width: `${width}%` }}
+            aria-hidden="true"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
+        <ErrorAlertIcon />
+        <p className="text-sm text-destructive">{error.message}</p>
+      </div>
+    );
+  }
+
+  if (content === null) {
+    return (
+      <div className="p-8 text-center text-sm text-muted-foreground">
+        Content not available for preview.
+      </div>
+    );
+  }
+
+  return (
+    <ArtifactContentRenderer
+      content={content}
+      fileName={fileName}
+      contentType={contentType}
+      isTruncated={isTruncated}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function ErrorAlertIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-destructive"
+      aria-hidden="true"
+    >
+      <circle cx="8" cy="8" r="6.5" />
+      <path d="M8 5.5V8.5" />
+      <circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}

package/src/execution/ArtifactRow.tsx

@@ -1,11 +1,16 @@
 "use client";
 
+// Session-model artifact list row: adapts an ExecutionArtifact + its download
+// wiring onto the shared, data-model-agnostic ArtifactRowView.
+
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
-import { ExecutionArtifactKind } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { cn } from "@stigmer/theme";
-import { FileTypeIcon, FolderTypeIcon } from "../internal/file-icons/index.js";
+import { useMemo } from "react";
+import {
+  fromExecutionArtifact,
+  type ArtifactRowItem,
+} from "./artifact-row-item.js";
+import { ArtifactRowView } from "./ArtifactRowView.js";
 import { useArtifactDownload } from "./useArtifactDownload.js";
-import { formatArtifactSize } from "./artifact-utils.js";
 
 /** Props for {@link ArtifactRow}. */
 export interface ArtifactRowProps {
@@ -23,12 +28,8 @@ export interface ArtifactRowProps {
   /** Single click / Enter / Space: open the artifact (a preview tab, or a modal). */
   readonly onOpen: () => void;
   /**
-   * Double click: promote the artifact to a persistent (pinned) tab. Mirrors the
-   * file tree's `onOpenFile` (preview) / `onActivateFile` (pin) split — the
-   * leading single click of the double click has already opened the preview, so
-   * this promotes it. Omit in panel-less hosts (e.g. the modal-only widget):
-   * with no handler the row binds no `onDoubleClick`, so a double click is just
-   * two harmless single clicks, exactly as `FileTreeNode` behaves.
+   * Double click: promote the artifact to a persistent (pinned) tab — see
+   * {@link ArtifactRowViewProps.onActivate}. Omit in panel-less hosts.
    */
   readonly onActivate?: () => void;
   /** Additional CSS classes for the row's `<li>`. */
@@ -36,20 +37,12 @@ export interface ArtifactRowProps {
 }
 
 /**
- * One dense, VS Code-style artifact row: a full-width open button (shared
- * file-type icon + name + optional collision subtitle + size) with a sibling,
- * hover/focus-revealed Download button.
- *
- * The open target and the Download control are SIBLINGS, never nested — a
- * `<button>` inside a `<button>` is an axe `nested-interactive` (WCAG 4.1.2)
- * violation. This mirrors `ExplorerRoot`'s header + remove-control pattern.
- *
- * Deliberately execution-pure and presentational: it takes only the artifact,
- * its `executionId`, and open/activate closures — no session-domain types and
- * no content fetch (resource detection and Apply/Push live in the opened
- * document/modal, not the list). The two hosts — the session panel's
- * `ArtifactsTab` facet and the panel-less {@link ArtifactsWidget} — map
- * their entries onto these props and own the behavior wiring.
+ * The `ExecutionArtifact` host of the shared {@link ArtifactRowView}: it owns
+ * the session model's identity and download mechanics (presigned URL minted
+ * by `executionId` + `storageKey` via {@link useArtifactDownload}) and maps
+ * the artifact onto the view-model. The workflow's `Artifact`-resource host is
+ * `WorkflowArtifactRow` — same row UI, different data model (deliberately
+ * unified only at the presentational layer).
  *
  * @see ArtifactsTab — session-panel facet (rows open editor-pane document tabs)
  * @see ArtifactsWidget — panel-less embeddable (rows open the preview modal)
@@ -62,104 +55,21 @@ export function ArtifactRow({
   onActivate,
   className,
 }: ArtifactRowProps) {
-  const isDirectory = artifact.kind === ExecutionArtifactKind.DIRECTORY;
   const { download, isDownloading } = useArtifactDownload(executionId);
 
-  const parentDir =
-    hasNameCollision && artifact.sandboxPath
-      ? parentDirectory(artifact.sandboxPath)
-      : null;
-
-  return (
-    <li className={cn("group flex items-stretch", className)}>
-      <button
-        type="button"
-        onClick={onOpen}
-        onDoubleClick={onActivate}
-        title={artifact.sandboxPath || artifact.name}
-        className={cn(
-          "flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground transition-colors",
-          "hover:bg-muted hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-        )}
-      >
-        <span className="shrink-0 text-muted-foreground">
-          {isDirectory ? (
-            <FolderTypeIcon open={false} />
-          ) : (
-            <FileTypeIcon fileName={artifact.name} />
-          )}
-        </span>
-        <span className="min-w-0 flex-1 truncate text-foreground">
-          {artifact.name}
-          {isDirectory && "/"}
-          {parentDir && (
-            <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
-              {parentDir}
-            </span>
-          )}
-        </span>
-        <span className="shrink-0 tabular-nums text-[0.65rem] text-muted-foreground-faint">
-          {formatArtifactSize(artifact.sizeBytes)}
-        </span>
-      </button>
-      <button
-        type="button"
-        onClick={() => download(artifact.storageKey, artifact.name)}
-        disabled={isDownloading}
-        aria-label={
-          isDownloading
-            ? `Preparing ${artifact.name}`
-            : `Download ${artifact.name}`
-        }
-        title={isDirectory ? "Download ZIP" : "Download"}
-        className={cn(
-          "flex shrink-0 items-center px-2 text-muted-foreground opacity-0 transition-opacity",
-          "group-hover:opacity-100 focus-visible:opacity-100",
-          "hover:text-foreground disabled:opacity-50",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-        )}
-      >
-        <DownloadIcon />
-      </button>
-    </li>
+  const item = useMemo<ArtifactRowItem>(
+    () => fromExecutionArtifact(artifact, hasNameCollision),
+    [artifact, hasNameCollision],
   );
-}
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Extracts a human-readable parent directory label from a sandbox path.
- * Given `/workspace/configs/agent.yaml` returns `configs/`.
- * Returns `null` when the path has no meaningful parent segment.
- */
-function parentDirectory(sandboxPath: string): string | null {
-  const lastSlash = sandboxPath.lastIndexOf("/");
-  if (lastSlash <= 0) return null;
-  const parent = sandboxPath.slice(0, lastSlash);
-  const segment = parent.slice(parent.lastIndexOf("/") + 1);
-  return segment ? `${segment}/` : null;
-}
 
-function DownloadIcon() {
   return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="shrink-0"
-      aria-hidden="true"
-    >
-      <path d="M6 1.5V8.5" />
-      <path d="M3 6L6 9L9 6" />
-      <path d="M2 10.5H10" />
-    </svg>
+    <ArtifactRowView
+      item={item}
+      onOpen={onOpen}
+      onActivate={onActivate}
+      onDownload={() => download(artifact.storageKey, artifact.name)}
+      isDownloading={isDownloading}
+      className={className}
+    />
   );
 }

package/src/execution/ArtifactRowView.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+// Pure presentational artifact list row shared by the session and workflow
+// artifact facets. Domain: execution (data-model-agnostic — see ArtifactRowItem).
+
+import { cn } from "@stigmer/theme";
+import { FileTypeIcon, FolderTypeIcon } from "../internal/file-icons/index.js";
+import type { ArtifactRowItem } from "./artifact-row-item.js";
+import { formatArtifactSize } from "./artifact-utils.js";
+
+/** Props for {@link ArtifactRowView}. */
+export interface ArtifactRowViewProps {
+  /** The view-model to render (see {@link ArtifactRowItem} adapters). */
+  readonly item: ArtifactRowItem;
+  /** Single click / Enter / Space: open the artifact (a preview tab, or a modal). */
+  readonly onOpen: () => void;
+  /**
+   * Double click: promote the artifact to a persistent (pinned) tab. Mirrors the
+   * file tree's `onOpenFile` (preview) / `onActivateFile` (pin) split — the
+   * leading single click of the double click has already opened the preview, so
+   * this promotes it. Omit in panel-less hosts (e.g. the modal-only widget):
+   * with no handler the row binds no `onDoubleClick`, so a double click is just
+   * two harmless single clicks, exactly as `FileTreeNode` behaves.
+   */
+  readonly onActivate?: () => void;
+  /** Download the artifact (each host owns its own download mechanics). */
+  readonly onDownload: () => void;
+  /** `true` while the host's download is in flight — disables the control. */
+  readonly isDownloading: boolean;
+  /** Additional CSS classes for the row's `<li>`. */
+  readonly className?: string;
+}
+
+/**
+ * One dense, VS Code-style artifact row: a full-width open button (shared
+ * file-type icon + name + optional disambiguation subtitle + size) with a
+ * sibling, hover/focus-revealed Download button.
+ *
+ * The open target and the Download control are SIBLINGS, never nested — a
+ * `<button>` inside a `<button>` is an axe `nested-interactive` (WCAG 4.1.2)
+ * violation. This mirrors `ExplorerRoot`'s header + remove-control pattern.
+ *
+ * Deliberately data-model-agnostic: it renders an {@link ArtifactRowItem}
+ * view-model and takes open/activate/download closures, so the session
+ * (`ExecutionArtifact`) and workflow (`Artifact` resource) hosts share one row
+ * UI without sharing a data model. The domain wrappers — session `ArtifactRow`
+ * and workflow `WorkflowArtifactRow` — own identity, adapters, and download
+ * wiring.
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function ArtifactRowView({
+  item,
+  onOpen,
+  onActivate,
+  onDownload,
+  isDownloading,
+  className,
+}: ArtifactRowViewProps) {
+  return (
+    <li className={cn("group flex items-stretch", className)}>
+      <button
+        type="button"
+        onClick={onOpen}
+        onDoubleClick={onActivate}
+        title={item.tooltip}
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-left text-xs text-muted-foreground transition-colors",
+          "hover:bg-muted hover:text-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        )}
+      >
+        <span className="shrink-0 text-muted-foreground">
+          {item.isDirectory ? (
+            <FolderTypeIcon open={false} />
+          ) : (
+            <FileTypeIcon fileName={item.name} />
+          )}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-foreground">
+          {item.name}
+          {item.isDirectory && "/"}
+          {item.subtitlePath && (
+            <span className="ml-1.5 text-[0.65rem] text-muted-foreground">
+              {item.subtitlePath}
+            </span>
+          )}
+        </span>
+        <span className="shrink-0 tabular-nums text-[0.65rem] text-muted-foreground-faint">
+          {formatArtifactSize(item.sizeBytes)}
+        </span>
+      </button>
+      <button
+        type="button"
+        onClick={onDownload}
+        disabled={isDownloading}
+        aria-label={
+          isDownloading ? `Preparing ${item.name}` : `Download ${item.name}`
+        }
+        title={item.isDirectory ? "Download ZIP" : "Download"}
+        className={cn(
+          "flex shrink-0 items-center px-2 text-muted-foreground opacity-0 transition-opacity",
+          "group-hover:opacity-100 focus-visible:opacity-100",
+          "hover:text-foreground disabled:opacity-50",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+        )}
+      >
+        <DownloadIcon />
+      </button>
+    </li>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function DownloadIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="shrink-0"
+      aria-hidden="true"
+    >
+      <path d="M6 1.5V8.5" />
+      <path d="M3 6L6 9L9 6" />
+      <path d="M2 10.5H10" />
+    </svg>
+  );
+}