@akiojin/gwt 2.12.1 → 2.14.0

package/src/web/client/src/pages/BranchDetailPage.tsx

@@ -9,7 +9,17 @@ import {
 } from "../hooks/useSessions";
 import { useConfig } from "../hooks/useConfig";
 import { ApiError } from "../lib/api";
-import { Terminal } from "../components/Terminal";
+import { PageHeader } from "@/components/common/PageHeader";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import {
+  SessionHistoryTable,
+  ToolLauncher,
+  BranchInfoCards,
+  TerminalPanel,
+  type SelectableTool,
+} from "@/components/branch-detail";
 import type {
   Branch,
   CustomAITool,
@@ -19,44 +29,6 @@ import type {
 type ToolType = "claude-code" | "codex-cli" | "custom";
 type ToolMode = "normal" | "continue" | "resume";
 
-type SelectableTool =
-  | { id: "claude-code"; label: string; target: "claude" }
-  | { id: "codex-cli"; label: string; target: "codex" }
-  | { id: string; label: string; target: "custom"; definition: CustomAITool };
-
-interface ToolSummary {
-  command: string;
-  defaultArgs?: string[] | null;
-  modeArgs?: {
-    normal?: string[];
-    continue?: string[];
-    resume?: string[];
-  };
-  permissionSkipArgs?: string[] | null;
-}
-
-const BUILTIN_TOOL_SUMMARIES: Record<string, ToolSummary> = {
-  "claude-code": {
-    command: "claude",
-    defaultArgs: [],
-    modeArgs: {
-      normal: [],
-      continue: ["-c"],
-      resume: ["-r"],
-    },
-    permissionSkipArgs: ["--dangerously-skip-permissions"],
-  },
-  "codex-cli": {
-    command: "codex",
-    defaultArgs: ["--auto-approve", "--verbose"],
-    modeArgs: {
-      normal: [],
-      continue: ["resume", "--last"],
-      resume: ["resume"],
-    },
-  },
-};
-
 interface BannerState {
   type: "success" | "error" | "info";
   message: string;
@@ -73,15 +45,6 @@ const MERGE_STATUS_LABEL: Record<Branch["mergeStatus"], string> = {
   unknown: "状態不明",
 };
 
-const MERGE_STATUS_TONE: Record<
-  Branch["mergeStatus"],
-  "success" | "warning" | "muted"
-> = {
-  merged: "success",
-  unmerged: "warning",
-  unknown: "muted",
-};
-
 export function BranchDetailPage() {
   const { branchName } = useParams<{ branchName: string }>();
   const decodedBranchName = branchName ? decodeURIComponent(branchName) : "";
@@ -115,58 +78,76 @@ export function BranchDetailPage() {
     [branch?.commitDate],
   );
 
+  // Handle fullscreen body overflow
   useEffect(() => {
-    if (!isTerminalFullscreen) {
-      return undefined;
-    }
-
+    if (!isTerminalFullscreen) return undefined;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-
     return () => {
       document.body.style.overflow = previousOverflow;
     };
   }, [isTerminalFullscreen]);
 
+  // Loading state
   if (isLoading) {
     return (
-      <div className="app-shell">
-        <div className="page-state page-state--centered">
-          <h1>読み込み中</h1>
-          <p>ブランチ情報を取得しています...</p>
-        </div>
+      <div className="min-h-screen bg-background">
+        <PageHeader
+          eyebrow="BRANCH DETAIL"
+          title="読み込み中..."
+          subtitle="ブランチ情報を取得しています"
+        />
+        <main className="mx-auto max-w-7xl px-6 py-8">
+          <div className="flex items-center justify-center py-20">
+            <div className="text-center">
+              <div className="mb-4 text-4xl">⏳</div>
+              <p className="text-muted-foreground">Loading branch...</p>
+            </div>
+          </div>
+        </main>
       </div>
     );
   }
 
+  // Error state
   if (error) {
     return (
-      <div className="app-shell">
-        <div className="page-state page-state--centered">
-          <h1>ブランチの取得に失敗しました</h1>
-          <p>{error instanceof Error ? error.message : "未知のエラーです"}</p>
-          <Link to="/" className="button button--ghost">
-            ブランチ一覧に戻る
-          </Link>
-        </div>
+      <div className="min-h-screen bg-background">
+        <PageHeader eyebrow="BRANCH DETAIL" title="エラー" />
+        <main className="mx-auto max-w-7xl px-6 py-8">
+          <Alert variant="destructive">
+            <AlertDescription>
+              {error instanceof Error ? error.message : "未知のエラーです"}
+            </AlertDescription>
+          </Alert>
+          <div className="mt-4">
+            <Button variant="ghost" asChild>
+              <Link to="/">← ブランチ一覧に戻る</Link>
+            </Button>
+          </div>
+        </main>
       </div>
     );
   }
 
+  // Not found state
   if (!branch) {
     return (
-      <div className="app-shell">
-        <div className="page-state page-state--centered">
-          <h1>Branch not found</h1>
-          <p>指定されたブランチは存在しません。</p>
-          <Link to="/" className="button button--ghost">
-            ブランチ一覧に戻る
-          </Link>
-        </div>
+      <div className="min-h-screen bg-background">
+        <PageHeader eyebrow="BRANCH DETAIL" title="Branch not found" />
+        <main className="mx-auto max-w-7xl px-6 py-8">
+          <p className="mb-4 text-muted-foreground">
+            指定されたブランチは存在しません。
+          </p>
+          <Button variant="ghost" asChild>
+            <Link to="/">← ブランチ一覧に戻る</Link>
+          </Button>
+        </main>
       </div>
     );
   }
 
+  // Computed values
   const canStartSession = Boolean(branch.worktreePath);
   const divergenceInfo = branch.divergence ?? null;
   const hasBlockingDivergence = Boolean(
@@ -174,13 +155,14 @@ export function BranchDetailPage() {
   );
   const needsRemoteSync = Boolean(
     branch.worktreePath &&
-      divergenceInfo &&
-      divergenceInfo.behind > 0 &&
-      divergenceInfo.ahead === 0 &&
-      !hasBlockingDivergence,
+    divergenceInfo &&
+    divergenceInfo.behind > 0 &&
+    divergenceInfo.ahead === 0 &&
+    !hasBlockingDivergence,
   );
   const isSyncingBranch = syncBranch.isPending;
 
+  // Available tools
   const customTools: CustomAITool[] = config?.tools ?? [];
   const availableTools: SelectableTool[] = useMemo(
     () => [
@@ -198,6 +180,7 @@ export function BranchDetailPage() {
     [customTools],
   );
 
+  // Ensure selected tool is valid
   useEffect(() => {
     if (!availableTools.length) {
       setSelectedToolId("claude-code");
@@ -205,9 +188,7 @@ export function BranchDetailPage() {
     }
     if (!availableTools.find((tool) => tool.id === selectedToolId)) {
       const first = availableTools[0];
-      if (first) {
-        setSelectedToolId(first.id);
-      }
+      if (first) setSelectedToolId(first.id);
     }
   }, [availableTools, selectedToolId]);
 
@@ -215,43 +196,41 @@ export function BranchDetailPage() {
     (tool) => tool.id === selectedToolId,
   );
 
-  const selectedToolSummary: ToolSummary | null = useMemo(() => {
-    if (!selectedTool) {
-      return null;
-    }
-    if (selectedTool.target === "custom") {
-      return {
-        command: selectedTool.definition.command,
-        defaultArgs: selectedTool.definition.defaultArgs ?? null,
-        modeArgs: selectedTool.definition.modeArgs,
-        permissionSkipArgs: selectedTool.definition.permissionSkipArgs ?? null,
-      };
-    }
-    return BUILTIN_TOOL_SUMMARIES[selectedTool.id] ?? null;
-  }, [selectedTool]);
+  // Branch sessions
+  const branchSessions = useMemo(() => {
+    return (sessionsData ?? [])
+      .filter((session) => session.worktreePath === branch?.worktreePath)
+      .sort((a, b) => (b.startedAt ?? "").localeCompare(a.startedAt ?? ""));
+  }, [sessionsData, branch?.worktreePath]);
 
-  const argsPreview = useMemo(() => {
-    if (!selectedToolSummary) {
-      return null;
-    }
-    const args: string[] = [];
-    if (selectedToolSummary.defaultArgs?.length) {
-      args.push(...selectedToolSummary.defaultArgs);
-    }
-    const mode = selectedToolSummary.modeArgs?.[selectedMode];
-    if (mode?.length) {
-      args.push(...mode);
-    }
-    if (skipPermissions && selectedToolSummary.permissionSkipArgs?.length) {
-      args.push(...selectedToolSummary.permissionSkipArgs);
-    }
-    const extraArgs = parseExtraArgs(extraArgsText);
-    if (extraArgs.length) {
-      args.push(...extraArgs);
-    }
-    return { command: selectedToolSummary.command, args };
-  }, [selectedToolSummary, selectedMode, skipPermissions, extraArgsText]);
+  // Latest tool usage
+  const latestToolUsage: LastToolUsage | null = useMemo(() => {
+    if (branch?.lastToolUsage) return branch.lastToolUsage;
+    const first = branchSessions[0];
+    if (!first) return null;
+    return {
+      branch: branch.name,
+      worktreePath: branch.worktreePath ?? null,
+      toolId:
+        first.toolType === "custom"
+          ? (first.toolName ?? "custom")
+          : (first.toolType as LastToolUsage["toolId"]),
+      toolLabel:
+        first.toolType === "custom"
+          ? (first.toolName ?? "Custom")
+          : toolLabel(first.toolType),
+      mode: first.mode ?? "normal",
+      model: null,
+      timestamp: first.startedAt ? Date.parse(first.startedAt) : Date.now(),
+    };
+  }, [
+    branch?.lastToolUsage,
+    branch?.name,
+    branch?.worktreePath,
+    branchSessions,
+  ]);
 
+  // Handlers
   const handleCreateWorktree = async () => {
     try {
       await createWorktree.mutateAsync({
@@ -290,8 +269,7 @@ export function BranchDetailPage() {
     if (needsRemoteSync) {
       setBanner({
         type: "error",
-        message:
-          "リモートの更新を取り込むまでAIツールは起動できません。『最新の変更を同期』を実行してください。",
+        message: "リモートの更新を取り込むまでAIツールは起動できません。",
       });
       return;
     }
@@ -299,17 +277,14 @@ export function BranchDetailPage() {
     if (hasBlockingDivergence) {
       setBanner({
         type: "error",
-        message:
-          "リモートとローカルの双方で進捗が発生しているため、CLIと同様にAIツールの起動をブロックしました。先に rebase/merge 等で差分を解消してください。",
+        message: "差分を解消してから起動してください。",
       });
       return;
     }
 
     if (
       skipPermissions &&
-      !window.confirm(
-        "権限チェックをスキップして起動します。自己責任で実行してください。続行しますか？",
-      )
+      !window.confirm("権限チェックをスキップして起動します。続行しますか？")
     ) {
       return;
     }
@@ -322,7 +297,10 @@ export function BranchDetailPage() {
           : selectedTool.target === "custom"
             ? "custom"
             : "claude-code";
-      const extraArgs = parseExtraArgs(extraArgsText);
+      const extraArgs = extraArgsText
+        .split(/\s+/)
+        .map((c) => c.trim())
+        .filter(Boolean);
       const sessionRequest = {
         toolType,
         toolName: selectedTool.target === "custom" ? selectedTool.id : null,
@@ -360,9 +338,7 @@ export function BranchDetailPage() {
     try {
       await deleteSession.mutateAsync(sessionId);
       setBanner({ type: "success", message: "セッションを終了しました" });
-      if (activeSessionId === sessionId) {
-        setActiveSessionId(null);
-      }
+      if (activeSessionId === sessionId) setActiveSessionId(null);
     } catch (err) {
       setBanner({
         type: "error",
@@ -408,40 +384,6 @@ export function BranchDetailPage() {
     }
   };
 
-  const branchSessions = useMemo(() => {
-    return (sessionsData ?? [])
-      .filter((session) => session.worktreePath === branch?.worktreePath)
-      .sort((a, b) => (b.startedAt ?? "").localeCompare(a.startedAt ?? ""));
-  }, [sessionsData, branch?.worktreePath]);
-
-  const latestToolUsage: LastToolUsage | null = useMemo(() => {
-    if (branch?.lastToolUsage) {
-      return branch.lastToolUsage;
-    }
-    const first = branchSessions[0];
-    if (!first) return null;
-    return {
-      branch: branch.name,
-      worktreePath: branch.worktreePath ?? null,
-      toolId:
-        first.toolType === "custom"
-          ? (first.toolName ?? "custom")
-          : (first.toolType as LastToolUsage["toolId"]),
-      toolLabel:
-        first.toolType === "custom"
-          ? (first.toolName ?? "Custom")
-          : toolLabel(first.toolType),
-      mode: first.mode ?? "normal",
-      model: null,
-      timestamp: first.startedAt ? Date.parse(first.startedAt) : Date.now(),
-    };
-  }, [
-    branch?.lastToolUsage,
-    branch?.name,
-    branch?.worktreePath,
-    branchSessions,
-  ]);
-
   const handleSessionExit = (code: number) => {
     setActiveSessionId(null);
     setIsTerminalFullscreen(false);
@@ -452,488 +394,132 @@ export function BranchDetailPage() {
   };
 
   return (
-    <div className="app-shell">
-      <header className="page-hero page-hero--compact">
-        <Link to="/" className="link-back">
-          ← ブランチ一覧に戻る
-        </Link>
-        <p className="page-hero__eyebrow">BRANCH DETAIL</p>
-        <h1>{branch.name}</h1>
-        <p className="page-hero__subtitle">
-          最新コミット {branch.commitHash.slice(0, 7)} ・ {formattedCommitDate}
-        </p>
-        <div className="badge-group">
-          <span className={`status-badge status-badge--${branch.type}`}>
+    <div className="min-h-screen bg-background">
+      {/* Fullscreen backdrop */}
+      {isTerminalFullscreen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/80"
+          aria-hidden="true"
+          onClick={() => setIsTerminalFullscreen(false)}
+        />
+      )}
+
+      {/* Header */}
+      <PageHeader
+        eyebrow="BRANCH DETAIL"
+        title={branch.name}
+        subtitle={`最新コミット ${branch.commitHash.slice(0, 7)} · ${formattedCommitDate}`}
+      >
+        <div className="mt-4 flex flex-wrap gap-2">
+          <Badge variant={branch.type === "local" ? "local" : "remote"}>
             {BRANCH_TYPE_LABEL[branch.type]}
-          </span>
-          <span
-            className={`status-badge status-badge--${MERGE_STATUS_TONE[branch.mergeStatus]}`}
+          </Badge>
+          <Badge
+            variant={
+              branch.mergeStatus === "merged"
+                ? "success"
+                : branch.mergeStatus === "unmerged"
+                  ? "warning"
+                  : "outline"
+            }
           >
             {MERGE_STATUS_LABEL[branch.mergeStatus]}
-          </span>
-          <span
-            className={`status-badge ${
-              branch.worktreePath
-                ? "status-badge--success"
-                : "status-badge--muted"
-            }`}
-          >
+          </Badge>
+          <Badge variant={branch.worktreePath ? "success" : "outline"}>
             {branch.worktreePath ? "Worktreeあり" : "Worktree未作成"}
-          </span>
-        </div>
-        <div className="badge-group" style={{ marginTop: "0.5rem" }}>
-          {latestToolUsage ? (
-            <>
-              <span className="status-badge status-badge--muted">
-                {renderToolUsage(latestToolUsage)}
-              </span>
-              <span className="status-badge status-badge--muted">
-                {formatUsageTimestamp(latestToolUsage.timestamp)} ・ worktree:{" "}
-                {latestToolUsage.worktreePath ?? branch.worktreePath ?? "N/A"}
-              </span>
-            </>
-          ) : (
-            <span className="status-badge status-badge--muted">Unknown</span>
-          )}
+          </Badge>
         </div>
-        <div className="page-hero__actions">
+        <div className="mt-4 flex flex-wrap gap-2">
+          <Button variant="ghost" size="sm" asChild>
+            <Link to="/">← ブランチ一覧</Link>
+          </Button>
           {!canStartSession ? (
-            <button
-              type="button"
-              className="button button--primary"
+            <Button
               onClick={handleCreateWorktree}
               disabled={createWorktree.isPending}
             >
               {createWorktree.isPending ? "作成中..." : "Worktreeを作成"}
-            </button>
+            </Button>
           ) : (
-            <Link to="/config" className="button button--secondary">
-              カスタムツール設定を開く
-            </Link>
+            <Button variant="secondary" asChild>
+              <Link to="/config">カスタムツール設定</Link>
+            </Button>
           )}
         </div>
-
-        {banner && (
-          <div className={`inline-banner inline-banner--${banner.type}`}>
-            {banner.message}
-          </div>
-        )}
-      </header>
-
-      {isTerminalFullscreen && (
-        <div
-          className="terminal-overlay-backdrop"
-          aria-hidden="true"
-          onClick={() => setIsTerminalFullscreen(false)}
-        />
+      </PageHeader>
+
+      {/* Banner */}
+      {banner && (
+        <div className="mx-auto max-w-7xl px-6 pt-4">
+          <Alert
+            variant={
+              banner.type === "error"
+                ? "destructive"
+                : banner.type === "success"
+                  ? "success"
+                  : "info"
+            }
+          >
+            <AlertDescription>{banner.message}</AlertDescription>
+          </Alert>
+        </div>
       )}
-      <main className="page-content page-content--wide">
-        <div className="page-layout page-layout--split">
-          <div className="info-stack">
-            <section className="section-card">
-              <header className="terminal-section__header">
-                <div>
-                  <h2>AIツール起動</h2>
-                  <p className="section-card__body">
-                    Web UI
-                    から直接AIツールを起動できます。設定したカスタムツールも一覧に表示されます。
-                  </p>
-                </div>
-                {configError && (
-                  <span className="pill pill--warning">
-                    設定の取得に失敗しました
-                  </span>
-                )}
-              </header>
-
-              {!canStartSession ? (
-                <p className="section-card__body">
-                  Worktreeが未作成のため、先にWorktreeを作成してください。
-                </p>
-              ) : (
-                <div className="tool-form">
-                  <div className="form-grid">
-                    <label className="form-field">
-                      <span>AIツール</span>
-                      <select
-                        value={selectedToolId}
-                        onChange={(event) =>
-                          setSelectedToolId(event.target.value)
-                        }
-                        disabled={isConfigLoading}
-                      >
-                        {availableTools.map((tool) => (
-                          <option key={tool.id} value={tool.id}>
-                            {tool.label}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
 
-                    <label className="form-field">
-                      <span>起動モード</span>
-                      <select
-                        value={selectedMode}
-                        onChange={(event) =>
-                          setSelectedMode(event.target.value as ToolMode)
-                        }
-                      >
-                        <option value="normal">normal</option>
-                        <option value="continue">continue</option>
-                        <option value="resume">resume</option>
-                      </select>
-                    </label>
-
-                    <label className="form-field">
-                      <span>追加引数 (スペース区切り)</span>
-                      <input
-                        type="text"
-                        value={extraArgsText}
-                        onChange={(event) =>
-                          setExtraArgsText(event.target.value)
-                        }
-                        placeholder="--flag value"
-                      />
-                    </label>
-                  </div>
-
-                  <label className="form-field">
-                    <span>
-                      <input
-                        type="checkbox"
-                        checked={skipPermissions}
-                        onChange={(event) =>
-                          setSkipPermissions(event.target.checked)
-                        }
-                      />
-                      <span style={{ marginLeft: "0.5rem" }}>
-                        権限チェックをスキップ (自己責任)
-                      </span>
-                    </span>
-                  </label>
-                  {skipPermissions && (
-                    <div className="inline-banner inline-banner--warning">
-                      <p>
-                        権限チェックをスキップすることで、CLI での
-                        `--dangerously-skip-permissions`
-                        指定と同様のリスクを負います。
-                      </p>
-                    </div>
-                  )}
-                  {needsRemoteSync && (
-                    <div
-                      className="inline-banner inline-banner--info"
-                      data-testid="sync-required"
-                    >
-                      <p>
-                        リモートに未取得の更新 ({branch.divergence?.behind ?? 0}{" "}
-                        commits)
-                        があるため、AIツールを起動する前に同期してください。
-                      </p>
-                      <p className="section-card__body">
-                        CLI の `git fetch --all` と `git pull --ff-only`
-                        と同じ処理を Web UI から実行できます。
-                      </p>
-                    </div>
-                  )}
-                  {hasBlockingDivergence && (
-                    <div
-                      className="inline-banner inline-banner--warning"
-                      data-testid="divergence-warning"
-                    >
-                      <p>
-                        リモートとローカルの両方に未解決の差分があるため、Web UI
-                        でも CLI と同様に起動をブロックしています。
-                      </p>
-                      <ul className="list-muted">
-                        <li>
-                          git fetch && git pull --ff-only origin {branch.name}
-                        </li>
-                        <li>
-                          必要に応じて git push origin {branch.name}{" "}
-                          でローカル進捗を共有
-                        </li>
-                      </ul>
-                      <p className="section-card__body">
-                        rebase / merge
-                        などで差分を解消した後にページを更新してください。
-                      </p>
-                    </div>
-                  )}
-
-                  <div className="tool-card__actions">
-                    <button
-                      type="button"
-                      className="button button--primary"
-                      onClick={handleStartSession}
-                      disabled={
-                        isStartingSession ||
-                        !selectedTool ||
-                        hasBlockingDivergence ||
-                        needsRemoteSync ||
-                        isSyncingBranch
-                      }
-                    >
-                      {isStartingSession ? "起動中..." : "セッションを起動"}
-                    </button>
-                    <button
-                      type="button"
-                      className="button button--secondary"
-                      onClick={handleSyncBranch}
-                      disabled={!branch.worktreePath || isSyncingBranch}
-                    >
-                      {isSyncingBranch ? "同期中..." : "最新の変更を同期"}
-                    </button>
-                    <Link to="/config" className="button button--ghost">
-                      設定を編集
-                    </Link>
-                  </div>
-
-                  {selectedToolSummary && (
-                    <dl className="metadata-grid metadata-grid--compact">
-                      <div>
-                        <dt>コマンド</dt>
-                        <dd className="tool-card__command">
-                          {selectedToolSummary.command}
-                        </dd>
-                      </div>
-                      <div>
-                        <dt>defaultArgs</dt>
-                        <dd>{renderArgs(selectedToolSummary.defaultArgs)}</dd>
-                      </div>
-                      <div>
-                        <dt>permissionSkipArgs</dt>
-                        <dd>
-                          {renderArgs(selectedToolSummary.permissionSkipArgs)}
-                        </dd>
-                      </div>
-                      {argsPreview && (
-                        <div className="metadata-grid__full">
-                          <dt>最終的に実行されるコマンド</dt>
-                          <dd className="tool-card__command">
-                            {argsPreview.command} {argsPreview.args.join(" ")}
-                          </dd>
-                        </div>
-                      )}
-                    </dl>
-                  )}
-                </div>
-              )}
-            </section>
-            <section className="section-card">
-              <header className="terminal-section__header">
-                <div>
-                  <h2>セッション履歴</h2>
-                  <p className="section-card__body">
-                    この Worktree に紐づいた最新の AI
-                    セッションが表示されます。CLI からの起動分も共有されます。
-                  </p>
-                </div>
-                {isSessionsLoading && (
-                  <span className="pill">読み込み中...</span>
-                )}
-              </header>
-              {branchSessions.length === 0 ? (
-                <p className="section-card__body">
-                  セッション履歴はまだありません。
-                </p>
-              ) : (
-                <div className="session-table-wrapper">
-                  <table className="session-table">
-                    <thead>
-                      <tr>
-                        <th>状態</th>
-                        <th>ツール</th>
-                        <th>モード</th>
-                        <th>開始時刻</th>
-                        <th>終了時刻</th>
-                        <th>操作</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {branchSessions.slice(0, 5).map((session) => (
-                        <tr key={session.sessionId}>
-                          <td>
-                            <span
-                              className={`status-pill status-pill--${session.status}`}
-                            >
-                              {SESSION_STATUS_LABEL[session.status]}
-                            </span>
-                          </td>
-                          <td>
-                            {session.toolType === "custom"
-                              ? (session.toolName ?? "custom")
-                              : toolLabel(session.toolType)}
-                          </td>
-                          <td>{session.mode}</td>
-                          <td>{formatDate(session.startedAt)}</td>
-                          <td>
-                            {session.endedAt
-                              ? formatDate(session.endedAt)
-                              : "--"}
-                          </td>
-                          <td>
-                            {session.status === "running" ? (
-                              <button
-                                type="button"
-                                className="button button--ghost"
-                                onClick={() =>
-                                  handleTerminateSession(session.sessionId)
-                                }
-                                disabled={
-                                  terminatingSessionId === session.sessionId ||
-                                  deleteSession.isPending
-                                }
-                              >
-                                {terminatingSessionId === session.sessionId
-                                  ? "終了中..."
-                                  : "終了"}
-                              </button>
-                            ) : (
-                              <span className="session-table__muted">--</span>
-                            )}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </section>
-            <section className="section-card">
-              <header>
-                <h2>ブランチインサイト</h2>
-              </header>
-              <dl className="metadata-grid">
-                <div>
-                  <dt>コミット</dt>
-                  <dd>{branch.commitHash}</dd>
-                </div>
-                <div>
-                  <dt>Author</dt>
-                  <dd>{branch.author ?? "N/A"}</dd>
-                </div>
-                <div>
-                  <dt>更新日</dt>
-                  <dd>{formattedCommitDate}</dd>
-                </div>
-                <div>
-                  <dt>Worktree</dt>
-                  <dd>{branch.worktreePath ?? "未作成"}</dd>
-                </div>
-              </dl>
-            </section>
-
-            <section className="section-card">
-              <header>
-                <h2>コミット情報</h2>
-              </header>
-              <p className="section-card__body">
-                {branch.commitMessage ?? "コミットメッセージがありません。"}
-              </p>
-            </section>
-
-            {branch.divergence && (
-              <section className="section-card">
-                <header>
-                  <h2>差分状況</h2>
-                </header>
-                <div className="pill-group">
-                  <span className="pill">Ahead {branch.divergence.ahead}</span>
-                  <span className="pill">
-                    Behind {branch.divergence.behind}
-                  </span>
-                  <span
-                    className={`pill ${
-                      branch.divergence.upToDate
-                        ? "pill--success"
-                        : "pill--warning"
-                    }`}
-                  >
-                    {branch.divergence.upToDate ? "最新" : "更新あり"}
-                  </span>
-                </div>
-              </section>
-            )}
-
-            <section className="section-card">
-              <header>
-                <h2>Worktree情報</h2>
-              </header>
-              <ul className="list-muted">
-                <li>
-                  パス: <strong>{branch.worktreePath ?? "未作成"}</strong>
-                </li>
-                <li>
-                  AIツールの起動にはクリーンなワークツリーであることを推奨します。
-                </li>
-                <li>
-                  Worktreeを再作成すると既存のローカル変更が失われる可能性があります。
-                </li>
-              </ul>
-            </section>
+      {/* Main Content */}
+      <main className="mx-auto max-w-7xl space-y-6 px-6 py-8">
+        <div className="grid gap-6 lg:grid-cols-[1fr_400px]">
+          {/* Left Column - Tool Launcher & Session History */}
+          <div className="space-y-6">
+            <ToolLauncher
+              branch={branch}
+              availableTools={availableTools}
+              selectedToolId={selectedToolId}
+              selectedMode={selectedMode}
+              skipPermissions={skipPermissions}
+              extraArgsText={extraArgsText}
+              isConfigLoading={isConfigLoading}
+              configError={configError ?? null}
+              isStartingSession={isStartingSession}
+              isSyncingBranch={isSyncingBranch}
+              needsRemoteSync={needsRemoteSync}
+              hasBlockingDivergence={hasBlockingDivergence}
+              onToolChange={setSelectedToolId}
+              onModeChange={setSelectedMode}
+              onSkipPermissionsChange={setSkipPermissions}
+              onExtraArgsChange={setExtraArgsText}
+              onStartSession={handleStartSession}
+              onSyncBranch={handleSyncBranch}
+            />
+
+            <SessionHistoryTable
+              sessions={branchSessions}
+              isLoading={isSessionsLoading}
+              terminatingSessionId={terminatingSessionId}
+              isDeleting={deleteSession.isPending}
+              onTerminate={handleTerminateSession}
+              onSelectSession={setActiveSessionId}
+            />
+
+            <BranchInfoCards
+              branch={branch}
+              formattedCommitDate={formattedCommitDate}
+              latestToolUsage={latestToolUsage}
+            />
           </div>
 
-          <div className="terminal-column">
-            {activeSessionId ? (
-              <section
-                className={`section-card terminal-section ${
-                  isTerminalFullscreen ? "terminal-section--fullscreen" : ""
-                }`}
-                data-testid="active-terminal"
-              >
-                <div className="terminal-section__header">
-                  <div>
-                    <h2>ターミナルセッション</h2>
-                    <p className="section-card__body">
-                      出力はリアルタイムにストリームされます。終了するとこのパネルは自動で閉じます。
-                    </p>
-                  </div>
-                  <div className="terminal-section__controls">
-                    <button
-                      type="button"
-                      className="button button--ghost"
-                      onClick={() => setIsTerminalFullscreen((prev) => !prev)}
-                    >
-                      {isTerminalFullscreen
-                        ? "通常表示に戻す"
-                        : "ターミナルを最大化"}
-                    </button>
-                  </div>
-                </div>
-                <div className="terminal-surface">
-                  <Terminal
-                    sessionId={activeSessionId}
-                    onExit={handleSessionExit}
-                    onError={(message) =>
-                      setBanner({
-                        type: "error",
-                        message: message ?? "不明なエラー",
-                      })
-                    }
-                  />
-                </div>
-                {isTerminalFullscreen && (
-                  <button
-                    type="button"
-                    className="terminal-section__close"
-                    aria-label="ターミナルを閉じる"
-                    onClick={() => setIsTerminalFullscreen(false)}
-                  >
-                    ×
-                  </button>
-                )}
-              </section>
-            ) : (
-              <section className="section-card session-hint">
-                <header>
-                  <h2>セッションは未起動</h2>
-                </header>
-                <p className="section-card__body">
-                  上部のアクションからAIツールを起動すると、このエリアにターミナルが表示されます。
-                </p>
-              </section>
-            )}
+          {/* Right Column - Terminal */}
+          <div className="lg:sticky lg:top-6 lg:self-start">
+            <TerminalPanel
+              sessionId={activeSessionId}
+              isFullscreen={isTerminalFullscreen}
+              onToggleFullscreen={() =>
+                setIsTerminalFullscreen((prev) => !prev)
+              }
+              onExit={handleSessionExit}
+              onError={(message) =>
+                setBanner({ type: "error", message: message ?? "不明なエラー" })
+              }
+            />
           </div>
         </div>
       </main>
@@ -941,91 +527,33 @@ export function BranchDetailPage() {
   );
 }
 
-function formatDate(value?: string | null) {
-  if (!value) {
-    return "日時不明";
-  }
-
+// Helper functions
+function formatDate(value?: string | null): string {
+  if (!value) return "日時不明";
   try {
-    const date = new Date(value);
     return new Intl.DateTimeFormat("ja-JP", {
       year: "numeric",
       month: "short",
       day: "numeric",
       hour: "2-digit",
       minute: "2-digit",
-    }).format(date);
-  } catch (_err) {
+    }).format(new Date(value));
+  } catch {
     return value;
   }
 }
 
-function formatError(error: unknown, fallback: string) {
+function formatError(error: unknown, fallback: string): string {
   if (error instanceof ApiError) {
     return `${error.message}${error.details ? `\n${error.details}` : ""}`;
   }
-  if (error instanceof Error) {
-    return error.message;
-  }
+  if (error instanceof Error) return error.message;
   return fallback;
 }
 
-function toolLabel(tool: ToolType, selectedTool?: SelectableTool) {
-  if (tool === "custom" && selectedTool?.target === "custom") {
+function toolLabel(tool: string, selectedTool?: SelectableTool): string {
+  if (tool === "custom" && selectedTool?.target === "custom")
     return selectedTool.label;
-  }
-  if (tool === "codex-cli") {
-    return "Codex CLI";
-  }
+  if (tool === "codex-cli") return "Codex CLI";
   return "Claude Code";
 }
-
-function renderArgs(args?: string[] | null) {
-  if (!args || args.length === 0) {
-    return <span className="tool-card__muted">未設定</span>;
-  }
-  return args.join(" ");
-}
-
-const SESSION_STATUS_LABEL: Record<
-  "pending" | "running" | "completed" | "failed",
-  string
-> = {
-  pending: "pending",
-  running: "running",
-  completed: "completed",
-  failed: "failed",
-};
-
-function renderToolUsage(usage: LastToolUsage): string {
-  const modeLabel =
-    usage.mode === "normal"
-      ? "New"
-      : usage.mode === "continue"
-        ? "Continue"
-        : usage.mode === "resume"
-          ? "Resume"
-          : null;
-  const toolText = mapToolLabel(usage.toolId, usage.toolLabel);
-  return [toolText, modeLabel, usage.model].filter(Boolean).join(" | ");
-}
-
-function formatUsageTimestamp(value: number): string {
-  return formatDate(new Date(value).toISOString());
-}
-
-function mapToolLabel(toolId: string, toolLabel?: string | null): string {
-  if (toolId === "claude-code") return "Claude";
-  if (toolId === "codex-cli") return "Codex";
-  if (toolId === "gemini-cli") return "Gemini";
-  if (toolId === "qwen-cli") return "Qwen";
-  if (toolLabel) return toolLabel;
-  return "Custom";
-}
-
-function parseExtraArgs(value: string): string[] {
-  return value
-    .split(/\s+/)
-    .map((chunk) => chunk.trim())
-    .filter(Boolean);
-}