@dyyz1993/create-agent 1.9.0

package/templates/general/src/mainview/__tests__/components/FeedPanel.test.tsx

@@ -0,0 +1,109 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { FeedPanel } from "../../components/feed/FeedPanel";
+import { useFeedStore, useEventStreamStore } from "../../stores/use-feed-store";
+import { act } from "@testing-library/react";
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({ posts: [] }),
+    subscribe: vi.fn().mockResolvedValue("sub-1"),
+    unsubscribe: vi.fn(),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: Object.assign(
+    (s: (state: { addLog: () => void }) => unknown) => s({ addLog: vi.fn() }),
+    { getState: () => ({ addLog: vi.fn() }) }
+  ),
+}));
+
+vi.mock("../../stores/use-connection-store", () => ({
+  useConnectionStore: Object.assign(
+    (s: (state: { ready: boolean }) => unknown) => s({ ready: true }),
+    { getState: () => ({ ready: true }) }
+  ),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        "feed.title": "Feed",
+        "feed.newPost": "New Post",
+        "feed.authorPlaceholder": "Author",
+        "feed.postPlaceholder": "Write a post...",
+        "feed.post": "Post",
+        "feed.noPostsYet": "No posts yet",
+        "feed.subscribeWithFilter": "Subscribe",
+        "feed.filterPlaceholder": "Filter JSON",
+        "feed.subscribe": "Subscribe",
+        "feed.unsubscribe": "Unsubscribe",
+        "feed.noFilter": "No filter",
+        "feed.eventStream": "Events",
+        "feed.live": "LIVE",
+      };
+      return map[key] ?? key;
+    },
+    i18n: { language: "en" },
+  }),
+}));
+
+describe("FeedPanel", () => {
+  beforeEach(() => {
+    act(() => {
+      useFeedStore.setState({
+        posts: [],
+        author: "alice",
+        category: "tech",
+        content: "",
+        loading: false,
+      });
+      useEventStreamStore.setState({
+        entries: [],
+        activeEventType: "feed.update",
+        activeFilter: "",
+        subscriptionId: null,
+        subscribed: false,
+      });
+    });
+  });
+
+  it("renders feed title", () => {
+    render(<FeedPanel />);
+    expect(screen.getByText("Feed")).toBeInTheDocument();
+  });
+
+  it("shows empty state when no posts", () => {
+    render(<FeedPanel />);
+    expect(screen.getByText("No posts yet")).toBeInTheDocument();
+  });
+
+  it("renders post creation form", () => {
+    render(<FeedPanel />);
+    expect(screen.getByPlaceholderText("Author")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Write a post...")).toBeInTheDocument();
+    expect(screen.getByText("Post")).toBeInTheDocument();
+  });
+
+  it("updates author on typing", () => {
+    render(<FeedPanel />);
+    const input = screen.getByPlaceholderText("Author");
+    fireEvent.change(input, { target: { value: "bob" } });
+    expect(useFeedStore.getState().author).toBe("bob");
+  });
+
+  it("displays posts when present", () => {
+    act(() => {
+      useFeedStore.setState({
+        posts: [
+          { id: "1", content: "Hello feed", category: "tech", author: "alice", timestamp: Date.now() },
+        ],
+      });
+    });
+    render(<FeedPanel />);
+    expect(screen.getByText("Hello feed")).toBeInTheDocument();
+    expect(screen.getByText("alice")).toBeInTheDocument();
+  });
+});

package/templates/general/src/mainview/__tests__/components/GitPanel.test.tsx

@@ -0,0 +1,151 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { GitPanel } from "../../components/git/GitPanel";
+import { useGitStore } from "../../stores/use-git-store";
+import { act } from "@testing-library/react";
+
+const defaultGitState = {
+  branch: "main",
+  ahead: 0,
+  behind: 0,
+  staged: [],
+  changed: [],
+  untracked: [],
+  commits: [],
+  loadingCommits: false,
+  currentDiff: null,
+  loadingDiff: false,
+  expandedCommits: new Set(),
+  commitFiles: {},
+  loadingCommitFiles: new Set(),
+  branches: [],
+  loadingBranches: false,
+  worktrees: [],
+  loadingAction: null,
+  fetchStatus: vi.fn().mockResolvedValue(undefined),
+  fetchDiff: vi.fn().mockResolvedValue(undefined),
+  fetchLog: vi.fn().mockResolvedValue(undefined),
+  clearDiff: vi.fn(),
+  toggleCommitExpand: vi.fn().mockResolvedValue(undefined),
+  fetchCommitFileDiff: vi.fn().mockResolvedValue(undefined),
+  fetchBranches: vi.fn().mockResolvedValue(undefined),
+  checkout: vi.fn().mockResolvedValue(undefined),
+  stageFiles: vi.fn().mockResolvedValue(undefined),
+  unstageFiles: vi.fn().mockResolvedValue(undefined),
+  commit: vi.fn().mockResolvedValue(undefined),
+  push: vi.fn().mockResolvedValue(undefined),
+  pull: vi.fn().mockResolvedValue(undefined),
+  fetchWorktrees: vi.fn().mockResolvedValue(undefined),
+  refresh: vi.fn().mockResolvedValue(undefined),
+};
+
+vi.mock("../../lib/api-client", () => ({
+  apiClient: {
+    call: vi.fn().mockResolvedValue({}),
+  },
+}));
+
+vi.mock("../../stores/use-log-store", () => ({
+  useLogStore: Object.assign(
+    (s: (state: { addLog: () => void }) => unknown) => s({ addLog: vi.fn() }),
+    { getState: () => ({ addLog: vi.fn() }) }
+  ),
+}));
+
+vi.mock("../../stores/use-explorer-store", () => ({
+  useExplorerStore: Object.assign(
+    (s: (state: { currentPath: string; openFile: () => void }) => unknown) =>
+      s({ currentPath: "/repo", openFile: vi.fn() }),
+    { getState: () => ({ currentPath: "/repo", openFile: vi.fn() }) }
+  ),
+}));
+
+vi.mock("../../stores/use-sidebar-store", () => ({
+  useSidebarStore: (s: (state: { isPinned: boolean; breakpoint: string }) => unknown) =>
+    s({ isPinned: false, breakpoint: "desktop" }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const map: Record<string, string> = {
+        "git.title": "Source Control",
+        "git.staged": "Staged",
+        "git.changes": "Changes",
+        "git.untracked": "Untracked",
+        "git.noChanges": "No changes",
+        "git.commits": "Commits",
+        "git.refresh": "Refresh",
+        "git.pull": "Pull",
+        "git.push": "Push",
+        "git.unstageAll": "Unstage All",
+        "git.stageAll": "Stage All",
+        "git.openDiff": "Open Diff",
+        "git.openFile": "Open File",
+        "git.copyPath": "Copy Path",
+        "git.copyHash": "Copy Hash",
+        "git.copyMessage": "Copy Message",
+        "git.loadingFiles": "Loading...",
+        "git.noFiles": "No files",
+        "git.noCommits": "No commits",
+        "git.worktrees": "Worktrees",
+        "git.close": "Close",
+        "git.justNow": "just now",
+        "git.minutesAgo": "{{count}}m ago",
+        "git.hoursAgo": "{{count}}h ago",
+        "git.daysAgo": "{{count}}d ago",
+        "common.loading": "Loading...",
+        "git.commitPlaceholder": "Message",
+      };
+      return map[key] ?? key;
+    },
+    i18n: { language: "en" },
+  }),
+}));
+
+describe("GitPanel", () => {
+  beforeEach(() => {
+    act(() => {
+      useGitStore.setState(defaultGitState);
+    });
+  });
+
+  it("renders git title", () => {
+    render(<GitPanel />);
+    expect(screen.getByText("Source Control")).toBeInTheDocument();
+  });
+
+  it("shows no changes when empty", () => {
+    render(<GitPanel />);
+    expect(screen.getByText("No changes")).toBeInTheDocument();
+  });
+
+  it("displays staged files with label", () => {
+    act(() => {
+      useGitStore.setState({
+        ...defaultGitState,
+        staged: [{ path: "src/foo.ts", status: "modified" }],
+      });
+    });
+    render(<GitPanel />);
+    expect(screen.getByText("foo.ts")).toBeInTheDocument();
+    expect(screen.getByText(/Staged/)).toBeInTheDocument();
+  });
+
+  it("displays changed files with label", () => {
+    act(() => {
+      useGitStore.setState({
+        ...defaultGitState,
+        changed: [{ path: "src/bar.ts", status: "added" }],
+      });
+    });
+    render(<GitPanel />);
+    expect(screen.getByText("bar.ts")).toBeInTheDocument();
+    expect(screen.getByText(/Changes/)).toBeInTheDocument();
+  });
+
+  it("shows branch name", () => {
+    render(<GitPanel />);
+    expect(screen.getByText("main")).toBeInTheDocument();
+  });
+});

