@lazyingart/agintiflow 0.2.0 → 0.4.0

package/README.md

@@ -38,8 +38,12 @@ Install the published CLI:
 
 ```bash
 npm install -g @lazyingart/agintiflow
+cd /path/to/your-project
+aginti init
+aginti doctor
 aginti --list-routes
-aginti --sandbox-status --sandbox-mode docker-readonly --cwd "$PWD"
+aginti --list-profiles
+aginti --sandbox-status --sandbox-mode docker-readonly
 ```
 
 Launch the local web UI from an installed package:
@@ -49,10 +53,23 @@ aginti web --port 3210
 # then open http://127.0.0.1:3210
 ```
 
+`aginti web` uses the folder it is launched from as the project root, default working directory, session store, and settings database. CLI and web runs share the same project-local `.sessions/` folder.
+
 Run the installed CLI without a live provider key by using the local mock route:
 
 ```bash
-aginti --provider mock --routing manual --allow-shell --cwd "$PWD" "Report the current directory"
+aginti --provider mock --routing manual --allow-file-tools "Create notes/hello.md with a smoke-test note"
+```
+
+Useful project commands:
+
+```bash
+aginti keys status
+printf '%s' "$DEEPSEEK_API_KEY" | aginti keys set deepseek --stdin
+aginti sessions list
+aginti sessions show <session-id>
+aginti resume <session-id> "continue with a short follow-up"
+aginti --profile code --provider mock --routing manual "Create notes/hello.md"
 ```
 
 Run from a source checkout:
@@ -101,6 +118,9 @@ The package exposes both `aginti` and `aginti-cli`; they run the same CLI entryp
 The web app includes:
 
 - Routing dropdown for smart, fast, complex, and manual model selection.
+- Project folder indicator showing project root, command cwd, session folder, and session database.
+- First-run provider setup panel with mock fallback and project-local DeepSeek/OpenAI key save.
+- Task profile dropdown for code, writing, design docs, Python, shell, Node, AAPS, LaTeX, and system maintenance workflows.
 - Provider dropdown for DeepSeek, OpenAI, and local mock mode when manual routing is needed.
 - Language dropdown with 11 persisted UI locales.
 - Editable model field, with DeepSeek v4 flash as the fast default and DeepSeek v4 pro as the complex route.
@@ -162,6 +182,7 @@ PACKAGE_INSTALL_POLICY=prompt
 USE_DOCKER_SANDBOX=true
 DOCKER_SANDBOX_IMAGE=agintiflow-sandbox:latest
 COMMAND_CWD=/home/lachlan/ProjectsLFS/Agent
+AGINTI_TASK_PROFILE=auto
 ```
 
 Defaults:
@@ -180,6 +201,15 @@ Provider credentials:
 | OpenAI | `OPENAI_API_KEY` | `https://api.openai.com/v1` |
 | DeepSeek | `DEEPSEEK_API_KEY` | `https://api.deepseek.com/v1` |
 
+Project-local credentials can be stored without committing secrets:
+
+```bash
+aginti init
+printf '%s' "$DEEPSEEK_API_KEY" | aginti keys set deepseek --stdin
+```
+
+This writes `.aginti/.env` with `0600` permissions and adds safe `.gitignore` entries. APIs and logs expose only key presence, never raw values.
+
 ## Agent Wrappers
 
 AgInTiFlow can expose external coding agents as advisory tools when `ALLOW_WRAPPER_TOOLS=true` or the web UI toggle is enabled. Wrappers are not a replacement for the core runner; they are used for second opinions, codebase analysis, or planning when they are installed and authenticated. The preferred wrapper defaults to Codex and can be changed with `PREFERRED_WRAPPER=codex`, `aginti --allow-wrappers --wrapper codex`, or the web UI dropdown.

package/docs/project-agent-lessons.md

