feat(webview): show configured named-tunnel hostname; prompt edits wait for confirmation

Closes the two scope cuts from the dead-end sweep:

- TunnelState gains optional namedTunnelHostname. The extension reads it
  from cloudflared-named.yml (same fixed format the daemon's
  writeTunnelConfig emits, including quoted-value handling). The Setup
  tab's cf-named block now shows a 'Configured' chip with the hostname,
  relabels the input 'New Hostname (optional)', and the helper text says
  exactly which tunnel an empty field reuses.

- PromptEditor no longer navigates back optimistically. savePrompt /
  deletePrompt / resetPrompt return their action id, markActionDone
  records a consumable result (bounded map), and the editor leaves only
  on confirmed success — failures keep the editor open with the user's
  input intact and show an inline alert. Save shows 'Saving…' while in
  flight. 3 new store tests cover the id/result round-trip.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: ARHAEEM

CHANGELOG.md

@@ -6,6 +6,24 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ## [Unreleased]
 
+### Dashboard — named-tunnel hostname display + confirmed prompt saves (2026-06-12)
+
+- **`TunnelState.namedTunnelHostname`** (new optional shared-protocol field):
+  the extension now reads the hostname from `cloudflared-named.yml` (same
+  mechanical format the daemon writes) and the Setup tab shows a
+  "Configured: <hostname>" row for the named-tunnel provider, relabels the
+  input "New Hostname (optional)", and explains that leaving it empty reuses
+  the configured tunnel ([`types.ts`](packages/shared/src/types.ts),
+  [`DashboardProvider.ts`](packages/extension/src/webview/DashboardProvider.ts),
+  [`Setup.tsx`](packages/webview/src/tabs/Setup.tsx)).
+- **PromptEditor waits for confirmation**: `savePrompt`/`deletePrompt`/
+  `resetPrompt` now return their action id, `markActionDone` records a
+  consumable per-action result, and the editor navigates back only after the
+  extension confirms success — a failure keeps the editor open with the
+  user's input intact and shows an inline error
+  ([`store.ts`](packages/webview/src/store.ts), [`Prompts.tsx`](packages/webview/src/tabs/Prompts.tsx)).
+  3 new store tests cover the id/result round-trip.
+
 ### Dashboard — second-pass dead-end & cosmetics sweep (2026-06-12)
 
 A targeted second audit (flow dead-ends, unreachable conditional UI, stale

packages/extension/src/webview/DashboardProvider.ts

@@ -954,6 +954,27 @@ export class DashboardProvider implements vscode.WebviewViewProvider {
       // Check SecretStorage for ngrok authtoken
       const ngrokAuthtokenSet = !!(await this.context.secrets.get('airtable-formula.ngrok.authtoken'));
 
+      // Read the named-tunnel hostname from cloudflared-named.yml (written by
+      // the daemon's writeTunnelConfig — fixed mechanical format, same
+      // `- hostname:` extraction as the daemon's parseConfigYaml).
+      let namedTunnelHostname: string | null = null;
+      const namedConfigPath = pathMod.join(configDir, 'cloudflared-named.yml');
+      if (fsMod.existsSync(namedConfigPath)) {
+        try {
+          const rawYaml = fsMod.readFileSync(namedConfigPath, 'utf8');
+          for (const line of rawYaml.split(/\r?\n/)) {
+            const m = line.trim().match(/^- hostname:\s*(.+)$/u);
+            if (m) {
+              const value = m[1].trim();
+              namedTunnelHostname = value.startsWith('"') && value.endsWith('"')
+                ? value.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\')
+                : value;
+              break;
+            }
+          }
+        } catch { /* unreadable — treat as not configured */ }
+      }
+
       // Determine TunnelStatus
       let status: import('@airtable-formula/shared').TunnelStatus = 'disabled';
       if (tunnelUrl) {
@@ -970,6 +991,7 @@ export class DashboardProvider implements vscode.WebviewViewProvider {
         provider,
         ngrokAuthtokenSet,
         autoDisabledReason,
+        namedTunnelHostname,
       };
     } catch {
       return undefined;

packages/shared/src/types.ts

@@ -169,6 +169,10 @@ export interface TunnelState {
   provider:           TunnelProviderId;
   ngrokAuthtokenSet:  boolean;       // true when VS Code SecretStorage has a token for 'airtable-formula.ngrok.authtoken'
   autoDisabledReason: TunnelAutoDisabledReason | null;
+  /** Hostname from an existing cloudflared-named.yml, or null when no named
+   *  tunnel has been configured yet. Lets the UI show what "reuse the
+   *  already-configured tunnel" actually points at. */
+  namedTunnelHostname?: string | null;
 }
 
 export interface DaemonStatusInfo {

packages/webview/src/store.ts

@@ -46,9 +46,14 @@ interface Store extends DashboardState {
   copyAirtablePat: () => void;
   configureOfficialAirtable: (ideId: import('@shared/types.js').IdeId) => void;
   unconfigureOfficialAirtable: (ideId: import('@shared/types.js').IdeId) => void;
-  savePrompt: (prompt: PromptDef) => void;
-  deletePrompt: (name: string) => void;
-  resetPrompt: (name: string) => void;
+  /** Prompt actions return their action id so callers can await completion
+   *  (via pendingActions + consumeActionResult) before navigating away. */
+  savePrompt: (prompt: PromptDef) => string;
+  deletePrompt: (name: string) => string;
+  resetPrompt: (name: string) => string;
+  /** Read-and-clear the success flag recorded by markActionDone. Undefined
+   *  when no result was recorded (e.g. id unknown). */
+  consumeActionResult: (id: string) => boolean | undefined;
 }
 
 const defaultSettings: SettingsSnapshot = {
@@ -86,6 +91,12 @@ const defaultAuth: AuthState = {
 const PENDING_TIMEOUT_MS = 60_000;
 const pendingTimers = new Map<string, ReturnType<typeof setTimeout>>();
 
+// Per-action outcomes recorded by markActionDone, consumed by components that
+// wait for confirmation before navigating (PromptEditor). Bounded — unclaimed
+// results from fire-and-forget actions are evicted oldest-first.
+const actionResults = new Map<string, boolean>();
+const ACTION_RESULTS_MAX = 50;
+
 export const useStore = create<Store>((set, get) => {
   /** Track an in-flight action and schedule its auto-expiry. */
   const beginAction = (id: string, timeoutMs = PENDING_TIMEOUT_MS) => {
@@ -342,23 +353,38 @@ export const useStore = create<Store>((set, get) => {
     const id = randomId();
     beginAction(id);
     sendToExtension({ type: 'action:save-prompt', id, prompt });
+    return id;
   },
 
   deletePrompt: (name) => {
     const id = randomId();
     beginAction(id);
     sendToExtension({ type: 'action:delete-prompt', id, name });
+    return id;
   },
 
   resetPrompt: (name) => {
     const id = randomId();
     beginAction(id);
     sendToExtension({ type: 'action:reset-prompt', id, name });
+    return id;
+  },
+
+  consumeActionResult: (id) => {
+    const result = actionResults.get(id);
+    actionResults.delete(id);
+    return result;
   },
 
-  markActionDone: (id, _ok) => {
+  markActionDone: (id, ok) => {
     const timer = pendingTimers.get(id);
     if (timer) { clearTimeout(timer); pendingTimers.delete(id); }
+    actionResults.set(id, ok);
+    while (actionResults.size > ACTION_RESULTS_MAX) {
+      const oldest = actionResults.keys().next().value;
+      if (oldest === undefined) break;
+      actionResults.delete(oldest);
+    }
     set(s => {
       const next = new Set(s.pendingActions);
       next.delete(id);

packages/webview/src/tabs/Prompts.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useStore } from '../store.js';
 import type { PromptDef, PromptArg } from '@shared/types.js';
 import { Plus, ArrowLeft, Trash2, RotateCcw, Save, X, Info } from 'lucide-react';
@@ -85,32 +85,50 @@ function PromptEditor({
   isNew: boolean;
   onBack: () => void;
 }) {
-  const { savePrompt, deletePrompt, resetPrompt, pendingActions } = useStore();
-  const busy = pendingActions.size > 0;
+  const { savePrompt, deletePrompt, resetPrompt, pendingActions, consumeActionResult } = useStore();
   const [name, setName]           = useState(initial.name);
   const [desc, setDesc]           = useState(initial.description);
   const [args, setArgs]           = useState<PromptArg[]>(initial.arguments);
   const [template, setTemplate]   = useState(initial.template);
   const [dirty, setDirty]         = useState(isNew);
+  // The action we are waiting on — navigation back happens only once the
+  // extension confirms it (action:result), and a failure keeps the editor
+  // open with the user's input intact instead of silently discarding it.
+  const [inFlightId, setInFlightId] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
 
+  const busy = inFlightId !== null || pendingActions.size > 0;
   const nameIsValid = /^[a-z][a-z0-9-]*$/.test(name);
 
+  useEffect(() => {
+    if (!inFlightId || pendingActions.has(inFlightId)) return;
+    const ok = consumeActionResult(inFlightId);
+    setInFlightId(null);
+    if (ok === false) {
+      setActionError('The change did not apply — check the VS Code notifications for details, then try again.');
+    } else {
+      onBack();
+    }
+  }, [pendingActions, inFlightId, consumeActionResult, onBack]);
+
   function markDirty() { setDirty(true); }
 
   function handleSave() {
-    if (!dirty || !nameIsValid) return;
-    savePrompt({ name, description: desc, arguments: args, template, isBuiltin: initial.isBuiltin, isModified: initial.isBuiltin });
-    onBack();
+    if (!dirty || !nameIsValid || inFlightId) return;
+    setActionError(null);
+    setInFlightId(savePrompt({ name, description: desc, arguments: args, template, isBuiltin: initial.isBuiltin, isModified: initial.isBuiltin }));
   }
 
   function handleDelete() {
-    deletePrompt(initial.name);
-    onBack();
+    if (inFlightId) return;
+    setActionError(null);
+    setInFlightId(deletePrompt(initial.name));
   }
 
   function handleReset() {
-    resetPrompt(initial.name);
-    onBack();
+    if (inFlightId) return;
+    setActionError(null);
+    setInFlightId(resetPrompt(initial.name));
   }
 
   function addArg() {
@@ -218,6 +236,13 @@ function PromptEditor({
         />
       </div>
 
+      {/* Action failure — stay on the editor so the user's input is kept */}
+      {actionError && (
+        <div role="alert" style={{ fontSize: '0.7rem', color: 'var(--fg-warn)', padding: '6px 10px', background: 'var(--bg-warn)', borderRadius: 'var(--radius-md)' }}>
+          {actionError}
+        </div>
+      )}
+
       {/* Actions */}
       <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
         <button
@@ -227,7 +252,7 @@ function PromptEditor({
           className="btn btn-primary"
           style={{ display: 'inline-flex', alignItems: 'center', gap: 5, opacity: !dirty || !nameIsValid || busy ? 0.5 : 1 }}
         >
-          <Save size={12} /> Save
+          <Save size={12} /> {inFlightId ? 'Saving…' : 'Save'}
         </button>
 
         {initial.isBuiltin && initial.isModified && (

packages/webview/src/tabs/Setup.tsx

@@ -609,13 +609,24 @@ export function Setup() {
         {/* Cloudflare named tunnel — hostname is required for first-time setup */}
         {selectedProvider === 'cf-named' && (
           <div style={{ marginBottom: 8 }}>
+            {tunnel?.namedTunnelHostname && (
+              <div className="list-row" style={{ alignItems: 'center', gap: 8, marginBottom: 8 }}>
+                <span className="chip chip-ok">Configured</span>
+                <span
+                  title={tunnel.namedTunnelHostname}
+                  style={{ fontFamily: 'var(--font-mono)', fontSize: '0.7rem', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'right' }}
+                >
+                  {tunnel.namedTunnelHostname}
+                </span>
+              </div>
+            )}
             <label htmlFor="cf-named-hostname" className="uppercase-label" style={{ display: 'block', marginBottom: 4 }}>
-              Hostname
+              {tunnel?.namedTunnelHostname ? 'New Hostname (optional)' : 'Hostname'}
             </label>
             <input
               id="cf-named-hostname"
               type="text"
-              placeholder="mcp.your-domain.com"
+              placeholder={tunnel?.namedTunnelHostname ?? 'mcp.your-domain.com'}
               aria-describedby="cf-named-hostname-helper"
               value={namedHostnameInput}
               onChange={e => setNamedHostnameInput(e.target.value)}
@@ -633,9 +644,10 @@ export function Setup() {
               }}
             />
             <div id="cf-named-hostname-helper" style={{ fontSize: '0.7rem', color: 'var(--fg-subtle)' }}>
-              A domain you manage in Cloudflare (the tunnel gets a permanent URL there).
-              Required the first time — setup opens a one-time Cloudflare login in your browser.
-              Leave empty to reuse an already-configured tunnel.
+              {tunnel?.namedTunnelHostname
+                ? <>Leave empty to reuse <strong>{tunnel.namedTunnelHostname}</strong>, or enter a different Cloudflare-managed hostname to reconfigure.</>
+                : <>A domain you manage in Cloudflare (the tunnel gets a permanent URL there).
+                   Required the first time — setup opens a one-time Cloudflare login in your browser.</>}
             </div>
           </div>
         )}

packages/webview/src/test/store.test.ts

@@ -106,3 +106,31 @@ describe('store daemon field', () => {
     expect(useStore.getState().daemon).toBeUndefined();
   });
 });
+
+describe('action result confirmation (PromptEditor wait-for-result)', () => {
+  it('savePrompt returns its action id and tracks it as pending', () => {
+    const id = useStore.getState().savePrompt({
+      name: 'my-prompt', description: 'd', arguments: [], template: 't',
+      isBuiltin: false, isModified: false,
+    });
+    expect(typeof id).toBe('string');
+    expect(id.length).toBeGreaterThan(0);
+    expect(useStore.getState().pendingActions.has(id)).toBe(true);
+    expect(sendToExtension).toHaveBeenCalledWith(expect.objectContaining({ type: 'action:save-prompt', id }));
+  });
+
+  it('markActionDone records a consumable result and clears pending', () => {
+    const id = useStore.getState().deletePrompt('my-prompt');
+    useStore.getState().markActionDone(id, false);
+    expect(useStore.getState().pendingActions.has(id)).toBe(false);
+    expect(useStore.getState().consumeActionResult(id)).toBe(false);
+    // consumed — second read is undefined
+    expect(useStore.getState().consumeActionResult(id)).toBeUndefined();
+  });
+
+  it('resetPrompt success result round-trips as true', () => {
+    const id = useStore.getState().resetPrompt('built-in');
+    useStore.getState().markActionDone(id, true);
+    expect(useStore.getState().consumeActionResult(id)).toBe(true);
+  });
+});