@talgent/workbench-ui 0.0.0 → 0.1.2

package/components/work/work-prompt-bar.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Alert, CloseButton } from "@heroui/react";
+import { PluginPreparationStatus, type WorkPluginResult } from "@talgent/workbench-contracts/agent/public/v1/plugin_pb";
+import type { WorkStartupRepository } from "@talgent/workbench-contracts/agent/public/v1/work_pb";
+import { MessageInput, type MessageInputProps } from "../chat/message-input";
+import type { SlashCandidate } from "../composer/use-slash-completion";
+import { agentWorkClient } from "../../lib/client";
+import { pluginDisplayName } from "../../lib/marketplace-plugins";
+import { notify } from "../../lib/notifications";
+
+// Safe reason codes of Plugin installation and loading; unknown codes are
+// never shown raw. A failed plugin degrades the Work, so no retry is offered.
+const reasons: Record<string, string> = {
+  installation_failed: "Couldn’t be installed.",
+  marketplace_unavailable: "The catalog was unavailable, so it wasn’t installed.",
+  preparation_failed: "Couldn’t be set up.",
+  not_loaded: "Installed but not loaded by the agent.",
+  version_mismatch: "A different version was loaded than the one selected.",
+};
+function pluginFailure(result: WorkPluginResult) {
+  if (result.installation === PluginPreparationStatus.FAILED) return reasons[result.installationReason] ?? "Couldn’t be loaded.";
+  if (result.loading === PluginPreparationStatus.FAILED) return reasons[result.loadingReason] ?? "Couldn’t be loaded.";
+  return "";
+}
+
+// Why a selected repository was not checked out; the Work continues without it.
+const checkoutReasons: Record<string, string> = {
+  timed_out: "Checkout didn’t finish in time.",
+  checkout_unavailable: "The repository couldn’t be cloned.",
+  branch_unavailable: "The selected base branch wasn’t found.",
+  target_conflict: "Another folder already uses its place in the workspace.",
+  preparation_incomplete: "Checkout didn’t finish before the Work started.",
+};
+
+// The running Work's composer. Slash candidates are exactly what the Harness
+// reported, listed flat: the runtime gives them no reliable category. Plugins
+// that failed to install or load and repositories not checked out are reported
+// above it while the Work continues.
+export function WorkPromptBar({ repositories = [], ...props }: MessageInputProps & { workId: string; active: boolean; repositories?: WorkStartupRepository[] }) {
+  const { workId, active } = props;
+  const [dismissed, setDismissed] = useState<string[]>([]);
+  const capabilities = useQuery({ queryKey: ["work-capabilities", workId], queryFn: () => agentWorkClient.getWorkCapabilities({ workId }), enabled: active, retry: false, refetchInterval: active ? 15_000 : false });
+  const results = useQuery({ queryKey: ["work-plugin-results", workId], queryFn: () => agentWorkClient.getWorkPluginResults({ workId }), retry: false, refetchInterval: active ? 30_000 : false });
+  const commands = capabilities.data?.observed ? capabilities.data.commands : [];
+  // A namespaced name marks a Plugin Skill for the in-text highlight only.
+  const candidates: SlashCandidate[] = commands.map(command => ({ name: command.name, description: command.description, argumentHint: command.argumentHint, builtIn: !command.name.includes(":") }));
+  useCommandChanges(workId, commands.map(command => command.name), Boolean(capabilities.data?.observed));
+  const failures = (results.data?.plugins ?? []).map(result => ({ slug: result.slug, reason: pluginFailure(result) })).filter(item => item.reason && !dismissed.includes(item.slug));
+  const missing = repositories.filter(repository => repository.checkoutStatus === "not_checked_out" && !dismissed.includes(`repository:${repository.repositoryId}`));
+  const dismiss = (key: string) => setDismissed(current => [...current, key]);
+  const notices = failures.length || missing.length ? <div className="grid gap-2 mb-2">
+    {failures.map(failure => <DegradationNotice key={failure.slug} name={pluginDisplayName(failure.slug)} title={`${pluginDisplayName(failure.slug)} isn’t available in this Work`} description={`${failure.reason} Other plugins work as usual.`} onDismiss={() => dismiss(failure.slug)} />)}
+    {missing.map(repository => { const name = repository.name || repository.repositoryId; const reason = checkoutReasons[repository.checkoutReason];
+      return <DegradationNotice key={repository.repositoryId} name={name} title={`${name} wasn’t checked out`} description={`${reason ? `${reason} ` : ""}The Work continues without it.`} onDismiss={() => dismiss(`repository:${repository.repositoryId}`)} />; })}
+  </div> : undefined;
+  return <MessageInput {...props} notices={notices} slash={{ candidates, observed: Boolean(capabilities.data?.observed) }} />;
+}
+
+// A startup step that degraded: the Work runs without what it names.
+function DegradationNotice({ name, title, description, onDismiss }: { name: string; title: string; description: string; onDismiss: () => void }) {
+  return <Alert status="warning">
+    <Alert.Indicator /><Alert.Content><Alert.Title>{title}</Alert.Title><Alert.Description>{description}</Alert.Description></Alert.Content>
+    <CloseButton aria-label={`Dismiss ${name} notice`} onPress={onDismiss} />
+  </Alert>;
+}
+
+// A notice when the Harness reports a changed command set, not on first load.
+function useCommandChanges(workId: string, names: string[], observed: boolean) {
+  const previous = useRef<string[] | null>(null);
+  const key = names.join("\n");
+  useEffect(() => {
+    if (!observed) return;
+    const current = key ? key.split("\n") : [];
+    const before = previous.current;
+    previous.current = current;
+    if (!before) return;
+    const added = current.filter(name => !before.includes(name));
+    if (added.length) notify(`commands:${workId}`, "default", added.length === 1 ? "New command available" : `${added.length} new commands available`, `${added.map(name => `/${name}`).join(", ")} can be used in this Work. Type / to use it.`);
+    else if (current.length !== before.length) notify(`commands:${workId}`, "default", "Commands updated", "Type / to see what this Work can run now.");
+  }, [key, observed, workId]);
+}

package/components/work/work-question-record.tsx