@@ -0,0 +1,41 @@
+# Project-Agent UX Lessons
+
+Round 8 distilled implementation lessons from local agent projects and applied the highest-value subset to AgInTiFlow.
+
+## Codex
+
+- Treat the launch directory as the working project unless the user overrides it.
+- Keep patch/file tools deterministic and auditable: edits should be workspace-local, compactly diffed, and easy to inspect.
+- Resume should be a first-class CLI flow, not only a hidden runtime detail.
+
+## Claude Code
+
+- Terminal UX should be simple: install, `cd` into a project, run the agent.
+- Project context matters more than global state for everyday coding work.
+- Natural-language prompts should map to file edits, shell checks, and git-aware workflows without extra ceremony.
+
+## Gemini CLI
+
+- Session history should be project-scoped so runs from different folders do not mix.
+- Checkpoints/resume flows need discoverable commands and clear current-project boundaries.
+- Extensibility works best as named profiles/skills rather than hardcoded one-off prompts.
+
+## Copilot SDK
+
+- BYOK status should report only presence/absence and env-var names, never raw key material.
+- Session APIs should expose metadata, logs, workspace state, and model/provider choices for web clients.
+- Tool and permission hooks should be visible enough that users can understand why actions were allowed or blocked.
+
+## Claw Code
+
+- First-run `init` and `doctor` commands reduce setup ambiguity.
+- Container/sandbox readiness should be diagnosed before complex tasks.
+- Parity and smoke checks should run against isolated project folders, not only the source repo.
+
+## Applied In AgInTiFlow
+
+- `aginti web` now defaults command execution to the folder it was launched from.
+- CLI and web share `.sessions/` in the project root.
+- `aginti init`, `aginti doctor`, `aginti keys`, `aginti sessions`, and `aginti resume` provide basic project lifecycle control.
+- Task profiles wire lightweight skill prompts into CLI/web runs while keeping the LLM responsible for the main plan.
+- Project-local `.aginti/.env` can store provider keys safely with 0600 permissions and ignored git entries.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "AgInTiFlow is a resumable Playwright website-control agent with OpenAI-compatible tool calling.",
   "license": "Apache-2.0",

package/public/app.js

