@hienlh/ppm 0.18.12 → 0.18.13

package/src/services/tunnel-registry-parse.ts

@@ -125,6 +125,33 @@ const SOURCE_RANK: Record<TunnelSource, number> = { external: 0, ppm: 1, app: 2
  * source/protected flag, while url/port/identity are filled from whichever
  * entry has them (higher precedence preferred).
  */
+/** Identity of the supervisor-managed app tunnel, read from status.json + config. */
+export interface AppShare {
+  shareUrl: string | null;
+  tunnelPid: number | null;
+  serverPort: number | null;
+}
+
+/**
+ * Does this cloudflared entry belong to the app/supervisor tunnel? Such a
+ * tunnel is display-only: stopping it from the panel would take the whole app
+ * offline, and the supervisor would just respawn it.
+ *
+ * Matching is protect-by-default (PID, public URL, then the PPM port as a
+ * fallback for a stale `tunnelPid`) with one deliberate exception: a tunnel
+ * this server spawned itself. Running a second, temporary tunnel onto the same
+ * public port is a supported thing to do — sharing a one-off link without
+ * handing out the permanent hostname — and it must stay stoppable from the UI
+ * that created it.
+ */
+export function isAppTunnel(entry: TunnelEntry, app: AppShare): boolean {
+  if (app.tunnelPid != null && entry.pid === app.tunnelPid) return true;
+  if (app.shareUrl && entry.url && entry.url === app.shareUrl) return true;
+  if (entry.source === "ppm") return false;
+  if (app.serverPort != null && entry.port === app.serverPort) return true;
+  return false;
+}
+
 export function mergeTunnelSources(sources: {
   external: TunnelEntry[];
   ppm: TunnelEntry[];

package/src/services/tunnel-registry.service.ts

@@ -21,6 +21,8 @@ import {
   extractMetricsPort,
   parseQuickTunnelResponse,
   mergeTunnelSources,
+  isAppTunnel,
+  type AppShare,
   type TunnelEntry,
 } from "./tunnel-registry-parse.ts";
 
@@ -159,12 +161,6 @@ async function recoverUrl(pid: number, metricsAddr: string | null): Promise<stri
 // App/supervisor tunnel identification (protection)
 // ---------------------------------------------------------------------------
 
-interface AppShare {
-  shareUrl: string | null;
-  tunnelPid: number | null;
-  serverPort: number | null;
-}
-
 /** Read the app-share tunnel fresh from status.json each call (guards stale PID). */
 function readAppShare(): AppShare {
   let shareUrl: string | null = null;
@@ -181,15 +177,6 @@ function readAppShare(): AppShare {
   return { shareUrl, tunnelPid, serverPort };
 }
 
-/** A cloudflared entry belongs to the app/supervisor tunnel if it matches by
- *  PID, public URL, or targets the PPM server port. Protect-by-default. */
-function isAppTunnel(entry: TunnelEntry, app: AppShare): boolean {
-  if (app.tunnelPid != null && entry.pid === app.tunnelPid) return true;
-  if (app.shareUrl && entry.url && entry.url === app.shareUrl) return true;
-  if (app.serverPort != null && entry.port === app.serverPort) return true;
-  return false;
-}
-
 // ---------------------------------------------------------------------------
 // Image verification (safe-kill guard, used by the route layer)
 // ---------------------------------------------------------------------------

package/src/services/tunnel.service.ts

@@ -125,22 +125,31 @@ class TunnelService {
   /** Get current tunnel URL (null if not running).
    *  Falls back to status.json if the supervisor set the URL after this process started. */
   getTunnelUrl(): string | null {
-    if (this.url) return this.url;
-    // Lazy sync: supervisor may have written shareUrl after server startup
+    // A tunnel this process spawned can only change through this class, so its
+    // URL is safe to cache. A supervisor-managed one is not: the supervisor
+    // rewrites shareUrl on its own (quick-URL regeneration, switching to or
+    // from a named hostname) and the server would otherwise keep handing out
+    // the first URL it ever saw — the share popover and the cloud heartbeat
+    // both showed a dead temporary URL minutes after the hostname went live.
+    if (this.childProcess && this.url) return this.url;
     this.syncFromStatusFile();
     return this.url;
   }
 
   /** Re-read tunnel state from status.json (supervisor may have updated it after server started) */
   private syncFromStatusFile(): void {
-    if (this.url) return; // already have a URL
+    if (this.childProcess) return; // we own this tunnel; status.json mirrors us, not the other way round
     try {
       const statusFile = resolve(getPpmDir(), "status.json");
       const status = JSON.parse(readFileSync(statusFile, "utf-8"));
       if (status.shareUrl) {
+        const changed = status.shareUrl !== this.url;
         this.url = status.shareUrl;
         this.supervisorManaged = true;
         if (status.tunnelPid) this.externalPid = status.tunnelPid;
+        // A new public URL must reach PPM Cloud too, or the permanent link
+        // keeps redirecting to the retired one.
+        if (changed) this.syncToCloud();
       }
     } catch {}
   }

package/src/types/config.ts

@@ -35,6 +35,23 @@ export interface PpmConfig {
   clawbot?: PPMBotConfig;
   cloud_url?: string;
   query_audit: QueryAuditConfig;
+  tunnel: TunnelConfig;
+}
+
+/**
+ * Persisted named-tunnel state. `namedTunnelToken` is secret-by-contract —
+ * guarded by the config-key denylist and never returned unmasked by any route.
+ * `zoneID`/`accountID` are pinned at setup and re-checked on every reuse.
+ */
+export interface TunnelConfig {
+  mode: "quick" | "named";
+  namedTunnelName?: string;
+  namedTunnelHostname?: string;
+  namedTunnelToken?: string;
+  zoneID?: string;
+  accountID?: string;
+  /** User answered "no domain" — popup must never nag again. */
+  dismissed?: boolean;
 }
 
 export interface QueryAuditConfig {
@@ -131,6 +148,9 @@ export const DEFAULT_CONFIG: PpmConfig = {
     permission_mode: "bypassPermissions",
     debounce_ms: 2000,
   },
+  tunnel: {
+    mode: "quick",
+  },
 };
 
 const VALID_TYPES = ["agent-sdk", "cli", "mock"] as const;
@@ -264,5 +284,16 @@ export function sanitizeConfig(config: PpmConfig): boolean {
     }
   }
 
+  // Only repair `tunnel` when storage itself is malformed (wrong type / bad enum).
+  // Never strip namedTunnel*/zoneID/accountID just because mode is "quick" or the
+  // combination looks "incomplete" — that degrade-to-quick judgment belongs to
+  // the runtime resolver (resolveTunnelConfig), or /disable's "keep the config so
+  // Retry works" contract silently breaks.
+  if (typeof config.tunnel !== "object" || config.tunnel === null ||
+      (config.tunnel.mode !== "quick" && config.tunnel.mode !== "named")) {
+    config.tunnel = structuredClone(DEFAULT_CONFIG.tunnel);
+    dirty = true;
+  }
+
   return dirty;
 }

package/src/web/app.tsx

@@ -27,6 +27,7 @@ import { useServerReload } from "@/hooks/use-server-reload";
 import { CommandPalette } from "@/components/layout/command-palette";
 import { ComparePicker } from "@/components/editor/compare-picker";
 import { BugReportPopup } from "@/components/shared/bug-report-popup";
+import { NamedTunnelSetupPopup } from "@/components/tunnels/named-tunnel/named-tunnel-setup-popup";
 import { ImageOverlay } from "@/components/shared/image-overlay";
 import { DiagramOverlay } from "@/components/shared/diagram-overlay";
 import { BackgroundOutputPanel } from "@/components/chat/background-output-panel";
@@ -359,6 +360,10 @@ export function App() {
         {/* Global bug report popup */}
         <BugReportPopup />
 
+        {/* Named-tunnel first-run setup popup — hidden unless auth is on, mode is
+            still quick and the user has not dismissed it (or a cert needs renewal) */}
+        <NamedTunnelSetupPopup />
+
         {/* Global image lightbox */}
         <ImageOverlay />
 

package/src/web/components/chat/chat-history-bar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef, type MouseEvent } from "react";
-import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, BellOff, Circle, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
+import { History, Settings2, Loader2, MessageSquare, RefreshCw, Search, Pencil, Check, X, Pin, PinOff, Trash2, Users, Bot, Tags, CalendarX2 } from "lucide-react";
 import { Activity } from "lucide-react";
 import { api, projectUrl } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
@@ -8,7 +8,8 @@ import { cn } from "@/lib/utils";
 import { AISettingsSection } from "@/components/settings/ai-settings-section";
 import { TagSettingsSection } from "@/components/settings/tag-settings-section";
 import { SessionContextMenu } from "./session-context-menu";
-import { SessionDebugButton } from "./session-debug-dialog";
+import { SessionDebugDialog } from "./session-debug-dialog";
+import { ChatToolbarOverflowMenu } from "./chat-toolbar-overflow-menu";
 import { UsageDetailPanel } from "./usage-badge";
 import { CodexUsagePanel } from "./codex-usage-panel";
 import { TeamActivityPanel } from "./team-activity-panel";
@@ -82,6 +83,7 @@ export function ChatHistoryBar({
   const [selectedTagId, setSelectedTagId] = useState<number | null>(null);
   const [tagCounts, setTagCounts] = useState<Record<number, number>>({});
   const [showTagSettings, setShowTagSettings] = useState(false);
+  const [debugOpen, setDebugOpen] = useState(false);
   const editInputRef = useRef<HTMLInputElement>(null);
   const openTab = useTabStore((s) => s.openTab);
   const PAGE_SIZE = 50;
@@ -273,112 +275,88 @@ export function ChatHistoryBar({
 
   return (
     <div className="border-b border-border/50">
-      {/* Toolbar row — all buttons on one line */}
+      {/* Toolbar row — status chips scroll on the left, controls stay pinned right.
+          A narrow chat pane must never push the connection indicator out of view. */}
       <div className="flex items-center gap-1 px-2 py-1">
-        {/* History */}
-        <button
-          onClick={() => togglePanel("history")}
-          className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
-            activePanel === "history" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
-          }`}
-        >
-          <History className="size-3" />
-          <span>History</span>
-        </button>
-
-        {/* Active provider + AI Settings (combined) */}
-        {sessionId && providerId && providerId !== "mock" ? (
+        <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto scrollbar-none">
+          {/* History */}
           <button
-            onClick={() => togglePanel("config")}
-            className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
-              activePanel === "config" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
+            onClick={() => togglePanel("history")}
+            className={`shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
+              activePanel === "history" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
             }`}
-            title="AI Settings"
           >
-            <ProviderBadge providerId={providerId} />
-            <span className="capitalize">{providerId}</span>
+            <History className="size-3" />
+            <span>History</span>
           </button>
-        ) : (
-          <button
-            onClick={() => togglePanel("config")}
-            className={`p-1 rounded transition-colors ${
-              activePanel === "config" ? "text-primary bg-primary/10" : "text-text-subtle hover:text-text-secondary hover:bg-surface-elevated"
-            }`}
-            title="AI Settings"
-          >
-            <Settings2 className="size-3" />
-          </button>
-        )}
-
-        {/* Usage & Accounts — Claude and Codex both surface usage + account mgmt here */}
-        {(isClaudeProvider || isCodexProvider) ? (
-          <button
-            onClick={() => togglePanel("usage")}
-            className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-elevated ${
-              activePanel === "usage" ? "bg-primary/10" : ""
-            } ${usageColor}`}
-            title="Usage limits"
-          >
-            <Activity className="size-3" />
-            {usageInfo.activeAccountLabel && (
-              <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
-            )}
-            <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
-            <span className="text-text-subtle">·</span>
-            <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
-          </button>
-        ) : null}
-
-        {/* Team activity */}
-        {teamActivity?.hasTeams && (
-          <button
-            onClick={() => {
-              togglePanel("team");
-              onTeamOpen?.();
-            }}
-            className={`relative flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
-              activePanel === "team" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
-            }`}
-            title="Team activity"
-          >
-            <Users className="size-3" />
-            <span>Team</span>
-            {(teamActivity.unreadCount ?? 0) > 0 && (
-              <span className="absolute -top-0.5 -right-0.5 size-2 bg-primary rounded-full animate-pulse" />
-            )}
-          </button>
-        )}
 
-        {/* Spacer */}
-        <div className="flex-1" />
+          {/* Active provider + AI Settings (combined) */}
+          {sessionId && providerId && providerId !== "mock" ? (
+            <button
+              onClick={() => togglePanel("config")}
+              className={`shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
+                activePanel === "config" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
+              }`}
+              title="AI Settings"
+            >
+              <ProviderBadge providerId={providerId} />
+              <span className="capitalize">{providerId}</span>
+            </button>
+          ) : (
+            <button
+              onClick={() => togglePanel("config")}
+              className={`shrink-0 p-1 rounded transition-colors ${
+                activePanel === "config" ? "text-primary bg-primary/10" : "text-text-subtle hover:text-text-secondary hover:bg-surface-elevated"
+              }`}
+              title="AI Settings"
+            >
+              <Settings2 className="size-3" />
+            </button>
+          )}
 
-        {/* Mark as read */}
-        {hasUnread && sessionId && (
-          <button
-            onClick={() => clearForSession(sessionId)}
-            className="p-1 rounded text-warning hover:text-warning/80 hover:bg-surface-elevated transition-colors"
-            title="Mark as read"
-          >
-            <BellOff className="size-3" />
-          </button>
-        )}
+          {/* Usage & Accounts — Claude and Codex both surface usage + account mgmt here */}
+          {(isClaudeProvider || isCodexProvider) ? (
+            <button
+              onClick={() => togglePanel("usage")}
+              className={`shrink-0 flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium tabular-nums transition-colors hover:bg-surface-elevated ${
+                activePanel === "usage" ? "bg-primary/10" : ""
+              } ${usageColor}`}
+              title="Usage limits"
+            >
+              <Activity className="size-3" />
+              {usageInfo.activeAccountLabel && (
+                <span className="text-text-secondary font-normal truncate max-w-[60px]">[{usageInfo.activeAccountLabel}]</span>
+              )}
+              <span>5h:{fiveHourPct != null ? `${fiveHourPct}%` : "--%"}</span>
+              <span className="text-text-subtle">·</span>
+              <span>Wk:{sevenDayPct != null ? `${sevenDayPct}%` : "--%"}</span>
+            </button>
+          ) : null}
 
-        {/* Mark as unread */}
-        {!hasUnread && sessionId && (
-          <button
-            onClick={() => markUnread(sessionId, projectName)}
-            className="p-1 rounded text-primary hover:text-primary/80 hover:bg-surface-elevated transition-colors"
-            title="Mark as unread"
-          >
-            <Circle className="size-3 fill-current" />
-          </button>
-        )}
+          {/* Team activity */}
+          {teamActivity?.hasTeams && (
+            <button
+              onClick={() => {
+                togglePanel("team");
+                onTeamOpen?.();
+              }}
+              className={`shrink-0 relative flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] transition-colors ${
+                activePanel === "team" ? "text-primary bg-primary/10" : "text-text-secondary hover:text-foreground hover:bg-surface-elevated"
+              }`}
+              title="Team activity"
+            >
+              <Users className="size-3" />
+              <span>Team</span>
+              {(teamActivity.unreadCount ?? 0) > 0 && (
+                <span className="absolute -top-0.5 -right-0.5 size-2 bg-primary rounded-full animate-pulse" />
+              )}
+            </button>
+          )}
 
-        {/* Debug info — copy session IDs + JSONL path */}
-        {sessionId && (
-          <SessionDebugButton sessionId={sessionId} projectName={projectName} />
-        )}
+        </div>
 
+        {/* Pinned controls — always visible, never scrolled away */}
+        <div className="flex shrink-0 items-center gap-1 pl-1">
         {/* Reload messages + connection status */}
         {onReload && (
           <button
@@ -397,8 +375,27 @@ export function ChatHistoryBar({
             <span className={`absolute -top-0.5 -right-0.5 size-1.5 rounded-full ${isConnected ? "bg-success" : "bg-error animate-pulse"}`} />
           </button>
         )}
+
+        {/* Overflow menu — session actions, and the home for future toolbar actions */}
+        {sessionId && (
+          <ChatToolbarOverflowMenu
+            hasUnread={hasUnread}
+            onToggleUnread={() => hasUnread ? clearForSession(sessionId) : markUnread(sessionId, projectName)}
+            onOpenDebug={() => setDebugOpen(true)}
+          />
+        )}
+        </div>
       </div>
 
+      {sessionId && (
+        <SessionDebugDialog
+          sessionId={sessionId}
+          projectName={projectName}
+          open={debugOpen}
+          onOpenChange={setDebugOpen}
+        />
+      )}
+
       {/* Panels — only one visible at a time */}
 
       {/* History panel */}

package/src/web/components/chat/chat-toolbar-overflow-menu.tsx

@@ -0,0 +1,57 @@
+import { BellOff, Bug, Circle, MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+/**
+ * Session actions that do not earn permanent space in the chat toolbar.
+ *
+ * The toolbar's left zone scrolls once the chat panel gets narrow, so every
+ * control pinned on the right competes for the handful of pixels that stay
+ * visible. Only the connection indicator earns that spot; infrequent actions
+ * live behind this trigger, which is also where future toolbar actions belong.
+ */
+export function ChatToolbarOverflowMenu({
+  hasUnread,
+  onToggleUnread,
+  onOpenDebug,
+}: {
+  hasUnread: boolean;
+  onToggleUnread: () => void;
+  onOpenDebug: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          className="flex items-center justify-center size-5 rounded text-text-subtle hover:text-text-secondary hover:bg-surface-elevated transition-colors"
+          title="More actions"
+          aria-label="More actions"
+        >
+          <MoreHorizontal className="size-3.5" />
+        </button>
+      </DropdownMenuTrigger>
+      {/* Anchored above: this toolbar sits at the bottom of the chat pane. */}
+      <DropdownMenuContent align="end" side="top" className="min-w-[190px]">
+        <DropdownMenuItem onClick={onToggleUnread} className="max-md:py-3">
+          {hasUnread ? (
+            <>
+              <BellOff className="size-3.5 text-warning" /> Mark as read
+            </>
+          ) : (
+            <>
+              <Circle className="size-3.5 fill-current text-primary" /> Mark as unread
+            </>
+          )}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onOpenDebug} className="max-md:py-3">
+          <Bug className="size-3.5" /> Session debug info
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/web/components/chat/session-debug-dialog.tsx

@@ -308,15 +308,30 @@ function TurnUsageHistory({ sessionId, projectName }: { sessionId: string; proje
   );
 }
 
-/** Toolbar button opening the session's debug facts and transcript maintenance. */
-export function SessionDebugButton({ sessionId, projectName }: { sessionId: string; projectName: string }) {
-  const [open, setOpen] = useState(false);
+/**
+ * Session debug facts and transcript maintenance.
+ *
+ * Controlled by the caller so the trigger can live anywhere — including inside a
+ * dropdown menu, which unmounts its own items on select and would take an
+ * internally-owned dialog down with them.
+ */
+export function SessionDebugDialog({
+  sessionId,
+  projectName,
+  open,
+  onOpenChange,
+}: {
+  sessionId: string;
+  projectName: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
   const [info, setInfo] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
   const isMobile = useIsMobile();
 
-  const openPopup = () => {
-    setOpen(true);
+  useEffect(() => {
+    if (!open) return;
     setCopied(false);
     setInfo(null);
     api.get<DebugInfo>(
@@ -333,7 +348,7 @@ export function SessionDebugButton({ sessionId, projectName }: { sessionId: stri
         ...gatherRenderStats(),
       ].filter(Boolean).join("\n"));
     }).catch(() => setInfo("Failed to load debug info"));
-  };
+  }, [open, sessionId, projectName]);
 
   const copy = () => {
     if (!info) return;
@@ -365,27 +380,20 @@ export function SessionDebugButton({ sessionId, projectName }: { sessionId: stri
     </div>
   );
 
+  if (isMobile) {
+    return (
+      <BottomSheet open={open} onClose={() => onOpenChange(false)} className="popover-solid">
+        <div className="max-h-[85vh] overflow-y-auto px-4 pb-4 pt-1">{body}</div>
+      </BottomSheet>
+    );
+  }
+
   return (
-    <>
-      <button
-        onClick={openPopup}
-        className="p-1 rounded text-text-subtle hover:text-text-secondary hover:bg-surface-elevated transition-colors"
-        title="Session debug info"
-      >
-        <Bug className="size-3" />
-      </button>
-      {isMobile ? (
-        <BottomSheet open={open} onClose={() => setOpen(false)} className="popover-solid">
-          <div className="max-h-[85vh] overflow-y-auto px-4 pb-4 pt-1">{body}</div>
-        </BottomSheet>
-      ) : (
-        <Dialog open={open} onOpenChange={setOpen}>
-          <DialogContent className="sm:max-w-lg">
-            <DialogTitle className="sr-only">Session debug info</DialogTitle>
-            {body}
-          </DialogContent>
-        </Dialog>
-      )}
-    </>
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogTitle className="sr-only">Session debug info</DialogTitle>
+        {body}
+      </DialogContent>
+    </Dialog>
   );
 }