@abot-ai/runtime 1.1.0 → 1.2.0

package/dist/src/web-ui/app/index.html

@@ -52,19 +52,6 @@
             </svg>
             <span class="rail-button-label">New</span>
           </button>
-          <button
-            id="operationsWorkspaceButton"
-            class="rail-button"
-            type="button"
-            aria-label="Open operations workspace"
-            aria-controls="operationsWorkspacePanel"
-            title="Operations"
-          >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M4 6h16M4 12h10M4 18h13" />
-            </svg>
-            <span class="rail-button-label">Operations</span>
-          </button>
           <button
             id="configWorkspaceButton"
             class="rail-button"
@@ -186,49 +173,6 @@
               <h2 id="sessionTitle">New conversation</h2>
             </div>
           </div>
-
-          <div class="header-controls">
-            <div class="control-cluster agent-mode-control">
-              <span class="control-label">Depth</span>
-              <button
-                id="agentModeButton"
-                class="agent-mode-button"
-                type="button"
-                title="Reasoning depth"
-                aria-haspopup="menu"
-                aria-expanded="false"
-              >
-                Reasoning
-              </button>
-              <div id="agentModeMenu" class="agent-mode-menu"></div>
-            </div>
-            <div class="control-cluster model-control">
-              <span class="control-label">Model</span>
-              <button
-                id="modelSelectButton"
-                class="model-select-button"
-                type="button"
-                title="Model"
-                aria-label="Model"
-                aria-haspopup="menu"
-                aria-expanded="false"
-              >
-                <span id="modelSelectValue">Model</span>
-                <svg viewBox="0 0 20 20" aria-hidden="true">
-                  <path d="m6 8 4 4 4-4" />
-                </svg>
-              </button>
-              <div id="modelSelectMenu" class="model-select-menu"></div>
-              <select
-                id="modelSelect"
-                title="Model"
-                aria-label="Model"
-                aria-hidden="true"
-                tabindex="-1"
-                hidden
-              ></select>
-            </div>
-          </div>
         </header>
 
         <section
@@ -265,20 +209,8 @@
             </svg>
             <span>Jump to latest</span>
           </button>
+          <div id="composerPlan" class="composer-plan" hidden></div>
           <form id="composerForm" class="composer">
-            <button
-              id="attachmentButton"
-              class="attachment-button"
-              type="button"
-              title="Attach file or image"
-              aria-label="Attach file or image"
-            >
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path
-                  d="m9 12 6.8-6.8a3 3 0 0 1 4.2 4.2L10.7 18.7a5 5 0 0 1-7.1-7.1l9-9"
-                />
-              </svg>
-            </button>
             <input
               id="attachmentInput"
               class="attachment-input"
@@ -293,50 +225,131 @@
               placeholder="Ask ABot anything…"
             ></textarea>
             <div id="attachmentPreview" class="attachment-preview"></div>
-            <div class="permission-mode-control">
+            <div
+              class="composer-controls"
+              role="group"
+              aria-label="Message controls"
+            >
               <button
-                id="permissionModeButton"
-                class="permission-mode-button"
+                id="attachmentButton"
+                class="attachment-button"
                 type="button"
-                title="Tool permissions"
-                aria-haspopup="menu"
-                aria-expanded="false"
-              >
-                Full
-              </button>
-              <div id="permissionModeMenu" class="permission-mode-menu"></div>
-            </div>
-            <div id="composerSubmitControl" class="composer-submit-control">
-              <button
-                id="sendButton"
-                class="send-button"
-                type="submit"
-                disabled
+                title="Attach file or image"
+                aria-label="Attach file or image"
               >
                 <svg viewBox="0 0 24 24" aria-hidden="true">
-                  <path d="M12 19V5M6.5 10.5 12 5l5.5 5.5" />
+                  <path
+                    d="m9 12 6.8-6.8a3 3 0 0 1 4.2 4.2L10.7 18.7a5 5 0 0 1-7.1-7.1l9-9"
+                  />
                 </svg>
-                <span id="sendButtonLabel" class="sr-only">Send</span>
               </button>
-              <button
-                id="sendNextMenuButton"
-                class="send-next-menu-button"
-                type="button"
-                title="More send options"
-                aria-label="More send options"
-                aria-haspopup="menu"
-                aria-controls="sendNextMenu"
-                aria-expanded="false"
-                hidden
-              >
-                <svg viewBox="0 0 16 16" aria-hidden="true">
-                  <path d="m4 6 4 4 4-4" />
-                </svg>
-              </button>
-              <div id="sendNextMenu" class="send-next-menu" role="menu" hidden>
-                <button id="sendNextButton" type="button" role="menuitem">
-                  Send next
+              <div class="permission-mode-control">
+                <button
+                  id="permissionModeButton"
+                  class="permission-mode-button"
+                  type="button"
+                  title="Tool permissions"
+                  aria-haspopup="menu"
+                  aria-expanded="false"
+                >
+                  Full
                 </button>
