@lazyingart/agintiflow 0.20.2 → 0.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazyingart/agintiflow",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "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",

package/public/app.js

@@ -1136,7 +1136,9 @@ function renderModelOptions() {
     modelRoutePillEl.textContent =
       mode === "manual"
         ? `${provider} · ${primary}`
-        : `${mode} · route ${routeLabel} · main ${mainLabel}`;
+        : `${mode} · ${routeLabel} -> ${mainLabel}`;
+    modelRoutePillEl.title =
+      mode === "manual" ? `Manual route: ${provider}/${primary}` : `Route: ${routeLabel}. Main: ${mainLabel}.`;
   }
   if (!modelCatalogEl) return;
   if (options.length === 0) {

package/public/index.html

@@ -114,14 +114,7 @@
 
           <p id="routing-hint" class="subtle route-hint"></p>
           <p id="model-route-status" class="subtle route-hint"></p>
-          <section class="model-catalog-panel" aria-label="Model catalog">
-            <div class="model-catalog-head">
-              <span>Route</span>
-              <strong id="model-route-pill">DeepSeek flash/pro</strong>
-            </div>
-            <div id="model-role-grid" class="model-role-grid"></div>
-            <div id="model-catalog" class="model-catalog"></div>
-          </section>
+          <p id="model-route-pill" class="route-pill">DeepSeek flash/pro</p>
 
           <label>
             <span data-i18n="taskProfileLabel">Task profile</span>
@@ -381,6 +374,15 @@
           </div>
         </section>
 
+        <section class="settings-section model-catalog-panel" aria-label="Model catalog">
+          <div class="model-catalog-head">
+            <span>Catalog</span>
+            <strong>Provider models</strong>
+          </div>
+          <div id="model-role-grid" class="model-role-grid"></div>
+          <div id="model-catalog" class="model-catalog"></div>
+        </section>
+
         <section class="settings-section">
           <div class="settings-section-head">
             <strong>Browser and target</strong>

package/public/styles.css

@@ -139,6 +139,22 @@ h1 {
     #fffdfa;
 }
 
+.route-pill {
+  max-width: 100%;
+  overflow: hidden;
+  margin: -2px 0 0;
+  padding: 8px 10px;
+  border: 1px solid rgba(15, 118, 110, 0.16);
+  border-radius: 999px;
+  background: rgba(204, 251, 241, 0.42);
+  color: #0f766e;
+  font-size: 0.78rem;
+  font-weight: 800;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .model-catalog-head {
   display: flex;
   align-items: center;
@@ -168,7 +184,7 @@ h1 {
 .model-role-grid {
   display: grid;
   gap: 8px;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 }
 
 .model-role-card {
@@ -244,7 +260,7 @@ h1 {
 .model-chip {
   display: grid;
   gap: 2px;
-  flex: 1 1 148px;
+  flex: 1 1 180px;
   min-width: 0;
   padding: 9px 11px;
   border: 1px solid rgba(15, 118, 110, 0.2);