@abot-ai/runtime 1.0.0 → 1.2.0

package/dist/src/web-ui/app/ARCHITECTURE.md

@@ -17,22 +17,35 @@ Dependencies flow in one direction:
 
 Controllers and components communicate through injected callbacks or values. They must not reach back into `app.js`; services must not depend on controllers or presentation code.
 
-`workspace-shell.js` is the single owner of workspace navigation. It owns the active Chat, Operations, or Config workspace, Conversations sheet visibility, Operations tab navigation, focus restoration, Escape handling, backdrop state, and related ARIA attributes. It must not own session data, request state, or Runtime transport.
+`workspace-shell.js` is the single owner of workspace navigation. It owns the active Chat or Config workspace, responsive Conversations visibility, focus restoration, Escape handling, backdrop state, and related ARIA attributes. `conversation-sidebar-layout.js` resolves the sidebar presentation policy; `operations-section.js` owns the internal Runtime, Logs, and Health tabs within Configuration. These components must not own session data, request state, or Runtime transport.
 
 `conversation-activity.js` owns only request-scoped activity presentation. `realtime-event-controller.js` preserves sequence authority, associates events and progress with their exact `requestId`, and injects those values into the conversation view. `realtime-transport.js` only parses and transports frames; it does not reduce application state.
 
+`composer-context-window.js` presents the existing context estimate as one compact composer indicator. It selects the active assistant request, or the newest conversation message only when it is a request-linked assistant message while idle. A pending user turn, an assistant message without a request ID, or missing metrics hides the indicator instead of falling back to an earlier request. Context metric updates refresh it independently of message tokens; session-view resets clear it. Estimated usage, provider-reported usage, and compaction remain distinct, and provider usage stays bound to the matching model invocation.
+
+`composer-plan.js` presents the current user turn's Planner plan in a collapsed-by-default drawer above the composer. `composer-plan-model.js` selects request-linked progress from the current turn, including restored failed requests that have only a persisted user message; a new user turn hides earlier plans. Disclosure identity follows the selected request, so steering preserves expansion and list scroll; session resets clear the drawer. `task-progress.js` reduces structured plan events by request: full snapshots replace the baseline, later item changes are retained across overlapping replay, and completion counters never imply request or Reviewer success. Live events and stored replay use this same projection. Historical per-response progress remains available in Activity.
+
+Activity counts tool invocations from `tool.started` entries and their recorded multiplicities before timeline display grouping. Completion, payload, and approval events remain visible but do not add tool invocations; terminal-only history does not invent missing starts. Failure-event counts retain their existing meaning.
+
+Web sources appear in a separate Activity section alongside role cards and the event timeline. `web-source-event.js` projects only successful `web_search` and `web_fetch` completions; `web-sources.js` validates bounded plugin receipts and groups them by recorded call. `conversation-sources.js` renders links and retrieval/presentation states without interpreting answer text. Source-bearing events retain their own identity before display grouping, and stored session events use the same projection as live events. Session switching clears them with the existing Activity state.
+
+The optional `meta.webSources` version 1 receipt describes the final bounded **tool output**, not whether a later model invocation consumed or cited it. Older events can show found/fetched URLs with unknown output visibility; absent or unsupported receipts never imply full content. Favicons are best-effort browser requests to the source origin's `/favicon.ico`, loaded lazily with no referrer and a local fallback. No third-party icon service or server proxy is used. Source URL policy rejects unsafe schemes and credentials, and prevents automatic image loads for local/private IP literals; origin DNS, redirects, cookies, and browser image policy remain browser concerns. Icons carry no evidence and never block tool execution.
+
 `conversation-session-controller.js` is the single owner of the active conversation view lifecycle: normalized message identity, session switching, stored-message hydration, request-event replay, read state, active assistant placeholders, and session/request realtime subscriptions. `chat-request-controller.js` owns starting one chat request, while `composer-submit-controller.js` owns the composer's selected action and busy/error lifecycle. `tool-approval-controller.js` owns approval state and transport; `tool-approval-card.js` owns its DOM presentation.
 
 The primary information architecture is chat-first:
 
 - the navigation rail is persistent;
