refactor(ui): 优化按钮样式和上下文组件命名

- 为按钮添加了 cursor-pointer 样式，提升交互体验
- 将 ContextMeter 组件重命名为 ContextIndicator，统一命名规范
- 更新引入和测试中对应的组件名称
- InputPrompt 组件中用 ContextIndicator 替换 ContextMeter
- 优化 InputPrompt 中发送按钮及加载状态样式和逻辑
- SystemBubble 组件中新增 Markdown 渲染支持技能描述文本
- 调整 SystemBubble 中技能描述的样式结构，增强可读性

Author: hqwlkj

…/src/webview/components/ContextMeter.tsx …/webview/components/ContextIndicator.tsxpackages/vscode-ide-companion/src/webview/components/ContextMeter.tsx renamed to packages/vscode-ide-companion/src/webview/components/ContextIndicator.tsx packages/vscode-ide-companion/src/webview/components/ContextMeter.tsx renamed to packages/vscode-ide-companion/src/webview/components/ContextIndicator.tsx

@@ -17,7 +17,7 @@ function formatTokenCount(value: unknown): string {
   return n.toLocaleString();
 }
 
-export default function ContextMeter({ tokenTelemetry }: ContextMeterProps) {
+export default function ContextIndicator({ tokenTelemetry }: ContextMeterProps) {
   const activeTokens = tokenTelemetry?.activeTokens || 0;
   const percent = getTokenUsagePercent(tokenTelemetry);
   const usedRows = flattenUsageFields(tokenTelemetry?.usage);

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

@@ -23,7 +23,7 @@ vi.mock("@/webview/components/SkillsTags", () => ({
   default: vi.fn(({ children }) => <div data-testid="skills-tags">{children}</div>),
 }));
 
-vi.mock("@/webview/components/ContextMeter", () => ({
+vi.mock("@/webview/components/ContextIndicator", () => ({
   default: vi.fn(() => <div data-testid="context-meter" />),
 }));
 

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

@@ -1,15 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import SkillsPanel from "@/webview/components/SkillsPanel";
 import SkillsTags from "@/webview/components/SkillsTags";
-import ContextMeter from "@/webview/components/ContextMeter";
+import ContextIndicator from "@/webview/components/ContextIndicator";
 import { PromptAttachments, usePromptAttachments } from "@/webview/components/PromptAttachments";
 import type { ActiveEditor, EditingMessage, SkillInfo, TokenTelemetry } from "@/webview/types";
-import { FileCodeIcon, Send, Square } from "lucide-react";
+import { FileCodeIcon, Reply, Square } from "lucide-react";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupTextarea } from "@/webview/components/ui/input-group";
 import { Separator } from "@/webview/components/ui/separator";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./ui/hover-card";
 import { cn } from "@/webview/lib/utils";
 import { Field, FieldGroup } from "./ui/field";
+import { Spinner } from "@/webview/components/ui/spinner";
 
 export interface InputPromptProps {
   loading: boolean;
@@ -152,7 +153,6 @@ export default function InputPrompt({
     [handleSend, history, historyIdx, value, draftBeforeHistory]
   );
 
-  const isProcessing = loading;
   const hasContent = value.trim().length > 0 || attachments.length > 0;
 
   return (
@@ -189,7 +189,7 @@ export default function InputPrompt({
               }}
             />
             <Separator orientation="vertical" className="h-5 mt-1.5" />
-            <ContextMeter tokenTelemetry={tokenTelemetry} />
+            <ContextIndicator tokenTelemetry={tokenTelemetry} />
             <Separator orientation="vertical" className="h-5 mt-1.5" />
             {activeEditor && (
               <HoverCard openDelay={300} closeDelay={100}>
@@ -204,36 +204,37 @@ export default function InputPrompt({
                 </HoverCardTrigger>
                 <HoverCardContent className="text-xs space-y-1">
                   <div className="font-medium truncate">{activeEditor.fileName.split("/").pop()}</div>
-                  <div className="text-muted-foreground">{activeEditor.fileName}</div>
+                  <p className="text-muted-foreground text-wrap break-all line-clamp-3">{activeEditor.fileName}</p>
                   <div className="flex gap-3 text-muted-foreground">
                     <span>{activeEditor.languageId}</span>
                     <span>{activeEditor.lineCount} lines</span>
                   </div>
                 </HoverCardContent>
               </HoverCard>
             )}
-            {isProcessing ? (
+            {loading ? (
               <InputGroupButton
-                variant="ghost"
+                variant="secondary"
                 size="icon-sm"
-                className="ml-auto h-7 w-7"
+                className="ml-auto group"
                 onClick={onInterrupt}
                 title="Stop"
               >
-                <Square className="h-4 w-4" />
+                <Square className="h-3 w-3 hidden fill-primary group-hover:block" strokeWidth={0} />
+                <Spinner className="h-4 w-4 block group-hover:hidden text-primary" />
               </InputGroupButton>
             ) : (
               <InputGroupButton
                 variant="default"
-                className={cn("h-7 w-7 ml-auto cursor-pointer", {
-                  "cursor-not-allowed!": !hasContent && !isProcessing,
+                className={cn("ml-auto cursor-pointer", {
+                  "cursor-not-allowed!": !hasContent && !loading,
                 })}
                 onClick={handleSend}
-                disabled={!hasContent && !isProcessing}
+                disabled={!hasContent && !loading}
                 title="Send"
                 size="icon-sm"
               >
-                <Send />
+                <Reply className="rotate-x-180" />
               </InputGroupButton>
             )}
           </InputGroupAddon>

packages/vscode-ide-companion/src/webview/components/bubbles/SystemBubble.tsx

@@ -3,6 +3,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/webview/c
 import BubbleDot from "@/webview/components/bubbles/BubbleDot";
 import { ChevronDown } from "lucide-react";
 import { Button } from "../ui/button";
+import Markdown from "@/webview/components/markdown";
 
 interface SystemBubbleProps {
   content: string;
@@ -28,7 +29,9 @@ export default function SystemBubble({ content, meta, shouldConnect = false }: S
           </Button>
         </CollapsibleTrigger>
         <CollapsibleContent className="w-auto">
-          <div className="mt-2 text-sm text-muted-foreground whitespace-pre-wrap p-2">{skillDescription}</div>
+          <div className="mt-2 text-sm text-muted-foreground whitespace-pre-wrap p-2">
+            <Markdown>{skillDescription}</Markdown>
+          </div>
         </CollapsibleContent>
       </div>
     </Collapsible>

packages/vscode-ide-companion/src/webview/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Slot } from "radix-ui";
 import { cn } from "@/webview/lib/utils";
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center cursor-pointer justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {