@grackle-ai/web-components 0.107.2 → 0.108.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grackle-ai/web-components",
-  "version": "0.107.2",
+  "version": "0.108.0",
   "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.0"
   },
   "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: 8d311efca0ab9b63564c69382ef5e7be719f9d07
 Clearing cached folders: dist, storybook-static, .rush/temp/operation/_phase_build
 Successfully restored output from the build cache.

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

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

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. */

package/src/hooks/types.ts

@@ -32,6 +32,8 @@ export interface Environment {
   adapterConfig: string;
   status: string;
   bootstrapped: boolean;
+  /** ID of the GitHub account to use for gh CLI operations, or empty string for default. */
+  githubAccountId: string;
 }
 
 
@@ -223,11 +225,12 @@ export interface UseEnvironmentsResult {
     displayName: string,
     adapterType: string,
     adapterConfig?: Record<string, unknown>,
+    githubAccountId?: string,
   ) => Promise<void>;
   /** Update an existing environment's mutable fields. */
   updateEnvironment: (
     environmentId: string,
-    fields: { displayName?: string; adapterConfig?: Record<string, unknown> },
+    fields: { displayName?: string; adapterConfig?: Record<string, unknown>; githubAccountId?: string },
   ) => Promise<void>;
   /** Provision an environment by ID. When force is true, kills active sessions and forces full provision. */
   provisionEnvironment: (environmentId: string, force?: boolean) => Promise<void>;
@@ -269,6 +272,7 @@ export interface UseSessionsResult {
     prompt: string,
     personaId?: string,
     workingDirectory?: string,
+    workspaceId?: string,
   ) => Promise<void>;
   /** Send text input to a running session. */
   sendInput: (sessionId: string, text: string) => Promise<void>;
