@grackle-ai/web-components 0.107.2

package/src/components/schedules/ScheduleManager.tsx

@@ -0,0 +1,160 @@
+import { useState, useMemo, type JSX } from "react";
+import type { PersonaData, ScheduleData, ScheduleUpdate } from "../../hooks/types.js";
+import { Button } from "../display/Button.js";
+import { ConfirmDialog } from "../display/index.js";
+import { formatRelativeTime, formatCountdown } from "../../utils/time.js";
+import styles from "./ScheduleManager.module.scss";
+
+/** Props for the ScheduleManager component. */
+export interface ScheduleManagerProps {
+  /** All schedules. */
+  schedules: ScheduleData[];
+  /** All personas — used to resolve persona names. */
+  personas: PersonaData[];
+  /** Callback to delete a schedule. */
+  onDeleteSchedule: (scheduleId: string) => Promise<void>;
+  /** Callback to toggle a schedule's enabled state. */
+  onToggleEnabled: (scheduleId: string, fields: ScheduleUpdate) => Promise<unknown>;
+  /** Navigate to the new schedule page. */
+  onNavigateToNew: () => void;
+  /** Navigate to a schedule's detail page for editing. */
+  onNavigateToSchedule: (scheduleId: string) => void;
+}
+
+/** Schedule list view — shows cards and navigates to detail pages for create/edit. */
+export function ScheduleManager({
+  schedules, personas,
+  onDeleteSchedule, onToggleEnabled,
+  onNavigateToNew, onNavigateToSchedule,
+}: ScheduleManagerProps): JSX.Element {
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+  const scheduleToDelete = confirmDelete ? schedules.find((s) => s.id === confirmDelete) : undefined;
+
+  const handleDelete = async (id: string): Promise<void> => {
+    await onDeleteSchedule(id);
+    setConfirmDelete(null);
+  };
+
+  const personaNameMap = useMemo(() => {
+    const map = new Map<string, string>();
+    for (const p of personas) {
+      map.set(p.id, p.name);
+    }
+    return map;
+  }, [personas]);
+
+  const resolvePersonaName = (personaId: string): string => personaNameMap.get(personaId) ?? personaId;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h2>Schedules</h2>
+        <Button variant="primary" size="md" onClick={onNavigateToNew} data-testid="schedule-new-button">
+          + New Schedule
+        </Button>
+      </div>
+
+      {schedules.length === 0 ? (
+        <p className={styles.empty} data-testid="schedule-empty-state">
+          No schedules yet. Create one to run tasks on a recurring cadence.
+        </p>
+      ) : (
+        <div className={styles.list}>
+          {schedules.map((s) => (
+            <div
+              key={s.id}
+              className={styles.card}
+              data-testid={`schedule-card-${s.id}`}
+              onClick={() => onNavigateToSchedule(s.id)}
+              role="button"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.currentTarget === e.target && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onNavigateToSchedule(s.id);
+                }
+              }}
+            >
+              <div className={styles.cardHeader}>
+                <span className={styles.cardTitle}>
+                  <strong>{s.title}</strong>
+                  <span
+                    className={`${styles.statusBadge} ${s.enabled ? styles.enabled : styles.disabled}`}
+                    data-testid={`schedule-status-badge-${s.id}`}
+                  >
+                    {s.enabled ? "Enabled" : "Disabled"}
+                  </span>
+                </span>
+                <div className={styles.cardActions} onClick={(e) => e.stopPropagation()}>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const toggle = async (): Promise<void> => { await onToggleEnabled(s.id, { enabled: !s.enabled }); };
+                      toggle().catch(() => undefined);
+                    }}
+                    data-testid={`schedule-toggle-${s.id}`}
+                    title={s.enabled ? "Disable schedule" : "Enable schedule"}
+                  >
+                    {s.enabled ? "Disable" : "Enable"}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => onNavigateToSchedule(s.id)}
+                    data-testid={`schedule-edit-${s.id}`}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setConfirmDelete(s.id)}
+                    data-testid={`schedule-delete-${s.id}`}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </div>
+
+              <div className={styles.cardMeta}>
+                <span data-testid={`schedule-expression-${s.id}`}>{s.scheduleExpression}</span>
+                {s.personaId && (
+                  <span data-testid={`schedule-persona-${s.id}`}>
+                    Persona: {resolvePersonaName(s.personaId)}
+                  </span>
+                )}
+                <span data-testid={`schedule-last-run-${s.id}`}>
+                  Last run: {s.lastRunAt ? formatRelativeTime(s.lastRunAt) : "Never"}
+                </span>
+                {s.enabled && s.nextRunAt ? (
+                  <span data-testid={`schedule-next-run-${s.id}`}>
+                    Next run: {formatCountdown(s.nextRunAt)}
+                  </span>
+                ) : null}
+                {s.runCount > 0 && (
+                  <span data-testid={`schedule-run-count-${s.id}`}>
+                    Runs: {s.runCount}
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <ConfirmDialog
+        isOpen={confirmDelete !== null}
+        title="Delete Schedule?"
+        description={`"${scheduleToDelete?.title ?? ""}" will be permanently removed. Tasks already created by this schedule will not be affected.`}
+        confirmLabel="Delete"
+        onConfirm={() => {
+          if (confirmDelete) {
+            handleDelete(confirmDelete).catch(() => undefined);
+          }
+        }}
+        onCancel={() => setConfirmDelete(null)}
+      />
+    </div>
+  );
+}