+                <div id="permissionModeMenu" class="permission-mode-menu"></div>
+              </div>
+              <div class="composer-model-controls">
+                <div class="control-cluster model-control">
+                  <span class="control-label">Model</span>
+                  <button
+                    id="modelSelectButton"
+                    aria-controls="modelSelectMenu"
+                    class="model-select-button"
+                    type="button"
+                    title="Model"
+                    aria-label="Model"
+                    aria-haspopup="menu"
+                    aria-expanded="false"
+                  >
+                    <svg
+                      class="model-select-icon"
+                      viewBox="0 0 24 24"
+                      aria-hidden="true"
+                    >
+                      <path d="m12 3 9 5-9 5-9-5 9-5Z" />
+                      <path d="m3 12 9 5 9-5M3 16l9 5 9-5" />
+                    </svg>
+                    <span id="modelSelectValue">Model</span>
+                    <svg viewBox="0 0 20 20" aria-hidden="true">
+                      <path d="m6 8 4 4 4-4" />
+                    </svg>
+                  </button>
+                  <div id="modelSelectMenu" class="model-select-menu"></div>
+                  <select
+                    id="modelSelect"
+                    title="Model"
+                    aria-label="Model"
+                    aria-hidden="true"
+                    tabindex="-1"
+                    hidden
+                  ></select>
+                </div>
+                <div class="control-cluster agent-mode-control">
+                  <span class="control-label">Depth</span>
+                  <button
+                    id="agentModeButton"
+                    aria-controls="agentModeMenu"
+                    class="agent-mode-button"
+                    type="button"
+                    title="Reasoning depth"
+                    aria-haspopup="menu"
+                    aria-expanded="false"
+                  >
+                    Reasoning
+                  </button>
+                  <div id="agentModeMenu" class="agent-mode-menu"></div>
+                </div>
+                <div
+                  id="composerContextWindow"
+                  class="composer-context-window"
+                  hidden
+                ></div>
+              </div>
+              <div id="composerSubmitControl" class="composer-submit-control">
+                <button
+                  id="sendButton"
+                  class="send-button"
+                  type="submit"
+                  disabled
+                >
+                  <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M12 19V5M6.5 10.5 12 5l5.5 5.5" />
+                  </svg>
+                  <span id="sendButtonLabel" class="sr-only">Send</span>
+                </button>
+                <button
+                  id="sendNextMenuButton"
+                  class="send-next-menu-button"
+                  type="button"
+                  title="More send options"
+                  aria-label="More send options"
+                  aria-haspopup="menu"
+                  aria-controls="sendNextMenu"
+                  aria-expanded="false"
+                  hidden
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="m4 6 4 4 4-4" />
+                  </svg>
+                </button>
+                <div
+                  id="sendNextMenu"
+                  class="send-next-menu"
+                  role="menu"
+                  hidden
+                >
+                  <button id="sendNextButton" type="button" role="menuitem">
+                    Send next
+                  </button>
+                </div>
               </div>
             </div>
           </form>
@@ -346,110 +359,6 @@
         </div>
       </main>
 
