@sean.holung/minicode 0.3.5 → 0.3.6

package/dist/src/web/index.html

@@ -61,7 +61,18 @@
           <div class="config-overlay-content">
             <h2>Agent not connected</h2>
             <p id="config-missing" class="config-missing hidden"></p>
-            <p>minicode needs a model provider to run. Configure one of the following:</p>
+            <div id="config-overlay-spotlight" class="config-overlay-spotlight">
+              <div class="config-overlay-spotlight-copy">
+                <span class="config-overlay-spotlight-badge">Fastest way to start</span>
+                <strong>Try minicode for free with OpenRouter</strong>
+                <p>Create a free OpenRouter account, connect it to this <code>minicode serve</code> session, and use free models without editing config files first.</p>
+              </div>
+              <div class="config-overlay-actions config-overlay-spotlight-actions">
+                <button id="connect-openrouter-btn" class="dropdown-action" type="button" data-openrouter-connect="true">Connect OpenRouter</button>
+                <span class="config-overlay-action-note">Session-only. Nothing is written to disk.</span>
+              </div>
+            </div>
+            <p id="config-overlay-intro">minicode needs a model provider to run. Configure one of the following:</p>
             <div class="config-overlay-options">
               <div class="config-overlay-option">
                 <strong>Local model (LM Studio, Ollama, etc.)</strong>
@@ -79,13 +90,14 @@ MODEL=claude-sonnet-4-20250514</pre>
               </div>
               <div class="config-overlay-option">
                 <strong>OpenRouter / remote OpenAI-compatible</strong>
-                <p>Set in <code>~/.minicode/.env</code> or your shell environment:</p>
+                <p>Set it manually in <code>~/.minicode/.env</code> or your shell environment:</p>
                 <pre>MODEL_PROVIDER=openai-compatible
 OPENAI_BASE_URL=https://openrouter.ai/api/v1
 OPENROUTER_API_KEY=sk-or-...
 MODEL=your-model-name</pre>
               </div>
             </div>
+            <p id="config-connect-status" class="config-connect-status hidden"></p>
             <p class="config-overlay-footer">After updating your config, restart <code>minicode serve</code>.</p>
           </div>
         </div>
@@ -101,7 +113,7 @@ MODEL=your-model-name</pre>
       <div id="pane-divider"></div>
       <div id="graph-pane">
         <div id="graph-toolbar">
-          <input id="graph-search" type="text" placeholder="Search symbols..." autocomplete="off" />
+          <input id="graph-search" type="text" placeholder="Search symbols or files..." autocomplete="off" />
           <button id="graph-analyze" class="header-btn">Analyze</button>
           <button id="graph-fit" class="header-btn">Fit</button>
           <button id="graph-relayout" class="header-btn">Re-layout</button>
@@ -144,26 +156,33 @@ MODEL=your-model-name</pre>
       <div class="modal-header">
         <div>
           <h2 id="settings-title">Settings</h2>
-          <p id="settings-subtitle" class="modal-subtitle">Persist non-secret global defaults for future sessions.</p>
+          <p id="settings-subtitle" class="modal-subtitle">Persist non-secret global defaults in <code>~/.minicode/.env</code> for future sessions.</p>
         </div>
         <button id="settings-close" class="header-btn" type="button">Close</button>
       </div>
 
       <div class="settings-toolbar">
         <div class="settings-path-group">
-          <span class="settings-path-label">Config file</span>
+          <span class="settings-path-label">Env file</span>
           <code id="settings-path" class="settings-path"></code>
         </div>
       </div>
 
       <div id="settings-banner" class="settings-banner hidden" role="status" aria-live="polite"></div>
+      <div id="settings-openrouter-session" class="settings-session-banner hidden" role="status" aria-live="polite">
+        <div class="settings-session-copy">
+          <div class="settings-session-title">OpenRouter is connected for this serve session</div>
+          <div id="settings-openrouter-session-meta" class="settings-session-meta"></div>
+        </div>
+        <button id="disconnect-openrouter-btn" class="header-btn" type="button">Disconnect OpenRouter</button>
+      </div>
       <div id="settings-list" class="settings-list">
         <div class="dropdown-empty">Loading settings...</div>
       </div>
 
       <div class="modal-footer">
         <p class="settings-footnote">
-          Secrets such as API keys stay env-only for now. Saved changes update <code>~/.minicode/agent.config.json</code> and apply to new runs after restart.
+          Secrets such as API keys stay env-only for now. Saved changes update <code>~/.minicode/.env</code> and apply to new runs after restart.
         </p>
         <div class="settings-actions">
           <button id="settings-reset" class="header-btn" type="button">Reset changes</button>