@@ -0,0 +1,72 @@
+import { useId, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Alert, Button } from "@heroui/react";
+import { ChevronDown } from "lucide-react";
+import { InteractionPhase, UnifiedMessageKind, type UnifiedMessage } from "@talgent/workbench-contracts/dispatcher/public/v1/unified_message_pb";
+import { useWorkStreamSource } from "../../lib/work-stream-source";
+import { parseWorkQuestions } from "../../lib/work-questions";
+import { ToolMessageDetail } from "./tool-message-detail";
+
+export function WorkQuestionRecord({ message, action, output, open, onToggle }: {
+  message: UnifiedMessage; action?: UnifiedMessage; output?: UnifiedMessage; open: boolean; onToggle: () => void;
+}) {
+  const contentId = useId();
+  const [showOutput, setShowOutput] = useState(false);
+  if (message.payload.case !== "interaction") return null;
+  const question = message.payload.value;
+  let answers: Record<string, string> = {};
+  let valid = true;
+  try {
+    const value: unknown = JSON.parse(question.responseJson || "{}");
+    if (value && typeof value === "object" && !Array.isArray(value) && Object.values(value).every(answer => typeof answer === "string")) answers = value as Record<string, string>;
+    else valid = false;
+  } catch { valid = false; }
+  const answered = Object.keys(answers).length;
+  const asked = question.questionCount ? `Asked ${question.questionCount} ${question.questionCount === 1 ? "question" : "questions"}` : "Asked questions";
+  const resolved = valid && (question.phase === InteractionPhase.RESPONDED || question.phase === InteractionPhase.SKIPPED);
+  const status = resolved ? `Answered ${answered}${question.questionCount ? `, skipped ${Math.max(0, question.questionCount - answered)}` : ""}`
+    : !valid ? "Response unavailable" : question.phase === InteractionPhase.FAILED ? "Response failed" : question.phase === InteractionPhase.CANCELLED ? "Cancelled" : "Waiting for response";
+  const failedOutput = output?.payload.case === "observation" && output.payload.value.isError ? output : undefined;
+  const cancelled = question.phase === InteractionPhase.CANCELLED || question.phase === InteractionPhase.SKIPPED;
+  return <div className="wm-question-record" id={`wm-message-${message.id}`} data-message-id={message.id}>
+    <Button variant="ghost" className="wm-tool-summary" aria-expanded={open} aria-controls={contentId} onPress={onToggle}>{asked} · {status}<ChevronDown size={14} aria-hidden="true" /></Button>
+    {open && <div id={contentId}>
+      {question.error && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{question.error}</Alert.Description></Alert.Content></Alert>}
+      {failedOutput && <Button size="sm" variant="ghost" aria-expanded={showOutput} onPress={() => setShowOutput(!showOutput)}>{showOutput ? "Show questions" : cancelled ? "Show tool output" : "Show tool error"}</Button>}
+      {failedOutput && showOutput ? <ToolMessageDetail workId={message.agentWorkId} messageId={failedOutput.id} /> : <QuestionAnswers message={message} action={action} answers={answers} resolved={resolved} />}
+    </div>}
+  </div>;
+}
+
+function QuestionAnswers({ message, action, answers, resolved }: {
+  message: UnifiedMessage; action?: UnifiedMessage; answers: Record<string, string>; resolved: boolean;
+}) {
+  const streamClient = useWorkStreamSource();
+  const toolCallId = message.payload.case === "interaction" ? message.payload.value.toolCallId : "";
+  const input = useQuery({
+    queryKey: ["question-input", message.agentWorkId, toolCallId, action?.id],
+    queryFn: async ({ signal }) => {
+      // Only the expanded record owns its original input. It is released on
+      // collapse; each transport page stays within the detail API limit.
+      const original = action ?? (await streamClient.listMessagesBySession({ agentWorkId: message.agentWorkId, agent: message.agent, toolCallIds: [toolCallId], kinds: [UnifiedMessageKind.ACTION], limit: 1 }, { signal })).messages[0];
+      if (!original) throw new Error("Original questions unavailable");
+      let text = "", offset = 0;
+      for (;;) {
+        const page = await streamClient.getMessageDetail({ agentWorkId: message.agentWorkId, messageId: original.id, offset, limit: 65536 }, { signal });
+        text += page.text;
+        if (page.nextOffset >= page.totalLength) break;
+        if (page.nextOffset <= offset) throw new Error("Incomplete question input");
+        offset = page.nextOffset;
+      }
+      const parsed = parseWorkQuestions(text);
+      if (!parsed) throw new Error("Original questions unavailable");
+      return parsed.questions;
+    },
+    gcTime: 0, staleTime: Infinity, retry: false, refetchOnWindowFocus: false, refetchOnReconnect: false,
+  });
+  return <>
+    {input.isPending && <p className="sr-only" role="status">Loading questions…</p>}
+    {input.isError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>Could not load original questions.</Alert.Description></Alert.Content><Button variant="ghost" size="sm" onPress={() => void input.refetch()}>Retry</Button></Alert>}
+    {input.data && <dl>{input.data.map((question, index) => <div key={index}><dt>{question.question}</dt><dd>{Object.hasOwn(answers, question.question) ? answers[question.question] : resolved ? "Skipped" : "No answer"}</dd></div>)}</dl>}
+  </>;
+}

package/components/work/work-snapshot-state.tsx

@@ -0,0 +1,24 @@
+import { Alert, Button } from "@heroui/react";
+import { CircleOff, CloudOff } from "lucide-react";
+import "./conversation-unavailable.css";
+
+/** Shown in place of the conversation when the Work's state cannot be read:
+ * the authority says it does not exist, or the first read failed. */
+export function WorkSnapshotUnavailable({ notFound, onRetry }: { notFound: boolean; onRetry: () => void }) {
+  if (notFound) return <p className="wca-unavailable" role="status"><CircleOff size={20} aria-hidden="true" />This Work no longer exists</p>;
+  return <div className="wca-unavailable" role="alert">
+    <CloudOff size={20} aria-hidden="true" />
+    <span>This Work's state could not be loaded</span>
+    <Button size="sm" variant="ghost" onPress={onRetry}>Retry</Button>
+  </div>;
+}
+
+/** The page keeps the last state it read and says how old it is until a
+ * refresh succeeds again. */
+export function WorkSnapshotStaleNotice({ lastUpdatedAt, onRetry }: { lastUpdatedAt: Date; onRetry: () => void }) {
+  return <Alert status="warning" role="status">
+    <Alert.Indicator />
+    <Alert.Content><Alert.Description>Showing the state from {lastUpdatedAt.toLocaleTimeString()}. Updates are failing; actions are checked against the current Work before they apply.</Alert.Description></Alert.Content>
+    <Button size="sm" variant="ghost" onPress={onRetry}>Refresh</Button>
+  </Alert>;
+}