package/src/components/settings/SettingsNav.module.scss

@@ -0,0 +1,82 @@
+@use '../../styles/mixins' as *;
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  width: 100%;
+  padding: var(--space-md);
+  overflow-y: auto;
+
+  @include mobile {
+    flex-direction: row;
+    width: 100%;
+    min-width: unset;
+    border-right: none;
+    border-bottom: 1px solid var(--border-subtle);
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: var(--space-xs) var(--space-sm);
+    gap: 0;
+    flex-wrap: nowrap;
+  }
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border: none;
+  border-left: 3px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-ui);
+  cursor: pointer;
+  transition: background var(--transition-fast),
+              color var(--transition-fast),
+              border-color var(--transition-fast);
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    background: var(--bg-overlay);
+    color: var(--text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--accent-green);
+    outline-offset: -2px;
+  }
+
+  @include mobile {
+    border-left: none;
+    border-bottom: 2px solid transparent;
+    white-space: nowrap;
+    flex-shrink: 0;
+    padding: var(--space-xs) var(--space-sm);
+    font-size: var(--font-size-xs);
+    width: auto;
+    border-radius: 0;
+  }
+}
+
+.tabIcon {
+  font-size: var(--font-size-base);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.tabActive {
+  border-left-color: var(--accent-green);
+  background: var(--bg-overlay);
+  color: var(--text-primary);
+  font-weight: var(--font-weight-medium);
+
+  @include mobile {
+    border-left-color: transparent;
+    border-bottom-color: var(--accent-green);
+  }
+}

package/src/components/settings/SettingsNav.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent } from "@storybook/test";
+import { SettingsNav } from "./SettingsNav.js";
+
+const meta: Meta<typeof SettingsNav> = {
+  component: SettingsNav,
+  title: "App/Settings/SettingsNav",
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** All five tabs are rendered with correct labels. */
+export const AllTabsRendered: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("tab", { name: /Credentials/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Personas/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Schedules/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Appearance/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /Shortcuts/ })).toBeInTheDocument();
+    await expect(canvas.getByRole("tab", { name: /About/ })).toBeInTheDocument();
+  },
+};
+
+/** First tab (Credentials) is selected by default. */
+export const DefaultTabIsCredentials: Story = {
+  play: async ({ canvas }) => {
+    const credentialsTab = canvas.getByRole("tab", { name: /Credentials/ });
+    await expect(credentialsTab).toHaveAttribute("aria-selected", "true");
+  },
+};
+
+/** Keyboard navigation with ArrowDown moves focus to next tab. */
+export const KeyboardNavigation: Story = {
+  play: async ({ canvas }) => {
+    const credentialsTab = canvas.getByRole("tab", { name: /Credentials/ });
+    credentialsTab.focus();
+
+    // ArrowDown should move to Personas
+    await userEvent.keyboard("{ArrowDown}");
+    const personasTab = canvas.getByRole("tab", { name: /Personas/ });
+    await expect(personasTab).toHaveFocus();
+
+    // ArrowDown again to Schedules
+    await userEvent.keyboard("{ArrowDown}");
+    const schedulesTab = canvas.getByRole("tab", { name: /Schedules/ });
+    await expect(schedulesTab).toHaveFocus();
+
+    // Home goes to first tab
+    await userEvent.keyboard("{Home}");
+    await expect(credentialsTab).toHaveFocus();
+
+    // End goes to last tab
+    await userEvent.keyboard("{End}");
+    const aboutTab = canvas.getByRole("tab", { name: /About/ });
+    await expect(aboutTab).toHaveFocus();
+  },
+};
+
+/** J/K keys navigate between tabs (vim-style aliases). */
+export const JKNavigation: Story = {
+  play: async ({ canvas }) => {
+    const credentialsTab = canvas.getByRole("tab", { name: /Credentials/ });
+    credentialsTab.focus();
+
+    // J moves down to Personas
+    await userEvent.keyboard("j");
+    const personasTab = canvas.getByRole("tab", { name: /Personas/ });
+    await expect(personasTab).toHaveFocus();
+
+    // K moves back up to Credentials
+    await userEvent.keyboard("k");
+    await expect(credentialsTab).toHaveFocus();
+  },
+};
+
+/** Tab list has proper ARIA orientation. */
+export const AriaOrientation: Story = {
+  play: async ({ canvas }) => {
+    const tablist = canvas.getByRole("tablist");
+    await expect(tablist).toHaveAttribute("aria-orientation", "vertical");
+    await expect(tablist).toHaveAttribute("aria-label", "Settings");
+  },
+};

