@grackle-ai/web-components 0.107.2

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

@@ -0,0 +1,94 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Findings Panel — workspace findings cards with staggered animation
+// =============================================================================
+
+.container {
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.emptyState {
+  padding: var(--space-xl);
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.card {
+  @include surface-card;
+  @include card-hover;
+  padding: var(--space-md);
+}
+
+.cardClickable {
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-blue);
+    outline-offset: 2px;
+  }
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-xs);
+
+  @include mobile {
+    flex-wrap: wrap;
+  }
+}
+
+.categoryBadge {
+  border-radius: var(--radius-full);
+  padding: 2px var(--space-md);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+}
+
+.findingTitle {
+  font-weight: var(--font-weight-bold);
+  color: var(--text-primary);
+  font-size: var(--font-size-md);
+}
+
+.findingDate {
+  margin-left: auto;
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+
+  @include mobile {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+.findingContent {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+}
+
+.tags {
+  margin-top: var(--space-xs);
+  display: flex;
+  gap: var(--space-xs);
+
+  @include mobile {
+    flex-wrap: wrap;
+  }
+}
+
+// Frosted inset chip for tags — third glass tier with category-tinted border
+.tag {
+  @include surface-inset;
+  font-size: 10px;
+  padding: 1px var(--space-xs);
+  border-radius: var(--radius-full);
+  color: var(--text-secondary);
+}

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

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { FindingsPanel } from "./FindingsPanel.js";
+import { buildFinding } from "../../test-utils/storybook-helpers.js";
+
+const meta: Meta<typeof FindingsPanel> = {
+  title: "Grackle/Panels/FindingsPanel",
+  component: FindingsPanel,
+  tags: ["autodocs"],
+  args: {
+    findings: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FindingsPanel>;
+
+/** Empty state shows a placeholder message when there are no findings. */
+export const EmptyState: Story = {
+  args: {
+    findings: [],
+  },
+  play: async ({ canvas }) => {
+    await expect(
+      canvas.getByText("No findings yet. Agents will post discoveries here."),
+    ).toBeInTheDocument();
+  },
+};
+
+/** Renders a single finding card with category badge, title, content, and tags. */
+export const SingleFinding: Story = {
+  args: {
+    findings: [
+      buildFinding({
+        id: "f-1",
+        category: "architecture",
+        title: "Service boundary issue",
+        content: "The auth service is tightly coupled to the user service.",
+        tags: ["coupling", "refactor"],
+      }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("architecture")).toBeInTheDocument();
+    await expect(canvas.getByText("Service boundary issue")).toBeInTheDocument();
+    await expect(canvas.getByText(/tightly coupled/)).toBeInTheDocument();
+    await expect(canvas.getByText("coupling")).toBeInTheDocument();
+    await expect(canvas.getByText("refactor")).toBeInTheDocument();
+  },
+};
+
+/** Renders multiple findings across different categories. */
+export const MultipleFindings: Story = {
+  args: {
+    findings: [
+      buildFinding({
+        id: "f-1",
+        category: "bug",
+        title: "Race condition in session cleanup",
+        content: "When two sessions end simultaneously, the cleanup handler may skip one.",
+        tags: ["concurrency"],
+      }),
+      buildFinding({
+        id: "f-2",
+        category: "api",
+        title: "Missing pagination on list endpoints",
+        content: "The list_tasks endpoint returns all tasks without pagination support.",
+        tags: ["api", "performance"],
+      }),
+      buildFinding({
+        id: "f-3",
+        category: "decision",
+        title: "Chose SQLite over PostgreSQL",
+        content: "SQLite with WAL mode provides sufficient concurrency for single-server deployment.",
+        tags: ["database"],
+      }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    // Use getAllByText for "api" since it appears as both a category badge and a tag
+    await expect(canvas.getByText("bug")).toBeInTheDocument();
+    const apiElements = canvas.getAllByText("api");
+    await expect(apiElements.length).toBeGreaterThanOrEqual(1);
+    await expect(canvas.getByText("decision")).toBeInTheDocument();
+    await expect(canvas.getByText("Race condition in session cleanup")).toBeInTheDocument();
+    await expect(canvas.getByText("Missing pagination on list endpoints")).toBeInTheDocument();
+    await expect(canvas.getByText("Chose SQLite over PostgreSQL")).toBeInTheDocument();
+  },
+};
+
+/** Long content is truncated at 300 characters with an ellipsis. */
+export const LongContentTruncated: Story = {
+  args: {
+    findings: [
+      buildFinding({
+        id: "f-long",
+        category: "pattern",
+        title: "Verbose finding",
+        content: "A".repeat(400),
+        tags: [],
+      }),
+    ],
+  },
+  play: async ({ canvas }) => {
+    // The rendered content should end with "..." since it exceeds 300 chars
+    const contentEl = canvas.getByText(/A{10,}\.\.\.$/);
+    await expect(contentEl).toBeInTheDocument();
+  },
+};

package/src/components/panels/FindingsPanel.tsx

@@ -0,0 +1,76 @@
+import type { JSX } from "react";
+import { motion } from "motion/react";
+import type { FindingData } from "../../hooks/types.js";
+import styles from "./FindingsPanel.module.scss";
+import { formatRelativeTime } from "../../utils/time.js";
+import { getCategoryColor } from "../../utils/findingCategory.js";
+
+/** Props for the FindingsPanel component. */
+interface Props {
+  /** Pre-filtered findings to display. */
+  findings: FindingData[];
+  /** Optional click handler for finding cards. When provided, cards become clickable. */
+  onFindingClick?: (findingId: string) => void;
+}
+
+/** Displays workspace findings as styled cards with staggered entrance animation. */
+export function FindingsPanel({ findings, onFindingClick }: Props): JSX.Element {
+  if (findings.length === 0) {
+    return (
+      <div className={styles.emptyState}>
+        No findings yet. Agents will post discoveries here.
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {findings.map((f, index) => {
+        const categoryColor = getCategoryColor(f.category);
+        const Tag = onFindingClick ? motion.button : motion.div;
+        return (
+          <Tag
+            key={f.id}
+            type={onFindingClick ? "button" : undefined}
+            className={`${styles.card} ${onFindingClick ? styles.cardClickable : ""}`}
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.05, duration: 0.2 }}
+            onClick={onFindingClick ? () => { onFindingClick(f.id); } : undefined}
+          >
+            <div className={styles.cardHeader}>
+              <span
+                className={styles.categoryBadge}
+                style={{ background: categoryColor.bg, color: categoryColor.text }}
+              >
+                {f.category}
+              </span>
+              <span className={styles.findingTitle}>
+                {f.title}
+              </span>
+              <span className={styles.findingDate} title={f.createdAt}>
+                {formatRelativeTime(f.createdAt)}
+              </span>
+            </div>
+            <div className={styles.findingContent}>
+              {f.content.length > 300 ? f.content.slice(0, 300) + "..." : f.content}
+            </div>
+            {f.tags.length > 0 && (
+              <div className={styles.tags}>
+                {f.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className={styles.tag}
+                    style={{ color: categoryColor.text, textShadow: `0 0 8px ${categoryColor.text}` }}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </Tag>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,65 @@
+@use '../../styles/mixins' as *;
+
+// =============================================================================
+// Keyboard Shortcuts Panel
+// =============================================================================
+
+.group {
+  margin-bottom: var(--space-lg);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.groupTitle {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  color: var(--text-secondary);
+  margin: 0 0 var(--space-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.shortcutList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.shortcutRow {
+  @include surface-inset;
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-xs) var(--space-md);
+}
+
+.keys {
+  display: flex;
+  gap: 4px;
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 24px;
+  padding: 0 var(--space-xs);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-surface);
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+}
+
+.description {
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect } from "@storybook/test";
+import { KeyboardShortcutsPanel } from "./KeyboardShortcutsPanel.js";
+
+const meta: Meta<typeof KeyboardShortcutsPanel> = {
+  title: "App/Panels/KeyboardShortcutsPanel",
+  component: KeyboardShortcutsPanel,
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Panel renders with all shortcut categories visible. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByTestId("keyboard-shortcuts-panel")).toBeInTheDocument();
+    await expect(canvas.getByText("Keyboard Shortcuts")).toBeInTheDocument();
+  },
+};
+
+/** All category headings are rendered. */
+export const AllCategoriesRendered: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Global")).toBeInTheDocument();
+    await expect(canvas.getByText("Task Page")).toBeInTheDocument();
+    await expect(canvas.getByText("Workspace Page")).toBeInTheDocument();
+    await expect(canvas.getByText("Navigation Lists")).toBeInTheDocument();
+    await expect(canvas.getByText("Editing")).toBeInTheDocument();
+    await expect(canvas.getByText("Chat")).toBeInTheDocument();
+  },
+};
+
+/** Specific shortcut descriptions are present. */
+export const ShortcutDescriptions: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByText("Open keyboard shortcuts reference")).toBeInTheDocument();
+    await expect(canvas.getByText("Create a new task")).toBeInTheDocument();
+    await expect(canvas.getByText("Switch to Overview tab")).toBeInTheDocument();
+    await expect(canvas.getByText("Send message (when input is focused)")).toBeInTheDocument();
+  },
+};

package/src/components/panels/KeyboardShortcutsPanel.tsx

@@ -0,0 +1,104 @@
+import type { JSX } from "react";
+import styles from "./SettingsPanel.module.scss";
+import shortcutStyles from "./KeyboardShortcutsPanel.module.scss";
+
+/** A single keyboard shortcut definition. */
+interface Shortcut {
+  /** Key combination displayed as kbd badges (e.g. ["?"], ["Ctrl", "/"]). */
+  keys: string[];
+  /** Human-readable description of the action. */
+  description: string;
+}
+
+/** A named group of related shortcuts. */
+interface ShortcutGroup {
+  /** Section heading. */
+  title: string;
+  /** Shortcuts in this group. */
+  shortcuts: Shortcut[];
+}
+
+/** Static shortcut data — all shortcuts documented in the app. */
+const SHORTCUT_GROUPS: ShortcutGroup[] = [
+  {
+    title: "Global",
+    shortcuts: [
+      { keys: ["?"], description: "Open keyboard shortcuts reference" },
+      { keys: ["N"], description: "Create a new task" },
+      { keys: ["Escape"], description: "Close dialog or cancel editing" },
+    ],
+  },
+  {
+    title: "Task Page",
+    shortcuts: [
+      { keys: ["1"], description: "Switch to Overview tab" },
+      { keys: ["2"], description: "Switch to Stream tab" },
+      { keys: ["3"], description: "Switch to Findings tab" },
+    ],
+  },
+  {
+    title: "Workspace Page",
+    shortcuts: [
+      { keys: ["1"], description: "Switch to Graph view" },
+      { keys: ["2"], description: "Switch to Board view" },
+      { keys: ["3"], description: "Switch to Tasks view" },
+    ],
+  },
+  {
+    title: "Navigation Lists",
+    shortcuts: [
+      { keys: ["\u2190"], description: "Previous tab (horizontal nav)" },
+      { keys: ["\u2192"], description: "Next tab (horizontal nav)" },
+      { keys: ["\u2191"], description: "Previous item (vertical nav)" },
+      { keys: ["\u2193"], description: "Next item (vertical nav)" },
+      { keys: ["J"], description: "Next item (alias for arrow down/right)" },
+      { keys: ["K"], description: "Previous item (alias for arrow up/left)" },
+      { keys: ["Home"], description: "Jump to first item" },
+      { keys: ["End"], description: "Jump to last item" },
+    ],
+  },
+  {
+    title: "Editing",
+    shortcuts: [
+      { keys: ["Enter"], description: "Activate / save inline edit" },
+      { keys: ["Space"], description: "Activate button or start editing" },
+      { keys: ["Escape"], description: "Cancel edit and discard changes" },
+    ],
+  },
+  {
+    title: "Chat",
+    shortcuts: [
+      { keys: ["Enter"], description: "Send message (when input is focused)" },
+    ],
+  },
+];
+
+/** Settings panel listing all keyboard shortcuts grouped by category. */
+export function KeyboardShortcutsPanel(): JSX.Element {
+  return (
+    <section className={styles.section} data-testid="keyboard-shortcuts-panel">
+      <h3 className={styles.sectionTitle}>Keyboard Shortcuts</h3>
+      <p className={styles.sectionDescription}>
+        Keyboard shortcuts for navigating and interacting with Grackle. Global shortcuts are
+        suppressed while typing in text fields.
+      </p>
+      {SHORTCUT_GROUPS.map((group) => (
+        <div key={group.title} className={shortcutStyles.group}>
+          <h4 className={shortcutStyles.groupTitle}>{group.title}</h4>
+          <div className={shortcutStyles.shortcutList}>
+            {group.shortcuts.map((shortcut) => (
+              <div key={shortcut.description} className={shortcutStyles.shortcutRow}>
+                <span className={shortcutStyles.keys}>
+                  {shortcut.keys.map((k) => (
+                    <kbd key={k} className={shortcutStyles.kbd}>{k}</kbd>
+                  ))}
+                </span>
+                <span className={shortcutStyles.description}>{shortcut.description}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}

package/src/components/panels/PluginsPanel.tsx

@@ -0,0 +1,77 @@
+import type { JSX } from "react";
+import type { PluginData } from "../../hooks/types.js";
+import styles from "./SettingsPanel.module.scss";
+
+/** Props for the PluginsPanel component. */
+export interface PluginsPanelProps {
+  /** List of all known plugins. */
+  plugins: PluginData[];
+  /** Whether the plugin list is loading. */
+  loading: boolean;
+  /** Callback invoked when the user toggles a plugin's enabled state. */
+  onSetPluginEnabled: (name: string, enabled: boolean) => void;
+}
+
+/** Settings panel for managing Grackle plugins. */
+export function PluginsPanel({ plugins, loading, onSetPluginEnabled }: PluginsPanelProps): JSX.Element {
+  return (
+    <div className={styles.container} data-testid="plugins-panel">
+      <h2 className={styles.heading}>Plugins</h2>
+      <div className={styles.section}>
+        <p className={styles.sectionDescription}>
+          Enable or disable optional Grackle plugins. A server restart is required for changes to take effect.
+        </p>
+        {loading && (
+          <p className={styles.emptyState}>Loading plugins...</p>
+        )}
+        {!loading && plugins.length === 0 && (
+          <p className={styles.emptyState}>No plugins found.</p>
+        )}
+        {!loading && plugins.map((plugin) => {
+          const pendingChange = plugin.enabled !== plugin.loaded;
+          return (
+            <div
+              key={plugin.name}
+              className={styles.tokenRow}
+              data-testid={`plugin-row-${plugin.name}`}
+            >
+              <div style={{ flex: 1 }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  <span className={styles.tokenName}>{plugin.name}</span>
+                  {plugin.required && (
+                    <span className={styles.tokenBadge} title="Required — cannot be disabled">
+                      required
+                    </span>
+                  )}
+                </div>
+                <div className={styles.tokenTarget}>{plugin.description}</div>
+                {pendingChange && (
+                  <div
+                    style={{ fontSize: "var(--font-size-xs)", color: "var(--accent-yellow)", marginTop: "2px" }}
+                    data-testid={`plugin-restart-notice-${plugin.name}`}
+                  >
+                    Restart Grackle to apply changes
+                  </div>
+                )}
+              </div>
+              <label
+                style={{ display: "flex", alignItems: "center", gap: "6px", cursor: plugin.required ? "not-allowed" : "pointer" }}
+                title={plugin.required ? "Core is required and cannot be disabled" : undefined}
+              >
+                <input
+                  type="checkbox"
+                  checked={plugin.enabled}
+                  disabled={plugin.required}
+                  onChange={(e) => onSetPluginEnabled(plugin.name, e.target.checked)}
+                  data-testid={`plugin-toggle-${plugin.name}`}
+                  aria-label={`Enable or disable ${plugin.name} plugin`}
+                  style={{ accentColor: "var(--accent-green)", width: "16px", height: "16px" }}
+                />
+              </label>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}