-- Chat, Operations, and Config are mutually exclusive workspaces;
-- Conversations is the only transient sheet and never reduces the chat canvas;
+- Chat and Config are mutually exclusive workspaces;
+- Conversations is docked beside Chat from 1260 CSS pixels upward, with its own column and no modal backdrop;
+- below that width, Conversations is the only transient sheet and overlays the chat canvas;
+- Configuration always hides Conversations and uses the full content canvas;
 - request tools, progress, and failures remain attached to the corresponding assistant response;
-- Operations owns Runtime, Logs, and Health as full-canvas views;
-- Config remains a separate full-canvas destination.
+- Configuration contains one Operations section with the existing Runtime, Logs, and Health views;
+- the Operations section is a static sibling of the generated configuration dashboard, so dashboard rerenders cannot detach its controls or status nodes;
+- internal Operations tab changes preserve configuration drafts; leaving Configuration remains guarded by the explicit discard check.
 
-Panel resizing and persisted panel widths are intentionally not part of this architecture. Only conversation discovery is an overlay; operational surfaces receive enough space to remain readable.
+Panel resizing and persisted panel widths are intentionally not part of this architecture. Crossing the sidebar breakpoint closes transient drawer state and restores focus when its previous target becomes hidden.
 
 ## Styles
 
@@ -49,4 +62,4 @@ Keep responsive overrides last and avoid moving declarations between modules wit
 
 ## Contract boundary
 
-Visual components may format or group events, but they never accept transport frames or construct Runtime API payloads. Realtime frame parsing belongs to `realtime-transport.js`; request sequence and terminal-state reduction belong to `realtime-event-controller.js`; endpoint construction and HTTP payload serialization belong to `runtime-web-client.js`; and feature controllers own when those operations occur. Config remains explicit-save; presentation changes must never introduce autosave.
+Visual components may format or group events, but they never accept transport frames or construct Runtime API payloads. Realtime frame parsing belongs to `realtime-transport.js`; request sequence and terminal-state reduction belong to `realtime-event-controller.js`; endpoint construction and HTTP payload serialization belong to `runtime-web-client.js` and its feature request modules; and feature controllers own when those operations occur. Config remains explicit-save; presentation changes must never introduce autosave.

package/dist/src/web-ui/app/app.js

@@ -3,6 +3,8 @@ import { createConfigWorkspace } from "./components/config-workspace.js";
 import { createComposerActions } from "./components/composer-actions.js";
 import { createModelSelector } from "./components/model-selector.js";
 import { createRuntimeSetupGuide } from "./components/runtime-setup-guide.js";
+import { createLongTermMemorySetup } from "./components/long-term-memory-setup.js";
+import { createLongTermMemoryManager } from "./components/long-term-memory/manager.js";
 import { createSessionActionsMenu } from "./components/session-actions-menu.js";
 import { createToolApprovalCard } from "./components/tool-approval-card.js";
 import { textOf } from "./lib/text-format.js";
@@ -24,6 +26,7 @@ import { createConversationSessionController } from "./controllers/conversation-
 import { createChatRequestController } from "./controllers/chat-request-controller.js";
 import { createToolApprovalController } from "./controllers/tool-approval-controller.js";
 import { createComposerSubmitController } from "./controllers/composer-submit-controller.js";