@@ -484,8 +488,8 @@ export interface UseCodespacesResult {
   codespaceListError: string;
   /** Whether a codespace creation is currently in progress. */
   codespaceCreating: boolean;
-  /** Request the current codespace list from the server. */
-  listCodespaces: () => Promise<void>;
+  /** Request the current codespace list from the server, optionally filtered to a GitHub account. */
+  listCodespaces: (githubAccountId?: string) => Promise<void>;
   /** Create a new codespace for the given repo. */
   createCodespace: (repo: string, machine?: string) => Promise<void>;
   /** Lifecycle hook for connect/disconnect/event routing. */
@@ -854,6 +858,35 @@ export interface UsePluginsResult {
   domainHook: DomainHook;
 }
 
+/** A registered GitHub account (token is never returned by the server). */
+export interface GitHubAccountData {
+  id: string;
+  label: string;
+  username: string;
+  isDefault: boolean;
+  createdAt: string;
+}
+
+/** Values returned by the GitHub accounts domain hook. */
+export interface UseGitHubAccountsResult {
+  /** All registered GitHub accounts. */
+  githubAccounts: GitHubAccountData[];
+  /** Whether the account list is currently loading. */
+  githubAccountsLoading: boolean;
+  /** Refresh the account list from the server. */
+  loadGitHubAccounts: () => Promise<void>;
+  /** Register a new GitHub account. */
+  addGitHubAccount: (label: string, token: string, username: string, isDefault: boolean) => Promise<void>;
+  /** Update an existing GitHub account. */
+  updateGitHubAccount: (id: string, fields: { label?: string; token?: string; isDefault?: boolean }) => Promise<void>;
+  /** Remove a GitHub account by ID. */
+  removeGitHubAccount: (id: string) => Promise<void>;
+  /** Import accounts from the local gh CLI authentication state. */
+  importGitHubAccounts: () => Promise<{ imported: number; usernames: string[] }>;
+  /** Lifecycle hook for connect/disconnect/event routing. */
+  domainHook: DomainHook;
+}
+
 /** Delay in milliseconds before attempting a WebSocket reconnect. */
 export const WS_RECONNECT_DELAY_MS: number = 3_000;
 

package/src/index.ts

@@ -63,8 +63,8 @@ export type { CalloutVariant } from "./components/notifications/index.js";
 export { UpdateBanner } from "./components/notifications/UpdateBanner.js";
 
 // Panels
-export { FindingsPanel, TokensPanel, AppearancePanel, AboutPanel, TaskEditPanel, TaskActionButtons, TaskOverviewPanel, PluginsPanel } from "./components/panels/index.js";
-export type { PluginsPanelProps } from "./components/panels/index.js";
+export { FindingsPanel, TokensPanel, AppearancePanel, AboutPanel, TaskEditPanel, TaskActionButtons, TaskOverviewPanel, PluginsPanel, GitHubAccountsPanel } from "./components/panels/index.js";
+export type { PluginsPanelProps, GitHubAccountsPanelProps } from "./components/panels/index.js";
 export type { TaskActionButtonsProps } from "./components/panels/TaskActionButtons.js";
 export type { TaskOverviewPanelProps } from "./components/panels/TaskOverviewPanel.js";
 export { EnvironmentEditPanel } from "./components/panels/EnvironmentEditPanel.js";
@@ -134,6 +134,7 @@ export type {
   UseCredentialsResult, UseCodespacesResult, UsePersonasResult,
   UsePluginsResult, PluginData,
   StreamData, StreamSubscriberData, UseStreamsResult,
+  UseGitHubAccountsResult, GitHubAccountData,
   DomainHook,
   ConnectionStatus,
 } from "./hooks/types.js";
@@ -156,7 +157,7 @@ export {
   useAppNavigate, sessionUrl, workspaceUrl, taskUrl, taskEditUrl,
   newTaskUrl, newChatUrl, ENVIRONMENTS_URL, NEW_ENVIRONMENT_URL,
   environmentUrl, environmentEditUrl, SETTINGS_URL,
-  SETTINGS_ENVIRONMENTS_URL, SETTINGS_CREDENTIALS_URL,
+  SETTINGS_ENVIRONMENTS_URL, SETTINGS_CREDENTIALS_URL, SETTINGS_GITHUB_ACCOUNTS_URL,
   PERSONAS_URL, NEW_PERSONA_URL, personaUrl,
   SCHEDULES_URL, NEW_SCHEDULE_URL, scheduleUrl,
   SETTINGS_APPEARANCE_URL, SETTINGS_ABOUT_URL, SETTINGS_SHORTCUTS_URL,

package/src/mocks/MockGrackleProvider.tsx

@@ -1300,6 +1300,27 @@ export function MockGrackleProvider({ children }: MockGrackleProviderProps): JSX
         domainHook: NOOP_DOMAIN_HOOK,
       },
 
+      // ── GitHub Accounts ──────────────────────────────
+
+      githubAccounts: {
+        githubAccounts: [],
+        githubAccountsLoading: false,
+        loadGitHubAccounts: async () => { console.log("[MockGrackle] loadGitHubAccounts"); },
+        addGitHubAccount: async (label: string, _token: string, _username: string, _isDefault: boolean) => {
+          console.log("[MockGrackle] addGitHubAccount", label);
+        },
+        updateGitHubAccount: async (id: string, fields: { label?: string; token?: string; isDefault?: boolean }) => {
+          console.log("[MockGrackle] updateGitHubAccount", id, fields);
+        },
+        removeGitHubAccount: async (id: string) => {
+          console.log("[MockGrackle] removeGitHubAccount", id);
+        },
+        importGitHubAccounts: async () => {
+          console.log("[MockGrackle] importGitHubAccounts");
+          return { imported: 0, usernames: [] };
+        },
+      },
+
       // ── Plugins ─────────────────────────────────────
 
       plugins: {

package/src/mocks/mockData.ts

@@ -29,6 +29,7 @@ export const MOCK_ENVIRONMENTS: Environment[] = [
     adapterConfig: "{}",
     status: "connected",
     bootstrapped: true,
+    githubAccountId: "",
   },
   {
     id: "env-docker-01",
@@ -37,6 +38,7 @@ export const MOCK_ENVIRONMENTS: Environment[] = [
     adapterConfig: '{"image":"node:20"}',
     status: "connected",
     bootstrapped: true,
+    githubAccountId: "",
   },
   {
     id: "env-cs-01",
@@ -45,6 +47,7 @@ export const MOCK_ENVIRONMENTS: Environment[] = [
     adapterConfig: '{"codespaceName":"my-codespace"}',
     status: "connected",
     bootstrapped: true,
+    githubAccountId: "",
   },
   {
     id: "env-remote-01",
@@ -53,6 +56,7 @@ export const MOCK_ENVIRONMENTS: Environment[] = [
     adapterConfig: '{"host":"192.168.1.10","user":"deploy","sshPort":22}',
     status: "disconnected",
     bootstrapped: false,
+    githubAccountId: "",
   },
   {
     id: "error-env",
@@ -61,6 +65,7 @@ export const MOCK_ENVIRONMENTS: Environment[] = [
     adapterConfig: "{}",
     status: "connected",
     bootstrapped: true,
+    githubAccountId: "",
   },
 ];
 

package/src/test-utils/storybook-helpers.ts

@@ -48,6 +48,7 @@ export function makeEnvironment(overrides: Partial<Environment> = {}): Environme
     adapterConfig: "{}",
     status: "connected",
     bootstrapped: true,
+    githubAccountId: "",
     ...overrides,
   };
 }