@lazyingart/agintiflow 0.20.164 → 0.20.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.20.164",
+  "version": "0.20.165",
   "type": "module",
   "description": "AgInTiFlow is a project-aware agent workspace for hybrid wet-dry R&D, hardware-aware intelligence, software automation, and industrial workflows.",
   "license": "Apache-2.0",
@@ -76,6 +76,7 @@
     "scripts/smoke-toolchain-docker.js",
     "scripts/smoke-web-autostart.js",
     "scripts/smoke-web-api.js",
+    "scripts/smoke-web-ui.js",
     "scripts/smoke-webapp-command.js",
     "scripts/smoke-web-port-fallback.js",
     "src/",
@@ -90,7 +91,7 @@
   "scripts": {
     "start": "node run.js",
     "web": "node web.js",
-    "check": "node --check run.js && node --check web.js && node --check bin/aginti-cli.js && node --check src/*.js && node --check src/mcp/*.js && node --check public/app.js && node --check scripts/seed-supervised-homework.js && node --check scripts/smoke-mcp.js && node --check scripts/fixtures/mcp-stdio-smoke-server.mjs",
+    "check": "node --check run.js && node --check web.js && node --check bin/aginti-cli.js && node --check src/*.js && node --check src/mcp/*.js && node --check public/app.js && node --check scripts/seed-supervised-homework.js && node --check scripts/smoke-mcp.js && node --check scripts/smoke-web-ui.js && node --check scripts/fixtures/mcp-stdio-smoke-server.mjs",
     "setup:toolchain-docker": "scripts/setup-agent-toolchain-docker.sh",
     "smoke:coding-tools": "node scripts/smoke-coding-tools.js",
     "smoke:dynamic-step-budget": "node scripts/smoke-dynamic-step-budget.js",
@@ -112,6 +113,7 @@
     "smoke:runtime-compat": "node scripts/smoke-runtime-compat.js",
     "smoke:tmux-tools": "node scripts/smoke-tmux-tools.js",
     "smoke:web-api": "node scripts/smoke-web-api.js",
+    "smoke:web-ui": "node scripts/smoke-web-ui.js",
     "smoke:web-autostart": "node scripts/smoke-web-autostart.js",
     "smoke:webapp-command": "node scripts/smoke-webapp-command.js",
     "smoke:web-port-fallback": "node scripts/smoke-web-port-fallback.js",
@@ -122,7 +124,7 @@
     "storage:migrate": "node bin/aginti-cli.js storage migrate",
     "publish:env": "node scripts/npm-publish-from-env.js publish --access public",
     "publish:env:whoami": "node scripts/npm-publish-from-env.js whoami",
-    "test": "npm run check && npm run smoke:runtime-compat && npm run smoke:autoupdate && npm run smoke:web-api && npm run smoke:web-autostart && npm run smoke:webapp-command && npm run smoke:web-port-fallback && npm run smoke:docker-command && npm run smoke:coding-tools && npm run smoke:dynamic-step-budget && npm run smoke:aaps-adapter && npm run smoke:auxiliary-tools && npm run smoke:perception-research && npm run smoke:auth && npm run smoke:canvas-artifacts && npm run smoke:capabilities && npm run smoke:mcp && npm run smoke:model-roles && npm run smoke:platform && npm run smoke:permission-modes && npm run smoke:skills && npm run smoke:skillmesh && npm run smoke:tmux-tools && npm run smoke:cli-chat && npm run smoke:inbox",
+    "test": "npm run check && npm run smoke:runtime-compat && npm run smoke:autoupdate && npm run smoke:web-api && npm run smoke:web-ui && npm run smoke:web-autostart && npm run smoke:webapp-command && npm run smoke:web-port-fallback && npm run smoke:docker-command && npm run smoke:coding-tools && npm run smoke:dynamic-step-budget && npm run smoke:aaps-adapter && npm run smoke:auxiliary-tools && npm run smoke:perception-research && npm run smoke:auth && npm run smoke:canvas-artifacts && npm run smoke:capabilities && npm run smoke:mcp && npm run smoke:model-roles && npm run smoke:platform && npm run smoke:permission-modes && npm run smoke:skills && npm run smoke:skillmesh && npm run smoke:tmux-tools && npm run smoke:cli-chat && npm run smoke:inbox",
     "pack:dry-run": "npm pack --dry-run",
     "smoke:capabilities": "node scripts/smoke-capabilities.js"
   },

package/public/app.js