+import { createLongTermMemoryController } from "./controllers/long-term-memory/controller.js";
 
 const state = {
   config: null,
@@ -65,16 +68,9 @@ const state = {
 const dom = {
   app: document.getElementById("app"),
   chatWorkspaceButton: document.getElementById("chatWorkspaceButton"),
-  operationsWorkspaceButton: document.getElementById(
-    "operationsWorkspaceButton",
-  ),
   configWorkspaceButton: document.getElementById("configWorkspaceButton"),
   chatPanel: document.querySelector(".chat-panel"),
   sessionsPanel: document.querySelector(".sessions-panel"),
-  operationsWorkspacePanel: document.getElementById("operationsWorkspacePanel"),
-  closeOperationsWorkspaceButton: document.getElementById(
-    "closeOperationsWorkspaceButton",
-  ),
   configWorkspacePanel: document.getElementById("configWorkspacePanel"),
   closeConfigWorkspaceButton: document.getElementById(
     "closeConfigWorkspaceButton",
@@ -108,6 +104,8 @@ const dom = {
   attachmentInput: document.getElementById("attachmentInput"),
   attachmentPreview: document.getElementById("attachmentPreview"),
   composerInput: document.getElementById("composerInput"),
+  composerContextWindow: document.getElementById("composerContextWindow"),
+  composerPlan: document.getElementById("composerPlan"),
   composerSubmitControl: document.getElementById("composerSubmitControl"),
   sendButton: document.getElementById("sendButton"),
   sendButtonLabel: document.getElementById("sendButtonLabel"),
@@ -123,10 +121,6 @@ const dom = {
   refreshConfigButton: document.getElementById("refreshConfigButton"),
   configStatus: document.getElementById("configStatus"),
   configDashboard: document.getElementById("configDashboard"),
-  configRawFileSelect: document.getElementById("configRawFileSelect"),
-  configApplyRawButton: document.getElementById("configApplyRawButton"),
-  configSaveRawButton: document.getElementById("configSaveRawButton"),
-  configRawEditor: document.getElementById("configRawEditor"),
   panelBackdrop: document.getElementById("panelBackdrop"),
   toastRegion: document.getElementById("toastRegion"),
   operationsTabButtons: [
@@ -146,6 +140,7 @@ let composerQueueController;
 let composerSubmitController;
 let realtimeEvents;
 let conversationView;
+let configWorkspace;
 const operationsController = createOperationsController({
   dom,
   client: runtimeClient,
@@ -190,6 +185,11 @@ const steerController = createSteerController({
 
 const shell = createWorkspaceShell({
   dom,
+  beforeWorkspaceChange: ({ from, to }) => {
+    if (from !== "config" || to === "config") return true;
+    if (!configWorkspace) return true;
+    return configWorkspace.prepareDiscardChanges("leave configuration");
+  },
 });
 const runtimeSetupGuide = createRuntimeSetupGuide({
   container: dom.runtimeSetupGuide,
@@ -263,8 +263,11 @@ conversationView = createConversationView({
   dom: {
     messagesList: dom.messagesList,
     jumpToLatestButton: dom.jumpToLatestButton,
+    composerContextWindow: dom.composerContextWindow,
+    composerPlan: dom.composerPlan,
   },
   getMessages: () => state.messages,
+  getActiveRequestId: () => state.activeRequestId,
   getActivityForMessage: (message) => ({
     events: state.events,
     taskProgress:
@@ -370,6 +373,7 @@ realtimeEvents = createRealtimeEventController({
   activeAssistantForRequest: conversationSession.activeAssistantForRequest,
   addOrMergeMessage: conversationSession.addOrMergeMessage,
   normalizeChatMessage: conversationSession.normalizeMessage,
+  renderContextWindow: () => conversationView.renderContextWindow(),
   renderMessages,
   scheduleMessageRender,
   scheduleThinkingRender,
@@ -422,6 +426,7 @@ const appEventBindings = createAppEventBindings({
     saveSessionId: saveSessionIdForEnvironment,
     selectedEnvironmentId,
     rememberModelSelection: rememberCurrentModelSelection,
+    invalidateSessionLoads: conversationSession.invalidateEnvironmentLoads,
     clearAttachments: clearPendingAttachments,
     resetLiveRequestView: conversationSession.resetLiveRequestView,
     setCurrentSessionTitle,
@@ -429,10 +434,13 @@ const appEventBindings = createAppEventBindings({
     subscribeSession,
     renderMessages,
     renderAgentPicker,
+    savedEnvironmentId,
+    beforeEnvironmentChange: () =>
+      configWorkspace.prepareDiscardChanges("change environment"),
     saveEnvironmentId,
     loadModels,
     loadAgentMode,
-    loadRuntimeConfig: () => loadRuntimeConfig(),
+    loadRuntimeConfig: (options) => loadRuntimeConfig(options),
     restoreLastSession,
     configuredEnvironmentOptions,
     removeUnsupportedImages: removeUnsupportedPendingImages,
@@ -449,15 +457,46 @@ const appEventBindings = createAppEventBindings({
   },
 });
 
-const configWorkspace = createConfigWorkspace({
+const longTermMemorySetup = createLongTermMemorySetup({
+  getEnvironmentId: selectedEnvironmentId,
+  loadStatus: (environmentId) =>
+    runtimeClient.loadLongTermMemoryStatus(environmentId),
+  discoverModels: (providerId, environmentId) =>
+    runtimeClient.discoverLongTermMemoryModels({
+      environmentId,
+      providerId,
+    }),
+  enableMemory: (input, environmentId) =>
+    runtimeClient.enableLongTermMemory({
+      environmentId,
+      ...input,
+    }),
+  disableMemory: (environmentId) =>
+    runtimeClient.disableLongTermMemory(environmentId),
+  recordControlEvent,
+  beginRuntimeMutation: () =>
+    configWorkspace?.beginExternalRuntimeMutation() ?? false,
+  refreshRuntimeConfig: () =>
+    configWorkspace?.refreshAfterExternalRuntimeMutation() ??
+    Promise.resolve(false),
+  endRuntimeMutation: () => configWorkspace?.endExternalRuntimeMutation(),
+});
+
+let longTermMemoryManager;
+const longTermMemoryController = createLongTermMemoryController({
+  client: runtimeClient,
+  getEnvironmentId: selectedEnvironmentId,
+  render: (snapshot) => longTermMemoryManager?.render(snapshot),
+});
+longTermMemoryManager = createLongTermMemoryManager({
+  actions: longTermMemoryController,
+});
+
+configWorkspace = createConfigWorkspace({
   dom: {
     refreshConfigButton: dom.refreshConfigButton,
     configStatus: dom.configStatus,
     configDashboard: dom.configDashboard,
-    configRawFileSelect: dom.configRawFileSelect,
-    configApplyRawButton: dom.configApplyRawButton,
-    configSaveRawButton: dom.configSaveRawButton,
-    configRawEditor: dom.configRawEditor,
   },
   loadDashboard: () =>
     runtimeClient.loadConfigDashboard(selectedEnvironmentId()),
@@ -468,10 +507,15 @@ const configWorkspace = createConfigWorkspace({
       id,
       config,
     }),
+  memorySetup: longTermMemorySetup,
+  memoryManagement: {
+    load: () => longTermMemoryController.load(),
+    mount: (root) => longTermMemoryManager.mount(root),
+  },
   recordControlEvent,
 });
 
-const loadRuntimeConfig = () => configWorkspace.load();
+const loadRuntimeConfig = (options) => configWorkspace.load(options);
 
 function setConnectionLabel(text, isError = false) {
   dom.connectionLabel.textContent = text;

package/dist/src/web-ui/app/components/composer-context-window.d.ts

@@ -0,0 +1,25 @@
+import type {
+  ConversationActivityInput,
+  ConversationContextWindowModel,
+} from "./conversation-activity.js";
+
+export type ComposerContextWindowModel = ConversationContextWindowModel & {
+  requestId: string;
+};
+
+export declare function buildComposerContextWindowModel(options?: {
+  messages?: Array<{ role: string; requestId?: unknown }>;
+  activeRequestId?: unknown;
+  getActivityForMessage?(message: {
+    role: string;
+    requestId?: unknown;
+  }): Pick<ConversationActivityInput, "contextWindow">;
+}): ComposerContextWindowModel | null;
+
+export declare function createComposerContextWindow(options: {
+  container: HTMLElement;
+  documentRoot?: Document;
+}): {
+  render(model: ComposerContextWindowModel | null): void;
+  reset(): void;
+};

package/dist/src/web-ui/app/components/composer-context-window.js

@@ -0,0 +1,155 @@
+import { buildConversationActivityModel } from "./conversation-activity.js";
+import { textOf } from "../lib/text-format.js";
+
+export function buildComposerContextWindowModel({
+  messages = [],
+  activeRequestId = "",
+  getActivityForMessage = () => ({}),
+} = {}) {
+  const activeId = textOf(activeRequestId);
+  const contextRequestCandidates = activeId
+    ? [...messages].reverse()
+    : messages.slice(-1);
+  const selectedMessage = contextRequestCandidates.find((message) => {
+    const isAssistantRequest =
+      message.role === "assistant" && Boolean(textOf(message.requestId));
+    if (!isAssistantRequest) return false;
+    if (!activeId) return true;
+    return message.requestId === activeId;
+  });
+  if (!selectedMessage) return null;
+  const requestId = textOf(selectedMessage.requestId);
+  const model = buildConversationActivityModel({
+    requestId,
+    contextWindow: getActivityForMessage(selectedMessage)?.contextWindow,
+  }).contextWindow;
+  if (!model) return null;
+  return { ...model, requestId };
+}
+
+function compactNumber(value) {
+  return new Intl.NumberFormat("en", { notation: "compact" }).format(value);
+}
+
+function formatPercent(value) {
+  return Number.isInteger(value) ? `${value}%` : `${value.toFixed(1)}%`;
+}
+
+export function createComposerContextWindow({
+  container,
+  documentRoot = document,
+}) {
+  const button = documentRoot.createElement("button");
+  button.type = "button";
+  button.className = "composer-context-window-button";
+  button.setAttribute("aria-label", "Context window");
+  button.setAttribute("aria-describedby", "composerContextWindowTooltip");
+
+  const ring = documentRoot.createElement("span");
+  ring.className = "composer-context-window-ring";
+  ring.setAttribute("aria-hidden", "true");
+  button.appendChild(ring);
+
+  const tooltip = documentRoot.createElement("div");
+  tooltip.id = "composerContextWindowTooltip";
+  tooltip.className = "composer-context-window-tooltip";
+  tooltip.setAttribute("role", "tooltip");
+  tooltip.hidden = true;
+  const header = documentRoot.createElement("div");
+  header.className = "composer-context-window-header";
+  const title = documentRoot.createElement("span");
+  title.textContent = "Context window";
+  const percentage = documentRoot.createElement("span");
+  percentage.className = "composer-context-window-percentage";
+  header.append(title, percentage);
+  const detail = documentRoot.createElement("div");
+  const compaction = documentRoot.createElement("div");
+  compaction.className = "composer-context-window-compaction";
+  const provider = documentRoot.createElement("div");
+  tooltip.append(header, detail, compaction, provider);
+  container.replaceChildren(button, tooltip);
+
+  function hideDetails() {
+    tooltip.hidden = true;
+    container.classList.remove("open");
+  }
+
+  function showDetails() {
+    if (container.hidden) return;
+    tooltip.hidden = false;
+    container.classList.add("open");
+  }
+
+  container.addEventListener("pointerenter", showDetails);
+  container.addEventListener("pointerleave", () => {
+    if (documentRoot.activeElement === button) return;
+    hideDetails();
+  });
+  button.addEventListener("focus", showDetails);
+  button.addEventListener("blur", hideDetails);
+  button.addEventListener("click", showDetails);
+  documentRoot.addEventListener(
+    "keydown",
+    (event) => {
+      if (tooltip.hidden) return;
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      hideDetails();
+    },
+    true,
+  );
+  documentRoot.addEventListener("pointerdown", (event) => {
+    if (container.contains(event.target)) return;
+    hideDetails();
+  });
+
+  function reset() {
+    hideDetails();
+    container.hidden = true;
+    container.dataset.requestId = "";
+    container.classList.remove("rejected");
+    ring.style.setProperty("--context-used", "0%");
+    button.setAttribute("aria-label", "Context window");
+    percentage.textContent = "";
+    detail.textContent = "";
+    compaction.textContent = "";
+    provider.textContent = "";
+  }
+
+  function render(model) {
+    if (!model) {
+      reset();
+      return;
+    }
+    container.hidden = false;
+    container.dataset.requestId = model.requestId;
+    container.classList.toggle(
+      "rejected",
+      model.admissionOutcome === "rejected",
+    );
+    const usedPercent = formatPercent(model.usedContextPercent);
+    button.setAttribute("aria-label", `Context window: ${usedPercent} used`);
+    ring.style.setProperty(
+      "--context-used",
+      `${Math.max(0, Math.min(100, model.usedContextPercent))}%`,
+    );
+    percentage.textContent = usedPercent;
+    detail.textContent = `${compactNumber(model.estimatedInputTokens)} / ${compactNumber(
+      model.contextWindowTokens,
+    )} estimated input tokens · ${formatPercent(model.remainingContextPercent)} left · ${
+      model.modelStep || model.profileId
+    }`;
+    compaction.hidden = !model.compaction;
+    compaction.textContent = model.compaction
+      ? `Compaction ${formatPercent(model.compaction.beforePercent)} → ${formatPercent(model.compaction.afterPercent)}`
+      : "";
+    provider.hidden = !model.providerUsage;
+    provider.textContent = model.providerUsage
+      ? `Provider reported ${compactNumber(model.providerUsage.inputTokens)} input · ${compactNumber(model.providerUsage.outputTokens)} output tokens`
+      : "";
+  }
+
+  reset();
+  return { render, reset };
+}

package/dist/src/web-ui/app/components/composer-plan.d.ts

@@ -0,0 +1,9 @@
+import type { ComposerPlanModel } from "../lib/composer-plan-model.js";
+
+export declare function createComposerPlan(options?: {
+  container?: HTMLElement | null;
+  documentRoot?: Document;
+}): {
+  render(model: ComposerPlanModel | null): void;
+  reset(): void;
+};

package/dist/src/web-ui/app/components/composer-plan.js

@@ -0,0 +1,128 @@
+const STATUS_LABELS = {
+  pending: "Pending",
+  active: "In progress",
+  done: "Completed",
+  blocked: "Blocked",
+  superseded: "Superseded",
+};
+
+const STATUS_SYMBOLS = {
+  pending: "○",
+  active: "◌",
+  done: "✓",
+  blocked: "×",
+  superseded: "−",
+};
+
+export function createComposerPlan({
+  container,
+  documentRoot = globalThis.document,
+} = {}) {
+  if (!container || !documentRoot) return { render() {}, reset() {} };
+
+  function element(tag, className, value = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = value;
+    return node;
+  }
+
+  const details = element("details", "composer-plan-details");
+  const summary = element("summary", "composer-plan-toggle");
+  const label = element("span", "composer-plan-label", "Planning");
+  const preview = element("span", "composer-plan-preview");
+  preview.setAttribute("dir", "auto");
+  const previewIcon = element("span", "composer-plan-status");
+  previewIcon.setAttribute("aria-hidden", "true");
+  const chevron = element("span", "composer-plan-chevron", "⌄");
+  chevron.setAttribute("aria-hidden", "true");
+  summary.append(previewIcon, label, preview, chevron);
+
+  const body = element("div", "composer-plan-body");
+  const header = element("div", "composer-plan-header");
+  const title = element("p", "composer-plan-title");
+  title.setAttribute("dir", "auto");
+  const counter = element("span", "composer-plan-counter");
+  header.append(title, counter);
+  const list = element("ol", "composer-plan-items");
+  const placeholder = element(
+    "p",
+    "composer-plan-placeholder",
+    "Preparing tasks...",
+  );
+  body.append(header, list, placeholder);
+  details.append(summary, body);
+  container.classList.add("composer-plan");
+  container.replaceChildren(details);
+  let currentTurnKey = "";
+  let renderedItems = "";
+
+  function reset() {
+    container.hidden = true;
+    container.dataset.requestId = "";
+    details.open = false;
+    body.scrollTop = 0;
+    currentTurnKey = "";
+    renderedItems = "";
+    preview.textContent = "";
+    title.textContent = "";
+    counter.textContent = "";
+    list.replaceChildren();
+  }
+
+  function renderItems(items) {
+    const signature = JSON.stringify(items);
+    if (signature === renderedItems) return;
+    const scrollTop = body.scrollTop;
+    const rows = items.map((item) => {
+      const row = element("li", `composer-plan-item is-${item.status}`);
+      row.dataset.itemId = item.id;
+      const icon = element(
+        "span",
+        "composer-plan-status",
+        STATUS_SYMBOLS[item.status],
+      );
+      icon.setAttribute("aria-hidden", "true");
+      const itemTitle = element("span", "composer-plan-item-title", item.title);
+      itemTitle.setAttribute("dir", "auto");
+      const status = element(
+        "span",
+        "composer-plan-item-status",
+        STATUS_LABELS[item.status],
+      );
+      row.append(icon, itemTitle, status);
+      return row;
+    });
+    list.replaceChildren(...rows);
+    body.scrollTop = scrollTop;
+    renderedItems = signature;
+  }
+
+  function render(model) {
+    if (!model) {
+      reset();
+      return;
+    }
+    if (currentTurnKey !== model.turnKey) {
+      details.open = false;
+      body.scrollTop = 0;
+      currentTurnKey = model.turnKey;
+    }
+    container.hidden = false;
+    container.dataset.requestId = model.requestId;
+    preview.textContent = model.preview;
+    previewIcon.className = `composer-plan-status is-${model.previewStatus}`;
+    previewIcon.textContent = STATUS_SYMBOLS[model.previewStatus];
+    title.textContent = model.summary;
+    title.hidden = !model.summary;
+    counter.textContent = `${model.completed}/${model.total} completed`;
+    counter.hidden = model.total === 0;
+    header.hidden = !model.summary && model.total === 0;
+    list.hidden = model.items.length === 0;
+    placeholder.hidden = model.items.length > 0;
+    renderItems(model.items);
+  }
+
+  reset();
+  return { render, reset };
+}