@robota-sdk/agent-ui-web 0.0.0-stage → 3.0.0-beta.100

package/src/client/runtime-host.ts

@@ -0,0 +1,84 @@
+import type { IPickedFile } from '../components/Composer.js';
+
+/** Runtime events delivered by a native host. Browser pages have no process to supervise. */
+export type TClientRuntimeState = 'starting' | 'ready' | 'fatal';
+
+/** A folder decision must be shown before requesting the runtime endpoint. */
+export interface IClientTrustQuestion {
+  readonly folder: string;
+  readonly loads: readonly string[];
+}
+
+export type TClientTrustChoice = 'trust' | 'restricted' | 'quit';
+
+/**
+ * Browser-safe shape for a narrow native preload bridge. The native host implements validation,
+ * trust, process lifecycle, and endpoint ownership; the renderer receives only these operations.
+ */
+export interface IClientRuntimeBridge {
+  readonly runtimeMode?: 'local' | 'remote';
+  getEndpoint(): Promise<string | null>;
+  signalReady(): void;
+  onState(listener: (state: TClientRuntimeState, detail?: string) => void): () => void;
+  restartRuntime(): Promise<void>;
+  trustQuestion(): Promise<IClientTrustQuestion | null>;
+  answerTrust(choice: TClientTrustChoice): Promise<{ error?: string }>;
+  pickFiles?(): Promise<readonly IPickedFile[]>;
+  getPathForFile?(file: File): string;
+  onOpenSettings?(listener: () => void): () => void;
+  openPath?(path: string): Promise<{ error?: string }>;
+}
+
+/** A React renderer can use this contract with either a desktop bridge or a browser endpoint. */
+export interface IClientRuntimeHost {
+  readonly kind: 'desktop' | 'browser';
+  getEndpoint(): Promise<string | null>;
+  signalReady(): void;
+  onState(listener: (state: TClientRuntimeState, detail?: string) => void): () => void;
+  readonly restartRuntime?: () => Promise<void>;
+  readonly trustQuestion?: () => Promise<IClientTrustQuestion | null>;
+  readonly answerTrust?: (choice: TClientTrustChoice) => Promise<{ error?: string }>;
+  readonly pickFiles?: () => Promise<readonly IPickedFile[]>;
+  readonly getPathForFile?: (file: File) => string;
+  onOpenSettings(listener: () => void): () => void;
+  readonly openMemoryInEditor?: (path: string) => void;
+}
+
+export interface IClientRuntimeEnvironment {
+  readonly bridge?: IClientRuntimeBridge;
+  readonly document: Pick<Document, 'querySelector'>;
+  readonly location: Pick<Location, 'search' | 'host' | 'protocol'>;
+}
+
+/** Resolve host capabilities without importing Electron or a Node CLI into the browser graph. */
+export function resolveClientRuntimeHost(environment: IClientRuntimeEnvironment): IClientRuntimeHost {
+  const { bridge } = environment;
+  if (bridge) {
+    const local = bridge.runtimeMode !== 'remote';
+    return {
+      kind: 'desktop',
+      getEndpoint: () => bridge.getEndpoint(),
+      signalReady: () => bridge.signalReady(),
+      onState: (listener) => bridge.onState(listener),
+      restartRuntime: () => bridge.restartRuntime(),
+      trustQuestion: local ? () => bridge.trustQuestion() : undefined,
+      answerTrust: local ? (choice) => bridge.answerTrust(choice) : undefined,
+      pickFiles: local && bridge.pickFiles ? () => bridge.pickFiles!() : undefined,
+      getPathForFile: local && bridge.getPathForFile ? (file) => bridge.getPathForFile!(file) : undefined,
+      onOpenSettings: (listener) => bridge.onOpenSettings?.(listener) ?? (() => {}),
+      openMemoryInEditor: local && bridge.openPath ? (path) => { void bridge.openPath!(path); } : undefined,
+    };
+  }
+
+  const injected = environment.document.querySelector('meta[name="ws-url"]')?.getAttribute('content')?.trim();
+  const query = new URLSearchParams(environment.location.search).get('ws')?.trim();
+  const protocol = environment.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  const endpoint = injected || query || `${protocol}//${environment.location.host}`;
+  return {
+    kind: 'browser',
+    getEndpoint: async () => endpoint,
+    signalReady: () => {},
+    onState: () => () => {},
+    onOpenSettings: () => () => {},
+  };
+}