package/templates/general/src/mainview/__tests__/i18n/i18n.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+describe("i18n configuration", () => {
+  beforeEach(async () => {
+    vi.resetModules();
+  });
+
+  it("should export configured i18n instance", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(i18n.default).toBeDefined();
+    expect(i18n.default.isInitialized).toBe(true);
+  });
+
+  it("should have English translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("en", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should have Chinese translations", async () => {
+    const i18n = await import("../../lib/i18n");
+    expect(
+      i18n.default.getResource("zh", "translation", "app.title")
+    ).toBeDefined();
+  });
+
+  it("should change language", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.language).toBe("zh");
+
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.language).toBe("en");
+  });
+
+  it("should translate keys correctly in English", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("en");
+    expect(i18n.default.t("app.title")).toBe("Pi Agent");
+  });
+
+  it("should translate keys correctly in Chinese", async () => {
+    const i18n = await import("../../lib/i18n");
+    await i18n.default.changeLanguage("zh");
+    expect(i18n.default.t("app.title")).toBe("Pi Agent");
+  });
+});

package/templates/general/src/mainview/__tests__/setup-verify.test.ts

@@ -0,0 +1,8 @@
+import { describe, it, expect } from "vitest";
+
+describe("vitest setup", () => {
+  it("runs in happy-dom environment", () => {
+    expect(typeof window).toBe("object");
+    expect(typeof document).toBe("object");
+  });
+});