-      <section
-        id="operationsWorkspacePanel"
-        class="workspace-page-panel operations-workspace-panel"
-        aria-labelledby="operationsWorkspaceTitle"
-        hidden
-      >
-        <header class="workspace-page-header">
-          <div class="workspace-page-heading">
-            <p class="eyebrow">Runtime workspace</p>
-            <h2 id="operationsWorkspaceTitle">Operations</h2>
-            <p>Inspect runtime state, recent logs, and system health.</p>
-          </div>
-          <button
-            id="closeOperationsWorkspaceButton"
-            class="workspace-page-back"
-            type="button"
-            aria-label="Return to conversation"
-          >
-            Back to chat
-          </button>
-        </header>
-
-        <div class="workspace-page-body operations-workspace-body">
-          <div
-            class="operations-tabs"
-            role="tablist"
-            aria-label="Operations views"
-          >
-            <button
-              id="runtimeTabButton"
-              class="tab-button operations-tab-button active"
-              data-tab="runtime"
-              type="button"
-              role="tab"
-              aria-controls="runtimeTab"
-              aria-selected="true"
-            >
-              Runtime
-            </button>
-            <button
-              id="logsTabButton"
-              class="tab-button operations-tab-button"
-              data-tab="logs"
-              type="button"
-              role="tab"
-              aria-controls="logsTab"
-              aria-selected="false"
-            >
-              Logs
-            </button>
-            <button
-              id="healthTabButton"
-              class="tab-button operations-tab-button"
-              data-tab="health"
-              type="button"
-              role="tab"
-              aria-controls="healthTab"
-              aria-selected="false"
-            >
-              Health
-            </button>
-          </div>
-
-          <section
-            id="runtimeTab"
-            class="tab-page operations-tab-page active"
-            role="tabpanel"
-            aria-labelledby="runtimeTabButton"
-          >
-            <div class="panel-toolbar">
-              <span>Runtime status</span
-              ><button id="refreshRuntimeButton" type="button">Refresh</button>
-            </div>
-            <div id="runtimeStatus" class="runtime-card"></div>
-          </section>
-
-          <section
-            id="logsTab"
-            class="tab-page operations-tab-page"
-            role="tabpanel"
-            aria-labelledby="logsTabButton"
-          >
-            <div class="panel-toolbar">
-              <span>Recent logs</span
-              ><button id="refreshLogsButton" type="button">Refresh</button>
-            </div>
-            <pre id="runtimeLogs" class="logs-view"></pre>
-          </section>
-
-          <section
-            id="healthTab"
-            class="tab-page operations-tab-page"
-            role="tabpanel"
-            aria-labelledby="healthTabButton"
-          >
-            <div class="panel-toolbar">
-              <span>System health</span
-              ><button id="refreshHealthButton" type="button">Refresh</button>
-            </div>
-            <div id="healthStatus" class="runtime-card"></div>
-          </section>
-        </div>
-      </section>
-
       <section
         id="configWorkspacePanel"
         class="workspace-page-panel config-workspace-panel"
@@ -488,6 +397,96 @@
             aria-live="polite"
           ></div>
           <div id="configDashboard" class="config-dashboard"></div>
+          <section
+            id="configOperationsSection"
+            class="config-operations-section"
+            aria-labelledby="configOperationsTitle"
+          >
+            <header class="config-operations-heading">
+              <h3 id="configOperationsTitle">Operations</h3>
+              <p>Inspect runtime state, recent logs, and system health.</p>
+            </header>
+            <div
+              class="operations-tabs"
+              role="tablist"
+              aria-label="Operations views"
+            >
+              <button
+                id="runtimeTabButton"
+                class="tab-button operations-tab-button active"
+                data-tab="runtime"
+                type="button"
+                role="tab"
+                aria-controls="runtimeTab"
+                aria-selected="true"
+              >
+                Runtime
+              </button>
+              <button
+                id="logsTabButton"
+                class="tab-button operations-tab-button"
+                data-tab="logs"
+                type="button"
+                role="tab"
+                aria-controls="logsTab"
+                aria-selected="false"
+              >
+                Logs
+              </button>
+              <button
+                id="healthTabButton"
+                class="tab-button operations-tab-button"
+                data-tab="health"
+                type="button"
+                role="tab"
+                aria-controls="healthTab"
+                aria-selected="false"
+              >
+                Health
+              </button>
+            </div>
+
+            <section
+              id="runtimeTab"
+              class="tab-page operations-tab-page active"
+              role="tabpanel"
+              aria-labelledby="runtimeTabButton"
+            >
+              <div class="panel-toolbar">
+                <span>Runtime status</span
+                ><button id="refreshRuntimeButton" type="button">
+                  Refresh
+                </button>
+              </div>
+              <div id="runtimeStatus" class="runtime-card"></div>
+            </section>
+
+            <section
+              id="logsTab"
+              class="tab-page operations-tab-page"
+              role="tabpanel"
+              aria-labelledby="logsTabButton"
+            >
+              <div class="panel-toolbar">
+                <span>Recent logs</span
+                ><button id="refreshLogsButton" type="button">Refresh</button>
+              </div>
+              <pre id="runtimeLogs" class="logs-view"></pre>
+            </section>
+
+            <section
+              id="healthTab"
+              class="tab-page operations-tab-page"
+              role="tabpanel"
+              aria-labelledby="healthTabButton"
+            >
+              <div class="panel-toolbar">
+                <span>System health</span
+                ><button id="refreshHealthButton" type="button">Refresh</button>
+              </div>
+              <div id="healthStatus" class="runtime-card"></div>
+            </section>
+          </section>
         </div>
       </section>
 

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

@@ -0,0 +1,32 @@
+export type ComposerPlanItem = {
+  id: string;
+  title: string;
+  status: "pending" | "active" | "done" | "blocked" | "superseded";
+  order: number;
+};
+
+export type ComposerPlanModel = {
+  requestId: string;
+  turnKey: string;
+  summary: string;
+  preview: string;
+  previewStatus: "pending" | "active" | "done";
+  items: ComposerPlanItem[];
+  total: number;
+  completed: number;
+  hasSignal: boolean;
+};
+
+export type ComposerPlanMessage = {
+  id?: unknown;
+  role: string;
+  requestId?: unknown;
+};
+
+export declare function buildComposerPlanModel(options?: {
+  messages?: ComposerPlanMessage[];
+  activeRequestId?: unknown;
+  getActivityForMessage?(message: ComposerPlanMessage): {
+    taskProgress?: unknown;
+  };
+}): ComposerPlanModel | null;

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

