@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,336 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Settings Panel — token management and future settings
+// =============================================================================
+
+.container {
+  padding: var(--space-lg);
+  overflow-y: auto;
+  height: 100%;
+}
+
+.heading {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-heavy);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-lg);
+}
+
+.section {
+  @include surface-card;
+  padding: var(--space-lg);
+  margin-bottom: var(--space-lg);
+}
+
+.sectionTitle {
+  @include section-label;
+  margin: 0 0 var(--space-xs);
+}
+
+.sectionDescription {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  margin: 0 0 var(--space-lg);
+}
+
+.emptyState {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  padding: var(--space-lg) 0;
+  text-align: center;
+}
+
+// ─── Token List ─────────────────────────────────────
+
+.tokenList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-lg);
+}
+
+.tokenRow {
+  @include surface-inset;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-md);
+}
+
+.tokenBadge {
+  @include surface-inset;
+  font-size: var(--font-size-xs);
+  padding: 2px var(--space-sm);
+  color: var(--accent-cyan);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+.tokenName {
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  font-size: var(--font-size-sm);
+  min-width: 100px;
+}
+
+.tokenTarget {
+  flex: 1;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.deleteButton {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  font-size: var(--font-size-lg);
+  cursor: pointer;
+  padding: 0 var(--space-xs);
+  line-height: 1;
+  transition: color var(--transition-fast);
+
+  &:hover {
+    color: var(--accent-red);
+  }
+}
+
+// ─── Add Form ───────────────────────────────────────
+
+.addForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.formRow {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+}
+
+.input {
+  @include input-field;
+  flex: 1;
+  font-size: var(--font-size-sm);
+}
+
+.select {
+  @include select-field;
+  flex: 0 0 auto;
+  min-width: 160px;
+}
+
+.addButton {
+  @include btn-primary;
+  white-space: nowrap;
+}
+
+// ---------------------------------------------------------------------------
+// Empty state info message
+// ---------------------------------------------------------------------------
+
+.emptyStateInfo {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  padding: var(--space-lg) 0 var(--space-sm);
+  text-align: center;
+  line-height: var(--line-height);
+}
+
+// ---------------------------------------------------------------------------
+// Appearance — theme radio-card selector (T3-style)
+// ---------------------------------------------------------------------------
+
+.themeOptions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.themeOption {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  width: 100%;
+  text-align: left;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  cursor: pointer;
+  transition: border-color var(--transition-fast),
+              background var(--transition-fast);
+  font-family: var(--font-ui);
+
+  &:hover {
+    background: var(--bg-overlay);
+  }
+}
+
+.themeOptionSelected {
+  border-color: var(--accent-green);
+  background: var(--accent-green-subtle);
+}
+
+.themeOptionHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.themeOptionLabel {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+  display: block;
+}
+
+.themeOptionDesc {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  display: block;
+}
+
+// ─── Variant Light/Dark Toggle ────────────────────────
+
+.variantToggle {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-left: var(--space-sm);
+}
+
+.variantButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  background: transparent;
+  color: var(--text-tertiary);
+  font-size: 14px;
+  cursor: pointer;
+  transition: background var(--transition-fast),
+              color var(--transition-fast),
+              border-color var(--transition-fast);
+
+  &:hover {
+    background: var(--bg-overlay);
+    color: var(--text-primary);
+  }
+}
+
+.variantActive {
+  background: var(--accent-green-dim);
+  color: var(--accent-green);
+  border-color: var(--accent-green);
+}
+
+// ─── Swatches ─────────────────────────────────────────
+
+.themeSwatches {
+  display: flex;
+  gap: 4px;
+  margin-top: 2px;
+}
+
+.themeSwatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  flex-shrink: 0;
+}
+
+// ─── System Preference Toggle ─────────────────────────
+
+.systemToggle {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  cursor: pointer;
+
+  input[type="checkbox"] {
+    accent-color: var(--accent-green);
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
+
+.systemToggleHint {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  margin-left: 24px;
+}
+
+.themeActive {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  margin-top: var(--space-sm);
+}
+
+// ---------------------------------------------------------------------------
+// About Panel
+// ---------------------------------------------------------------------------
+
+.aboutGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.aboutItem {
+  @include surface-inset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-sm) var(--space-md);
+}
+
+.aboutLabel {
+  font-size: var(--font-size-sm);
+  color: var(--text-tertiary);
+  font-weight: var(--font-weight-medium);
+}
+
+.aboutValue {
+  font-size: var(--font-size-sm);
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.aboutDot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.aboutDotConnected {
+  background: var(--accent-green);
+}
+
+.aboutDotDisconnected {
+  background: var(--accent-red);
+}
+
+.aboutDotConnecting {
+  background: var(--accent-yellow);
+  animation: pulse 1.5s ease-in-out infinite;
+}

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

@@ -0,0 +1,22 @@
+@use '../../styles/mixins' as *;
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-shrink: 0;
+}
+
+.btnPrimary {
+  @include btn-primary;
+}
+
+.btnDanger {
+  @include btn-danger;
+}
+
+.btnGhost {
+  @include btn-ghost(var(--text-secondary));
+  padding: var(--space-xs) var(--space-md);
+  font-size: var(--font-size-sm);
+}

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { TaskActionButtons } from "./TaskActionButtons.js";
+import { makeTask } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof TaskActionButtons> = {
+  title: "App/Panels/TaskActionButtons",
+  component: TaskActionButtons,
+  tags: ["autodocs"],
+  args: {
+    task: makeTask({ id: "t-1", status: "not_started" }),
+    sessionId: undefined,
+    isBlocked: false,
+    onStart: fn(),
+    onResume: fn(),
+    onStop: fn(),
+    onPause: fn(),
+    onDelete: fn(),
+    onEdit: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TaskActionButtons>;
+
+/** Not-started + unblocked shows Start, Edit, and Delete buttons. */
+export const NotStartedUnblocked: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-header-start")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-edit")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-delete")).toBeInTheDocument();
+  },
+};
+
+/** Not-started + blocked hides Start, shows Edit and Delete. */
+export const NotStartedBlocked: Story = {
+  args: {
+    isBlocked: true,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.queryByTestId("task-header-start")).toBeNull();
+    await expect(canvas.getByTestId("task-action-edit")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-delete")).toBeInTheDocument();
+  },
+};
+
+/** Working status shows Stop and Pause. */
+export const Working: Story = {
+  args: {
+    task: makeTask({ id: "t-2", status: "working" }),
+    sessionId: "sess-1",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-action-stop")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-pause")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-pause")).toBeEnabled();
+  },
+};
+
+/** Working without a session disables the Pause button. */
+export const WorkingNoSession: Story = {
+  args: {
+    task: makeTask({ id: "t-3", status: "working" }),
+    sessionId: undefined,
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-action-stop")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-pause")).toBeDisabled();
+  },
+};
+
+/** Paused status shows Stop, Resume, and Delete. */
+export const Paused: Story = {
+  args: {
+    task: makeTask({ id: "t-4", status: "paused" }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-action-stop")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-resume")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-delete")).toBeInTheDocument();
+  },
+};
+
+/** Complete status shows only Delete. */
+export const Complete: Story = {
+  args: {
+    task: makeTask({ id: "t-5", status: "complete" }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-action-delete")).toBeInTheDocument();
+    await expect(canvas.queryByTestId("task-header-start")).toBeNull();
+    await expect(canvas.queryByTestId("task-action-stop")).toBeNull();
+  },
+};
+
+/** Failed status shows Retry and Delete. */
+export const Failed: Story = {
+  args: {
+    task: makeTask({ id: "t-6", status: "failed" }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("task-header-start")).toBeInTheDocument();
+    await expect(canvas.getByTestId("task-action-delete")).toBeInTheDocument();
+  },
+};
+
+/** Clicking Start fires the onStart callback. */
+export const ClickStart: Story = {
+  play: async ({ canvas, args }) => {
+    await userEvent.click(canvas.getByTestId("task-header-start"));
+    await expect(args.onStart).toHaveBeenCalledOnce();
+  },
+};
+
+/** Clicking Stop fires the onStop callback. */
+export const ClickStop: Story = {
+  args: {
+    task: makeTask({ id: "t-7", status: "working" }),
+    sessionId: "sess-1",
+  },
+  play: async ({ canvas, args }) => {
+    await userEvent.click(canvas.getByTestId("task-action-stop"));
+    await expect(args.onStop).toHaveBeenCalledOnce();
+  },
+};

package/src/components/panels/TaskActionButtons.tsx

@@ -0,0 +1,87 @@
+import type { JSX } from "react";
+import type { TaskData } from "../../hooks/types.js";
+import styles from "./TaskActionButtons.module.scss";
+
+/** Props for {@link TaskActionButtons}. */
+export interface TaskActionButtonsProps {
+  /** The task whose status drives which buttons are shown. */
+  task: TaskData;
+  /** Active session id — required to enable the Pause button. */
+  sessionId: string | undefined;
+  /** Whether the task is blocked by incomplete dependencies. */
+  isBlocked: boolean;
+  /** Start (or retry) the task. */
+  onStart: () => void;
+  /** Resume a paused task. */
+  onResume: () => void;
+  /** Stop the task. */
+  onStop: () => void;
+  /** Pause the task by killing its session. */
+  onPause: () => void;
+  /** Request task deletion (typically opens a confirm dialog). */
+  onDelete: () => void;
+  /** Open the task editor. */
+  onEdit: () => void;
+}
+
+/**
+ * Renders status-appropriate action buttons for a task.
+ *
+ * Which buttons appear depends on `task.status` and `isBlocked`.
+ * Returns `undefined` for unrecognized statuses.
+ */
+export function TaskActionButtons({
+  task, sessionId, isBlocked,
+  onStart, onResume, onStop, onPause, onDelete, onEdit,
+}: TaskActionButtonsProps): JSX.Element | undefined {
+  if (task.status === "not_started") {
+    if (isBlocked) {
+      return (
+        <div className={styles.actionButtons} data-testid="task-action-buttons">
+          <button onClick={onEdit} className={styles.btnGhost} data-testid="task-action-edit">Edit</button>
+          <button onClick={onDelete} className={styles.btnDanger} data-testid="task-action-delete">Delete</button>
+        </div>
+      );
+    }
+    return (
+      <div className={styles.actionButtons} data-testid="task-action-buttons">
+        <button data-testid="task-header-start" onClick={onStart} className={styles.btnPrimary}>Start</button>
+        <button onClick={onEdit} className={styles.btnGhost} data-testid="task-action-edit">Edit</button>
+        <button onClick={onDelete} className={styles.btnDanger} data-testid="task-action-delete">Delete</button>
+      </div>
+    );
+  }
+  if (task.status === "working") {
+    return (
+      <div className={styles.actionButtons} data-testid="task-action-buttons">
+        <button onClick={onStop} className={styles.btnDanger} data-testid="task-action-stop">Stop</button>
+        <button onClick={onPause} disabled={!sessionId} className={styles.btnGhost} data-testid="task-action-pause">Pause</button>
+      </div>
+    );
+  }
+  if (task.status === "paused") {
+    return (
+      <div className={styles.actionButtons} data-testid="task-action-buttons">
+        <button onClick={onStop} className={styles.btnPrimary} data-testid="task-action-stop">Stop</button>
+        <button onClick={onResume} className={styles.btnGhost} data-testid="task-action-resume">Resume</button>
+        <button onClick={onDelete} className={styles.btnDanger} data-testid="task-action-delete">Delete</button>
+      </div>
+    );
+  }
+  if (task.status === "complete") {
+    return (
+      <div className={styles.actionButtons} data-testid="task-action-buttons">
+        <button onClick={onDelete} className={styles.btnDanger} data-testid="task-action-delete">Delete</button>
+      </div>
+    );
+  }
+  if (task.status === "failed") {
+    return (
+      <div className={styles.actionButtons} data-testid="task-action-buttons">
+        <button onClick={onStart} className={styles.btnPrimary} data-testid="task-header-start">Retry</button>
+        <button onClick={onDelete} className={styles.btnDanger} data-testid="task-action-delete">Delete</button>
+      </div>
+    );
+  }
+  return undefined;
+}