@grackle-ai/web-components 0.107.2

package/src/components/panels/TaskOverviewPanel.tsx

@@ -0,0 +1,270 @@
+import type { JSX } from "react";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { TaskData, Session, Environment, Workspace, UsageStats } from "../../hooks/types.js";
+import { getStatusStyle, getStatusBadgeClassKey } from "../../utils/taskStatus.js";
+import { formatCost, formatTokens } from "../../utils/format.js";
+import { WorkpadPanel } from "./WorkpadPanel.js";
+import styles from "./TaskOverviewPanel.module.scss";
+
+// --- Internal helpers --------------------------------------------------------
+
+function formatDate(iso: string | undefined): string {
+  if (!iso) {
+    return "\u2014";
+  }
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) {
+    return "\u2014";
+  }
+  return d.toLocaleString(undefined, {
+    month: "short", day: "numeric", year: "numeric",
+    hour: "2-digit", minute: "2-digit",
+  });
+}
+
+function formatDuration(start: string | undefined, end: string | undefined): string | undefined {
+  if (!start || !end) {
+    return undefined;
+  }
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (isNaN(ms) || ms < 0) {
+    return undefined;
+  }
+  const mins = Math.floor(ms / 60000);
+  const secs = Math.floor((ms % 60000) / 1000);
+  if (mins === 0) {
+    return `${secs}s`;
+  }
+  const hours = Math.floor(mins / 60);
+  const remMins = mins % 60;
+  if (hours === 0) {
+    return `${mins}m ${secs}s`;
+  }
+  return `${hours}h ${remMins}m`;
+}
+
+function envStatusClass(status: string): string {
+  const s = status.toLowerCase();
+  if (s === "ready" || s === "running" || s === "available" || s === "connected") {
+    return styles.envDotGreen;
+  }
+  if (s === "provisioning" || s === "starting" || s === "pending" || s === "connecting") {
+    return styles.envDotYellow;
+  }
+  if (s === "error" || s === "failed" || s === "disconnected") {
+    return styles.envDotRed;
+  }
+  return styles.envDotGray;
+}
+
+function TaskStatusBadge({ status }: { status: string }): JSX.Element {
+  const style = getStatusStyle(status);
+  const classKey = getStatusBadgeClassKey(status);
+  return (
+    <span
+      className={`${styles.statusBadge} ${styles[classKey] ?? styles.statusPending}`}
+      data-testid="task-overview-status-badge"
+    >
+      {style.label}
+    </span>
+  );
+}
+
+// --- Public component --------------------------------------------------------
+
+/** Props for {@link TaskOverviewPanel}. */
+export interface TaskOverviewPanelProps {
+  /** The task to display. */
+  task: TaskData;
+  /** Lookup map for dependency resolution. */
+  tasksById: Map<string, TaskData>;
+  /** All available environments. */
+  environments: Environment[];
+  /** All workspaces. */
+  workspaces: Workspace[];
+  /** Sessions belonging to this task. */
+  taskSessions: Session[];
+  /** The currently selected environment id (from workspace default or user pick). */
+  selectedEnvId: string;
+  /** Usage stats for this task only. */
+  taskUsage?: UsageStats;
+  /** Aggregate usage stats including subtasks. */
+  treeUsage?: UsageStats;
+}
+
+/**
+ * Renders the overview tab content for a task detail page.
+ *
+ * Displays status badge, branch link, description (markdown), environment,
+ * dependencies, timeline, usage/cost, and review notes.
+ */
+export function TaskOverviewPanel({
+  task, tasksById, environments, workspaces, taskSessions,
+  selectedEnvId, taskUsage, treeUsage,
+}: TaskOverviewPanelProps): JSX.Element {
+  const latestSession = taskSessions.length > 0 ? taskSessions[taskSessions.length - 1] : undefined;
+  const envId = latestSession?.environmentId ?? "";
+  const env = envId ? environments.find((e) => e.id === envId) : undefined;
+  const workspace = workspaces.find((p) => p.id === task.workspaceId);
+  const selectedEnv = environments.find((e) => e.id === selectedEnvId);
+  const branchUrl = task.branch && workspace?.repoUrl
+    ? `${workspace.repoUrl.replace(/\/$/, "")}/tree/${encodeURIComponent(task.branch)}`
+    : undefined;
+
+  return (
+    <div className={styles.overviewDashboard} data-testid="task-overview-panel">
+      <div className={styles.overviewHero}>
+        <TaskStatusBadge status={task.status} />
+        {task.branch && (
+          <span className={styles.overviewBranchPill} data-testid="task-overview-branch">
+            {branchUrl ? (
+              <a href={branchUrl} target="_blank" rel="noreferrer noopener" className={styles.branchLink}>
+                {"\u{1F517}"} {task.branch}
+              </a>
+            ) : (
+              <span>{"\u{1F517}"} {task.branch}</span>
+            )}
+          </span>
+        )}
+      </div>
+      {typeof task.description === "string" && task.description && (
+        <div className={styles.overviewSection} data-testid="task-overview-description">
+          <div className={styles.overviewLabel}>Description</div>
+          <div className={styles.overviewMarkdown}>
+            <Markdown remarkPlugins={[remarkGfm]}>{task.description}</Markdown>
+          </div>
+        </div>
+      )}
+      {task.workpad && <WorkpadPanel workpad={task.workpad} />}
+      <div className={styles.overviewSection}>
+        <div className={styles.overviewLabel}>Environment</div>
+        {envId && env ? (
+          <div className={styles.envRow} data-testid="task-overview-environment">
+            <span className={`${styles.envDot} ${envStatusClass(env.status)}`} title={env.status} aria-label={`Status: ${env.status}`} role="img" />
+            <span className={styles.overviewValue}>{env.displayName}</span>
+          </div>
+        ) : selectedEnv ? (
+          <div className={styles.envRow} data-testid="task-overview-environment">
+            <span className={`${styles.envDot} ${envStatusClass(selectedEnv.status)}`} title={selectedEnv.status} aria-label={`Status: ${selectedEnv.status}`} role="img" />
+            <span className={styles.overviewValue}>{selectedEnv.displayName}</span>
+            <span className={styles.overviewMuted}>(workspace default)</span>
+          </div>
+        ) : (
+          <div className={styles.overviewMuted}>Set in workspace settings</div>
+        )}
+      </div>
+      <div className={styles.overviewSection} data-testid="task-overview-dependencies">
+        <div className={styles.overviewLabel}>Dependencies</div>
+        {task.dependsOn.length === 0 ? (
+          <div className={styles.overviewMuted}>None</div>
+        ) : (
+          <div className={styles.depList}>
+            {task.dependsOn.map((depId) => {
+              const dep = tasksById.get(depId);
+              const isDone = dep?.status === "complete";
+              return (
+                <div key={depId} className={`${styles.depItem} ${isDone ? styles.depDone : styles.depBlocked}`}>
+                  <span>{isDone ? "\u2713" : "\u25CB"}</span>
+                  <span>{dep?.title ?? depId}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      <div className={styles.overviewSection} data-testid="task-overview-timeline">
+        <div className={styles.overviewLabel}>Timeline</div>
+        <div className={styles.timeline}>
+          {task.createdAt && (
+            <div className={styles.timelineRow}>
+              <span className={styles.timelineKey}>Created</span>
+              <span className={styles.timelineValue}>{formatDate(task.createdAt)}</span>
+            </div>
+          )}
+          {task.assignedAt && (() => {
+            const delta = formatDuration(task.createdAt, task.assignedAt);
+            return (
+              <div className={styles.timelineRow}>
+                <span className={styles.timelineKey}>Assigned</span>
+                <span className={styles.timelineValue}>{formatDate(task.assignedAt)}</span>
+                {delta !== undefined && <span className={styles.timelineDelta}>{delta}</span>}
+              </div>
+            );
+          })()}
+          {task.startedAt && (() => {
+            const delta = formatDuration(task.assignedAt ?? task.createdAt, task.startedAt);
+            return (
+              <div className={styles.timelineRow}>
+                <span className={styles.timelineKey}>Started</span>
+                <span className={styles.timelineValue}>{formatDate(task.startedAt)}</span>
+                {delta !== undefined && <span className={styles.timelineDelta}>{delta}</span>}
+              </div>
+            );
+          })()}
+          {task.completedAt && (() => {
+            const delta = formatDuration(task.startedAt, task.completedAt);
+            return (
+              <div className={styles.timelineRow}>
+                <span className={styles.timelineKey}>Completed</span>
+                <span className={styles.timelineValue}>{formatDate(task.completedAt)}</span>
+                {delta !== undefined && <span className={styles.timelineDelta}>{delta}</span>}
+              </div>
+            );
+          })()}
+          {!task.createdAt && !task.assignedAt && !task.startedAt && !task.completedAt && (
+            <div className={styles.overviewMuted}>No timing data</div>
+          )}
+        </div>
+      </div>
+      {taskUsage && taskUsage.costMillicents > 0 && (
+        <div className={styles.overviewSection} data-testid="task-overview-usage">
+          <div className={styles.overviewLabel}>Usage</div>
+          <div className={styles.timeline}>
+            <div className={styles.timelineRow}>
+              <span className={styles.timelineKey}>Cost</span>
+              <span className={styles.timelineValue}>{formatCost(taskUsage.costMillicents)}</span>
+              <span className={styles.timelineDelta}>{taskUsage.sessionCount} session{taskUsage.sessionCount !== 1 ? "s" : ""}</span>
+            </div>
+            {treeUsage && treeUsage.costMillicents > taskUsage.costMillicents && (
+              <div className={styles.timelineRow}>
+                <span className={styles.timelineKey}>Total (incl. subtasks)</span>
+                <span className={styles.timelineValue}>{formatCost(treeUsage.costMillicents)}</span>
+                <span className={styles.timelineDelta}>{treeUsage.sessionCount} session{treeUsage.sessionCount !== 1 ? "s" : ""}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      {(task.tokenBudget > 0 || task.costBudgetMillicents > 0) && (
+        <div className={styles.overviewSection} data-testid="task-overview-budget">
+          <div className={styles.overviewLabel}>Budget</div>
+          <div className={styles.timeline}>
+            {task.tokenBudget > 0 && (
+              <div className={styles.timelineRow}>
+                <span className={styles.timelineKey}>Tokens</span>
+                <span className={styles.timelineValue}>
+                  {formatTokens((taskUsage?.inputTokens ?? 0) + (taskUsage?.outputTokens ?? 0))} / {formatTokens(task.tokenBudget)}
+                </span>
+              </div>
+            )}
+            {task.costBudgetMillicents > 0 && (
+              <div className={styles.timelineRow}>
+                <span className={styles.timelineKey}>Cost</span>
+                <span className={styles.timelineValue}>
+                  {formatCost(taskUsage?.costMillicents ?? 0)} / {formatCost(task.costBudgetMillicents)}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      {task.reviewNotes && (
+        <div className={styles.overviewSection} data-testid="task-overview-review-notes">
+          <div className={styles.overviewLabel}>Review Notes</div>
+          <div className={styles.reviewNotes}>{task.reviewNotes}</div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/panels/TokensPanel.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { MOCK_TOKENS } from "../../test-utils/storybook-helpers.js";
+import { TokensPanel } from "./TokensPanel.js";
+
+const meta: Meta<typeof TokensPanel> = {
+  title: "App/Panels/TokensPanel",
+  component: TokensPanel,
+  args: {
+    tokens: MOCK_TOKENS,
+    onSetToken: fn(),
+    onDeleteToken: fn(),
+    onShowToast: fn(),
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TokensPanel>;
+
+/** Displays the three mock tokens with their names and targets visible. */
+export const MockTokensDisplayed: Story = {
+  play: async ({ canvas }) => {
+    // All three token names should be visible
+    await expect(canvas.getByText("anthropic")).toBeInTheDocument();
+    await expect(canvas.getByText("github")).toBeInTheDocument();
+    await expect(canvas.getByText("gcp-service-account")).toBeInTheDocument();
+
+    // Targets should be shown
+    await expect(canvas.getByText("ANTHROPIC_API_KEY")).toBeInTheDocument();
+    await expect(canvas.getByText("GITHUB_TOKEN")).toBeInTheDocument();
+    await expect(canvas.getByText("/home/user/.config/gcloud/credentials.json")).toBeInTheDocument();
+  },
+};
+
+/** The add token form is present with name, value inputs and an Add Token button. */
+export const AddFormPresent: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByPlaceholderText("Token name")).toBeInTheDocument();
+    await expect(canvas.getByPlaceholderText("Value")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: "Add Token" })).toBeInTheDocument();
+  },
+};
+
+/** Filling in and submitting the form calls onSetToken with the correct args. */
+export const AddFormFunctional: Story = {
+  play: async ({ canvas, args }) => {
+    const nameInput = canvas.getByPlaceholderText("Token name");
+    const valueInput = canvas.getByPlaceholderText("Value");
+    const envVarInput = canvas.getByPlaceholderText(/Env var name/);
+    const addButton = canvas.getByRole("button", { name: "Add Token" });
+
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, "new-mock-token");
+    await userEvent.clear(valueInput);
+    await userEvent.type(valueInput, "mock-value");
+    await userEvent.clear(envVarInput);
+    await userEvent.type(envVarInput, "NEW_MOCK_TOKEN");
+    await userEvent.click(addButton);
+
+    await expect(args.onSetToken).toHaveBeenCalledWith(
+      "new-mock-token",
+      "mock-value",
+      "env_var",
+      "NEW_MOCK_TOKEN",
+      "",
+    );
+  },
+};
+
+/** Clicking the delete button on a token shows a confirm dialog, and confirming calls onDeleteToken. */
+export const DeleteRemovesFromList: Story = {
+  play: async ({ canvas, args }) => {
+    // Click the delete button for the "anthropic" token
+    const deleteButton = canvas.getByTitle("Delete anthropic");
+    await userEvent.click(deleteButton);
+
+    // Confirm dialog should appear (use findBy for async rendering after animation)
+    await expect(await canvas.findByText("Delete Token?")).toBeInTheDocument();
+    // "anthropic" appears in both the dialog description and the token list
+    const anthropicElements = canvas.getAllByText(/anthropic/);
+    await expect(anthropicElements.length).toBeGreaterThanOrEqual(1);
+
+    // Confirm deletion — the ConfirmDialog button label defaults to "Delete"
+    const confirmButton = await canvas.findByRole("button", { name: "Delete" });
+    await userEvent.click(confirmButton);
+
+    await expect(args.onDeleteToken).toHaveBeenCalledWith("anthropic");
+  },
+};
+
+/** Switching the type selector from env_var to file changes the placeholder text. */
+export const TypeSelectorSwitchesFields: Story = {
+  play: async ({ canvas }) => {
+    // Default type is env_var — placeholder should show env var
+    await expect(canvas.getByPlaceholderText(/Env var name/)).toBeInTheDocument();
+
+    // Switch to file type
+    const select = canvas.getByDisplayValue("Environment Variable");
+    await userEvent.selectOptions(select, "file");
+
+    // Placeholder should change to file path
+    await expect(canvas.getByPlaceholderText(/File path/)).toBeInTheDocument();
+  },
+};
+
+/** The description text explaining token auto-push behavior is visible. */
+export const DescriptionTextVisible: Story = {
+  play: async ({ canvas }) => {
+    await expect(
+      canvas.getByText(/API tokens are auto-pushed to environments when set or updated/),
+    ).toBeInTheDocument();
+  },
+};
+
+/** After adding a token, the name and value fields are cleared. */
+export const FormClearsAfterAdd: Story = {
+  play: async ({ canvas }) => {
+    const nameInput = canvas.getByPlaceholderText("Token name");
+    const valueInput = canvas.getByPlaceholderText("Value");
+    const addButton = canvas.getByRole("button", { name: "Add Token" });
+
+    await userEvent.type(nameInput, "clear-test");
+    await userEvent.type(valueInput, "clearval");
+    await userEvent.click(addButton);
+
+    // Fields should be cleared after submit
+    await expect(nameInput).toHaveValue("");
+    await expect(valueInput).toHaveValue("");
+  },
+};

package/src/components/panels/TokensPanel.tsx

@@ -0,0 +1,143 @@
+import { useState, type JSX, type FormEvent } from "react";
+import { X } from "lucide-react";
+import type { ToastVariant } from "../../context/ToastContext.js";
+import type { TokenInfo } from "../../hooks/types.js";
+import { ICON_MD } from "../../utils/iconSize.js";
+import { ConfirmDialog } from "../display/index.js";
+import styles from "./SettingsPanel.module.scss";
+
+/** Token type options for the add form. */
+const TOKEN_TYPES: Array<{ value: string; label: string }> = [
+  { value: "env_var", label: "Environment Variable" },
+  { value: "file", label: "File" },
+];
+
+/** Props for the TokensPanel component. */
+interface TokensPanelProps {
+  /** List of stored token metadata. */
+  tokens: TokenInfo[];
+  /** Stores or updates a token. */
+  onSetToken: (name: string, value: string, tokenType: string, envVar: string, filePath: string) => void;
+  /** Deletes a token by name. */
+  onDeleteToken: (name: string) => void;
+  /** Display a toast notification. */
+  onShowToast?: (message: string, variant?: ToastVariant) => void;
+}
+
+/** Token management panel with list, add form, and delete confirmation. */
+export function TokensPanel({ tokens, onSetToken, onDeleteToken, onShowToast }: TokensPanelProps): JSX.Element {
+
+  const [name, setName] = useState("");
+  const [value, setValue] = useState("");
+  const [tokenType, setTokenType] = useState("env_var");
+  const [target, setTarget] = useState("");
+  const [confirmDeleteToken, setConfirmDeleteToken] = useState<string | null>(null);
+
+  const handleSubmit = (e: FormEvent): void => {
+    e.preventDefault();
+    if (!name || !value) {
+      return;
+    }
+    const envVar = tokenType === "env_var" ? (target || name.toUpperCase() + "_TOKEN") : "";
+    const filePath = tokenType === "file" ? target : "";
+    onSetToken(name, value, tokenType, envVar, filePath);
+    onShowToast?.("Token saved successfully", "success");
+    setName("");
+    setValue("");
+    setTarget("");
+  };
+
+  const handleDelete = (tokenName: string): void => {
+    setConfirmDeleteToken(tokenName);
+  };
+
+  const handleConfirmDelete = (): void => {
+    if (confirmDeleteToken) {
+      onDeleteToken(confirmDeleteToken);
+      onShowToast?.("Token deleted", "info");
+    }
+    setConfirmDeleteToken(null);
+  };
+
+  return (
+    <>
+      <ConfirmDialog
+        isOpen={confirmDeleteToken !== null}
+        title="Delete Token?"
+        description={confirmDeleteToken ? `"${confirmDeleteToken}" will be permanently removed.` : undefined}
+        onConfirm={handleConfirmDelete}
+        onCancel={() => setConfirmDeleteToken(null)}
+      />
+      <section className={styles.section}>
+        <h3 className={styles.sectionTitle}>Tokens</h3>
+        <p className={styles.sectionDescription}>
+          API tokens are auto-pushed to environments when set or updated. Values are write-only.
+        </p>
+
+        {tokens.length === 0 ? (
+          <div className={styles.emptyStateInfo}>Add your first API token to enable service integrations.</div>
+        ) : (
+          <div className={styles.tokenList}>
+            {tokens.map((t) => (
+              <div key={t.name} className={styles.tokenRow}>
+                <span className={styles.tokenBadge}>{t.tokenType}</span>
+                <span className={styles.tokenName}>{t.name}</span>
+                <span className={styles.tokenTarget}>
+                  {t.tokenType === "env_var" ? t.envVar : t.filePath}
+                </span>
+                <button
+                  className={styles.deleteButton}
+                  onClick={() => handleDelete(t.name)}
+                  title={`Delete ${t.name}`}
+                  aria-label={`Delete ${t.name}`}
+                >
+                  <X size={ICON_MD} aria-hidden="true" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <form className={styles.addForm} onSubmit={handleSubmit}>
+          <div className={styles.formRow}>
+            <input
+              className={styles.input}
+              type="text"
+              placeholder="Token name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <input
+              className={styles.input}
+              type="password"
+              placeholder="Value"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </div>
+          <div className={styles.formRow}>
+            <select
+              className={styles.select}
+              value={tokenType}
+              onChange={(e) => setTokenType(e.target.value)}
+            >
+              {TOKEN_TYPES.map((tt) => (
+                <option key={tt.value} value={tt.value}>{tt.label}</option>
+              ))}
+            </select>
+            <input
+              className={styles.input}
+              type="text"
+              placeholder={tokenType === "env_var" ? "Env var name (e.g. API_TOKEN)" : "File path (e.g. /home/user/.token)"}
+              value={target}
+              onChange={(e) => setTarget(e.target.value)}
+            />
+            <button className={styles.addButton} type="submit">
+              Add Token
+            </button>
+          </div>
+        </form>
+      </section>
+    </>
+  );
+}

package/src/components/panels/WorkpadPanel.module.scss

@@ -0,0 +1,39 @@
+.workpadSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  padding: var(--space-sm) 0;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.workpadLabel {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-tertiary);
+}
+
+.workpadStatus {
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.workpadSummary {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+
+.workpadExtra {
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono, monospace);
+  color: var(--text-secondary);
+  background: var(--bg-inset);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}

package/src/components/panels/WorkpadPanel.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { WorkpadPanel } from "./WorkpadPanel.js";
+
+const meta: Meta<typeof WorkpadPanel> = {
+  title: "App/Panels/WorkpadPanel",
+  component: WorkpadPanel,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithFullWorkpad: Story = {
+  args: {
+    workpad: JSON.stringify({
+      status: "completed",
+      summary: "Implemented JWT auth middleware with tests. Opened PR #475.",
+      extra: { branch: "feat/auth-middleware", pr: 475, files_changed: 3 },
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("workpad-status")).toHaveTextContent("completed");
+    await expect(canvas.getByTestId("workpad-summary")).toHaveTextContent("JWT auth middleware");
+    await expect(canvas.getByTestId("workpad-extra")).toHaveTextContent("feat/auth-middleware");
+  },
+};
+
+export const StatusOnly: Story = {
+  args: {
+    workpad: JSON.stringify({ status: "blocked" }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("workpad-status")).toHaveTextContent("blocked");
+    await expect(canvas.queryByTestId("workpad-summary")).toBeNull();
+    await expect(canvas.queryByTestId("workpad-extra")).toBeNull();
+  },
+};
+
+export const EmptyWorkpad: Story = {
+  args: {
+    workpad: "",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByTestId("workpad-panel")).toBeNull();
+  },
+};
+
+export const InvalidJson: Story = {
+  args: {
+    workpad: "this is not json",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("workpad-panel")).toBeInTheDocument();
+    await expect(canvas.getByText("this is not json")).toBeInTheDocument();
+  },
+};