lessweb · hqwlkj · May 11, 2026 · May 11, 2026 · May 12, 2026 · May 12, 2026
diff --git a/src/session.ts b/src/session.ts
@@ -598,7 +598,7 @@ The candidate skills are as follows:\n\n`;
       if (!fs.existsSync(root)) {
         return [];
       }
-      let entries: fs.Dirent[] = [];
+      let entries: fs.Dirent[];
       try {
         entries = fs.readdirSync(root, { withFileTypes: true });
       } catch {

diff --git a/src/tools/read-handler.ts b/src/tools/read-handler.ts
@@ -340,9 +340,18 @@ function loadGitignoreMatcher(projectRoot: string): ((relPath: string, isDir: bo
     };
   }
 
-  let content = "";
   try {
-    content = fs.readFileSync(gitignorePath, "utf8");
+    const content = fs.readFileSync(gitignorePath, "utf8");
+    const ig = ignore();
+    ig.add(DEFAULT_GITIGNORE);
+    ig.add(content);
+    return (relPath: string, isDir: boolean) => {
+      if (!relPath) {
+        return false;
+      }
+      const candidate = isDir ? `${relPath}/` : relPath;
+      return ig.ignores(candidate);
+    };
   } catch {
     const ig = ignore();
     ig.add(DEFAULT_GITIGNORE);
@@ -354,17 +363,6 @@ function loadGitignoreMatcher(projectRoot: string): ((relPath: string, isDir: bo
       return ig.ignores(candidate);
     };
   }
-
-  const ig = ignore();
-  ig.add(DEFAULT_GITIGNORE);
-  ig.add(content);
-  return (relPath: string, isDir: boolean) => {
-    if (!relPath) {
-      return false;
-    }
-    const candidate = isDir ? `${relPath}/` : relPath;
-    return ig.ignores(candidate);
-  };
 }
 
 function parseLineNumber(

diff --git a/src/ui/DropdownMenu.tsx b/src/ui/DropdownMenu.tsx
@@ -0,0 +1,191 @@
+import React, { useMemo } from "react";
+import { Box, Text } from "ink";
+
+/**
+ * Generic dropdown menu item structure
+ */
+export type DropdownMenuItem = {
+  /** Unique key for React list rendering */
+  key: string;
+  /** Main label text (can include status indicators) */
+  label: string;
+  /** Secondary description text (dimmed) */
+  description?: string;
+  /** Whether this item is currently selected */
+  selected?: boolean;
+  /** Whether to show a special status indicator (e.g., loaded checkmark) */
+  statusIndicator?: {
+    symbol: string;
+    color: string;
+  };
+};
+
+/**
+ * Props for the DropdownMenu component
+ */
+type DropdownMenuProps = {
+  /** List of items to display */
+  items: DropdownMenuItem[];
+  /** Index of the currently active/highlighted item */
+  activeIndex: number;
+  /** Maximum number of visible items before scrolling */
+  maxVisible?: number;
+  /** Container width in columns */
+  width: number;
+  /** Optional title displayed at the top */
+  title?: string;
+  /** Color for the title (default: "magenta") */
+  titleColor?: string;
+  /** Color for the active item indicator (default: "cyanBright") */
+  activeColor?: string;
+  /** Help text displayed at the bottom */
+  helpText?: string;
+  /** Text to display when items list is empty */
+  emptyText?: string;
+  /** Custom item renderer (overrides default rendering) */
+  renderItem?: (item: DropdownMenuItem, isActive: boolean) => React.ReactNode;
+};
+
+/**
+ * Calculate the visible window start position for scrolling
+ * Ensures the activeIndex is always visible within the window
+ */
+export function calculateVisibleStart(activeIndex: number, totalItems: number, maxVisible: number): number {
+  return Math.min(Math.max(0, activeIndex - Math.floor((maxVisible - 1) / 2)), Math.max(0, totalItems - maxVisible));
+}
+
+/**
+ * Generic dropdown menu component with scrolling support
+ * Used by Skills Dropdown, Model Dropdown, and other selection menus
+ */
+const DropdownMenu = React.memo(function DropdownMenu({
+  items,
+  activeIndex,
+  maxVisible = 8,
+  width,
+  title,
+  titleColor = "magenta",
+  activeColor = "cyanBright",
+  helpText,
+  emptyText = "No items found",
+  renderItem,
+}: DropdownMenuProps): React.ReactElement | null {
+  // Calculate visible window
+  const visibleStart = calculateVisibleStart(activeIndex, items?.length, maxVisible);
+  const visibleItems = items?.slice(visibleStart, visibleStart + maxVisible);
+
+  // 计算标签列最佳宽度：包含所有可能的前缀和后缀
+  const labelColumnWidth = useMemo(() => {
+    if (visibleItems.length === 0) {
+      return 0;
+    }
+    // 计算每个 item 实际需要的最大宽度
+    const maxContentWidth = Math.max(
+      ...visibleItems.map((item) => {
+        let width = 2; // prefix "› " or "  "
+        if (item.selected !== undefined) {
+          width += 2; // "● " or "○ "
+        }
+        width += item.label.length;
+        if (item.statusIndicator) {
+          width += 2; // " ✓" or similar
+        }
+        return width;
+      })
+    );
+    const maxAllowed = Math.max(10, (width - 2) >> 1); // 容器50%宽度（减去gap），至少保留10列
+    return Math.min(maxContentWidth, maxAllowed);
+  }, [visibleItems, width]);
+
+  // Early return if no items
+  if (items?.length === 0) {
+    return (
+      <Box flexDirection="column" marginBottom={1} width={width}>
+        {title ? (
+          <Text color={titleColor} bold>
+            {title}
+          </Text>
+        ) : null}
+        <Text dimColor>{emptyText}</Text>
+        {helpText ? <Text dimColor>{helpText}</Text> : null}
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column" marginBottom={1} borderStyle={"round"} borderDimColor width={width}>
+      {/* Title */}
+      {title ? (
+        <Box
+          borderStyle={"single"}
+          borderDimColor
+          borderBottom={true}
+          borderRight={false}
+          borderTop={false}
+          borderLeft={false}
+        >
+          <Text color={titleColor} bold>
+            {title}
+          </Text>
+        </Box>
+      ) : null}
+
+      {/* Scroll indicator - top */}
+      {visibleStart > 0 ? (
+        <Box marginLeft={2}>
+          <Text dimColor>… {visibleStart} above</Text>
+        </Box>
+      ) : null}
+
+      {/* Visible items */}
+      {visibleItems.map((item, idx) => {
+        const actualIndex = visibleStart + idx;
+        const isActive = actualIndex === activeIndex;
+
+        // Use custom renderer if provided
+        if (renderItem) {
+          return <React.Fragment key={item.key}>{renderItem(item, isActive)}</React.Fragment>;
+        }
+
+        // Default rendering with selection indicator and optional features
+        return (
+          <Box key={item.key} flexGrow={1} flexDirection="row" gap={2}>
+            <Box width={labelColumnWidth} flexShrink={0}>
+              <Text color={isActive ? activeColor : undefined} wrap="truncate-end">
+                {isActive ? "› " : "  "}
+                {item.selected !== undefined ? (item.selected ? "●" : "○") : null} <Text bold>{item.label}</Text>
+                {item.statusIndicator ? (
+                  <Text color={item.statusIndicator.color}> {item.statusIndicator.symbol}</Text>
+                ) : null}
+              </Text>
+            </Box>
+            <Box flexGrow={1}>{item.description ? <Text dimColor>{`${item.description}`}</Text> : null}</Box>
+          </Box>
+        );
+      })}
+
+      {/* Scroll indicator - bottom */}
+      {visibleStart + visibleItems.length < items.length ? (
+        <Box marginLeft={2}>
+          <Text dimColor>… {items.length - visibleStart - visibleItems.length} more</Text>
+        </Box>
+      ) : null}
+
+      {/* Help text */}
+      {helpText ? (
+        <Box
+          borderStyle={"single"}
+          borderDimColor
+          borderBottom={false}
+          borderRight={false}
+          borderTop={true}
+          borderLeft={false}
+        >
+          <Text dimColor>{helpText}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+});
+
+export default DropdownMenu;
diff --git a/src/ui/PromptInput.tsx b/src/ui/PromptInput.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Box, Text, useApp, useStdout } from "ink";
 import chalk from "chalk";
 import {
@@ -33,6 +33,7 @@ export type { InputKey } from "./prompt";
 import { useTerminalInput } from "./prompt";
 import type { InputKey } from "./prompt";
 import { useHiddenTerminalCursor, useTerminalFocusReporting } from "./prompt";
+import DropdownMenu from "./DropdownMenu";
 import SlashCommandMenu from "./SlashCommandMenu";
 import type { ModelConfigSelection, ReasoningEffort } from "../settings";
 
@@ -89,7 +90,7 @@ const PromptPrefixLine = React.memo(function PromptPrefixLine({ busy }: { busy:
   }, [busy]);
 
   const prefix = busy ? `${SPINNER_FRAMES[spinnerIndex]} ` : "> ";
-  return <Text color={busy ? "yellow" : "green"}>{prefix}</Text>;
+  return <Text color={busy ? "yellow" : "#229ac3"}>{prefix}</Text>;
 });
 
 export const PromptInput = React.memo(function PromptInput({
@@ -669,8 +670,6 @@ export const PromptInput = React.memo(function PromptInput({
       });
   }
 
-  const visibleSkillStart = Math.min(Math.max(0, skillsDropdownIndex - 7), Math.max(0, skills.length - 8));
-  const visibleSkills = skills.slice(visibleSkillStart, visibleSkillStart + 8);
   const modelDropdownItems =
     modelDropdownStep === "model"
       ? MODEL_COMMAND_MODELS.map((model) => ({
@@ -684,6 +683,11 @@ export const PromptInput = React.memo(function PromptInput({
           description: option.thinkingEnabled ? `reasoningEffort: ${option.reasoningEffort}` : "thinking disabled",
         }));
 
+  const showFooterText = useMemo(
+    () => showMenu || showSkillsDropdown || modelDropdownStep !== null,
+    [showMenu, showSkillsDropdown, modelDropdownStep]
+  );
+
   return (
     <Box flexDirection="column" width={screenWidth}>
       {imageUrls.length > 0 ? (
@@ -713,58 +717,45 @@ export const PromptInput = React.memo(function PromptInput({
         <Text>{renderBufferWithCursor(buffer, !disabled && hasTerminalFocus, placeholder)}</Text>
       </Box>
       {showSkillsDropdown ? (
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color="magenta" bold>
-            Select Skills
-          </Text>
-          {skills.length === 0 ? (
-            <Text dimColor>No skills found</Text>
-          ) : (
-            visibleSkills.map((skill, idx) => {
-              const skillIndex = visibleSkillStart + idx;
-              const selected = isSkillSelected(selectedSkills, skill);
-              const active = skillIndex === skillsDropdownIndex;
-              return (
-                <Text key={skill.path || skill.name} color={active ? "cyanBright" : undefined} wrap="truncate-end">
-                  {active ? "› " : "  "}
-                  {selected ? "●" : "○"} <Text bold>{skill.name}</Text>
-                  {skill.isLoaded ? <Text color="green"> ✓</Text> : null}
-                  <Text dimColor>{`  ${skill.path}`}</Text>
-                </Text>
-              );
-            })
-          )}
-          {visibleSkillStart > 0 ? <Text dimColor>… {visibleSkillStart} above</Text> : null}
-          {visibleSkillStart + visibleSkills.length < skills.length ? (
-            <Text dimColor>… {skills.length - visibleSkillStart - visibleSkills.length} more</Text>
-          ) : null}
-          <Text dimColor>space toggle · enter toggle · esc to close</Text>
-        </Box>
+        <DropdownMenu
+          width={screenWidth}
+          title="Select Skills"
+          helpText="space toggle · enter toggle · esc to close"
+          emptyText="No skills found"
+          items={skills.map((skill) => ({
+            key: skill.path || skill.name,
+            label: skill.name,
+            description: skill.path,
+            selected: isSkillSelected(selectedSkills, skill),
+            statusIndicator: skill.isLoaded ? { symbol: "✓", color: "green" } : undefined,
+          }))}
+          activeIndex={skillsDropdownIndex}
+          activeColor="#229ac3"
+          maxVisible={8}
+        />
       ) : null}
       {modelDropdownStep ? (
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color="magenta" bold>
-            {modelDropdownStep === "model" ? "Select Model" : "Select Thinking Mode"}
-          </Text>
-          {modelDropdownItems.map((item, idx) => {
-            const active = idx === modelDropdownIndex;
-            return (
-              <Text key={item.label} color={active ? "cyanBright" : undefined} wrap="truncate-end">
-                {active ? "› " : "  "}
-                {item.selected ? "●" : "○"} <Text bold>{item.label}</Text>
-                {item.description ? <Text dimColor>{`  ${item.description}`}</Text> : null}
-              </Text>
-            );
-          })}
-          <Text dimColor>
-            {modelDropdownStep === "model"
+        <DropdownMenu
+          width={screenWidth}
+          title={modelDropdownStep === "model" ? "Select Model" : "Select Thinking Mode"}
+          helpText={
+            modelDropdownStep === "model"
               ? "space/enter select model · esc to cancel"
-              : "space/enter apply · esc to cancel"}
-          </Text>
-        </Box>
+              : "space/enter apply · esc to cancel"
+          }
+          items={modelDropdownItems.map((item) => ({
+            key: item.label,
+            label: item.label,
+            description: item.description,
+            selected: item.selected,
+          }))}
+          activeIndex={modelDropdownIndex}
+          activeColor="#229ac3"
+          maxVisible={8}
+        />
       ) : null}
       <SlashCommandMenu width={screenWidth} items={slashMenu} activeIndex={menuIndex} />
-      {!showMenu && (
+      {!showFooterText && (
         <Box>
           <Text dimColor>{footerText}</Text>
         </Box>