@backmatter/studio 0.0.1

package/src/mcp/McpConnectorsPanel.tsx

@@ -0,0 +1,872 @@
+// packages/studio/src/mcp/McpConnectorsPanel.tsx
+import { useEffect, useMemo, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { Menu } from "@base-ui/react/menu";
+import {
+  createUserMcp,
+  createWorkspaceMcp,
+  deleteUserMcp,
+  deleteWorkspaceMcp,
+  fetchUserMcp,
+  fetchWorkspaceMcp,
+  testUserMcp,
+  testWorkspaceMcp,
+  updateUserMcp,
+  updateWorkspaceMcp,
+  type McpConnector,
+  type McpWriteBody,
+} from "../api";
+import { MoreIcon } from "../chrome/icons";
+import { Button } from "../ui/Button";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { Field } from "../ui/Field";
+import { Textarea } from "../ui/Input";
+import { Panel, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { mcpConnectorDraftJson, parseMcpJsonPaste } from "./parse-json";
+
+function statusLabel(connector: McpConnector): string {
+  if (!connector.enabled) return "Off";
+  if (connector.status === "connected") return "Connected";
+  if (connector.status === "needs_auth") return "Needs attention";
+  if (connector.status === "error") return "Needs attention";
+  return "Unknown";
+}
+
+function needsAttention(connector: McpConnector): boolean {
+  return (
+    connector.enabled &&
+    (connector.status === "error" || connector.status === "needs_auth")
+  );
+}
+
+export function McpConnectorsPanel({
+  scope,
+  workspaceId,
+  canEdit,
+}: {
+  scope: "user" | "workspace";
+  workspaceId?: string;
+  canEdit: boolean;
+}) {
+  const [connectors, setConnectors] = useState<McpConnector[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [editing, setEditing] = useState<"new" | McpConnector | null>(null);
+  const [pendingDelete, setPendingDelete] = useState<McpConnector | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [togglingId, setTogglingId] = useState<string | null>(null);
+
+  async function load() {
+    setError(null);
+    const res =
+      scope === "user"
+        ? await fetchUserMcp()
+        : await fetchWorkspaceMcp(workspaceId!);
+    setConnectors(res.connectors);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    const req =
+      scope === "user" ? fetchUserMcp() : fetchWorkspaceMcp(workspaceId!);
+    void req
+      .then((res) => {
+        if (!cancelled) setConnectors(res.connectors);
+      })
+      .catch((err: Error) => {
+        if (!cancelled) setError(err.message);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [scope, workspaceId]);
+
+  const attention = useMemo(
+    () => connectors.filter(needsAttention),
+    [connectors],
+  );
+  const connected = useMemo(
+    () => connectors.filter((c) => !needsAttention(c)),
+    [connectors],
+  );
+
+  async function onSave(body: McpWriteBody, id?: string) {
+    setBusy(true);
+    setError(null);
+    try {
+      if (scope === "user") {
+        if (id) await updateUserMcp(id, body);
+        else await createUserMcp(body);
+      } else {
+        if (id) await updateWorkspaceMcp(workspaceId!, id, body);
+        else await createWorkspaceMcp(workspaceId!, body);
+      }
+      await load();
+      setEditing(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Save failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function onToggleEnabled(connector: McpConnector, enabled: boolean) {
+    const previous = connectors;
+    setConnectors((rows) =>
+      rows.map((row) => (row.id === connector.id ? { ...row, enabled } : row)),
+    );
+    if (editing && editing !== "new" && editing.id === connector.id) {
+      setEditing({ ...editing, enabled });
+    }
+    setTogglingId(connector.id);
+    setError(null);
+    try {
+      if (scope === "user") await updateUserMcp(connector.id, { enabled });
+      else await updateWorkspaceMcp(workspaceId!, connector.id, { enabled });
+    } catch (err) {
+      setConnectors(previous);
+      setError(err instanceof Error ? err.message : "Update failed");
+    } finally {
+      setTogglingId(null);
+    }
+  }
+
+  async function onTest(id: string) {
+    setBusy(true);
+    setError(null);
+    try {
+      if (scope === "user") await testUserMcp(id);
+      else await testWorkspaceMcp(workspaceId!, id);
+      await load();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Test failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function onDelete() {
+    if (!pendingDelete) return;
+    setBusy(true);
+    setError(null);
+    try {
+      if (scope === "user") await deleteUserMcp(pendingDelete.id);
+      else await deleteWorkspaceMcp(workspaceId!, pendingDelete.id);
+      await load();
+      if (editing && editing !== "new" && editing.id === pendingDelete.id) {
+        setEditing(null);
+      }
+      setPendingDelete(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Delete failed");
+      setPendingDelete(null);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Stack gap="lg">
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {canEdit ? (
+        <div {...stylex.props(styles.toolbar)}>
+          <Button
+            variant="secondary"
+            disabled={busy}
+            onClick={() => setEditing("new")}
+          >
+            Add connector
+          </Button>
+        </div>
+      ) : null}
+      {editing ? (
+        <McpConnectorForm
+          initial={editing === "new" ? null : editing}
+          canEdit={canEdit}
+          busy={busy}
+          togglingEnabled={
+            editing !== "new" && togglingId === editing.id
+          }
+          onToggleEnabled={
+            editing === "new"
+              ? undefined
+              : (enabled) => onToggleEnabled(editing, enabled)
+          }
+          onCancel={() => setEditing(null)}
+          onSave={onSave}
+          onTest={editing === "new" ? undefined : () => onTest(editing.id)}
+          onDelete={
+            editing === "new" ? undefined : () => setPendingDelete(editing)
+          }
+        />
+      ) : null}
+      {loading ? <Text tone="muted">Loading connectors…</Text> : null}
+      {!loading && connectors.length === 0 && !editing ? (
+        <Panel>
+          <Text tone="muted">
+            {canEdit
+              ? "No connectors yet. Paste a remote MCP server as JSON."
+              : "No connectors on this workspace."}
+          </Text>
+        </Panel>
+      ) : null}
+      {attention.length > 0 ? (
+        <ConnectorGroup
+          title="Needs attention"
+          connectors={attention}
+          canEdit={canEdit}
+          togglingId={togglingId}
+          onSelect={setEditing}
+          onToggleEnabled={onToggleEnabled}
+        />
+      ) : null}
+      {connected.length > 0 ? (
+        <ConnectorGroup
+          title="Connected"
+          connectors={connected}
+          canEdit={canEdit}
+          togglingId={togglingId}
+          onSelect={setEditing}
+          onToggleEnabled={onToggleEnabled}
+        />
+      ) : null}
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        onOpenChange={(open) => !open && setPendingDelete(null)}
+        title="Remove connector?"
+        description={
+          pendingDelete
+            ? `${pendingDelete.name} will no longer be available in chat.`
+            : undefined
+        }
+        confirmLabel="Remove"
+        destructive
+        busy={busy}
+        onConfirm={onDelete}
+      />
+    </Stack>
+  );
+}
+
+function ConnectorGroup({
+  title,
+  connectors,
+  canEdit,
+  togglingId,
+  onSelect,
+  onToggleEnabled,
+}: {
+  title: string;
+  connectors: McpConnector[];
+  canEdit: boolean;
+  togglingId: string | null;
+  onSelect: (connector: McpConnector) => void;
+  onToggleEnabled: (connector: McpConnector, enabled: boolean) => void;
+}) {
+  return (
+    <div>
+      <Text as="h2" size="sm" weight="medium" tone="muted">
+        {title}
+      </Text>
+      <div {...stylex.props(styles.list)}>
+        {connectors.map((connector) => (
+          <div key={connector.id} {...stylex.props(styles.row)}>
+            <button
+              type="button"
+              {...stylex.props(styles.rowMain)}
+              onClick={() => onSelect(connector)}
+            >
+              <span {...stylex.props(styles.rowBody)}>
+                <span {...stylex.props(styles.rowTitle)}>{connector.name}</span>
+                <span {...stylex.props(styles.rowMeta)}>
+                  {statusLabel(connector)}
+                  {connector.toolCount > 0
+                    ? ` · ${connector.toolCount} tools`
+                    : ""}
+                </span>
+              </span>
+            </button>
+            <Switch
+              checked={connector.enabled}
+              disabled={!canEdit || togglingId === connector.id}
+              label={
+                connector.enabled
+                  ? `Disable ${connector.name}`
+                  : `Enable ${connector.name}`
+              }
+              onChange={(enabled) => onToggleEnabled(connector, enabled)}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChevronIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 6.5 8 10.5l4-4" />
+    </svg>
+  );
+}
+
+function Switch({
+  checked,
+  disabled,
+  label,
+  onChange,
+}: {
+  checked: boolean;
+  disabled?: boolean;
+  label: string;
+  onChange: (next: boolean) => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      {...stylex.props(styles.switchHit, disabled && styles.switchDisabled)}
+      onClick={() => onChange(!checked)}
+    >
+      <span {...stylex.props(styles.switchTrack, checked && styles.switchTrackOn)}>
+        <span {...stylex.props(styles.switchKnob, checked && styles.switchKnobOn)} />
+      </span>
+    </button>
+  );
+}
+
+function McpConnectorForm({
+  initial,
+  canEdit,
+  busy,
+  togglingEnabled,
+  onToggleEnabled,
+  onCancel,
+  onSave,
+  onTest,
+  onDelete,
+}: {
+  initial: McpConnector | null;
+  canEdit: boolean;
+  busy: boolean;
+  togglingEnabled?: boolean;
+  onToggleEnabled?: (enabled: boolean) => void;
+  onCancel: () => void;
+  onSave: (body: McpWriteBody, id?: string) => Promise<void>;
+  onTest?: () => void;
+  onDelete?: () => void;
+}) {
+  const title = initial?.name ?? "New connector";
+  const [paste, setPaste] = useState(
+    initial ? mcpConnectorDraftJson(initial) : "",
+  );
+  const [enabled, setEnabled] = useState(initial?.enabled ?? true);
+  const [tools, setTools] = useState(initial?.tools ?? []);
+  const [openTools, setOpenTools] = useState<Set<string>>(() => new Set());
+  const [formError, setFormError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setEnabled(initial?.enabled ?? true);
+  }, [initial?.enabled]);
+
+  function setServerEnabled(next: boolean) {
+    setEnabled(next);
+    onToggleEnabled?.(next);
+  }
+
+  function toggleToolOpen(name: string) {
+    setOpenTools((current) => {
+      const next = new Set(current);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    const parsed = parseMcpJsonPaste(paste);
+    if (!parsed?.url) {
+      setFormError(
+        'Paste JSON with a url, e.g. { "name": "Stripe", "url": "https://…", "headers": { "Authorization": "Bearer …" } }.',
+      );
+      return;
+    }
+    const name = parsed.name ?? initial?.name ?? "";
+    if (!name) {
+      setFormError("Add a name, or use { \"stripe\": { \"url\": \"…\" } }.");
+      return;
+    }
+    const body: McpWriteBody = {
+      name,
+      url: parsed.url,
+      enabled,
+      tools: tools.map((t) => ({ name: t.name, enabled: t.enabled })),
+    };
+    if (parsed.headers) body.headers = parsed.headers;
+    await onSave(body, initial?.id);
+  }
+
+  return (
+    <Panel>
+      <form onSubmit={(e) => void submit(e)}>
+        <Stack>
+          <div {...stylex.props(styles.formHeader)}>
+            <div {...stylex.props(styles.formTitle)}>
+              <Text as="h2" size="lg" weight="medium" truncate>
+                {title}
+              </Text>
+            </div>
+            <div {...stylex.props(styles.headerControls)}>
+              {onTest || onDelete ? (
+                <Menu.Root>
+                  <Menu.Trigger
+                    disabled={busy}
+                    aria-label={`Actions for ${title}`}
+                    className={cx(styles.moreHit, busy && styles.switchDisabled)}
+                  >
+                    <MoreIcon />
+                  </Menu.Trigger>
+                  <Menu.Portal>
+                    <Menu.Positioner
+                      side="bottom"
+                      align="end"
+                      sideOffset={6}
+                      className={cx(popup.positioner)}
+                    >
+                      <Menu.Popup
+                        aria-label={`${title} actions`}
+                        className={(state) =>
+                          popupClassName(state, styles.moreMenu)
+                        }
+                      >
+                        {onTest ? (
+                          <Menu.Item
+                            label="Test connection"
+                            disabled={busy}
+                            onClick={onTest}
+                            className={(state) =>
+                              cx(
+                                popup.item,
+                                styles.menuItem,
+                                state.highlighted && popup.itemHighlighted,
+                              )
+                            }
+                          >
+                            Test connection
+                          </Menu.Item>
+                        ) : null}
+                        {canEdit && onDelete ? (
+                          <Menu.Item
+                            label="Remove"
+                            disabled={busy}
+                            onClick={onDelete}
+                            className={(state) =>
+                              cx(
+                                popup.item,
+                                styles.menuItem,
+                                styles.menuDanger,
+                                state.highlighted && popup.itemHighlighted,
+                              )
+                            }
+                          >
+                            Remove
+                          </Menu.Item>
+                        ) : null}
+                      </Menu.Popup>
+                    </Menu.Positioner>
+                  </Menu.Portal>
+                </Menu.Root>
+              ) : null}
+              <Switch
+                checked={enabled}
+                disabled={!canEdit || busy || togglingEnabled}
+                label={enabled ? `Disable ${title}` : `Enable ${title}`}
+                onChange={setServerEnabled}
+              />
+            </div>
+          </div>
+          {initial?.statusError ? (
+            <Text tone="danger">{initial.statusError}</Text>
+          ) : null}
+          {formError ? <Text tone="danger">{formError}</Text> : null}
+          <Field label="JSON">
+            <Textarea
+              mono
+              value={paste}
+              onChange={(e) => setPaste(e.target.value)}
+              placeholder={`{\n  "name": "Stripe",\n  "url": "https://mcp.example.com",\n  "headers": { "Authorization": "Bearer …" }\n}`}
+              disabled={!canEdit || busy}
+              spellCheck={false}
+            />
+          </Field>
+          {initial && canEdit ? (
+            <Text tone="muted" size="sm">
+              Omit headers to keep the stored secret. Include headers to rotate them.
+            </Text>
+          ) : null}
+          {tools.length > 0 ? (
+            <Stack gap="sm">
+              <Text as="h3" size="sm" weight="medium" tone="muted">
+                Tools
+              </Text>
+              <div {...stylex.props(styles.list)}>
+                {tools.map((tool) => {
+                  const open = openTools.has(tool.name);
+                  return (
+                    <div key={tool.name} {...stylex.props(styles.toolItem)}>
+                      <div {...stylex.props(styles.toolRow)}>
+                        <button
+                          type="button"
+                          {...stylex.props(styles.toolMain)}
+                          aria-expanded={open}
+                          aria-label={
+                            open
+                              ? `Hide description for ${tool.name}`
+                              : `Show description for ${tool.name}`
+                          }
+                          onClick={() => toggleToolOpen(tool.name)}
+                        >
+                          <span
+                            {...stylex.props(
+                              styles.chevron,
+                              open && styles.chevronOpen,
+                            )}
+                            aria-hidden
+                          >
+                            <ChevronIcon />
+                          </span>
+                          <span {...stylex.props(styles.toolName)}>{tool.name}</span>
+                        </button>
+                        <Switch
+                          checked={tool.enabled}
+                          disabled={!canEdit || busy}
+                          label={
+                            tool.enabled
+                              ? `Disable ${tool.name}`
+                              : `Enable ${tool.name}`
+                          }
+                          onChange={(next) =>
+                            setTools((current) =>
+                              current.map((t) =>
+                                t.name === tool.name
+                                  ? { ...t, enabled: next }
+                                  : t,
+                              ),
+                            )
+                          }
+                        />
+                      </div>
+                      {open ? (
+                        <p {...stylex.props(styles.toolDesc)}>
+                          {tool.description || "No description."}
+                        </p>
+                      ) : null}
+                    </div>
+                  );
+                })}
+              </div>
+            </Stack>
+          ) : null}
+          <div {...stylex.props(styles.actions)}>
+            <Button type="button" variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+            {canEdit ? (
+              <Button type="submit" variant="secondary" disabled={busy}>
+                {initial ? "Save" : "Add"}
+              </Button>
+            ) : null}
+          </div>
+        </Stack>
+      </form>
+    </Panel>
+  );
+}
+
+const hover = "@media (hover: hover)";
+
+const styles = stylex.create({
+  toolbar: {
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  list: {
+    marginTop: space.sm,
+    display: "flex",
+    flexDirection: "column",
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    overflow: "hidden",
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+    minHeight: "44px",
+    width: "100%",
+    paddingInline: space.lg,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
+    ":last-child": {
+      borderBottomWidth: 0,
+    },
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  rowMain: {
+    display: "flex",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0,
+    minHeight: "44px",
+    paddingBlock: space.md,
+    paddingInline: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    textAlign: "left",
+    cursor: "pointer",
+  },
+  rowBody: {
+    display: "flex",
+    minWidth: 0,
+    flexDirection: "column",
+    gap: 2,
+  },
+  rowTitle: {
+    fontSize: type.md,
+    fontWeight: 500,
+  },
+  rowMeta: {
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+  switchHit: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: "44px",
+    height: "44px",
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    touchAction: "manipulation",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+  },
+  switchTrack: {
+    position: "relative",
+    display: "block",
+    width: "36px",
+    height: "20px",
+    borderRadius: 999,
+    backgroundColor: colors.border,
+    transitionProperty: "background-color",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease-out",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  switchTrackOn: {
+    backgroundColor: colors.accent,
+  },
+  switchKnob: {
+    position: "absolute",
+    top: "2px",
+    left: "2px",
+    width: "16px",
+    height: "16px",
+    borderRadius: 999,
+    backgroundColor: colors.bgSurface,
+    boxShadow: "0 1px 2px rgba(24, 24, 27, 0.2)",
+    transform: "translateX(0)",
+    transitionProperty: "transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease-out",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  switchKnobOn: {
+    transform: "translateX(16px)",
+  },
+  switchDisabled: {
+    opacity: 0.55,
+    cursor: "default",
+  },
+  formHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+    minHeight: "44px",
+  },
+  formTitle: {
+    minWidth: 0,
+    flex: 1,
+  },
+  headerControls: {
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+  },
+  moreHit: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: "44px",
+    height: "44px",
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.md,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    touchAction: "manipulation",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  moreMenu: {
+    minWidth: "180px",
+  },
+  menuItem: {
+    cursor: "pointer",
+    fontWeight: 500,
+  },
+  menuDanger: {
+    color: colors.danger,
+  },
+  toolItem: {
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    ":last-child": {
+      borderBottomWidth: 0,
+    },
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  toolRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    minHeight: "44px",
+    paddingInline: space.md,
+  },
+  toolMain: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    flex: 1,
+    minWidth: 0,
+    minHeight: "44px",
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.text,
+    textAlign: "left",
+    cursor: "pointer",
+    touchAction: "manipulation",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+  },
+  toolName: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: type.sm,
+    fontWeight: 500,
+  },
+  chevron: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+    transform: "rotate(-90deg)",
+    transitionProperty: "transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "ease-out",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  chevronOpen: {
+    transform: "rotate(0deg)",
+  },
+  toolDesc: {
+    margin: 0,
+    paddingTop: 0,
+    paddingRight: space.md,
+    paddingBottom: space.md,
+    paddingLeft: "26px",
+    color: colors.textMuted,
+    fontSize: type.sm,
+    lineHeight: 1.45,
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.sm,
+  },
+});