@dyyz1993/create-agent 1.9.0

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

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockSetPinned = vi.fn();
+
+vi.mock("../../../stores/use-sidebar-store", () => ({
+  useSidebarStore: (selector: any) =>
+    selector({ isPinned: true, setPinned: mockSetPinned, breakpoint: "desktop" }),
+}));
+
+describe("PinButton", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render a button", async () => {
+    const { PinButton } = await import("../PinButton");
+    render(<PinButton />);
+    expect(screen.getByRole("button")).toBeDefined();
+  });
+
+  it("should show unpin title when pinned", async () => {
+    const { PinButton } = await import("../PinButton");
+    render(<PinButton />);
+    expect(screen.getByTitle("Unpin sidebar")).toBeDefined();
+  });
+
+  it("should call setPinned on click", async () => {
+    const { PinButton } = await import("../PinButton");
+    render(<PinButton />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(mockSetPinned).toHaveBeenCalledWith(false);
+  });
+
+  it("should not render on mobile", async () => {
+    vi.resetModules();
+    vi.doMock("../../../stores/use-sidebar-store", () => ({
+      useSidebarStore: (selector: any) =>
+        selector({ isPinned: false, setPinned: vi.fn(), breakpoint: "mobile" }),
+    }));
+    const mod = await import("../PinButton");
+    const { container } = render(<mod.PinButton />);
+    expect(container.innerHTML).toBe("");
+    vi.resetModules();
+  });
+});

package/templates/agent/src/mainview/components/todo/TodoPanel.tsx