package/src/components/settings/SettingsNav.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useRef, type JSX, type KeyboardEvent, type ReactNode } from "react";
+import { useLocation } from "react-router";
+import { CalendarClock, Info, Key, Keyboard, Palette, Puzzle, User } from "lucide-react";
+import { SETTINGS_URL, useAppNavigate } from "../../utils/navigation.js";
+import { ICON_LG } from "../../utils/iconSize.js";
+import styles from "./SettingsNav.module.scss";
+
+/** Tab definition for the settings navigation rail. */
+interface SettingsTab {
+  /** URL path segment (appended to /settings/). */
+  path: string;
+  /** Display label for the tab. */
+  label: string;
+  /** Icon element displayed before the label. */
+  icon: ReactNode;
+}
+
+/** Ordered list of settings tabs. */
+const TABS: SettingsTab[] = [
+  { path: "credentials", label: "Credentials", icon: <Key size={ICON_LG} /> },
+  { path: "personas", label: "Personas", icon: <User size={ICON_LG} /> },
+  { path: "schedules", label: "Schedules", icon: <CalendarClock size={ICON_LG} /> },
+  { path: "appearance", label: "Appearance", icon: <Palette size={ICON_LG} /> },
+  { path: "shortcuts", label: "Shortcuts", icon: <Keyboard size={ICON_LG} /> },
+  { path: "plugins", label: "Plugins", icon: <Puzzle size={ICON_LG} /> },
+  { path: "about", label: "About", icon: <Info size={ICON_LG} /> },
+];
+
+/** Vertical tab navigation rail for the settings hub. */
+export function SettingsNav(): JSX.Element {
+  const location = useLocation();
+  const navigate = useAppNavigate();
+  const tabListRef = useRef<HTMLElement>(null);
+
+  const activeTab = TABS.find((tab) => {
+    const tabPath = `${SETTINGS_URL}/${tab.path}`;
+    return location.pathname === tabPath || location.pathname.startsWith(`${tabPath}/`);
+  })?.path ?? TABS[0].path;
+
+  const handleClick = useCallback((path: string) => {
+    navigate(`${SETTINGS_URL}/${path}`);
+  }, [navigate]);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    // Derive current index from the focused element rather than location
+    // to avoid stale closures during rapid keyboard navigation.
+    const buttons = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+    if (!buttons) {
+      return;
+    }
+    const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
+    const currentIndex = focusedIndex >= 0 ? focusedIndex : TABS.findIndex((t) => t.path === activeTab);
+    let nextIndex = currentIndex;
+
+    if (e.key === "ArrowDown" || e.key === "j" || e.key === "J") {
+      e.preventDefault();
+      nextIndex = (currentIndex + 1) % TABS.length;
+    } else if (e.key === "ArrowUp" || e.key === "k" || e.key === "K") {
+      e.preventDefault();
+      nextIndex = (currentIndex - 1 + TABS.length) % TABS.length;
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      nextIndex = TABS.length - 1;
+    } else {
+      return;
+    }
+
+    const nextPath = TABS[nextIndex].path;
+    navigate(`${SETTINGS_URL}/${nextPath}`);
+    buttons[nextIndex]?.focus(); // eslint-disable-line @typescript-eslint/no-unnecessary-condition -- index may be out of bounds
+  }, [activeTab, navigate]);
+
+  return (
+    <nav
+      className={styles.nav}
+      ref={tabListRef}
+      role="tablist"
+      aria-orientation="vertical"
+      aria-label="Settings"
+      onKeyDown={handleKeyDown}
+    >
+      {TABS.map((tab) => {
+        const isActive = tab.path === activeTab;
+        return (
+          <button
+            key={tab.path}
+            role="tab"
+            type="button"
+            aria-selected={isActive}
+            tabIndex={isActive ? 0 : -1}
+            className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
+            onClick={() => handleClick(tab.path)}
+          >
+            <span className={styles.tabIcon} aria-hidden="true">{tab.icon}</span>
+            {tab.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/streams/StreamDetailPanel.module.scss

@@ -0,0 +1,206 @@
+// =============================================================================
+// StreamDetailPanel — right pull-out drawer for stream details
+// =============================================================================
+
+.panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 350px;
+  background: var(--bg-surface, #1a1a2e);
+  border-left: 1px solid var(--border-default, #333);
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  z-index: 10;
+  animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border-default, #333);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #999);
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+  flex-shrink: 0;
+
+  &:hover {
+    color: var(--text-primary, #fff);
+  }
+}
+
+.body {
+  padding: 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.sectionLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--text-disabled, #666);
+  margin-bottom: 8px;
+  letter-spacing: 0.05em;
+}
+
+.metaRow {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 13px;
+}
+
+.metaKey {
+  color: var(--text-secondary, #999);
+  flex-shrink: 0;
+  min-width: 100px;
+}
+
+.metaValue {
+  color: var(--text-primary, #eee);
+  font-family: monospace;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subscriberCard {
+  border: 1px solid var(--border-default, #333);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.subscriberHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.sessionLink {
+  background: none;
+  border: none;
+  color: var(--accent-blue, #4A9EFF);
+  cursor: pointer;
+  font-size: 12px;
+  font-family: monospace;
+  padding: 0;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 200px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.badges {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  background: var(--bg-inset, #222);
+  color: var(--text-secondary, #aaa);
+}
+
+.badgeRw {
+  composes: badge;
+  background: rgba(74, 158, 255, 0.15);
+  color: var(--accent-blue, #4A9EFF);
+}
+
+.badgeR {
+  composes: badge;
+  background: rgba(100, 200, 100, 0.15);
+  color: var(--accent-green, #4CAF50);
+}
+
+.badgeW {
+  composes: badge;
+  background: rgba(255, 165, 0, 0.15);
+  color: var(--accent-yellow, #FFA500);
+}
+
+.badgeAsync {
+  composes: badge;
+  background: rgba(128, 90, 213, 0.15);
+  color: #a78bfa;
+}
+
+.badgeSync {
+  composes: badge;
+}
+
+.badgeDetach {
+  composes: badge;
+  background: rgba(255, 80, 80, 0.15);
+  color: var(--accent-red, #ef4444);
+}
+
+.spawnTag {
+  composes: badge;
+  font-size: 10px;
+}
+
+.fdNumber {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--text-disabled, #666);
+}
+
+.emptySubscribers {
+  font-size: 13px;
+  color: var(--text-disabled, #666);
+  font-style: italic;
+}