@@ -19,6 +19,18 @@ const translations = {
     languageLabel: "Language",
     intro:
       "Web-first agent platform with smart model routing, resumable runs, guarded tools, and optional external agent wrappers.",
+    projectStatusTitle: "Project folder",
+    setupTitle: "Provider setup",
+    setupHelp:
+      "DeepSeek/OpenAI keys are missing. Use mock mode, export an env var, or save a project-local DeepSeek key.",
+    setupEnvHelp:
+      "Env vars: DEEPSEEK_API_KEY, OPENAI_API_KEY, or LLM_API_KEY. Mock mode remains available for local tests.",
+    setupProviderLabel: "Provider",
+    setupKeyLabel: "API key",
+    saveKeyButton: "Save local key",
+    keySavedStatus: "Local key saved. Raw values are never returned by the API.",
+    keySaveFailed: "Failed to save local key.",
+    taskProfileLabel: "Task profile",
     routingModeLabel: "Routing policy",
     routingSmartOption: "Smart: flash/pro/wrappers",
     routingFastOption: "DeepSeek v4 flash",
@@ -122,6 +134,7 @@ const translations = {
     artifactTunnelTitle: "Canvas & artifacts",
     artifactTunnelHelp: "Agent-selected canvas items, generated files, screenshots, diffs, and final answers.",
     artifactCanvasTab: "Canvas",
+    artifactPdfTab: "PDF Reader",
     artifactExplorerTab: "Explorer",
     artifactNotificationsTab: "Notifications",
     artifactListTitle: "Artifacts",
@@ -132,6 +145,10 @@ const translations = {
     artifactLoading: "Loading artifact...",
     artifactLoadFailed: "Failed to load artifact.",
     artifactSeenUpdated: "Notifications marked as seen.",
+    artifactDownloadLabel: "Download artifact",
+    artifactDownloadPreparing: "Preparing download...",
+    artifactDownloadReady: "Download started.",
+    artifactDownloadFailed: "Download failed.",
   },
   ar: {
     documentTitle: "AgInTiFlow",
@@ -612,6 +629,13 @@ const providerField = document.querySelector("#provider");
 const modelField = document.querySelector("#model");
 const routingHintEl = document.querySelector("#routing-hint");
 const modelRouteStatusEl = document.querySelector("#model-route-status");
+const projectStatusEl = document.querySelector("#project-status");
+const setupCardEl = document.querySelector("#setup-card");
+const setupProviderField = document.querySelector("#setup-provider");
+const setupApiKeyField = document.querySelector("#setup-api-key");
+const saveApiKeyButton = document.querySelector("#save-api-key");
+const setupStatusEl = document.querySelector("#setup-status");
+const taskProfileField = document.querySelector("#taskProfile");
 const sandboxModeField = document.querySelector("#sandboxMode");
 const packageInstallPolicyField = document.querySelector("#packageInstallPolicy");
 const packageWarningEl = document.querySelector("#package-warning");
@@ -668,6 +692,8 @@ const defaults = {
 
 let currentLanguage = "en";
 let routingPresets = {};
+let taskProfiles = [];
+let projectInfo = null;
 let currentSessionId = "";
 let pollTimer = null;
 let saveTimer = null;
@@ -708,6 +734,28 @@ function renderKeyStatus(status = lastKeyStatus) {
   } · DeepSeek ${status.deepseek ? t("availableLabel") : t("missingLabel")} · ${t("mockLabel")} ${
     status.mock ? t("availableLabel") : t("missingLabel")
   }`;
+  if (setupCardEl) setupCardEl.hidden = Boolean(status.openai || status.deepseek);
+}
+
+function renderProjectStatus(info = projectInfo) {
+  projectInfo = info;
+  if (!projectStatusEl || !info) return;
+  projectStatusEl.textContent = [
+    `root=${info.root || ""}`,
+    `cwd=${info.commandCwd || ""}`,
+    `sessions=${info.sessionsDir || ""}`,
+    `db=${info.sessionDbPath || ""}`,
+    `shared=${info.sharedSessionFolder ? "yes" : "no"}`,
+  ].join(" · ");
+}
+
+function renderTaskProfiles(selected = "auto") {
+  if (!taskProfileField) return;
+  const profiles = taskProfiles.length ? taskProfiles : [{ id: "auto", label: "Auto" }];
+  taskProfileField.innerHTML = profiles
+    .map((profile) => `<option value="${escapeHtml(profile.id)}">${escapeHtml(profile.label || profile.id)}</option>`)
+    .join("");
+  taskProfileField.value = profiles.some((profile) => profile.id === selected) ? selected : "auto";
 }
 
 function renderWrapperStatus(wrappers = lastWrappers) {
@@ -888,6 +936,7 @@ function applyLanguage(language, { persist = true } = {}) {
   }
 
   renderKeyStatus();
+  renderProjectStatus();
   renderWrapperStatus();
   renderWorkspacePanel();
   renderSandboxStatus();
@@ -917,6 +966,7 @@ function formPayload() {
     allowFileTools: document.querySelector("#allowFileTools").checked,
     allowWrapperTools: allowWrapperToolsField.checked,
     preferredWrapper: preferredWrapperField.value,
+    taskProfile: taskProfileField?.value || "auto",
     useDockerSandbox: sandboxModeField.value !== "host",
     dockerSandboxImage: document.querySelector("#dockerSandboxImage").value.trim(),
     allowPasswords: document.querySelector("#allowPasswords").checked,
@@ -1030,9 +1080,28 @@ function artifactLabel(item) {
   return [item.kind, source, when].filter(Boolean).join(" · ");
 }
 
+function isPdfArtifact(item) {
+  return item?.kind === "pdf" || item?.mime === "application/pdf" || /\.pdf$/i.test(item?.path || "");
+}
+
+function artifactVisibleInCurrentTab(item) {
+  if (currentArtifactTab === "pdf") return isPdfArtifact(item);
+  return item.tab === currentArtifactTab;
+}
+
+function preferredArtifactForCurrentTab(fallbackId = "") {
+  const current = artifactItems.find((item) => item.id === selectedArtifactId && artifactVisibleInCurrentTab(item));
+  if (current) return current;
+
+  const fallback = artifactItems.find((item) => item.id === fallbackId && artifactVisibleInCurrentTab(item));
+  if (fallback) return fallback;
+
+  return artifactItems.find(artifactVisibleInCurrentTab) || null;
+}
+
 function renderArtifactList() {
   if (!artifactListEl) return;
-  const visible = artifactItems.filter((item) => item.tab === currentArtifactTab);
+  const visible = artifactItems.filter(artifactVisibleInCurrentTab);
   const readIds = getArtifactReadIds();
 
   document.querySelectorAll(".artifact-tab").forEach((tab) => {
@@ -1054,14 +1123,23 @@ function renderArtifactList() {
       (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>
+        <div class="artifact-row" data-selected="${item.id === selectedArtifactId}" data-read="${read}">
+          <button class="artifact-row-main" type="button" data-artifact-id="${escapeHtml(item.id)}">
+            <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>
+          <button
+            class="artifact-menu-button"
+            type="button"
+            data-artifact-download-id="${escapeHtml(item.id)}"
+            aria-label="${escapeHtml(t("artifactDownloadLabel"))}"
+            title="${escapeHtml(t("artifactDownloadLabel"))}"
+          >...</button>
+        </div>
       `;
       }
     )
@@ -1078,7 +1156,8 @@ function resetArtifactViewer() {
 function renderArtifactShell() {
   renderArtifactBadge();
   renderArtifactList();
-  if (!selectedArtifactId || !artifactItems.some((item) => item.id === selectedArtifactId)) {
+  const selected = artifactItems.find((item) => item.id === selectedArtifactId);
+  if (!selected || !artifactVisibleInCurrentTab(selected)) {
     resetArtifactViewer();
   }
 }
@@ -1111,6 +1190,79 @@ function renderArtifactContent(content) {
   `;
 }
 
+function artifactDownloadName(item, content) {
+  const sourceName = content.path || item?.path || content.title || item?.title || `artifact-${content.id || "download"}`;
+  const fallbackExt =
+    content.mime === "application/pdf" || content.kind === "pdf"
+      ? ".pdf"
+      : content.mime?.startsWith("image/png")
+        ? ".png"
+        : content.mime?.startsWith("image/svg")
+          ? ".svg"
+          : content.kind === "json"
+            ? ".json"
+            : content.kind === "diff"
+              ? ".diff"
+              : content.kind === "markdown"
+                ? ".md"
+                : ".txt";
+  const base = sourceName
+    .split("/")
+    .filter(Boolean)
+    .pop()
+    ?.replace(/[^A-Za-z0-9._-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+  const name = base || `artifact-${content.id || Date.now()}`;
+  return /\.[A-Za-z0-9]{1,8}$/.test(name) ? name : `${name}${fallbackExt}`;
+}
+
+function blobFromDataUrl(dataUrl) {
+  const [meta = "", payload = ""] = String(dataUrl || "").split(",", 2);
+  const mime = meta.match(/^data:([^;,]+)/)?.[1] || "application/octet-stream";
+  if (meta.includes(";base64")) {
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
+    return new Blob([bytes], { type: mime });
+  }
+  return new Blob([decodeURIComponent(payload)], { type: mime });
+}
+
+async function downloadArtifact(artifactId) {
+  if (!currentSessionId || !artifactId) return;
+  const item = artifactItems.find((candidate) => candidate.id === artifactId);
+  artifactStatusEl.textContent = t("artifactDownloadPreparing");
+
+  try {
+    const response = await fetch(
+      `/api/sessions/${encodeURIComponent(currentSessionId)}/artifacts/${encodeURIComponent(artifactId)}`
+    );
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(data.error || t("artifactDownloadFailed"));
+
+    const blob = data.dataUrl
+      ? blobFromDataUrl(data.dataUrl)
+      : new Blob([typeof data.text === "string" ? data.text : JSON.stringify(data, null, 2)], {
+          type: data.mime || "text/plain;charset=utf-8",
+        });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = artifactDownloadName(item, data);
+    document.body.append(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+
+    markArtifactRead(artifactId);
+    renderArtifactBadge();
+    renderArtifactList();
+    artifactStatusEl.textContent = t("artifactDownloadReady");
+  } catch (error) {
+    artifactStatusEl.textContent = error instanceof Error ? error.message : t("artifactDownloadFailed");
+  }
+}
+
 async function refreshArtifacts({ loadSelected = false } = {}) {
   if (!currentSessionId) {
     artifactItems = [];
@@ -1125,9 +1277,27 @@ async function refreshArtifacts({ loadSelected = false } = {}) {
   const data = await response.json();
   artifactItems = data.items || [];
   artifactUnreadCount = computeUnreadArtifactCount();
+
+  if (loadSelected) {
+    const backendSelected = artifactItems.find((item) => item.id === data.selectedItemId);
+    const pdfCandidate = artifactItems.find((item) => item.id === selectedArtifactId && isPdfArtifact(item))
+      || (backendSelected && isPdfArtifact(backendSelected) ? backendSelected : null)
+      || artifactItems.find(isPdfArtifact);
+    if (pdfCandidate) {
+      currentArtifactTab = "pdf";
+      selectedArtifactId = pdfCandidate.id;
+    }
+  }
+
   if (!selectedArtifactId || !artifactItems.some((item) => item.id === selectedArtifactId)) {
     selectedArtifactId = data.selectedItemId || artifactItems[0]?.id || "";
   }
+
+  const visiblePreferred = preferredArtifactForCurrentTab(data.selectedItemId);
+  if (visiblePreferred) {
+    selectedArtifactId = visiblePreferred.id;
+  }
+
   renderArtifactShell();
   if (loadSelected && selectedArtifactId) await selectArtifact(selectedArtifactId, { persist: false });
 }
@@ -1466,10 +1636,26 @@ artifactTabsEl.addEventListener("click", (event) => {
   const tab = event.target.closest("[data-artifact-tab]");
   if (!tab) return;
   currentArtifactTab = tab.dataset.artifactTab || "canvas";
+  const preferred = preferredArtifactForCurrentTab();
+  if (preferred) selectedArtifactId = preferred.id;
   renderArtifactShell();
+  if (selectedArtifactId) {
+    selectArtifact(selectedArtifactId, { persist: false }).catch((error) => {
+      artifactStatusEl.textContent = String(error);
+    });
+  }
 });
 
 artifactListEl.addEventListener("click", (event) => {
+  const downloadButton = event.target.closest("[data-artifact-download-id]");
+  if (downloadButton) {
+    event.stopPropagation();
+    downloadArtifact(downloadButton.dataset.artifactDownloadId || "").catch((error) => {
+      artifactStatusEl.textContent = String(error);
+    });
+    return;
+  }
+
   const row = event.target.closest("[data-artifact-id]");
   if (!row) return;
   selectArtifact(row.dataset.artifactId || "").catch((error) => {
@@ -1532,6 +1718,30 @@ sandboxModeField.addEventListener("change", updatePackageWarning);
 packageInstallPolicyField.addEventListener("change", updatePackageWarning);
 allowWrapperToolsField.addEventListener("change", () => renderWrapperStatus());
 preferredWrapperField.addEventListener("change", () => renderWrapperStatus());
+taskProfileField?.addEventListener("change", schedulePreferenceSave);
+
+saveApiKeyButton?.addEventListener("click", async () => {
+  const provider = setupProviderField.value || "deepseek";
+  const apiKey = setupApiKeyField.value.trim();
+  if (!apiKey) {
+    setupStatusEl.textContent = t("setupKeyLabel");
+    return;
+  }
+  setupStatusEl.textContent = t("sendingStatus");
+  const response = await fetch(`/api/keys/${encodeURIComponent(provider)}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ apiKey }),
+  });
+  const data = await response.json().catch(() => ({}));
+  setupApiKeyField.value = "";
+  if (!response.ok) {
+    setupStatusEl.textContent = data.error || t("keySaveFailed");
+    return;
+  }
+  setupStatusEl.textContent = t("keySavedStatus");
+  renderKeyStatus(data.keyStatus);
+});
 
 form.addEventListener("input", schedulePreferenceSave);
 form.addEventListener("change", schedulePreferenceSave);
