@steerable/agent-shell-web 0.7.2 → 0.8.0

package/src/components/chat/LocalChatPanel.tsx

@@ -18,6 +18,8 @@ import type { InspectTaskInput } from './executed-actions-model';
 import type { ChildInfo } from './OrchestrationChildrenCard';
 import type { TurnBlock } from './turn-timeline';
 import type { TurnFile } from './turn-files';
+import type { RetryState } from './RetryStatus';
+import type { TurnFailureCardProps } from './TurnFailureCard';
 import type { LlmSpeedSnapshot } from './process-status';
 import { ComposerStatusStack } from './composer-status-stack';
 import { t } from '@/i18n';
@@ -120,6 +122,10 @@ export interface LocalChatPanelProps {
   orchestrationChildrenByMessageId?: Record<string, ChildInfo[]>;
   /** Current round number for the in-flight turn (1-based). */
   currentRound?: number;
+  /** Live "reconnecting" state of the in-flight turn (see RetryStatus). */
+  retryState?: RetryState | null;
+  /** Resolves a failed turn's action buttons (see TurnFailureCard). */
+  failureAction?: TurnFailureCardProps['action'];
   /**
    * Settings gear callback for the input toolbar. Receiving this enables
    * the gear button on `ChatInput`; AgentPage wires it to opening
@@ -196,6 +202,8 @@ export function LocalChatPanel({
   currentTurnChildren,
   orchestrationChildrenByMessageId,
   currentRound,
+  retryState,
+  failureAction,
   onOpenSettings,
   inputToolbarExtras,
   inputLeadingChrome,
@@ -509,6 +517,8 @@ export function LocalChatPanel({
                 currentTurnChildren={currentTurnChildren}
                 orchestrationChildrenByMessageId={orchestrationChildrenByMessageId}
                 currentRound={currentRound}
+                retryState={retryState}
+                failureAction={failureAction}
                 emptyState={emptyState ?? <EmptyChat onSelectPrompt={handleSelectPrompt} />}
                 mode={mode}
                 onRegenerate={onRegenerate}

package/src/components/chat/MessageList.tsx

@@ -25,6 +25,8 @@ import { followedPreviewPath, type TurnFile } from './turn-files';
 import { publishConversationPreview } from '@/layouts/conversation-preview';
 import { inferDurationMs, readPersistedDurationMs } from './elapsed';
 import type { LlmSpeedSnapshot } from './process-status';
+import type { RetryState } from './RetryStatus';
+import type { TurnFailureCardProps } from './TurnFailureCard';
 
 /**
  * MessageList — scrolling viewport that renders user/assistant message
@@ -154,6 +156,13 @@ interface MessageListProps {
    * AssistantMessage so its `StreamingStatus` can show "Round 2 · 继续推理...".
    */
   currentRound?: number;
+  /**
+   * Live "reconnecting" state of the in-flight turn (backend `turn_retry`).
+   * Forwarded to the tail message so the status line replaces "thinking".
+   */
+  retryState?: RetryState | null;
+  /** Resolves a failed turn's action buttons (see TurnFailureCard). */
+  failureAction?: TurnFailureCardProps['action'];
   /** Current chat mode (Agent / Plan). */
   mode?: ChatMode;
   /** W1.2.1: regenerate an assistant turn (fork-preserving). */
@@ -207,6 +216,8 @@ export function MessageList({
   currentTurnChildren,
   orchestrationChildrenByMessageId,
   currentRound,
+  retryState,
+  failureAction,
   mode,
   onRegenerate,
   interrupted = false,
@@ -530,6 +541,16 @@ export function MessageList({
                         orchestrationChildren={childList}
                         previousUser={previousUser}
                         currentRound={isStreamingTail ? currentRound : undefined}
+                        retryState={isStreamingTail ? retryState : null}
+                        // 「继续」只属于当前最后一个回合：用户已经发了新消息
+                        // 时，继续旧回合会把旧任务的输出接在新消息之后，前后
+                        // 顺序就乱了。判据是「这条是不是会话里最后一条消息」，
+                        // 不是「最后一条助手消息」——后者在用户已追问后仍成立。
+                        failureAction={
+                          message.id === lastAssistantId && isLast
+                            ? failureAction
+                            : undefined
+                        }
                         isPlanMode={isPlanMode}
                         onRegenerate={onRegenerate}
                         startedAtMs={isStreamingTail ? currentTurnStartedAtMs : undefined}

package/src/components/chat/RetryStatus.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { t } from '@/i18n';
+
+/**
+ * RetryStatus — "reconnecting" line for a model request that is being retried.
+ *
+ * The backend retries connection failures on a seconds-scale backoff, so a
+ * turn that is working looks identical to one that is stuck. This renders the
+ * three facts a waiting user needs: it is retrying, since when, and that Stop
+ * still works. The elapsed label appears only after
+ * `RETRY_ELAPSED_VISIBLE_MS`, because a sub-10s wait reads as progress while a
+ * ticking timer on a short wait reads as a problem.
+ */
+
+/** Elapsed seconds are shown from here on: 10s is where a wait needs progress. */
+export const RETRY_ELAPSED_VISIBLE_MS = 10_000;
+
+export interface RetryState {
+  /** Epoch ms when the first retry of this request started. */
+  startedAt: number;
+  /** Delay the loop announced for this attempt, for the next tick. */
+  delayMs?: number;
+}
+
+interface RetryStatusProps {
+  /** Live retry state, or undefined once the request is no longer retrying. */
+  retry: RetryState;
+  /** Injectable clock for tests; real time by default. */
+  now?: () => number;
+}
+
+/** Seconds waited so far; exported for the label's unit tests. */
+export function waitedSeconds(startedAt: number, now: number): number {
+  return Math.max(0, Math.floor((now - startedAt) / 1000));
+}
+
+/** The line's text: bare "reconnecting", then the elapsed count. */
+export function retryLabel(startedAt: number, now: number): string {
+  const waited = waitedSeconds(startedAt, now);
+  if (now - startedAt < RETRY_ELAPSED_VISIBLE_MS) {
+    return t('Network unstable, reconnecting…');
+  }
+  return t('Network unstable, reconnecting… ({seconds}s)', { seconds: waited });
+}
+
+export function RetryStatus({ retry, now = Date.now }: RetryStatusProps) {
+  const [tick, setTick] = useState(() => now());
+  useEffect(() => {
+    const id = window.setInterval(() => setTick(now()), 1000);
+    return () => window.clearInterval(id);
+  }, [now, retry.startedAt]);
+
+  const current = Math.max(tick, retry.startedAt);
+
+  return (
+    <motion.div
+      key="retry"
+      initial={{ opacity: 0, y: 2 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+      // `polite` announces the line once when it appears. The elapsed counter
+      // updates every second but is not announced again: it is informational,
+      // and a per-second announcement would interrupt screen-reader reading.
+      role="status"
+      aria-live="polite"
+      aria-atomic="true"
+      className="my-2 inline-flex items-center gap-2 text-xs text-agent-warning"
+      data-testid="retry-status"
+    >
+      <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-r-transparent" />
+      <span>{retryLabel(retry.startedAt, current)}</span>
+    </motion.div>
+  );
+}
+
+export default RetryStatus;

package/src/components/chat/StreamingStatus.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
 import { t } from '@/i18n';
+import { RetryStatus, type RetryState } from './RetryStatus';
 
 /**
  * StreamingStatus — informative placeholder for an assistant bubble that has
@@ -30,13 +31,21 @@ interface StreamingStatusProps {
    * nothing (the content + cursor blink is enough).
    */
   hasContent: boolean;
+  /**
+   * Set while the request is being retried. Outranks `hasContent`: a turn
+   * that already streamed text and then lost its connection is waiting, not
+   * writing, and the cursor alone would read as a stall.
+   */
+  retry?: RetryState;
 }
 
 export function StreamingStatus({
   round,
   actionCount,
   hasContent,
+  retry,
 }: StreamingStatusProps) {
+  if (retry) return <RetryStatus retry={retry} />;
   // Once tokens are flowing the parent already has plenty of visual feedback
   // (the streaming cursor); a separate status line would be noise.
   if (hasContent) return null;

package/src/components/chat/TurnFailureCard.tsx

@@ -0,0 +1,272 @@
+import { useState } from 'react';
+import { LuChevronDown, LuChevronUp, LuCopy, LuTriangleAlert } from 'react-icons/lu';
+import { t } from '@/i18n';
+import {
+  failurePresentation,
+  type FailureAction,
+  type TurnFailureDetail,
+} from './turn-failure';
+
+/**
+ * TurnFailureCard — what a failed turn shows in place of an answer.
+ *
+ * Two layers, chosen by who reads them. The headline and one sentence say
+ * what happened and what to do next; nobody needs `SSLEOFError` to press
+ * Continue. The details disclosure holds the raw cause, the hop the request
+ * took, and the trace id — the material a support reply or a bug report
+ * needs, which is exactly why it must not be in the way.
+ *
+ * The card never decides whether an action is available; it renders the ones
+ * its caller passed and shows the rest as disabled. That keeps the choice of
+ * "what can this build actually do" in one place (the message list) instead of
+ * duplicating capability checks per failure kind.
+ */
+
+export interface TurnFailureCardProps {
+  /** Classified detail, when the backend recorded one. */
+  detail?: TurnFailureDetail;
+  /** Raw failure text, always present; the details layer's main content. */
+  reason: string;
+  /** Tool calls that already completed in this turn. */
+  completedSteps?: number;
+  /** ISO timestamp of the failed turn, for the details layer. */
+  happenedAt?: string;
+  /** Trace id, for the details layer and the copied report. */
+  traceId?: string;
+  /** Renders the action buttons this build can perform. */
+  action?: (action: FailureAction) => { onClick: () => void; disabled?: boolean; hint?: string } | null;
+}
+
+/** Details-layer field label/value pair. */
+function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <>
+      <dt className="text-agent-muted-foreground">{label}</dt>
+      <dd className="min-w-0 break-words">{children}</dd>
+    </>
+  );
+}
+
+export function TurnFailureCard({
+  detail,
+  reason,
+  completedSteps = 0,
+  happenedAt,
+  traceId,
+  action,
+}: TurnFailureCardProps) {
+  const [open, setOpen] = useState(false);
+  const presentation = failurePresentation(detail, { completedSteps });
+  const actions = [presentation.primary, ...presentation.secondary]
+    .map((entry) => ({ entry, handler: action?.(entry) ?? null }))
+    .filter((row): row is { entry: FailureAction; handler: NonNullable<typeof row.handler> } =>
+      row.handler !== null,
+    );
+
+  return (
+    <div
+      className="rounded-agent-lg border border-agent-destructive/40 bg-agent-destructive/5 px-2.5 py-2 text-xs leading-relaxed shadow-sm"
+      data-testid="turn-failure"
+      data-failure-kind={detail?.kind ?? 'unknown'}
+    >
+      <div className="flex items-start gap-2 font-medium text-agent-destructive">
+        <LuTriangleAlert className="mt-0.5 h-3.5 w-3.5 flex-shrink-0" />
+        <span>{presentation.title}</span>
+      </div>
+      <p className="mt-1 ml-5 text-agent-foreground/90">{presentation.body}</p>
+      <div className="mt-2 ml-5 flex flex-wrap items-center gap-2">
+        {actions.map(({ entry, handler }, index) => (
+          <button
+            key={entry.kind}
+            type="button"
+            disabled={handler.disabled}
+            title={handler.hint}
+            onClick={handler.onClick}
+            className={
+              index === 0
+                ? 'rounded-agent-md bg-agent-primary px-3 py-1 text-xs font-medium text-agent-primary-foreground transition hover:bg-agent-primary/90 disabled:opacity-50'
+                : 'rounded-agent-md border border-agent-border bg-agent-card px-3 py-1 text-xs text-agent-foreground transition hover:bg-agent-muted disabled:opacity-50'
+            }
+            data-action={entry.kind}
+          >
+            {actionLabel(entry)}
+          </button>
+        ))}
+        <button
+          type="button"
+          onClick={() => setOpen((value) => !value)}
+          className="inline-flex items-center gap-0.5 rounded px-1 text-agent-muted-foreground hover:text-agent-foreground"
+          aria-expanded={open}
+          data-action="details"
+        >
+          {open ? t('Hide details') : t('Details')}
+          {open ? <LuChevronUp className="h-3 w-3" /> : <LuChevronDown className="h-3 w-3" />}
+        </button>
+      </div>
+      {open && (
+        <div className="mt-2 ml-5 border-t border-agent-destructive/20 pt-2" data-testid="turn-failure-details">
+          <dl className="grid grid-cols-[5.5rem_1fr] gap-x-3 gap-y-1">
+            <DetailRow label={t('Category')}>
+              {presentation.classified ? categoryLabel(detail?.kind) : t('Not classified')}
+            </DetailRow>
+            <DetailRow label={t('Cause')}>
+              <span className="block">{causeSummary(detail, reason)}</span>
+              {presentation.classified && reason !== causeSummary(detail, reason) ? (
+                <code className="mt-0.5 block break-all font-mono text-[11px] text-agent-muted-foreground">
+                  {reason}
+                </code>
+              ) : null}
+            </DetailRow>
+            {detail?.proxy || detail?.kind === 'transport' ? (
+              <DetailRow label={t('Connection')}>
+                {detail?.proxy
+                  ? t('Through system proxy {proxy}', { proxy: detail.proxy })
+                  : t('Direct')}
+              </DetailRow>
+            ) : null}
+            {detail?.attempts ? (
+              <DetailRow label={t('Retries')}>
+                {t('{count} attempts', { count: detail.attempts })}
+              </DetailRow>
+            ) : null}
+            {happenedAt ? (
+              <DetailRow label={t('Time')}>
+                <span className="font-mono text-[11px]">{happenedAt}</span>
+              </DetailRow>
+            ) : null}
+            {traceId ? (
+              <DetailRow label={t('Trace ID')}>
+                <span className="font-mono text-[11px]">{traceId}</span>
+              </DetailRow>
+            ) : null}
+          </dl>
+          {traceId ? <CopyDiagnostics detail={detail} reason={reason} traceId={traceId} /> : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Button text per action, so the card does not repeat the copy three times. */
+function actionLabel(action: FailureAction): string {
+  switch (action.kind) {
+    case 'retry':
+      return t('Continue');
+    case 'network-diagnostics':
+      return t('Network diagnostics');
+    case 'open-model-settings':
+      return t('Open model settings');
+    case 'new-chat':
+      return t('New chat');
+  }
+}
+
+/** The details layer's one-line Chinese cause, or the raw text when unknown. */
+function causeSummary(detail: TurnFailureDetail | undefined, reason: string): string {
+  switch (detail?.kind) {
+    case 'transport':
+      return t('The connection to the model service dropped.');
+    case 'auth':
+      return t('The service rejected the credentials.');
+    case 'rate_limit':
+      return t('The service asked us to slow down.');
+    case 'server':
+      return t('The service reported its own failure.');
+    case 'context_overflow':
+      return t('The request exceeds the model window.');
+    case 'invalid_request':
+      return t('The service rejected the request.');
+    default:
+      return reason;
+  }
+}
+
+function categoryLabel(kind: string | undefined): string {
+  switch (kind) {
+    case 'transport':
+      return t('Network');
+    case 'auth':
+      return t('Credentials');
+    case 'rate_limit':
+      return t('Rate limit');
+    case 'server':
+      return t('Service error');
+    case 'context_overflow':
+      return t('Conversation too long');
+    case 'invalid_request':
+      return t('Rejected request');
+    default:
+      return t('Not classified');
+  }
+}
+
+/**
+ * One-click report text. Everything a reader needs to reproduce the failure,
+ * and nothing that identifies the user: the proxy address is already stripped
+ * of credentials by the backend, and the API key never enters a failure.
+ */
+export function buildDiagnostics(input: {
+  detail?: TurnFailureDetail;
+  reason: string;
+  traceId: string;
+  version?: string;
+}): string {
+  const lines = [
+    input.version ? t('Version: {version}', { version: input.version }) : null,
+    t('Category: {category}', {
+      category: input.detail ? categoryLabel(input.detail.kind) : t('Not classified'),
+    }),
+    t('Cause: {cause}', { cause: input.reason }),
+    input.detail?.proxy
+      ? t('Connection: through system proxy {proxy}', { proxy: input.detail.proxy })
+      : t('Connection: direct'),
+    input.detail?.attempts
+      ? t('Retries: {count}', { count: input.detail.attempts })
+      : null,
+    t('Trace ID: {traceId}', { traceId: input.traceId }),
+  ].filter((line): line is string => line !== null);
+  return lines.join('\n');
+}
+
+function CopyDiagnostics({
+  detail,
+  reason,
+  traceId,
+}: {
+  detail?: TurnFailureDetail;
+  reason: string;
+  traceId: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    const text = buildDiagnostics({ detail, reason, traceId });
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard permission can be refused (browser, kiosk). The text is
+      // already on screen in the details layer, so reporting the failure is
+      // only a manual selection away; do not block on it.
+      setCopied(false);
+    }
+  };
+  return (
+    <div className="mt-2 flex items-center gap-2">
+      <button
+        type="button"
+        onClick={() => void copy()}
+        className="inline-flex items-center gap-1 rounded-agent-md border border-agent-border bg-agent-card px-2 py-0.5 text-[11px] hover:bg-agent-muted"
+        data-action="copy-diagnostics"
+      >
+        <LuCopy className="h-3 w-3" />
+        {copied ? t('Copied') : t('Copy diagnostic info')}
+      </button>
+      <span className="text-[11px] text-agent-muted-foreground">
+        {t("Doesn't include your API key")}
+      </span>
+    </div>
+  );
+}
+
+export default TurnFailureCard;

package/src/components/chat/executed-actions-model.ts

@@ -121,7 +121,7 @@ export interface ExecutedActionLike {
   arguments?: unknown;
   result?: unknown;
   sandbox?: { backend?: string; enforcement: string };
-  approval?: { kind?: string; cached?: boolean };
+  approval?: { kind?: string; cached?: boolean; auto?: boolean };
   view?: { title?: string; declared?: boolean };
   durationMs?: number;
 }
@@ -618,6 +618,7 @@ function approvalFromNestedResult(result: unknown): ExecutedActionLike['approval
   return {
     kind: marker.kind,
     ...(marker.cached === true ? { cached: true } : {}),
+    ...(marker.auto === true ? { auto: true } : {}),
   };
 }
 
@@ -644,3 +645,120 @@ export function expandRunCodeActions<T extends ExecutedActionLike>(actions: T[])
   }
   return out;
 }
+
+export interface AskReplay {
+  unattended: boolean;
+  lines: string[];
+}
+
+/** First question, used as the folded tool-row title. The intro is only a fallback. */
+export function askRowSummary(action: { tool?: string; arguments?: unknown; result?: unknown }): string {
+  if (action.tool !== 'ask_user') return '';
+  return firstQuestionText(action.result) || firstQuestionText(action.arguments);
+}
+
+/** Host on a settled egress row. Ports 80 and 443 are omitted. */
+export function egressRowSummary(action: { tool?: string; arguments?: unknown }): string {
+  if (action.tool !== 'network_egress') return '';
+  const value = action.arguments;
+  if (!value || typeof value !== 'object') return '';
+  const record = value as { host?: unknown; port?: unknown };
+  const host = typeof record.host === 'string' ? record.host : '';
+  if (!host) return '';
+  const port = typeof record.port === 'number' ? record.port : null;
+  if (port === null || port === 80 || port === 443) return host;
+  return `${host}:${port}`;
+}
+
+/** Questions and answers from an ask_user result, including a JSON preview. */
+export function askReplay(result: unknown): AskReplay | null {
+  const record = unwrapAsk(result);
+  if (!record) return null;
+  const asked: string[] = [];
+  const rendered: string[] = [];
+  for (const question of record.questions) {
+    if (!question || typeof question !== 'object') continue;
+    const row = question as { id?: unknown; text?: unknown };
+    const text = typeof row.text === 'string' ? row.text.trim() : '';
+    if (!text) continue;
+    asked.push(text);
+    const id = typeof row.id === 'string' ? row.id : '';
+    rendered.push(id ? answerText(record.answers[id]) : '');
+  }
+  if (asked.length === 0) return null;
+  const filled = rendered.filter((value) => value.length > 0);
+  const first = filled[0];
+  const shared = first !== undefined && filled.length === asked.length && filled.every((value) => value === first);
+  const lines = shared
+    ? [...asked.map((text) => t('Question {text}', { text })), t('Answer {text}', { text: first })]
+    : asked.flatMap((text, index) => {
+        const answer = rendered[index] ?? '';
+        return answer
+          ? [t('Question {text}', { text }), t('Answer {text}', { text: answer })]
+          : [t('Question {text}', { text })];
+      });
+  return { unattended: record.unattended === true, lines };
+}
+
+function unwrapAsk(result: unknown): { questions: unknown[]; answers: Record<string, unknown>; unattended?: boolean } | null {
+  if (typeof result === 'string') {
+    const trimmed = result.trim();
+    if (!trimmed.startsWith('{')) return null;
+    try {
+      const parsed: unknown = JSON.parse(trimmed);
+      return unwrapAsk(parsed);
+    } catch {
+      return null;
+    }
+  }
+  if (!result || typeof result !== 'object' || Array.isArray(result)) return null;
+  const record = result as {
+    questions?: unknown;
+    answers?: unknown;
+    data?: unknown;
+    value?: unknown;
+    unattended?: unknown;
+  };
+  if (Array.isArray(record.questions) && record.answers && typeof record.answers === 'object' && !Array.isArray(record.answers)) {
+    return {
+      questions: record.questions,
+      answers: record.answers as Record<string, unknown>,
+      ...(record.unattended === true ? { unattended: true } : {}),
+    };
+  }
+  if (record.value && typeof record.value === 'object') {
+    const inner = unwrapAsk(record.value);
+    if (inner) return record.unattended === true ? { ...inner, unattended: true } : inner;
+  }
+  if (record.data && typeof record.data === 'object') {
+    const inner = unwrapAsk(record.data);
+    if (inner) return record.unattended === true ? { ...inner, unattended: true } : inner;
+  }
+  return null;
+}
+
+function firstQuestionText(value: unknown): string {
+  const unwrapped = unwrapAsk(value);
+  const questions = unwrapped?.questions ?? questionList(value);
+  for (const question of questions) {
+    if (!question || typeof question !== 'object') continue;
+    const text = (question as { text?: unknown }).text;
+    if (typeof text === 'string' && text.trim()) return text.trim();
+  }
+  return '';
+}
+
+function questionList(value: unknown): unknown[] {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return [];
+  const questions = (value as { questions?: unknown }).questions;
+  return Array.isArray(questions) ? questions : [];
+}
+
+function answerText(value: unknown): string {
+  if (typeof value === 'string') return value.trim();
+  if (!Array.isArray(value)) return '';
+  return value
+    .filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
+    .map((item) => item.trim())
+    .join(', ');
+}