@lazyingart/agintiflow 0.20.14 → 0.20.16

package/README.md

@@ -21,6 +21,10 @@ AgInTiFlow is AgInTi's web-first agent platform for controlled website automatio
 
 It is designed for workflows where an AI agent should act, but every tool, log, and session state should remain inspectable.
 
+<p align="center">
+  <img src="./demos/agintiflow-cli-launch.jpg" alt="AgInTiFlow interactive CLI launch screen with colorful terminal banner, Docker workspace status, and chat input panel" width="960" />
+</p>
+
 ## Product Snapshot
 
 | Area | Direction |

package/demos/README.md

@@ -0,0 +1,6 @@
+# AgInTiFlow Demos
+
+This folder stores shareable screenshots and visual demos used by the repository README.
+
+- `agintiflow-cli-launch.png`: interactive CLI launch screen with the AgInTi Flow terminal banner, Docker workspace status, and input panel.
+- `agintiflow-cli-launch.jpg`: optimized README/web preview derived from the same screenshot.

package/docs/model-selection.md

@@ -46,7 +46,7 @@ Interactive commands:
 /auxiliary model grsai/nano-banana-2
 ```
 
-In the interactive CLI, `/provider`, `/route`, `/model`, `/spare`, and `/auxiliary model` without arguments open selectors. Use Up/Down/Left/Right to move through choices, Enter to confirm, and Esc to cancel. Slash-command hints use the same arrow selection behavior: type a prefix such as `/mo`, use arrows to choose `/model` or `/models`, then press Enter or Tab.
+In the interactive CLI, `/provider`, `/route`, `/model`, `/spare`, and `/auxiliary model` without arguments open selectors. Use Up/Down/Left/Right to move through choices and Enter to confirm. Esc cancels at the top level; inside multi-level selectors it goes back one level. Slash-command hints use the same arrow selection behavior: type a prefix such as `/mo`, use arrows to choose `/model` or `/models`, then press Enter or Tab.
 
 `/route`, `/model`, and `/spare` intentionally share the same text-model selector so users do not need to learn three different catalogs. The selector is hierarchical:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.20.14",
+  "version": "0.20.16",
   "type": "module",
   "description": "AgInTiFlow is a web-first coding agent and CLI with DeepSeek routing, sandboxed tools, model providers, canvas artifacts, and optional wrappers.",
   "license": "Apache-2.0",
@@ -37,6 +37,7 @@
     "bin/",
     "docs/",
     "docker/",
+    "demos/agintiflow-cli-launch.jpg",
     "i18n/",
     "logos/banner-opaque.png",
     "logos/logo.png",

package/public/index.html

@@ -36,10 +36,13 @@
         <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>
+        <details class="project-card">
+          <summary>
+            <strong data-i18n="projectStatusTitle">Project folder</strong>
+            <span class="project-card-toggle" aria-hidden="true"></span>
+          </summary>
           <p id="project-status" class="subtle">Loading project context...</p>
-        </section>
+        </details>
 
         <section id="setup-card" class="setup-card" hidden>
           <div>

package/public/styles.css

@@ -290,9 +290,7 @@ h1 {
 
 .project-card,
 .setup-card {
-  display: grid;
   min-width: 0;
-  gap: 10px;
   margin: 14px 0;
   padding: 13px;
   border: 1px solid rgba(15, 118, 110, 0.18);
@@ -300,11 +298,73 @@ h1 {
   background: linear-gradient(135deg, rgba(204, 251, 241, 0.44), rgba(255, 247, 237, 0.9));
 }
 
+.setup-card {
+  display: grid;
+  gap: 10px;
+}
+
+.project-card {
+  display: block;
+}
+
+.project-card summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+  list-style: none;
+  cursor: pointer;
+}
+
+.project-card summary::-webkit-details-marker {
+  display: none;
+}
+
+.project-card summary strong {
+  min-width: 0;
+}
+
+.project-card summary:focus-visible {
+  border-radius: 10px;
+  outline: 3px solid rgba(15, 118, 110, 0.22);
+  outline-offset: 4px;
+}
+
+.project-card-toggle {
+  display: inline-grid;
+  width: 30px;
+  height: 30px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid rgba(15, 118, 110, 0.22);
+  border-radius: 999px;
+  background: rgba(255, 253, 250, 0.78);
+  color: var(--accent);
+  font-size: 0.88rem;
+  font-weight: 900;
+}
+
+.project-card-toggle::before {
+  content: "⌄";
+  transform: rotate(-90deg);
+  transition: transform 160ms ease;
+}
+
+.project-card[open] .project-card-toggle::before {
+  transform: rotate(0deg);
+}
+
 .project-card p,
 .setup-card p {
   overflow-wrap: anywhere;
 }
 
+.project-card p {
+  margin: 10px 0 0;
+  line-height: 1.55;
+}
+
 .setup-card .key-links {
   display: flex;
   flex-wrap: wrap;

package/references/model-routing-provider-design.md

@@ -55,6 +55,8 @@ Interactive equivalents:
 
 `/route`, `/model`, and `/spare` share a single text-model selector. The selector is grouped as DeepSeek, Venice Uncensored, Venice GPT/Claude/Gemma/Qwen, OpenAI, Qwen, and Mock so the user sees the same union of route/main/spare-capable models in every role.
 
+Interactive selectors are hierarchical. Enter moves forward or confirms. Esc cancels only at the first level; at model/reasoning levels it returns to the previous selector instead of dropping the whole flow.
+
 `/venice` opens a route/main selector for Venice text models. The selector includes `venice/venice-uncensored-1-2` (Venice 1.2), `venice/venice-uncensored` (Venice 1.1), `venice/gemma-4-uncensored` (Gemma 4), and a Disable Venice option. In non-interactive shells, `/venice` keeps script compatibility by selecting `venice/venice-uncensored-1-2` for both roles. `/venice 1.2 gemma` sets route to Venice 1.2 and main to Gemma 4; `/venice off` or the Disable Venice selector option restores `deepseek/deepseek-v4-flash` for route and `deepseek/deepseek-v4-pro` for main.
 
 The web UI should expose model names as dropdowns, not free-text fields. The left panel should stay focused on common daily controls, while model-role editing and less-used switches live in an Advanced settings modal. The terminal-like capability panels belong after the runtime log so the left control panel remains short.

package/src/interactive-cli.js

@@ -2079,7 +2079,13 @@ function renderSelector({ title, subtitle, options, selectedIndex, lineCount = 0
   return rows.length;
 }
 
-function selectModelChoice({ title, subtitle, options, initialIndex = 0 }) {
+const SELECTOR_BACK = Symbol("selector-back");
+
+function isSelectorBack(value) {
+  return value === SELECTOR_BACK;
+}
+
+function selectModelChoice({ title, subtitle, options, initialIndex = 0, escapeValue = null }) {
   if (!input.isTTY || !output.isTTY || typeof input.setRawMode !== "function") return Promise.resolve(null);
   return new Promise((resolve) => {
     emitKeypressEvents(input);
@@ -2107,7 +2113,7 @@ function selectModelChoice({ title, subtitle, options, initialIndex = 0 }) {
         return;
       }
       if (key.name === "escape") {
-        finish(null);
+        finish(escapeValue);
         return;
       }
       if (key.name === "up" || key.name === "left") {
@@ -2157,73 +2163,95 @@ async function pickModelRole(role, state) {
       ? modelRoleChoices("auxiliary").find((item) => item.provider === currentProvider && item.model === currentModel)
       : modelRoleChoices(role).find((item) => item.provider === currentProvider && item.model === currentModel);
   const currentGroup = currentModelEntry?.group || currentProvider;
-  const group = await selectModelChoice({
-    title:
-      role === "route"
-        ? "Select route model family"
-        : role === "spare"
-          ? "Select spare model family"
-          : role === "auxiliary"
-            ? "Select auxiliary provider"
-            : "Select main model family",
-    subtitle: "First choose a provider family. Up/Down/Left/Right selects, Enter confirms, Esc cancels.",
-    options: groupOptions,
-    initialIndex: Math.max(
-      groupOptions.findIndex((item) => item.groupId === currentGroup),
-      0
-    ),
-  });
-  if (!group) return false;
-
-  const options = role === "auxiliary" ? auxiliaryModelRoleChoices(group.groupId) : textModelRoleChoices(group.groupId);
-  const initialIndex = Math.max(
-    options.findIndex((item) => item.provider === currentProvider && item.model === currentModel),
+  let selected = null;
+  let selectedReasoning = "";
+  let initialGroupIndex = Math.max(
+    groupOptions.findIndex((item) => item.groupId === currentGroup),
     0
   );
-  const selected = await selectModelChoice({
-    title:
-      role === "route"
-        ? `Select route model: ${group.label}`
-        : role === "spare"
-          ? `Select spare model: ${group.label}`
-          : role === "auxiliary"
-            ? `Select auxiliary model: ${group.label}`
-            : `Select main model: ${group.label}`,
-    subtitle:
-      role === "auxiliary"
-        ? "Choose the image/edit auxiliary model. Enter confirms, Esc cancels."
-        : "Choose the text model. OpenAI choices ask for reasoning next.",
-    options,
-    initialIndex,
-  });
-  if (!selected) return false;
 
-  let selectedReasoning = selected.reasoningDefault || "";
-  if (Array.isArray(selected.reasoningOptions) && selected.reasoningOptions.length > 0) {
-    const currentReasoning =
-      role === "route"
-        ? state.routeReasoning || selectedReasoning || "medium"
-        : role === "spare"
-          ? state.spareReasoning || selectedReasoning || "medium"
-          : state.mainReasoning || selectedReasoning || "medium";
-    const reasoningOptions = selected.reasoningOptions.map((level) => ({
-      action: "reasoning",
-      label: level,
-      value: level,
-      description: `${selected.label} with ${level} reasoning`,
-    }));
-    const reasoning = await selectModelChoice({
-      title: `Select reasoning: ${selected.label}`,
-      subtitle: "Up/Down selects reasoning effort. Enter confirms, Esc cancels.",
-      options: reasoningOptions,
-      initialIndex: Math.max(
-        reasoningOptions.findIndex((item) => item.value === currentReasoning),
-        reasoningOptions.findIndex((item) => item.value === selectedReasoning),
-        0
-      ),
+  while (!selected) {
+    const group = await selectModelChoice({
+      title:
+        role === "route"
+          ? "Select route model family"
+          : role === "spare"
+            ? "Select spare model family"
+            : role === "auxiliary"
+              ? "Select auxiliary provider"
+              : "Select main model family",
+      subtitle: "First choose a provider family. Up/Down/Left/Right selects, Enter confirms, Esc cancels.",
+      options: groupOptions,
+      initialIndex: initialGroupIndex,
     });
-    if (!reasoning) return false;
-    selectedReasoning = reasoning.value;
+    if (!group) return false;
+    initialGroupIndex = Math.max(
+      groupOptions.findIndex((item) => item.groupId === group.groupId),
+      0
+    );
+
+    const options = role === "auxiliary" ? auxiliaryModelRoleChoices(group.groupId) : textModelRoleChoices(group.groupId);
+    let initialModelIndex = Math.max(
+      options.findIndex((item) => item.provider === currentProvider && item.model === currentModel),
+      0
+    );
+
+    while (!selected) {
+      const modelSelection = await selectModelChoice({
+        title:
+          role === "route"
+            ? `Select route model: ${group.label}`
+            : role === "spare"
+              ? `Select spare model: ${group.label}`
+              : role === "auxiliary"
+                ? `Select auxiliary model: ${group.label}`
+                : `Select main model: ${group.label}`,
+        subtitle:
+          role === "auxiliary"
+            ? "Choose the image/edit auxiliary model. Enter confirms, Esc goes back."
+            : "Choose the text model. OpenAI choices ask for reasoning next. Esc goes back.",
+        options,
+        initialIndex: initialModelIndex,
+        escapeValue: SELECTOR_BACK,
+      });
+      if (isSelectorBack(modelSelection)) break;
+      if (!modelSelection) return false;
+      initialModelIndex = Math.max(
+        options.findIndex((item) => item.provider === modelSelection.provider && item.model === modelSelection.model),
+        0
+      );
+
+      selectedReasoning = modelSelection.reasoningDefault || "";
+      if (Array.isArray(modelSelection.reasoningOptions) && modelSelection.reasoningOptions.length > 0) {
+        const currentReasoning =
+          role === "route"
+            ? state.routeReasoning || selectedReasoning || "medium"
+            : role === "spare"
+              ? state.spareReasoning || selectedReasoning || "medium"
+              : state.mainReasoning || selectedReasoning || "medium";
+        const reasoningOptions = modelSelection.reasoningOptions.map((level) => ({
+          action: "reasoning",
+          label: level,
+          value: level,
+          description: `${modelSelection.label} with ${level} reasoning`,
+        }));
+        const reasoning = await selectModelChoice({
+          title: `Select reasoning: ${modelSelection.label}`,
+          subtitle: "Up/Down selects reasoning effort. Enter confirms, Esc goes back.",
+          options: reasoningOptions,
+          initialIndex: Math.max(
+            reasoningOptions.findIndex((item) => item.value === currentReasoning),
+            reasoningOptions.findIndex((item) => item.value === selectedReasoning),
+            0
+          ),
+          escapeValue: SELECTOR_BACK,
+        });
+        if (isSelectorBack(reasoning)) continue;
+        if (!reasoning) return false;
+        selectedReasoning = reasoning.value;
+      }
+      selected = modelSelection;
+    }
   }
 
   state.routingMode = "smart";
@@ -2255,44 +2283,52 @@ async function pickModelRole(role, state) {
 
 async function pickVeniceRouteAndMain(state) {
   const options = veniceTextModelChoices();
-  const routeIndex = Math.max(
+  let routeIndex = Math.max(
     options.findIndex((item) => item.provider === state.routeProvider && item.model === state.routeModel),
     0
   );
-  const route = await selectModelChoice({
-    title: "Select Venice route model",
-    subtitle: "Route handles planning and short turns. Up/Down selects, Enter confirms, Esc cancels.",
-    options,
-    initialIndex: routeIndex,
-  });
-  if (!route) return false;
-  if (route.action === "disable") {
-    useDeepSeekDefaults(state);
-    printSystemLine("venice=off routing=smart route=deepseek/deepseek-v4-flash main=deepseek/deepseek-v4-pro");
-    return true;
-  }
+  while (true) {
+    const route = await selectModelChoice({
+      title: "Select Venice route model",
+      subtitle: "Route handles planning and short turns. Up/Down selects, Enter confirms, Esc cancels.",
+      options,
+      initialIndex: routeIndex,
+    });
+    if (!route) return false;
+    routeIndex = Math.max(
+      options.findIndex((item) => item.provider === route.provider && item.model === route.model),
+      0
+    );
+    if (route.action === "disable") {
+      useDeepSeekDefaults(state);
+      printSystemLine("venice=off routing=smart route=deepseek/deepseek-v4-flash main=deepseek/deepseek-v4-pro");
+      return true;
+    }
 
-  const mainIndex = Math.max(
-    options.findIndex((item) => item.action !== "disable" && item.provider === state.mainProvider && item.model === state.mainModel),
-    options.findIndex((item) => item.action !== "disable" && item.model === route.model),
-    0
-  );
-  const main = await selectModelChoice({
-    title: "Select Venice main model",
-    subtitle: "Main handles complex work. Up/Down selects, Enter confirms, Esc cancels.",
-    options,
-    initialIndex: mainIndex,
-  });
-  if (!main) return false;
-  if (main.action === "disable") {
-    useDeepSeekDefaults(state);
-    printSystemLine("venice=off routing=smart route=deepseek/deepseek-v4-flash main=deepseek/deepseek-v4-pro");
+    const mainIndex = Math.max(
+      options.findIndex((item) => item.action !== "disable" && item.provider === state.mainProvider && item.model === state.mainModel),
+      options.findIndex((item) => item.action !== "disable" && item.model === route.model),
+      0
+    );
+    const main = await selectModelChoice({
+      title: "Select Venice main model",
+      subtitle: "Main handles complex work. Up/Down selects, Enter confirms, Esc goes back.",
+      options,
+      initialIndex: mainIndex,
+      escapeValue: SELECTOR_BACK,
+    });
+    if (isSelectorBack(main)) continue;
+    if (!main) return false;
+    if (main.action === "disable") {
+      useDeepSeekDefaults(state);
+      printSystemLine("venice=off routing=smart route=deepseek/deepseek-v4-flash main=deepseek/deepseek-v4-pro");
+      return true;
+    }
+
+    useVeniceModels(state, route.model, main.model);
+    printSystemLine(`venice=on routing=smart route=venice/${state.routeModel} main=venice/${state.mainModel}`);
     return true;
   }
-
-  useVeniceModels(state, route.model, main.model);
-  printSystemLine(`venice=on routing=smart route=venice/${state.routeModel} main=venice/${state.mainModel}`);
-  return true;
 }
 
 async function pickProvider(state) {