@@ -1644,6 +1854,8 @@ async function loadConfig() {
   const data = await response.json();
   const prefs = data.preferences || {};
   routingPresets = data.routing?.presets || {};
+  taskProfiles = data.taskProfiles || [];
+  projectInfo = data.project || null;
   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;
@@ -1653,9 +1865,10 @@ async function loadConfig() {
   routingModeField.value = prefs.routingMode || "smart";
   providerField.value = prefs.provider || "deepseek";
   modelField.value = prefs.model || defaults[providerField.value] || "deepseek-v4-flash";
+  renderTaskProfiles(prefs.taskProfile || "auto");
   document.querySelector("#startUrl").value = prefs.startUrl || "";
   document.querySelector("#allowedDomains").value = prefs.allowedDomains || "";
-  document.querySelector("#commandCwd").value = prefs.commandCwd || "/home/lachlan/ProjectsLFS/Agent";
+  document.querySelector("#commandCwd").value = prefs.commandCwd || data.project?.root || "";
   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-workspace" : "host");
@@ -1669,6 +1882,7 @@ async function loadConfig() {
   document.querySelector("#allowDestructive").checked = prefs.allowDestructive ?? false;
 
   renderKeyStatus(data.keyStatus);
+  renderProjectStatus(data.project);
   renderWrapperStatus(data.wrappers || []);
   renderWorkspacePanel(data.workspace, []);
   await refreshWorkspaceChanges();

package/public/index.html

@@ -36,6 +36,39 @@
         <p class="subtle" data-i18n="intro">
           Browser agent with provider selection, resumable runs, persisted settings, and an optional guarded shell tool with Docker sandbox support.
         </p>
+        <section class="project-card">
+          <strong data-i18n="projectStatusTitle">Project folder</strong>
+          <p id="project-status" class="subtle">Loading project context...</p>
+        </section>
+
+        <section id="setup-card" class="setup-card" hidden>
+          <div>
+            <strong data-i18n="setupTitle">Provider setup</strong>
+            <p class="subtle" data-i18n="setupHelp">
+              DeepSeek/OpenAI keys are missing. Use mock mode, export an env var, or save a project-local DeepSeek key.
+            </p>
+            <p class="subtle" data-i18n="setupEnvHelp">
+              Env vars: DEEPSEEK_API_KEY, OPENAI_API_KEY, or LLM_API_KEY. Mock mode remains available for local tests.
+            </p>
+          </div>
+          <div class="grid">
+            <label>
+              <span data-i18n="setupProviderLabel">Provider</span>
+              <select id="setup-provider">
+                <option value="deepseek">DeepSeek</option>
+                <option value="openai">OpenAI</option>
+              </select>
+            </label>
+            <label>
+              <span data-i18n="setupKeyLabel">API key</span>
+              <input id="setup-api-key" type="password" autocomplete="off" placeholder="Stored in .aginti/.env" />
+            </label>
+          </div>
+          <div class="actions">
+            <button id="save-api-key" type="button" class="secondary" data-i18n="saveKeyButton">Save local key</button>
+            <span id="setup-status" class="subtle"></span>
+          </div>
+        </section>
 
         <form id="run-form">
           <label>
@@ -67,6 +100,13 @@
           <p id="routing-hint" class="subtle route-hint"></p>
           <p id="model-route-status" class="subtle route-hint"></p>
 
+          <label>
+            <span data-i18n="taskProfileLabel">Task profile</span>
+            <select id="taskProfile" name="taskProfile">
+              <option value="auto">Auto</option>
+            </select>
+          </label>
+
           <label>
             <span data-i18n="goalLabel">Goal</span>
             <textarea
@@ -308,6 +348,7 @@
         </div>
         <div class="artifact-tabs" role="tablist" aria-label="Artifact tunnel tabs">
           <button id="artifact-tab-canvas" class="artifact-tab" type="button" data-artifact-tab="canvas" data-selected="true" data-i18n="artifactCanvasTab">Canvas</button>
+          <button id="artifact-tab-pdf" class="artifact-tab" type="button" data-artifact-tab="pdf" data-i18n="artifactPdfTab">PDF Reader</button>
           <button id="artifact-tab-explorer" class="artifact-tab" type="button" data-artifact-tab="explorer" data-i18n="artifactExplorerTab">Explorer</button>
           <button id="artifact-tab-notifications" class="artifact-tab" type="button" data-artifact-tab="notifications" data-i18n="artifactNotificationsTab">Notifications</button>
         </div>