@lazyingart/agintiflow 0.1.0 → 0.2.0

package/public/app.js

@@ -20,15 +20,18 @@ const translations = {
     intro:
       "Web-first agent platform with smart model routing, resumable runs, guarded tools, and optional external agent wrappers.",
     routingModeLabel: "Routing policy",
-    routingSmartOption: "Smart: fast unless complex",
+    routingSmartOption: "Smart: flash/pro/wrappers",
     routingFastOption: "DeepSeek v4 flash",
     routingComplexOption: "DeepSeek v4 pro",
     routingManualOption: "Manual provider/model",
-    routingHintSmart: "Smart routing uses DeepSeek v4 flash by default and escalates to DeepSeek v4 pro for complex work.",
+    routingHintSmart:
+      "Smart routing uses DeepSeek v4 flash for short work, DeepSeek v4 pro for complex tasks, and the selected wrapper only when wrapper tools are enabled.",
     routingHintFast: "Fast route: DeepSeek v4 flash for normal browser, shell, and short coding tasks.",
     routingHintComplex: "Complex route: DeepSeek v4 pro for deeper implementation, debugging, and design work.",
     routingHintManual: "Manual route uses the provider and model fields exactly as entered.",
+    modelRouteStatus: "Active route",
     providerLabel: "Provider",
+    mockProviderOption: "Mock local",
     modelLabel: "Model",
     goalLabel: "Goal",
     goalPlaceholder: "Open a site and summarize it, or use run_command for simple terminal inspection.",
@@ -46,9 +49,15 @@ const translations = {
     packageBlockOption: "Blocked",
     packagePromptOption: "Require approval",
     packageAllowOption: "Approved in Docker",
+    packageWarningBlock: "Package, conda, venv, and npm setup commands are blocked.",
+    packageWarningPrompt: "Package or environment setup will stop for approval before it can run.",
+    packageWarningAllow: "Package setup is approved only in Docker workspace-write mode.",
+    packageWarningHostAllow: "Host mode cannot run approved package setup; switch to Docker workspace-write.",
     headlessLabel: "Headless browser",
     shellToolLabel: "Enable shell tool",
+    fileToolLabel: "Enable file tools",
     wrapperToolLabel: "Enable agent wrappers",
+    preferredWrapperLabel: "Preferred wrapper",
     dockerSandboxLabel: "Use Docker sandbox",
     allowPasswordsLabel: "Allow password typing",
     allowDestructiveLabel: "Allow destructive actions",
@@ -67,6 +76,15 @@ const translations = {
     youLabel: "You",
     keysLabel: "Keys",
     wrappersLabel: "Wrappers",
+    selectedWrapperLabel: "Selected",
+    wrappersOffLabel: "wrapper tools off",
+    wrapperCapabilityTitle: "Agent wrappers",
+    workspaceCapabilityTitle: "Workspace files",
+    workspaceToolsLabel: "File tools",
+    workspaceChangesEmpty: "No file changes yet.",
+    changedLabel: "changed",
+    blockedLabel: "blocked",
+    mockLabel: "Mock",
     sandboxStatusTitle: "Sandbox status",
     sandboxStatusEmpty: "Not checked yet.",
     sandboxLogsEmpty: "No sandbox logs yet.",
@@ -85,6 +103,35 @@ const translations = {
     sendingStatus: "Sending...",
     runningStatus: "Running...",
     failedContinue: "Failed to continue the conversation.",
+    conversationMenuLabel: "Manage conversations",
+    manageConversationsTitle: "Manage conversations",
+    manageConversationsHelp: "Rename, auto-rename, or delete saved chat history.",
+    conversationTitleLabel: "Conversation title",
+    conversationTitlePlaceholder: "Short title for this conversation",
+    autoRenameButton: "Auto rename",
+    renameButton: "Rename",
+    deleteButton: "Delete",
+    cancelButton: "Cancel",
+    noSessionsToManage: "No saved conversations yet.",
+    titleRequired: "Title is required.",
+    sessionRenamed: "Conversation renamed.",
+    sessionDeleted: "Conversation deleted.",
+    deleteConfirm: "Delete this conversation and its local session history?",
+    manageSessionFailed: "Failed to update conversation.",
+    artifactTunnelLabel: "Open canvas and artifacts",
+    artifactTunnelTitle: "Canvas & artifacts",
+    artifactTunnelHelp: "Agent-selected canvas items, generated files, screenshots, diffs, and final answers.",
+    artifactCanvasTab: "Canvas",
+    artifactExplorerTab: "Explorer",
+    artifactNotificationsTab: "Notifications",
+    artifactListTitle: "Artifacts",
+    artifactMarkSeenButton: "Mark seen",
+    artifactEmpty: "No artifacts yet.",
+    artifactViewerEmptyTitle: "Nothing selected",
+    artifactViewerEmpty: "Select an artifact to preview it here.",
+    artifactLoading: "Loading artifact...",
+    artifactLoadFailed: "Failed to load artifact.",
+    artifactSeenUpdated: "Notifications marked as seen.",
   },
   ar: {
     documentTitle: "AgInTiFlow",
@@ -564,12 +611,20 @@ const routingModeField = document.querySelector("#routingMode");
 const providerField = document.querySelector("#provider");
 const modelField = document.querySelector("#model");
 const routingHintEl = document.querySelector("#routing-hint");
+const modelRouteStatusEl = document.querySelector("#model-route-status");
 const sandboxModeField = document.querySelector("#sandboxMode");
 const packageInstallPolicyField = document.querySelector("#packageInstallPolicy");
+const packageWarningEl = document.querySelector("#package-warning");
 const logsEl = document.querySelector("#logs");
 const runMetaEl = document.querySelector("#run-meta");
 const keyStatusEl = document.querySelector("#key-status");
+const allowWrapperToolsField = document.querySelector("#allowWrapperTools");
+const preferredWrapperField = document.querySelector("#preferredWrapper");
 const wrapperStatusEl = document.querySelector("#wrapper-status");
+const wrapperGridEl = document.querySelector("#wrapper-grid");
+const workspaceStatusEl = document.querySelector("#workspace-status");
+const workspaceToolsEl = document.querySelector("#workspace-tools");
+const workspaceChangesEl = document.querySelector("#workspace-changes");
 const sandboxStatusEl = document.querySelector("#sandbox-status");
 const sandboxLogsEl = document.querySelector("#sandbox-logs");
 const checkSandboxButton = document.querySelector("#check-sandbox");
@@ -579,12 +634,36 @@ const chatThreadEl = document.querySelector("#chat-thread");
 const chatFormEl = document.querySelector("#chat-form");
 const chatInputEl = document.querySelector("#chat-input");
 const chatStatusEl = document.querySelector("#chat-status");
+const manageSessionsButton = document.querySelector("#manage-sessions");
+const openArtifactsButton = document.querySelector("#open-artifacts");
+const artifactBadgeEl = document.querySelector("#artifact-badge");
+const sessionManagerDialog = document.querySelector("#session-manager");
+const closeSessionManagerButton = document.querySelector("#close-session-manager");
+const cancelSessionManagerButton = document.querySelector("#cancel-session-manager");
+const sessionManagerListEl = document.querySelector("#session-manager-list");
+const sessionTitleInputEl = document.querySelector("#session-title-input");
+const sessionManagerStatusEl = document.querySelector("#session-manager-status");
+const autoRenameSessionButton = document.querySelector("#auto-rename-session");
+const renameSessionButton = document.querySelector("#rename-session");
+const deleteSessionButton = document.querySelector("#delete-session");
+const artifactTunnelDialog = document.querySelector("#artifact-tunnel");
+const closeArtifactTunnelButton = document.querySelector("#close-artifact-tunnel");
+const artifactTabsEl = document.querySelector(".artifact-tabs");
+const artifactListEl = document.querySelector("#artifact-list");
+const artifactViewerTitleEl = document.querySelector("#artifact-viewer-title");
+const artifactViewerMetaEl = document.querySelector("#artifact-viewer-meta");
+const artifactViewerKindEl = document.querySelector("#artifact-viewer-kind");
+const artifactViewerBodyEl = document.querySelector("#artifact-viewer-body");
+const artifactStatusEl = document.querySelector("#artifact-status");
+const markArtifactsSeenButton = document.querySelector("#mark-artifacts-seen");
 const translatableNodes = [...document.querySelectorAll("[data-i18n]")];
 const placeholderNodes = [...document.querySelectorAll("[data-i18n-placeholder]")];
+const ariaLabelNodes = [...document.querySelectorAll("[data-i18n-aria-label]")];
 
 const defaults = {
   openai: "gpt-5.4-mini",
   deepseek: "deepseek-v4-flash",
+  mock: "mock-agent",
 };
 
 let currentLanguage = "en";
@@ -597,6 +676,13 @@ let lastSessions = [];
 let lastKeyStatus = null;
 let lastWrappers = [];
 let lastSandbox = null;
+let lastWorkspace = null;
+let lastWorkspaceActivity = [];
+let managedSessionId = "";
+let artifactItems = [];
+let selectedArtifactId = "";
+let currentArtifactTab = "canvas";
+let artifactUnreadCount = 0;
 
 function normalizeLanguage(language) {
   const lower = String(language || "").toLowerCase();
@@ -619,18 +705,94 @@ function renderKeyStatus(status = lastKeyStatus) {
   if (!status) return;
   keyStatusEl.textContent = `${t("keysLabel")}: OpenAI ${
     status.openai ? t("availableLabel") : t("missingLabel")
-  } · DeepSeek ${status.deepseek ? t("availableLabel") : t("missingLabel")}`;
+  } · DeepSeek ${status.deepseek ? t("availableLabel") : t("missingLabel")} · ${t("mockLabel")} ${
+    status.mock ? t("availableLabel") : t("missingLabel")
+  }`;
 }
 
 function renderWrapperStatus(wrappers = lastWrappers) {
   lastWrappers = wrappers || [];
   if (lastWrappers.length === 0) {
     wrapperStatusEl.textContent = "";
+    wrapperGridEl.innerHTML = "";
     return;
   }
-  wrapperStatusEl.textContent = `${t("wrappersLabel")}: ${lastWrappers
+  const selectedWrapper = preferredWrapperField?.value || "codex";
+  const selected = lastWrappers.find((wrapper) => wrapper.name === selectedWrapper);
+  const selectedLabel = selected?.label || selectedWrapper;
+  const enabledPrefix = allowWrapperToolsField?.checked ? t("selectedWrapperLabel") : t("wrappersOffLabel");
+  wrapperStatusEl.textContent = `${enabledPrefix}: ${selectedLabel} · ${t("wrappersLabel")}: ${lastWrappers
     .map((wrapper) => `${wrapper.label || wrapper.name} ${wrapper.available ? t("availableLabel") : t("missingLabel")}`)
     .join(" · ")}`;
+  wrapperGridEl.innerHTML = lastWrappers
+    .map(
+      (wrapper) => `
+        <div class="capability-chip" data-ready="${Boolean(wrapper.available)}" data-selected="${wrapper.name === selectedWrapper}">
+          <strong>${escapeHtml(wrapper.label || wrapper.name)}</strong>
+          <span>${wrapper.name === selectedWrapper ? `${t("selectedWrapperLabel")} · ` : ""}${wrapper.available ? t("availableLabel") : t("missingLabel")}</span>
+        </div>
+      `
+    )
+    .join("");
+}
+
+function renderWorkspacePanel(workspace = lastWorkspace, activity = lastWorkspaceActivity) {
+  lastWorkspace = workspace;
+  lastWorkspaceActivity = activity || [];
+
+  if (!workspace) {
+    workspaceStatusEl.textContent = "";
+    workspaceToolsEl.innerHTML = "";
+    workspaceChangesEl.innerHTML = `<p class="subtle">${t("workspaceChangesEmpty")}</p>`;
+    return;
+  }
+
+  workspaceStatusEl.textContent = `${workspace.enabled ? t("availableLabel") : t("missingLabel")} · ${
+    workspace.workspace || ""
+  }`;
+  workspaceToolsEl.innerHTML = (workspace.tools || [])
+    .map(
+      (tool) => `
+        <div class="capability-chip" data-ready="${Boolean(workspace.enabled)}">
+          <strong>${escapeHtml(tool)}</strong>
+          <span>${(workspace.writeTools || []).includes(tool) ? "write guarded" : "read guarded"}</span>
+        </div>
+      `
+    )
+    .join("");
+
+  if (!lastWorkspaceActivity.length) {
+    workspaceChangesEl.innerHTML = `<p class="subtle">${t("workspaceChangesEmpty")}</p>`;
+    return;
+  }
+
+  workspaceChangesEl.innerHTML = lastWorkspaceActivity
+    .slice(0, 6)
+    .map((item) => {
+      const blocked = item.kind === "blocked";
+      const label = blocked ? t("blockedLabel") : t("changedLabel");
+      const path = escapeHtml(item.path || "");
+      const reason = blocked ? `<div class="subtle">${escapeHtml(item.reason || "")}</div>` : "";
+      const diff = item.diff ? `<pre class="change-diff">${escapeHtml(item.diff).slice(0, 1200)}</pre>` : "";
+      const hashes =
+        item.beforeHash || item.afterHash
+          ? `<div class="change-meta"><span>before=${escapeHtml((item.beforeHash || "new").slice(0, 10))}</span><span>after=${escapeHtml((item.afterHash || "").slice(0, 10))}</span></div>`
+          : "";
+      return `
+        <article class="change-item ${blocked ? "blocked" : ""}">
+          <div class="change-meta">
+            <span>${label}</span>
+            <span>${escapeHtml(item.toolName || "")}</span>
+            <span>${item.at ? new Date(item.at).toLocaleString() : ""}</span>
+          </div>
+          <strong class="change-path">${path}</strong>
+          ${reason}
+          ${hashes}
+          ${diff}
+        </article>
+      `;
+    })
+    .join("");
 }
 
 function renderSandboxStatus(status = lastSandbox) {
@@ -685,6 +847,24 @@ function updateRoutingHint() {
       modelField.value = preset.model || modelField.value;
     }
   }
+
+  modelRouteStatusEl.textContent = `${t("modelRouteStatus")}: ${providerField.value} / ${
+    modelField.value.trim() || defaults[providerField.value] || ""
+  }`;
+}
+
+function updatePackageWarning() {
+  const policy = packageInstallPolicyField.value || "prompt";
+  const sandboxMode = sandboxModeField.value || "host";
+  const key =
+    policy === "allow" && sandboxMode === "host"
+      ? "packageWarningHostAllow"
+      : policy === "allow"
+        ? "packageWarningAllow"
+        : policy === "block"
+          ? "packageWarningBlock"
+          : "packageWarningPrompt";
+  packageWarningEl.textContent = t(key);
 }
 
 function applyLanguage(language, { persist = true } = {}) {
@@ -703,12 +883,20 @@ function applyLanguage(language, { persist = true } = {}) {
     node.placeholder = t(node.dataset.i18nPlaceholder);
   }
 
+  for (const node of ariaLabelNodes) {
+    node.setAttribute("aria-label", t(node.dataset.i18nAriaLabel));
+  }
+
   renderKeyStatus();
   renderWrapperStatus();
+  renderWorkspacePanel();
   renderSandboxStatus();
   updateRoutingHint();
+  updatePackageWarning();
   renderSessions(lastSessions);
+  renderSessionManager();
   renderChat(lastChatEntries);
+  renderArtifactShell();
   if (persist) schedulePreferenceSave();
 }
 
@@ -726,7 +914,9 @@ function formPayload() {
     packageInstallPolicy: packageInstallPolicyField.value,
     headless: document.querySelector("#headless").checked,
     allowShellTool: document.querySelector("#allowShellTool").checked,
-    allowWrapperTools: document.querySelector("#allowWrapperTools").checked,
+    allowFileTools: document.querySelector("#allowFileTools").checked,
+    allowWrapperTools: allowWrapperToolsField.checked,
+    preferredWrapper: preferredWrapperField.value,
     useDockerSandbox: sandboxModeField.value !== "host",
     dockerSandboxImage: document.querySelector("#dockerSandboxImage").value.trim(),
     allowPasswords: document.querySelector("#allowPasswords").checked,
@@ -753,7 +943,10 @@ function renderLogs(run) {
 }
 
 function escapeHtml(value) {
-  return String(value || "").replace(/[&<>]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" }[ch]));
+  return String(value || "").replace(
+    /[&<>"']/g,
+    (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch]
+  );
 }
 
 function renderChat(chatEntries) {
@@ -781,14 +974,218 @@ function renderChat(chatEntries) {
   chatThreadEl.scrollTop = chatThreadEl.scrollHeight;
 }
 
+function artifactReadKey(sessionId = currentSessionId) {
+  return `agintiflow.artifacts.readIds.${sessionId || "none"}`;
+}
+
+function getArtifactReadIds(sessionId = currentSessionId) {
+  try {
+    const raw = localStorage.getItem(artifactReadKey(sessionId)) || "[]";
+    const parsed = JSON.parse(raw);
+    return new Set(Array.isArray(parsed) ? parsed : []);
+  } catch {
+    return new Set();
+  }
+}
+
+function saveArtifactReadIds(readIds, sessionId = currentSessionId) {
+  if (!sessionId) return;
+  try {
+    localStorage.setItem(artifactReadKey(sessionId), JSON.stringify([...readIds].slice(-800)));
+  } catch {
+    // Local storage is optional for notification state.
+  }
+}
+
+function computeUnreadArtifactCount() {
+  const readIds = getArtifactReadIds();
+  return artifactItems.filter((item) => !readIds.has(item.id)).length;
+}
+
+function markArtifactRead(artifactId) {
+  if (!artifactId) return;
+  const readIds = getArtifactReadIds();
+  readIds.add(artifactId);
+  saveArtifactReadIds(readIds);
+  artifactUnreadCount = computeUnreadArtifactCount();
+}
+
+function markAllArtifactsRead() {
+  const readIds = getArtifactReadIds();
+  for (const item of artifactItems) readIds.add(item.id);
+  saveArtifactReadIds(readIds);
+  artifactUnreadCount = 0;
+}
+
+function renderArtifactBadge(count = computeUnreadArtifactCount()) {
+  artifactUnreadCount = Number(count) || 0;
+  if (!artifactBadgeEl) return;
+  artifactBadgeEl.textContent = artifactUnreadCount > 99 ? "99+" : String(artifactUnreadCount);
+  artifactBadgeEl.hidden = artifactUnreadCount <= 0;
+}
+
+function artifactLabel(item) {
+  const source = item.source ? item.source.replace(/-/g, " ") : "artifact";
+  const when = item.createdAt ? new Date(item.createdAt).toLocaleString() : "";
+  return [item.kind, source, when].filter(Boolean).join(" · ");
+}
+
+function renderArtifactList() {
+  if (!artifactListEl) return;
+  const visible = artifactItems.filter((item) => item.tab === currentArtifactTab);
+  const readIds = getArtifactReadIds();
+
+  document.querySelectorAll(".artifact-tab").forEach((tab) => {
+    tab.dataset.selected = String(tab.dataset.artifactTab === currentArtifactTab);
+  });
+
+  if (!currentSessionId) {
+    artifactListEl.innerHTML = `<p class="subtle">${t("selectSessionFirst")}</p>`;
+    return;
+  }
+
+  if (visible.length === 0) {
+    artifactListEl.innerHTML = `<p class="subtle">${t("artifactEmpty")}</p>`;
+    return;
+  }
+
+  artifactListEl.innerHTML = visible
+    .map(
+      (item) => {
+        const read = readIds.has(item.id);
+        return `
+        <button class="artifact-row" type="button" data-artifact-id="${escapeHtml(item.id)}" data-selected="${item.id === selectedArtifactId}" data-read="${read}">
+          <span class="artifact-row-top">
+            <strong>${escapeHtml(item.title || item.path || item.kind)}</strong>
+            <span>${read ? escapeHtml(item.kind) : `New · ${escapeHtml(item.kind)}`}</span>
+          </span>
+          <span class="artifact-row-meta">${escapeHtml(artifactLabel(item))}</span>
+          <span class="artifact-row-preview">${escapeHtml(item.preview || item.path || "")}</span>
+        </button>
+      `;
+      }
+    )
+    .join("");
+}
+
+function resetArtifactViewer() {
+  artifactViewerTitleEl.textContent = t("artifactViewerEmptyTitle");
+  artifactViewerMetaEl.textContent = "";
+  artifactViewerKindEl.textContent = "";
+  artifactViewerBodyEl.innerHTML = `<p class="subtle">${t("artifactViewerEmpty")}</p>`;
+}
+
+function renderArtifactShell() {
+  renderArtifactBadge();
+  renderArtifactList();
+  if (!selectedArtifactId || !artifactItems.some((item) => item.id === selectedArtifactId)) {
+    resetArtifactViewer();
+  }
+}
+
+function renderArtifactContent(content) {
+  const item = artifactItems.find((candidate) => candidate.id === content.id);
+  artifactViewerTitleEl.textContent = content.title || item?.title || t("artifactViewerEmptyTitle");
+  artifactViewerMetaEl.textContent = [content.path || item?.path, item ? artifactLabel(item) : ""].filter(Boolean).join(" · ");
+  artifactViewerKindEl.textContent = content.kind || item?.kind || "";
+
+  if (content.dataUrl && (content.kind === "pdf" || content.mime === "application/pdf")) {
+    artifactViewerBodyEl.innerHTML = `
+      <iframe class="artifact-pdf-frame" src="${content.dataUrl}" title="${escapeHtml(content.title || "Artifact PDF")}"></iframe>
+    `;
+    return;
+  }
+
+  if (content.dataUrl) {
+    artifactViewerBodyEl.innerHTML = `
+      <figure class="artifact-image-frame">
+        <img class="artifact-preview-image" src="${content.dataUrl}" alt="${escapeHtml(content.title || "Artifact image")}" />
+      </figure>
+    `;
+    return;
+  }
+
+  const text = typeof content.text === "string" ? content.text : "";
+  artifactViewerBodyEl.innerHTML = `
+    <textarea class="artifact-editor" readonly spellcheck="false">${escapeHtml(text)}</textarea>
+  `;
+}
+
+async function refreshArtifacts({ loadSelected = false } = {}) {
+  if (!currentSessionId) {
+    artifactItems = [];
+    selectedArtifactId = "";
+    artifactUnreadCount = 0;
+    renderArtifactShell();
+    return;
+  }
+
+  const response = await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/artifacts`);
+  if (!response.ok) return;
+  const data = await response.json();
+  artifactItems = data.items || [];
+  artifactUnreadCount = computeUnreadArtifactCount();
+  if (!selectedArtifactId || !artifactItems.some((item) => item.id === selectedArtifactId)) {
+    selectedArtifactId = data.selectedItemId || artifactItems[0]?.id || "";
+  }
+  renderArtifactShell();
+  if (loadSelected && selectedArtifactId) await selectArtifact(selectedArtifactId, { persist: false });
+}
+
+async function selectArtifact(artifactId, { persist = true } = {}) {
+  if (!currentSessionId || !artifactId) return;
+  selectedArtifactId = artifactId;
+  renderArtifactList();
+  artifactStatusEl.textContent = t("artifactLoading");
+
+  if (persist) {
+    await fetch(`/api/sessions/${encodeURIComponent(currentSessionId)}/artifacts/select`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ artifactId }),
+    }).catch(() => {});
+  }
+
+  const response = await fetch(
+    `/api/sessions/${encodeURIComponent(currentSessionId)}/artifacts/${encodeURIComponent(artifactId)}`
+  );
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    artifactStatusEl.textContent = data.error || t("artifactLoadFailed");
+    return;
+  }
+
+  artifactStatusEl.textContent = "";
+  markArtifactRead(artifactId);
+  renderArtifactBadge();
+  renderArtifactList();
+  renderArtifactContent(data);
+}
+
+async function openArtifactTunnel() {
+  if (!currentSessionId) {
+    chatStatusEl.textContent = t("selectSessionFirst");
+    return;
+  }
+  artifactStatusEl.textContent = "";
+  artifactTunnelDialog.showModal();
+  await refreshArtifacts({ loadSelected: true });
+}
+
+function closeArtifactTunnel() {
+  artifactTunnelDialog.close();
+  artifactStatusEl.textContent = "";
+}
+
 function renderSessions(sessions) {
   lastSessions = sessions || [];
   const current = sessionSelectEl.value;
   const options = [`<option value="">${t("selectRecentSession")}</option>`]
     .concat(
       lastSessions.map((session) => {
-        const goal = escapeHtml(`${session.goal.slice(0, 60)}${session.goal.length > 60 ? "..." : ""}`);
-        const label = `${escapeHtml(session.provider)} · ${goal}`;
+        const rawTitle = session.title || session.goal || session.sessionId;
+        const title = escapeHtml(`${rawTitle.slice(0, 60)}${rawTitle.length > 60 ? "..." : ""}`);
+        const label = `${escapeHtml(session.provider)} · ${title}`;
         return `<option value="${escapeHtml(session.sessionId)}">${label}</option>`;
       })
     )
@@ -800,10 +1197,58 @@ function renderSessions(sessions) {
   }
 }
 
+function currentManagedSession() {
+  return lastSessions.find((session) => session.sessionId === managedSessionId) || lastSessions[0] || null;
+}
+
+function renderSessionManager(message = "") {
+  if (!sessionManagerListEl) return;
+  if (!managedSessionId && currentSessionId) managedSessionId = currentSessionId;
+  if (!lastSessions.some((session) => session.sessionId === managedSessionId)) {
+    managedSessionId = lastSessions[0]?.sessionId || "";
+  }
+
+  const selected = currentManagedSession();
+  sessionTitleInputEl.value = selected ? selected.title || selected.goal || "" : "";
+  sessionTitleInputEl.disabled = !selected;
+  autoRenameSessionButton.disabled = !selected;
+  renameSessionButton.disabled = !selected;
+  deleteSessionButton.disabled = !selected;
+  sessionManagerStatusEl.textContent = message;
+
+  if (!lastSessions.length) {
+    sessionManagerListEl.innerHTML = `<p class="subtle">${t("noSessionsToManage")}</p>`;
+    return;
+  }
+
+  sessionManagerListEl.innerHTML = lastSessions
+    .map((session) => {
+      const title = session.title || session.goal || session.sessionId;
+      const meta = [session.status, session.provider, session.updatedAt ? new Date(session.updatedAt).toLocaleString() : ""]
+        .filter(Boolean)
+        .join(" · ");
+      return `
+        <button class="session-row" type="button" data-session-id="${escapeHtml(session.sessionId)}" data-selected="${session.sessionId === managedSessionId}">
+          <strong>${escapeHtml(title)}</strong>
+          <span>${escapeHtml(meta)}</span>
+        </button>
+      `;
+    })
+    .join("");
+}
+
 async function refreshSessions() {
   const response = await fetch("/api/sessions");
   const data = await response.json();
   renderSessions(data.sessions || []);
+  renderSessionManager();
+}
+
+async function refreshWorkspaceChanges() {
+  const response = await fetch("/api/workspace/changes");
+  if (!response.ok) return;
+  const data = await response.json();
+  renderWorkspacePanel(data.workspace, data.activity || []);
 }
 
 async function refreshRun() {
@@ -813,12 +1258,15 @@ async function refreshRun() {
   const run = await response.json();
   runMetaEl.textContent = `${run.status} · ${run.sessionId}`;
   renderLogs(run);
+  await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
 
   if (run.status === "finished" || run.status === "failed") {
     clearInterval(pollTimer);
     pollTimer = null;
     await refreshChat();
     await refreshSessions();
+    await refreshWorkspaceChanges();
+    await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
   }
 }
 
@@ -880,6 +1328,88 @@ async function runSandboxPreflight() {
     .join("\n\n");
 }
 
+async function openSessionManager() {
+  await refreshSessions();
+  managedSessionId = currentSessionId || managedSessionId || lastSessions[0]?.sessionId || "";
+  renderSessionManager();
+  sessionManagerDialog.showModal();
+}
+
+function closeSessionManager() {
+  sessionManagerDialog.close();
+  sessionManagerStatusEl.textContent = "";
+}
+
+async function renameManagedSession() {
+  const selected = currentManagedSession();
+  if (!selected) return;
+
+  const title = sessionTitleInputEl.value.trim();
+  if (!title) {
+    sessionManagerStatusEl.textContent = t("titleRequired");
+    return;
+  }
+
+  const response = await fetch(`/api/sessions/${encodeURIComponent(selected.sessionId)}`, {
+    method: "PATCH",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ title }),
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    sessionManagerStatusEl.textContent = data.error || t("manageSessionFailed");
+    return;
+  }
+
+  await refreshSessions();
+  renderSessionManager(t("sessionRenamed"));
+}
+
+async function autoRenameManagedSession() {
+  const selected = currentManagedSession();
+  if (!selected) return;
+
+  const response = await fetch(`/api/sessions/${encodeURIComponent(selected.sessionId)}/auto-title`, {
+    method: "POST",
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    sessionManagerStatusEl.textContent = data.error || t("manageSessionFailed");
+    return;
+  }
+
+  await refreshSessions();
+  renderSessionManager(t("sessionRenamed"));
+}
+
+async function deleteManagedSession() {
+  const selected = currentManagedSession();
+  if (!selected || !confirm(t("deleteConfirm"))) return;
+
+  const response = await fetch(`/api/sessions/${encodeURIComponent(selected.sessionId)}`, {
+    method: "DELETE",
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok) {
+    sessionManagerStatusEl.textContent = data.error || t("manageSessionFailed");
+    return;
+  }
+
+  if (currentSessionId === selected.sessionId) {
+    currentSessionId = "";
+    sessionSelectEl.value = "";
+    runMetaEl.textContent = "";
+    setLogs(t("noRunSelected"), "empty");
+    renderChat([]);
+    artifactItems = [];
+    selectedArtifactId = "";
+    renderArtifactShell();
+  }
+  managedSessionId = "";
+  await refreshSessions();
+  renderSessionManager(t("sessionDeleted"));
+}
+
 function schedulePreferenceSave() {
   clearTimeout(saveTimer);
   saveTimer = setTimeout(() => {
@@ -908,13 +1438,101 @@ preflightSandboxButton.addEventListener("click", () => {
   });
 });
 
+manageSessionsButton.addEventListener("click", () => {
+  openSessionManager().catch((error) => {
+    chatStatusEl.textContent = String(error);
+  });
+});
+
+openArtifactsButton.addEventListener("click", () => {
+  openArtifactTunnel().catch((error) => {
+    chatStatusEl.textContent = String(error);
+  });
+});
+
+closeSessionManagerButton.addEventListener("click", closeSessionManager);
+cancelSessionManagerButton.addEventListener("click", closeSessionManager);
+closeArtifactTunnelButton.addEventListener("click", closeArtifactTunnel);
+
+sessionManagerDialog.addEventListener("click", (event) => {
+  if (event.target === sessionManagerDialog) closeSessionManager();
+});
+
+artifactTunnelDialog.addEventListener("click", (event) => {
+  if (event.target === artifactTunnelDialog) closeArtifactTunnel();
+});
+
+artifactTabsEl.addEventListener("click", (event) => {
+  const tab = event.target.closest("[data-artifact-tab]");
+  if (!tab) return;
+  currentArtifactTab = tab.dataset.artifactTab || "canvas";
+  renderArtifactShell();
+});
+
+artifactListEl.addEventListener("click", (event) => {
+  const row = event.target.closest("[data-artifact-id]");
+  if (!row) return;
+  selectArtifact(row.dataset.artifactId || "").catch((error) => {
+    artifactStatusEl.textContent = String(error);
+  });
+});
+
+markArtifactsSeenButton.addEventListener("click", () => {
+  markAllArtifactsRead();
+  renderArtifactBadge();
+  renderArtifactList();
+  artifactStatusEl.textContent = t("artifactSeenUpdated");
+  refreshArtifacts({ loadSelected: false }).catch(() => {});
+});
+
+sessionManagerListEl.addEventListener("click", (event) => {
+  const row = event.target.closest("[data-session-id]");
+  if (!row) return;
+  managedSessionId = row.dataset.sessionId || "";
+  renderSessionManager();
+});
+
+renameSessionButton.addEventListener("click", () => {
+  renameManagedSession().catch((error) => {
+    sessionManagerStatusEl.textContent = String(error);
+  });
+});
+
+autoRenameSessionButton.addEventListener("click", () => {
+  autoRenameManagedSession().catch((error) => {
+    sessionManagerStatusEl.textContent = String(error);
+  });
+});
+
+deleteSessionButton.addEventListener("click", () => {
+  deleteManagedSession().catch((error) => {
+    sessionManagerStatusEl.textContent = String(error);
+  });
+});
+
 providerField.addEventListener("change", () => {
-  if (!modelField.value.trim() || modelField.value === defaults.openai || modelField.value === defaults.deepseek) {
+  if (providerField.value === "mock") {
+    routingModeField.value = "manual";
+  }
+
+  if (
+    !modelField.value.trim() ||
+    modelField.value === defaults.openai ||
+    modelField.value === defaults.deepseek ||
+    modelField.value === defaults.mock
+  ) {
     modelField.value = defaults[providerField.value] || "";
   }
+  updateRoutingHint();
   schedulePreferenceSave();
 });
 
+modelField.addEventListener("input", updateRoutingHint);
+sandboxModeField.addEventListener("change", updatePackageWarning);
+packageInstallPolicyField.addEventListener("change", updatePackageWarning);
+allowWrapperToolsField.addEventListener("change", () => renderWrapperStatus());
+preferredWrapperField.addEventListener("change", () => renderWrapperStatus());
+
 form.addEventListener("input", schedulePreferenceSave);
 form.addEventListener("change", schedulePreferenceSave);
 
@@ -953,6 +1571,8 @@ form.addEventListener("submit", async (event) => {
   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);
@@ -965,10 +1585,14 @@ sessionSelectEl.addEventListener("change", async () => {
     runMetaEl.textContent = "";
     setLogs(t("noRunSelected"), "empty");
     renderChat([]);
+    artifactItems = [];
+    selectedArtifactId = "";
+    renderArtifactShell();
     return;
   }
   await refreshRun();
   await refreshChat();
+  await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
 });
 
 chatFormEl.addEventListener("submit", async (event) => {
@@ -1007,6 +1631,8 @@ chatFormEl.addEventListener("submit", async (event) => {
   chatStatusEl.textContent = t("runningStatus");
   await refreshSessions();
   await refreshChat();
+  await refreshWorkspaceChanges();
+  await refreshArtifacts({ loadSelected: artifactTunnelDialog?.open });
 
   if (pollTimer) clearInterval(pollTimer);
   pollTimer = setInterval(refreshRun, 1500);
@@ -1020,6 +1646,7 @@ async function loadConfig() {
   routingPresets = data.routing?.presets || {};
   defaults.openai = data.defaults?.openai?.model || defaults.openai;
   defaults.deepseek = routingPresets.fast?.model || data.defaults?.deepseek?.model || defaults.deepseek;
+  defaults.mock = data.defaults?.mock?.model || defaults.mock;
 
   applyLanguage(prefs.language || normalizeLanguage(navigator.language || "en"), { persist: false });
 
@@ -1031,18 +1658,23 @@ async function loadConfig() {
   document.querySelector("#commandCwd").value = prefs.commandCwd || "/home/lachlan/ProjectsLFS/Agent";
   document.querySelector("#headless").checked = prefs.headless ?? data.defaults.headless;
   document.querySelector("#maxSteps").value = prefs.maxSteps ?? data.defaults.maxSteps;
-  sandboxModeField.value = prefs.sandboxMode || (prefs.useDockerSandbox ? "docker-readonly" : "host");
+  sandboxModeField.value = prefs.sandboxMode || (prefs.useDockerSandbox ? "docker-workspace" : "host");
   packageInstallPolicyField.value = prefs.packageInstallPolicy || "prompt";
   document.querySelector("#allowShellTool").checked = prefs.allowShellTool ?? true;
-  document.querySelector("#allowWrapperTools").checked = prefs.allowWrapperTools ?? false;
+  document.querySelector("#allowFileTools").checked = prefs.allowFileTools ?? true;
+  allowWrapperToolsField.checked = prefs.allowWrapperTools ?? false;
+  preferredWrapperField.value = prefs.preferredWrapper || "codex";
   document.querySelector("#dockerSandboxImage").value = prefs.dockerSandboxImage || "agintiflow-sandbox:latest";
   document.querySelector("#allowPasswords").checked = prefs.allowPasswords ?? false;
   document.querySelector("#allowDestructive").checked = prefs.allowDestructive ?? false;
 
   renderKeyStatus(data.keyStatus);
   renderWrapperStatus(data.wrappers || []);
+  renderWorkspacePanel(data.workspace, []);
+  await refreshWorkspaceChanges();
   renderSandboxLogs(data.sandbox?.logs || []);
   updateRoutingHint();
+  updatePackageWarning();
 
   renderSessions(data.sessions || []);
   if (data.sessions && data.sessions.length > 0) {
@@ -1050,6 +1682,7 @@ async function loadConfig() {
     sessionSelectEl.value = currentSessionId;
     await refreshRun();
     await refreshChat();
+    await refreshArtifacts({ loadSelected: false });
   }
 }