@dyyz1993/create-agent 1.9.0

package/templates/agent/src/mainview/components/git/__tests__/GitBranchSelector.test.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockCheckout = vi.fn();
+const mockFetchBranches = vi.fn();
+
+vi.mock("../../../stores/use-git-store", () => ({
+  useGitStore: (selector: any) =>
+    selector({
+      branches: [
+        { name: "main", isCurrent: true, isRemote: false },
+        { name: "dev", isCurrent: false, isRemote: false },
+        { name: "origin/feat", isCurrent: false, isRemote: true },
+      ],
+      loadingBranches: false,
+      loadingAction: null,
+      fetchBranches: mockFetchBranches,
+      checkout: mockCheckout,
+    }),
+}));
+
+vi.mock("../../../stores/use-explorer-store", () => ({
+  useExplorerStore: (selector: any) => selector({ currentPath: "/project" }),
+}));
+
+describe("GitBranchSelector", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render local branches", async () => {
+    const { GitBranchSelector } = await import("../GitBranchSelector");
+    render(<GitBranchSelector onClose={vi.fn()} />);
+    expect(screen.getByText("Local")).toBeDefined();
+    expect(screen.getByText("main")).toBeDefined();
+    expect(screen.getByText("dev")).toBeDefined();
+  });
+
+  it("should render remote branches", async () => {
+    const { GitBranchSelector } = await import("../GitBranchSelector");
+    render(<GitBranchSelector onClose={vi.fn()} />);
+    expect(screen.getByText("Remote")).toBeDefined();
+    expect(screen.getByText("feat")).toBeDefined();
+  });
+
+  it("should call fetchBranches on mount", async () => {
+    const { GitBranchSelector } = await import("../GitBranchSelector");
+    render(<GitBranchSelector onClose={vi.fn()} />);
+    expect(mockFetchBranches).toHaveBeenCalledWith("/project");
+  });
+
+  it("should show check icon for current branch", async () => {
+    const { GitBranchSelector } = await import("../GitBranchSelector");
+    const { container } = render(<GitBranchSelector onClose={vi.fn()} />);
+    const checks = container.querySelectorAll("svg");
+    expect(checks.length).toBeGreaterThan(0);
+  });
+
+  it("should call checkout and onClose when branch clicked", async () => {
+    const onClose = vi.fn();
+    const { GitBranchSelector } = await import("../GitBranchSelector");
+    render(<GitBranchSelector onClose={onClose} />);
+    fireEvent.click(screen.getByText("dev"));
+    expect(mockCheckout).toHaveBeenCalledWith("/project", "dev");
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("should not call checkout for current branch", async () => {
+    const { GitBranchSelector } = await import("../GitBranchSelector");
+    render(<GitBranchSelector onClose={vi.fn()} />);
+    fireEvent.click(screen.getByText("main"));
+    expect(mockCheckout).not.toHaveBeenCalled();
+  });
+});