package/components/work/work-status-control.tsx

@@ -0,0 +1,54 @@
+import { createPortal } from "react-dom";
+import { Alert, Button, Dropdown, Label, Modal, Tooltip } from "@heroui/react";
+import { Archive, Circle, Play, Power, RotateCcw } from "lucide-react";
+import { useReadingArea } from "../shell/reading-context";
+import { workPresentation, workStatusName } from "../../lib/work-state-presentation";
+import type { useWorkLifecycleControls } from "../../hooks/use-work-lifecycle-controls";
+
+interface WorkStatusControlProps {
+  workLifecycle: string;
+  allowedActions: string[];
+  /** Why the Work stopped, when it is Stopped. */
+  stateReason?: string;
+  /** When the Work was disconnected; absent while observed. */
+  disconnectedSince?: Date;
+  disabled?: boolean;
+  controls: ReturnType<typeof useWorkLifecycleControls>;
+}
+
+export function WorkStatusControl({ workLifecycle, allowedActions, stateReason, disconnectedSince, disabled = false, controls }: WorkStatusControlProps) {
+  const { archiveOpen, setArchiveOpen, pending: actionPending, error: actionError, stop, resume, restart, archive } = controls;
+  const controlsPending = disabled || actionPending;
+  const { workStatusToolbar } = useReadingArea();
+  const archiveDialog = <Modal><Modal.Backdrop isOpen={archiveOpen} onOpenChange={setArchiveOpen} isDismissable={!actionPending} isKeyboardDismissDisabled={actionPending}><Modal.Container placement="center" size="sm"><Modal.Dialog>
+    <Modal.Header><Modal.Heading>Archive work?</Modal.Heading></Modal.Header>
+    <Modal.Body><p>This closes the work and removes its working files. Published files and your home are kept.</p>{actionError && <Alert status="danger" role="alert"><Alert.Indicator /><Alert.Content><Alert.Description>{actionError}</Alert.Description></Alert.Content></Alert>}</Modal.Body>
+    <Modal.Footer><Button autoFocus variant="secondary" isDisabled={actionPending} onPress={() => setArchiveOpen(false)}>Cancel</Button><Button variant="danger" isPending={actionPending} onPress={() => void archive()}>Archive work</Button></Modal.Footer>
+  </Modal.Dialog></Modal.Container></Modal.Backdrop></Modal>;
+
+  const status = workPresentation({ state: workLifecycle, stateReason, disconnectedSince });
+  const StatusIcon = status?.icon ?? Circle;
+  const label = status?.label ?? "Unknown state";
+  const name = workStatusName("Work: ", { label, description: status?.description });
+  const tooltip = status?.description ? <><p>{label}</p><p className="text-muted">{status.description}</p></> : label;
+  const actions = [
+    { id: "stop", label: "Stop work", icon: Power },
+    { id: "resume", label: "Resume work", icon: Play },
+    { id: "restart", label: "Restart work", icon: RotateCcw },
+    { id: "archive", label: "Archive work", icon: Archive },
+  ].filter(action => allowedActions.includes(action.id));
+  const workStatus = workStatusToolbar && createPortal(actions.length ? <Dropdown>
+    <Tooltip><Button size="sm" variant="ghost" isIconOnly aria-label={name} isDisabled={controlsPending}><StatusIcon size={17} aria-hidden="true" /></Button><Tooltip.Content className="max-w-72">{tooltip}</Tooltip.Content></Tooltip>
+    <Dropdown.Popover placement="bottom end"><Dropdown.Menu aria-label="Work actions" onAction={key => {
+      if (controlsPending || !allowedActions.includes(String(key))) return;
+      if (key === "stop") void stop();
+      else if (key === "resume") void resume();
+      else if (key === "restart") void restart();
+      else if (key === "archive") setArchiveOpen(true);
+    }}>
+      {actions.map(({ id, label, icon: Icon }) => <Dropdown.Item key={id} id={id} textValue={label} variant={id === "archive" ? "danger" : undefined} isDisabled={controlsPending}><Icon size={17} aria-hidden="true" /><Label>{label}</Label></Dropdown.Item>)}
+    </Dropdown.Menu></Dropdown.Popover>
+  </Dropdown> : <Tooltip><Tooltip.Trigger className="wm-work-status" role="status" tabIndex={0} aria-label={name}><StatusIcon size={17} aria-hidden="true" /></Tooltip.Trigger><Tooltip.Content className="max-w-72">{tooltip}</Tooltip.Content></Tooltip>, workStatusToolbar);
+
+  return <>{workStatus}{archiveDialog}</>;
+}

package/components/work-start/start-work-launch-state.ts

@@ -0,0 +1,33 @@
+import { Code, ConnectError } from "@connectrpc/connect";
+import { ComputerOutdatedSchema, SandboxUnavailableSchema } from "@talgent/workbench-contracts/agent/public/v1/harness_pb";
+
+/** Why a start failed; computer is the one it was started on. A full Managed
+ * Computer, one without Claude Code's sandbox, or one below the Minimum
+ * Version is named with what its owner can do about it. */
+export function startWorkErrorMessage(err: unknown, computer?: { name: string; managed: boolean }) {
+  if (err instanceof ConnectError && err.code === Code.ResourceExhausted) {
+    if (computer?.managed) return `${computer.name} already runs as many Works as its Capacity allows. Try again once one ends, or raise its Capacity or let it queue runs on the Computers page in your account menu.`;
+    return "Execution capacity is unavailable. Try starting again when capacity is free.";
+  }
+  const message = err instanceof Error ? err.message : "Failed to start work.";
+  if (err instanceof ConnectError && err.findDetails(SandboxUnavailableSchema).length > 0) {
+    return `${computer?.name ?? "This Computer"} can’t run Works in Claude Code’s sandbox (native Windows has none; on Linux install bubblewrap and socat). Turn the sandbox off or choose another Computer.`;
+  }
+  if (err instanceof ConnectError && err.findDetails(ComputerOutdatedSchema).length > 0) {
+    return `${computer?.name ?? "This Computer"} runs a Talgent Computer older than Talgent supports, so it takes no new Works. It upgrades itself while connected; if it stays outdated, reinstall it with the command on the Computers page in your account menu.`;
+  }
+  if (/github_(reconnect_required|authorization_revoked)/i.test(message)) {
+    return "GitHub authorization needs to be renewed in Marketplace › Providers before repository checkout can start.";
+  }
+  if (err instanceof ConnectError && err.code === Code.FailedPrecondition && isRepositoryCheckoutPreconditionMessage(message)) {
+    return `GitHub repository checkout cannot start (failed_precondition): ${message}`;
+  }
+  if (/\[failed_precondition\]/i.test(message) && isRepositoryCheckoutPreconditionMessage(message)) {
+    return `GitHub repository checkout cannot start: ${message}`;
+  }
+  return message;
+}
+
+function isRepositoryCheckoutPreconditionMessage(message: string) {
+  return /(scm|github|checkout|repository)/i.test(message);
+}