package/src/client/ws-session-client.ts

@@ -0,0 +1,131 @@
+/**
+ * Browser WebSocket client for a running agent-cli sidecar session.
+ * Wraps the native WebSocket API with typed agent-transport-ws messages.
+ */
+
+import { decodeFrame, decodeServerMessage } from '@robota-sdk/agent-transport/client';
+
+import type { TServerMessage, TClientMessage } from '@robota-sdk/agent-transport';
+
+export type { TServerMessage, TClientMessage };
+
+export type TConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
+
+export interface IWsSessionClientCallbacks {
+  onMessage: (msg: TServerMessage) => void;
+  onStatusChange: (status: TConnectionStatus) => void;
+  /**
+   * The connection is gone for good: the retries ran out without reaching the server again. The status
+   * stays `disconnected`; this is what tells a host the runtime is not coming back by itself.
+   */
+  onGiveUp?: () => void;
+}
+
+export interface IWsSessionClient {
+  connect: () => void;
+  disconnect: () => void;
+  send: (msg: TClientMessage) => void;
+  status: () => TConnectionStatus;
+}
+
+const RECONNECT_DELAY_MS = 2000;
+const MAX_RECONNECT_ATTEMPTS = 10;
+
+export function createWsSessionClient(
+  url: string,
+  callbacks: IWsSessionClientCallbacks,
+): IWsSessionClient {
+  let ws: WebSocket | null = null;
+  let currentStatus: TConnectionStatus = 'disconnected';
+  let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let reconnectAttempts = 0;
+  let intentionalDisconnect = false;
+
+  function setStatus(s: TConnectionStatus): void {
+    currentStatus = s;
+    callbacks.onStatusChange(s);
+  }
+
+  function scheduleReconnect(): void {
+    if (intentionalDisconnect) return;
+    if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+      callbacks.onGiveUp?.();
+      return;
+    }
+    reconnectTimer = setTimeout(() => {
+      reconnectAttempts++;
+      doConnect();
+    }, RECONNECT_DELAY_MS);
+  }
+
+  function doConnect(): void {
+    setStatus('connecting');
+    ws = new WebSocket(url);
+
+    ws.onopen = (): void => {
+      reconnectAttempts = 0;
+      setStatus('connected');
+      // Request full message history on connect
+      send({ type: 'get-messages' });
+    };
+
+    ws.onmessage = (event: MessageEvent): void => {
+      const data = event.data;
+      if (typeof data !== 'string') return;
+      // Issue #2045: `raw → owner decoder → typed`. A malformed frame (invalid JSON or an invalid
+      // shape) must not throw inside the handler (it would break the socket's message pump and
+      // freeze the UI) and must not be cast onward; surface it via the normal path.
+      const decoded = decodeFrame(data, decodeServerMessage);
+      if (!decoded.ok) {
+        callbacks.onMessage({
+          type: 'protocol_error',
+          message: `Malformed message from server (${decoded.reason})`,
+        });
+        return;
+      }
+      callbacks.onMessage(decoded.message);
+    };
+
+    ws.onclose = (): void => {
+      ws = null;
+      if (!intentionalDisconnect) {
+        setStatus('disconnected');
+        scheduleReconnect();
+      } else {
+        setStatus('disconnected');
+      }
+    };
+
+    ws.onerror = (): void => {
+      setStatus('error');
+    };
+  }
+
+  function connect(): void {
+    intentionalDisconnect = false;
+    if (reconnectTimer !== null) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    doConnect();
+  }
+
+  function disconnect(): void {
+    intentionalDisconnect = true;
+    if (reconnectTimer !== null) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    ws?.close();
+    ws = null;
+    setStatus('disconnected');
+  }
+
+  function send(msg: TClientMessage): void {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(msg));
+    }
+  }
+
+  return { connect, disconnect, send, status: () => currentStatus };
+}

