@dyyz1993/create-agent 1.9.0

package/templates/agent/src/mainview/components/rules/RulesPanel.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Plus, Trash2, Shield, CheckCircle2, Circle } from "lucide-react";
+import { useRulesStore } from "../../stores/use-rules-store";
+
+export function RulesPanel() {
+  const { t } = useTranslation();
+  const [showForm, setShowForm] = useState(false);
+  const [name, setName] = useState("");
+  const [pattern, setPattern] = useState("");
+  const rules = useRulesStore((s) => s.rules);
+  const fetchRules = useRulesStore((s) => s.fetchRules);
+  const addRule = useRulesStore((s) => s.addRule);
+  const toggleRule = useRulesStore((s) => s.toggleRule);
+  const removeRule = useRulesStore((s) => s.removeRule);
+
+  useEffect(() => {
+    fetchRules();
+  }, [fetchRules]);
+
+  const handleAdd = () => {
+    if (!name.trim() || !pattern.trim()) return;
+    addRule(name.trim(), pattern.trim());
+    setName("");
+    setPattern("");
+    setShowForm(false);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-3 border-b border-[var(--color-border-primary)] flex items-center justify-between">
+        <div className="flex items-center gap-2 text-sm text-[var(--color-text-secondary)]">
+          <Shield className="w-4 h-4" />
+          {t("rules.title")}
+        </div>
+        <button
+          onClick={() => setShowForm(!showForm)}
+          className="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded text-[var(--color-text-primary)]"
+        >
+          <Plus className="w-3 h-3" />
+          {t("rules.add")}
+        </button>
+      </div>
+
+      {showForm && (
+        <div className="p-3 border-b border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)] flex flex-col gap-2">
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder={t("rules.namePlaceholder")}
+            className="bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+          />
+          <input
+            type="text"
+            value={pattern}
+            onChange={(e) => setPattern(e.target.value)}
+            placeholder={t("rules.patternPlaceholder")}
+            className="bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm font-mono border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+          />
+          <button
+            onClick={handleAdd}
+            disabled={!name.trim() || !pattern.trim()}
+            className="self-end px-3 py-1 text-xs bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded text-white"
+          >
+            {t("rules.save")}
+          </button>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto p-3">
+        {rules.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-gray-600">
+            <Shield className="w-12 h-12 mb-3 opacity-30" />
+            <span className="text-sm">{t("rules.empty")}</span>
+            <span className="text-xs mt-1">{t("rules.emptyHint")}</span>
+          </div>
+        ) : (
+          <div className="space-y-2.5">
+            {rules.map((rule) => (
+              <div
+                key={rule.id}
+                onClick={() => toggleRule(rule.id)}
+                className="group relative bg-[var(--color-bg-secondary)]/60 border border-[var(--color-border-primary)]/80 rounded-lg p-3 cursor-pointer hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-border-secondary)] transition-all"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex items-center gap-2 min-w-0 flex-1">
+                    {rule.enabled ? (
+                      <CheckCircle2 className="w-4 h-4 text-[var(--color-text-success)] flex-shrink-0 mt-0.5" />
+                    ) : (
+                      <Circle className="w-4 h-4 text-[var(--color-text-placeholder)] flex-shrink-0 mt-0.5" />
+                    )}
+                    <span className={`font-semibold text-sm truncate ${rule.enabled ? "text-[var(--color-text-secondary)]" : "text-[var(--color-text-placeholder)]"}`}>
+                      {rule.name}
+                    </span>
+                  </div>
+                  <code className="text-[11px] font-mono text-[var(--color-text-placeholder)] bg-[var(--color-bg-primary)]/80 px-1.5 py-0.5 rounded flex-shrink-0 hidden sm:block">
+                    {rule.pattern}
+                  </code>
+                  <button
+                    onClick={(e) => { e.stopPropagation(); removeRule(rule.id); }}
+                    className="text-gray-600 hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+                <p className={`text-xs mt-1.5 ml-6 ${rule.enabled ? "text-[var(--color-text-tertiary)]" : "text-gray-600"}`}>
+                  {t("rules.pattern")} <code className="font-mono text-[var(--color-text-placeholder)]">{rule.pattern}</code>
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/rules/__tests__/RulesPanel.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockAddRule = vi.fn();
+const mockToggleRule = vi.fn();
+const mockRemoveRule = vi.fn();
+const mockFetchRules = vi.fn();
+
+vi.mock("../../../stores/use-rules-store", () => ({
+  useRulesStore: (selector: any) =>
+    selector({
+      rules: [
+        { id: "1", name: "No Console", pattern: "*.ts", enabled: true },
+        { id: "2", name: "Test Rule", pattern: "*.test.*", enabled: false },
+      ],
+      fetchRules: mockFetchRules,
+      addRule: mockAddRule,
+      toggleRule: mockToggleRule,
+      removeRule: mockRemoveRule,
+    }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("RulesPanel", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render rules title", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    expect(screen.getByText("rules.title")).toBeDefined();
+  });
+
+  it("should render add button", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    expect(screen.getByText("rules.add")).toBeDefined();
+  });
+
+  it("should display rule items", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    expect(screen.getByText("No Console")).toBeDefined();
+    expect(screen.getByText("Test Rule")).toBeDefined();
+  });
+
+  it("should call fetchRules on mount", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    expect(mockFetchRules).toHaveBeenCalled();
+  });
+
+  it("should show form when add button is clicked", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    fireEvent.click(screen.getByText("rules.add"));
+    expect(screen.getByPlaceholderText("rules.namePlaceholder")).toBeDefined();
+    expect(screen.getByPlaceholderText("rules.patternPlaceholder")).toBeDefined();
+  });
+
+  it("should call addRule on form submit", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    fireEvent.click(screen.getByText("rules.add"));
+    fireEvent.change(screen.getByPlaceholderText("rules.namePlaceholder"), { target: { value: "New Rule" } });
+    fireEvent.change(screen.getByPlaceholderText("rules.patternPlaceholder"), { target: { value: "*.js" } });
+    fireEvent.click(screen.getByText("rules.save"));
+    expect(mockAddRule).toHaveBeenCalledWith("New Rule", "*.js");
+  });
+
+  it("should call toggleRule on rule click", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    fireEvent.click(screen.getByText("No Console"));
+    expect(mockToggleRule).toHaveBeenCalledWith("1");
+  });
+
+  it("should render rule patterns", async () => {
+    const { RulesPanel } = await import("../RulesPanel");
+    render(<RulesPanel />);
+    const patterns = screen.getAllByText("*.ts");
+    expect(patterns.length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("*.test.*").length).toBeGreaterThanOrEqual(1);
+  });
+});

package/templates/agent/src/mainview/components/search/SearchPanel.tsx

@@ -0,0 +1,404 @@
+import { useState, useCallback, useRef, useEffect } from "react";
+import {
+  Search,
+  CaseSensitive,
+  WholeWord,
+  Regex,
+  FileText,
+  ChevronRight,
+  ChevronDown,
+  Loader2,
+  X,
+} from "lucide-react";
+import { apiClient } from "../../lib/api-client";
+import { useExplorerStore } from "../../stores/use-explorer-store";
+import type { TreeNode } from "../../types";
+
+interface SearchMatch {
+  file: string;
+  line: number;
+  column: number;
+  text: string;
+  highlightStart: number;
+  highlightEnd: number;
+}
+
+interface FileGroup {
+  filePath: string;
+  relativePath: string;
+  matches: SearchMatch[];
+  expanded: boolean;
+}
+
+const SKIP_DIRS = new Set([
+  "node_modules",
+  ".git",
+  "dist",
+  "build",
+  ".next",
+  ".nuxt",
+  "coverage",
+  ".cache",
+  ".turbo",
+  ".vercel",
+  "out",
+  ".output",
+]);
+
+const TEXT_EXTENSIONS = new Set([
+  "ts", "tsx", "js", "jsx", "mjs", "cjs",
+  "json", "md", "mdx", "yaml", "yml", "toml",
+  "css", "scss", "less", "sass",
+  "html", "htm", "xml", "svg",
+  "py", "rb", "go", "rs", "java", "kt", "swift", "c", "cpp", "h", "hpp",
+  "sh", "bash", "zsh", "fish",
+  "sql", "graphql", "gql",
+  "txt", "csv", "env", "gitignore", "eslintrc", "prettierrc",
+  "conf", "ini", "cfg", "log",
+  "vue", "svelte",
+]);
+
+function isTextFile(name: string): boolean {
+  const dotIdx = name.lastIndexOf(".");
+  if (dotIdx === -1) return false;
+  const ext = name.slice(dotIdx + 1).toLowerCase();
+  if (TEXT_EXTENSIONS.has(ext)) return true;
+  if (name.startsWith(".") && TEXT_EXTENSIONS.has(name.slice(1))) return true;
+  return false;
+}
+
+function buildSearchRegex(query: string, caseSensitive: boolean, wholeWord: boolean, useRegex: boolean): RegExp {
+  let pattern = useRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  if (wholeWord) pattern = `\\b${pattern}\\b`;
+  return new RegExp(pattern, caseSensitive ? "g" : "gi");
+}
+
+export function SearchPanel() {
+  const [query, setQuery] = useState("");
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [wholeWord, setWholeWord] = useState(false);
+  const [useRegex, setUseRegex] = useState(false);
+  const [results, setResults] = useState<FileGroup[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [totalMatches, setTotalMatches] = useState(0);
+  const [filesSearched, setFilesSearched] = useState(0);
+  const [hasSearched, setHasSearched] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const abortRef = useRef(false);
+
+  const currentPath = useExplorerStore((s) => s.currentPath);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const collectFiles = useCallback(async (dirPath: string): Promise<string[]> => {
+    const files: string[] = [];
+    const queue = [dirPath];
+
+    while (queue.length > 0 && !abortRef.current) {
+      const current = queue.shift()!;
+      try {
+        const res = await apiClient.call("file.listDir", { path: current });
+        for (const entry of res.entries) {
+          if (abortRef.current) break;
+          if (entry.name.startsWith(".") && entry.name !== ".env" && entry.name !== ".env.local") continue;
+          if (entry.type === "directory") {
+            if (!SKIP_DIRS.has(entry.name)) queue.push(entry.path);
+          } else if (isTextFile(entry.name)) {
+            files.push(entry.path);
+          }
+        }
+      } catch {
+        // skip unreadable dirs
+      }
+    }
+    return files;
+  }, []);
+
+  const performSearch = useCallback(async () => {
+    if (!query.trim() || !currentPath) return;
+
+    abortRef.current = false;
+    setIsSearching(true);
+    setHasSearched(true);
+    setResults([]);
+    setTotalMatches(0);
+
+    try {
+      const regex = buildSearchRegex(query.trim(), caseSensitive, wholeWord, useRegex);
+      const filePaths = await collectFiles(currentPath);
+      const matchMap = new Map<string, SearchMatch[]>();
+      let matchCount = 0;
+
+      for (const fp of filePaths) {
+        if (abortRef.current) break;
+        try {
+          const res = await apiClient.call("file.readFile", { path: fp });
+          const lines = res.content.split("\n");
+          for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            regex.lastIndex = 0;
+            const m = regex.exec(line);
+            if (m) {
+              if (!matchMap.has(fp)) matchMap.set(fp, []);
+              matchMap.get(fp)!.push({
+                file: fp,
+                line: i + 1,
+                column: m.index + 1,
+                text: line,
+                highlightStart: m.index,
+                highlightEnd: m.index + m[0].length,
+              });
+              matchCount++;
+            }
+          }
+        } catch {
+          // skip unreadable files
+        }
+      }
+
+      setFilesSearched(filePaths.length);
+
+      const rootPath = currentPath.endsWith("/") ? currentPath : currentPath + "/";
+      const groups: FileGroup[] = [];
+      for (const [filePath, matches] of matchMap) {
+        groups.push({
+          filePath,
+          relativePath: filePath.startsWith(rootPath) ? filePath.slice(rootPath.length) : filePath,
+          matches,
+          expanded: true,
+        });
+      }
+
+      setResults(groups);
+      setTotalMatches(matchCount);
+    } catch {
+      // search error
+    } finally {
+      setIsSearching(false);
+    }
+  }, [query, caseSensitive, wholeWord, useRegex, currentPath, collectFiles]);
+
+  const cancelSearch = useCallback(() => {
+    abortRef.current = true;
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && !isSearching) {
+        performSearch();
+      }
+      if (e.key === "Escape") {
+        setQuery("");
+        inputRef.current?.focus();
+      }
+    },
+    [performSearch, isSearching],
+  );
+
+  const toggleGroup = useCallback((index: number) => {
+    setResults((prev) => prev.map((g, i) => (i === index ? { ...g, expanded: !g.expanded } : g)));
+  }, []);
+
+  const handleOpenFile = useCallback((filePath: string, _line: number) => {
+    const node: TreeNode = {
+      name: filePath.split("/").pop() || filePath,
+      path: filePath,
+      type: "file",
+    };
+    useExplorerStore.getState().openFile(node);
+  }, []);
+
+  const modKey = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.userAgent) ? "⌘" : "Ctrl";
+
+  return (
+    <div className="flex flex-col h-full bg-[var(--color-bg-primary)]">
+      {/* Header */}
+      <div className="px-3 py-2 text-xs font-semibold text-[var(--color-text-tertiary)] uppercase tracking-wide border-b border-[var(--color-border-primary)] flex items-center justify-between flex-shrink-0">
+        <div className="flex items-center gap-1.5">
+          <Search className="w-3.5 h-3.5" />
+          Search
+        </div>
+        <kbd className="px-1.5 py-0.5 text-[10px] text-[var(--color-text-placeholder)] bg-[var(--color-bg-secondary)] border border-[var(--color-border-primary)] rounded font-mono">
+          {modKey}⇧F
+        </kbd>
+      </div>
+
+      {/* Search input */}
+      <div className="p-2 border-b border-[var(--color-border-primary)] flex-shrink-0">
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--color-text-placeholder)]" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Search in files..."
+            className="w-full pl-7 pr-7 py-1.5 text-xs bg-[var(--color-bg-secondary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+          />
+          {query && (
+            <button
+              onClick={() => {
+                setQuery("");
+                inputRef.current?.focus();
+              }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+
+        {/* Toggle buttons */}
+        <div className="flex items-center gap-0.5 mt-1.5">
+          <button
+            onClick={() => setCaseSensitive((v) => !v)}
+            className={`p-1 rounded text-xs transition-colors ${
+              caseSensitive
+                ? "bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50"
+                : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent"
+            }`}
+            title="Match Case"
+          >
+            <CaseSensitive className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={() => setWholeWord((v) => !v)}
+            className={`p-1 rounded text-xs transition-colors ${
+              wholeWord
+                ? "bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50"
+                : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent"
+            }`}
+            title="Match Whole Word"
+          >
+            <WholeWord className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={() => setUseRegex((v) => !v)}
+            className={`p-1 rounded text-xs transition-colors ${
+              useRegex
+                ? "bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] border border-[var(--color-accent)]/50"
+                : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)] border border-transparent"
+            }`}
+            title="Use Regular Expression"
+          >
+            <Regex className="w-3.5 h-3.5" />
+          </button>
+
+          <div className="flex-1" />
+
+          {isSearching ? (
+            <button
+              onClick={cancelSearch}
+              className="px-2 py-1 text-xs text-[var(--color-text-error)] hover:text-red-300 transition-colors flex items-center gap-1"
+            >
+              <Loader2 className="w-3 h-3 animate-spin" />
+              Cancel
+            </button>
+          ) : (
+            query.trim() && (
+              <button
+                onClick={performSearch}
+                className="px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors"
+              >
+                Search
+              </button>
+            )
+          )}
+        </div>
+      </div>
+
+      {/* Results header */}
+      {hasSearched && !isSearching && (
+        <div className="px-3 py-1.5 text-[11px] text-[var(--color-text-placeholder)] border-b border-[var(--color-bg-secondary)] flex-shrink-0">
+          {totalMatches > 0 ? (
+            <>
+              <span className="text-[var(--color-text-accent)] font-medium">{totalMatches}</span> result{totalMatches !== 1 && "s"} in{" "}
+              <span className="text-[var(--color-text-accent)] font-medium">{results.length}</span> file
+              {results.length !== 1 && "s"}
+              <span className="ml-2 text-gray-600">({filesSearched} files searched)</span>
+            </>
+          ) : (
+            "No results found"
+          )}
+        </div>
+      )}
+
+      {/* Loading state */}
+      {isSearching && (
+        <div className="flex items-center justify-center py-8 text-[var(--color-text-placeholder)] text-sm flex-shrink-0">
+          <Loader2 className="w-4 h-4 animate-spin mr-2" />
+          Searching...
+        </div>
+      )}
+
+      {/* Results list */}
+      <div className="flex-1 overflow-y-auto">
+        {!hasSearched && !isSearching ? (
+          <div className="flex flex-col items-center justify-center h-full text-gray-600 text-xs px-4">
+            <Search className="w-8 h-8 mb-2 text-gray-700" />
+            <p>Type a search term and press Enter</p>
+            <p className="mt-1 text-gray-700">
+              {modKey}+Shift+F to focus search
+            </p>
+          </div>
+        ) : !isSearching && totalMatches === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-gray-600 text-xs px-4">
+            <FileText className="w-8 h-8 mb-2 text-gray-700" />
+            <p>No results for "{query}"</p>
+            <p className="mt-1 text-gray-700">Try different search terms</p>
+          </div>
+        ) : (
+          <div className="py-1">
+            {results.map((group, gi) => (
+              <div key={group.filePath}>
+                {/* File group header */}
+                <button
+                  onClick={() => toggleGroup(gi)}
+                  className="w-full flex items-center gap-1 px-2 py-1 text-xs hover:bg-[var(--color-bg-secondary)] transition-colors text-left"
+                >
+                  {group.expanded ? (
+                    <ChevronDown className="w-3 h-3 text-[var(--color-text-placeholder)] flex-shrink-0" />
+                  ) : (
+                    <ChevronRight className="w-3 h-3 text-[var(--color-text-placeholder)] flex-shrink-0" />
+                  )}
+                  <FileText className="w-3.5 h-3.5 text-[var(--color-text-placeholder)] flex-shrink-0" />
+                  <span className="text-[var(--color-text-secondary)] truncate flex-1">{group.relativePath}</span>
+                  <span className="text-[10px] text-gray-600 flex-shrink-0 ml-1">
+                    {group.matches.length}
+                  </span>
+                </button>
+
+                {/* Individual matches */}
+                {group.expanded && (
+                  <div className="ml-4">
+                    {group.matches.map((match, mi) => (
+                      <button
+                        key={mi}
+                        onClick={() => handleOpenFile(match.file, match.line)}
+                        className="w-full text-left px-2 py-0.5 text-[11px] hover:bg-[var(--color-bg-secondary)] transition-colors group flex items-start gap-2"
+                      >
+                        <span className="text-gray-600 w-6 text-right flex-shrink-0 select-none pt-px">
+                          {match.line}
+                        </span>
+                        <span className="text-[var(--color-text-tertiary)] truncate font-mono leading-relaxed">
+                          {match.text.slice(0, match.highlightStart)}
+                          <span className="bg-[var(--color-accent)]/40 text-[var(--color-text-accent)]">
+                            {match.text.slice(match.highlightStart, match.highlightEnd)}
+                          </span>
+                          {match.text.slice(match.highlightEnd)}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/search/__tests__/SearchPanel.test.tsx

@@ -0,0 +1,50 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+vi.mock("../../../stores/use-explorer-store", () => ({
+  useExplorerStore: (selector: any) =>
+    selector({ currentPath: "/project" }),
+}));
+
+vi.mock("../../../lib/api-client", () => ({
+  apiClient: { call: vi.fn() },
+}));
+
+describe("SearchPanel", () => {
+  afterEach(cleanup);
+
+  it("should render search header", async () => {
+    const { SearchPanel } = await import("../SearchPanel");
+    render(<SearchPanel />);
+    expect(screen.getByText("Search")).toBeDefined();
+  });
+
+  it("should render search input", async () => {
+    const { SearchPanel } = await import("../SearchPanel");
+    render(<SearchPanel />);
+    expect(screen.getByPlaceholderText("Search in files...")).toBeDefined();
+  });
+
+  it("should render keyboard shortcut hint", async () => {
+    const { SearchPanel } = await import("../SearchPanel");
+    render(<SearchPanel />);
+    const kbd = document.querySelector("kbd");
+    expect(kbd).not.toBeNull();
+    expect(kbd?.textContent).toMatch(/[⌘Ctrl]/);
+  });
+
+  it("should render toggle buttons for case/word/regex", async () => {
+    const { SearchPanel } = await import("../SearchPanel");
+    render(<SearchPanel />);
+    expect(screen.getByTitle("Match Case")).toBeDefined();
+    expect(screen.getByTitle("Match Whole Word")).toBeDefined();
+    expect(screen.getByTitle("Use Regular Expression")).toBeDefined();
+  });
+
+  it("should show initial empty state before search", async () => {
+    const { SearchPanel } = await import("../SearchPanel");
+    render(<SearchPanel />);
+    expect(screen.getByText("Type a search term and press Enter")).toBeDefined();
+  });
+});

package/templates/agent/src/mainview/components/sidebar/PinButton.tsx

@@ -0,0 +1,20 @@
+import { Pin, PinOff } from "lucide-react";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+
+export function PinButton() {
+  const isPinned = useSidebarStore((s) => s.isPinned);
+  const setPinned = useSidebarStore((s) => s.setPinned);
+  const isMobile = useSidebarStore((s) => s.breakpoint) === "mobile";
+
+  if (isMobile) return null;
+
+  return (
+    <button
+      onClick={() => setPinned(!isPinned)}
+      title={isPinned ? "Unpin sidebar" : "Pin sidebar"}
+      className="text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] transition-colors"
+    >
+      {isPinned ? <PinOff className="w-3 h-3" /> : <Pin className="w-3 h-3" />}
+    </button>
+  );
+}