package/templates/general/src/mainview/__tests__/setup.ts

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom/vitest";
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+});
+
+const localStorageMock = (() => {
+  let store: Record<string, string> = {};
+  return {
+    getItem: (key: string) => store[key] ?? null,
+    setItem: (key: string, value: string) => {
+      store[key] = String(value);
+    },
+    removeItem: (key: string) => {
+      delete store[key];
+    },
+    clear: () => {
+      store = {};
+    },
+    get length() {
+      return Object.keys(store).length;
+    },
+    key: (i: number) => Object.keys(store)[i] ?? null,
+  };
+})();
+
+Object.defineProperty(window, "localStorage", { value: localStorageMock });

package/templates/general/src/mainview/components/activity-bar/ActivityBar.tsx

@@ -0,0 +1,40 @@
+import { Folder, GitBranch, Search, MessageSquare, Rss, Bug } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useSidebarStore, type SidebarPanelId } from "../../stores/use-sidebar-store";
+
+const items: { id: SidebarPanelId; icon: typeof Folder; labelKey: string }[] = [
+  { id: "explorer", icon: Folder, labelKey: "sidebar.explorer" },
+  { id: "git", icon: GitBranch, labelKey: "sidebar.git" },
+  { id: "search", icon: Search, labelKey: "sidebar.search" },
+  { id: "chat", icon: MessageSquare, labelKey: "tabs.chat" },
+  { id: "feed", icon: Rss, labelKey: "tabs.feed" },
+  { id: "debug", icon: Bug, labelKey: "tabs.debug" },
+];
+
+export function ActivityBar() {
+  const { t } = useTranslation();
+  const activePanel = useSidebarStore((s) => s.activePanel);
+  const togglePanel = useSidebarStore((s) => s.togglePanel);
+
+  return (
+    <div data-testid="activity-bar" className="w-12 bg-[var(--color-bg-primary)] border-r border-[var(--color-border-primary)] flex flex-col items-center py-2 gap-1 flex-shrink-0">
+      {items.map(({ id, icon: Icon, labelKey }) => (
+        <button
+          key={id}
+          data-testid={`tab-${id}`}
+          title={t(labelKey)}
+          onClick={() => togglePanel(id)}
+          className={`w-10 h-10 flex items-center justify-center rounded transition-colors ${
+            activePanel === id
+              ? "bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)] border-l-2 border-[var(--color-text-primary)]"
+              : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+          }`}
+        >
+          <Icon className="w-5 h-5" />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export { items };

package/templates/general/src/mainview/components/activity-bar/MobileTabBar.tsx

@@ -0,0 +1,29 @@
+import { useTranslation } from "react-i18next";
+import { useSidebarStore } from "../../stores/use-sidebar-store";
+import { items } from "./ActivityBar";
+
+export function MobileTabBar() {
+  const { t } = useTranslation();
+  const activePanel = useSidebarStore((s) => s.activePanel);
+  const togglePanel = useSidebarStore((s) => s.togglePanel);
+
+  return (
+    <div className="h-14 bg-[var(--color-bg-primary)] border-t border-[var(--color-border-primary)] flex items-center justify-around flex-shrink-0">
+      {items.map(({ id, icon: Icon, labelKey }) => (
+        <button
+          key={id}
+          data-testid={`tab-${id}`}
+          onClick={() => togglePanel(id)}
+          className={`flex flex-col items-center justify-center gap-0.5 px-3 py-1 rounded transition-colors ${
+            activePanel === id
+              ? "text-[var(--color-text-accent)]"
+              : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-secondary)]"
+          }`}
+        >
+          <Icon className="w-5 h-5" />
+          <span className="text-[10px]">{t(labelKey)}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/templates/general/src/mainview/components/chat/ChatPanel.tsx

@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react";
+import { MessageSquare, Send } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useChatStore } from "../../stores/use-chat-store";
+import { MessageBubble } from "./MessageBubble";
+
+export function ChatPanel() {
+  const { t } = useTranslation();
+  const messages = useChatStore((s) => s.messages);
+  const inputText = useChatStore((s) => s.inputText);
+  const setInputText = useChatStore((s) => s.setInputText);
+  const sendMessage = useChatStore((s) => s.sendMessage);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  return (
+    <div className="flex-1 flex flex-col overflow-hidden relative">
+      {/* Chat 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">
+          <MessageSquare className="w-4 h-4 text-[var(--color-text-accent)]" />
+          {t("chat.title")}
+          {messages.length > 0 && (
+            <span className="ml-1 px-2 py-0.5 bg-[var(--color-accent)]/30 text-[var(--color-text-accent)] rounded text-[10px]">
+              {messages.length}
+            </span>
+          )}
+        </h2>
+      </div>
+
+      {/* Messages list */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {messages.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)] text-sm">
+            {t("chat.empty")}
+          </div>
+        ) : (
+          messages.map((msg) => <MessageBubble key={msg.id} message={msg} />)
+        )}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input bar */}
+      <div className="px-4 py-3 bg-[var(--color-bg-secondary)] border-t border-[var(--color-border-primary)] flex gap-2 flex-shrink-0">
+        <input
+          type="text"
+          value={inputText}
+          onChange={(e) => setInputText(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && !e.shiftKey && sendMessage()}
+          placeholder={t("chat.placeholder")}
+          className="flex-1 px-3 py-2 text-sm bg-[var(--color-bg-tertiary)] rounded-lg text-[var(--color-text-primary)] border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
+        />
+        <button
+          onClick={sendMessage}
+          className="px-4 py-2 text-sm bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded-lg transition-colors flex items-center gap-1.5"
+        >
+          <Send className="w-4 h-4" />
+          {t("chat.send")}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/general/src/mainview/components/chat/MessageBubble.tsx

@@ -0,0 +1,85 @@
+import { Bot } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Highlight, themes } from "prism-react-renderer";
+import type { ChatMessage } from "../../types";
+
+interface MessageBubbleProps {
+  message: ChatMessage;
+}
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  const hh = d.getHours().toString().padStart(2, "0");
+  const mm = d.getMinutes().toString().padStart(2, "0");
+  return `${hh}:${mm}`;
+}
+
+function CodeBlock({ children, className }: { children: string; className?: string }) {
+  const language = className?.replace(/language-/, "") || "text";
+  return (
+    <Highlight theme={themes.nightOwl} code={children.trimEnd()} language={language}>
+      {({ style, tokens, getLineProps, getTokenProps }) => (
+        <pre
+          className="rounded-md p-3 my-2 overflow-x-auto text-xs leading-relaxed"
+          style={{ ...style, background: "#1e1e2e" }}
+        >
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({ line })}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === "user";
+
+  return (
+    <div className={`flex ${isUser ? "justify-end" : "justify-start"} items-start gap-2`}>
+      {!isUser && (
+        <div className="flex-shrink-0 mt-1">
+          <Bot className="w-4 h-4 text-[var(--color-text-accent)]" />
+        </div>
+      )}
+      <div
+        className={`max-w-[85%] px-3 py-2 rounded-lg text-sm break-words ${
+          isUser
+            ? "bg-[var(--color-accent)] text-[var(--color-text-primary)]"
+            : "bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)]"
+        }`}
+      >
+        {isUser ? (
+          <span className="whitespace-pre-wrap">{message.content}</span>
+        ) : (
+          <div className="markdown-body prose prose-invert prose-sm max-w-none [&_p]:mb-2 [&_p:last-child]:mb-0 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_h1]:text-base [&_h1]:font-bold [&_h1]:mb-2 [&_h2]:text-sm [&_h2]:font-bold [&_h2]:mb-1 [&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-text-accent)] [&_blockquote]:pl-3 [&_blockquote]:text-[var(--color-text-tertiary)] [&_a]:text-[var(--color-text-accent)] [&_a]:underline [&_code:not(pre_code)]:bg-[var(--color-bg-input)] [&_code:not(pre_code)]:px-1 [&_code:not(pre_code)]:rounded [&_code:not(pre_code)]:text-xs [&_table]:border-collapse [&_th]:border [&_th]:border-[var(--color-border-secondary)] [&_th]:px-2 [&_th]:py-1 [&_td]:border [&_td]:border-[var(--color-border-secondary)] [&_td]:px-2 [&_td]:py-1">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code({ className, children, ...props }) {
+                  const isBlock = className?.startsWith("language-") || String(children).includes("\n");
+                  if (isBlock) {
+                    return <CodeBlock className={className}>{String(children)}</CodeBlock>;
+                  }
+                  return <code className={className} {...props}>{children}</code>;
+                },
+              }}
+            >
+              {message.content}
+            </ReactMarkdown>
+          </div>
+        )}
+      </div>
+      {message.timestamp && (
+        <span className="text-[10px] text-[var(--color-text-tertiary)] ml-2 flex-shrink-0">
+          {formatTime(message.timestamp)}
+        </span>
+      )}
+    </div>
+  );
+}

package/templates/general/src/mainview/components/common/LanguageSwitcher.tsx

@@ -0,0 +1,15 @@
+import { useLocaleStore } from "../../stores/use-locale-store";
+
+export function LanguageSwitcher() {
+  const { locale, setLocale } = useLocaleStore();
+
+  return (
+    <button
+      onClick={() => setLocale(locale === "en" ? "zh" : "en")}
+      className="px-1.5 py-0.5 rounded text-xs hover:bg-[var(--color-bg-hover)] transition-colors text-[var(--color-text-secondary)]"
+      title={locale === "en" ? "切换到中文" : "Switch to English"}
+    >
+      {locale === "en" ? "中" : "EN"}
+    </button>
+  );
+}

package/templates/general/src/mainview/components/common/ThemeToggle.tsx

@@ -0,0 +1,24 @@
+import { useThemeStore } from "../../stores/use-theme-store";
+
+export function ThemeToggle() {
+  const theme = useThemeStore((s) => s.theme);
+  const toggleTheme = useThemeStore((s) => s.toggleTheme);
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-1.5 rounded-md hover:bg-[var(--color-bg-hover)] transition-colors"
+      title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {theme === "dark" ? (
+        <svg className="w-4 h-4 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      )}
+    </button>
+  );
+}