@grackle-ai/web-components 0.107.2 → 0.108.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.107.2",
+  "version": "0.108.1",
   "description": "Presentational React component library for the Grackle web UI",
   "license": "MIT",
   "repository": {
@@ -40,7 +40,7 @@
     "remark-gfm": "^4.0.0",
     "lucide-react": "~0.474.0",
     "react-router": "^7.0.0",
-    "@grackle-ai/common": "0.107.2"
+    "@grackle-ai/common": "0.108.1"
   },
   "devDependencies": {
     "@rushstack/heft": "1.2.7",

package/rush-logs/web-components._phase_build.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: bc1d5bf9201ce71abeaeaddd096deb9b0805d703
+Cache key: c8da732c75a50be68d2a40b1c14aeab2654cc1af
 Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
 Successfully restored output from the build cache.

package/rush-logs/web-components._phase_build.log

@@ -0,0 +1,18 @@
+Invoking: heft run --only build -- --clean 
+ ---- build started ---- 
+[build:typescript] Using TypeScript version 5.7.3
+[build:storybook-build] Building Storybook...
+[build:storybook-build] Storybook build completed.
+[build:vite-build] Starting Vite build...
+[build:lint] Using ESLint version 9.39.4
+vite v6.4.1 building for production...
+transforming...
+✓ 2574 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/index.css    156.05 kB │ gzip:  20.36 kB
+dist/index.js   1,373.42 kB │ gzip: 351.63 kB
+✓ built in 6.79s
+[build:vite-build] Vite build completed.
+ ---- build finished (97.523s) ---- 
+-------------------- Finished (97.527s) --------------------

package/rush-logs/web-components._phase_test.cache.log

@@ -1,4 +1,4 @@
 Build cache hit.
-Cache key: 3ae72563f781afd72723475938136f113846603e
+Cache key: fb761ea36fead333e4d2b59ce5ade8fb1bc8d724
 Clearing cached folders: .rush/temp/operation/_phase_test
 Successfully restored output from the build cache.

package/rush-logs/web-components._phase_test.log

@@ -0,0 +1,121 @@
+Invoking: heft run --only test 
+The provided list of phases does not contain all phase dependencies. You may need to run the excluded phases manually.
+ ---- test started ---- 
+[test:vitest] Running vitest...
+
+ RUN  v3.2.4 /home/runner/work/grackle/grackle/packages/web-components
+
+ ✓ src/utils/sessionEvents.test.ts (14 tests) 48ms
+ ✓ src/utils/eventContent.test.ts (38 tests) 155ms
+ ✓ src/utils/dashboard.test.ts (4 tests) 33ms
+ ✓ src/utils/route-config.test.ts (23 tests) 59ms
+ ✓ src/utils/scrollUtils.test.ts (11 tests) 37ms
+ ✓ src/utils/breadcrumbs.test.ts (18 tests) 58ms
+ ✓ src/components/tools/classifyTool.test.ts (6 tests) 12ms
+ ✓ src/components/tools/toolCardHelpers.test.ts (10 tests) 16ms
+ ✓ src/components/display/extractText.test.tsx (8 tests) 17ms
+ ✓ src/components/editable/useEditableField.test.tsx (17 tests) 164ms
+ ✓ src/hooks/useEventSelection.test.ts (13 tests) 220ms
+ ✓ src/components/notifications/UpdateBanner.test.tsx (4 tests) 136ms
+
+ Test Files  12 passed (12)
+      Tests  166 passed (166)
+   Start at  02:28:03
+   Duration  14.69s (transform 2.51s, setup 0ms, collect 16.67s, tests 957ms, environment 8.65s, prepare 3.84s)
+
+[test:vitest] Vitest completed.
+[test:storybook-test] Starting Storybook static server on port 34673...
+[test:storybook-test] Storybook server ready. Running interaction tests...
+jest-haste-map: duplicate manual mock found: adapter-manager
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/adapter-manager.js
+    * <rootDir>/packages/server/src/__mocks__/adapter-manager.ts
+
+jest-haste-map: duplicate manual mock found: auto-reconnect
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/auto-reconnect.js
+    * <rootDir>/packages/server/src/__mocks__/auto-reconnect.ts
+
+jest-haste-map: duplicate manual mock found: event-bus
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/event-bus.js
+    * <rootDir>/packages/server/src/__mocks__/event-bus.ts
+
+jest-haste-map: duplicate manual mock found: event-processor
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/event-processor.js
+    * <rootDir>/packages/server/src/__mocks__/event-processor.ts
+
+jest-haste-map: duplicate manual mock found: github-import
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/github-import.js
+    * <rootDir>/packages/server/src/__mocks__/github-import.ts
+
+jest-haste-map: duplicate manual mock found: lifecycle
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/lifecycle.js
+    * <rootDir>/packages/server/src/__mocks__/lifecycle.ts
+
+jest-haste-map: duplicate manual mock found: log-writer
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/log-writer.js
+    * <rootDir>/packages/server/src/__mocks__/log-writer.ts
+
+jest-haste-map: duplicate manual mock found: logger
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/logger.js
+    * <rootDir>/packages/server/src/__mocks__/logger.ts
+
+jest-haste-map: duplicate manual mock found: pipe-delivery
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/pipe-delivery.js
+    * <rootDir>/packages/server/src/__mocks__/pipe-delivery.ts
+
+jest-haste-map: duplicate manual mock found: processor-registry
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/processor-registry.js
+    * <rootDir>/packages/server/src/__mocks__/processor-registry.ts
+
+jest-haste-map: duplicate manual mock found: reanimate-agent
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/reanimate-agent.js
+    * <rootDir>/packages/server/src/__mocks__/reanimate-agent.ts
+
+jest-haste-map: duplicate manual mock found: session-recovery
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/session-recovery.js
+    * <rootDir>/packages/server/src/__mocks__/session-recovery.ts
+
+jest-haste-map: duplicate manual mock found: stream-hub
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/stream-hub.js
+    * <rootDir>/packages/server/src/__mocks__/stream-hub.ts
+
+jest-haste-map: duplicate manual mock found: stream-registry
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/stream-registry.js
+    * <rootDir>/packages/server/src/__mocks__/stream-registry.ts
+
+jest-haste-map: duplicate manual mock found: token-push
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/token-push.js
+    * <rootDir>/packages/server/src/__mocks__/token-push.ts
+
+jest-haste-map: duplicate manual mock found: utils/exec
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/exec.js
+    * <rootDir>/packages/server/src/__mocks__/utils/exec.ts
+
+jest-haste-map: duplicate manual mock found: utils/format-gh-error
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/format-gh-error.js
+    * <rootDir>/packages/server/src/__mocks__/utils/format-gh-error.ts
+
+jest-haste-map: duplicate manual mock found: utils/network
+  The following files share their name; please delete one of them:
+    * <rootDir>/packages/server/dist/__mocks__/utils/network.js
+    * <rootDir>/packages/server/src/__mocks__/utils/network.ts
+
+[test:storybook-test] Storybook interaction tests completed.
+ ---- test finished (113.409s) ---- 
+-------------------- Finished (113.416s) --------------------

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

@@ -9,6 +9,7 @@ const meta: Meta<typeof EnvironmentEditPanel> = {
   args: {
     mode: "new",
     environments: [],
+    githubAccounts: [],
     onAddEnvironment: fn(),
     onUpdateEnvironment: fn(),
     onListCodespaces: fn(),

package/src/components/panels/EnvironmentEditPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, type JSX } from "react";
 import type { ToastVariant } from "../../context/ToastContext.js";
-import type { Environment, Codespace } from "../../hooks/types.js";
+import type { Environment, Codespace, GitHubAccountData } from "../../hooks/types.js";
 import { ENVIRONMENTS_URL, environmentUrl, useAppNavigate } from "../../utils/navigation.js";
 import { EditableTextField } from "../editable/EditableTextField.js";
 import styles from "./EnvironmentEditPanel.module.scss";
@@ -17,12 +17,14 @@ interface Props {
   environmentId?: string;
   /** All environments (for lookup in edit mode). */
   environments: Environment[];
+  /** All registered GitHub accounts for the account selector. */
+  githubAccounts: GitHubAccountData[];
   /** Callback to add a new environment. */
-  onAddEnvironment: (displayName: string, adapterType: string, adapterConfig?: Record<string, unknown>) => void;
+  onAddEnvironment: (displayName: string, adapterType: string, adapterConfig?: Record<string, unknown>, githubAccountId?: string) => void;
   /** Callback to update an existing environment. */
-  onUpdateEnvironment: (environmentId: string, fields: { displayName?: string; adapterConfig?: Record<string, unknown> }) => void;
-  /** Callback to list available codespaces. */
-  onListCodespaces: () => void;
+  onUpdateEnvironment: (environmentId: string, fields: { displayName?: string; adapterConfig?: Record<string, unknown>; githubAccountId?: string }) => void;
+  /** Callback to list available codespaces, optionally filtered by GitHub account. */
+  onListCodespaces: (githubAccountId?: string) => void;
   /** Available codespaces. */
   codespaces: Codespace[];
   /** Error from codespace operations. */
@@ -200,7 +202,7 @@ function CodespacePicker({ codespaceName, onCodespaceNameChange, envName, onEnvN
  * - edit: pre-populated form; uses click-to-edit fields that auto-save via
  *         updateEnvironment.
  */
-export function EnvironmentEditPanel({ mode, environmentId, environments, onAddEnvironment, onUpdateEnvironment, onListCodespaces, codespaces, codespaceError, codespaceListError, codespaceCreating, onCreateCodespace, onShowToast }: Props): JSX.Element {
+export function EnvironmentEditPanel({ mode, environmentId, environments, githubAccounts, onAddEnvironment, onUpdateEnvironment, onListCodespaces, codespaces, codespaceError, codespaceListError, codespaceCreating, onCreateCodespace, onShowToast }: Props): JSX.Element {
   const navigate = useAppNavigate();
 
   const isEdit = mode === "edit";
@@ -219,6 +221,7 @@ export function EnvironmentEditPanel({ mode, environmentId, environments, onAddE
   const [image, setImage] = useState("");
   const [repo, setRepo] = useState("");
   const [codespaceName, setCodespaceName] = useState("");
+  const [githubAccountId, setGithubAccountId] = useState("");
 
   // ─── Edit mode state ───────────────────────────────
 
@@ -286,7 +289,7 @@ export function EnvironmentEditPanel({ mode, environmentId, environments, onAddE
     if (!isCreateValid()) {
       return;
     }
-    onAddEnvironment(envName.trim(), adapterType, buildCreateConfig());
+    onAddEnvironment(envName.trim(), adapterType, buildCreateConfig(), githubAccountId || undefined);
     onShowToast?.("Environment added successfully", "success");
     navigate(ENVIRONMENTS_URL, { replace: true });
   };
@@ -406,6 +409,32 @@ export function EnvironmentEditPanel({ mode, environmentId, environments, onAddE
               </span>
             </div>
 
+            {/* GitHub Account (codespace and docker only). Show when accounts are
+                registered OR when the env already has an account association so
+                the user can clear it even if the referenced account was removed. */}
+            {(existingEnv.adapterType === "codespace" || existingEnv.adapterType === "docker") && (githubAccounts.length > 0 || Boolean(existingEnv.githubAccountId)) && (
+              <div className={styles.section}>
+                <label className={styles.label}>GitHub Account</label>
+                <select
+                  value={existingEnv.githubAccountId || ""}
+                  onChange={(e) => {
+                    if (environmentId) {
+                      onUpdateEnvironment(environmentId, { githubAccountId: e.target.value });
+                    }
+                  }}
+                  className={styles.adapterSelect}
+                  data-testid="env-edit-github-account"
+                >
+                  <option value="">(Default)</option>
+                  {githubAccounts.map((a) => (
+                    <option key={a.id} value={a.id}>
+                      {a.label}{a.username ? ` (@${a.username})` : ""}{a.isDefault ? " — default" : ""}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
             {/* Adapter-specific editable fields */}
             {existingEnv.adapterType === "local" && (
               <>
@@ -620,7 +649,7 @@ export function EnvironmentEditPanel({ mode, environmentId, environments, onAddE
               onChange={(e) => {
                 setAdapterType(e.target.value);
                 if (e.target.value === "codespace") {
-                  onListCodespaces();
+                  onListCodespaces(githubAccountId || undefined);
                 }
               }}
               className={styles.adapterSelect}
@@ -633,6 +662,34 @@ export function EnvironmentEditPanel({ mode, environmentId, environments, onAddE
             </select>
           </div>
 
+          {/* GitHub Account (codespace and docker only) */}
+          {(adapterType === "codespace" || adapterType === "docker") && githubAccounts.length > 0 && (
+            <div className={styles.section}>
+              <label className={styles.label} htmlFor="env-create-github-account">
+                GitHub Account
+              </label>
+              <select
+                id="env-create-github-account"
+                value={githubAccountId}
+                onChange={(e) => {
+                  setGithubAccountId(e.target.value);
+                  if (adapterType === "codespace") {
+                    onListCodespaces(e.target.value || undefined);
+                  }
+                }}
+                className={styles.adapterSelect}
+                data-testid="env-create-github-account"
+              >
+                <option value="">(Default)</option>
+                {githubAccounts.map((a) => (
+                  <option key={a.id} value={a.id}>
+                    {a.label} (@{a.username}){a.isDefault ? " — default" : ""}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+
           {/* Adapter-specific fields */}
           {adapterType === "local" && (
             <>

package/src/components/panels/GitHubAccountsPanel.tsx

@@ -0,0 +1,223 @@
+import { useState, type JSX, type FormEvent } from "react";
+import { X, Star } from "lucide-react";
+import type { ToastVariant } from "../../context/ToastContext.js";
+import type { GitHubAccountData } from "../../hooks/types.js";
+import { ICON_MD } from "../../utils/iconSize.js";
+import { ConfirmDialog } from "../display/index.js";
+import styles from "./SettingsPanel.module.scss";
+
+/** Props for the GitHubAccountsPanel component. */
+export interface GitHubAccountsPanelProps {
+  /** All registered GitHub accounts. */
+  githubAccounts: GitHubAccountData[];
+  /** Whether the account list is loading. */
+  githubAccountsLoading: boolean;
+  /** Register a new GitHub account. Username will be resolved server-side if empty. */
+  onAddGitHubAccount: (label: string, token: string, username: string, isDefault: boolean) => Promise<void>;
+  /** Update an existing GitHub account. */
+  onUpdateGitHubAccount: (id: string, fields: { label?: string; token?: string; isDefault?: boolean }) => Promise<void>;
+  /** Remove a GitHub account by ID. */
+  onRemoveGitHubAccount: (id: string) => Promise<void>;
+  /** Import accounts from the local gh CLI authentication state. */
+  onImportGitHubAccounts: () => Promise<{ imported: number; usernames: string[] }>;
+  /** Display a toast notification. */
+  onShowToast?: (message: string, variant?: ToastVariant) => void;
+}
+
+/** Settings panel for managing registered GitHub accounts. */
+export function GitHubAccountsPanel({
+  githubAccounts,
+  githubAccountsLoading,
+  onAddGitHubAccount,
+  onUpdateGitHubAccount,
+  onRemoveGitHubAccount,
+  onImportGitHubAccounts,
+  onShowToast,
+}: GitHubAccountsPanelProps): JSX.Element {
+
+  const [label, setLabel] = useState("");
+  const [token, setToken] = useState("");
+  const [isDefault, setIsDefault] = useState(false);
+  const [adding, setAdding] = useState(false);
+  const [importing, setImporting] = useState(false);
+  const [confirmRemoveId, setConfirmRemoveId] = useState<string | null>(null);
+
+  const confirmRemoveAccount = githubAccounts.find((a) => a.id === confirmRemoveId);
+
+  const handleSubmit = async (e: FormEvent): Promise<void> => {
+    e.preventDefault();
+    if (!label.trim() || !token.trim()) {
+      return;
+    }
+    setAdding(true);
+    try {
+      await onAddGitHubAccount(label.trim(), token.trim(), "", isDefault);
+      onShowToast?.("GitHub account added", "success");
+      setLabel("");
+      setToken("");
+      setIsDefault(false);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to add account";
+      onShowToast?.(msg, "error");
+    } finally {
+      setAdding(false);
+    }
+  };
+
+  const handleSetDefault = async (id: string): Promise<void> => {
+    try {
+      await onUpdateGitHubAccount(id, { isDefault: true });
+      onShowToast?.("Default account updated", "success");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to update account";
+      onShowToast?.(msg, "error");
+    }
+  };
+
+  const handleConfirmRemove = async (): Promise<void> => {
+    if (!confirmRemoveId) {
+      return;
+    }
+    try {
+      await onRemoveGitHubAccount(confirmRemoveId);
+      onShowToast?.("GitHub account removed", "info");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to remove account";
+      onShowToast?.(msg, "error");
+    } finally {
+      setConfirmRemoveId(null);
+    }
+  };
+
+  const handleImport = async (): Promise<void> => {
+    setImporting(true);
+    try {
+      const result = await onImportGitHubAccounts();
+      if (result.imported > 0) {
+        onShowToast?.(`Imported ${result.imported} account(s): ${result.usernames.join(", ")}`, "success");
+      } else {
+        onShowToast?.("No new accounts to import", "info");
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Import failed";
+      onShowToast?.(msg, "error");
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDialog
+        isOpen={confirmRemoveId !== null}
+        title="Remove GitHub Account?"
+        description={
+          confirmRemoveAccount
+            ? `"${confirmRemoveAccount.label}"${confirmRemoveAccount.username ? ` (@${confirmRemoveAccount.username})` : ""} will be permanently removed.`
+            : undefined
+        }
+        onConfirm={() => { handleConfirmRemove().catch(() => {}); }}
+        onCancel={() => setConfirmRemoveId(null)}
+      />
+
+      <section className={styles.section} data-testid="github-accounts-panel">
+        <h3 className={styles.sectionTitle}>GitHub Accounts</h3>
+        <p className={styles.sectionDescription}>
+          Register multiple GitHub accounts to use different identities per environment.
+          The default account is used when no specific account is assigned.
+        </p>
+
+        {githubAccountsLoading && githubAccounts.length === 0 ? (
+          <div className={styles.emptyState}>Loading...</div>
+        ) : githubAccounts.length === 0 ? (
+          <div className={styles.emptyStateInfo}>
+            No GitHub accounts registered. Add one below or import from the gh CLI.
+          </div>
+        ) : (
+          <div className={styles.tokenList}>
+            {githubAccounts.map((account) => (
+              <div key={account.id} className={styles.tokenRow} data-testid={`github-account-row-${account.id}`}>
+                {account.isDefault && (
+                  <span className={styles.tokenBadge} title="Default account">default</span>
+                )}
+                <span className={styles.tokenName}>{account.label}</span>
+                {account.username && (
+                  <span className={styles.tokenTarget}>@{account.username}</span>
+                )}
+                {!account.isDefault && (
+                  <button
+                    className={styles.deleteButton}
+                    onClick={() => { handleSetDefault(account.id).catch(() => {}); }}
+                    title="Set as default"
+                    aria-label={`Set ${account.label} as default`}
+                    data-testid={`github-account-set-default-${account.id}`}
+                  >
+                    <Star size={ICON_MD} aria-hidden="true" />
+                  </button>
+                )}
+                <button
+                  className={styles.deleteButton}
+                  onClick={() => setConfirmRemoveId(account.id)}
+                  title={`Remove ${account.label}`}
+                  aria-label={`Remove ${account.label}`}
+                  data-testid={`github-account-remove-${account.id}`}
+                >
+                  <X size={ICON_MD} aria-hidden="true" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <form className={styles.addForm} onSubmit={(e) => { handleSubmit(e).catch(() => {}); }}>
+          <div className={styles.formRow}>
+            <input
+              className={styles.input}
+              type="text"
+              placeholder="Label (e.g. personal, work)"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              data-testid="github-account-label-input"
+            />
+            <input
+              className={styles.input}
+              type="password"
+              placeholder="Personal access token"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              data-testid="github-account-token-input"
+            />
+          </div>
+          <div className={styles.formRow}>
+            <label className={styles.tokenTarget} style={{ display: "flex", alignItems: "center", gap: "6px", cursor: "pointer" }}>
+              <input
+                type="checkbox"
+                checked={isDefault}
+                onChange={(e) => setIsDefault(e.target.checked)}
+                data-testid="github-account-default-checkbox"
+              />
+              Set as default
+            </label>
+            <button
+              className={styles.addButton}
+              type="submit"
+              disabled={!label.trim() || !token.trim() || adding}
+              data-testid="github-account-add-button"
+            >
+              {adding ? "Adding..." : "Add Account"}
+            </button>
+            <button
+              className={styles.addButton}
+              type="button"
+              onClick={() => { handleImport().catch(() => {}); }}
+              disabled={importing}
+              data-testid="github-account-import-button"
+            >
+              {importing ? "Importing..." : "Import from gh CLI"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </>
+  );
+}

package/src/components/panels/index.ts

@@ -11,3 +11,5 @@ export { TaskActionButtons } from "./TaskActionButtons.js";
 export { TaskOverviewPanel } from "./TaskOverviewPanel.js";
 export { PluginsPanel } from "./PluginsPanel.js";
 export type { PluginsPanelProps } from "./PluginsPanel.js";
+export { GitHubAccountsPanel } from "./GitHubAccountsPanel.js";
+export type { GitHubAccountsPanelProps } from "./GitHubAccountsPanel.js";

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

@@ -9,10 +9,11 @@ const meta: Meta<typeof SettingsNav> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** All five tabs are rendered with correct labels. */
+/** All 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: /GitHub Accounts/ })).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();
@@ -35,15 +36,15 @@ export const KeyboardNavigation: Story = {
     const credentialsTab = canvas.getByRole("tab", { name: /Credentials/ });
     credentialsTab.focus();
 
-    // ArrowDown should move to Personas
+    // ArrowDown should move to GitHub (now second tab)
     await userEvent.keyboard("{ArrowDown}");
-    const personasTab = canvas.getByRole("tab", { name: /Personas/ });
-    await expect(personasTab).toHaveFocus();
+    const githubTab = canvas.getByRole("tab", { name: /GitHub Accounts/ });
+    await expect(githubTab).toHaveFocus();
 
-    // ArrowDown again to Schedules
+    // ArrowDown again to Personas
     await userEvent.keyboard("{ArrowDown}");
-    const schedulesTab = canvas.getByRole("tab", { name: /Schedules/ });
-    await expect(schedulesTab).toHaveFocus();
+    const personasTab = canvas.getByRole("tab", { name: /Personas/ });
+    await expect(personasTab).toHaveFocus();
 
     // Home goes to first tab
     await userEvent.keyboard("{Home}");
@@ -62,10 +63,10 @@ export const JKNavigation: Story = {
     const credentialsTab = canvas.getByRole("tab", { name: /Credentials/ });
     credentialsTab.focus();
 
-    // J moves down to Personas
+    // J moves down to GitHub (now second tab)
     await userEvent.keyboard("j");
-    const personasTab = canvas.getByRole("tab", { name: /Personas/ });
-    await expect(personasTab).toHaveFocus();
+    const githubTab = canvas.getByRole("tab", { name: /GitHub Accounts/ });
+    await expect(githubTab).toHaveFocus();
 
     // K moves back up to Credentials
     await userEvent.keyboard("k");

package/src/components/settings/SettingsNav.tsx

@@ -1,6 +1,6 @@
 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 { CalendarClock, Github, 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";
@@ -18,6 +18,7 @@ interface SettingsTab {
 /** Ordered list of settings tabs. */
 const TABS: SettingsTab[] = [
   { path: "credentials", label: "Credentials", icon: <Key size={ICON_LG} /> },
+  { path: "github-accounts", label: "GitHub Accounts", icon: <Github 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} /> },

package/src/context/GrackleContextTypes.ts

@@ -14,6 +14,7 @@ import type {
   UsePluginsResult,
   UseSchedulesResult,
   UseStreamsResult,
+  UseGitHubAccountsResult,
   ConnectionStatus,
 } from "../hooks/types.js";
 
@@ -47,6 +48,8 @@ export interface UseGrackleSocketResult {
   knowledge: Omit<UseKnowledgeResult, "handleEvent">;
   /** Plugin state and actions. */
   plugins: Omit<UsePluginsResult, "domainHook">;
+  /** GitHub account state and actions. */
+  githubAccounts: Omit<UseGitHubAccountsResult, "domainHook">;
   /** App-level default persona ID setting. */
   appDefaultPersonaId: string;
   /** Update the app-level default persona ID. */