refactor(session): 重构会话列表为抽屉式侧边栏

- 将 Header 组件中的会话列表替换为抽屉式 SessionList 组件
- SessionList 组件引入 Drawer 抽屉，支持会话搜索和分组显示
- 使用 Button 触发抽屉打开关闭，优化界面交互体验
- 调整测试文件对应抽屉组件及按钮的 Mock 实现
- SkillsPanel 中修正 React 导入方式并添加图标显示
- 修复 InputPrompt 测试中获取文本框值的类型断言

Author: hqwlkj

packages/vscode-ide-companion/src/webview/components/Header.tsx

@@ -15,6 +15,7 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "@/webview/components/ui/drawer";
+import SessionList from "@/webview/components/SessionList";
 
 interface HeaderProps {
   sessions: SessionSummary[];
@@ -24,20 +25,12 @@ interface HeaderProps {
 }
 
 export default function Header({ sessions, activeSessionId, onSelectSession, onCreateNewSession }: HeaderProps) {
-  const [drawerOpen, setDrawerOpen] = useState(false);
-
-  const handleCloseDrawer = useCallback(() => {
-    setDrawerOpen(false);
-  }, []);
-
   const handleSelect = useCallback(
     (sessionId: string) => {
-      setDrawerOpen(false);
       onSelectSession(sessionId);
     },
     [onSelectSession]
   );
-
   const activeSessionSummary = useMemo(() => {
     const session = sessions.find((s) => s.id === activeSessionId);
     if (session) {
@@ -74,34 +67,12 @@ export default function Header({ sessions, activeSessionId, onSelectSession, onC
         >
           <Settings className="h-4 w-4" />
         </Button>
-        <Drawer direction="right" open={drawerOpen} onOpenChange={setDrawerOpen}>
-          <DrawerTrigger asChild>
-            <Button variant="ghost" size="icon" className="shrink-0 cursor-pointer" title="Show Agent Sessions Sidebar">
-              <PanelRight className="h-4 w-4" />
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent>
-            <DrawerHeader>
-              <DrawerTitle>Sessions</DrawerTitle>
-              <DrawerDescription>Manage your agent sessions.</DrawerDescription>
-            </DrawerHeader>
-            <div className="no-scrollbar overflow-y-auto">
-              <SessionDropdown
-                sessions={sessions}
-                activeSessionId={activeSessionId}
-                onSelect={handleSelect}
-                onClose={handleCloseDrawer}
-              />
-            </div>
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button onClick={onCreateNewSession} variant="outline" className="cursor-pointer">
-                  New Session
-                </Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
+        <SessionList
+          sessions={sessions}
+          activeSessionId={activeSessionId}
+          onSelect={handleSelect}
+          onCreateNewSession={onCreateNewSession}
+        />
       </div>
     </div>
   );

packages/vscode-ide-companion/src/webview/components/InputPrompt.test.tsx

@@ -265,13 +265,13 @@ describe("InputPrompt", () => {
     it("restores text when editingMessage changes", () => {
       const { rerender } = render(<InputPrompt {...defaultProps} />);
 
-      expect(screen.getByRole("textbox").value).toBe("");
+      expect((screen.getByRole("textbox") as HTMLTextAreaElement).value).toBe("");
 
       rerender(
         <InputPrompt {...defaultProps} editingMessage={{ text: "Editing this message", images: [], skills: [] }} />
       );
 
-      expect(screen.getByRole("textbox").value).toBe("Editing this message");
+      expect((screen.getByRole("textbox") as HTMLTextAreaElement).value).toBe("Editing this message");
     });
 
     it("calls onClearEditingMessage when sending while editing", async () => {

packages/vscode-ide-companion/src/webview/components/SessionList.test.tsx

@@ -14,20 +14,34 @@ import SessionList from "./SessionList";
 import type { SessionSummary } from "@/webview/types";
 
 // Mock dependencies
-vi.mock("@/webview/components/ui/input", () => ({
-  Input: vi.fn(({ value, onChange, ...props }) => (
+vi.mock("@/webview/components/ui/input-group", () => ({
+  InputGroup: vi.fn(({ children }) => <div data-testid="input-group">{children}</div>),
+  InputGroupAddon: vi.fn(({ children }) => <div data-testid="input-group-addon">{children}</div>),
+  InputGroupInput: vi.fn(({ value, onChange, ...props }) => (
     <input data-testid="search-input" value={value} onChange={onChange} {...props} />
   )),
 }));
 
-vi.mock("@/webview/components/ui/scroll-area", () => ({
-  ScrollArea: vi.fn(({ children }) => (
-    <div data-testid="scroll-area">
+vi.mock("@/webview/components/ui/drawer", () => ({
+  Drawer: vi.fn(({ children, open, onOpenChange }) => (
+    <div data-testid="drawer" data-open={open}>
       {children}
-      <div data-testid="scroll-bar" />
     </div>
   )),
-  ScrollBar: vi.fn(() => <div data-testid="scroll-bar" />),
+  DrawerTrigger: vi.fn(({ children }) => <div data-testid="drawer-trigger">{children}</div>),
+  DrawerContent: vi.fn(({ children }) => <div data-testid="drawer-content">{children}</div>),
+  DrawerHeader: vi.fn(({ children }) => <div data-testid="drawer-header">{children}</div>),
+  DrawerTitle: vi.fn(({ children }) => <div data-testid="drawer-title">{children}</div>),
+  DrawerFooter: vi.fn(({ children }) => <div data-testid="drawer-footer">{children}</div>),
+  DrawerClose: vi.fn(({ children }) => <div data-testid="drawer-close">{children}</div>),
+}));
+
+vi.mock("@/webview/components/ui/button", () => ({
+  Button: vi.fn(({ children, onClick }) => (
+    <button data-testid="button" onClick={onClick}>
+      {children}
+    </button>
+  )),
 }));
 
 vi.mock("@/webview/components/ui/empty", () => ({
@@ -39,9 +53,13 @@ vi.mock("@/webview/components/ui/empty", () => ({
 }));
 
 vi.mock("@/webview/components/ui/item", () => ({
-  Item: vi.fn(({ children }) => <div data-testid="item">{children}</div>),
+  Item: vi.fn(({ children, onClick }) => (
+    <div data-testid="item" onClick={onClick}>
+      {children}
+    </div>
+  )),
   ItemContent: vi.fn(({ children }) => <div>{children}</div>),
-  ItemGroup: vi.fn(({ children }) => <div>{children}</div>),
+  ItemGroup: vi.fn(({ children }) => <div data-testid="item-group">{children}</div>),
   ItemActions: vi.fn(({ children }) => <div>{children}</div>),
 }));
 
@@ -73,7 +91,7 @@ describe("SessionList", () => {
     sessions: mockSessions,
     activeSessionId: null,
     onSelect: vi.fn(),
-    onClose: vi.fn(),
+    onCreateNewSession: vi.fn(),
   };
 
   beforeEach(() => {
@@ -85,9 +103,9 @@ describe("SessionList", () => {
     expect(screen.getByTestId("search-input")).toBeInTheDocument();
   });
 
-  it("renders scroll area", () => {
+  it("renders drawer", () => {
     render(<SessionList {...defaultProps} />);
-    expect(screen.getByTestId("scroll-area")).toBeInTheDocument();
+    expect(screen.getByTestId("drawer")).toBeInTheDocument();
   });
 
   it("shows empty state when no sessions", () => {

packages/vscode-ide-companion/src/webview/components/SessionList.tsx

@@ -1,17 +1,26 @@
-import { useState, useMemo } from "react";
-import { Input } from "@/webview/components/ui/input";
-import { ScrollArea, ScrollBar } from "@/webview/components/ui/scroll-area";
+import { useState, useMemo, useCallback } from "react";
 import type { SessionSummary } from "@/webview/types";
-import { MessageCircle, Search } from "lucide-react";
+import { MessageCircle, PanelRight, Search } from "lucide-react";
 import { Empty, EmptyDescription, EmptyMedia, EmptyHeader, EmptyTitle } from "@/webview/components/ui/empty";
 import { cn } from "@/webview/lib/utils";
 import { Item, ItemActions, ItemContent, ItemGroup } from "./ui/item";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "@/webview/components/ui/drawer";
+import { Button } from "@/webview/components/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/webview/components/ui/input-group";
 
-interface SessionDropdownProps {
+interface SessionListProps {
   sessions: SessionSummary[];
   activeSessionId: string | null;
   onSelect: (sessionId: string) => void;
-  onClose: () => void;
+  onCreateNewSession: () => void;
 }
 
 function formatTime(dateString: string): string {
@@ -27,8 +36,13 @@ function formatTime(dateString: string): string {
   return `${date.getMonth() + 1}/${date.getDate()}`;
 }
 
-export default function SessionList({ sessions, activeSessionId, onSelect, onClose }: SessionDropdownProps) {
+export default function SessionList({ sessions, activeSessionId, onSelect, onCreateNewSession }: SessionListProps) {
   const [query, setQuery] = useState("");
+  const [drawerOpen, setDrawerOpen] = useState(false);
+
+  const handleCloseDrawer = useCallback(() => {
+    setDrawerOpen(false);
+  }, []);
 
   const filtered = useMemo(() => {
     const q = query.toLowerCase().trim();
@@ -69,68 +83,85 @@ export default function SessionList({ sessions, activeSessionId, onSelect, onClo
     grouped["Today"].length + grouped["Yesterday"].length + grouped["Past Week"].length + grouped["Older"].length;
 
   return (
-    <div className="flex flex-col h-full w-full">
-      <div className="p-2 shrink-0">
-        <div className="relative">
-          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            className="pl-8 h-8 text-sm"
-            placeholder="Search sessions..."
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            autoFocus
-          />
-        </div>
-      </div>
-      <ScrollArea className="flex-1 min-h-0">
-        <div className="p-2 pt-0">
-          {totalCount === 0 ? (
-            <Empty className="h-full bg-muted/30">
-              <EmptyHeader>
-                <EmptyMedia variant="icon">
-                  <MessageCircle />
-                </EmptyMedia>
-                <EmptyTitle>{query ? "No sessions found" : "No sessions yet"}</EmptyTitle>
-                <EmptyDescription className="max-w-xs text-pretty">
-                  You&apos;re all caught up. New notifications will appear here.
-                </EmptyDescription>
-              </EmptyHeader>
-            </Empty>
-          ) : (
-            Object.entries(grouped).map(([group, items]) =>
-              items.length > 0 ? (
-                <ItemGroup key={group} className="mb-3 last:mb-0">
-                  <div className="text-xs uppercase font-medium tracking-wide px-1.5 py-1 text-muted-foreground">
-                    {group}
-                  </div>
-                  {items.map((s) => (
-                    <Item
-                      key={s.id}
-                      size="xs"
-                      className={cn(
-                        "w-full text-left px-2 py-1.5 rounded-md text-sm flex items-center gap-3 transition-colors cursor-pointer border-none",
-                        s.id === activeSessionId
-                          ? "bg-primary text-primary-foreground font-medium"
-                          : "text-foreground hover:bg-accent"
-                      )}
-                      onClick={() => {
-                        onSelect(s.id);
-                        onClose();
-                      }}
-                    >
-                      <ItemContent className="flex-1 truncate">{s.summary || "Untitled"}</ItemContent>
-                      <ItemActions className="shrink-0 text-xs text-muted-foreground">
-                        {formatTime(s.updateTime)}
-                      </ItemActions>
-                    </Item>
-                  ))}
-                </ItemGroup>
-              ) : null
-            )
-          )}
+    <Drawer direction="right" open={drawerOpen} onOpenChange={setDrawerOpen}>
+      <DrawerTrigger asChild>
+        <Button variant="ghost" size="icon" className="shrink-0 cursor-pointer" title="Show Agent Sessions Sidebar">
+          <PanelRight className="h-4 w-4" />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Sessions</DrawerTitle>
+          <InputGroup className="w-full mt-4">
+            <InputGroupInput
+              placeholder="Search sessions..."
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+            />
+            <InputGroupAddon>
+              <Search />
+            </InputGroupAddon>
+            <InputGroupAddon align="inline-end">
+              {Object.entries(grouped).reduceRight((acc, [_, items]) => acc + items.length, 0)} results
+            </InputGroupAddon>
+          </InputGroup>
+        </DrawerHeader>
+        <div className="no-scrollbar overflow-y-auto">
+          <div className="py-2 px-4 pt-0">
+            {totalCount === 0 ? (
+              <Empty className="h-full bg-muted/30">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">
+                    <MessageCircle />
+                  </EmptyMedia>
+                  <EmptyTitle>{query ? "No sessions found" : "No sessions yet"}</EmptyTitle>
+                  <EmptyDescription className="max-w-xs text-pretty">
+                    You&apos;re all caught up. New notifications will appear here.
+                  </EmptyDescription>
+                </EmptyHeader>
+              </Empty>
+            ) : (
+              Object.entries(grouped).map(([group, items]) =>
+                items.length > 0 ? (
+                  <ItemGroup key={group} className="mb-3 last:mb-0">
+                    <div className="text-xs uppercase font-medium tracking-wide px-1.5 py-1 text-muted-foreground">
+                      {group}
+                    </div>
+                    {items.map((s) => (
+                      <Item
+                        key={s.id}
+                        size="xs"
+                        className={cn(
+                          "w-full text-left px-2 py-1.5 rounded-md text-sm flex items-center gap-3 transition-colors cursor-pointer border-none",
+                          s.id === activeSessionId
+                            ? "bg-primary text-primary-foreground font-medium"
+                            : "text-foreground hover:bg-accent"
+                        )}
+                        onClick={() => {
+                          onSelect(s.id);
+                          handleCloseDrawer();
+                        }}
+                      >
+                        <ItemContent className="flex-1 truncate">{s.summary || "Untitled"}</ItemContent>
+                        <ItemActions className="shrink-0 text-xs text-muted-foreground">
+                          {formatTime(s.updateTime)}
+                        </ItemActions>
+                      </Item>
+                    ))}
+                  </ItemGroup>
+                ) : null
+              )
+            )}
+          </div>
         </div>
-        <ScrollBar />
-      </ScrollArea>
-    </div>
+        <DrawerFooter>
+          <DrawerClose asChild>
+            <Button onClick={onCreateNewSession} variant="outline" className="cursor-pointer">
+              New Session
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   );
 }

packages/vscode-ide-companion/src/webview/components/SkillsPanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import type { SkillInfo } from "@/webview/types";
 import { InputGroupButton } from "@/webview/components/ui/input-group";
 import {
@@ -51,6 +51,7 @@ export default function SkillsPanel({ availableSkills, selectedSkills, onToggle
                     onSelect={() => onToggle(skill)}
                     title={skill.path}
                   >
+                    <GraduationCap className="h-3 w-3 text-muted-foreground" />
                     <span className="flex-1 truncate font-medium">{skill.name}</span>
                     <span className="text-xs text-muted-foreground truncate max-w-50">{skill.path}</span>
                   </CommandItem>