@tablestore/tablestore-agent-cli 0.1.6 → 0.1.8

package/dist/dashboard-runtime/dashboard/src/components/qa/qa-message.tsx

@@ -1,13 +1,30 @@
 "use client";
 
-import { memo, useState } from "react";
-import { AlertCircle, BookOpen, Brain, ChevronDown, Search } from "lucide-react";
+import { memo, useCallback, useEffect, useState } from "react";
+import {
+  AlertCircle,
+  AlertTriangle,
+  BookOpen,
+  Brain,
+  ChevronDown,
+  Copy,
+  Pencil,
+  RotateCcw,
+  Search,
+  Send,
+  Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
+import { Textarea } from "@/components/ui/textarea";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
 import { cn } from "@/lib/utils";
 import type {
   ChatMessage,
@@ -19,48 +36,467 @@ import { Markdown } from "./markdown";
 
 interface QaMessageProps {
   message: ChatMessage;
+  /** Whether ANY turn in the session is currently streaming. All action
+   *  buttons disable during streaming to avoid racing the message list
+   *  against in-flight SSE flushes. */
+  busy: boolean;
+  onDelete(id: string, opts?: { withNextAssistant?: boolean }): void;
+  onResend(userId: string): void;
+  onRegenerate(assistantId: string): void;
+  onEditSave(userId: string, nextContent: string): void;
 }
 
-function QaMessageImpl({ message }: QaMessageProps) {
+function QaMessageImpl({
+  message,
+  busy,
+  onDelete,
+  onResend,
+  onRegenerate,
+  onEditSave,
+}: QaMessageProps) {
   if (message.role === "user") {
-    return <UserBubble content={message.content} />;
+    return (
+      <UserBubble
+        message={message}
+        busy={busy}
+        onDelete={onDelete}
+        onResend={onResend}
+        onEditSave={onEditSave}
+      />
+    );
   }
-  return <AssistantBlock message={message} />;
+  return (
+    <AssistantBlock
+      message={message}
+      busy={busy}
+      onDelete={onDelete}
+      onRegenerate={onRegenerate}
+    />
+  );
 }
 
 /**
  * Memoised so that streaming a delta to message N does not re-render
  * messages 0..N-1. Reference equality on the message object is enough
  * because useQaChat replaces the touched message via map() and keeps
- * untouched ones identical.
+ * untouched ones identical. The action callbacks are stable from the
+ * parent (chat hook returns stable refs), so we only diff on the message
+ * + busy flag.
  */
 export const QaMessage = memo(
   QaMessageImpl,
-  (prev, next) => prev.message === next.message,
+  (prev, next) => prev.message === next.message && prev.busy === next.busy,
 );
 QaMessage.displayName = "QaMessage";
 
-function UserBubble({ content }: { content: string }) {
+// ---------------------------------------------------------------------------
+// Hover-revealed action row + tiny button — shared by both bubble variants.
+// ---------------------------------------------------------------------------
+
+type MessageActionsProps = {
+  align: "left" | "right";
+  /** Disable all buttons (e.g. while another turn is streaming). */
+  disabled: boolean;
+  onCopy: () => void;
+  onDelete: () => void;
+  /** User-bubble specific. Falsy → button not rendered. */
+  onEdit?: () => void;
+  onResend?: () => void;
+  /** Assistant-bubble specific. */
+  onRegenerate?: () => void;
+};
+
+/**
+ * Hover-revealed icon row beneath a chat bubble. Default state is invisible
+ * (`opacity-0`) so the message list reads cleanly at rest; hover/focus on the
+ * parent bubble (controlled via `group-hover:` / `group-focus-within:`)
+ * fades the row in within 150ms — the ChatGPT/Claude convention. Mobile:
+ * parents add `data-touched="true"` after first tap to keep the row visible.
+ */
+function MessageActions({
+  align,
+  disabled,
+  onCopy,
+  onDelete,
+  onEdit,
+  onResend,
+  onRegenerate,
+}: MessageActionsProps) {
+  return (
+    <div
+      className={cn(
+        "mt-1 flex items-center gap-0.5 opacity-0 transition-opacity duration-150",
+        "group-hover:opacity-100 group-focus-within:opacity-100",
+        "group-data-[touched=true]:opacity-100",
+        align === "right" ? "justify-end" : "justify-start",
+      )}
+    >
+      <ActionButton title="复制" disabled={disabled} onClick={onCopy}>
+        <Copy className="h-3.5 w-3.5" />
+      </ActionButton>
+      {onEdit && (
+        <ActionButton title="编辑" disabled={disabled} onClick={onEdit}>
+          <Pencil className="h-3.5 w-3.5" />
+        </ActionButton>
+      )}
+      {onResend && (
+        <ActionButton title="重新发送" disabled={disabled} onClick={onResend}>
+          <Send className="h-3.5 w-3.5" />
+        </ActionButton>
+      )}
+      {onRegenerate && (
+        <ActionButton
+          title="重新生成"
+          disabled={disabled}
+          onClick={onRegenerate}
+        >
+          <RotateCcw className="h-3.5 w-3.5" />
+        </ActionButton>
+      )}
+      <ActionButton
+        title="删除"
+        disabled={disabled}
+        onClick={onDelete}
+        destructive
+      >
+        <Trash2 className="h-3.5 w-3.5" />
+      </ActionButton>
+    </div>
+  );
+}
+
+function ActionButton({
+  title,
+  disabled,
+  destructive,
+  onClick,
+  children,
+}: {
+  title: string;
+  disabled: boolean;
+  destructive?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      title={title}
+      aria-label={title}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        "h-7 w-7 text-muted-foreground hover:text-foreground",
+        destructive && "hover:text-[hsl(var(--destructive))] hover:bg-[hsl(var(--destructive))]/10",
+      )}
+    >
+      {children}
+    </Button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// In-message warning chips for non-fatal mid-flow failures (rewriter died,
+// some KBs returned errors). Static — these are passive notices, not
+// in-progress state, so no shimmer/pulse to compete with the brand-tinted
+// thinking pill.
+// ---------------------------------------------------------------------------
+
+type TurnNoticesProps = {
+  rewriteFailed?: boolean;
+  rewriteError?: string;
+  failedKbCount?: number;
+  failedKbDetails?: Array<{ name: string; reason: string }>;
+};
+
+function TurnNotices({
+  rewriteFailed,
+  rewriteError,
+  failedKbCount,
+  failedKbDetails,
+}: TurnNoticesProps) {
+  const hasRewrite = !!rewriteFailed;
+  const hasRetrieval = (failedKbCount ?? 0) > 0;
+  if (!hasRewrite && !hasRetrieval) return null;
+
   return (
-    <div className="flex justify-end">
-      <div className="max-w-[85%] rounded-2xl rounded-tr-sm bg-[hsl(var(--muted)/0.7)] px-4 py-2.5 text-sm leading-relaxed text-foreground whitespace-pre-wrap">
-        {content}
+    <div className="space-y-1.5">
+      {hasRewrite && (
+        <NoticeChip
+          label="意图重写失败 · 已回退到原问题"
+          detail={rewriteError ?? "rewriter 返回空结果或抛错"}
+        />
+      )}
+      {hasRetrieval && failedKbDetails && (
+        <NoticeChip
+          label={`${failedKbCount} 个知识库检索失败`}
+          detail={failedKbDetails
+            .map((d) => `• ${d.name}: ${d.reason}`)
+            .join("\n")}
+        />
+      )}
+    </div>
+  );
+}
+
+function NoticeChip({ label, detail }: { label: string; detail: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="rounded-md border border-amber-500/30 bg-amber-500/5">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className={cn(
+          "flex w-full items-center gap-1.5 px-2 py-1 text-xs",
+          "text-amber-700 hover:bg-amber-500/10 dark:text-amber-300",
+        )}
+      >
+        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
+        <span className="flex-1 text-left">{label}</span>
+        <ChevronDown
+          className={cn(
+            "h-3 w-3 opacity-60 transition-transform duration-150",
+            open && "rotate-180",
+          )}
+        />
+      </button>
+      {open && (
+        <pre className="border-t border-amber-500/20 px-2 py-1.5 text-[11px] leading-relaxed text-amber-700/80 dark:text-amber-300/80 whitespace-pre-wrap font-mono">
+          {detail}
+        </pre>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// User bubble — copy / edit / resend / delete.
+// ---------------------------------------------------------------------------
+
+function UserBubble({
+  message,
+  busy,
+  onDelete,
+  onResend,
+  onEditSave,
+}: {
+  message: ChatMessage;
+  busy: boolean;
+  onDelete: QaMessageProps["onDelete"];
+  onResend: QaMessageProps["onResend"];
+  onEditSave: QaMessageProps["onEditSave"];
+}) {
+  const [touched, setTouched] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(message.content);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [confirmResendOpen, setConfirmResendOpen] = useState(false);
+  const [withNextAssistant, setWithNextAssistant] = useState(true);
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(message.content);
+    toast.success("已复制");
+  }, [message.content]);
+
+  const handleSaveEdit = useCallback(() => {
+    const trimmed = draft.trim();
+    if (!trimmed || trimmed === message.content) {
+      setEditing(false);
+      setDraft(message.content);
+      return;
+    }
+    setEditing(false);
+    onEditSave(message.id, trimmed);
+  }, [draft, message.content, message.id, onEditSave]);
+
+  const handleCancelEdit = useCallback(() => {
+    setDraft(message.content);
+    setEditing(false);
+  }, [message.content]);
+
+  const handleEditKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleCancelEdit();
+      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSaveEdit();
+      }
+    },
+    [handleSaveEdit, handleCancelEdit],
+  );
+
+  return (
+    <div
+      className="group flex justify-end"
+      data-touched={touched ? "true" : undefined}
+      onClickCapture={() => setTouched(true)}
+    >
+      <div className="flex max-w-[85%] flex-col items-end">
+        {editing ? (
+          <div className="w-full max-w-2xl rounded-2xl border border-[hsl(var(--primary))] bg-[hsl(var(--background))] p-2">
+            <Textarea
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              onKeyDown={handleEditKeyDown}
+              className="min-h-[80px] resize-y border-0 p-2 text-sm shadow-none focus-visible:ring-0"
+            />
+            <div className="mt-1 flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleCancelEdit}
+              >
+                取消
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                disabled={!draft.trim() || draft.trim() === message.content}
+                onClick={handleSaveEdit}
+              >
+                保存并重发
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="rounded-2xl rounded-tr-sm bg-[hsl(var(--muted)/0.7)] px-4 py-2.5 text-sm leading-relaxed text-foreground whitespace-pre-wrap">
+            {message.content}
+          </div>
+        )}
+        {!editing && (
+          <MessageActions
+            align="right"
+            disabled={busy}
+            onCopy={handleCopy}
+            onEdit={() => {
+              setDraft(message.content);
+              setEditing(true);
+            }}
+            onResend={() => setConfirmResendOpen(true)}
+            onDelete={() => setConfirmDeleteOpen(true)}
+          />
+        )}
       </div>
+
+      <ConfirmDialog
+        open={confirmDeleteOpen}
+        onOpenChange={setConfirmDeleteOpen}
+        title="删除此消息？"
+        description="该操作不可撤销。"
+        confirmText="删除"
+        variant="danger"
+        onConfirm={() => {
+          onDelete(message.id, { withNextAssistant });
+          setConfirmDeleteOpen(false);
+        }}
+      >
+        <label className="flex items-center gap-2 text-sm text-foreground">
+          <Checkbox
+            checked={withNextAssistant}
+            onCheckedChange={(v) => setWithNextAssistant(v === true)}
+          />
+          同时删除下方的 AI 回复
+        </label>
+      </ConfirmDialog>
+
+      <ConfirmDialog
+        open={confirmResendOpen}
+        onOpenChange={setConfirmResendOpen}
+        title="重新发送此消息？"
+        description="将丢弃下方所有消息并重新生成回答。"
+        confirmText="重新发送"
+        onConfirm={() => {
+          setConfirmResendOpen(false);
+          onResend(message.id);
+        }}
+      />
     </div>
   );
 }
 
-function AssistantBlock({ message }: { message: ChatMessage }) {
+function AssistantBlock({
+  message,
+  busy,
+  onDelete,
+  onRegenerate,
+}: {
+  message: ChatMessage;
+  busy: boolean;
+  onDelete: QaMessageProps["onDelete"];
+  onRegenerate: QaMessageProps["onRegenerate"];
+}) {
+  const [touched, setTouched] = useState(false);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [confirmRegenOpen, setConfirmRegenOpen] = useState(false);
+
   const isStreaming = message.status === "streaming";
   const hasError = message.status === "error";
+  const hasReasoningText = (message.reasoning?.length ?? 0) > 0;
+  const hasContent = (message.content?.length ?? 0) > 0;
+
+  // Render the pill the moment a turn is in flight, **before** any reasoning
+  // chunk arrives. The server's RAG path runs query rewriting (~1-3s LLM
+  // call) and retrieval (~0.5-2s) before opening the upstream model stream,
+  // so `reasoning.delta` can be 2-5s away from the user's send. Without
+  // this early-render the assistant area sits blank during the entire
+  // pre-stream gap and the latency reads as a UI bug.
+  //
+  // For non-reasoning models the pill stays visible until the first
+  // `content.delta` arrives — `hasContent` flipping true makes both branches
+  // false (no reasoning text, content present) and the pill cleanly hands
+  // off to the streaming text below.
+  const showReasoningPill = hasReasoningText || (isStreaming && !hasContent);
+
+  // Stage of the pre-reasoning phase, derived from server events that arrive
+  // before the model's first token. Lets the label move through「检索意图
+  // 提取 → 正在检索知识库 → 正在思考 → 深度思考中」instead of sitting on
+  // a single generic word for the multiple seconds the server spends
+  // rewriting and retrieving.
+  const intentExtracting = !!message.usingRag && !message.retrievalQuery;
+  const retrievalInFlight =
+    !!message.retrievalQuery && !message.retrievedChunks;
+
+  // Aggregate per-KB retrieval errors so the TurnNotices chip can surface
+  // them without forcing the user to expand the chunks panel.
+  const failedKbDetails = (message.retrievalGroups ?? [])
+    .filter((g) => g.error)
+    .map((g) => ({ name: g.knowledgeBaseName, reason: g.error ?? "" }));
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(message.content);
+    toast.success("已复制");
+  }, [message.content]);
 
   return (
-    <div className="space-y-3 text-sm leading-relaxed">
-      {/* Reasoning collapsible (only present on reasoning-capable models). */}
-      {message.reasoning ? (
-        <ReasoningBlock reasoning={message.reasoning} streaming={isStreaming} />
+    <div
+      className="group space-y-3 text-sm leading-relaxed"
+      data-touched={touched ? "true" : undefined}
+      onClickCapture={() => setTouched(true)}
+    >
+      {showReasoningPill ? (
+        <ReasoningBlock
+          reasoning={message.reasoning ?? ""}
+          streaming={isStreaming}
+          startedAt={message.reasoningStartedAt}
+          completedAt={message.reasoningCompletedAt}
+          intentExtracting={intentExtracting}
+          retrievalInFlight={retrievalInFlight}
+        />
       ) : null}
 
+      <TurnNotices
+        rewriteFailed={message.queryRewriteFailed}
+        rewriteError={message.queryRewriteError}
+        failedKbCount={failedKbDetails.length}
+        failedKbDetails={failedKbDetails}
+      />
+
       {/* Rewritten retrieval query — only shown when it differs from the
           raw user input, so first-turn questions stay clean. */}
       {message.retrievalQueryRewritten && message.retrievalQuery ? (
@@ -97,54 +533,218 @@ function AssistantBlock({ message }: { message: ChatMessage }) {
           ) : null}
         </div>
       )}
+
+      {/* Hover-revealed action row. Hidden during streaming so users can't
+          trigger destructive ops while SSE is mid-flush. */}
+      <MessageActions
+        align="left"
+        disabled={busy || isStreaming}
+        onCopy={handleCopy}
+        onRegenerate={() => setConfirmRegenOpen(true)}
+        onDelete={() => setConfirmDeleteOpen(true)}
+      />
+
+      <ConfirmDialog
+        open={confirmDeleteOpen}
+        onOpenChange={setConfirmDeleteOpen}
+        title="删除此回复？"
+        description="该操作不可撤销。"
+        confirmText="删除"
+        variant="danger"
+        onConfirm={() => {
+          onDelete(message.id);
+          setConfirmDeleteOpen(false);
+        }}
+      />
+
+      <ConfirmDialog
+        open={confirmRegenOpen}
+        onOpenChange={setConfirmRegenOpen}
+        title="重新生成此回复？"
+        description="将丢弃下方所有消息并重新生成。"
+        confirmText="重新生成"
+        onConfirm={() => {
+          setConfirmRegenOpen(false);
+          onRegenerate(message.id);
+        }}
+      />
     </div>
   );
 }
 
+/**
+ * Live-ticking elapsed-seconds counter. Returns null while `start` is
+ * undefined (reasoning hasn't begun); freezes when `end` is set so the
+ * "thought for X seconds" indicator stops climbing the moment the model
+ * moves on. Tick cadence is 250ms — fine enough to feel live, coarse
+ * enough that React doesn't burn frames re-rendering a string.
+ */
+function useElapsedMs(start?: number, end?: number): number | null {
+  const [now, setNow] = useState<number>(() => Date.now());
+  useEffect(() => {
+    if (!start || end) return;
+    const id = window.setInterval(() => setNow(Date.now()), 250);
+    return () => window.clearInterval(id);
+  }, [start, end]);
+  if (!start) return null;
+  return Math.max(0, (end ?? now) - start);
+}
+
+/** Format elapsed milliseconds for the thinking pill. While the model is
+ *  still working the format is `mm:ss` (live counter feel); after settle it
+ *  becomes the friendlier "X 秒" / "X 分 Y 秒" reading conversational
+ *  agents like DeepSeek and Doubao have made the de-facto Chinese standard. */
+function formatElapsed(ms: number, settled: boolean): string {
+  const totalSec = Math.floor(ms / 1000);
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  if (settled) {
+    if (m === 0) return `用时 ${s} 秒`;
+    return `用时 ${m} 分 ${s} 秒`;
+  }
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
 function ReasoningBlock({
   reasoning,
   streaming,
+  startedAt,
+  completedAt,
+  intentExtracting,
+  retrievalInFlight,
 }: {
   reasoning: string;
   streaming: boolean;
+  startedAt?: number;
+  completedAt?: number;
+  intentExtracting?: boolean;
+  retrievalInFlight?: boolean;
 }) {
   // Collapse by default; let the user opt in explicitly. Avoids the
   // distracting auto-expand while the model is still producing tokens.
   const [open, setOpen] = useState(false);
 
+  // Elapsed counter is anchored to the first reasoning chunk, NOT the send
+  // time — measuring "thought for N seconds" should exclude server-side
+  // pre-thinking work (query rewrite, retrieval). When startedAt is
+  // undefined the hook returns null, which we render as no time chip.
+  const elapsedMs = useElapsedMs(startedAt, completedAt);
+  const settled = !streaming || Boolean(completedAt);
+  const elapsedLabel =
+    elapsedMs != null ? formatElapsed(elapsedMs, settled) : null;
+  const active = streaming && !completedAt;
+  const hasReasoningText = reasoning.length > 0;
+
+  // Active label escalates as more state lands. The pre-reasoning labels are
+  // important: without them, RAG turns sit on a single label for several
+  // seconds before any model token arrives, which reads as a hang.
+  //
+  // Order matters — the most specific (and earliest-firing) state wins:
+  //   intent  → server is running the rewriter LLM  (RAG turns only)
+  //   retrieve → KB queries are in-flight
+  //   thinking → retrieval done, model preparing first token
+  //   deep    → reasoning tokens are streaming
+  let activeLabel = "正在思考";
+  if (hasReasoningText) {
+    activeLabel = "深度思考中";
+  } else if (retrievalInFlight) {
+    activeLabel = "正在检索知识库";
+  } else if (intentExtracting) {
+    activeLabel = "检索意图提取";
+  }
+
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
       <CollapsibleTrigger asChild>
         <button
           type="button"
+          // A pill with no body to expand should not pretend to be expandable
+          // — disable the trigger and drop the chevron until reasoning text
+          // actually exists.
+          disabled={!hasReasoningText}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium",
-            "text-muted-foreground transition-colors hover:bg-[hsl(var(--accent))] hover:text-foreground",
+            // Pill chrome: rounded-full with proportional padding, sitting on
+            // a soft tinted backdrop. The active state turns the backdrop
+            // primary-tinted with a hairline ring so the badge clearly reads
+            // as "live", matching the convention popularised by Claude and
+            // DeepSeek for in-progress reasoning.
+            "group inline-flex items-center gap-2 rounded-full pl-1.5 pr-2.5 py-1 text-xs font-medium transition-all duration-200",
+            active
+              ? "bg-[hsl(var(--primary)/0.08)] text-[hsl(var(--primary))] ring-1 ring-[hsl(var(--primary)/0.25)] shadow-[0_0_0_4px_hsl(var(--primary)/0.06)]"
+              : "bg-[hsl(var(--muted)/0.6)] text-muted-foreground hover:bg-[hsl(var(--accent))] hover:text-foreground",
+            // Don't show the disabled cursor on the no-content active pill —
+            // it correctly conveys "this isn't clickable yet" without making
+            // the live indicator feel broken.
+            !hasReasoningText && "cursor-default",
           )}
+          aria-live={active ? "polite" : "off"}
         >
-          <Brain className="h-3.5 w-3.5" />
-          {streaming ? (
-            // Claude-style shimmer: a gradient sweeps across the text to
-            // convey "thinking in progress" without being distracting.
-            <span className="animate-text-shimmer bg-[linear-gradient(90deg,hsl(var(--muted-foreground))_0%,hsl(var(--foreground))_50%,hsl(var(--muted-foreground))_100%)] bg-[length:200%_100%] bg-clip-text text-transparent">
-              深度思考中
+          {/*
+            Brain avatar with an aurora halo. The halo is a separate blurred
+            element behind the icon so its scale-and-fade animation can run
+            independently of the icon's own breathing pulse — composing two
+            transforms on the same element would force them to share a
+            transform property.
+          */}
+          <span className="relative inline-flex h-5 w-5 items-center justify-center">
+            {active && (
+              <span
+                aria-hidden
+                className="absolute inset-0 rounded-full bg-[hsl(var(--primary))] opacity-40 blur-[6px] animate-thinking-aurora"
+              />
+            )}
+            <Brain
+              className={cn(
+                "relative h-3.5 w-3.5",
+                active && "animate-thinking-icon text-[hsl(var(--primary))]",
+              )}
+            />
+          </span>
+
+          {active ? (
+            // Brand-tinted shimmer band sweeping through neutral text. Much
+            // higher contrast than the previous muted→foreground gradient,
+            // so the motion actually reads at a glance. The label text still
+            // stays legible because the gradient stops keep the bookends
+            // saturated rather than transparent.
+            <span className="animate-text-shimmer bg-[linear-gradient(90deg,hsl(var(--primary)/0.55)_0%,hsl(var(--primary))_50%,hsl(var(--primary)/0.55)_100%)] bg-[length:200%_100%] bg-clip-text text-transparent">
+              {activeLabel}
             </span>
           ) : (
-            "深度思考"
+            <span>已深度思考</span>
+          )}
+
+          {elapsedLabel && (
+            <span
+              className={cn(
+                "tabular-nums text-[11px]",
+                active
+                  ? "text-[hsl(var(--primary)/0.75)]"
+                  : "text-muted-foreground/80",
+              )}
+            >
+              · {elapsedLabel}
+            </span>
+          )}
+
+          {hasReasoningText && (
+            <ChevronDown
+              className={cn(
+                "h-3 w-3 opacity-60 transition-transform duration-200",
+                open && "rotate-180",
+                active && "text-[hsl(var(--primary))]",
+              )}
+            />
           )}
-          <ChevronDown
-            className={cn(
-              "h-3 w-3 transition-transform duration-200",
-              open && "rotate-180",
-            )}
-          />
         </button>
       </CollapsibleTrigger>
-      <CollapsibleContent>
-        <div className="mt-2 border-l-2 border-[hsl(var(--border))] pl-3 text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap">
-          {reasoning}
-        </div>
-      </CollapsibleContent>
+      {hasReasoningText && (
+        <CollapsibleContent>
+          <div className="mt-2 border-l-2 border-[hsl(var(--border))] pl-3 text-xs leading-relaxed text-muted-foreground whitespace-pre-wrap">
+            {reasoning}
+          </div>
+        </CollapsibleContent>
+      )}
     </Collapsible>
   );
 }