@@ -0,0 +1,141 @@
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Plus, Trash2, Circle, Clock, CheckCircle2, ListTodo } from "lucide-react";
+import { useTodoStore } from "../../stores/use-todo-store";
+import type { TodoStatus } from "../../../shared/modules/todo";
+
+const nextStatus: Record<TodoStatus, TodoStatus> = {
+  pending: "in_progress",
+  in_progress: "completed",
+  completed: "pending",
+};
+
+const statusFlow = ["pending", "in_progress", "completed"] as const;
+
+export function TodoPanel() {
+  const { t } = useTranslation();
+  const [showInput, setShowInput] = useState(false);
+  const [input, setInput] = useState("");
+  const items = useTodoStore((s) => s.items);
+  const fetchItems = useTodoStore((s) => s.fetchItems);
+  const addItem = useTodoStore((s) => s.addItem);
+  const updateItem = useTodoStore((s) => s.updateItem);
+  const removeItem = useTodoStore((s) => s.removeItem);
+
+  useEffect(() => {
+    fetchItems();
+  }, [fetchItems]);
+
+  const handleAdd = () => {
+    if (!input.trim()) return;
+    addItem(input.trim());
+    setInput("");
+    setShowInput(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") handleAdd();
+    if (e.key === "Escape") setShowInput(false);
+  };
+
+  const statusConfig: Record<TodoStatus, { icon: typeof Circle; color: string; label: string; circleColor: string }> = {
+    pending: { icon: Circle, color: "text-gray-400", label: t("todo.statusPending"), circleColor: "border-gray-500" },
+    in_progress: { icon: Clock, color: "text-yellow-400", label: t("todo.statusInProgress"), circleColor: "border-yellow-400 bg-yellow-400/20" },
+    completed: { icon: CheckCircle2, color: "text-green-400", label: t("todo.statusCompleted"), circleColor: "border-green-400 bg-green-400/20" },
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="p-3 border-b border-[var(--color-border-primary)] flex items-center justify-between">
+        <span className="text-sm text-[var(--color-text-secondary)]">{t("todo.title")}</span>
+        <button
+          onClick={() => setShowInput(!showInput)}
+          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("todo.add")}
+        </button>
+      </div>
+
+      {showInput && (
+        <div className="p-3 border-b border-[var(--color-border-primary)] bg-[var(--color-bg-secondary)] flex items-center gap-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={t("todo.placeholder")}
+            autoFocus
+            className="flex-1 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"
+          />
+          <button
+            onClick={handleAdd}
+            disabled={!input.trim()}
+            className="px-3 py-1 text-xs bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded text-white"
+          >
+            {t("todo.save")}
+          </button>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto p-3">
+        {items.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-gray-600">
+            <ListTodo className="w-12 h-12 mb-3 opacity-30" />
+            <span className="text-sm">{t("todo.empty")}</span>
+            <span className="text-xs mt-1">{t("todo.emptyHint")}</span>
+          </div>
+        ) : (
+          <div className="space-y-2.5">
+            {items.map((item) => {
+              const cfg = statusConfig[item.status as TodoStatus];
+              const Icon = cfg.icon;
+              return (
+                <div
+                  key={item.id}
+                  className="group relative bg-[var(--color-bg-secondary)]/60 border border-[var(--color-border-primary)]/80 rounded-lg p-3 hover:bg-[var(--color-bg-secondary)] hover:border-[var(--color-border-secondary)] transition-all"
+                >
+                  <div className="flex items-start gap-3">
+                    <button
+                      onClick={() => updateItem(item.id, nextStatus[item.status as TodoStatus])}
+                      className={`flex-shrink-0 mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all ${cfg.circleColor} ${cfg.color} hover:scale-110`}
+                    >
+                      <Icon className="w-3 h-3" />
+                    </button>
+                    <div className="flex-1 min-w-0">
+                      <p className={`text-sm leading-relaxed ${
+                        item.status === "completed" ? "text-[var(--color-text-placeholder)] line-through" : "text-[var(--color-text-secondary)]"
+                      }`}>
+                        {item.content}
+                      </p>
+                      <div className="flex items-center gap-1.5 mt-2 text-[11px] text-[var(--color-text-placeholder)]">
+                        <span>{t("todo.status")}</span>
+                        {statusFlow.map((s) => {
+                          const sc = statusConfig[s];
+                          const isActive = s === item.status;
+                          return (
+                            <span key={s} className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + " font-medium" : ""}`}>
+                              {isActive && <sc.icon className="w-2.5 h-2.5" />}
+                              {sc.label}
+                              {s !== "completed" && <span className="text-gray-700 mx-0.5">&rarr;</span>}
+                            </span>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => removeItem(item.id)}
+                      className="text-gray-600 hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/todo/__tests__/TodoPanel.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 mockAddItem = vi.fn();
+const mockUpdateItem = vi.fn();
+const mockRemoveItem = vi.fn();
+const mockFetchItems = vi.fn();
+
+vi.mock("../../../stores/use-todo-store", () => ({
+  useTodoStore: (selector: any) =>
+    selector({
+      items: [
+        { id: "1", content: "Buy milk", status: "pending" },
+        { id: "2", content: "Write code", status: "completed" },
+      ],
+      fetchItems: mockFetchItems,
+      addItem: mockAddItem,
+      updateItem: mockUpdateItem,
+      removeItem: mockRemoveItem,
+    }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("TodoPanel", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render todo title", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    expect(screen.getByText("todo.title")).toBeDefined();
+  });
+
+  it("should render add button", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    expect(screen.getByText("todo.add")).toBeDefined();
+  });
+
+  it("should display todo items", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    expect(screen.getByText("Buy milk")).toBeDefined();
+    expect(screen.getByText("Write code")).toBeDefined();
+  });
+
+  it("should call fetchItems on mount", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    expect(mockFetchItems).toHaveBeenCalled();
+  });
+
+  it("should show input when add button is clicked", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    fireEvent.click(screen.getByText("todo.add"));
+    expect(screen.getByPlaceholderText("todo.placeholder")).toBeDefined();
+  });
+
+  it("should call addItem on input submit", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    fireEvent.click(screen.getByText("todo.add"));
+    const input = screen.getByPlaceholderText("todo.placeholder");
+    fireEvent.change(input, { target: { value: "New task" } });
+    fireEvent.click(screen.getByText("todo.save"));
+    expect(mockAddItem).toHaveBeenCalledWith("New task");
+  });
+
+  it("should hide input on Escape", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    render(<TodoPanel />);
+    fireEvent.click(screen.getByText("todo.add"));
+    const input = screen.getByPlaceholderText("todo.placeholder");
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(screen.queryByPlaceholderText("todo.placeholder")).toBeNull();
+  });
+
+  it("should render status indicators for each item", async () => {
+    const { TodoPanel } = await import("../TodoPanel");
+    const _container = render(<TodoPanel />);
+    const statusTexts = screen.getAllByText("todo.status");
+    expect(statusTexts.length).toBeGreaterThan(0);
+  });
+});

package/templates/agent/src/mainview/global.d.ts

@@ -0,0 +1,13 @@
+declare global {
+  interface Window {
+    __electrobun?: {
+      receiveMessageFromBun: (msg: unknown) => void;
+    };
+    __electrobunBunBridge?: {
+      postMessage: (msg: string) => void;
+    };
+    /** Desktop IPC receiver: Bun calls this via executeJavascript */
+    __piAgentIPC?: (msg: unknown) => void;
+  }
+}
+export {};

package/templates/agent/src/mainview/hooks/__tests__/use-breakpoint.test.ts

@@ -0,0 +1,147 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+
+const mockSetBreakpoint = vi.fn();
+
+vi.mock("../../stores/use-sidebar-store", () => ({
+  useSidebarStore: {
+    getState: () => ({
+      breakpoint: "desktop",
+      _setBreakpoint: mockSetBreakpoint,
+    }),
+  },
+}));
+
+describe("useBreakpointSync", () => {
+  let observerCallback: ResizeObserverCallback;
+  let mockObserve: ReturnType<typeof vi.fn>;
+  let mockDisconnect: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.resetModules();
+    mockSetBreakpoint.mockClear();
+
+    mockObserve = vi.fn();
+    mockDisconnect = vi.fn();
+
+    class MockResizeObserver {
+      constructor(cb: ResizeObserverCallback) {
+        observerCallback = cb;
+      }
+      observe = mockObserve;
+      disconnect = mockDisconnect;
+      unobserve = vi.fn();
+    }
+    globalThis.ResizeObserver = MockResizeObserver as any;
+  });
+
+  it("should create ResizeObserver and observe documentElement", async () => {
+    const { useBreakpointSync } = await import("../../hooks/use-breakpoint");
+    renderHook(() => useBreakpointSync());
+    expect(mockObserve).toHaveBeenCalledWith(document.documentElement);
+  });
+
+  it("should set mobile breakpoint for width < 768", async () => {
+    const { useBreakpointSync } = await import("../../hooks/use-breakpoint");
+    renderHook(() => useBreakpointSync());
+
+    act(() => {
+      observerCallback(
+        [
+          {
+            target: document.documentElement,
+            contentRect: { width: 500, height: 800 } as DOMRectReadOnly,
+            borderBoxSize: [] as any,
+            contentBoxSize: [] as any,
+          },
+        ],
+        {} as ResizeObserver,
+      );
+    });
+
+    await new Promise((r) => setTimeout(r, 150));
+    expect(mockSetBreakpoint).toHaveBeenCalledWith("mobile");
+  });
+
+  it("should set tablet breakpoint for 768 <= width < 1024", async () => {
+    const { useBreakpointSync } = await import("../../hooks/use-breakpoint");
+    renderHook(() => useBreakpointSync());
+
+    act(() => {
+      observerCallback(
+        [
+          {
+            target: document.documentElement,
+            contentRect: { width: 900, height: 600 } as DOMRectReadOnly,
+            borderBoxSize: [] as any,
+            contentBoxSize: [] as any,
+          },
+        ],
+        {} as ResizeObserver,
+      );
+    });
+
+    await new Promise((r) => setTimeout(r, 150));
+    expect(mockSetBreakpoint).toHaveBeenCalledWith("tablet");
+  });
+
+  it("should not call _setBreakpoint if breakpoint unchanged", async () => {
+    const { useBreakpointSync } = await import("../../hooks/use-breakpoint");
+    renderHook(() => useBreakpointSync());
+
+    act(() => {
+      observerCallback(
+        [
+          {
+            target: document.documentElement,
+            contentRect: { width: 1440, height: 900 } as DOMRectReadOnly,
+            borderBoxSize: [] as any,
+            contentBoxSize: [] as any,
+          },
+        ],
+        {} as ResizeObserver,
+      );
+    });
+
+    await new Promise((r) => setTimeout(r, 150));
+    expect(mockSetBreakpoint).not.toHaveBeenCalled();
+  });
+
+  it("should set desktop breakpoint when transitioning from mobile", async () => {
+    vi.doMock("../../stores/use-sidebar-store", () => ({
+      useSidebarStore: {
+        getState: () => ({
+          breakpoint: "mobile",
+          _setBreakpoint: mockSetBreakpoint,
+        }),
+      },
+    }));
+
+    const { useBreakpointSync } = await import("../../hooks/use-breakpoint");
+    renderHook(() => useBreakpointSync());
+
+    act(() => {
+      observerCallback(
+        [
+          {
+            target: document.documentElement,
+            contentRect: { width: 1440, height: 900 } as DOMRectReadOnly,
+            borderBoxSize: [] as any,
+            contentBoxSize: [] as any,
+          },
+        ],
+        {} as ResizeObserver,
+      );
+    });
+
+    await new Promise((r) => setTimeout(r, 150));
+    expect(mockSetBreakpoint).toHaveBeenCalledWith("desktop");
+  });
+
+  it("should disconnect observer on unmount", async () => {
+    const { useBreakpointSync } = await import("../../hooks/use-breakpoint");
+    const { unmount } = renderHook(() => useBreakpointSync());
+    unmount();
+    expect(mockDisconnect).toHaveBeenCalled();
+  });
+});

package/templates/agent/src/mainview/hooks/use-breakpoint.ts

@@ -0,0 +1,34 @@
+import { useEffect } from "react";
+import { useSidebarStore, type Breakpoint } from "../stores/use-sidebar-store";
+
+function getBreakpoint(width: number): Breakpoint {
+  if (width < 768) return "mobile";
+  if (width < 1024) return "tablet";
+  return "desktop";
+}
+
+/**
+ * 单一 ResizeObserver，同步 breakpoint 到 sidebar store。
+ * 组件通过 useSidebarStore(s => s.breakpoint) 读取。
+ */
+export function useBreakpointSync() {
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    const obs = new ResizeObserver((entries) => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        for (const entry of entries) {
+          const bp = getBreakpoint(entry.contentRect.width);
+          if (bp !== useSidebarStore.getState().breakpoint) {
+            useSidebarStore.getState()._setBreakpoint(bp);
+          }
+        }
+      }, 100);
+    });
+    obs.observe(document.documentElement);
+    return () => {
+      clearTimeout(timer);
+      obs.disconnect();
+    };
+  }, []);
+}

package/templates/agent/src/mainview/hooks/use-input-history.ts

@@ -0,0 +1,84 @@
+import { useState, useCallback, useRef } from "react";
+
+const HISTORY_KEY = "pi-input-history";
+const MAX_ITEMS = 10;
+
+function getStorageKey(sessionId: string): string {
+  return `${HISTORY_KEY}:${sessionId}`;
+}
+
+function readHistory(sessionId: string): string[] {
+  try {
+    const raw = localStorage.getItem(getStorageKey(sessionId));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return parsed.slice(0, MAX_ITEMS);
+  } catch { /* ignore */ }
+  return [];
+}
+
+function writeHistory(sessionId: string, items: string[]) {
+  try {
+    localStorage.setItem(getStorageKey(sessionId), JSON.stringify(items.slice(0, MAX_ITEMS)));
+  } catch { /* ignore */ }
+}
+
+export function useInputHistory(sessionId: string) {
+  const historyRef = useRef<string[]>(readHistory(sessionId));
+  const indexRef = useRef(-1);
+  const [, forceUpdate] = useState(0);
+
+  const hasPrev = historyRef.current.length > 0 && indexRef.current < historyRef.current.length - 1;
+  const hasNext = indexRef.current > 0;
+
+  const saveToHistory = useCallback((text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    const h = historyRef.current;
+    const filtered = h.filter((item) => item !== trimmed);
+    const updated = [trimmed, ...filtered].slice(0, MAX_ITEMS);
+    historyRef.current = updated;
+    writeHistory(sessionId, updated);
+    indexRef.current = -1;
+    forceUpdate((n) => n + 1);
+  }, [sessionId]);
+
+  const navigatePrev = useCallback((): string | null => {
+    const h = historyRef.current;
+    if (h.length === 0) return null;
+    const nextIdx = Math.min(indexRef.current + 1, h.length - 1);
+    indexRef.current = nextIdx;
+    forceUpdate((n) => n + 1);
+    return h[nextIdx];
+  }, []);
+
+  const navigateNext = useCallback((): string | null => {
+    const h = historyRef.current;
+    if (h.length === 0) return null;
+    const nextIdx = indexRef.current - 1;
+    if (nextIdx < 0) {
+      indexRef.current = -1;
+      forceUpdate((n) => n + 1);
+      return "";
+    }
+    indexRef.current = nextIdx;
+    forceUpdate((n) => n + 1);
+    return h[nextIdx];
+  }, []);
+
+  const clearHistory = useCallback(() => {
+    historyRef.current = [];
+    indexRef.current = -1;
+    try {
+      localStorage.removeItem(getStorageKey(sessionId));
+    } catch { /* ignore */ }
+    forceUpdate((n) => n + 1);
+  }, [sessionId]);
+
+  const resetIndex = useCallback(() => {
+    indexRef.current = -1;
+    forceUpdate((n) => n + 1);
+  }, []);
+
+  return { saveToHistory, navigatePrev, navigateNext, clearHistory, resetIndex, hasPrev, hasNext };
+}

package/templates/agent/src/mainview/hooks/use-rpc-init.ts

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+import { useConnectionStore } from "../stores/use-connection-store";
+import { useLogStore } from "../stores/use-log-store";
+import { useExplorerStore } from "../stores/use-explorer-store";
+import { useChatStore } from "../stores/use-chat-store";
+import { apiClient } from "../lib/api-client";
+
+export function useRpcInit() {
+  const ready = useConnectionStore((s) => s.ready);
+  const addLog = useLogStore((s) => s.addLog);
+  const initializeConnection = useConnectionStore((s) => s.initializeConnection);
+  const listRootDir = useExplorerStore((s) => s.listRootDir);
+
+  useEffect(() => {
+    initializeConnection();
+  }, [initializeConnection]);
+
+  useEffect(() => {
+    if (!ready) return;
+
+    let subscriptionId: string | null = null;
+
+    const setup = async () => {
+      listRootDir();
+
+      subscriptionId = await apiClient.subscribe("chat.message", (payload) => {
+        useChatStore.getState().addMessage({
+          id: payload.id,
+          role: payload.role,
+          content: payload.content,
+          timestamp: payload.timestamp,
+        });
+      }, {});
+      addLog("Subscribed to chat.message");
+
+      try {
+        const history = await apiClient.call("chat.list", { limit: 100 });
+        if (history.messages.length > 0) {
+          useChatStore.getState().setMessages(
+            history.messages.map((m: { id: string; role: "user" | "assistant"; content: string; timestamp: number }) => ({
+              id: m.id,
+              role: m.role,
+              content: m.content,
+              timestamp: m.timestamp,
+            }))
+          );
+          addLog(`Loaded ${history.messages.length} history messages`);
+        }
+      } catch (err) {
+        addLog(`Failed to load history: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    };
+    setup();
+
+    return () => {
+      if (subscriptionId) {
+        apiClient.unsubscribe(subscriptionId);
+      }
+    };
+  }, [ready, addLog, listRootDir]);
+}

package/templates/agent/src/mainview/hooks/use-sidebar-resize.ts

@@ -0,0 +1,40 @@
+import { useCallback, useRef } from "react";
+import { useSidebarStore } from "../stores/use-sidebar-store";
+
+export function useSidebarResize() {
+  const sidebarWidth = useSidebarStore((s) => s.sidebarWidth);
+  const setSidebarWidth = useSidebarStore((s) => s.setSidebarWidth);
+
+  const resizingRef = useRef(false);
+  const startXRef = useRef(0);
+  const startWidthRef = useRef(0);
+
+  const handleResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      resizingRef.current = true;
+      startXRef.current = e.clientX;
+      startWidthRef.current = sidebarWidth;
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+
+      const onMove = (ev: MouseEvent) => {
+        if (!resizingRef.current) return;
+        const delta = ev.clientX - startXRef.current;
+        setSidebarWidth(startWidthRef.current + delta);
+      };
+      const onUp = () => {
+        resizingRef.current = false;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [sidebarWidth, setSidebarWidth]
+  );
+
+  return { sidebarWidth, handleResizeStart };
+}