package/templates/agent/src/mainview/components/git/__tests__/GitCommitInput.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockCommit = vi.fn();
+
+vi.mock("../../../stores/use-git-store", () => {
+  const state = {
+    staged: [{ path: "a.ts", status: "modified" }],
+    loadingAction: null as string | null,
+    commit: mockCommit,
+  };
+  return { useGitStore: (selector: any) => selector(state) };
+});
+
+vi.mock("../../../stores/use-explorer-store", () => ({
+  useExplorerStore: (selector: any) => selector({ currentPath: "/project" }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("GitCommitInput", () => {
+  afterEach(() => {
+    cleanup();
+    mockCommit.mockClear();
+  });
+
+  it("should render textarea when staged files exist", async () => {
+    const { GitCommitInput } = await import("../GitCommitInput");
+    render(<GitCommitInput />);
+    expect(screen.getByPlaceholderText("git.commitPlaceholder")).toBeDefined();
+  });
+
+  it("should render commit button", async () => {
+    const { GitCommitInput } = await import("../GitCommitInput");
+    render(<GitCommitInput />);
+    expect(screen.getByText("git.commit")).toBeDefined();
+  });
+
+  it("should disable commit button when message is empty", async () => {
+    const { GitCommitInput } = await import("../GitCommitInput");
+    render(<GitCommitInput />);
+    const btn = screen.getByText("git.commit");
+    expect(btn).toBeDisabled();
+  });
+
+  it("should enable commit button when message is entered", async () => {
+    const { GitCommitInput } = await import("../GitCommitInput");
+    render(<GitCommitInput />);
+    const textarea = screen.getByPlaceholderText("git.commitPlaceholder");
+    fireEvent.change(textarea, { target: { value: "test commit" } });
+    const btn = screen.getByText("git.commit");
+    expect(btn).not.toBeDisabled();
+  });
+
+  it("should call commit on button click with message", async () => {
+    const { GitCommitInput } = await import("../GitCommitInput");
+    render(<GitCommitInput />);
+    const textarea = screen.getByPlaceholderText("git.commitPlaceholder");
+    fireEvent.change(textarea, { target: { value: "test commit" } });
+    fireEvent.click(screen.getByText("git.commit"));
+    expect(mockCommit).toHaveBeenCalledWith("/project", "test commit");
+  });
+
+  it("should submit on Cmd+Enter", async () => {
+    const { GitCommitInput } = await import("../GitCommitInput");
+    render(<GitCommitInput />);
+    const textarea = screen.getByPlaceholderText("git.commitPlaceholder");
+    fireEvent.change(textarea, { target: { value: "test" } });
+    fireEvent.keyDown(textarea, { key: "Enter", metaKey: true });
+    expect(mockCommit).toHaveBeenCalledWith("/project", "test");
+  });
+
+  it("should not render when no staged files", async () => {
+    vi.resetModules();
+    vi.doMock("../../../stores/use-git-store", () => ({
+      useGitStore: (selector: any) => selector({ staged: [], loadingAction: null, commit: mockCommit }),
+    }));
+    vi.doMock("../../../stores/use-explorer-store", () => ({
+      useExplorerStore: (selector: any) => selector({ currentPath: "/project" }),
+    }));
+    vi.doMock("react-i18next", () => ({
+      useTranslation: () => ({ t: (k: string) => k }),
+    }));
+    const mod = await import("../GitCommitInput");
+    const { container } = render(<mod.GitCommitInput />);
+    expect(container.innerHTML).toBe("");
+  });
+});

package/templates/agent/src/mainview/components/git/__tests__/GitPanel.test.tsx

@@ -0,0 +1,174 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockFetchStatus = vi.fn();
+const mockFetchWorktrees = vi.fn();
+const mockFetchLog = vi.fn();
+const mockFetchDiff = vi.fn();
+const mockPush = vi.fn();
+const mockPull = vi.fn();
+const mockStageFiles = vi.fn();
+const mockUnstageFiles = vi.fn();
+const mockToggleCommitExpand = vi.fn();
+const mockFetchCommitFileDiff = vi.fn();
+
+const gitState = {
+  branch: "main",
+  ahead: 2,
+  behind: 1,
+  staged: [
+    { path: "src/a.ts", status: "modified" as const },
+  ],
+  changed: [
+    { path: "src/b.ts", status: "added" as const },
+  ],
+  untracked: ["src/c.ts"],
+  commits: [] as any[],
+  loadingCommits: false,
+  currentDiff: null as any,
+  expandedCommits: new Set<string>(),
+  commitFiles: {} as Record<string, any[]>,
+  loadingCommitFiles: new Set<string>(),
+  loadingAction: null as string | null,
+  worktrees: [] as any[],
+  loadingDiff: false,
+  loadingBranches: false,
+  branches: [] as any[],
+  fetchStatus: mockFetchStatus,
+  fetchWorktrees: mockFetchWorktrees,
+  fetchLog: mockFetchLog,
+  fetchDiff: mockFetchDiff,
+  push: mockPush,
+  pull: mockPull,
+  stageFiles: mockStageFiles,
+  unstageFiles: mockUnstageFiles,
+  toggleCommitExpand: mockToggleCommitExpand,
+  fetchCommitFileDiff: mockFetchCommitFileDiff,
+  commit: vi.fn(),
+  fetchBranches: vi.fn(),
+  checkout: vi.fn(),
+};
+
+vi.mock("../../../stores/use-git-store", () => ({
+  useGitStore: (selector: any) => selector(gitState),
+}));
+
+const explorerState = {
+  currentPath: "/project",
+  openFile: vi.fn(),
+};
+
+vi.mock("../../../stores/use-explorer-store", () => ({
+  useExplorerStore: (selector: any) => selector(explorerState),
+}));
+
+vi.mock("../../../stores/use-sidebar-store", () => ({
+  useSidebarStore: (selector: any) => selector({ isPinned: true, breakpoint: "desktop" }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+vi.mock("../GitCommitInput", () => ({
+  GitCommitInput: () => <div data-testid="commit-input" />,
+}));
+
+vi.mock("../GitBranchSelector", () => ({
+  GitBranchSelector: ({ onClose: _onClose }: any) => <div data-testid="branch-selector" />,
+}));
+
+vi.mock("../../explorer/ContextMenu", () => ({
+  ContextMenu: ({ items: _items }: any) => <div data-testid="context-menu" />,
+}));
+
+vi.mock("../../sidebar/PinButton", () => ({
+  PinButton: () => <div data-testid="pin-button" />,
+}));
+
+describe("GitPanel", () => {
+  afterEach(cleanup);
+
+  it("should render git title", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText("git.title")).toBeDefined();
+  });
+
+  it("should display branch name", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText("main")).toBeDefined();
+  });
+
+  it("should show total changes badge", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText("3")).toBeDefined();
+  });
+
+  it("should show ahead/behind indicators", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText("↑2")).toBeDefined();
+    expect(screen.getByText("↓1")).toBeDefined();
+  });
+
+  it("should render staged files section", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText(/git.staged/)).toBeDefined();
+    expect(screen.getByText("a.ts")).toBeDefined();
+  });
+
+  it("should render changed files section", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText(/git.changes/)).toBeDefined();
+    expect(screen.getByText("b.ts")).toBeDefined();
+  });
+
+  it("should render untracked files section", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText(/git.untracked/)).toBeDefined();
+    expect(screen.getByText("c.ts")).toBeDefined();
+  });
+
+  it("should render push button", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByTitle("git.push")).toBeDefined();
+  });
+
+  it("should render pull button", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByTitle("git.pull")).toBeDefined();
+  });
+
+  it("should render refresh button", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByTitle("git.refresh")).toBeDefined();
+  });
+
+  it("should call fetchStatus on mount", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(mockFetchStatus).toHaveBeenCalledWith("/project");
+  });
+
+  it("should render commits toggle button", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    render(<GitPanel />);
+    expect(screen.getByText("git.commits")).toBeDefined();
+  });
+
+  it("should use full-width class when hideOuterShell is true", async () => {
+    const { GitPanel } = await import("../GitPanel");
+    const { container } = render(<GitPanel hideOuterShell />);
+    expect(container.firstChild).toBeDefined();
+  });
+});

package/templates/agent/src/mainview/components/layout/AppLayout.tsx

@@ -0,0 +1,170 @@
+import React, { Suspense } from "react";
+import { useTranslation } from "react-i18next";
+import { Wifi, Monitor, MessageSquare, Rss, Terminal, ListTodo } from "lucide-react";
+import { useConnectionStore } from "../../stores/use-connection-store";
+import { useExplorerStore } from "../../stores/use-explorer-store";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+import { ActivityBar } from "../activity-bar/ActivityBar";
+import { MobileTabBar } from "../activity-bar/MobileTabBar";
+import { ExplorerSidebar } from "../explorer/ExplorerSidebar";
+import { ChatPanel } from "../chat/ChatPanel";
+import { ThemeToggle } from "../common/ThemeToggle";
+
+const GitPanel = React.lazy(() => import("../git/GitPanel").then((m) => ({ default: m.GitPanel })));
+const SearchPanel = React.lazy(() => import("../search/SearchPanel").then((m) => ({ default: m.SearchPanel })));
+const RulesPanel = React.lazy(() => import("../rules/RulesPanel").then((m) => ({ default: m.RulesPanel })));
+const FeedPanel = React.lazy(() => import("../feed/FeedPanel").then((m) => ({ default: m.FeedPanel })));
+const BashPanel = React.lazy(() => import("../bash/BashPanel").then((m) => ({ default: m.BashPanel })));
+const TodoPanel = React.lazy(() => import("../todo/TodoPanel").then((m) => ({ default: m.TodoPanel })));
+const FilePreviewOverlay = React.lazy(() => import("../file-preview/FilePreviewOverlay").then((m) => ({ default: m.FilePreviewOverlay })));
+const DiffViewerPanel = React.lazy(() => import("../diff/DiffViewerPanel").then((m) => ({ default: m.DiffViewerPanel })));
+const DebugPanel = React.lazy(() => import("../debug/DebugPanel").then((m) => ({ default: m.DebugPanel })));
+
+function PanelFallback() {
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="animate-pulse text-[var(--color-text-tertiary)] text-sm">Loading...</div>
+    </div>
+  );
+}
+
+export type CenterTab = "chat" | "feed" | "bash" | "todo";
+
+interface AppLayoutProps {
+  centerTab: CenterTab;
+  setCenterTab: (tab: CenterTab) => void;
+  sidebarWidth: number;
+  handleResizeStart: (e: React.MouseEvent) => void;
+}
+
+export function AppLayout({
+  centerTab,
+  setCenterTab,
+  sidebarWidth,
+  handleResizeStart,
+}: AppLayoutProps) {
+  const { t } = useTranslation();
+  const mode = useConnectionStore((s) => s.mode);
+  const filePreview = useExplorerStore((s) => s.filePreview);
+  const loadingFile = useExplorerStore((s) => s.loadingFile);
+  const closePreview = useExplorerStore((s) => s.closePreview);
+
+  const activePanel = useSidebarStore((s) => s.activePanel);
+  const isPinned = useSidebarStore((s) => s.isPinned);
+  const drawerOpen = useSidebarStore((s) => s.drawerOpen);
+  const setDrawerOpen = useSidebarStore((s) => s.setDrawerOpen);
+  const breakpoint = useSidebarStore((s) => s.breakpoint);
+
+  const isMobile = breakpoint === "mobile";
+  const isDesktop = breakpoint === "desktop";
+  const sidebarIsDrawer = isMobile || !isPinned;
+  const showSidebar = activePanel !== null && (isPinned || drawerOpen);
+  const showDebug = isDesktop;
+
+  const sidebarContent = activePanel === "explorer" ? (
+    <ExplorerSidebar hideOuterShell />
+  ) : activePanel === "git" ? (
+    <Suspense fallback={<PanelFallback />}><GitPanel hideOuterShell /></Suspense>
+  ) : activePanel === "search" ? (
+    <Suspense fallback={<PanelFallback />}><SearchPanel /></Suspense>
+  ) : activePanel === "rules" ? (
+    <Suspense fallback={<PanelFallback />}><RulesPanel /></Suspense>
+  ) : null;
+
+  const centerTabs: { id: CenterTab; icon: typeof MessageSquare; label: string }[] = [
+    { id: "chat", icon: MessageSquare, label: t("tabs.chat") },
+    { id: "feed", icon: Rss, label: t("tabs.feed") },
+    { id: "bash", icon: Terminal, label: t("tabs.bash") },
+    { id: "todo", icon: ListTodo, label: t("tabs.todo") },
+  ];
+
+  return (
+    <div className="h-screen bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] flex flex-col overflow-hidden">
+      {!isMobile && (
+        <div className="h-8 bg-[var(--color-bg-secondary)] flex items-center px-3 text-xs border-b border-[var(--color-border-primary)] flex-shrink-0">
+          <span className={`px-2 py-0.5 rounded flex items-center gap-1 ${mode === "desktop" ? "bg-green-600" : "bg-blue-600"}`}>
+            {mode === "desktop" ? <Monitor className="w-3 h-3" /> : <Wifi className="w-3 h-3" />}
+            {mode === "desktop" ? t("app.mode.desktop") : t("app.mode.web")}
+          </span>
+          <span className="ml-3 text-[var(--color-text-tertiary)]">{t("app.title")}</span>
+          <div className="ml-auto">
+            <ThemeToggle />
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 flex overflow-hidden relative">
+        {!isMobile && <ActivityBar />}
+
+        {showSidebar && isPinned && !isMobile && (
+          <div className="bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-hidden relative"
+            style={{ width: sidebarWidth }}>
+            {sidebarContent}
+            <div
+              className="absolute right-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-indigo-500/50 active:bg-indigo-500 transition-colors z-10 group"
+              onMouseDown={handleResizeStart}
+              style={{ width: 4, marginRight: -4 }}
+            >
+              <div className="absolute inset-y-0 left-1/2 w-0.5 bg-[var(--color-border-primary)] group-hover:bg-[var(--color-text-accent)] transition-colors -translate-x-1/2" />
+            </div>
+          </div>
+        )}
+
+        <div className="flex-1 flex flex-col overflow-hidden relative">
+          <div className="flex items-center bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
+            {centerTabs.map(({ id, icon: Icon, label }) => (
+              <button
+                key={id}
+                data-testid={`center-tab-${id}`}
+                onClick={() => setCenterTab(id)}
+                className={`flex items-center gap-1.5 px-4 py-1.5 text-xs border-b-2 transition-colors ${
+                  centerTab === id
+                    ? "border-[var(--color-accent)] text-[var(--color-text-primary)]"
+                    : "border-transparent text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+                }`}
+              >
+                <Icon className="w-3.5 h-3.5" />
+                {label}
+              </button>
+            ))}
+          </div>
+
+          {centerTab === "chat" && <ChatPanel />}
+          {centerTab === "feed" && <Suspense fallback={<PanelFallback />}><FeedPanel /></Suspense>}
+          {centerTab === "bash" && <Suspense fallback={<PanelFallback />}><BashPanel /></Suspense>}
+          {centerTab === "todo" && <Suspense fallback={<PanelFallback />}><TodoPanel /></Suspense>}
+          {filePreview && (
+            <Suspense fallback={<PanelFallback />}>
+              <FilePreviewOverlay
+                preview={filePreview}
+                loading={loadingFile}
+                onClose={closePreview}
+              />
+            </Suspense>
+          )}
+          <Suspense fallback={null}><DiffViewerPanel /></Suspense>
+        </div>
+
+        {showDebug && <Suspense fallback={<PanelFallback />}><DebugPanel /></Suspense>}
+      </div>
+
+      {sidebarIsDrawer && showSidebar && (
+        <>
+          <div
+            className="fixed inset-0 bg-black/50 z-40"
+            style={isMobile ? { bottom: 56 } : undefined}
+            onClick={() => setDrawerOpen(false)}
+          />
+          <div
+            className="fixed left-0 top-0 w-60 z-50 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col overflow-hidden"
+            style={isMobile ? { top: 0, bottom: 56 } : { top: 0, bottom: 0 }}
+          >
+            {sidebarContent}
+          </div>
+        </>
+      )}
+
+      {isMobile && <MobileTabBar />}
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/layout/__tests__/AppLayout.test.tsx

@@ -0,0 +1,163 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+vi.mock("../../../stores/use-connection-store", () => ({
+  useConnectionStore: (selector: any) => selector({ mode: "desktop" }),
+}));
+
+vi.mock("../../../stores/use-explorer-store", () => ({
+  useExplorerStore: (selector: any) => selector({ filePreview: null, loadingFile: false, closePreview: vi.fn() }),
+}));
+
+vi.mock("../../../stores/use-sidebar-store", () => ({
+  useSidebarStore: (selector: any) =>
+    selector({ activePanel: "explorer", isPinned: true, drawerOpen: false, breakpoint: "desktop", setDrawerOpen: vi.fn() }),
+}));
+
+vi.mock("../../activity-bar/ActivityBar", () => ({
+  ActivityBar: () => <div data-testid="activity-bar" />,
+}));
+
+vi.mock("../../activity-bar/MobileTabBar", () => ({
+  MobileTabBar: () => <div data-testid="mobile-tab-bar" />,
+}));
+
+vi.mock("../../explorer/ExplorerSidebar", () => ({
+  ExplorerSidebar: () => <div data-testid="explorer-sidebar" />,
+}));
+
+vi.mock("../../git/GitPanel", () => ({
+  GitPanel: () => <div data-testid="git-panel" />,
+}));
+
+vi.mock("../../search/SearchPanel", () => ({
+  SearchPanel: () => <div data-testid="search-panel" />,
+}));
+
+vi.mock("../../rules/RulesPanel", () => ({
+  RulesPanel: () => <div data-testid="rules-panel" />,
+}));
+
+vi.mock("../../chat/ChatPanel", () => ({
+  ChatPanel: () => <div data-testid="chat-panel" />,
+}));
+
+vi.mock("../../feed/FeedPanel", () => ({
+  FeedPanel: () => <div data-testid="feed-panel" />,
+}));
+
+vi.mock("../../bash/BashPanel", () => ({
+  BashPanel: () => <div data-testid="bash-panel" />,
+}));
+
+vi.mock("../../todo/TodoPanel", () => ({
+  TodoPanel: () => <div data-testid="todo-panel" />,
+}));
+
+vi.mock("../../file-preview/FilePreviewOverlay", () => ({
+  FilePreviewOverlay: () => <div data-testid="file-preview" />,
+}));
+
+vi.mock("../../diff/DiffViewerPanel", () => ({
+  DiffViewerPanel: () => <div data-testid="diff-panel" />,
+}));
+
+vi.mock("../../debug/DebugPanel", () => ({
+  DebugPanel: () => <div data-testid="debug-panel" />,
+}));
+
+vi.mock("../../common/ThemeToggle", () => ({
+  ThemeToggle: () => <div data-testid="theme-toggle" />,
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("AppLayout", () => {
+  afterEach(cleanup);
+
+  it("should render center tab buttons", async () => {
+    const { AppLayout } = await import("../AppLayout");
+    render(
+      <AppLayout
+        centerTab="chat"
+        setCenterTab={vi.fn()}
+        sidebarWidth={240}
+        handleResizeStart={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("tabs.chat")).toBeDefined();
+    expect(screen.getByText("tabs.feed")).toBeDefined();
+    expect(screen.getByText("tabs.bash")).toBeDefined();
+    expect(screen.getByText("tabs.todo")).toBeDefined();
+  });
+
+  it("should render ActivityBar on desktop", async () => {
+    const { AppLayout } = await import("../AppLayout");
+    render(
+      <AppLayout
+        centerTab="chat"
+        setCenterTab={vi.fn()}
+        sidebarWidth={240}
+        handleResizeStart={vi.fn()}
+      />,
+    );
+    expect(screen.getByTestId("activity-bar")).toBeDefined();
+  });
+
+  it("should render sidebar content when panel is active and pinned", async () => {
+    const { AppLayout } = await import("../AppLayout");
+    render(
+      <AppLayout
+        centerTab="chat"
+        setCenterTab={vi.fn()}
+        sidebarWidth={240}
+        handleResizeStart={vi.fn()}
+      />,
+    );
+    expect(screen.getByTestId("explorer-sidebar")).toBeDefined();
+  });
+
+  it("should call setCenterTab when tab is clicked", async () => {
+    const setCenterTab = vi.fn();
+    const { AppLayout } = await import("../AppLayout");
+    render(
+      <AppLayout
+        centerTab="chat"
+        setCenterTab={setCenterTab}
+        sidebarWidth={240}
+        handleResizeStart={vi.fn()}
+      />,
+    );
+    fireEvent.click(screen.getByText("tabs.feed"));
+    expect(setCenterTab).toHaveBeenCalledWith("feed");
+  });
+
+  it("should render mode indicator in title bar", async () => {
+    const { AppLayout } = await import("../AppLayout");
+    render(
+      <AppLayout
+        centerTab="chat"
+        setCenterTab={vi.fn()}
+        sidebarWidth={240}
+        handleResizeStart={vi.fn()}
+      />,
+    );
+    expect(screen.getByText("app.mode.desktop")).toBeDefined();
+  });
+
+  it("should render DebugPanel on desktop", async () => {
+    const { AppLayout } = await import("../AppLayout");
+    render(
+      <AppLayout
+        centerTab="chat"
+        setCenterTab={vi.fn()}
+        sidebarWidth={240}
+        handleResizeStart={vi.fn()}
+      />,
+    );
+    expect(screen.getByTestId("debug-panel")).toBeDefined();
+  });
+});