@@ -173,6 +192,49 @@ MODEL=your-model-name</pre>
     </section>
   </div>
 
+  <div id="openrouter-connect-modal" class="modal hidden" aria-hidden="true">
+    <div id="openrouter-connect-backdrop" class="modal-backdrop"></div>
+    <section class="modal-panel modal-panel-compact" role="dialog" aria-modal="true" aria-labelledby="openrouter-connect-title">
+      <div class="modal-header">
+        <div>
+          <h2 id="openrouter-connect-title">Connect OpenRouter</h2>
+          <p class="modal-subtitle">Authorize this <code>minicode serve</code> session and optionally save the resulting setup for future runs.</p>
+        </div>
+        <button id="openrouter-connect-close" class="header-btn" type="button">Close</button>
+      </div>
+
+      <div class="openrouter-connect-body">
+        <p class="openrouter-connect-lead">
+          minicode will redirect you to OpenRouter so you can sign in and approve access. By default, the resulting API key is used only for this live serve session.
+        </p>
+
+        <div class="openrouter-connect-note">
+          <strong>Optional persistence</strong>
+          <p>If you opt in below, minicode will update <code>~/.minicode/.env</code> after sign-in so future runs can reuse this OpenRouter setup.</p>
+        </div>
+
+        <label class="openrouter-persist-toggle" for="openrouter-persist-checkbox">
+          <input id="openrouter-persist-checkbox" type="checkbox" />
+          <span>Save the OpenRouter credentials and provider defaults to <code>~/.minicode/.env</code> after sign-in.</span>
+        </label>
+
+        <p class="openrouter-connect-help">
+          When enabled, minicode will store <code>OPENROUTER_API_KEY</code> and set <code>MODEL_PROVIDER</code> plus <code>OPENAI_BASE_URL</code> for OpenRouter. Nothing is written unless you check the box.
+        </p>
+      </div>
+
+      <div class="modal-footer">
+        <p class="settings-footnote">
+          OpenRouter handles the sign-in. minicode only receives the API key after you approve access.
+        </p>
+        <div class="settings-actions">
+          <button id="openrouter-connect-cancel" class="header-btn" type="button">Cancel</button>
+          <button id="openrouter-connect-continue" class="dropdown-action" type="button">Continue</button>
+        </div>
+      </div>
+    </section>
+  </div>
+
   <script type="module" src="app.js"></script>
 </body>
 </html>

package/dist/src/web/style.css