package/components/work-start/work-start-catalog.tsx

@@ -0,0 +1,116 @@
+import { useState, type ReactNode } from "react";
+import { Button, ListBox } from "@heroui/react";
+import type { PluginSummary } from "@talgent/workbench-contracts/marketplace/public/v1/marketplace_pb";
+import { AlertTriangle, ArrowLeft, Plug, Puzzle, Settings2 } from "lucide-react";
+import { providerName, serviceLabel, useConnectProvider } from "../../lib/marketplace-connections";
+import { pluginDisplayName, pluginPresentation } from "../../lib/marketplace-plugins";
+import { draftsFrom } from "../../lib/plugin-parameters";
+import type { ConnectorRow, LoadoutRow } from "../../lib/work-start-loadout";
+import type { WorkStartDraft } from "../../lib/work-start-draft";
+import { ParameterFields } from "../marketplace/parameter-fields";
+import { CheckRow, ScopeNote, Search, TrayPopover } from "./work-start-tray";
+
+type Update = (change: Partial<WorkStartDraft> | ((draft: WorkStartDraft) => WorkStartDraft)) => void;
+type Entry = { key: string; category: string; installed: boolean; title: string; secondary: string; warn?: boolean; checked: boolean; disabled?: boolean; trailing?: ReactNode; onChange: () => void };
+
+const installedSection = "installed";
+const byCategory = (a: string, b: string) => a === "Other" ? 1 : b === "Other" ? -1 : a.localeCompare(b);
+
+// Plugins and Connectors browse by catalog category. The rail opens on
+// Installed — the starter's installations and required entries — then every
+// category; checking an entry anywhere includes it in this Work, so browsing
+// and adding are one list. A search spans every category.
+function CatalogPicker({ noun, entries }: { noun: string; entries: Entry[] }) {
+  const [section, setSection] = useState(installedSection);
+  const [query, setQuery] = useState("");
+  const categories = [...new Set(entries.map(entry => entry.category))].sort(byCategory);
+  const searching = Boolean(query.trim());
+  const shown = searching ? entries.filter(entry => `${entry.title} ${entry.secondary} ${entry.category}`.toLowerCase().includes(query.trim().toLowerCase()))
+    : entries.filter(entry => section === installedSection ? entry.installed : entry.category === section);
+  const count = (predicate: (entry: Entry) => boolean) => entries.filter(predicate).length;
+  return <>
+    <Search label={`Search ${noun}`} value={query} onChange={setQuery} />
+    <div className="wst-catalog" data-searching={searching || undefined}>
+      {!searching && <ListBox aria-label={`${noun} categories`} selectionMode="single" disallowEmptySelection selectedKeys={[section]} className="wst-rail"
+        onSelectionChange={keys => { if (keys !== "all") { const next = [...keys][0]; if (next !== undefined) setSection(String(next)); } }}>
+        {[[installedSection, "Installed", count(entry => entry.installed)] as const, ...categories.map(name => [name, name, count(entry => entry.category === name)] as const)].map(([id, name, total]) =>
+          <ListBox.Item key={id} id={id} textValue={name} className="wst-rail-item"><span className="wst-rail-name">{name}</span><span className="wpb-muted wst-count">{total}</span></ListBox.Item>)}
+      </ListBox>}
+      <div className="wst-rows wst-pane" role="group" aria-label={searching ? `Matching ${noun}` : section === installedSection ? "Installed" : section}>
+        {shown.length ? shown.map(entry => <CheckRow key={entry.key} label={`Include ${entry.title} in this Work`} checked={entry.checked} disabled={entry.disabled} struck={entry.installed && !entry.checked} title={entry.title}
+          secondary={searching ? `${entry.category} · ${entry.secondary}` : entry.secondary} warn={entry.warn} trailing={entry.trailing} onChange={entry.onChange} />)
+          : <p className="wpb-empty" role="status">{searching ? `No ${noun} match.` : `No ${noun} here yet.`}</p>}
+      </div>
+    </div>
+    <ScopeNote />
+  </>;
+}
+
+const summary = (row: LoadoutRow) => [row.skills.length ? `${row.skills.length} ${row.skills.length === 1 ? "skill" : "skills"}` : "", row.agents.length ? `${row.agents.length} ${row.agents.length === 1 ? "agent" : "agents"}` : ""].filter(Boolean).join(" · ") || "No skills or agents";
+const rowState = (row: LoadoutRow) => row.problem || (row.difference === "removed" ? "Off for this Work" : row.edited.length ? `${row.edited.length} ${row.edited.length === 1 ? "setting" : "settings"} changed for this Work` : row.difference === "required" ? "Always included" : summary(row));
+const hasSettings = (release?: PluginSummary) => Boolean(release && Object.keys(release.parameters).length);
+
+// Plugins of this Work as differences from the defaults. `view` is a Plugin's
+// slug while its settings for this Work are open.
+export function PluginsMenu({ rows, catalog, draft, update, disabled, open, onOpenChange, view, onViewChange, errors }: {
+  rows: LoadoutRow[]; catalog: PluginSummary[]; draft: WorkStartDraft; update: Update; disabled: boolean; open: boolean; onOpenChange: (open: boolean) => void;
+  view: string; onViewChange: (view: string) => void; errors: Record<string, Record<string, string>>;
+}) {
+  const included = rows.filter(row => row.included);
+  const changes = rows.filter(row => row.difference === "added" || row.difference === "removed" || row.edited.length).length;
+  const toggle = (row: LoadoutRow) => update(current => {
+    const plugins = { ...current.plugins };
+    if (row.difference === "added") delete plugins[row.slug];
+    else if (row.included) plugins[row.slug] = { include: false, values: plugins[row.slug]?.values ?? {} };
+    else plugins[row.slug] = { values: plugins[row.slug]?.values ?? {} };
+    // A Startup Agent provided only by a removed Plugin resets to the default.
+    const agent = row.included && row.agents.some(item => item.name === current.agent) ? "" : current.agent;
+    return { ...current, plugins, agent };
+  });
+  const add = (slug: string) => update(current => ({ ...current, plugins: { ...current.plugins, [slug]: { include: true, values: {} } } }));
+  const detail = rows.find(row => row.slug === view);
+  const entries: Entry[] = [
+    ...rows.map(row => ({ key: row.slug, category: row.release ? pluginPresentation(row.release).category : "Other", installed: row.difference !== "added", title: row.name, secondary: rowState(row), warn: Boolean(row.problem),
+      checked: row.included, disabled: row.difference === "required", onChange: () => toggle(row),
+      trailing: row.included && row.difference !== "required" && hasSettings(row.release) ? <Button size="sm" variant="ghost" isIconOnly aria-label={`${row.name} settings for this Work`} onPress={() => onViewChange(row.slug)}>{row.problem ? <AlertTriangle size={14} className="text-warning" aria-hidden="true" /> : <Settings2 size={14} aria-hidden="true" />}</Button> : undefined })),
+    ...catalog.filter(release => !rows.some(row => row.slug === release.slug)).map(release => ({ key: release.slug, category: pluginPresentation(release).category, installed: false, title: pluginPresentation(release).name || pluginDisplayName(release.slug), secondary: release.description, checked: false, onChange: () => add(release.slug) })),
+  ];
+  return <TrayPopover label="Plugins" value={`${included.length} plugins${changes ? ` · ${changes} changed` : ""}`} icon={<Puzzle size={16} />} disabled={disabled} attention={included.some(row => row.problem)} open={open} wide={!detail} onOpenChange={value => { onOpenChange(value); if (value) onViewChange(""); }}>
+    {detail ? <>
+      {/* The settings view replaces the button that opened it; focus moves here so it never falls out of the popover and closes it. */}
+      <div className="wst-back-row"><Button size="sm" variant="ghost" isIconOnly autoFocus aria-label="Back to plugins" onPress={() => onViewChange("")}><ArrowLeft size={15} /></Button><span className="wst-heading">{detail.name}</span></div>
+      {hasSettings(detail.release) ? <div className="wst-params">
+        <ParameterFields declarations={detail.release!.parameters} drafts={draft.plugins[detail.slug]?.values ?? {}} errors={errors[detail.slug]} redacted={detail.installed?.redactedParameters} inherited={draftsFrom(detail.installed?.configuration)}
+          onChange={(name, value) => update(current => ({ ...current, plugins: { ...current.plugins, [detail.slug]: { include: current.plugins[detail.slug]?.include, values: { ...(current.plugins[detail.slug]?.values ?? {}), [name]: value } } } }))} />
+        {detail.edited.length > 0 && <Button size="sm" variant="ghost" onPress={() => update(current => ({ ...current, plugins: { ...current.plugins, [detail.slug]: { include: current.plugins[detail.slug]?.include, values: {} } } }))}>Use my defaults</Button>}
+      </div> : <p className="wpb-empty">This plugin has no settings.</p>}
+      <ScopeNote />
+    </> : <CatalogPicker noun="plugins" entries={entries} />}
+  </TrayPopover>;
+}
+
+// Connectors mirror Plugins: defaults on, removable or addable for this Work.
+// A Provider that isn't connected is shown with a way to connect; it never
+// blocks the start. A Connector a Work on the chosen Managed Computer leaves
+// out is shown as unavailable, a required one included.
+export function ConnectorsMenu({ rows, update, disabled, open, onOpenChange, returnTo }: { rows: ConnectorRow[]; update: Update; disabled: boolean; open: boolean; onOpenChange: (open: boolean) => void; returnTo: string }) {
+  const connect = useConnectProvider();
+  const included = rows.filter(row => row.included);
+  const toggle = (row: ConnectorRow) => update(current => {
+    const connectors = { ...current.connectors };
+    if (row.difference === "removed" || (row.difference === "added" && row.included)) delete connectors[row.name];
+    else connectors[row.name] = !row.included;
+    return { ...current, connectors };
+  });
+  const entries: Entry[] = rows.map(row => {
+    const provider = row.connector?.provider ?? "";
+    const needs = Boolean(row.included && provider && row.connector?.providerConnection !== "connected");
+    const category = row.connector?.category ? pluginDisplayName(row.connector.category) : "Other";
+    return { key: row.name, category, installed: row.difference !== "added", title: serviceLabel(row.name), checked: row.included, disabled: row.difference === "required" || row.unavailable, warn: needs, onChange: () => toggle(row),
+      secondary: row.unavailable ? "Not available on this Computer" : row.difference === "required" ? "Always included" : row.difference === "added" && row.included ? "Added for this Work" : needs ? `${providerName(provider)} isn’t connected — its tools won’t work` : provider ? `Signs in with ${providerName(provider)}` : row.connector?.description ?? "",
+      trailing: needs ? <Button size="sm" variant="secondary" isPending={connect.isPending} onPress={() => connect.mutate({ provider, returnTo })}>Connect</Button> : undefined };
+  });
+  return <TrayPopover label="Connectors" value={`${included.length} ${included.length === 1 ? "connector" : "connectors"}`} icon={<Plug size={16} />} disabled={disabled} wide attention={included.some(row => row.connector?.provider && row.connector.providerConnection !== "connected")} open={open} onOpenChange={onOpenChange}>
+    <CatalogPicker noun="connectors" entries={entries} />
+  </TrayPopover>;
+}

