@abot-ai/runtime 1.1.0 → 1.3.0

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

@@ -0,0 +1,44 @@
+import { createDashboardWorkspace } from "./components/dashboard/workspace.js";
+import { createDashboardController } from "./controllers/dashboard-controller.js";
+import { dashboardJobInitialValues } from "./lib/dashboard-job-templates.js";
+
+export function createDashboardFeature({
+  dom, state, client, shell, schedules, selectedEnvironmentId,
+  loadSessions, openSession, isComposerAvailable,
+}) {
+  let view;
+  const controller = createDashboardController({
+    client, getEnvironmentId: selectedEnvironmentId,
+    getSessions: () => state.sessions, loadSessions,
+    render: (snapshot) => view?.render({ ...snapshot, composerAvailable: isComposerAvailable() }),
+  });
+  view = createDashboardWorkspace({
+    root: dom.homeDashboardRoot,
+    actions: {
+      attach: () => dom.attachmentButton.click(),
+      createJob: (templateId) => schedules.createJob(dashboardJobInitialValues(templateId, dom.modelSelect.value)),
+      continueConversation: () => shell.setSessionsDrawerOpen(true),
+      openConfiguration: () => shell.activateWorkspace("config"),
+      openJobs: () => shell.activateWorkspace("schedules"),
+      refresh: controller.refresh,
+      openConversation: async (sessionId, requestId) => {
+        if (!shell.activateWorkspace("chat")) return;
+        try {
+          await openSession(sessionId);
+          if (state.currentSessionId !== sessionId) return;
+          if (!requestId) return;
+          requestAnimationFrame(() => {
+            const message = [...dom.messagesList.querySelectorAll("[data-request-id]")]
+              .find((node) => node.dataset.requestId === requestId);
+            message?.scrollIntoView({ block: "center", behavior: "smooth" });
+          });
+        } catch (error) {
+          shell.showToast(error instanceof Error ? error.message : String(error), "failed");
+        }
+      },
+    },
+  });
+  controller.publish();
+  document.addEventListener("visibilitychange", controller.visibilityChanged);
+  return { ...controller, composerHost: view.composerHost, setupHost: view.setupHost };
+}

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

@@ -25,13 +25,18 @@
           <span class="rail-button-label">Chats</span>
         </button>
         <div class="rail-actions">
+          <button id="homeWorkspaceButton" class="rail-button" type="button"
+            aria-label="Open home dashboard" aria-controls="homeWorkspacePanel"
+            aria-current="page" title="Home">
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m3 10 9-7 9 7M5 9v12h5v-7h4v7h5V9" /></svg>
+            <span class="rail-button-label">Home</span>
+          </button>
           <button
             id="chatWorkspaceButton"
             class="rail-button"
             type="button"
             aria-label="Open chat workspace"
             aria-controls="chatWorkspace"
-            aria-current="page"
             title="Chat"
           >
             <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -53,17 +58,20 @@
             <span class="rail-button-label">New</span>
           </button>
           <button
-            id="operationsWorkspaceButton"
+            id="schedulesWorkspaceButton"
+            hidden
+            disabled
             class="rail-button"
             type="button"
-            aria-label="Open operations workspace"
-            aria-controls="operationsWorkspacePanel"
-            title="Operations"
+            aria-label="Open schedules workspace"
+            aria-controls="schedulesWorkspacePanel"
+            title="Schedules"
           >
             <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M4 6h16M4 12h10M4 18h13" />
+              <circle cx="12" cy="12" r="8" />
+              <path d="M12 7v5l3 2" />
             </svg>
-            <span class="rail-button-label">Operations</span>
+            <span class="rail-button-label">Schedules</span>
           </button>
           <button
             id="configWorkspaceButton"
@@ -117,6 +125,11 @@
         </div>
       </nav>
 
+      <section id="homeWorkspacePanel" class="home-workspace-panel" aria-label="Home dashboard">
+        <header class="home-workspace-header"><h1>Home</h1></header>
+        <div id="homeDashboardRoot"></div>
+      </section>
+
       <aside
         id="sessionsPanel"
         class="sessions-panel workspace-sheet sessions-sheet"
@@ -186,49 +199,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 +235,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 +251,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>
@@ -347,107 +386,29 @@
       </main>
 
       <section
-        id="operationsWorkspacePanel"
-        class="workspace-page-panel operations-workspace-panel"
-        aria-labelledby="operationsWorkspaceTitle"
+        id="schedulesWorkspacePanel"
+        class="workspace-page-panel schedules-workspace-panel"
+        aria-labelledby="schedulesWorkspaceTitle"
         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>
+            <p class="eyebrow">Automations</p>
+            <h2 id="schedulesWorkspaceTitle">Schedules</h2>
+            <p>Tasks that return to the conversation, right on time.</p>
           </div>
           <button
-            id="closeOperationsWorkspaceButton"
+            id="closeSchedulesWorkspaceButton"
             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>
+        <div
+          id="schedulesRoot"
+          class="workspace-page-body schedules-workspace-body"
+        ></div>
       </section>
 
       <section
@@ -488,6 +449,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;