feat(session): add app mode preference to session creation

- Add appMode field to session contracts (coding | work)
- Add server-side validation for appMode in session operation
- Wire appModePreference through create-application and main.tsx
- Carry appMode into task-session-workflows at session creation
- Add mode selection UI in settings with accessible radiogroup
- Refactor AgentAvatar size mapping into a constant record
- Auto-select first agent in management and reduce detail avatar to small
- Enable independent scrolling for agent list and detail panels
- Reduce usage popover skeleton rows from 8 to 4 for size stability

Author: Fectivnfy112357

packages/webui/src/client/features/composer/ui/ComposerSubmissionControls.tsx

@@ -41,7 +41,7 @@ export function WebuiComposerModePills({
       {goalActive ? (
         <WebuiButton
           variant="accent-toggle"
-          size="content"
+          size="inline"
           aria-pressed={true}
           aria-label="取消目标模式"
           data-testid="composer-goal-mode"
@@ -55,7 +55,7 @@ export function WebuiComposerModePills({
       {planActive ? (
         <WebuiButton
           variant="accent-toggle"
-          size="content"
+          size="inline"
           type="button"
           aria-pressed="true"
           aria-label="退出计划模式"

packages/webui/src/client/features/composer/ui/WebuiComposer.tsx

@@ -950,6 +950,11 @@ export function WebuiComposer({
     session: sessionId,
     lastSubmittedText: recordedTurn?.message,
   });
+  // A pending Plan review rejects sends while it owns the session. Keep that
+  // refusal in the stream state, but do not show a transcript error or retry
+  // action for a request the user can send again after the review completes.
+  const hidePlanReviewInProgressRefusal =
+    stream.refusal === "Plan review processing must finish before this request can run";
   const handleRetryResend = () => {
     void composerController.retry({
       refusal: stream.refusal,
@@ -1037,7 +1042,7 @@ export function WebuiComposer({
         paused={sessionId ? queuePaused : false}
         onRemove={(item) => void handleDeleteQueueItem(item)}
       />
-      {stream.refusal ? (
+      {stream.refusal && !hidePlanReviewInProgressRefusal ? (
         <OutputError
           variant="output_error"
           text={stream.refusal}

packages/webui/src/client/features/interactions/application/interaction-session-owners.ts

@@ -30,8 +30,11 @@ import {
 import type { WebuiVersionCell } from "../../../application/version-cell.js";
 
 export interface WebuiInteractionSessionOwners {
-  /** The owner for one session, created on first touch and then stable. */
-  readonly owner: (sessionId: string) => WebuiInteractionCoordinator;
+  /** The owner for one state-record key, created on first touch and then stable. */
+  readonly owner: (
+    recordKey: string,
+    options?: { readonly runtimeSessionId?: string },
+  ) => WebuiInteractionCoordinator;
   readonly sessions: () => readonly string[];
   /** Drop one session's owner and fence (purge / session delete). */
   readonly purge: (sessionId: string) => void;
@@ -73,14 +76,17 @@ export function createWebuiInteractionSessionOwners(deps: {
   let disposed = false;
 
   return {
-    owner: (sessionId) => {
-      const existing = owners.get(sessionId);
+    owner: (recordKey, options) => {
+      const existing = owners.get(recordKey);
       if (existing) return existing;
       // The narrow writers: this session's interaction slice and its stream
       // phase, and nothing else in the record. Both come from the assembly, which
       // is what holds the store these slices live in.
-      const commands = deps.commandsFor(sessionId);
-      const streams = deps.readPhaseIntents(sessionId);
+      const commands = deps.commandsFor(recordKey);
+      const streams = deps.readPhaseIntents(recordKey);
+      const runtimeSessionId = options === undefined
+        ? recordKey
+        : options.runtimeSessionId;
       // The fence is this session's: a reply for this session cannot fence
       // another session's pending read, and the converse holds too.
       const pendingVersionRef: WebuiVersionCell = { current: 0 };
@@ -93,10 +99,10 @@ export function createWebuiInteractionSessionOwners(deps: {
         },
         streams,
         pendingVersionRef,
-        sessionId,
-        agentName: () => readAgentName?.(sessionId) ?? "main",
+        sessionId: runtimeSessionId,
+        agentName: () => readAgentName?.(recordKey) ?? "main",
       });
-      owners.set(sessionId, owner);
+      owners.set(recordKey, owner);
       return owner;
     },
     sessions: () => [...owners.keys()],

packages/webui/src/client/features/interactions/bindings/interaction-owner.public.ts

@@ -46,5 +46,7 @@ export function useWebuiInteractionOwner(
     [store],
   );
   const owners = application?.interactions ?? fallback;
-  return owners.owner(webuiInteractionRecordKey(sessionId));
+  return owners.owner(webuiInteractionRecordKey(sessionId), {
+    runtimeSessionId: sessionId,
+  });
 }

packages/webui/src/client/features/models/ui/ModelSelect.public.tsx

@@ -7,12 +7,12 @@
 // with no second copy of the grouping, the ticks or the row order.
 //
 // It names a model as a string, because that is what the definitions and the
-// scheduled tasks store. `formatValue` decides how this call site writes it —
-// a provider-qualified `providerId/modelId` for a scheduled task, a bare model
-// id for an agent definition — and the same function reads the current value
-// back, so the two directions cannot drift. A value the catalogue does not
-// contain is still shown, verbatim: the runtime may offer a model this client
-// has not listed, and hiding the stored name would look like an empty field.
+// scheduled tasks store. The string is always `providerId/modelId`: that is the
+// only form the runtime accepts for a session model, a scheduled task's model
+// and an agent definition's model, and one writer for it means a form cannot
+// disagree with the picker it renders. A value the catalogue does not contain
+// is still shown, verbatim: the runtime may offer a model this client has not
+// listed, and hiding the stored name would look like an empty field.
 //
 // `defaultLabel` is the row that clears the choice, and it is what makes the
 // field optional. Without it the form has to be given a model, and the list has
@@ -29,25 +29,15 @@ import type { WebuiModelEntry } from "../../../../shared/contracts/models.js";
 import { groupModelsByProvider } from "../projection/model-picker-rows.js";
 import { WebuiModelListPanel } from "./ModelListPanel.js";
 
-/** How a chosen model is written into the field, and read back out of it. */
-export type WebuiModelValueFormat = (model: WebuiModelEntry) => string;
-
-/** The shape a scheduled task stores: `providerId/modelId`. */
-export function webuiQualifiedModelValue(model: WebuiModelEntry): string {
+/** The stored form of a model: `providerId/modelId`. */
+function qualifiedModelValue(model: WebuiModelEntry): string {
   return `${model.providerId}/${model.modelId}`;
 }
 
-/** The shape an agent definition stores: the model's own id. */
-export function webuiBareModelValue(model: WebuiModelEntry): string {
-  return model.modelId;
-}
-
 export interface WebuiModelSelectProps extends Partial<FieldControlProps> {
   /** The stored model name, or `""` for "the default model". */
   readonly value: string;
   readonly onChange: (value: string) => void;
-  /** Defaults to `providerId/modelId`. */
-  readonly formatValue?: WebuiModelValueFormat;
   /** Shown when nothing is chosen. */
   readonly placeholder?: string;
   /** The row that clears the choice. Omitted, the choice is required. */
@@ -63,7 +53,6 @@ export interface WebuiModelSelectProps extends Partial<FieldControlProps> {
 export function WebuiModelSelect({
   value,
   onChange,
-  formatValue = webuiQualifiedModelValue,
   placeholder = "选择模型",
   defaultLabel,
   controlSize = "regular",
@@ -90,9 +79,11 @@ export function WebuiModelSelect({
   const groups = useMemo(() => groupModelsByProvider(models), [models]);
   const selected = models.find(
     (model) =>
-      formatValue(model) === value ||
-      model.modelId === value ||
-      webuiQualifiedModelValue(model) === value,
+      qualifiedModelValue(model) === value ||
+      // A catalogue row is still matched by its own id, so a stored bare name
+      // or a foreign value from another client is shown rather than looking
+      // like an empty field.
+      model.modelId === value,
   );
   const triggerLabel = selected
     ? selected.displayName ?? selected.modelId
@@ -149,7 +140,7 @@ export function WebuiModelSelect({
             groups={groups}
             selected={selected}
             onSelect={(model) => {
-              onChange(formatValue(model));
+              onChange(qualifiedModelValue(model));
               setOpen(false);
             }}
             {...(defaultLabel

packages/webui/src/client/features/plugins/ui/AgentForm.tsx

@@ -3,6 +3,10 @@
 // Its four draft fields used to be four `useState` calls in `PluginCatalogue`,
 // seeded by `beginAgent` there and handed to the dialog as values and setters.
 // The draft now belongs to the form; what leaves it is one typed intent.
+//
+// The model field writes `providerId/modelId`, which is what the runtime's
+// canonical agent.md accepts: a bare model id is rejected as not being in the
+// provider/model form, so this field uses the picker's only format.
 
 import { useState, type ReactElement } from "react";
 
@@ -15,7 +19,7 @@ import type { WebuiPluginIntent } from "../contracts/plugin-actions.js";
 import { WebuiButton } from "../../../ui/button.js";
 import { WebuiDialogActions } from "../../../ui/dialog.js";
 import { WebuiField, WebuiTextarea, WebuiTextInput, useWebuiFormValidation } from "../../../ui/field.js";
-import { WebuiModelSelect, webuiBareModelValue } from "../../models/ui/ModelSelect.public.js";
+import { WebuiModelSelect } from "../../models/ui/ModelSelect.public.js";
 
 export interface AgentFormProps {
   readonly editing: Row | undefined;
@@ -97,7 +101,6 @@ export function AgentForm({
             {...props}
             value={model}
             onChange={setModel}
-            formatValue={webuiBareModelValue}
             placeholder="使用默认模型"
             defaultLabel="使用默认模型"
           />

packages/webui/src/client/features/settings/projection/settings-view.ts

@@ -8,12 +8,15 @@
 // The text below is the declaration as it stood in the source module — no
 // behaviour change.
 
-export type SettingsTabKey = "desktop" | "shortcuts" | "voice" | "custom-instructions" | "browser" | "usage" | "connection" | "account" | "coding" | "worktree" | "archived";
+export type SettingsTabKey = "desktop" | "shortcuts" | "custom-instructions" | "browser" | "usage" | "connection" | "account" | "coding" | "worktree" | "archived";
 
 export interface SettingsTabDefinition { readonly key: SettingsTabKey; readonly group: "preferences" | "management" | "coding" | "archived"; readonly label: string; readonly icon: string; readonly disabled?: boolean; }
 
+/** The sidebar's sections, in the order they are listed. */
+export type SettingsTabGroupKey = SettingsTabDefinition["group"];
+
 export const DESKTOP_SETTINGS_TABS: readonly SettingsTabDefinition[] = [
-{ key: "desktop", group: "preferences", label: "通用", icon: "desktop" }, { key: "voice", group: "preferences", label: "语音", icon: "voice", disabled: true }, { key: "shortcuts", group: "preferences", label: "快捷键", icon: "shortcuts" }, { key: "custom-instructions", group: "preferences", label: "个性化", icon: "custom-instructions" },
+{ key: "desktop", group: "preferences", label: "通用", icon: "desktop" }, { key: "shortcuts", group: "preferences", label: "快捷键", icon: "shortcuts" }, { key: "custom-instructions", group: "preferences", label: "个性化", icon: "custom-instructions" },
   // The browser switches were under the browser panel, in the tool area. A
   // setting that lives in a panel is a setting nobody finds without opening
   // that panel first, so they are a page of their own — under 偏好, next to
@@ -31,3 +34,12 @@ export function resolveThemePreference(preference: string, systemDark: boolean):
 export function filterSettingsTabs(query: string): readonly SettingsTabDefinition[] { const needle = query.trim().toLowerCase(); return DESKTOP_SETTINGS_TABS.filter((tab) => !needle || `${tab.label} ${tab.key}`.toLowerCase().includes(needle)); }
 
 export const SETTINGS_GROUPS = [{ key: "preferences", label: "偏好" }, { key: "management", label: "管理" }, { key: "coding", label: "编码" }, { key: "archived", label: "归档" }] as const;
+
+/**
+ * Groups the settings sidebar does not list.
+ *
+ * The tabs stay in `DESKTOP_SETTINGS_TABS` and their pages stay mounted behind
+ * the dialog's `active` branch: this hides a section of the column, it does not
+ * retire the feature. Listing a group again means deleting its key here.
+ */
+export const HIDDEN_SETTINGS_GROUPS: readonly SettingsTabGroupKey[] = ["coding"];

packages/webui/src/client/features/settings/ui/SettingsModal.public.tsx

@@ -12,7 +12,7 @@
 // unchanged, and every other settings surface stays in the private sibling.
 
 import { Fragment, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, type ReactElement, type ReactNode } from "react";
-import { IconArchive, IconArrowLeft, IconBraces, IconBrowser, IconChartBar, IconCode, IconGitBranch, IconLayoutDashboard, IconLink, IconMessageCircle, IconMicrophone, IconSearch, IconTrash, IconUserCircle, IconX, IconBook, IconCircle, IconCircleDot } from "@tabler/icons-react";
+import { IconArchive, IconArrowLeft, IconBraces, IconBrowser, IconChartBar, IconCode, IconGitBranch, IconLayoutDashboard, IconLink, IconMessageCircle, IconSearch, IconTrash, IconUserCircle, IconX, IconBook, IconCircle, IconCircleDot } from "@tabler/icons-react";
 import { WebuiSearchField, WebuiSelectMenu, WebuiTextInput } from "../../../ui/field.js";
 import { WebuiInline } from "../../../ui/layout-primitives.js";
 import type { WebuiSessionListItem } from "../../../../shared/contracts/session.js";
@@ -36,7 +36,7 @@ import { useWebuiBrowserCapabilities } from "../../../bindings/browser-capabilit
 import { selectWebuiCatalogFlatPage } from "../../../features/sessions/application/session-catalog.public.js";
 import { BrowserSettingsPage } from "../../browser/ui/BrowserSettingsPage.public.js";
 import { ConnectionSettingsPage } from "./ConnectionSettingsPage.js";
-import { DESKTOP_SETTINGS_TABS, resolveThemePreference, filterSettingsTabs, SETTINGS_GROUPS } from "../projection/settings-view.js";
+import { DESKTOP_SETTINGS_TABS, resolveThemePreference, filterSettingsTabs, HIDDEN_SETTINGS_GROUPS, SETTINGS_GROUPS } from "../projection/settings-view.js";
 import type { SettingsTabKey } from "../projection/settings-view.js";
 import { DEFAULT_SHORTCUT_BINDINGS, parseShortcutBindings, serializeShortcutBindings, SHORTCUT_STORAGE_KEY } from "../../../projection/common/shortcuts.js";
 import { ShortcutsSettings } from "./ShortcutsSettings.js";
@@ -59,7 +59,6 @@ import { FeedbackEmpty } from "../../../ui/feedback.js";
 const ICONS = {
   desktop: IconLayoutDashboard,
   browser: IconBrowser,
-  voice: IconMicrophone,
   shortcuts: IconBraces,
   "custom-instructions": IconBook,
   chart: IconChartBar,
@@ -75,9 +74,8 @@ const ICONS = {
 } as const;
 
 function Icon({ name, size = 18 }: { readonly name: string; readonly size?: number }): ReactElement {
-  const voice = name === "voice";
   const Glyph = ICONS[name as keyof typeof ICONS] ?? IconLayoutDashboard;
-  return <Glyph aria-hidden="true" data-testid={voice ? "asr-mic-icon" : undefined} className="webui-settings-icon" size={size} stroke={1.4} />;
+  return <Glyph aria-hidden="true" className="webui-settings-icon" size={size} stroke={1.4} />;
 }
 function stored(key: string, fallback: string, storage: ReturnType<typeof useWebuiBrowserCapabilities>["storage"]): string {
   return storage.getItem(key) ?? fallback;
@@ -235,7 +233,10 @@ export function SettingsModal({ open, onClose, initialTab, dataDir, version, ses
   if (!open) return null;
   const selected = models.find((model) => model.selected);
   const modelValue = selected ? `${selected.providerId}/${selected.modelId}/${selected.variant ?? ""}` : "";
-  const groups = SETTINGS_GROUPS.map((group) => ({
+  // A hidden group takes its tabs out of the column and out of the search
+  // results both: the tabs come from `visibleTabs`, so a search hit inside a
+  // hidden section would otherwise list a nav item the sidebar has dropped.
+  const groups = SETTINGS_GROUPS.filter((group) => !HIDDEN_SETTINGS_GROUPS.includes(group.key)).map((group) => ({
     ...group,
     tabs: visibleTabs.filter((tab) => tab.group === group.key),
   })).filter((group) => group.tabs.length > 0);