package/src/clipboard.ts

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Copies `text` to the clipboard for the "Copy code" / "Copy message" buttons (#3289 §2): the async
+ * Clipboard API first, and — for a page that denies it (no permission granted yet, a browser that
+ * never implements it, or a context that disallows it outright) — a same-tick `execCommand('copy')`
+ * fallback through a throwaway, invisible textarea. Rejects only once both have failed, so a caller
+ * can show its own "Couldn't copy" message rather than a browser one.
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return;
+    } catch {
+      // Falls through to the legacy path — some browsers reject outside a user gesture, or before a
+      // permission prompt has ever been answered.
+    }
+  }
+  if (!legacyCopy(text)) throw new Error('copy failed');
+}
+
+/**
+ * `execCommand('copy')` needs a selection in the page, so the text is staged in an offscreen field —
+ * which needs focus to be selectable, so whatever had focus (typically the "Copy code" / "Copy
+ * message" button a keyboard user just activated) is restored afterward rather than left on `<body>`.
+ */
+function legacyCopy(text: string): boolean {
+  if (typeof document === 'undefined' || typeof document.execCommand !== 'function') return false;
+  const previouslyFocused =
+    document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const field = document.createElement('textarea');
+  field.value = text;
+  field.setAttribute('readonly', '');
+  field.style.position = 'fixed';
+  field.style.top = '0';
+  field.style.left = '0';
+  field.style.opacity = '0';
+  field.style.pointerEvents = 'none';
+  document.body.appendChild(field);
+  field.focus();
+  field.select();
+  let ok = false;
+  try {
+    ok = document.execCommand('copy');
+  } catch {
+    ok = false;
+  }
+  document.body.removeChild(field);
+  previouslyFocused?.focus();
+  return ok;
+}
+
+export type TCopyStatus = 'idle' | 'copied' | 'error';
+
+/** How long the "Copied" / "Couldn't copy" feedback holds before the button reads its normal label again. */
+const FEEDBACK_MS = 2000;
+
+/**
+ * The "Copy code" / "Copy message" buttons' shared feedback state: `copied` or `error` for a couple of
+ * seconds, then back to `idle` — drives both the button's own label swap and an `aria-live` region a
+ * screen reader announces without moving focus (#3289 §2).
+ */
+export function useCopyFeedback(): { status: TCopyStatus; copy: (text: string) => void } {
+  const [status, setStatus] = useState<TCopyStatus>('idle');
+
+  useEffect(() => {
+    if (status === 'idle') return undefined;
+    const timer = setTimeout(() => setStatus('idle'), FEEDBACK_MS);
+    return () => clearTimeout(timer);
+  }, [status]);
+
+  const copy = (text: string): void => {
+    copyToClipboard(text).then(
+      () => setStatus('copied'),
+      () => setStatus('error'),
+    );
+  };
+
+  return { status, copy };
+}

package/src/components/AgentActivityPanel.tsx

