@dyyz1993/create-agent 1.9.0

package/templates/general/src/mainview/components/explorer/InlineInput.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useRef } from "react";
+
+interface InlineInputProps {
+  defaultValue?: string;
+  depth: number;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export function InlineInput({ defaultValue = "", depth, onSubmit, onCancel }: InlineInputProps) {
+  const ref = useRef<HTMLInputElement>(null);
+  const committed = useRef(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    // Select name part (before extension) if there's a dot
+    const dotIndex = defaultValue.lastIndexOf(".");
+    if (dotIndex > 0) {
+      el.setSelectionRange(0, dotIndex);
+    } else {
+      el.select();
+    }
+  }, [defaultValue]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      const val = ref.current?.value.trim();
+      committed.current = true;
+      if (val) onSubmit(val);
+      else onCancel();
+    } else if (e.key === "Escape") {
+      committed.current = true;
+      onCancel();
+    }
+  };
+
+  const handleBlur = () => {
+    if (!committed.current) onCancel();
+  };
+
+  return (
+    <div style={{ paddingLeft: `${depth * 16 + 24}px` }} className="py-0.5 pr-2">
+      <input
+        ref={ref}
+        type="text"
+        defaultValue={defaultValue}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        className="w-full px-1 py-0.5 text-xs bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] border border-[var(--color-accent)] rounded outline-none"
+      />
+    </div>
+  );
+}

package/templates/general/src/mainview/components/explorer/TreeNodeItem.tsx