@@ -335,7 +335,7 @@ h1 {
   inset: 0;
   z-index: 50;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   background: rgba(26, 27, 38, 0.92);
   backdrop-filter: blur(4px);
@@ -348,6 +348,7 @@ h1 {
 .config-overlay-content {
   max-width: 520px;
   width: 100%;
+  margin: 0 auto;
 }
 
 .config-overlay-content h2 {
@@ -362,6 +363,52 @@ h1 {
   margin-bottom: 16px;
 }
 
+.config-overlay-spotlight {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  border: 1px solid rgba(122, 162, 247, 0.35);
+  background:
+    linear-gradient(135deg, rgba(122, 162, 247, 0.18), rgba(158, 206, 106, 0.08)),
+    var(--bg-surface);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.config-overlay-spotlight-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.config-overlay-spotlight-badge {
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: rgba(122, 162, 247, 0.18);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.config-overlay-spotlight strong {
+  color: var(--text);
+  font-size: 14px;
+}
+
+.config-overlay-spotlight p {
+  margin: 0;
+  color: var(--text);
+  font-size: 12px;
+}
+
+.config-overlay-spotlight-actions {
+  margin-bottom: 0;
+}
+
 .config-missing {
   color: var(--red, #f7768e);
   font-size: 13px;
@@ -408,6 +455,44 @@ h1 {
   word-break: break-all;
 }
 
+.config-overlay-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+
+.config-overlay-action-note {
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+.config-connect-status {
+  font-size: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-top: 14px;
+}
+
+.config-connect-status.info {
+  color: var(--text);
+  background: rgba(122, 162, 247, 0.14);
+  border: 1px solid rgba(122, 162, 247, 0.28);
+}
+
+.config-connect-status.success {
+  color: var(--green);
+  background: rgba(158, 206, 106, 0.12);
+  border: 1px solid rgba(158, 206, 106, 0.28);
+}
+
+.config-connect-status.error {
+  color: var(--red, #f7768e);
+  background: rgba(247, 118, 142, 0.12);
+  border: 1px solid rgba(247, 118, 142, 0.28);
+}
+
 .config-overlay-footer {
   margin-top: 16px;
   color: var(--text-dim);
@@ -773,6 +858,10 @@ footer {
   overflow: hidden;
 }
 
+.modal-panel-compact {
+  width: min(640px, calc(100vw - 32px));
+}
+
 .modal-header,
 .modal-footer,
 .settings-toolbar {
@@ -1009,6 +1098,35 @@ footer {
   gap: 8px;
 }
 
+.settings-session-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  margin: 0 0 14px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(122, 162, 247, 0.24);
+  background: rgba(122, 162, 247, 0.09);
+}
+
+.settings-session-copy {
+  min-width: 0;
+}
+
+.settings-session-title {
+  font-size: 13px;
+  color: var(--text);
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.settings-session-meta {
+  font-size: 12px;
+  color: var(--text-dim);
+  overflow-wrap: anywhere;
+}
+
 .settings-help {
   font-size: 11px;
   color: var(--text-dim);
@@ -1040,6 +1158,65 @@ footer {
   flex-shrink: 0;
 }
 
+.openrouter-connect-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.openrouter-connect-lead {
+  font-size: 13px;
+  color: var(--text);
+}
+
+.openrouter-connect-note {
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid rgba(122, 162, 247, 0.22);
+  background: rgba(122, 162, 247, 0.08);
+}
+
+.openrouter-connect-note strong {
+  display: block;
+  color: var(--text);
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.openrouter-connect-note p,
+.openrouter-connect-help {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.openrouter-persist-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  background: rgba(26, 27, 38, 0.72);
+  cursor: pointer;
+}
+
+.openrouter-persist-toggle input {
+  margin-top: 2px;
+}
+
+.openrouter-persist-toggle span {
+  font-size: 12px;
+  color: var(--text);
+}
+
+@media (max-width: 760px) {
+  .settings-session-banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 .settings-list::-webkit-scrollbar,
 .settings-path::-webkit-scrollbar {
   width: 6px;
@@ -1126,6 +1303,7 @@ main::-webkit-scrollbar-thumb {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 6px 10px;
   cursor: pointer;
   font-size: 12px;
@@ -1136,14 +1314,39 @@ main::-webkit-scrollbar-thumb {
   background: var(--bg-hover);
 }
 
+.search-result-body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
 .search-result-name {
   color: var(--text);
   font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result-subtitle {
+  color: var(--text-dim);
+  font-size: 11px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .search-result-kind {
   font-size: 11px;
   opacity: 0.7;
+  flex-shrink: 0;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.search-result-kind.file {
+  opacity: 0.9;
 }
 
 #cy {
@@ -1799,6 +2002,10 @@ main::-webkit-scrollbar-thumb {
     align-items: stretch;
   }
 
+  .openrouter-persist-toggle {
+    align-items: flex-start;
+  }
+
   .settings-path-group {
     align-items: flex-start;
   }

package/dist/tests/config-api.test.js

@@ -80,7 +80,7 @@ test("GET /api/config returns structured editable settings payload", async () =>
         assert.match(body.config, /workspaceRoot/);
         assert.equal(body.restartRequired, true);
         assert.equal(body.secretsUiSupported, false);
-        assert.equal(body.settings.configPath, path.join(minicodeHome, "agent.config.json"));
+        assert.equal(body.settings.configPath, path.join(minicodeHome, ".env"));
         const maxSteps = body.settings.entries.find((entry) => entry.key === "maxSteps");
         assert.equal(maxSteps?.type, "number");
         assert.equal(maxSteps?.envVar, "MAX_STEPS");
@@ -111,16 +111,16 @@ test("POST /api/config persists global settings and returns updated metadata", a
     const body = await res.json();
     assert.equal(body.ok, true);
     assert.equal(body.scope, "global");
-    assert.equal(body.path, path.join(minicodeHome, "agent.config.json"));
+    assert.equal(body.path, path.join(minicodeHome, ".env"));
     assert.equal(body.restartRequired, true);
     assert.match(body.message, /Persisted config updated/);
     assert.deepEqual(body.saved, [
         { key: "maxSteps", value: 42 },
         { key: "enableDynamicPrompt", value: false },
     ]);
-    const persisted = JSON.parse(await readFile(path.join(minicodeHome, "agent.config.json"), "utf8"));
-    assert.equal(persisted.maxSteps, 42);
-    assert.equal(persisted.enableDynamicPrompt, false);
+    const persisted = await readFile(path.join(minicodeHome, ".env"), "utf8");
+    assert.match(persisted, /^MAX_STEPS=42$/m);
+    assert.match(persisted, /^ENABLE_DYNAMIC_PROMPT=false$/m);
     const maxSteps = body.settings.entries.find((entry) => entry.key === "maxSteps");
     assert.equal(maxSteps?.persistedValue, 42);
 });