@@ -99,6 +99,20 @@ const translations = {
     stopRunButton: "Stop",
     stoppingRun: "Stopping...",
     stopRunFailed: "Failed to stop run.",
+    newSessionButton: "New",
+    runStateIdle: "Ready",
+    runStateIdleDetail: "Select a conversation or type a new goal below.",
+    runStateRunning: "Running",
+    runStateFinished: "Finished",
+    runStateStopped: "Stopped",
+    runStateFailed: "Failed",
+    composerStartButton: "Start new run",
+    composerPlaceholderNoSession: "Type a goal to start a new agent run.",
+    composerPlaceholderSession: "Continue the selected conversation here.",
+    toastRunStarted: "Run started.",
+    toastRunFinished: "Run finished.",
+    toastRunStopped: "Run stopped.",
+    toastRunFailed: "Run failed.",
     runOutputTitle: "Run output",
     noRunStarted: "No run started.",
     conversationTitle: "Conversation",
@@ -716,9 +730,15 @@ const sandboxLogsEl = document.querySelector("#sandbox-logs");
 const checkSandboxButton = document.querySelector("#check-sandbox");
 const preflightSandboxButton = document.querySelector("#preflight-sandbox");
 const sessionSelectEl = document.querySelector("#session-select");
+const newSessionButton = document.querySelector("#new-session");
+const runStateEl = document.querySelector("#run-state");
+const runStateTextEl = document.querySelector("#run-state-text");
+const runStateDetailEl = document.querySelector("#run-state-detail");
+const toastRegionEl = document.querySelector("#toast-region");
 const chatThreadEl = document.querySelector("#chat-thread");
 const chatFormEl = document.querySelector("#chat-form");
 const chatInputEl = document.querySelector("#chat-input");
+const chatSubmitButton = document.querySelector("#chat-submit");
 const chatPendingEl = document.querySelector("#chat-pending");
 const chatStatusEl = document.querySelector("#chat-status");
 const pipeMessageButton = document.querySelector("#pipe-message");
@@ -789,6 +809,7 @@ let artifactItems = [];
 let selectedArtifactId = "";
 let currentArtifactTab = "canvas";
 let artifactUnreadCount = 0;
+let lastAnnouncedRunKey = "";
 
 function normalizeLanguage(language) {
   const lower = String(language || "").toLowerCase();
@@ -806,6 +827,36 @@ function setLogs(text, mode = "active") {
   logsEl.textContent = text;
 }
 
+function isRunningStatus(status = currentRunStatus) {
+  return status === "running";
+}
+
+function isTerminalStatus(status = currentRunStatus) {
+  return ["finished", "failed", "stopped"].includes(status);
+}
+
+function runStatusLabel(status = currentRunStatus) {
+  if (status === "running") return t("runStateRunning");
+  if (status === "finished") return t("runStateFinished");
+  if (status === "failed") return t("runStateFailed");
+  if (status === "stopped") return t("runStateStopped");
+  return t("runStateIdle");
+}
+
+function showToast(message, kind = "info") {
+  if (!toastRegionEl || !message) return;
+  const toast = document.createElement("div");
+  toast.className = "toast";
+  toast.dataset.kind = kind;
+  toast.textContent = message;
+  toastRegionEl.append(toast);
+  setTimeout(() => {
+    toast.style.opacity = "0";
+    toast.style.transform = "translateY(6px)";
+  }, 2600);
+  setTimeout(() => toast.remove(), 3200);
+}
+
 function outputLineCount(value = "") {
   const text = String(value || "");
   return text ? text.split(/\r?\n/).length : 0;
@@ -823,8 +874,37 @@ function outputPreviewText(value = "", maxLines = 18) {
 
 function updateStopRunButton() {
   if (!stopRunButton) return;
-  stopRunButton.hidden = currentRunStatus !== "running";
-  stopRunButton.disabled = currentRunStatus !== "running";
+  stopRunButton.hidden = !isRunningStatus();
+  stopRunButton.disabled = !isRunningStatus();
+  if (pipeMessageButton) pipeMessageButton.disabled = !currentSessionId;
+  if (queueAfterFinishButton) queueAfterFinishButton.disabled = !currentSessionId;
+  if (chatSubmitButton) chatSubmitButton.textContent = currentSessionId ? t("sendMessageButton") : t("composerStartButton");
+  if (chatInputEl) {
+    chatInputEl.placeholder = currentSessionId ? t("composerPlaceholderSession") : t("composerPlaceholderNoSession");
+  }
+  if (runStateEl) {
+    const status = currentRunStatus || "idle";
+    runStateEl.dataset.status = status;
+    runStateTextEl.textContent = runStatusLabel(status);
+    const selected = currentSessionId ? `session=${currentSessionId}` : t("runStateIdleDetail");
+    runStateDetailEl.textContent = isRunningStatus(status) || isTerminalStatus(status) ? selected : t("runStateIdleDetail");
+  }
+}
+
+function setRunStatus(status = "", { sessionId, detail = "", announce = false } = {}) {
+  const previous = currentRunStatus;
+  currentRunStatus = String(status || "");
+  if (sessionId !== undefined) currentSessionId = sessionId;
+  updateStopRunButton();
+  if (detail && runStateDetailEl) runStateDetailEl.textContent = detail;
+
+  const key = `${currentSessionId}:${currentRunStatus}`;
+  if (!announce || key === lastAnnouncedRunKey || previous === currentRunStatus) return;
+  lastAnnouncedRunKey = key;
+  if (currentRunStatus === "running") showToast(t("toastRunStarted"));
+  if (currentRunStatus === "finished") showToast(t("toastRunFinished"));
+  if (currentRunStatus === "stopped") showToast(t("toastRunStopped"));
+  if (currentRunStatus === "failed") showToast(t("toastRunFailed"), "error");
 }
 
 function renderKeyStatus(status = lastKeyStatus) {
@@ -880,10 +960,10 @@ function recommendedMaxStepsForProfile(profile = "auto", goal = "") {
   return 24;
 }
 
-function ensureRecommendedMaxStepsForCurrentTask() {
+function ensureRecommendedMaxStepsForCurrentTask(goalOverride = "") {
   const maxStepsField = document.querySelector("#maxSteps");
   const goalField = document.querySelector("#goal");
-  const recommended = recommendedMaxStepsForProfile(taskProfileField?.value || "auto", goalField?.value || "");
+  const recommended = recommendedMaxStepsForProfile(taskProfileField?.value || "auto", goalOverride || goalField?.value || "");
   if (maxStepsField && Number(maxStepsField.value || 0) < recommended) {
     maxStepsField.value = String(recommended);
   }
@@ -891,6 +971,7 @@ function ensureRecommendedMaxStepsForCurrentTask() {
 
 function renderWrapperStatus(wrappers = lastWrappers) {
   lastWrappers = wrappers || [];
+  refreshProviderDropdowns();
   if (lastWrappers.length === 0) {
     wrapperStatusEl.textContent = "";
     wrapperGridEl.innerHTML = "";
@@ -1045,6 +1126,51 @@ function fieldValue(field) {
   return String(field?.value || "").trim();
 }
 
+const providerLabels = {
+  deepseek: "DeepSeek",
+  openai: "OpenAI",
+  qwen: "Qwen",
+  venice: "Venice",
+  mock: "Mock local",
+  grsai: "GRS AI image",
+};
+
+function setChoiceOptions(select, options, selectedValue = "", fallbackValue = "") {
+  if (!select) return "";
+  const normalized = (options || [])
+    .map((item) => (typeof item === "string" ? { id: item, label: providerLabels[item] || item } : item))
+    .filter((item) => item?.id);
+  const selected = String(selectedValue || fallbackValue || "").trim();
+  if (selected && !normalized.some((item) => item.id === selected)) {
+    normalized.unshift({ id: selected, label: providerLabels[selected] || `Custom: ${selected}` });
+  }
+  select.innerHTML = normalized
+    .map((item) => `<option value="${escapeHtml(item.id)}">${escapeHtml(item.label || item.id)}</option>`)
+    .join("");
+  select.value = selected && normalized.some((item) => item.id === selected) ? selected : normalized[0]?.id || "";
+  return select.value;
+}
+
+function configuredTextProviders({ includeMock = true } = {}) {
+  const base = ["deepseek", "openai", "qwen", "venice"];
+  if (includeMock) base.push("mock");
+  if (Object.keys(modelCatalog || {}).length === 0) return base;
+  return base.filter((provider) => provider === "mock" || Array.isArray(modelCatalog[provider]));
+}
+
+function refreshProviderDropdowns() {
+  setChoiceOptions(setupProviderField, ["deepseek", "openai", "qwen", "venice", "grsai"], setupProviderField?.value || "deepseek", "deepseek");
+  setChoiceOptions(providerField, configuredTextProviders({ includeMock: true }), providerField?.value || "deepseek", "deepseek");
+  setChoiceOptions(routeProviderField, configuredTextProviders({ includeMock: true }), routeProviderField?.value || "deepseek", "deepseek");
+  setChoiceOptions(mainProviderField, configuredTextProviders({ includeMock: false }), mainProviderField?.value || "deepseek", "deepseek");
+  setChoiceOptions(spareProviderField, configuredTextProviders({ includeMock: false }), spareProviderField?.value || "openai", "openai");
+  setChoiceOptions(auxiliaryProviderField, ["grsai", "venice"], auxiliaryProviderField?.value || "grsai", "grsai");
+  const wrappers = lastWrappers.length
+    ? lastWrappers.map((wrapper) => ({ id: wrapper.name, label: wrapper.label || wrapper.name }))
+    : ["codex", "claude", "gemini", "copilot", "qwen"].map((name) => ({ id: name, label: providerLabels[name] || name }));
+  setChoiceOptions(preferredWrapperField, wrappers, preferredWrapperField?.value || "codex", "codex");
+}
+
 function providerModelOptions(provider = providerField.value) {
   return (modelCatalog[provider] || []).filter((item) => !item.hidden);
 }
@@ -1108,6 +1234,7 @@ function setSelectOptions(select, options, selectedValue = "", fallbackValue = "
 }
 
 function refreshModelDropdowns() {
+  refreshProviderDropdowns();
   const provider = providerField?.value || "deepseek";
   setSelectOptions(modelField, providerModelOptions(provider), fieldValue(modelField), defaults[provider]);
   setSelectOptions(
@@ -1926,7 +2053,7 @@ async function pipeMessageFromInput() {
 }
 
 async function flushAfterFinishQueue() {
-  if (!currentSessionId || flushingAfterFinish || currentRunStatus === "running" || pendingAfterFinishItems.length === 0) return;
+  if (!currentSessionId || flushingAfterFinish || isRunningStatus() || pendingAfterFinishItems.length === 0) return;
   flushingAfterFinish = true;
   const next = pendingAfterFinishItems[0];
   pendingAfterFinishItems = pendingAfterFinishItems.slice(1);
@@ -1944,9 +2071,11 @@ async function flushAfterFinishQueue() {
     });
     const data = await response.json().catch(() => ({}));
     if (!response.ok) throw new Error(data.error || t("failedContinue"));
-    currentSessionId = data.sessionId;
-    currentRunStatus = data.queued ? currentRunStatus : "running";
-    updateStopRunButton();
+    if (!data.queued) setRunStatus("running", { sessionId: data.sessionId, announce: true });
+    else {
+      currentSessionId = data.sessionId;
+      updateStopRunButton();
+    }
     chatStatusEl.textContent = data.queued ? t("queuedStatus") : t("runningStatus");
     await refreshSessions();
     await refreshChat();
@@ -2408,20 +2537,26 @@ async function refreshWorkspaceChanges() {
 }
 
 async function refreshRun() {
-  if (!currentSessionId) return;
+  if (!currentSessionId) {
+    setRunStatus("", { sessionId: "" });
+    return;
+  }
   const response = await fetch(`/api/runs/${encodeURIComponent(currentSessionId)}`);
-  if (!response.ok) return;
+  if (!response.ok) {
+    setRunStatus("", { detail: t("noRunSelected") });
+    return;
+  }
   const run = await response.json();
-  currentRunStatus = run.status || "";
-  updateStopRunButton();
+  setRunStatus(run.status || "", { sessionId: run.sessionId, announce: true });
   runMetaEl.textContent = `${run.status} · ${run.sessionId}`;
   renderLogs(run);
   await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
   await refreshInbox();
 
-  if (run.status === "finished" || run.status === "failed" || run.status === "stopped") {
+  if (isTerminalStatus(run.status)) {
     clearInterval(pollTimer);
     pollTimer = null;
+    chatStatusEl.textContent = run.status === "finished" ? t("runStateFinished") : run.error || runStatusLabel(run.status);
     await refreshChat();
     await refreshSessions();
     await refreshWorkspaceChanges();
@@ -2431,7 +2566,7 @@ async function refreshRun() {
 }
 
 async function stopCurrentRun() {
-  if (!currentSessionId || currentRunStatus !== "running") return;
+  if (!currentSessionId || !isRunningStatus()) return;
   stopRunButton.disabled = true;
   chatStatusEl.textContent = t("stoppingRun");
   const response = await fetch(`/api/runs/${encodeURIComponent(currentSessionId)}/stop`, {
@@ -2440,6 +2575,7 @@ async function stopCurrentRun() {
   if (!response.ok) {
     const data = await response.json().catch(() => ({}));
     chatStatusEl.textContent = data.error || t("stopRunFailed");
+    if (data.status) setRunStatus(data.status, { announce: true });
     updateStopRunButton();
     return;
   }
@@ -2466,7 +2602,7 @@ async function approvePermission(action) {
     permissionModeField.value = data.permissionMode;
     applyPermissionModeToForm(data.permissionMode);
   }
-  currentRunStatus = action === "no" ? currentRunStatus : "running";
+  if (action !== "no") setRunStatus("running", { announce: true });
   chatStatusEl.textContent = action === "no" ? t("permissionApprovalNo") : t("runningStatus");
   updateStopRunButton();
   await refreshRun();
@@ -2608,20 +2744,80 @@ async function deleteManagedSession() {
   }
 
   if (currentSessionId === selected.sessionId) {
-    currentSessionId = "";
-    sessionSelectEl.value = "";
-    runMetaEl.textContent = "";
-    setLogs(t("noRunSelected"), "empty");
-    renderChat([]);
-    artifactItems = [];
-    selectedArtifactId = "";
-    renderArtifactShell();
+    clearCurrentSessionScope({ focus: false });
   }
   managedSessionId = "";
   await refreshSessions();
   renderSessionManager(t("sessionDeleted"));
 }
 
+function clearCurrentSessionScope({ focus = true } = {}) {
+  currentSessionId = "";
+  setRunStatus("", { sessionId: "" });
+  pendingInboxItems = [];
+  pendingAfterFinishItems = [];
+  sessionSelectEl.value = "";
+  runMetaEl.textContent = "";
+  setLogs(t("noRunSelected"), "empty");
+  renderChat([]);
+  renderPendingMessages();
+  artifactItems = [];
+  selectedArtifactId = "";
+  renderArtifactShell();
+  chatStatusEl.textContent = "";
+  if (focus) chatInputEl.focus();
+}
+
+async function startRunFromGoal(goal, { clearComposer = false } = {}) {
+  const normalizedGoal = String(goal || "").trim();
+  if (!normalizedGoal) {
+    setLogs(t("goalRequired"), "empty");
+    chatStatusEl.textContent = t("goalRequired");
+    return false;
+  }
+  ensureRecommendedMaxStepsForCurrentTask(normalizedGoal);
+
+  const payload = {
+    ...formPayload(),
+    goal: normalizedGoal,
+  };
+
+  setLogs(t("startingRun"));
+  runMetaEl.textContent = "";
+  chatStatusEl.textContent = t("startingRun");
+  showToast(t("startingRun"));
+
+  const response = await fetch("/api/runs", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    setLogs(data.error || t("failedStartRun"));
+    chatStatusEl.textContent = data.error || t("failedStartRun");
+    showToast(data.error || t("failedStartRun"), "error");
+    return false;
+  }
+
+  currentSessionId = data.sessionId;
+  setRunStatus("running", { sessionId: data.sessionId, announce: true });
+  sessionSelectEl.value = currentSessionId;
+  runMetaEl.textContent = `${runStatusLabel("running")} · ${currentSessionId}`;
+  if (clearComposer) chatInputEl.value = "";
+  await refreshSessions();
+  sessionSelectEl.value = currentSessionId;
+  await refreshChat();
+  await refreshWorkspaceChanges();
+  await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
+
+  if (pollTimer) clearInterval(pollTimer);
+  pollTimer = setInterval(refreshRun, 1500);
+  await refreshRun();
+  return true;
+}
+
 function schedulePreferenceSave() {
   clearTimeout(saveTimer);
   saveTimer = setTimeout(() => {
@@ -2656,6 +2852,10 @@ manageSessionsButton.addEventListener("click", () => {
   });
 });
 
+newSessionButton?.addEventListener("click", () => {
+  clearCurrentSessionScope();
+});
+
 openArtifactsButton.addEventListener("click", () => {
   openArtifactTunnel().catch((error) => {
     chatStatusEl.textContent = String(error);
@@ -2906,7 +3106,7 @@ logsEl?.addEventListener("click", (event) => {
 });
 
 window.addEventListener("keydown", (event) => {
-  if (event.key !== "Escape" || currentRunStatus !== "running") return;
+  if (event.key !== "Escape" || !isRunningStatus()) return;
   const tag = event.target?.tagName?.toLowerCase();
   if (tag === "select" || tag === "button") return;
   event.preventDefault();
@@ -2920,62 +3120,13 @@ form.addEventListener("submit", async (event) => {
   event.preventDefault();
 
   const goal = document.querySelector("#goal").value.trim();
-  if (!goal) {
-    setLogs(t("goalRequired"), "empty");
-    return;
-  }
-  ensureRecommendedMaxStepsForCurrentTask();
-
-  const payload = {
-    ...formPayload(),
-    goal,
-  };
-
-  setLogs(t("startingRun"));
-  runMetaEl.textContent = "";
-  chatStatusEl.textContent = "";
-
-  const response = await fetch("/api/runs", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(payload),
-  });
-
-  const data = await response.json();
-  if (!response.ok) {
-    setLogs(data.error || t("failedStartRun"));
-    return;
-  }
-
-  currentSessionId = data.sessionId;
-  currentRunStatus = "running";
-  updateStopRunButton();
-  sessionSelectEl.value = currentSessionId;
-  runMetaEl.textContent = `${t("runningStatus").replace("...", "")} · ${currentSessionId}`;
-  await refreshSessions();
-  await refreshChat();
-  await refreshWorkspaceChanges();
-  await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
-
-  if (pollTimer) clearInterval(pollTimer);
-  pollTimer = setInterval(refreshRun, 1500);
-  await refreshRun();
+  await startRunFromGoal(goal);
 });
 
 sessionSelectEl.addEventListener("change", async () => {
   currentSessionId = sessionSelectEl.value;
   if (!currentSessionId) {
-    currentRunStatus = "";
-    pendingInboxItems = [];
-    pendingAfterFinishItems = [];
-    updateStopRunButton();
-    runMetaEl.textContent = "";
-    setLogs(t("noRunSelected"), "empty");
-    renderChat([]);
-    renderPendingMessages();
-    artifactItems = [];
-    selectedArtifactId = "";
-    renderArtifactShell();
+    clearCurrentSessionScope({ focus: false });
     return;
   }
   await refreshRun();
@@ -2986,17 +3137,17 @@ sessionSelectEl.addEventListener("change", async () => {
 chatFormEl.addEventListener("submit", async (event) => {
   event.preventDefault();
 
-  if (!currentSessionId) {
-    chatStatusEl.textContent = t("selectSessionFirst");
-    return;
-  }
-
   const content = chatInputEl.value.trim();
   if (!content) {
     chatStatusEl.textContent = t("messageRequired");
     return;
   }
 
+  if (!currentSessionId) {
+    await startRunFromGoal(content, { clearComposer: true });
+    return;
+  }
+
   chatStatusEl.textContent = t("sendingStatus");
 
   const response = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/messages`, {
@@ -3015,8 +3166,8 @@ chatFormEl.addEventListener("submit", async (event) => {
   }
 
   currentSessionId = data.sessionId;
-  currentRunStatus = data.queued ? currentRunStatus : "running";
-  updateStopRunButton();
+  if (!data.queued) setRunStatus("running", { sessionId: data.sessionId, announce: true });
+  else updateStopRunButton();
   chatInputEl.value = "";
   chatStatusEl.textContent = data.queued ? t("queuedStatus") : t("runningStatus");
   await refreshSessions();
@@ -3047,6 +3198,7 @@ async function loadConfig() {
   defaults.mock = data.defaults?.mock?.model || defaults.mock;
 
   applyLanguage(prefs.language || normalizeLanguage(navigator.language || "en"), { persist: false });
+  refreshProviderDropdowns();
 
   routingModeField.value = prefs.routingMode || "smart";
   providerField.value = prefs.provider || "deepseek";
@@ -3107,6 +3259,7 @@ async function loadConfig() {
   renderKeyStatus(data.keyStatus);
   renderProjectStatus(data.project);
   renderWrapperStatus(data.wrappers || []);
+  refreshProviderDropdowns();
   renderWorkspacePanel(data.workspace, []);
   renderMcpPanel(data.mcp || null);
   await refreshWorkspaceChanges();

package/public/index.html

@@ -213,6 +213,7 @@
               <select id="session-select" class="session-select">
                 <option value="" data-i18n="noSessionSelected">No session selected</option>
               </select>
+              <button id="new-session" class="icon-button" type="button" data-i18n="newSessionButton">New</button>
               <button
                 id="open-artifacts"
                 class="icon-button artifact-button"
@@ -234,6 +235,11 @@
               </button>
             </div>
           </div>
+          <div id="run-state" class="run-state" data-status="idle" role="status" aria-live="polite">
+            <span id="run-state-dot" class="run-state-dot" aria-hidden="true"></span>
+            <strong id="run-state-text" data-i18n="runStateIdle">Ready</strong>
+            <span id="run-state-detail" class="subtle" data-i18n="runStateIdleDetail">Select a conversation or type a new goal below.</span>
+          </div>
           <form id="chat-form" class="chat-form">
             <textarea
               id="chat-input"
@@ -245,7 +251,7 @@
               Enter sends · Shift+Enter adds a newline · use buttons for pipe/queue control
             </p>
             <div class="actions">
-              <button type="submit" data-i18n="sendMessageButton">Send message</button>
+              <button id="chat-submit" type="submit" data-i18n="sendMessageButton">Send message</button>
               <button id="pipe-message" type="button" class="secondary" data-i18n="pipeMessageButton">Pipe to run</button>
               <button id="queue-after-finish" type="button" class="secondary" data-i18n="queueAfterFinishButton">
                 Queue after finish
@@ -311,6 +317,7 @@
         </section>
       </section>
     </main>
+    <div id="toast-region" class="toast-region" aria-live="polite" aria-atomic="true"></div>
 
     <dialog id="settings-modal" class="modal settings-modal">
       <section class="modal-card settings-modal-card" aria-labelledby="settings-modal-title">

package/public/styles.css

@@ -242,6 +242,8 @@ h1 {
 .role-editor-grid {
   display: grid;
   gap: 10px;
+  grid-template-columns: repeat(5, minmax(150px, 1fr));
+  align-items: start;
 }
 
 .role-editor-grid label {
@@ -806,6 +808,83 @@ button.danger {
   max-width: none;
 }
 
+.run-state {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: center;
+  padding: 10px 12px;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(255, 253, 250, 0.9), rgba(240, 253, 250, 0.76));
+}
+
+.run-state[data-status="running"] {
+  border-color: rgba(15, 118, 110, 0.34);
+  background: linear-gradient(135deg, rgba(204, 251, 241, 0.9), rgba(254, 243, 199, 0.62));
+}
+
+.run-state[data-status="failed"],
+.run-state[data-status="stopped"] {
+  border-color: rgba(185, 28, 28, 0.22);
+  background: linear-gradient(135deg, rgba(254, 242, 242, 0.92), rgba(255, 251, 235, 0.7));
+}
+
+.run-state-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  background: #94a3b8;
+  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
+}
+
+.run-state[data-status="running"] .run-state-dot {
+  background: #0f766e;
+  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.16);
+}
+
+.run-state[data-status="finished"] .run-state-dot {
+  background: #15803d;
+  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.15);
+}
+
+.run-state[data-status="failed"] .run-state-dot,
+.run-state[data-status="stopped"] .run-state-dot {
+  background: #b91c1c;
+  box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.13);
+}
+
+.run-state strong {
+  color: var(--ink);
+}
+
+.toast-region {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 60;
+  display: grid;
+  width: min(360px, calc(100vw - 36px));
+  gap: 10px;
+  pointer-events: none;
+}
+
+.toast {
+  padding: 12px 14px;
+  border: 1px solid rgba(15, 118, 110, 0.22);
+  border-radius: 16px;
+  background: rgba(255, 253, 250, 0.96);
+  box-shadow: 0 18px 48px rgba(36, 28, 15, 0.16);
+  color: var(--ink);
+  font-size: 0.9rem;
+  pointer-events: auto;
+}
+
+.toast[data-kind="error"] {
+  border-color: rgba(185, 28, 28, 0.25);
+  background: rgba(254, 242, 242, 0.96);
+}
+
 .logs {
   width: 100%;
   min-width: 0;
@@ -1313,6 +1392,8 @@ button.danger {
 .settings-modal-card {
   max-height: min(860px, calc(100vh - 28px));
   overflow: auto;
+  display: grid;
+  gap: 14px;
 }
 
 .settings-section {
@@ -1699,7 +1780,8 @@ button.danger {
   }
 
   .settings-grid,
-  .settings-checks {
+  .settings-checks,
+  .role-editor-grid {
     grid-template-columns: 1fr;
   }
 }

package/scripts/smoke-web-api.js

@@ -6,6 +6,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { SessionStore } from "../src/session-store.js";
 import { projectPaths, sessionStoreOptions } from "../src/project.js";
+import { WebDatabase } from "../src/web-db.js";
 
 const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const fixtureMcpServer = path.join(repoRoot, "scripts", "fixtures", "mcp-stdio-smoke-server.mjs");
@@ -95,6 +96,9 @@ try {
   if (chatThreadIndex < 0 || chatPendingIndex < 0 || chatPendingIndex < chatThreadIndex) {
     throw new Error("pending message panel must render below the chat thread");
   }
+  for (const marker of ['id="new-session"', 'id="run-state"', 'id="toast-region"', 'id="chat-submit"']) {
+    if (!webAppHtml.includes(marker)) throw new Error(`web UI is missing ${marker}`);
+  }
 
   const config = await fetchJson("/api/config");
   if (!config.keyStatus?.mock) throw new Error("mock provider is not advertised by /api/config");
@@ -337,6 +341,35 @@ try {
   const changes = await fetchJson("/api/workspace/changes");
   if (!Array.isArray(changes.activity)) throw new Error("workspace changes endpoint returned an invalid payload");
 
+  const staleSessionId = "stale-running-smoke";
+  const staleStore = new SessionStore(paths.globalSessionsDir, staleSessionId, sessionStoreOptions(runtimeDir, staleSessionId));
+  await staleStore.ensure();
+  await staleStore.appendEvent("session.finished", {
+    result: "stale running session reconciled",
+    mode: "smoke",
+  });
+  const staleDb = new WebDatabase(runtimeDir);
+  staleDb.upsertSession({
+    sessionId: staleSessionId,
+    provider: "mock",
+    model: "mock-agent",
+    goal: "Synthetic stale running session.",
+    status: "running",
+    startedAt: new Date(Date.now() - 60_000).toISOString(),
+    updatedAt: new Date(Date.now() - 30_000).toISOString(),
+    endedAt: "",
+    result: "",
+    error: "",
+    projectRoot: runtimeDir,
+    commandCwd: runtimeDir,
+    projectSessionsDir: paths.sessionsDir,
+    sessionDir: staleStore.sessionDir,
+  });
+  const reconciledStaleRun = await fetchJson(`/api/runs/${encodeURIComponent(staleSessionId)}`);
+  if (reconciledStaleRun.status !== "finished" || !reconciledStaleRun.result.includes("reconciled")) {
+    throw new Error(`orphaned running session was not reconciled: ${JSON.stringify(reconciledStaleRun)}`);
+  }
+
   const canvasRunStart = await fetchJson("/api/runs", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
@@ -443,6 +476,7 @@ try {
           "POST /api/sessions/:id/auto-title",
           "DELETE /api/sessions/:id",
           "/api/workspace/changes",
+          "stale running status reconciliation",
           "/api/sessions/:id/artifacts",
           "/api/sessions/:id/artifacts/:artifactId",
           "/api/sessions/:id/artifacts/:artifactId/raw",

package/scripts/smoke-web-ui.js

@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+import { spawn } from "node:child_process";
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { chromium } from "playwright";
+
+const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const runtimeDir = await fs.mkdtemp(path.join(os.tmpdir(), "agintiflow-web-ui-"));
+const agintiflowHome = path.join(runtimeDir, ".agintiflow-home");
+const port = 47000 + Math.floor(Math.random() * 1000);
+const baseUrl = `http://127.0.0.1:${port}`;
+const server = spawn(process.execPath, [path.join(repoRoot, "bin/aginti-cli.js"), "web", "--port", String(port), "--host", "127.0.0.1"], {
+  cwd: runtimeDir,
+  env: {
+    ...process.env,
+    AGINTIFLOW_HOME: agintiflowHome,
+    AGINTIFLOW_RUNTIME_DIR: runtimeDir,
+  },
+  stdio: ["ignore", "pipe", "pipe"],
+});
+
+let stdout = "";
+let stderr = "";
+server.stdout.on("data", (chunk) => {
+  stdout += chunk.toString();
+});
+server.stderr.on("data", (chunk) => {
+  stderr += chunk.toString();
+});
+
+function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+async function waitForHealth() {
+  const deadline = Date.now() + 15000;
+  while (Date.now() < deadline) {
+    if (server.exitCode !== null) break;
+    try {
+      const health = await fetch(`${baseUrl}/health`).then((response) => response.json());
+      if (health.ok) return health;
+    } catch {
+      await delay(250);
+    }
+  }
+  throw new Error(`web server did not become healthy. stdout=${stdout.slice(-500)} stderr=${stderr.slice(-500)}`);
+}
+
+async function waitForRunState(page, status, timeout = 20000) {
+  await page.waitForFunction(
+    (expected) => document.querySelector("#run-state")?.dataset.status === expected,
+    status,
+    { timeout }
+  );
+}
+
+async function waitForTerminalRunState(page, timeout = 30000) {
+  await page.waitForFunction(
+    () => ["finished", "failed", "stopped"].includes(document.querySelector("#run-state")?.dataset.status || ""),
+    null,
+    { timeout }
+  );
+  return page.locator("#run-state").evaluate((node) => node.dataset.status || "");
+}
+
+async function optionValues(page, selector) {
+  return page.locator(selector).evaluate((node) => [...node.options].map((option) => option.value));
+}
+
+let browser;
+
+try {
+  await waitForHealth();
+  browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage();
+  const runPayloads = [];
+  page.on("request", (request) => {
+    if (request.url().endsWith("/api/runs") && request.method() === "POST") {
+      runPayloads.push(request.postData() || "");
+    }
+  });
+  await page.goto(baseUrl, { waitUntil: "networkidle" });
+  await page.waitForSelector("#chat-input");
+
+  const initialSubmit = await page.locator("#chat-submit").innerText();
+  if (!/start new run/i.test(initialSubmit)) throw new Error(`composer did not default to new-run mode: ${initialSubmit}`);
+  if (await page.locator("#stop-run").isVisible()) throw new Error("stop button is visible before a run starts");
+
+  await page.selectOption("#routingMode", "manual");
+  await page.selectOption("#provider", "mock");
+  await page.selectOption("#model", "mock-agent");
+  await page.fill("#maxSteps", "4");
+  await page.fill("#chat-input", "Say hello from the web UI composer in one concise sentence.");
+  await page.click("#chat-submit");
+  await waitForRunState(page, "running");
+  if (!(await page.locator("#stop-run").isVisible())) throw new Error("stop button did not appear while run was active");
+  await page.click("#stop-run");
+  await waitForTerminalRunState(page);
+  if (await page.locator("#stop-run").isVisible()) throw new Error("stop button stayed visible after terminal run state");
+  if (!(await page.locator(".toast").first().isVisible().catch(() => false))) {
+    throw new Error("running status toast did not render");
+  }
+
+  await page.click("#new-session");
+  await waitForRunState(page, "idle");
+  const resetSubmit = await page.locator("#chat-submit").innerText();
+  if (!/start new run/i.test(resetSubmit)) throw new Error("new session did not reset composer to start mode");
+
+  await page.click("#open-settings");
+  await page.waitForSelector("#settings-modal[open]");
+  const routeProviders = await optionValues(page, "#routeProvider");
+  for (const provider of ["deepseek", "openai", "qwen", "venice", "mock"]) {
+    if (!routeProviders.includes(provider)) throw new Error(`settings route provider dropdown is missing ${provider}`);
+  }
+  const wrapperOptions = await optionValues(page, "#preferredWrapper");
+  for (const wrapper of ["codex", "claude", "gemini", "copilot", "qwen"]) {
+    if (!wrapperOptions.includes(wrapper)) throw new Error(`preferred wrapper dropdown is missing ${wrapper}`);
+  }
+  await page.click("#done-settings");
+
+  console.log(
+    JSON.stringify(
+      {
+        ok: true,
+        runtimeDir,
+        checks: [
+          "composer-starts-new-run",
+          "running-stop-button-visible",
+          "running-status-toast",
+          "terminal-stop-button-hidden",
+          "new-session-resets-scope",
+          "settings-provider-dropdowns",
+          "settings-wrapper-dropdowns",
+        ],
+      },
+      null,
+      2
+    )
+  );
+} finally {
+  await browser?.close().catch(() => {});
+  server.kill("SIGTERM");
+  await delay(150);
+  await fs.rm(runtimeDir, { recursive: true, force: true });
+}

package/web.js

@@ -105,18 +105,47 @@ async function loadStoredRun(sessionId) {
 
   const store = sessionStore(sessionId);
   const events = await store.loadEvents();
+  const terminalEvent = [...events]
+    .reverse()
+    .find((event) => ["session.finished", "session.failed", "session.stopped"].includes(event.type));
+  const orphanedRunning = meta.status === "running" && !runs.has(sessionId);
+  const reconciled = { ...meta };
+
+  if (orphanedRunning && terminalEvent) {
+    reconciled.status =
+      terminalEvent.type === "session.finished" ? "finished" : terminalEvent.type === "session.failed" ? "failed" : "stopped";
+    reconciled.endedAt = reconciled.endedAt || terminalEvent.timestamp || new Date().toISOString();
+    reconciled.updatedAt = terminalEvent.timestamp || reconciled.updatedAt || reconciled.endedAt;
+    reconciled.result =
+      reconciled.status === "finished" ? String(terminalEvent.data?.result || reconciled.result || "") : reconciled.result || "";
+    reconciled.error =
+      reconciled.status === "failed"
+        ? String(terminalEvent.data?.error || terminalEvent.data?.reason || reconciled.error || "Run failed.")
+        : reconciled.status === "stopped"
+          ? String(terminalEvent.data?.reason || reconciled.error || "Run stopped.")
+          : reconciled.error || "";
+    db.upsertSession(reconciled);
+  } else if (orphanedRunning) {
+    reconciled.status = "stopped";
+    reconciled.endedAt = reconciled.endedAt || new Date().toISOString();
+    reconciled.updatedAt = reconciled.endedAt;
+    reconciled.error =
+      reconciled.error ||
+      "Run is not active in this web process. It may have ended before the web server restarted.";
+    db.upsertSession(reconciled);
+  }
 
   return {
-    sessionId: meta.sessionId,
-    status: meta.status,
-    provider: meta.provider,
-    model: meta.model,
-    goal: meta.goal,
-    title: meta.title || "",
-    startedAt: meta.startedAt,
-    endedAt: meta.endedAt || null,
-    result: meta.result || "",
-    error: meta.error || "",
+    sessionId: reconciled.sessionId,
+    status: reconciled.status,
+    provider: reconciled.provider,
+    model: reconciled.model,
+    goal: reconciled.goal,
+    title: reconciled.title || "",
+    startedAt: reconciled.startedAt,
+    endedAt: reconciled.endedAt || null,
+    result: reconciled.result || "",
+    error: reconciled.error || "",
     logs: mapEventLogs(events).slice(-300),
   };
 }
@@ -562,8 +591,8 @@ async function ensureNotRunning(sessionId) {
     throw new Error("This session is already running.");
   }
 
-  const meta = db.getSession(sessionId);
-  if (meta?.status === "running") {
+  const stored = await loadStoredRun(sessionId);
+  if (stored?.status === "running") {
     throw new Error("This session is already running.");
   }
 }
@@ -717,12 +746,16 @@ function wireRun(record, config) {
     onEvent: (type, data = {}) => push("event", type, data),
   })
     .then((result) => {
-      record.status = result?.stopped ? "stopped" : "finished";
+      record.status = result?.failed ? "failed" : result?.stopped ? "stopped" : "finished";
       record.result = result?.result || "";
-      record.error = result?.stopped ? result.reason || "Run stopped before finish." : "";
+      record.error = result?.failed
+        ? result.reason || result.result || "Run failed."
+        : result?.stopped
+          ? result.reason || "Run stopped before finish."
+          : "";
       record.updatedAt = new Date().toISOString();
       record.endedAt = new Date().toISOString();
-      push("session", result?.stopped ? "Run stopped" : "Run finished", {
+      push("session", result?.failed ? "Run failed" : result?.stopped ? "Run stopped" : "Run finished", {
         result: record.result,
         reason: result?.reason || "",
       });