@akiojin/gwt 2.13.0 → 2.14.0

package/dist/web/client/src/pages/BranchDetailPage.js

@@ -5,28 +5,11 @@ import { useCreateWorktree } from "../hooks/useWorktrees";
 import { useStartSession, useSessions, useDeleteSession, } from "../hooks/useSessions";
 import { useConfig } from "../hooks/useConfig";
 import { ApiError } from "../lib/api";
-import { Terminal } from "../components/Terminal";
-const BUILTIN_TOOL_SUMMARIES = {
-    "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"],
-        },
-    },
-};
+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, } from "@/components/branch-detail";
 const BRANCH_TYPE_LABEL = {
     local: "ローカル",
     remote: "リモート",
@@ -36,11 +19,6 @@ const MERGE_STATUS_LABEL = {
     unmerged: "未マージ",
     unknown: "状態不明",
 };
-const MERGE_STATUS_TONE = {
-    merged: "success",
-    unmerged: "warning",
-    unknown: "muted",
-};
 export function BranchDetailPage() {
     const { branchName } = useParams();
     const decodedBranchName = branchName ? decodeURIComponent(branchName) : "";
@@ -61,36 +39,47 @@ export function BranchDetailPage() {
     const [extraArgsText, setExtraArgsText] = useState("");
     const [terminatingSessionId, setTerminatingSessionId] = useState(null);
     const formattedCommitDate = useMemo(() => formatDate(branch?.commitDate), [branch?.commitDate]);
+    // Handle fullscreen body overflow
     useEffect(() => {
-        if (!isTerminalFullscreen) {
+        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 (React.createElement("div", { className: "app-shell" },
-            React.createElement("div", { className: "page-state page-state--centered" },
-                React.createElement("h1", null, "\u8AAD\u307F\u8FBC\u307F\u4E2D"),
-                React.createElement("p", null, "\u30D6\u30E9\u30F3\u30C1\u60C5\u5831\u3092\u53D6\u5F97\u3057\u3066\u3044\u307E\u3059..."))));
+        return (React.createElement("div", { className: "min-h-screen bg-background" },
+            React.createElement(PageHeader, { eyebrow: "BRANCH DETAIL", title: "\u8AAD\u307F\u8FBC\u307F\u4E2D...", subtitle: "\u30D6\u30E9\u30F3\u30C1\u60C5\u5831\u3092\u53D6\u5F97\u3057\u3066\u3044\u307E\u3059" }),
+            React.createElement("main", { className: "mx-auto max-w-7xl px-6 py-8" },
+                React.createElement("div", { className: "flex items-center justify-center py-20" },
+                    React.createElement("div", { className: "text-center" },
+                        React.createElement("div", { className: "mb-4 text-4xl" }, "\u23F3"),
+                        React.createElement("p", { className: "text-muted-foreground" }, "Loading branch..."))))));
     }
+    // Error state
     if (error) {
-        return (React.createElement("div", { className: "app-shell" },
-            React.createElement("div", { className: "page-state page-state--centered" },
-                React.createElement("h1", null, "\u30D6\u30E9\u30F3\u30C1\u306E\u53D6\u5F97\u306B\u5931\u6557\u3057\u307E\u3057\u305F"),
-                React.createElement("p", null, error instanceof Error ? error.message : "未知のエラーです"),
-                React.createElement(Link, { to: "/", className: "button button--ghost" }, "\u30D6\u30E9\u30F3\u30C1\u4E00\u89A7\u306B\u623B\u308B"))));
+        return (React.createElement("div", { className: "min-h-screen bg-background" },
+            React.createElement(PageHeader, { eyebrow: "BRANCH DETAIL", title: "\u30A8\u30E9\u30FC" }),
+            React.createElement("main", { className: "mx-auto max-w-7xl px-6 py-8" },
+                React.createElement(Alert, { variant: "destructive" },
+                    React.createElement(AlertDescription, null, error instanceof Error ? error.message : "未知のエラーです")),
+                React.createElement("div", { className: "mt-4" },
+                    React.createElement(Button, { variant: "ghost", asChild: true },
+                        React.createElement(Link, { to: "/" }, "\u2190 \u30D6\u30E9\u30F3\u30C1\u4E00\u89A7\u306B\u623B\u308B"))))));
     }
+    // Not found state
     if (!branch) {
-        return (React.createElement("div", { className: "app-shell" },
-            React.createElement("div", { className: "page-state page-state--centered" },
-                React.createElement("h1", null, "Branch not found"),
-                React.createElement("p", null, "\u6307\u5B9A\u3055\u308C\u305F\u30D6\u30E9\u30F3\u30C1\u306F\u5B58\u5728\u3057\u307E\u305B\u3093\u3002"),
-                React.createElement(Link, { to: "/", className: "button button--ghost" }, "\u30D6\u30E9\u30F3\u30C1\u4E00\u89A7\u306B\u623B\u308B"))));
+        return (React.createElement("div", { className: "min-h-screen bg-background" },
+            React.createElement(PageHeader, { eyebrow: "BRANCH DETAIL", title: "Branch not found" }),
+            React.createElement("main", { className: "mx-auto max-w-7xl px-6 py-8" },
+                React.createElement("p", { className: "mb-4 text-muted-foreground" }, "\u6307\u5B9A\u3055\u308C\u305F\u30D6\u30E9\u30F3\u30C1\u306F\u5B58\u5728\u3057\u307E\u305B\u3093\u3002"),
+                React.createElement(Button, { variant: "ghost", asChild: true },
+                    React.createElement(Link, { to: "/" }, "\u2190 \u30D6\u30E9\u30F3\u30C1\u4E00\u89A7\u306B\u623B\u308B")))));
     }
+    // Computed values
     const canStartSession = Boolean(branch.worktreePath);
     const divergenceInfo = branch.divergence ?? null;
     const hasBlockingDivergence = Boolean(divergenceInfo && divergenceInfo.ahead > 0 && divergenceInfo.behind > 0);
@@ -100,6 +89,7 @@ export function BranchDetailPage() {
         divergenceInfo.ahead === 0 &&
         !hasBlockingDivergence);
     const isSyncingBranch = syncBranch.isPending;
+    // Available tools
     const customTools = config?.tools ?? [];
     const availableTools = useMemo(() => [
         { id: "claude-code", label: "Claude Code", target: "claude" },
@@ -111,6 +101,7 @@ export function BranchDetailPage() {
             definition: tool,
         })),
     ], [customTools]);
+    // Ensure selected tool is valid
     useEffect(() => {
         if (!availableTools.length) {
             setSelectedToolId("claude-code");
@@ -118,47 +109,44 @@ export function BranchDetailPage() {
         }
         if (!availableTools.find((tool) => tool.id === selectedToolId)) {
             const first = availableTools[0];
-            if (first) {
+            if (first)
                 setSelectedToolId(first.id);
-            }
         }
     }, [availableTools, selectedToolId]);
     const selectedTool = availableTools.find((tool) => tool.id === selectedToolId);
-    const selectedToolSummary = 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]);
-    const argsPreview = useMemo(() => {
-        if (!selectedToolSummary) {
+    // Branch sessions
+    const branchSessions = useMemo(() => {
+        return (sessionsData ?? [])
+            .filter((session) => session.worktreePath === branch?.worktreePath)
+            .sort((a, b) => (b.startedAt ?? "").localeCompare(a.startedAt ?? ""));
+    }, [sessionsData, branch?.worktreePath]);
+    // Latest tool usage
+    const latestToolUsage = useMemo(() => {
+        if (branch?.lastToolUsage)
+            return branch.lastToolUsage;
+        const first = branchSessions[0];
+        if (!first)
             return null;
-        }
-        const args = [];
-        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]);
+        return {
+            branch: branch.name,
+            worktreePath: branch.worktreePath ?? null,
+            toolId: first.toolType === "custom"
+                ? (first.toolName ?? "custom")
+                : first.toolType,
+            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({
@@ -195,19 +183,19 @@ export function BranchDetailPage() {
         if (needsRemoteSync) {
             setBanner({
                 type: "error",
-                message: "リモートの更新を取り込むまでAIツールは起動できません。『最新の変更を同期』を実行してください。",
+                message: "リモートの更新を取り込むまでAIツールは起動できません。",
             });
             return;
         }
         if (hasBlockingDivergence) {
             setBanner({
                 type: "error",
-                message: "リモートとローカルの双方で進捗が発生しているため、CLIと同様にAIツールの起動をブロックしました。先に rebase/merge 等で差分を解消してください。",
+                message: "差分を解消してから起動してください。",
             });
             return;
         }
         if (skipPermissions &&
-            !window.confirm("権限チェックをスキップして起動します。自己責任で実行してください。続行しますか？")) {
+            !window.confirm("権限チェックをスキップして起動します。続行しますか？")) {
             return;
         }
         setIsStartingSession(true);
@@ -217,7 +205,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,
@@ -255,9 +246,8 @@ export function BranchDetailPage() {
         try {
             await deleteSession.mutateAsync(sessionId);
             setBanner({ type: "success", message: "セッションを終了しました" });
-            if (activeSessionId === sessionId) {
+            if (activeSessionId === sessionId)
                 setActiveSessionId(null);
-            }
         }
         catch (err) {
             setBanner({
@@ -303,37 +293,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 = 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,
-            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) => {
         setActiveSessionId(null);
         setIsTerminalFullscreen(false);
@@ -342,211 +301,52 @@ export function BranchDetailPage() {
             message: `セッションがコード ${code} で終了しました。`,
         });
     };
-    return (React.createElement("div", { className: "app-shell" },
-        React.createElement("header", { className: "page-hero page-hero--compact" },
-            React.createElement(Link, { to: "/", className: "link-back" }, "\u2190 \u30D6\u30E9\u30F3\u30C1\u4E00\u89A7\u306B\u623B\u308B"),
-            React.createElement("p", { className: "page-hero__eyebrow" }, "BRANCH DETAIL"),
-            React.createElement("h1", null, branch.name),
-            React.createElement("p", { className: "page-hero__subtitle" },
-                "\u6700\u65B0\u30B3\u30DF\u30C3\u30C8 ",
-                branch.commitHash.slice(0, 7),
-                " \u30FB ",
-                formattedCommitDate),
-            React.createElement("div", { className: "badge-group" },
-                React.createElement("span", { className: `status-badge status-badge--${branch.type}` }, BRANCH_TYPE_LABEL[branch.type]),
-                React.createElement("span", { className: `status-badge status-badge--${MERGE_STATUS_TONE[branch.mergeStatus]}` }, MERGE_STATUS_LABEL[branch.mergeStatus]),
-                React.createElement("span", { className: `status-badge ${branch.worktreePath
-                        ? "status-badge--success"
-                        : "status-badge--muted"}` }, branch.worktreePath ? "Worktreeあり" : "Worktree未作成")),
-            React.createElement("div", { className: "badge-group", style: { marginTop: "0.5rem" } }, latestToolUsage ? (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "status-badge status-badge--muted" }, renderToolUsage(latestToolUsage)),
-                React.createElement("span", { className: "status-badge status-badge--muted" },
-                    formatUsageTimestamp(latestToolUsage.timestamp),
-                    " \u30FB worktree:",
-                    " ",
-                    latestToolUsage.worktreePath ?? branch.worktreePath ?? "N/A"))) : (React.createElement("span", { className: "status-badge status-badge--muted" }, "Unknown"))),
-            React.createElement("div", { className: "page-hero__actions" }, !canStartSession ? (React.createElement("button", { type: "button", className: "button button--primary", onClick: handleCreateWorktree, disabled: createWorktree.isPending }, createWorktree.isPending ? "作成中..." : "Worktreeを作成")) : (React.createElement(Link, { to: "/config", className: "button button--secondary" }, "\u30AB\u30B9\u30BF\u30E0\u30C4\u30FC\u30EB\u8A2D\u5B9A\u3092\u958B\u304F"))),
-            banner && (React.createElement("div", { className: `inline-banner inline-banner--${banner.type}` }, banner.message))),
-        isTerminalFullscreen && (React.createElement("div", { className: "terminal-overlay-backdrop", "aria-hidden": "true", onClick: () => setIsTerminalFullscreen(false) })),
-        React.createElement("main", { className: "page-content page-content--wide" },
-            React.createElement("div", { className: "page-layout page-layout--split" },
-                React.createElement("div", { className: "info-stack" },
-                    React.createElement("section", { className: "section-card" },
-                        React.createElement("header", { className: "terminal-section__header" },
-                            React.createElement("div", null,
-                                React.createElement("h2", null, "AI\u30C4\u30FC\u30EB\u8D77\u52D5"),
-                                React.createElement("p", { className: "section-card__body" }, "Web UI \u304B\u3089\u76F4\u63A5AI\u30C4\u30FC\u30EB\u3092\u8D77\u52D5\u3067\u304D\u307E\u3059\u3002\u8A2D\u5B9A\u3057\u305F\u30AB\u30B9\u30BF\u30E0\u30C4\u30FC\u30EB\u3082\u4E00\u89A7\u306B\u8868\u793A\u3055\u308C\u307E\u3059\u3002")),
-                            configError && (React.createElement("span", { className: "pill pill--warning" }, "\u8A2D\u5B9A\u306E\u53D6\u5F97\u306B\u5931\u6557\u3057\u307E\u3057\u305F"))),
-                        !canStartSession ? (React.createElement("p", { className: "section-card__body" }, "Worktree\u304C\u672A\u4F5C\u6210\u306E\u305F\u3081\u3001\u5148\u306BWorktree\u3092\u4F5C\u6210\u3057\u3066\u304F\u3060\u3055\u3044\u3002")) : (React.createElement("div", { className: "tool-form" },
-                            React.createElement("div", { className: "form-grid" },
-                                React.createElement("label", { className: "form-field" },
-                                    React.createElement("span", null, "AI\u30C4\u30FC\u30EB"),
-                                    React.createElement("select", { value: selectedToolId, onChange: (event) => setSelectedToolId(event.target.value), disabled: isConfigLoading }, availableTools.map((tool) => (React.createElement("option", { key: tool.id, value: tool.id }, tool.label))))),
-                                React.createElement("label", { className: "form-field" },
-                                    React.createElement("span", null, "\u8D77\u52D5\u30E2\u30FC\u30C9"),
-                                    React.createElement("select", { value: selectedMode, onChange: (event) => setSelectedMode(event.target.value) },
-                                        React.createElement("option", { value: "normal" }, "normal"),
-                                        React.createElement("option", { value: "continue" }, "continue"),
-                                        React.createElement("option", { value: "resume" }, "resume"))),
-                                React.createElement("label", { className: "form-field" },
-                                    React.createElement("span", null, "\u8FFD\u52A0\u5F15\u6570 (\u30B9\u30DA\u30FC\u30B9\u533A\u5207\u308A)"),
-                                    React.createElement("input", { type: "text", value: extraArgsText, onChange: (event) => setExtraArgsText(event.target.value), placeholder: "--flag value" }))),
-                            React.createElement("label", { className: "form-field" },
-                                React.createElement("span", null,
-                                    React.createElement("input", { type: "checkbox", checked: skipPermissions, onChange: (event) => setSkipPermissions(event.target.checked) }),
-                                    React.createElement("span", { style: { marginLeft: "0.5rem" } }, "\u6A29\u9650\u30C1\u30A7\u30C3\u30AF\u3092\u30B9\u30AD\u30C3\u30D7 (\u81EA\u5DF1\u8CAC\u4EFB)"))),
-                            skipPermissions && (React.createElement("div", { className: "inline-banner inline-banner--warning" },
-                                React.createElement("p", null, "\u6A29\u9650\u30C1\u30A7\u30C3\u30AF\u3092\u30B9\u30AD\u30C3\u30D7\u3059\u308B\u3053\u3068\u3067\u3001CLI \u3067\u306E `--dangerously-skip-permissions` \u6307\u5B9A\u3068\u540C\u69D8\u306E\u30EA\u30B9\u30AF\u3092\u8CA0\u3044\u307E\u3059\u3002"))),
-                            needsRemoteSync && (React.createElement("div", { className: "inline-banner inline-banner--info", "data-testid": "sync-required" },
-                                React.createElement("p", null,
-                                    "\u30EA\u30E2\u30FC\u30C8\u306B\u672A\u53D6\u5F97\u306E\u66F4\u65B0 (",
-                                    branch.divergence?.behind ?? 0,
-                                    " ",
-                                    "commits) \u304C\u3042\u308B\u305F\u3081\u3001AI\u30C4\u30FC\u30EB\u3092\u8D77\u52D5\u3059\u308B\u524D\u306B\u540C\u671F\u3057\u3066\u304F\u3060\u3055\u3044\u3002"),
-                                React.createElement("p", { className: "section-card__body" }, "CLI \u306E `git fetch --all` \u3068 `git pull --ff-only` \u3068\u540C\u3058\u51E6\u7406\u3092 Web UI \u304B\u3089\u5B9F\u884C\u3067\u304D\u307E\u3059\u3002"))),
-                            hasBlockingDivergence && (React.createElement("div", { className: "inline-banner inline-banner--warning", "data-testid": "divergence-warning" },
-                                React.createElement("p", null, "\u30EA\u30E2\u30FC\u30C8\u3068\u30ED\u30FC\u30AB\u30EB\u306E\u4E21\u65B9\u306B\u672A\u89E3\u6C7A\u306E\u5DEE\u5206\u304C\u3042\u308B\u305F\u3081\u3001Web UI \u3067\u3082 CLI \u3068\u540C\u69D8\u306B\u8D77\u52D5\u3092\u30D6\u30ED\u30C3\u30AF\u3057\u3066\u3044\u307E\u3059\u3002"),
-                                React.createElement("ul", { className: "list-muted" },
-                                    React.createElement("li", null,
-                                        "git fetch && git pull --ff-only origin ",
-                                        branch.name),
-                                    React.createElement("li", null,
-                                        "\u5FC5\u8981\u306B\u5FDC\u3058\u3066 git push origin ",
-                                        branch.name,
-                                        " ",
-                                        "\u3067\u30ED\u30FC\u30AB\u30EB\u9032\u6357\u3092\u5171\u6709")),
-                                React.createElement("p", { className: "section-card__body" }, "rebase / merge \u306A\u3069\u3067\u5DEE\u5206\u3092\u89E3\u6D88\u3057\u305F\u5F8C\u306B\u30DA\u30FC\u30B8\u3092\u66F4\u65B0\u3057\u3066\u304F\u3060\u3055\u3044\u3002"))),
-                            React.createElement("div", { className: "tool-card__actions" },
-                                React.createElement("button", { type: "button", className: "button button--primary", onClick: handleStartSession, disabled: isStartingSession ||
-                                        !selectedTool ||
-                                        hasBlockingDivergence ||
-                                        needsRemoteSync ||
-                                        isSyncingBranch }, isStartingSession ? "起動中..." : "セッションを起動"),
-                                React.createElement("button", { type: "button", className: "button button--secondary", onClick: handleSyncBranch, disabled: !branch.worktreePath || isSyncingBranch }, isSyncingBranch ? "同期中..." : "最新の変更を同期"),
-                                React.createElement(Link, { to: "/config", className: "button button--ghost" }, "\u8A2D\u5B9A\u3092\u7DE8\u96C6")),
-                            selectedToolSummary && (React.createElement("dl", { className: "metadata-grid metadata-grid--compact" },
-                                React.createElement("div", null,
-                                    React.createElement("dt", null, "\u30B3\u30DE\u30F3\u30C9"),
-                                    React.createElement("dd", { className: "tool-card__command" }, selectedToolSummary.command)),
-                                React.createElement("div", null,
-                                    React.createElement("dt", null, "defaultArgs"),
-                                    React.createElement("dd", null, renderArgs(selectedToolSummary.defaultArgs))),
-                                React.createElement("div", null,
-                                    React.createElement("dt", null, "permissionSkipArgs"),
-                                    React.createElement("dd", null, renderArgs(selectedToolSummary.permissionSkipArgs))),
-                                argsPreview && (React.createElement("div", { className: "metadata-grid__full" },
-                                    React.createElement("dt", null, "\u6700\u7D42\u7684\u306B\u5B9F\u884C\u3055\u308C\u308B\u30B3\u30DE\u30F3\u30C9"),
-                                    React.createElement("dd", { className: "tool-card__command" },
-                                        argsPreview.command,
-                                        " ",
-                                        argsPreview.args.join(" "))))))))),
-                    React.createElement("section", { className: "section-card" },
-                        React.createElement("header", { className: "terminal-section__header" },
-                            React.createElement("div", null,
-                                React.createElement("h2", null, "\u30BB\u30C3\u30B7\u30E7\u30F3\u5C65\u6B74"),
-                                React.createElement("p", { className: "section-card__body" }, "\u3053\u306E Worktree \u306B\u7D10\u3065\u3044\u305F\u6700\u65B0\u306E AI \u30BB\u30C3\u30B7\u30E7\u30F3\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002CLI \u304B\u3089\u306E\u8D77\u52D5\u5206\u3082\u5171\u6709\u3055\u308C\u307E\u3059\u3002")),
-                            isSessionsLoading && (React.createElement("span", { className: "pill" }, "\u8AAD\u307F\u8FBC\u307F\u4E2D..."))),
-                        branchSessions.length === 0 ? (React.createElement("p", { className: "section-card__body" }, "\u30BB\u30C3\u30B7\u30E7\u30F3\u5C65\u6B74\u306F\u307E\u3060\u3042\u308A\u307E\u305B\u3093\u3002")) : (React.createElement("div", { className: "session-table-wrapper" },
-                            React.createElement("table", { className: "session-table" },
-                                React.createElement("thead", null,
-                                    React.createElement("tr", null,
-                                        React.createElement("th", null, "\u72B6\u614B"),
-                                        React.createElement("th", null, "\u30C4\u30FC\u30EB"),
-                                        React.createElement("th", null, "\u30E2\u30FC\u30C9"),
-                                        React.createElement("th", null, "\u958B\u59CB\u6642\u523B"),
-                                        React.createElement("th", null, "\u7D42\u4E86\u6642\u523B"),
-                                        React.createElement("th", null, "\u64CD\u4F5C"))),
-                                React.createElement("tbody", null, branchSessions.slice(0, 5).map((session) => (React.createElement("tr", { key: session.sessionId },
-                                    React.createElement("td", null,
-                                        React.createElement("span", { className: `status-pill status-pill--${session.status}` }, SESSION_STATUS_LABEL[session.status])),
-                                    React.createElement("td", null, session.toolType === "custom"
-                                        ? (session.toolName ?? "custom")
-                                        : toolLabel(session.toolType)),
-                                    React.createElement("td", null, session.mode),
-                                    React.createElement("td", null, formatDate(session.startedAt)),
-                                    React.createElement("td", null, session.endedAt
-                                        ? formatDate(session.endedAt)
-                                        : "--"),
-                                    React.createElement("td", null, session.status === "running" ? (React.createElement("button", { type: "button", className: "button button--ghost", onClick: () => handleTerminateSession(session.sessionId), disabled: terminatingSessionId === session.sessionId ||
-                                            deleteSession.isPending }, terminatingSessionId === session.sessionId
-                                        ? "終了中..."
-                                        : "終了")) : (React.createElement("span", { className: "session-table__muted" }, "--"))))))))))),
-                    React.createElement("section", { className: "section-card" },
-                        React.createElement("header", null,
-                            React.createElement("h2", null, "\u30D6\u30E9\u30F3\u30C1\u30A4\u30F3\u30B5\u30A4\u30C8")),
-                        React.createElement("dl", { className: "metadata-grid" },
-                            React.createElement("div", null,
-                                React.createElement("dt", null, "\u30B3\u30DF\u30C3\u30C8"),
-                                React.createElement("dd", null, branch.commitHash)),
-                            React.createElement("div", null,
-                                React.createElement("dt", null, "Author"),
-                                React.createElement("dd", null, branch.author ?? "N/A")),
-                            React.createElement("div", null,
-                                React.createElement("dt", null, "\u66F4\u65B0\u65E5"),
-                                React.createElement("dd", null, formattedCommitDate)),
-                            React.createElement("div", null,
-                                React.createElement("dt", null, "Worktree"),
-                                React.createElement("dd", null, branch.worktreePath ?? "未作成")))),
-                    React.createElement("section", { className: "section-card" },
-                        React.createElement("header", null,
-                            React.createElement("h2", null, "\u30B3\u30DF\u30C3\u30C8\u60C5\u5831")),
-                        React.createElement("p", { className: "section-card__body" }, branch.commitMessage ?? "コミットメッセージがありません。")),
-                    branch.divergence && (React.createElement("section", { className: "section-card" },
-                        React.createElement("header", null,
-                            React.createElement("h2", null, "\u5DEE\u5206\u72B6\u6CC1")),
-                        React.createElement("div", { className: "pill-group" },
-                            React.createElement("span", { className: "pill" },
-                                "Ahead ",
-                                branch.divergence.ahead),
-                            React.createElement("span", { className: "pill" },
-                                "Behind ",
-                                branch.divergence.behind),
-                            React.createElement("span", { className: `pill ${branch.divergence.upToDate
-                                    ? "pill--success"
-                                    : "pill--warning"}` }, branch.divergence.upToDate ? "最新" : "更新あり")))),
-                    React.createElement("section", { className: "section-card" },
-                        React.createElement("header", null,
-                            React.createElement("h2", null, "Worktree\u60C5\u5831")),
-                        React.createElement("ul", { className: "list-muted" },
-                            React.createElement("li", null,
-                                "\u30D1\u30B9: ",
-                                React.createElement("strong", null, branch.worktreePath ?? "未作成")),
-                            React.createElement("li", null, "AI\u30C4\u30FC\u30EB\u306E\u8D77\u52D5\u306B\u306F\u30AF\u30EA\u30FC\u30F3\u306A\u30EF\u30FC\u30AF\u30C4\u30EA\u30FC\u3067\u3042\u308B\u3053\u3068\u3092\u63A8\u5968\u3057\u307E\u3059\u3002"),
-                            React.createElement("li", null, "Worktree\u3092\u518D\u4F5C\u6210\u3059\u308B\u3068\u65E2\u5B58\u306E\u30ED\u30FC\u30AB\u30EB\u5909\u66F4\u304C\u5931\u308F\u308C\u308B\u53EF\u80FD\u6027\u304C\u3042\u308A\u307E\u3059\u3002")))),
-                React.createElement("div", { className: "terminal-column" }, activeSessionId ? (React.createElement("section", { className: `section-card terminal-section ${isTerminalFullscreen ? "terminal-section--fullscreen" : ""}`, "data-testid": "active-terminal" },
-                    React.createElement("div", { className: "terminal-section__header" },
-                        React.createElement("div", null,
-                            React.createElement("h2", null, "\u30BF\u30FC\u30DF\u30CA\u30EB\u30BB\u30C3\u30B7\u30E7\u30F3"),
-                            React.createElement("p", { className: "section-card__body" }, "\u51FA\u529B\u306F\u30EA\u30A2\u30EB\u30BF\u30A4\u30E0\u306B\u30B9\u30C8\u30EA\u30FC\u30E0\u3055\u308C\u307E\u3059\u3002\u7D42\u4E86\u3059\u308B\u3068\u3053\u306E\u30D1\u30CD\u30EB\u306F\u81EA\u52D5\u3067\u9589\u3058\u307E\u3059\u3002")),
-                        React.createElement("div", { className: "terminal-section__controls" },
-                            React.createElement("button", { type: "button", className: "button button--ghost", onClick: () => setIsTerminalFullscreen((prev) => !prev) }, isTerminalFullscreen
-                                ? "通常表示に戻す"
-                                : "ターミナルを最大化"))),
-                    React.createElement("div", { className: "terminal-surface" },
-                        React.createElement(Terminal, { sessionId: activeSessionId, onExit: handleSessionExit, onError: (message) => setBanner({
-                                type: "error",
-                                message: message ?? "不明なエラー",
-                            }) })),
-                    isTerminalFullscreen && (React.createElement("button", { type: "button", className: "terminal-section__close", "aria-label": "\u30BF\u30FC\u30DF\u30CA\u30EB\u3092\u9589\u3058\u308B", onClick: () => setIsTerminalFullscreen(false) }, "\u00D7")))) : (React.createElement("section", { className: "section-card session-hint" },
-                    React.createElement("header", null,
-                        React.createElement("h2", null, "\u30BB\u30C3\u30B7\u30E7\u30F3\u306F\u672A\u8D77\u52D5")),
-                    React.createElement("p", { className: "section-card__body" }, "\u4E0A\u90E8\u306E\u30A2\u30AF\u30B7\u30E7\u30F3\u304B\u3089AI\u30C4\u30FC\u30EB\u3092\u8D77\u52D5\u3059\u308B\u3068\u3001\u3053\u306E\u30A8\u30EA\u30A2\u306B\u30BF\u30FC\u30DF\u30CA\u30EB\u304C\u8868\u793A\u3055\u308C\u307E\u3059\u3002"))))))));
+    return (React.createElement("div", { className: "min-h-screen bg-background" },
+        isTerminalFullscreen && (React.createElement("div", { className: "fixed inset-0 z-40 bg-black/80", "aria-hidden": "true", onClick: () => setIsTerminalFullscreen(false) })),
+        React.createElement(PageHeader, { eyebrow: "BRANCH DETAIL", title: branch.name, subtitle: `最新コミット ${branch.commitHash.slice(0, 7)} · ${formattedCommitDate}` },
+            React.createElement("div", { className: "mt-4 flex flex-wrap gap-2" },
+                React.createElement(Badge, { variant: branch.type === "local" ? "local" : "remote" }, BRANCH_TYPE_LABEL[branch.type]),
+                React.createElement(Badge, { variant: branch.mergeStatus === "merged"
+                        ? "success"
+                        : branch.mergeStatus === "unmerged"
+                            ? "warning"
+                            : "outline" }, MERGE_STATUS_LABEL[branch.mergeStatus]),
+                React.createElement(Badge, { variant: branch.worktreePath ? "success" : "outline" }, branch.worktreePath ? "Worktreeあり" : "Worktree未作成")),
+            React.createElement("div", { className: "mt-4 flex flex-wrap gap-2" },
+                React.createElement(Button, { variant: "ghost", size: "sm", asChild: true },
+                    React.createElement(Link, { to: "/" }, "\u2190 \u30D6\u30E9\u30F3\u30C1\u4E00\u89A7")),
+                !canStartSession ? (React.createElement(Button, { onClick: handleCreateWorktree, disabled: createWorktree.isPending }, createWorktree.isPending ? "作成中..." : "Worktreeを作成")) : (React.createElement(Button, { variant: "secondary", asChild: true },
+                    React.createElement(Link, { to: "/config" }, "\u30AB\u30B9\u30BF\u30E0\u30C4\u30FC\u30EB\u8A2D\u5B9A"))))),
+        banner && (React.createElement("div", { className: "mx-auto max-w-7xl px-6 pt-4" },
+            React.createElement(Alert, { variant: banner.type === "error"
+                    ? "destructive"
+                    : banner.type === "success"
+                        ? "success"
+                        : "info" },
+                React.createElement(AlertDescription, null, banner.message)))),
+        React.createElement("main", { className: "mx-auto max-w-7xl space-y-6 px-6 py-8" },
+            React.createElement("div", { className: "grid gap-6 lg:grid-cols-[1fr_400px]" },
+                React.createElement("div", { className: "space-y-6" },
+                    React.createElement(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 }),
+                    React.createElement(SessionHistoryTable, { sessions: branchSessions, isLoading: isSessionsLoading, terminatingSessionId: terminatingSessionId, isDeleting: deleteSession.isPending, onTerminate: handleTerminateSession, onSelectSession: setActiveSessionId }),
+                    React.createElement(BranchInfoCards, { branch: branch, formattedCommitDate: formattedCommitDate, latestToolUsage: latestToolUsage })),
+                React.createElement("div", { className: "lg:sticky lg:top-6 lg:self-start" },
+                    React.createElement(TerminalPanel, { sessionId: activeSessionId, isFullscreen: isTerminalFullscreen, onToggleFullscreen: () => setIsTerminalFullscreen((prev) => !prev), onExit: handleSessionExit, onError: (message) => setBanner({ type: "error", message: message ?? "不明なエラー" }) }))))));
 }
+// Helper functions
 function formatDate(value) {
-    if (!value) {
+    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);
+        }).format(new Date(value));
     }
-    catch (_err) {
+    catch {
         return value;
     }
 }
@@ -554,63 +354,15 @@ function formatError(error, fallback) {
     if (error instanceof ApiError) {
         return `${error.message}${error.details ? `\n${error.details}` : ""}`;
     }
-    if (error instanceof Error) {
+    if (error instanceof Error)
         return error.message;
-    }
     return fallback;
 }
 function toolLabel(tool, selectedTool) {
-    if (tool === "custom" && selectedTool?.target === "custom") {
+    if (tool === "custom" && selectedTool?.target === "custom")
         return selectedTool.label;
-    }
-    if (tool === "codex-cli") {
+    if (tool === "codex-cli")
         return "Codex CLI";
-    }
     return "Claude Code";
 }
-function renderArgs(args) {
-    if (!args || args.length === 0) {
-        return React.createElement("span", { className: "tool-card__muted" }, "\u672A\u8A2D\u5B9A");
-    }
-    return args.join(" ");
-}
-const SESSION_STATUS_LABEL = {
-    pending: "pending",
-    running: "running",
-    completed: "completed",
-    failed: "failed",
-};
-function renderToolUsage(usage) {
-    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) {
-    return formatDate(new Date(value).toISOString());
-}
-function mapToolLabel(toolId, toolLabel) {
-    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) {
-    return value
-        .split(/\s+/)
-        .map((chunk) => chunk.trim())
-        .filter(Boolean);
-}
 //# sourceMappingURL=BranchDetailPage.js.map