feat(chat): 显示实时生成速度与首个输出耗时

apps/desktop/electron/main/index.ts

@@ -52,7 +52,7 @@ import {
 import { PersistenceOutbox } from "./persistence-outbox";
 import { AgentSidecar } from "./agent-sidecar";
 import { Logger, ignoreBrokenStdio } from "./logger";
-import { installMainProcessErrorHandlers } from "./main-process-errors";
+import { describeError, installMainProcessErrorHandlers } from "./main-process-errors";
 import {
   isDbSchemaTooNewError,
 } from "./host-boot-diagnostics";
@@ -791,12 +791,6 @@ function setCurrentWorkspacePath(path: string | null): void {
   }
 }
 
-/** One-line message for an error of unknown shape, for user-facing lists. */
-function describeError(error: unknown): string {
-  if (error instanceof Error) return error.message.slice(0, 300);
-  return String(error).slice(0, 300);
-}
-
 /**
  * True when a rejection only says the host transport is gone (D080): the call
  * lost a race with shutdown, a crash, or a supervised restart. Every such

apps/desktop/electron/main/main-process-errors.ts

@@ -46,6 +46,12 @@ export function isNonAsciiHttpHeaderError(error: unknown): boolean {
   );
 }
 
+/** One-line message for an error of unknown shape, for user-facing lists. */
+export function describeError(error: unknown): string {
+  if (error instanceof Error) return error.message.slice(0, 300);
+  return String(error).slice(0, 300);
+}
+
 export function describeMainProcessError(error: unknown): string {
   if (error instanceof Error) {
     return error.stack ?? `${error.name}: ${error.message}`;

apps/desktop/src/components/settings/RemoteHostsPage.tsx

@@ -245,8 +245,8 @@ export function RemoteHostsPage() {
             value={addMode}
             onChange={(mode) => setAddMode(mode)}
             options={[
-              { value: "ssh", label: t("settings.remoteHosts.addSsh") },
-              { value: "pair", label: t("settings.remoteHosts.addPair") },
+              { value: "ssh", id: "remote-host-add-ssh", controls: "remote-host-add-panel-ssh", label: t("settings.remoteHosts.addSsh") },
+              { value: "pair", id: "remote-host-add-pair", controls: "remote-host-add-panel-pair", label: t("settings.remoteHosts.addPair") },
             ]}
             label={t("settings.remoteHosts.addTitle")}
             role="tablist"

apps/desktop/src/components/ui.tsx

@@ -695,7 +695,12 @@ export function SegmentedControl<T extends string>({
 }: {
   value: T;
   onChange: (value: T) => void;
-  options: readonly { readonly value: T; readonly label: ReactNode }[];
+  options: readonly {
+    readonly value: T;
+    readonly label: ReactNode;
+    readonly id?: string;
+    readonly controls?: string;
+  }[];
   label: string;
   role?: "group" | "radiogroup" | "tablist";
   className?: string;
@@ -714,7 +719,12 @@ export function SegmentedControl<T extends string>({
           key={option.value}
           type="button"
           {...(itemRole === "tab"
-            ? { role: "tab", id: `${label}-tab-${option.value}`, "aria-selected": value === option.value }
+            ? {
+              role: "tab",
+              id: option.id ?? `${label}-tab-${option.value}`,
+              "aria-selected": value === option.value,
+              "aria-controls": option.controls,
+            }
             : itemRole === "radio"
               ? { role: "radio", "aria-checked": value === option.value }
               : { "aria-pressed": value === option.value })}

apps/desktop/src/features/chat/transcript/AssistantTurn.tsx

@@ -34,13 +34,15 @@ import {
   shouldGroupTurnProcess,
 } from "../../../lib/turn-process";
 import { useAppStore } from "../../../stores/app-store";
+import { latestGenerationMessage } from "../../../lib/live-throughput";
 import { Markdown } from "../../../components/Markdown";
 import { IconBranch, IconReview } from "../../../components/icons";
 import { TooltipButton } from "../../../components/ui";
 import {
   AssistantErrorMessage,
   CopyButton,
   MessageMeta,
+  LiveMessageMeta,
   MessageTimestamp,
 } from "./shared";
 import { activityItemsEqual, ActivityGroup } from "./ActivityGroup";
@@ -295,6 +297,9 @@ export const AssistantTurn = memo(function AssistantTurn({
   const responseDurationMs = assistantTurnResponseDuration(entry);
   const responseOutputTokens = assistantTurnResponseOutputTokens(entry);
   const modelId = metaMessage?.modelId ?? latestUsageMessage?.modelId;
+  // The tail message is the one still growing; the live rate is estimated from
+  // it because the provider only reports usage at message_end.
+  const latestMessage = latestGenerationMessage(entry);
   const hasError = messages.some((message) => Boolean(message.error));
   const complete =
     !isActive && !hasError && Boolean(content) && Boolean(actionMessage);
@@ -413,12 +418,23 @@ export const AssistantTurn = memo(function AssistantTurn({
         {turnAllActivityItems.filter((item) => item.kind === "tool" && item.message.toolName === "GenerateImages").map((item) => (
           <GeneratedImages key={item.message.id} message={item.message} />
         ))}
-        {!isActive && metaMessage ? (
+        {!isActive && (metaMessage || latestMessage?.timeToFirstTokenMs !== undefined) ? (
           <MessageMeta
             modelId={modelId}
             usage={usage}
             responseDurationMs={responseDurationMs}
             responseOutputTokens={responseOutputTokens}
+            timeToFirstTokenMs={latestMessage?.timeToFirstTokenMs}
+          />
+        ) : null}
+        {isActive ? (
+          <LiveMessageMeta
+            key={entry.id}
+            modelId={modelId}
+            message={latestMessage}
+            toolRunning={turnAllActivityItems.some(
+              (item) => item.kind === "tool" && item.message.toolStatus === "running",
+            )}
           />
         ) : null}
         {complete && actionMessage ? (

apps/desktop/src/features/chat/transcript/FirstOutputLatency.tsx

@@ -0,0 +1,14 @@
+import { useTranslation } from "react-i18next";
+
+/** A measured request latency; absent on old records and before the first output. */
+export function FirstOutputLatency({ milliseconds }: { milliseconds?: number }) {
+  const { t } = useTranslation();
+  if (milliseconds === undefined || !Number.isFinite(milliseconds) || milliseconds < 0) {
+    return null;
+  }
+  return (
+    <span className="message-meta-chip first-output-latency" title={t("chat.firstOutputHint")}>
+      {t("chat.firstOutputLatency", { seconds: (milliseconds / 1000).toFixed(1) })}
+    </span>
+  );
+}

apps/desktop/src/features/chat/transcript/shared.tsx

@@ -1,3 +1,4 @@
+import { FirstOutputLatency } from "./FirstOutputLatency";
 import {
   memo,
   useCallback,
@@ -19,6 +20,9 @@ import {
   type ThinkingLevel,
 } from "@pi-desktop/shared";
 import { useOpenChatFileRef, useOpenPreviewTarget } from "../../../hooks/use-preview-target";
+import { generationPhase, type ThroughputMessage } from "../../../lib/live-throughput";
+import { useLiveThroughput } from "./use-live-throughput";
+
 import { useDisclosureAnchorNotifier } from "../../../lib/disclosure-anchor-context";
 import { isThinkingActive, resolveThinkingDisplayMode } from "../../../lib/turn-process";
 import { TranscriptSearchContext } from "../../../lib/transcript-search-context";
@@ -155,19 +159,21 @@ export function MessageMeta({
   usage,
   responseDurationMs,
   responseOutputTokens,
+  timeToFirstTokenMs,
 }: {
   modelId?: string;
   usage?: MessageUsage;
   responseDurationMs?: number;
   responseOutputTokens?: number;
+  timeToFirstTokenMs?: number;
 }) {
   const { t } = useTranslation();
   const throughput = calculateTokenRate(
     responseOutputTokens ?? usage?.outputTokens ?? 0,
     responseDurationMs,
   );
   const showThroughput = !usage && throughput !== undefined;
-  if (!modelId && !showThroughput) {
+  if (!modelId && !showThroughput && timeToFirstTokenMs === undefined) {
     return null;
   }
   return (
@@ -177,6 +183,7 @@ export function MessageMeta({
           {modelId}
         </span>
       ) : null}
+      <FirstOutputLatency milliseconds={timeToFirstTokenMs} />
       {showThroughput ? (
         <span className="message-meta-chip throughput">
           {t("chat.usageThroughputEstimated", {
@@ -188,6 +195,61 @@ export function MessageMeta({
   );
 }
 
+/**
+ * Meta row for the turn that is still streaming.
+ *
+ * Mounted only for the active tail turn, which keeps the sampler and its
+ * interval off every history row and keeps per-token work out of the store.
+ * The figure is always an estimate — the provider reports usage once, at
+ * `message_end` — so it carries the "≈" copy (ADR 0073 §4), and `MessageMeta`
+ * takes over with the exact value once the turn completes.
+ */
+export function LiveMessageMeta({
+  modelId,
+  message,
+  toolRunning = false,
+}: {
+  modelId?: string;
+  message?: ThroughputMessage;
+  toolRunning?: boolean;
+}) {
+  const { t } = useTranslation();
+  const phase = generationPhase(message, toolRunning);
+  const generating = phase === "thinking" || phase === "generating";
+  const { rate, stale } = useLiveThroughput(message, generating);
+  const phaseLabel = t({
+    waiting: "chat.liveWaiting",
+    thinking: "chat.thinking",
+    generating: "chat.liveGenerating",
+    tool: "chat.liveToolRunning",
+  }[phase]);
+  const rateLabel = rate === undefined ? undefined : t("chat.usageThroughputEstimated", {
+    count: Math.round(rate),
+  });
+  return (
+    <div className="message-meta">
+      {modelId ? (
+        <span className="message-meta-chip model" title={modelId}>
+          {modelId}
+        </span>
+      ) : null}
+      <FirstOutputLatency milliseconds={generating ? message?.timeToFirstTokenMs : undefined} />
+      <span className="message-meta-chip generation-phase" data-generation-phase={phase}>
+        {phaseLabel}
+      </span>
+      {rate === undefined ? null : (
+        <span
+          className="message-meta-chip throughput"
+          data-stale={stale ? "true" : undefined}
+          title={t("chat.usageThroughputLabel")}
+        >
+          {stale ? t("chat.liveLastRate", { rate: rateLabel }) : rateLabel}
+        </span>
+      )}
+    </div>
+  );
+}
+
 export function AssistantErrorMessage({ message }: { message: UiMessage }) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(true);

apps/desktop/src/features/chat/transcript/use-live-throughput.ts

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  LIVE_THROUGHPUT_SAMPLE_MS,
+  advanceThroughput,
+  type LiveTokenRate,
+  type ThroughputMessage,
+  type ThroughputTracker,
+} from "../../../lib/live-throughput";
+
+/** Only the active turn mounts this sampler. Committed props feed a fixed cadence. */
+export function useLiveThroughput(
+  message: ThroughputMessage | undefined,
+  generating: boolean,
+): LiveTokenRate {
+  const inputRef = useRef({ message, generating });
+  const trackerRef = useRef<ThroughputTracker>({ samples: [] });
+  const [view, setView] = useState<LiveTokenRate & { messageId?: string }>({ stale: false });
+
+  useEffect(() => {
+    inputRef.current = { message, generating };
+  }, [message, generating]);
+
+  useEffect(() => {
+    const sample = () => {
+      const input = inputRef.current;
+      const next = advanceThroughput(
+        trackerRef.current, input.message, input.generating, performance.now(),
+      );
+      trackerRef.current = next.tracker;
+      setView((previous) =>
+        previous.rate === next.view.rate && previous.stale === next.view.stale &&
+        previous.messageId === input.message?.id
+          ? previous
+          : { ...next.view, messageId: input.message?.id },
+      );
+    };
+    sample();
+    const timer = window.setInterval(sample, LIVE_THROUGHPUT_SAMPLE_MS);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  return {
+    rate: view.rate,
+    stale: view.stale || !generating || view.messageId !== message?.id,
+  };
+}

apps/desktop/src/features/settings/import-page.tsx

@@ -61,6 +61,8 @@ export function ImportSection() {
         onChange={(value) => setKind(value)}
         options={IMPORT_KINDS.map((entry) => ({
           value: entry.id,
+          id: `import-tab-${entry.id}`,
+          controls: `import-panel-${entry.id}`,
           label: t(entry.labelKey),
         }))}
         label={t("settings.import")}