@grackle-ai/web-components 0.107.2

package/src/components/notifications/UpdateBanner.test.tsx

@@ -0,0 +1,64 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+import { render, within } from "@testing-library/react";
+import { UpdateBanner } from "./UpdateBanner.js";
+
+describe("UpdateBanner", () => {
+  it("renders nothing when updateAvailable is false", () => {
+    const { container } = render(
+      <UpdateBanner
+        currentVersion="0.76.0"
+        latestVersion="0.76.0"
+        updateAvailable={false}
+        isDocker={false}
+      />,
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("shows banner with npm instructions when isDocker=false", () => {
+    const { container } = render(
+      <UpdateBanner
+        currentVersion="0.76.0"
+        latestVersion="0.77.0"
+        updateAvailable={true}
+        isDocker={false}
+      />,
+    );
+
+    const banner = within(container).getByTestId("update-banner");
+    expect(banner).toBeTruthy();
+    expect(banner.textContent).toContain("0.77.0");
+    expect(banner.textContent).toContain("npm install");
+  });
+
+  it("shows banner with Docker instructions when isDocker=true", () => {
+    const { container } = render(
+      <UpdateBanner
+        currentVersion="0.76.0"
+        latestVersion="0.77.0"
+        updateAvailable={true}
+        isDocker={true}
+      />,
+    );
+
+    const banner = within(container).getByTestId("update-banner");
+    expect(banner).toBeTruthy();
+    expect(banner.textContent).toContain("docker pull");
+  });
+
+  it("displays current and latest versions", () => {
+    const { container } = render(
+      <UpdateBanner
+        currentVersion="0.76.0"
+        latestVersion="0.77.0"
+        updateAvailable={true}
+        isDocker={false}
+      />,
+    );
+
+    const banner = within(container).getByTestId("update-banner");
+    expect(banner.textContent).toContain("0.76.0");
+    expect(banner.textContent).toContain("0.77.0");
+  });
+});

package/src/components/notifications/UpdateBanner.tsx

@@ -0,0 +1,44 @@
+import type { JSX } from "react";
+import { Callout } from "./Callout.js";
+
+/** Props for the UpdateBanner component. */
+interface UpdateBannerProps {
+  /** The currently running Grackle version. */
+  currentVersion: string;
+  /** The latest version available on npm. */
+  latestVersion: string;
+  /** Whether an update is available. */
+  updateAvailable: boolean;
+  /** Whether the server is running in a Docker container. */
+  isDocker: boolean;
+}
+
+/**
+ * Dismissible info banner shown when a newer Grackle version is available.
+ *
+ * Renders nothing when `updateAvailable` is false. Shows context-appropriate
+ * upgrade instructions for Docker vs npm users.
+ */
+export function UpdateBanner({
+  currentVersion,
+  latestVersion,
+  updateAvailable,
+  isDocker,
+}: UpdateBannerProps): JSX.Element {
+  if (!updateAvailable) {
+    return <></>;
+  }
+
+  const command: string = isDocker
+    ? `docker pull ghcr.io/nick-pape/grackle:latest && docker restart grackle`
+    : `npm install -g @grackle-ai/cli@${latestVersion}`;
+
+  return (
+    <div data-testid="update-banner">
+      <Callout variant="info" dismissible>
+        <strong>Grackle v{latestVersion}</strong> is available (you have v{currentVersion}).
+        {" "}Run: <code>{command}</code>
+      </Callout>
+    </div>
+  );
+}

package/src/components/notifications/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Notification components: transient toasts and persistent inline callouts.
+ * @module notifications
+ */
+export { Toast } from "./Toast.js";
+export { ToastContainer } from "./ToastContainer.js";
+export { Callout } from "./Callout.js";
+export type { CalloutVariant } from "./Callout.js";

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { AboutPanel } from "./AboutPanel.js";
+import { buildEnvironment, buildSession } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof AboutPanel> = {
+  title: "App/Panels/AboutPanel",
+  component: AboutPanel,
+  args: {
+    connectionStatus: "connected",
+    environments: [],
+    sessions: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AboutPanel>;
+
+/** Connected state with no environments or sessions. */
+export const ConnectedEmpty: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("about-panel")).toBeInTheDocument();
+    await expect(canvas.getByText("Connected")).toBeInTheDocument();
+    await expect(canvas.getByText("0/0 connected")).toBeInTheDocument();
+    await expect(canvas.getByText("About")).toBeInTheDocument();
+  },
+};
+
+/** Disconnected state. */
+export const Disconnected: Story = {
+  args: {
+    connectionStatus: "disconnected",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Disconnected")).toBeInTheDocument();
+  },
+};
+
+/** Connecting state shown during reconnection attempts. */
+export const Connecting: Story = {
+  args: {
+    connectionStatus: "connecting",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Connecting...")).toBeInTheDocument();
+  },
+};
+
+/** Shows environment and session counts when data is present. */
+export const WithEnvironmentsAndSessions: Story = {
+  args: {
+    connectionStatus: "connected",
+    environments: [
+      buildEnvironment({ id: "env-1", status: "connected" }),
+      buildEnvironment({ id: "env-2", status: "disconnected" }),
+      buildEnvironment({ id: "env-3", status: "connected" }),
+    ],
+    sessions: [
+      buildSession({ id: "s-1", status: "running" }),
+      buildSession({ id: "s-2", status: "idle" }),
+      buildSession({ id: "s-3", status: "stopped" }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    // 2 of 3 environments connected
+    await expect(canvas.getByText("2/3 connected")).toBeInTheDocument();
+    // 2 active sessions (running + idle)
+    await expect(canvas.getByText("2")).toBeInTheDocument();
+  },
+};

package/src/components/panels/AboutPanel.tsx

@@ -0,0 +1,66 @@
+import type { JSX } from "react";
+import type { ConnectionStatus, Environment, Session } from "../../hooks/types.js";
+import styles from "./SettingsPanel.module.scss";
+
+declare const __APP_VERSION__: string;
+
+/** Human-readable label for each connection state. */
+const CONNECTION_LABEL: Record<ConnectionStatus, string> = {
+  connected: "Connected",
+  connecting: "Connecting...",
+  disconnected: "Disconnected",
+};
+
+/** CSS class for the connection dot in each state. */
+const CONNECTION_DOT_CLASS: Record<ConnectionStatus, string> = {
+  connected: styles.aboutDotConnected,
+  connecting: styles.aboutDotConnecting,
+  disconnected: styles.aboutDotDisconnected,
+};
+
+/** Props for the AboutPanel component. */
+interface AboutPanelProps {
+  /** Current connection state of the event stream. */
+  connectionStatus: ConnectionStatus;
+  /** List of all environments. */
+  environments: Environment[];
+  /** List of all sessions. */
+  sessions: Session[];
+}
+
+/** About panel showing connection status, environment summary, session count, and version. */
+export function AboutPanel({ connectionStatus, environments, sessions }: AboutPanelProps): JSX.Element {
+  const connectedEnvs = environments.filter((e) => e.status === "connected").length;
+  const totalEnvs = environments.length;
+  const activeSessionCount = sessions.filter((s) => ["running", "idle"].includes(s.status)).length;
+
+  return (
+    <section className={styles.section} data-testid="about-panel">
+      <h3 className={styles.sectionTitle}>About</h3>
+      <p className={styles.sectionDescription}>
+        Connection status and application information.
+      </p>
+      <div className={styles.aboutGrid}>
+        <div className={styles.aboutItem}>
+          <span className={styles.aboutLabel}>Connection</span>
+          <span className={styles.aboutValue}>
+            <span className={`${styles.aboutDot} ${CONNECTION_DOT_CLASS[connectionStatus]}`} />
+            {CONNECTION_LABEL[connectionStatus]}
+          </span>
+        </div>
+        <div className={styles.aboutItem}>
+          <span className={styles.aboutLabel}>Environments</span>
+          <span className={styles.aboutValue}>{connectedEnvs}/{totalEnvs} connected</span>
+        </div>
+        <div className={styles.aboutItem}>
+          <span className={styles.aboutLabel}>Active Sessions</span>
+          <span className={styles.aboutValue}>{activeSessionCount}</span>
+        </div>
+        <div className={styles.aboutItem}>
+          <span className={styles.aboutLabel}>Version</span>
+          <span className={styles.aboutValue}>{typeof __APP_VERSION__ !== "undefined" ? __APP_VERSION__ : "unknown"}</span>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn } from "@storybook/test";
+import { AppearancePanel } from "./AppearancePanel.js";
+
+const meta: Meta<typeof AppearancePanel> = {
+  component: AppearancePanel,
+  title: "App/Panels/AppearancePanel",
+  args: {
+    themeId: "grackle",
+    resolvedThemeId: "grackle-dark",
+    onSetTheme: fn(),
+    preferSystem: false,
+    onSetPreferSystem: fn(),
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default appearance panel with theme options and system toggle. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Appearance")).toBeInTheDocument();
+    await expect(canvas.getByText("Choose how Grackle looks across the app.")).toBeInTheDocument();
+    // The active theme should be reported at the bottom
+    await expect(canvas.getByText("grackle-dark")).toBeInTheDocument();
+    // System preference checkbox should be unchecked
+    const checkbox = canvas.getByRole("checkbox");
+    await expect(checkbox).not.toBeChecked();
+    // Theme buttons should be present
+    await expect(canvas.getByText("Grackle")).toBeInTheDocument();
+    await expect(canvas.getByText("Matrix")).toBeInTheDocument();
+  },
+};
+
+/** Panel with system preference enabled. */
+export const SystemPreferenceEnabled: Story = {
+  args: {
+    preferSystem: true,
+  },
+  play: async ({ canvas }) => {
+    const checkbox = canvas.getByRole("checkbox");
+    await expect(checkbox).toBeChecked();
+    await expect(canvas.getByText("Match system light/dark preference")).toBeInTheDocument();
+  },
+};

package/src/components/panels/AppearancePanel.tsx

@@ -0,0 +1,97 @@
+import type { JSX } from "react";
+import { THEMES } from "../../themes.js";
+import styles from "./SettingsPanel.module.scss";
+
+/** Props for the AppearancePanel component. */
+export interface AppearancePanelProps {
+  /** The user's chosen theme ID. */
+  themeId: string;
+  /** The resolved data-theme value after system preference. */
+  resolvedThemeId: string;
+  /** Set a new theme by ID. */
+  onSetTheme: (nextId: string) => void;
+  /** Whether the theme follows the OS light/dark preference. */
+  preferSystem: boolean;
+  /** Toggle the OS preference behavior. */
+  onSetPreferSystem: (prefer: boolean) => void;
+}
+
+/** Appearance settings panel with theme picker and system preference toggle. */
+export function AppearancePanel({ themeId, resolvedThemeId, onSetTheme, preferSystem, onSetPreferSystem }: AppearancePanelProps): JSX.Element {
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Appearance</h3>
+      <p className={styles.sectionDescription}>
+        Choose how Grackle looks across the app.
+      </p>
+      <div className={styles.themeOptions}>
+        {THEMES.filter((t) => !t.hidden).map((t) => {
+          const hasVariants = !!(t.variantLightId && t.variantDarkId);
+          const isSelected = hasVariants
+            ? (themeId === t.id || themeId === t.variantLightId || themeId === t.variantDarkId)
+            : themeId === t.id;
+          const isLight = hasVariants && resolvedThemeId === t.variantLightId;
+          return (
+            <button
+              key={t.id}
+              type="button"
+              className={`${styles.themeOption} ${isSelected ? styles.themeOptionSelected : ""}`}
+              aria-pressed={isSelected}
+              onClick={() => onSetTheme(t.id)}
+            >
+              <span className={styles.themeOptionHeader}>
+                <span>
+                  <span className={styles.themeOptionLabel}>{t.label}</span>
+                  <span className={styles.themeOptionDesc}>{t.description}</span>
+                </span>
+                {hasVariants && (
+                  <span className={styles.variantToggle}>
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      className={`${styles.variantButton} ${isSelected && isLight ? styles.variantActive : ""}`}
+                      onClick={(e) => { e.stopPropagation(); onSetPreferSystem(false); onSetTheme(t.variantLightId!); }}
+                      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); onSetPreferSystem(false); onSetTheme(t.variantLightId!); } }}
+                      aria-label="Light variant"
+                      aria-pressed={isSelected && isLight}
+                    >&#9788;</span>
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      className={`${styles.variantButton} ${isSelected && !isLight ? styles.variantActive : ""}`}
+                      onClick={(e) => { e.stopPropagation(); onSetPreferSystem(false); onSetTheme(t.variantDarkId!); }}
+                      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); e.stopPropagation(); onSetPreferSystem(false); onSetTheme(t.variantDarkId!); } }}
+                      aria-label="Dark variant"
+                      aria-pressed={isSelected && !isLight}
+                    >&#9790;</span>
+                  </span>
+                )}
+              </span>
+              {t.swatches && (
+                <span className={styles.themeSwatches}>
+                  {t.swatches.map((color, i) => (
+                    <span key={i} className={styles.themeSwatch} style={{ background: color }} />
+                  ))}
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+      <label className={styles.systemToggle}>
+        <input
+          type="checkbox"
+          checked={preferSystem}
+          onChange={(e) => onSetPreferSystem(e.target.checked)}
+        />
+        <span>Match system light/dark preference</span>
+      </label>
+      <p className={styles.systemToggleHint}>
+        Automatically switches between light and dark variants when available.
+      </p>
+      <p className={styles.themeActive}>
+        Active theme: <strong>{resolvedThemeId}</strong>
+      </p>
+    </section>
+  );
+}

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent } from "@storybook/test";
+import { CredentialProvidersPanel } from "./CredentialProvidersPanel.js";
+import { buildCredentialProviderConfig } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof CredentialProvidersPanel> = {
+  title: "App/Panels/CredentialProvidersPanel",
+  component: CredentialProvidersPanel,
+  args: {
+    credentialProviders: buildCredentialProviderConfig(),
+    onUpdateCredentialProviders: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CredentialProvidersPanel>;
+
+/** Default state with all providers set to "off". */
+export const AllProvidersOff: Story = {
+  play: async ({ canvas }) => {
+    // All five provider labels should be visible
+    await expect(canvas.getByText("Claude")).toBeInTheDocument();
+    await expect(canvas.getByText("GitHub")).toBeInTheDocument();
+    await expect(canvas.getByText("Copilot")).toBeInTheDocument();
+    await expect(canvas.getByText("Codex")).toBeInTheDocument();
+    await expect(canvas.getByText("Goose")).toBeInTheDocument();
+
+    // Section title should be present
+    await expect(canvas.getByText("Credential Providers")).toBeInTheDocument();
+  },
+};
+
+/** Some providers enabled. */
+export const SomeProvidersEnabled: Story = {
+  args: {
+    credentialProviders: buildCredentialProviderConfig({
+      claude: "subscription",
+      github: "on",
+    }),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Claude")).toBeInTheDocument();
+    await expect(canvas.getByText("GitHub")).toBeInTheDocument();
+  },
+};
+
+/** Changing a provider selection fires the onUpdateCredentialProviders callback. */
+export const ChangingProviderFiresCallback: Story = {
+  args: {
+    onUpdateCredentialProviders: fn(),
+  },
+  play: async ({ canvas, args }) => {
+    // Find the GitHub provider row by its label, then get its select element
+    const githubLabel: HTMLElement = canvas.getByText("GitHub");
+    const githubRow: HTMLElement = githubLabel.closest("div")!;
+    const githubSelect: HTMLSelectElement = githubRow.querySelector("select")!;
+
+    await userEvent.selectOptions(githubSelect, "on");
+
+    await expect(args.onUpdateCredentialProviders).toHaveBeenCalled();
+  },
+};

package/src/components/panels/CredentialProvidersPanel.tsx

@@ -0,0 +1,111 @@
+import type { JSX } from "react";
+import type { CredentialProviderConfig } from "../../hooks/types.js";
+import styles from "./SettingsPanel.module.scss";
+
+/** Provider descriptor for rendering toggle rows. */
+interface ProviderDef {
+  key: keyof CredentialProviderConfig;
+  label: string;
+  description: string;
+  options: Array<{ value: string; label: string }>;
+}
+
+/** Definitions for each credential provider. */
+const PROVIDERS: ProviderDef[] = [
+  {
+    key: "claude",
+    label: "Claude",
+    description: "Forward Claude credentials for AI agent access.",
+    options: [
+      { value: "off", label: "Off" },
+      { value: "subscription", label: "Subscription" },
+      { value: "api_key", label: "API Key" },
+    ],
+  },
+  {
+    key: "github",
+    label: "GitHub",
+    description: "Forward GITHUB_TOKEN and GH_TOKEN for git operations.",
+    options: [
+      { value: "off", label: "Off" },
+      { value: "on", label: "On" },
+    ],
+  },
+  {
+    key: "copilot",
+    label: "Copilot",
+    description: "Forward Copilot tokens (COPILOT_GITHUB_TOKEN, CLI config).",
+    options: [
+      { value: "off", label: "Off" },
+      { value: "on", label: "On" },
+    ],
+  },
+  {
+    key: "codex",
+    label: "Codex",
+    description: "Forward OPENAI_API_KEY for Codex/OpenAI access.",
+    options: [
+      { value: "off", label: "Off" },
+      { value: "on", label: "On" },
+    ],
+  },
+  {
+    key: "goose",
+    label: "Goose",
+    description: "Forward Goose config and API keys for Goose agent access.",
+    options: [
+      { value: "off", label: "Off" },
+      { value: "on", label: "On" },
+    ],
+  },
+];
+
+/** Props for the CredentialProvidersPanel component. */
+interface CredentialProvidersPanelProps {
+  /** Current credential provider configuration. */
+  credentialProviders: CredentialProviderConfig;
+  /** Callback to update the credential provider configuration. */
+  onUpdateCredentialProviders: (config: CredentialProviderConfig) => void;
+}
+
+/** Panel for configuring which credential providers are auto-forwarded to environments. */
+export function CredentialProvidersPanel({ credentialProviders, onUpdateCredentialProviders }: CredentialProvidersPanelProps): JSX.Element {
+
+  const handleChange = (key: keyof CredentialProviderConfig, value: string): void => {
+    const updated: CredentialProviderConfig = { ...credentialProviders };
+    if (key === "claude") {
+      updated.claude = value as CredentialProviderConfig["claude"];
+    } else {
+      updated[key] = value as "off" | "on";
+    }
+    onUpdateCredentialProviders(updated);
+  };
+
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Credential Providers</h3>
+      <p className={styles.sectionDescription}>
+        Enable providers to automatically forward credentials to environments at task start.
+        Credentials are read fresh from the host each time.
+      </p>
+
+      <div className={styles.tokenList}>
+        {PROVIDERS.map((provider) => (
+          <div key={provider.key} className={styles.tokenRow}>
+            <span className={styles.tokenName}>{provider.label}</span>
+            <span className={styles.tokenTarget}>{provider.description}</span>
+            <select
+              className={styles.select}
+              value={credentialProviders[provider.key]}
+              onChange={(e) => handleChange(provider.key, e.target.value)}
+            >
+              {provider.options.map((opt) => (
+                <option key={opt.value} value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}