@@ -0,0 +1,121 @@
+import { memo } from "react";
+import { ChevronRight, ChevronDown } from "lucide-react";
+import type { TreeNode, EditingNode } from "../../types";
+import { getFileIcon } from "../../utils/file-icon";
+import { InlineInput } from "./InlineInput";
+
+interface TreeNodeItemProps {
+  node: TreeNode;
+  depth: number;
+  selectedPath: string | null;
+  editingNode: EditingNode | null;
+  onToggle: (path: string) => void;
+  onOpenFile: (node: TreeNode) => void;
+  onContextMenu: (e: React.MouseEvent, node: TreeNode) => void;
+  onSubmitEdit: (value: string) => void;
+  onCancelEdit: () => void;
+}
+
+function TreeNodeItemInner({
+  node,
+  depth,
+  selectedPath,
+  editingNode,
+  onToggle,
+  onOpenFile,
+  onContextMenu,
+  onSubmitEdit,
+  onCancelEdit,
+}: TreeNodeItemProps) {
+  const isDir = node.type === "directory";
+  const isSelected = selectedPath === node.path;
+  const isRenaming = editingNode?.path === node.path && editingNode.type === "rename";
+  const isAddingChild =
+    isDir &&
+    node.expanded &&
+    editingNode?.path === node.path &&
+    (editingNode.type === "newFile" || editingNode.type === "newDir");
+
+  return (
+    <li>
+      <div
+        className={`flex items-center gap-1.5 px-2 py-0.5 text-xs rounded cursor-pointer transition-colors ${
+          isSelected ? "bg-[var(--color-accent)]/30 text-[var(--color-text-primary)]" : "hover:bg-[var(--color-bg-hover)]"
+        }`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={() => isDir ? onToggle(node.path) : onOpenFile(node)}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onContextMenu(e, node);
+        }}
+      >
+        {isDir ? (
+          node.expanded ? (
+            <ChevronDown className="w-3 h-3 text-[var(--color-text-placeholder)] shrink-0" />
+          ) : (
+            <ChevronRight className="w-3 h-3 text-[var(--color-text-placeholder)] shrink-0" />
+          )
+        ) : (
+          <span className="w-3 shrink-0" />
+        )}
+        {getFileIcon(node)}
+        {isRenaming ? (
+          <InlineInput
+            defaultValue={node.name}
+            depth={depth}
+            onSubmit={onSubmitEdit}
+            onCancel={onCancelEdit}
+          />
+        ) : (
+          <span className={`truncate ${isDir ? "text-blue-300 font-medium" : "text-[var(--color-text-secondary)]"}`}>
+            {node.name}
+          </span>
+        )}
+      </div>
+      {isDir && node.expanded && node.children && (
+        <ul>
+          {node.children.map((child) => (
+            <TreeNodeItem
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              selectedPath={selectedPath}
+              editingNode={editingNode}
+              onToggle={onToggle}
+              onOpenFile={onOpenFile}
+              onContextMenu={onContextMenu}
+              onSubmitEdit={onSubmitEdit}
+              onCancelEdit={onCancelEdit}
+            />
+          ))}
+          {isAddingChild && (
+            <InlineInput
+              depth={depth + 1}
+              onSubmit={onSubmitEdit}
+              onCancel={onCancelEdit}
+            />
+          )}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+export const TreeNodeItem = memo(TreeNodeItemInner, (prev, next) => {
+  // Fast path: same node reference and no editing state change
+  if (
+    prev.node === next.node &&
+    prev.selectedPath === next.selectedPath &&
+    prev.editingNode === next.editingNode &&
+    prev.depth === next.depth &&
+    prev.onToggle === next.onToggle &&
+    prev.onOpenFile === next.onOpenFile &&
+    prev.onContextMenu === next.onContextMenu &&
+    prev.onSubmitEdit === next.onSubmitEdit &&
+    prev.onCancelEdit === next.onCancelEdit
+  ) {
+    return true;
+  }
+  return false;
+});

package/templates/general/src/mainview/components/feed/FeedPanel.tsx

@@ -0,0 +1,248 @@
+import { useEffect } from "react";
+import { Rss, Send } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { apiClient } from "../../lib/api-client";
+import { useLogStore } from "../../stores/use-log-store";
+import { useConnectionStore } from "../../stores/use-connection-store";
+import { useFeedStore, useEventStreamStore, type SubEventType } from "../../stores/use-feed-store";
+import type { FeedCategory } from "../../../shared/modules/feed";
+
+const CATEGORIES: FeedCategory[] = ["tech", "news", "general"];
+const EVENT_TYPES: SubEventType[] = ["feed.update", "chat.message", "timer.tick"];
+const FILTER_PRESETS: Record<SubEventType, string[]> = {
+  "feed.update": ["", '{"category":"tech"}', '{"category":"news"}', '{"author":"alice"}'],
+  "chat.message": ["", '{"role":"user"}', '{"role":"assistant"}'],
+  "timer.tick": ["", '{"channel":"default"}'],
+};
+
+const CATEGORY_COLORS: Record<FeedCategory, string> = {
+  tech: "bg-blue-600/30 text-blue-300",
+  news: "bg-amber-600/30 text-amber-300",
+  general: "bg-green-600/30 text-green-300",
+};
+
+export function FeedPanel() {
+  const { t } = useTranslation();
+  const posts = useFeedStore((s) => s.posts);
+  const author = useFeedStore((s) => s.author);
+  const category = useFeedStore((s) => s.category);
+  const content = useFeedStore((s) => s.content);
+  const loading = useFeedStore((s) => s.loading);
+  const setAuthor = useFeedStore((s) => s.setAuthor);
+  const setCategory = useFeedStore((s) => s.setCategory);
+  const setContent = useFeedStore((s) => s.setContent);
+  const createPost = useFeedStore((s) => s.createPost);
+  const loadPosts = useFeedStore((s) => s.loadPosts);
+  const addPost = useFeedStore((s) => s.addPost);
+  const addLog = useLogStore((s) => s.addLog);
+  const ready = useConnectionStore((s) => s.ready);
+
+  // Event stream state
+  const entries = useEventStreamStore((s) => s.entries);
+  const activeEventType = useEventStreamStore((s) => s.activeEventType);
+  const activeFilter = useEventStreamStore((s) => s.activeFilter);
+  const subscribed = useEventStreamStore((s) => s.subscribed);
+  const setActiveEventType = useEventStreamStore((s) => s.setActiveEventType);
+  const setActiveFilter = useEventStreamStore((s) => s.setActiveFilter);
+  const handleSubscribe = useEventStreamStore((s) => s.handleSubscribe);
+  const handleUnsubscribe = useEventStreamStore((s) => s.handleUnsubscribe);
+
+  // On ready: subscribe to feed.update (no filter) + load posts
+  useEffect(() => {
+    if (!ready) return;
+
+    let subId: string | null = null;
+
+    const setup = async () => {
+      // Subscribe to all feed updates (no filter) to populate feed list
+      subId = await apiClient.subscribe("feed.update", (payload) => {
+        addPost(payload as typeof posts[number]);
+      }, {});
+      addLog("Subscribed to feed.update (no filter)");
+
+      await loadPosts();
+    };
+    setup();
+
+    return () => {
+      if (subId) apiClient.unsubscribe(subId);
+    };
+  }, [ready, addLog, loadPosts, addPost]);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
+        <h2 className="text-sm font-semibold flex items-center gap-1.5">
+          <Rss className="w-4 h-4 text-[var(--color-text-accent)]" />
+          {t("feed.title")}
+          {posts.length > 0 && (
+            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+              {posts.length}
+            </span>
+          )}
+        </h2>
+      </div>
+
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {/* Create Post */}
+        <div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
+          <div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">{t("feed.newPost")}</div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={author}
+              onChange={(e) => setAuthor(e.target.value)}
+              placeholder={t("feed.authorPlaceholder")}
+              className="w-24 px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+            />
+            <select
+              value={category}
+              onChange={(e) => setCategory(e.target.value as FeedCategory)}
+              className="px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
+            >
+              {CATEGORIES.map((c) => (
+                <option key={c} value={c}>{c}</option>
+              ))}
+            </select>
+          </div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && createPost()}
+              placeholder={t("feed.postPlaceholder")}
+              className="flex-1 px-3 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+            />
+            <button
+              onClick={createPost}
+              disabled={loading || !content.trim()}
+              className="px-3 py-1.5 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 rounded transition-colors flex items-center gap-1"
+            >
+              <Send className="w-3 h-3" />
+              {t("feed.post")}
+            </button>
+          </div>
+        </div>
+
+        {/* Subscription Panel */}
+        <div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
+          <div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">{t("feed.subscribeWithFilter")}</div>
+          <div className="flex gap-2 items-center">
+            <select
+              value={activeEventType}
+              onChange={(e) => {
+                setActiveEventType(e.target.value as SubEventType);
+                setActiveFilter("");
+              }}
+              className="px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
+            >
+              {EVENT_TYPES.map((t) => (
+                <option key={t} value={t}>{t}</option>
+              ))}
+            </select>
+            <input
+              type="text"
+              value={activeFilter}
+              onChange={(e) => setActiveFilter(e.target.value)}
+              placeholder={t("feed.filterPlaceholder")}
+              className="flex-1 px-2 py-1.5 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none font-mono"
+            />
+            {!subscribed ? (
+              <button
+                onClick={handleSubscribe}
+                className="px-3 py-1.5 text-xs bg-green-600 hover:bg-green-700 rounded transition-colors whitespace-nowrap"
+              >
+                {t("feed.subscribe")}
+              </button>
+            ) : (
+              <button
+                onClick={handleUnsubscribe}
+                className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors whitespace-nowrap"
+              >
+                {t("feed.unsubscribe")}
+              </button>
+            )}
+          </div>
+          {/* Filter presets */}
+          <div className="flex gap-1 flex-wrap">
+            {FILTER_PRESETS[activeEventType].map((preset) => (
+              <button
+                key={preset}
+                onClick={() => setActiveFilter(preset)}
+                className={`px-2 py-0.5 text-[10px] rounded border transition-colors ${
+                  activeFilter === preset
+                    ? "border-[var(--color-accent)] bg-[var(--color-accent)]/30 text-[var(--color-text-accent)]"
+                    : "border-[var(--color-border-secondary)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-secondary)]"
+                }`}
+              >
+                {preset || t("feed.noFilter")}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Event Stream */}
+        {entries.length > 0 && (
+          <div className="bg-[var(--color-bg-secondary)] rounded-lg p-3 space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wider">
+                {t("feed.eventStream")}
+              </div>
+              {subscribed && (
+                <span className="px-1.5 py-0.5 bg-green-600/30 text-green-400 rounded text-[10px] animate-pulse">
+                  {t("feed.live")}
+                </span>
+              )}
+            </div>
+            <div className="max-h-48 overflow-y-auto space-y-1">
+              {entries.slice(-20).map((entry) => (
+                <div key={entry.id} className="bg-[var(--color-bg-tertiary)] rounded px-2 py-1.5 text-[11px] font-mono">
+                  <div className="flex items-center gap-2 text-[var(--color-text-tertiary)]">
+                    <span className="text-[var(--color-text-accent)]">{entry.eventType}</span>
+                    <span className="text-[10px]">
+                      {Object.keys(entry.filter).length > 0
+                        ? `filter: ${JSON.stringify(entry.filter)}`
+                        : t("feed.noFilter")}
+                    </span>
+                    <span className="text-[10px] ml-auto">
+                      {new Date(entry.timestamp).toLocaleTimeString()}
+                    </span>
+                  </div>
+                  <pre className="text-cyan-300 mt-0.5 whitespace-pre-wrap break-all">
+                    {JSON.stringify(entry.payload, null, 0)}
+                  </pre>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Feed Posts */}
+        {posts.length === 0 ? (
+          <div className="flex items-center justify-center py-8 text-[var(--color-text-placeholder)] text-xs">
+            {t("feed.noPostsYet")}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {posts.slice().reverse().map((post) => (
+              <div key={post.id} className="bg-[var(--color-bg-secondary)] rounded-lg p-3">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-xs font-medium text-[var(--color-text-primary)]">{post.author}</span>
+                  <span className={`px-1.5 py-0.5 rounded text-[10px] ${CATEGORY_COLORS[post.category]}`}>
+                    {post.category}
+                  </span>
+                  <span className="text-[10px] text-[var(--color-text-placeholder)] ml-auto">
+                    {new Date(post.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+                <div className="text-xs text-[var(--color-text-secondary)]">{post.content}</div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/general/src/mainview/components/file-preview/FilePreviewOverlay.tsx

@@ -0,0 +1,55 @@
+import { FileText, X } from "lucide-react";
+import type { FilePreview } from "../../types";
+import { formatSize } from "../../utils/file-utils";
+import { VirtualizedCodeView } from "./VirtualizedCodeView";
+
+interface FilePreviewOverlayProps {
+  preview: FilePreview;
+  loading: boolean;
+  onClose: () => void;
+}
+
+export function FilePreviewOverlay({ preview, loading, onClose }: FilePreviewOverlayProps) {
+  return (
+    <div className="absolute inset-0 z-10 bg-[var(--color-bg-primary)]/95 flex flex-col overflow-hidden">
+      <div className="flex items-center justify-between px-4 py-2 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex-shrink-0">
+        <div className="flex items-center gap-2">
+          <FileText className="w-4 h-4 text-[var(--color-text-tertiary)]" />
+          <span className="text-sm font-medium text-[var(--color-text-secondary)]">{preview.name}</span>
+          {preview.size > 0 && (
+            <span className="text-xs text-[var(--color-text-placeholder)]">{formatSize(preview.size)}</span>
+          )}
+          {preview.totalLines != null && (
+            <span className="text-xs text-[var(--color-text-placeholder)]">{preview.totalLines} lines</span>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] p-1 rounded hover:bg-[var(--color-bg-hover)] transition-colors"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* File content — flex-col so VirtualizedCodeView's flex-1 works */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        {loading ? (
+          <div className="flex items-center justify-center h-full text-[var(--color-text-tertiary)] text-sm">
+            <div className="w-5 h-5 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mr-2" />
+            Loading...
+          </div>
+        ) : preview.isImage && preview.imageUrl ? (
+          <div className="flex items-center justify-center h-full p-4 bg-[#1a1a2e]">
+            <img
+              src={preview.imageUrl}
+              alt={preview.name}
+              className="max-w-full max-h-full object-contain rounded"
+            />
+          </div>
+        ) : preview.content ? (
+          <VirtualizedCodeView code={preview.content} filename={preview.name} />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/templates/general/src/mainview/components/file-preview/VirtualizedCodeView.tsx

@@ -0,0 +1,99 @@
+import { useRef, useMemo } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Highlight, themes } from "prism-react-renderer";
+import { getLanguage } from "../../utils/file-utils";
+
+interface VirtualizedCodeViewProps {
+  code: string;
+  filename: string;
+}
+
+/** Lines longer than this skip syntax highlighting (plain text instead) */
+const LONG_LINE_THRESHOLD = 5000;
+
+export function VirtualizedCodeView({ code, filename }: VirtualizedCodeViewProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const language = getLanguage(filename);
+  const lines = useMemo(() => code.split("\n"), [code]);
+
+  // Detect minified files: avg line length > 500 chars
+  const avgLineLength = code.length / Math.max(lines.length, 1);
+  const usePlainText = !language || avgLineLength > 500;
+
+  const virtualizer = useVirtualizer({
+    count: lines.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 20,
+    overscan: 20,
+  });
+
+  // --- Plain text path: no Prism tokenization ---
+  if (usePlainText) {
+    return (
+      <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
+        <div
+          style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+        >
+          {virtualizer.getVirtualItems().map((vr) => (
+            <div
+              key={vr.key}
+              style={{
+                position: "absolute", top: 0, left: 0, width: "100%",
+                height: `${vr.size}px`, transform: `translateY(${vr.start}px)`,
+              }}
+              className="flex text-xs leading-5 font-mono"
+            >
+              <span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+                {vr.index + 1}
+              </span>
+              <span className="flex-1 text-gray-300 whitespace-pre">{lines[vr.index]}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // --- Highlighted path: tokenize ONCE for the whole file, virtualize rendering ---
+  return (
+    <Highlight theme={themes.nightOwl} code={code} language={language}>
+      {({ tokens, getTokenProps }) => (
+        <div ref={parentRef} className="flex-1 min-h-0 overflow-auto" style={{ background: "#011627" }}>
+          <div
+            style={{ height: `${virtualizer.getTotalSize()}px`, width: "100%", position: "relative" }}
+          >
+            {virtualizer.getVirtualItems().map((vr) => {
+              const lineTokens = tokens[vr.index];
+              const lineText = lines[vr.index];
+              const isLongLine = (lineText?.length ?? 0) > LONG_LINE_THRESHOLD;
+
+              return (
+                <div
+                  key={vr.key}
+                  style={{
+                    position: "absolute", top: 0, left: 0, width: "100%",
+                    height: `${vr.size}px`, transform: `translateY(${vr.start}px)`,
+                  }}
+                  className="flex text-xs leading-5 font-mono"
+                >
+                  <span className="inline-block w-10 text-right pr-4 text-gray-600 select-none shrink-0">
+                    {vr.index + 1}
+                  </span>
+                  {isLongLine ? (
+                    <span className="flex-1 text-gray-300 whitespace-pre">{lineText}</span>
+                  ) : (
+                    <span className="flex-1">
+                      {lineTokens.map((token, key) => (
+                        <span key={key} {...getTokenProps({ token })} />
+                      ))}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </Highlight>
+  );
+}

package/templates/general/src/mainview/components/git/GitBranchSelector.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useCallback, useRef } from "react";
+import { GitBranch as BranchIcon, Check } from "lucide-react";
+import { useGitStore, type GitBranch } from "../../stores/use-git-store";
+import { useExplorerStore } from "../../stores/use-explorer-store";
+
+/**
+ * Branch selector popup — lists local/remote branches with checkout action.
+ * Self-contained: only depends on useGitStore + useExplorerStore.
+ */
+interface GitBranchSelectorProps {
+  onClose: () => void;
+}
+
+export function GitBranchSelector({ onClose }: GitBranchSelectorProps) {
+  const branches = useGitStore((s) => s.branches);
+  const loadingBranches = useGitStore((s) => s.loadingBranches);
+  const loadingAction = useGitStore((s) => s.loadingAction);
+  const fetchBranches = useGitStore((s) => s.fetchBranches);
+  const checkout = useGitStore((s) => s.checkout);
+  const currentPath = useExplorerStore((s) => s.currentPath);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetchBranches(currentPath);
+  }, [fetchBranches, currentPath]);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [onClose]);
+
+  const handleCheckout = useCallback((branch: GitBranch) => {
+    if (branch.isCurrent) return;
+    const name = branch.isRemote ? branch.name.split("/").slice(1).join("/") : branch.name;
+    if (!name) return;
+    checkout(currentPath, name);
+    onClose();
+  }, [checkout, currentPath, onClose]);
+
+  const localBranches = branches.filter((b) => !b.isRemote);
+  const remoteBranches = branches.filter((b) => b.isRemote);
+
+  const renderBranch = (b: GitBranch) => (
+    <button
+      key={b.name}
+      className={`w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors ${
+        b.isCurrent ? "text-[var(--color-text-accent)]" : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]"
+      }`}
+      onClick={() => handleCheckout(b)}
+      disabled={loadingAction === "checkout"}
+    >
+      {b.isCurrent && <Check className="w-3 h-3 shrink-0" />}
+      {!b.isCurrent && <span className="w-3 shrink-0" />}
+      <BranchIcon className="w-3 h-3 shrink-0" />
+      <span className="truncate">{b.isRemote ? b.name.split("/").slice(1).join("/") : b.name}</span>
+    </button>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-50 w-56 max-h-64 overflow-y-auto bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-md shadow-xl py-1"
+      style={{ /* positioned by parent via absolute */ }}
+    >
+      {loadingBranches ? (
+        <div className="text-[var(--color-text-placeholder)] text-xs text-center py-4">Loading branches...</div>
+      ) : (
+        <>
+          {localBranches.length > 0 && (
+            <>
+              <div className="px-3 py-1 text-[10px] uppercase tracking-wide text-[var(--color-text-placeholder)] font-semibold">Local</div>
+              {localBranches.map(renderBranch)}
+            </>
+          )}
+          {remoteBranches.length > 0 && (
+            <>
+              <div className="px-3 py-1 mt-1 text-[10px] uppercase tracking-wide text-[var(--color-text-placeholder)] font-semibold border-t border-[var(--color-border-primary)] pt-1">Remote</div>
+              {remoteBranches.map(renderBranch)}
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}