package/components/work-start/work-start-form.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useId, useRef, useState, type FormEvent, type ReactNode } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@heroui/react";
+import { AlertTriangle, ArrowUp, Paperclip, X } from "lucide-react";
+import { useLocation } from "react-router-dom";
+import type { WorkStartInput } from "../../lib/start-work-request";
+import { useConnectors, useInstalledPlugins, usePluginCatalog, usePluginReleases } from "../../lib/marketplace-catalog";
+import { useUsableComputers } from "../../lib/computer-service";
+import { startModels, startModelSelection } from "../../lib/work-model";
+import { defaultPermissionMode } from "../../lib/permission-modes";
+import { useWorkStartDraft } from "../../lib/work-start-draft";
+import type { WorkStartSource } from "../../lib/work-start-source";
+import { connectorChoices, connectorLoadout, pluginChoices, pluginLoadout } from "../../lib/work-start-loadout";
+import { startWorkErrorMessage } from "./start-work-launch-state";
+import { PromptBar } from "../composer/prompt-bar";
+import { PromptAddMenu, PromptModelControl } from "../composer/prompt-bar-controls";
+import { SkillHighlight } from "../composer/skill-completion";
+import { useSlashCompletion, type SlashCandidate } from "../composer/use-slash-completion";
+import { ConnectorsMenu, PluginsMenu } from "./work-start-catalog";
+import { AgentPicker, ComputerPicker, HarnessPicker, RepositoryPicker } from "./work-start-tray";
+import "./work-start-tray.css";
+
+type Menu = "Computer" | "Permissions" | "Repository" | "Agent" | "Plugins" | "Connectors";
+
+// `unavailable` shows the form disabled with the reason, without anyone's
+// personal loadout: a Work runs with its owner's own choices.
+export function WorkStartForm({ source, disabled: blocked = false, unavailable, onStart }: { source: WorkStartSource; disabled?: boolean; unavailable?: ReactNode; onStart: (input: WorkStartInput) => Promise<void> }) {
+  const disabled = blocked || Boolean(unavailable);
+  const id = useId();
+  const input = useRef<HTMLTextAreaElement>(null);
+  const fileInput = useRef<HTMLInputElement>(null);
+  const { pathname } = useLocation();
+  const { draft, update, current } = useWorkStartDraft(source.draft);
+  const options = useQuery({ queryKey: ["work-start-options", ...source.key], queryFn: ({ signal }) => source.loadOptions(signal), retry: false, enabled: !unavailable });
+  // Repository discovery waits on the Provider, so it loads apart from the other options.
+  const repositories = useQuery({ queryKey: ["work-start-repositories", ...source.key], queryFn: ({ signal }) => source.loadRepositories(signal), retry: false, enabled: !unavailable });
+  const catalog = usePluginCatalog();
+  const installed = useInstalledPlugins();
+  const connectors = useConnectors();
+  // Only a source that chooses a Computer offers the choice; without one the platform's default runs the Work.
+  const computers = useUsableComputers(Boolean(source.chooseComputer) && !unavailable);
+  const computerList = source.chooseComputer ? computers.data : undefined;
+  // A remembered choice is never dropped silently: the start waits for the
+  // list that confirms it, and one the list no longer has must be chosen again.
+  const computerMissing = Boolean(draft.computer && computerList && !computerList.some(item => item.id === draft.computer));
+  const computer = computerMissing ? undefined : computerList?.find(item => item.id === draft.computer) ?? computerList?.[0];
+  const offline = computer && !computer.reachable ? computer : undefined;
+  const computerUnconfirmed = Boolean(source.chooseComputer && draft.computer && !computerList);
+  const managed = Boolean(computer?.managed);
+  // Only a Managed Computer's Harness takes a permission mode and a sandbox.
+  // A machine without Claude Code's sandbox is never asked for it.
+  const chosenHarness = managed ? draft.harness ?? { permissionMode: defaultPermissionMode, sandbox: false } : undefined;
+  const harness = chosenHarness && { ...chosenHarness, sandbox: chosenHarness.sandbox && Boolean(computer?.sandbox) };
+  const [menu, setMenu] = useState<Menu | null>(null);
+  // A Plugin's slug while its settings for this Work are open.
+  const [pluginView, setPluginView] = useState("");
+  const [modelOpen, setModelOpen] = useState(false);
+  const [error, setError] = useState("");
+  const [invalid, setInvalid] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [uploading, setUploading] = useState("");
+  const models = startModels(options.data?.models ?? [], managed);
+  // The first model offered is the default, also when a saved draft names
+  // one that is no longer offered.
+  const model = models.find(item => !item.machineLogin && item.configurationId === draft.model?.configurationId) ?? models[0];
+  const thinking = draft.thinkingLevel ?? model?.defaultThinkingLevel ?? "";
+  // Plugins added for this Work are read in full for their Skills and Agents.
+  const added = unavailable ? [] : Object.entries(draft.plugins).filter(([slug, choice]) => choice.include && !(options.data?.plugins ?? []).some(plugin => plugin.name === slug)).map(([slug]) => slug);
+  const details = usePluginReleases(added);
+  const rows = unavailable ? [] : pluginLoadout(options.data?.plugins ?? [], catalog.data ?? [], installed.data, draft, details);
+  const included = rows.filter(row => row.included);
+  const connectorRows = unavailable ? [] : connectorLoadout(options.data?.connectors ?? [], connectors.data ?? [], draft, managed);
+  const agents = included.flatMap(row => row.agents);
+  const candidates: SlashCandidate[] = included.flatMap(row => row.skills.map(skill => ({ ...skill, group: row.name })));
+  const slash = useSlashCompletion(draft.instruction, instruction => update({ instruction }), candidates, `${id}-skills`, true);
+  const choices = pluginChoices(rows, draft);
+  const problems = included.filter(row => row.problem);
+  const agentMissing = Boolean(draft.agent) && !agents.some(agent => agent.name === draft.agent);
+  const controlsDisabled = disabled || draft.submitting;
+  const openMenu = (name: Menu) => (open: boolean) => setMenu(open ? name : null);
+
+  useEffect(() => {
+    const element = input.current;
+    if (element) { element.style.height = "auto"; element.style.height = `${Math.min(element.scrollHeight, 220)}px`; }
+  }, [draft.instruction]);
+
+  async function submit(event?: FormEvent<HTMLFormElement>) {
+    event?.preventDefault();
+    if (current().submitting || disabled) return;
+    setInvalid(false); setError(""); setSubmitted(true);
+    if (!draft.instruction.trim()) { setInvalid(true); setError("Enter an initial instruction."); input.current?.focus(); return; }
+    // Load failures are reported with a retry; there is nothing to correct here.
+    if (options.isError || catalog.isError || installed.isError) return;
+    if (!model || (thinking && !model.thinkingLevels.includes(thinking))) { setError("Choose an available model and thinking level before starting."); return; }
+    // Blocking problems are reported before submission; missing authorization is not one.
+    if (problems.length || Object.keys(choices.errors).length || agentMissing || offline) return;
+    if (computerMissing) { setError("Choose a Computer before starting."); return; }
+    // A Computer list that failed to load is reported with a retry.
+    if (computerUnconfirmed) { if (!computers.isError) setError("Computers are still loading. Try again in a moment."); return; }
+    // Chosen repositories are checked once their discovery answers; the start waits for it.
+    const reachable = new Set((repositories.data?.repositories ?? []).map(repository => repository.id));
+    if (draft.repositories.length && repositories.isPending) { setError("Repositories are still loading. Try again in a moment."); return; }
+    if (draft.repositories.some(repository => !reachable.has(repository))) { setError("A selected repository is no longer reachable. Update your selection before starting."); return; }
+    update({ submitting: true }); setMenu(null); setModelOpen(false);
+    try {
+      for (const attachment of draft.files) {
+        if (attachment.uploaded) continue;
+        setUploading(attachment.file.name);
+        await source.uploadAttachment?.(attachment.file);
+        update(value => ({ ...value, files: value.files.map(item => item.id === attachment.id ? { ...item, uploaded: true } : item) }));
+      }
+      setUploading("");
+      const instructions = [draft.instruction.trim()];
+      if (draft.files.length) instructions.push(`Use the attached files: ${draft.files.map(item => item.file.name).join(", ")}.`);
+      const connectorsChanged = connectorChoices(connectorRows);
+      await onStart({ initialMessage: instructions.join("\n\n"), model: startModelSelection(model), thinkingLevel: thinking,
+        repositorySelections: draft.repositories.map(repositoryId => ({ repositoryId, baseBranch: "" })),
+        ...(computer && { computerId: computer.id }),
+        ...(harness && { harness }),
+        ...(choices.plugins.length || connectorsChanged.length || draft.agent ? { creationCapabilities: { plugins: choices.plugins, connectors: connectorsChanged, ...(draft.agent ? { startupAgent: draft.agent } : {}) } } : {}),
+      });
+      update({ files: [] });
+    } catch (cause) { setError(startWorkErrorMessage(cause, computer)); }
+    finally { setUploading(""); update({ submitting: false }); }
+  }
+
+  return <form className="wpb-form" noValidate onSubmit={event => void submit(event)}>
+    {unavailable}
+    {/* The slash menu floats under the composer, over the tray, like the tray's own cards. */}
+    <div className="relative">
+    {slash.menu && <div className="sk-menu-float sk-menu-under">{slash.menu}</div>}
+    <PromptBar
+      input={{ ref: input, "aria-label": "Initial instruction", "aria-invalid": invalid, "aria-describedby": invalid ? `${id}-error` : undefined, value: draft.instruction, placeholder: "What would you like to do? Type / for Skills", disabled: controlsDisabled, ...slash.inputProps,
+        onChange: event => update({ instruction: event.target.value }),
+        onKeyDown: event => { if (slash.onKeyDown(event)) return; if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) { event.preventDefault(); void submit(); } } }}
+      context={<>
+        <SkillHighlight text={draft.instruction} candidates={candidates} />
+        {draft.files.length > 0 && <div className="wpb-context" aria-label="Selected context">
+          {draft.files.map(attachment => <Button key={attachment.id} size="sm" variant="tertiary" isDisabled={controlsDisabled} aria-label={`Remove attachment ${attachment.file.name}`} onPress={() => update({ files: draft.files.filter(item => item.id !== attachment.id) })}><Paperclip size={13} /><span className="wpb-filename">{attachment.file.name}</span><X size={12} /></Button>)}
+        </div>}
+      </>}
+      leading={<PromptAddMenu disabled={controlsDisabled} onAttach={source.uploadAttachment ? () => fileInput.current?.click() : undefined}
+        onCommands={() => { update(value => ({ ...value, instruction: !value.instruction || /\s$/.test(value.instruction) ? `${value.instruction}/` : `${value.instruction} /` })); setTimeout(() => input.current?.focus()); }} />}
+    >
+      <PromptModelControl models={models} model={model} thinking={thinking} disabled={controlsDisabled} loading={options.isPending && !unavailable} open={modelOpen} onOpenChange={setModelOpen} onChange={(next, thinkingLevel) => update({ model: startModelSelection(next), thinkingLevel })} />
+      <Button type="submit" size="sm" isIconOnly className="wpb-send" aria-label="Start work" isPending={draft.submitting} isDisabled={disabled || options.isPending || installed.isLoading || !model}><ArrowUp size={19} /></Button>
+    </PromptBar>
+    </div>
+    <input ref={fileInput} type="file" multiple hidden aria-label="Choose attachments" disabled={controlsDisabled} onChange={event => { const files = Array.from(event.target.files ?? []).map(file => ({ id: crypto.randomUUID(), file, uploaded: false })); update(value => ({ ...value, files: [...value.files, ...files] })); event.target.value = ""; }} />
+    <div className="wpb-tray" role="group" aria-label="Work startup configuration">
+      {/* Another kind of Computer offers other models, so its thinking effort starts over; a Cloud drops the Harness choices. */}
+      <ComputerPicker computers={computerList} selected={computer} disabled={controlsDisabled} open={menu === "Computer"} onOpenChange={openMenu("Computer")}
+        onChange={id => update(value => { const toManaged = Boolean(computerList?.find(item => item.id === id)?.managed); return { ...value, computer: id, ...(toManaged !== managed && { thinkingLevel: undefined }), ...(!toManaged && { harness: undefined }) }; })} />
+      {harness && <HarnessPicker value={harness} sandboxAvailable={Boolean(computer?.sandbox)} disabled={controlsDisabled} open={menu === "Permissions"} onOpenChange={openMenu("Permissions")} onChange={next => update({ harness: next })} />}
+      <RepositoryPicker repositories={repositories.data?.repositories ?? []} recent={repositories.data?.recentRepositoryIds ?? []} unavailable={repositories.isError || Boolean(repositories.data?.repositoriesUnavailable)} loading={repositories.isPending}
+        selected={draft.repositories} disabled={controlsDisabled} open={menu === "Repository"} onOpenChange={openMenu("Repository")} onChange={selected => update({ repositories: selected })} onRetry={() => void repositories.refetch()} returnTo={pathname} />
+      <AgentPicker agents={agents} value={draft.agent} disabled={controlsDisabled} open={menu === "Agent"} onOpenChange={openMenu("Agent")} onChange={agent => update({ agent })} />
+      <PluginsMenu rows={rows} catalog={catalog.data ?? []} draft={draft} update={update} disabled={controlsDisabled} open={menu === "Plugins"} onOpenChange={openMenu("Plugins")} view={pluginView} onViewChange={setPluginView} errors={submitted ? choices.errors : {}} />
+      <ConnectorsMenu rows={connectorRows} update={update} disabled={controlsDisabled} open={menu === "Connectors"} onOpenChange={openMenu("Connectors")} returnTo={pathname} />
+    </div>
+    {submitted && (problems.length > 0 || Object.keys(choices.errors).length > 0 || agentMissing || offline) && <div className="wst-feedback" role="alert">
+      {problems.map(row => <p key={row.slug} className="wpb-feedback-error"><AlertTriangle size={14} aria-hidden="true" /> {row.name}: {row.problem.toLowerCase()}. <Button size="sm" variant="ghost" onPress={() => { setPluginView(row.slug); setMenu("Plugins"); }}>Fix</Button></p>)}
+      {Object.keys(choices.errors).filter(slug => !problems.some(row => row.slug === slug)).map(slug => <p key={slug} className="wpb-feedback-error"><AlertTriangle size={14} aria-hidden="true" /> {rows.find(row => row.slug === slug)?.name}: check its settings for this Work. <Button size="sm" variant="ghost" onPress={() => { setPluginView(slug); setMenu("Plugins"); }}>Fix</Button></p>)}
+      {agentMissing && <p className="wpb-feedback-error"><AlertTriangle size={14} aria-hidden="true" /> The selected Startup Agent is no longer available. Choose another one.</p>}
+      {offline && <p className="wpb-feedback-error"><AlertTriangle size={14} aria-hidden="true" /> {offline.name} is offline. Choose another Computer.</p>}
+    </div>}
+    {draft.submitting && <p className="sr-only" role="status">{uploading ? `Uploading ${uploading}…` : "Submitting startup request…"}</p>}
+    {computerMissing && <p className="wpb-feedback" role="alert">The Computer you chose is no longer available. <Button size="sm" variant="ghost" onPress={() => setMenu("Computer")}>Choose a Computer</Button></p>}
+    {source.chooseComputer && computers.isError && !computerList && <p className="wpb-feedback" role="alert">Computers could not be loaded. <Button size="sm" variant="ghost" onPress={() => void computers.refetch()}>Retry</Button></p>}
+    {(options.isError || catalog.isError || installed.isError) && <p className="wpb-feedback" role="alert">Startup configuration could not be loaded. <Button size="sm" variant="ghost" onPress={() => { void options.refetch(); void catalog.refetch(); void installed.refetch(); }}>Retry</Button></p>}
+    {error && <p id={`${id}-error`} className="wpb-feedback wpb-feedback-error" role="alert">{error}</p>}
+  </form>;
+}