@@ -0,0 +1,108 @@
+function text(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+
+function canonicalCount(value, fallback) {
+  return Number.isInteger(value) && value >= 0 ? value : fallback;
+}
+
+function itemStatus(value) {
+  const status = text(value).toLowerCase();
+  if (status === "done" || status === "completed") return "done";
+  if (status === "in_progress" || status === "active") return "active";
+  if (status === "blocked" || status === "failed") return "blocked";
+  if (status === "superseded") return "superseded";
+  return "pending";
+}
+
+function orderedItems(rawItems) {
+  if (!Array.isArray(rawItems)) return [];
+  return rawItems
+    .flatMap((item, index) => {
+      const title = text(item?.title);
+      if (!title) return [];
+      return [
+        {
+          id: text(item.id) || `item-${index}`,
+          title,
+          status: itemStatus(item.status),
+          order: canonicalCount(item.order, index + 1),
+        },
+      ];
+    })
+    .sort((left, right) => left.order - right.order);
+}
+
+function hasVisiblePlan(progress, items, summary) {
+  return items.length > 0 || Boolean(summary) || progress.hasSignal === true;
+}
+
+function previewStatusFor({ activeItem, items, completed, total }) {
+  if (activeItem) return "active";
+  const countsAreComplete = total > 0 && completed === total;
+  const allVisibleItemsDone =
+    items.length > 0 && items.every((item) => item.status === "done");
+  if (countsAreComplete && allVisibleItemsDone) return "done";
+  return "pending";
+}
+
+function planForMessage(message, getActivityForMessage) {
+  const requestId = text(message.requestId);
+  if (!requestId) return null;
+  const progress = getActivityForMessage(message)?.taskProgress;
+  if (!progress || text(progress.requestId) !== requestId) return null;
+  const items = orderedItems(progress.items);
+  const summary = text(progress.summary);
+  if (!hasVisiblePlan(progress, items, summary)) return null;
+  const completed = canonicalCount(
+    progress.completed,
+    items.filter((item) => item.status === "done").length,
+  );
+  const total = canonicalCount(progress.total, items.length);
+  const activeItem =
+    text(progress.activeItem) ||
+    items.find((item) => item.status === "active")?.title ||
+    "";
+  return {
+    requestId,
+    turnKey: `request:${requestId}`,
+    summary,
+    items,
+    total,
+    completed,
+    hasSignal: progress.hasSignal === true,
+    preview: activeItem || summary || items[0]?.title || "Preparing tasks...",
+    previewStatus: previewStatusFor({ activeItem, items, completed, total }),
+  };
+}
+
+export function buildComposerPlanModel({
+  messages = [],
+  activeRequestId = "",
+  getActivityForMessage = () => ({}),
+} = {}) {
+  const lastUserIndex = messages.findLastIndex(
+    (message) => message.role === "user",
+  );
+  const assistants = messages
+    .slice(lastUserIndex + 1)
+    .filter((message) => message.role === "assistant");
+  if (assistants.length === 0) {
+    const latestUser = messages[lastUserIndex];
+    return latestUser
+      ? planForMessage(latestUser, getActivityForMessage)
+      : null;
+  }
+  const activeId = text(activeRequestId);
+  const activeAssistant = activeId
+    ? assistants.findLast((message) => text(message.requestId) === activeId)
+    : null;
+  if (activeAssistant) {
+    return planForMessage(activeAssistant, getActivityForMessage);
+  }
+  for (const message of [...assistants].reverse()) {
+    const plan = planForMessage(message, getActivityForMessage);
+    if (plan) return plan;
+  }
+  return null;
+}

package/dist/src/web-ui/app/lib/conversation-role-model.d.ts

@@ -0,0 +1,19 @@
+export type ConversationRole = "supervisor" | "planner" | "worker" | "reviewer";
+
+export interface ConversationRoleCard {
+  id: string;
+  role: ConversationRole;
+  title: string;
+  responsibility: string;
+  phaseLabel: string;
+  summary: string;
+  facts: string[];
+  active: boolean;
+  tone: "active" | "failed" | "recorded";
+}
+
+export function buildConversationRoleCards(input?: {
+  requestId?: unknown;
+  events?: unknown[];
+  streaming?: boolean;
+}): ConversationRoleCard[];