@@ -0,0 +1,371 @@
+import {
+  CircleCheck,
+  CircleDashed,
+  CircleX,
+  LoaderCircle,
+  Pause,
+  Play,
+  ShieldAlert,
+  Square,
+  Target,
+} from 'lucide-react';
+import React, { useState } from 'react';
+
+import { ConfirmDialog } from './Dialog.js';
+import { describeGoalStatus } from '../goal-view.js';
+import {
+  describeScheduleInstruction,
+  describeScheduleStatus,
+  describeScheduleTiming,
+} from '../schedule-view.js';
+
+import { describeExecutionStatus, hadDeniedToolCalls } from '../execution-entry-status.js';
+
+import type {
+  IBackgroundTaskState,
+  IExecutionWorkspaceEntry,
+  TExecutionAttention,
+  TExecutionWorkspaceStatus,
+} from '@robota-sdk/agent-interface-execution';
+import type { IGoalState } from '@robota-sdk/agent-interface-session';
+
+interface IAgentActivityPanelProps {
+  tasks: readonly IExecutionWorkspaceEntry[];
+  /** #3282 §4 part b-3: the "Scheduled" group — every `kind: 'scheduled'` background task. */
+  schedules?: readonly IBackgroundTaskState<'scheduled'>[];
+  /** #3282 §4 part b-3: the current goal (`/goal`), or null/absent when none is set. */
+  goal?: IGoalState | null;
+  onPauseSchedule?: (taskId: string) => void;
+  onResumeSchedule?: (taskId: string) => void;
+  onDeleteSchedule?: (taskId: string) => void;
+  onCancelGoal?: () => void;
+  className?: string;
+  /** #3288 §1: open a non-main-thread entry's detail sheet. */
+  onSelect?: (entry: IExecutionWorkspaceEntry) => void;
+  /** #3288 §1: the main thread entry was clicked — the conversation beside this panel is it. */
+  onReturnToConversation?: () => void;
+  /** #3288 §1: Stop was clicked on a running/queued entry. */
+  onStop?: (entry: IExecutionWorkspaceEntry) => void;
+  /** #3288 §1: the entry whose detail sheet is currently open, for a highlighted row. */
+  selectedEntryId?: string;
+}
+
+export function AgentActivityPanel({
+  tasks,
+  schedules = [],
+  goal = null,
+  onPauseSchedule,
+  onResumeSchedule,
+  onDeleteSchedule,
+  onCancelGoal,
+  className,
+  onSelect,
+  onReturnToConversation,
+  onStop,
+  selectedEntryId,
+}: IAgentActivityPanelProps): React.ReactElement {
+  const runningCount = tasks.filter((t) => t.status === 'running').length;
+  // A deleted schedule is `cancelled` forever (the manager never removes the record) — the group
+  // shows only what is still relevant, exactly like Delete disappearing the row it was pressed on.
+  const visibleSchedules = schedules.filter((task) => task.status !== 'cancelled');
+  const [pendingDeleteId, setPendingDeleteId] = useState<string | null>(null);
+  const pendingDelete = visibleSchedules.find((task) => task.id === pendingDeleteId) ?? null;
+
+  return (
+    <div className={`agent-ui flex flex-col overflow-hidden ${className ?? ''}`}>
+      <div className="flex h-12 flex-shrink-0 items-center gap-2 px-4">
+        <span className="text-[14px] font-medium text-foreground">Agents</span>
+        {runningCount > 0 && (
+          <span className="ml-auto text-[13px] tabular-nums text-subtle">
+            {runningCount} running
+          </span>
+        )}
+      </div>
+
+      <div className="flex-1 space-y-4 overflow-y-auto px-3 pb-3">
+        {tasks.length > 0 && (
+          <div className="space-y-2">
+            {tasks.map((entry) => (
+              <AgentCard
+                key={entry.id}
+                entry={entry}
+                selected={entry.id === selectedEntryId}
+                onOpen={
+                  entry.kind === 'main_thread'
+                    ? onReturnToConversation
+                    : onSelect && (() => onSelect(entry))
+                }
+                onStop={
+                  onStop && entry.controls?.includes('cancel') ? () => onStop(entry) : undefined
+                }
+              />
+            ))}
+          </div>
+        )}
+
+        {visibleSchedules.length > 0 && (
+          <div>
+            <p className="px-0.5 pb-1.5 text-[12px] font-medium uppercase tracking-wide text-subtle">
+              Scheduled
+            </p>
+            <div className="space-y-2">
+              {visibleSchedules.map((task) => (
+                <ScheduleCard
+                  key={task.id}
+                  task={task}
+                  onPause={onPauseSchedule}
+                  onResume={onResumeSchedule}
+                  onRequestDelete={() => setPendingDeleteId(task.id)}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {goal && (
+          <div>
+            <p className="px-0.5 pb-1.5 text-[12px] font-medium uppercase tracking-wide text-subtle">
+              Goal
+            </p>
+            <GoalCard goal={goal} onCancel={onCancelGoal} />
+          </div>
+        )}
+      </div>
+
+      <ConfirmDialog
+        open={pendingDelete !== null}
+        title="Delete this schedule?"
+        body={
+          pendingDelete
+            ? `"${describeScheduleInstruction(pendingDelete)}" will stop running. This cannot be undone.`
+            : ''
+        }
+        confirmLabel="Delete"
+        destructive
+        onConfirm={() => {
+          if (pendingDelete) onDeleteSchedule?.(pendingDelete.id);
+          setPendingDeleteId(null);
+        }}
+        onCancel={() => setPendingDeleteId(null)}
+      />
+    </div>
+  );
+}
+
+function AgentCard({
+  entry,
+  selected,
+  onOpen,
+  onStop,
+}: {
+  entry: IExecutionWorkspaceEntry;
+  selected: boolean;
+  onOpen?: () => void;
+  onStop?: () => void;
+}): React.ReactElement {
+  const needsYou = entry.attention === 'permission' || entry.status === 'waiting_permission';
+  const failed = entry.attention === 'failed' || entry.status === 'failed';
+  return (
+    <div
+      role={onOpen ? 'button' : undefined}
+      tabIndex={onOpen ? 0 : undefined}
+      onClick={onOpen}
+      onKeyDown={
+        onOpen
+          ? (event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onOpen();
+              }
+            }
+          : undefined
+      }
+      aria-label={onOpen ? entry.title : undefined}
+      className={`rounded-xl px-3.5 py-3 transition-opacity duration-500 ${
+        needsYou ? 'bg-warning/10' : failed ? 'bg-destructive/10' : 'bg-card'
+      } ${entry.status === 'completed' ? 'opacity-60' : ''} ${
+        selected ? 'ring-1 ring-inset ring-accent' : ''
+      } ${onOpen ? 'cursor-pointer' : ''}`}
+    >
+      <div className="flex items-center gap-2.5">
+        <StatusIcon status={entry.status} attention={entry.attention} deniedToolCalls={entry.deniedToolCalls} />
+        <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">
+          {entry.title}
+        </span>
+        <AttentionTag status={entry.status} attention={entry.attention} deniedToolCalls={entry.deniedToolCalls} />
+        {onStop && (
+          <button
+            type="button"
+            aria-label={`Stop ${entry.title}`}
+            onClick={(event) => {
+              event.stopPropagation();
+              onStop();
+            }}
+            className="flex-shrink-0 rounded-md px-1.5 py-px text-[12px] text-subtle hover:bg-destructive/10 hover:text-destructive"
+          >
+            Stop
+          </button>
+        )}
+      </div>
+      {entry.currentAction && (
+        <p className="mt-1.5 truncate pl-[26px] text-[13px] leading-snug text-muted-foreground">
+          {entry.currentAction}
+        </p>
+      )}
+      {entry.preview && (
+        <p className="mt-1 truncate pl-[26px] font-mono text-[12px] leading-snug text-subtle">
+          {entry.preview}
+        </p>
+      )}
+    </div>
+  );
+}
+
+/** #3282 §4 part b-3: one row of the "Scheduled" group — what it runs, when next, status, controls. */
+function ScheduleCard({
+  task,
+  onPause,
+  onResume,
+  onRequestDelete,
+}: {
+  task: IBackgroundTaskState<'scheduled'>;
+  onPause?: (taskId: string) => void;
+  onResume?: (taskId: string) => void;
+  onRequestDelete: () => void;
+}): React.ReactElement {
+  const isPaused = task.status === 'paused';
+  return (
+    <div className="rounded-xl bg-card px-3.5 py-3">
+      <p className="truncate text-[14px] font-medium text-foreground">
+        {describeScheduleInstruction(task)}
+      </p>
+      <p className="mt-1 text-[13px] text-muted-foreground">
+        {describeScheduleTiming(task)} · {describeScheduleStatus(task)}
+      </p>
+      <div className="mt-2 flex items-center gap-3">
+        {isPaused ? (
+          <button
+            type="button"
+            onClick={() => onResume?.(task.id)}
+            className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-muted-foreground hover:bg-hover hover:text-foreground"
+          >
+            <Play size={11} fill="currentColor" aria-hidden="true" />
+            Resume
+          </button>
+        ) : (
+          <button
+            type="button"
+            onClick={() => onPause?.(task.id)}
+            className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-muted-foreground hover:bg-hover hover:text-foreground"
+          >
+            <Pause size={11} fill="currentColor" aria-hidden="true" />
+            Pause
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={onRequestDelete}
+          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-destructive hover:bg-destructive/10"
+        >
+          Delete…
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/** #3282 §4 part b-3: the current goal — objective, plain-word status, and Cancel. */
+function GoalCard({
+  goal,
+  onCancel,
+}: {
+  goal: IGoalState;
+  onCancel?: () => void;
+}): React.ReactElement {
+  return (
+    <div className="rounded-xl bg-card px-3.5 py-3">
+      <div className="flex items-center gap-2.5">
+        <Target size={16} strokeWidth={1.9} className="flex-shrink-0 text-accent" />
+        <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-foreground">
+          {goal.objective}
+        </span>
+      </div>
+      <p className="mt-1.5 pl-[26px] text-[13px] text-muted-foreground">
+        {describeGoalStatus(goal)}
+      </p>
+      {goal.status === 'active' && (
+        <div className="mt-2 pl-[26px]">
+          <button
+            type="button"
+            onClick={onCancel}
+            className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-[13px] text-muted-foreground hover:bg-hover hover:text-foreground"
+          >
+            <Square size={11} fill="currentColor" aria-hidden="true" />
+            Cancel goal
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusIcon({
+  status,
+  attention,
+  deniedToolCalls,
+}: {
+  status: TExecutionWorkspaceStatus;
+  attention: TExecutionAttention;
+  deniedToolCalls?: number;
+}): React.ReactElement {
+  const props = { size: 16, strokeWidth: 1.9, className: 'flex-shrink-0' } as const;
+  if (attention === 'permission' || status === 'waiting_permission') {
+    return <ShieldAlert {...props} className={`${props.className} text-warning`} />;
+  }
+  if (attention === 'failed' || status === 'failed') {
+    return <CircleX {...props} className={`${props.className} text-destructive`} />;
+  }
+  if (hadDeniedToolCalls(status, deniedToolCalls)) {
+    return <ShieldAlert {...props} className={`${props.className} text-warning`} />;
+  }
+  if (status === 'running') {
+    return (
+      <LoaderCircle
+        {...props}
+        className={`${props.className} animate-spin text-muted-foreground`}
+      />
+    );
+  }
+  if (status === 'completed') {
+    return <CircleCheck {...props} className={`${props.className} text-success`} />;
+  }
+  if (status === 'cancelled') {
+    return <CircleX {...props} className={`${props.className} text-subtle`} />;
+  }
+  return <CircleDashed {...props} className={`${props.className} text-subtle`} />;
+}
+
+const STATUS_TAG_TONE: Record<string, string> = {
+  warning: 'bg-warning/15 text-warning',
+  destructive: 'bg-destructive/12 text-destructive',
+  muted: 'text-subtle',
+};
+
+function AttentionTag({
+  attention,
+  status,
+  deniedToolCalls,
+}: {
+  attention: TExecutionAttention;
+  status: TExecutionWorkspaceStatus;
+  deniedToolCalls?: number;
+}): React.ReactElement | null {
+  const described = describeExecutionStatus(status, attention, deniedToolCalls);
+  // A running row already has its spinner; no text tag repeats that.
+  if (!described || described.label === 'Running') return null;
+  return (
+    <span className={`flex-shrink-0 rounded-md px-1.5 py-px text-[12px] ${STATUS_TAG_TONE[described.tone]}`}>
+      {described.label}
+    </span>
+  );
+}