package/components/work-start/work-start-tray.css

@@ -0,0 +1,40 @@
+/* Start Work tray cards: per-Work choices as check rows, and Plugins and
+   Connectors browsed by catalog category beside a rail. */
+.wst-rows { display: grid; gap: 1px; align-content: start; }
+.wst-scroll { max-height: 320px; overflow-y: auto; margin-top: 4px; }
+.wst-group-title { padding: 8px 10px 2px; font-size: 11px; font-weight: 500; color: var(--muted); }
+.wst-check-row { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 4px 2px 10px; border-radius: 10px; }
+.wst-check-row:hover { background: color-mix(in oklch, var(--foreground) 4%, transparent); }
+.wst-check { flex: 1; min-width: 0; }
+.wst-check .checkbox__content { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; text-align: left; }
+.wst-check .checkbox__control { box-shadow: inset 0 0 0 1px var(--border); }
+.wst-check-copy { display: grid; gap: 1px; min-width: 0; }
+.wst-check-title { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wst-check-copy > :not(.wst-check-title) { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wst-check-row[data-struck] .wst-check-title { color: var(--muted); text-decoration: line-through; }
+.wst-catalog { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 6px; height: 272px; margin-top: 4px; }
+.wst-catalog[data-searching] { grid-template-columns: minmax(0, 1fr); }
+.wst-rail { overflow-y: auto; padding-right: 6px; border-right: 1px solid var(--separator); }
+.wst-rail-item { display: flex; align-items: center; gap: 8px; min-height: 34px; }
+.wst-rail-item[aria-selected="true"] { background: color-mix(in oklch, var(--foreground) 6%, transparent); }
+.wst-rail-item[aria-selected="true"] .wst-rail-name { font-weight: 500; }
+.wst-rail-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
+.wst-count { font-size: 11px; font-variant-numeric: tabular-nums; }
+.wst-pane { min-width: 0; overflow-y: auto; }
+.wst-back-row { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--separator); }
+.wst-heading { font-size: 13px; font-weight: 500; }
+.wst-params { display: grid; gap: 12px; padding: 4px 6px 8px; }
+.wst-picker-empty { display: grid; gap: 10px; justify-items: start; padding: 8px; font-size: 13px; color: var(--muted); }
+.wst-switch-row { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--separator); font-size: 13px; }
+.wst-switch-row .switch, .wst-switch-row .switch__content { width: 100%; }
+.wst-switch-row .switch__content { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.wst-switch-row .wst-switch-note { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
+.wst-offline { margin-left: auto; flex-shrink: 0; color: var(--muted); font-size: 12px; }
+.wst-feedback { display: grid; gap: 4px; margin: 12px 20px 0; font-size: 13px; }
+.wst-feedback p { display: flex; align-items: center; gap: 6px; }
+
+.wst-unavailable { margin: 0 0 16px; }
+@media (max-width: 740px) {
+  .wpb-popover-wide { width: calc(100vw - 24px); }
+  .wst-catalog { grid-template-columns: 128px minmax(0, 1fr); }
+}