@hienlh/ppm 0.19.5 → 0.19.7

package/src/web/components/layout/wake-lock-indicator.tsx

@@ -0,0 +1,50 @@
+/**
+ * "Screen awake" indicator — shown only while a wake lock is actually held.
+ *
+ * Two mounts, because the two viewports have no shared chrome: the status bar is `hidden md:flex`
+ * and never renders on the phones and tablets this feature exists for, while a fixed badge would
+ * collide with the desktop status bar. Both read the same store, so they can never disagree.
+ *
+ * The state is reported by the browser, not assumed: `use-wake-lock.ts` only flips the store
+ * after a request resolves, so this chip disappearing means the platform really did take the
+ * lock back (battery saver, low battery) rather than the setting being off.
+ */
+
+import { memo } from "react";
+import { Sun } from "lucide-react";
+import { useWakeLockStore } from "@/stores/wake-lock-store";
+
+const LABEL = "Screen awake";
+const TITLE = "Screen is being kept on while this turn runs";
+
+/** Desktop: a plain entry that inherits the status bar's own type scale. */
+export const WakeLockStatusBarItem = memo(function WakeLockStatusBarItem() {
+  const active = useWakeLockStore((s) => s.active);
+  if (!active) return null;
+
+  return (
+    <span className="flex items-center gap-1 text-warning shrink-0" title={TITLE}>
+      <Sun className="size-3 shrink-0" />
+      <span>awake</span>
+    </span>
+  );
+});
+
+/**
+ * Mobile: a pill at the top edge. Top-left and top-right are already taken by the device-name
+ * badge and the BETA ribbon, so this sits centred between them.
+ */
+export const WakeLockMobileBadge = memo(function WakeLockMobileBadge() {
+  const active = useWakeLockStore((s) => s.active);
+  if (!active) return null;
+
+  return (
+    <div
+      className="md:hidden fixed left-1/2 -translate-x-1/2 top-0 z-50 flex items-center gap-1 px-2 py-0.5 rounded-b bg-warning/85 text-white text-[10px] font-medium pointer-events-none"
+      title={TITLE}
+    >
+      <Sun className="size-3 shrink-0" />
+      <span>{LABEL}</span>
+    </div>
+  );
+});

package/src/web/components/settings/accounts/account-bucket-row.tsx

@@ -1,10 +1,10 @@
 /**
  * The usage bar, and the rate-limit-bucket adapter over it.
  *
- * Two callers with different data: a Claude bucket knows its reset time and window, a Codex
- * usage figure is a bare percentage. `AccountUsageBar` is the shared visual so both read the
- * same; the bucket adapter adds what only a bucket has. Fabricating a reset time to force
- * Codex through the bucket shape would have put invented data on screen.
+ * `AccountUsageBar` is the shared visual, so Claude and Codex rows read the same; it takes
+ * the reset text already formatted, because a caller may hold a percentage whose bucket is
+ * missing and must render the bar without inventing a reset time. `AccountBucketRow` is the
+ * adapter for callers that do have a whole bucket, and it drops the row when they do not.
  */
 
 import type { LimitBucket } from "../../../../types/chat";

package/src/web/components/settings/accounts/codex-accounts-section.tsx

@@ -10,15 +10,12 @@ import { useState } from "react";
 import { Download, KeyRound, Loader2, Plus, Settings, Trash2, Upload } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { AccountCardRow, AccountCardShell, AccountsPaneHeader, AccountsPaneMessage } from "./accounts-pane-header";
-import { AccountUsageBar } from "./account-bucket-row";
 import { CodexAddAccountDialog } from "./codex-add-account-dialog";
 import { CodexBackupDialog } from "./codex-backup-dialog";
 import { CodexRotationDialog } from "./codex-rotation-dialog";
+import { CodexUsageRows } from "./codex-usage-rows";
 import { useCodexAccounts } from "./use-codex-accounts";
 
-/** Usage arrives as a 0-1 fraction; the shared bar wants whole percent. */
-function toPct(v?: number): number | null { return v != null ? Math.round(v * 100) : null; }
-
 /** Codex multi-account management, separate from Claude accounts because codex auth is owned
  *  by the app-server per CODEX_HOME. Added by API key or ChatGPT device code. */
 export function CodexAccountsSection() {
@@ -98,10 +95,7 @@ export function CodexAccountsSection() {
                       <Trash2 className="size-4" />
                     </button>
                   </div>
-                  <div className="space-y-2">
-                    <AccountUsageBar label="5-Hour Session" pct={toPct(u.fiveHour)} />
-                    <AccountUsageBar label="Weekly" pct={toPct(u.sevenDay)} />
-                  </div>
+                  <CodexUsageRows usage={u} />
                 </AccountCardShell>
               );
             })}

package/src/web/components/settings/accounts/codex-usage-rows.tsx

@@ -0,0 +1,26 @@
+/**
+ * The two quota rows of a Codex account card.
+ *
+ * Split out so the wiring is testable on its own: the reset clock is the part that keeps
+ * getting dropped, because the percentages render fine without it.
+ *
+ * Unlike the Claude card's `AccountBucketRow`, a row here stays on screen with an em dash
+ * when the quota read failed instead of disappearing — a card that silently loses half its
+ * height reads as a broken account rather than as missing data.
+ */
+
+import { AccountUsageBar } from "./account-bucket-row";
+import { formatResetTime } from "./account-usage-format";
+import type { Usage } from "./use-codex-accounts";
+
+/** Usage arrives as a 0-1 fraction; the shared bar wants whole percent. */
+function toPct(v?: number): number | null { return v != null ? Math.round(v * 100) : null; }
+
+export function CodexUsageRows({ usage }: { usage: Usage }) {
+  return (
+    <div className="space-y-2">
+      <AccountUsageBar label="5-Hour Session" pct={toPct(usage.fiveHour)} reset={formatResetTime(usage.session)} />
+      <AccountUsageBar label="Weekly" pct={toPct(usage.sevenDay)} reset={formatResetTime(usage.weekly)} />
+    </div>
+  );
+}

package/src/web/components/settings/accounts/use-codex-accounts.ts

@@ -11,11 +11,22 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { api, getAuthToken } from "@/lib/api-client";
+import type { LimitBucket } from "../../../../types/chat";
 import type { CodexStrategy } from "./codex-rotation-dialog";
 
 export type Strategy = CodexStrategy;
 export interface CodexAccount { id: string; label: string; type: string; planType?: string | null }
-export interface Usage { fiveHour?: number; sevenDay?: number }
+/**
+ * One account's quota. The two percentages are what the bars read; the buckets carry the
+ * reset clock the server already sends, so the Codex card can show "resets in" the way the
+ * Claude card does.
+ */
+export interface Usage {
+  fiveHour?: number;
+  sevenDay?: number;
+  session?: LimitBucket;
+  weekly?: LimitBucket;
+}
 interface DevicePending { id: string; userCode: string; verificationUrl: string }
 type DeviceStatus = { state: "pending" } | { state: "done" } | { state: "error"; error: string };
 

package/src/web/components/settings/general-settings-section.tsx

@@ -6,19 +6,30 @@
  */
 
 import { useCallback, useRef, useState } from "react";
-import { Check } from "lucide-react";
+import { Check, Sun } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
 import { useSettingsStore } from "@/stores/settings-store";
+import { wakeLockSupport } from "@/hooks/use-wake-lock";
 import { ChangePasswordSection } from "./change-password-section";
 
 export function GeneralSettingsSection() {
-  const { deviceName, setDeviceName, version } = useSettingsStore(
-    useShallow((s) => ({ deviceName: s.deviceName, setDeviceName: s.setDeviceName, version: s.version })),
+  const { deviceName, setDeviceName, version, keepScreenAwake, setKeepScreenAwake } = useSettingsStore(
+    useShallow((s) => ({
+      deviceName: s.deviceName,
+      setDeviceName: s.setDeviceName,
+      version: s.version,
+      keepScreenAwake: s.keepScreenAwake,
+      setKeepScreenAwake: s.setKeepScreenAwake,
+    })),
   );
+  // Computed once per mount: neither the browser nor the origin's secure-context status can
+  // change while the pane is open.
+  const [support] = useState(wakeLockSupport);
   const [nameInput, setNameInput] = useState(deviceName ?? "");
   const [nameSaving, setNameSaving] = useState(false);
   const [nameSaved, setNameSaved] = useState(false);
@@ -68,6 +79,29 @@ export function GeneralSettingsSection() {
 
       <Separator />
 
+      <section className="flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3 min-w-0">
+          <Sun className="size-4 text-muted-foreground shrink-0" />
+          <div className="min-w-0">
+            <p className="text-sm font-medium">Keep Screen Awake</p>
+            <p className="text-xs text-muted-foreground">
+              {support === "insecure"
+                ? "Unavailable over plain HTTP — reach PPM through its HTTPS tunnel address to use this."
+                : support === "unsupported"
+                  ? "This browser does not support screen wake locks."
+                  : "Stop this device dimming while a chat turn is running."}
+            </p>
+          </div>
+        </div>
+        <Switch
+          checked={keepScreenAwake && support === "ok"}
+          disabled={support !== "ok"}
+          onCheckedChange={setKeepScreenAwake}
+        />
+      </section>
+
+      <Separator />
+
       <ChangePasswordSection />
 
       <Separator />

package/src/web/components/settings/proxy-settings-section.tsx

@@ -7,6 +7,7 @@ import { Switch } from "@/components/ui/switch";
 import { getProxySettings, updateProxySettings, getAISettings, type ProxySettings } from "@/lib/api-settings";
 import { copyToClipboard } from "@/lib/clipboard";
 import { ProxyTestButton } from "./proxy-test-section";
+import { proxyEndpoints } from "@/lib/proxy-endpoints";
 
 export function ProxySettingsSection() {
   /** Provider the connection info targets; "" is the unscoped Claude path. */
@@ -70,22 +71,22 @@ export function ProxySettingsSection() {
   const localEndpoint = settings.localEndpoint;
   const localBaseUrl = localEndpoint.replace(/\/proxy\/v1\/messages$/, "");
 
-  // Both dialects hang off one prefix, so selecting a provider moves them
-  // together and the card cannot show a mismatched pair.
-  //   default:   <root>/proxy        → /v1/messages, /v1/chat/completions
-  //   provider:  <root>/proxy/codex  → same two paths underneath
-  const prefix = `${hasTunnel ? settings.tunnelUrl : localBaseUrl}/proxy${provider ? `/${provider}` : ""}`;
-  const anthropicEndpoint = `${prefix}/v1/messages`;
-  const openAiEndpoint = `${prefix}/v1/chat/completions`;
-  const anthropicEnv = `ANTHROPIC_BASE_URL=${prefix}\nANTHROPIC_API_KEY=${settings.authKey}`;
-  const openAiEnv = `OPENAI_BASE_URL=${prefix}/v1\nOPENAI_API_KEY=${settings.authKey}`;
+  // Every URL below comes from the shared helper, which the Test dialog also
+  // uses — that is what keeps the card and the request it fires in agreement.
+  const ep = proxyEndpoints(hasTunnel ? settings.tunnelUrl! : localBaseUrl, provider);
+  const anthropicEndpoint = ep.anthropicMessages;
+  const openAiEndpoint = ep.openAiChatCompletions;
+  const anthropicEnv = `ANTHROPIC_BASE_URL=${ep.anthropicBase}\nANTHROPIC_API_KEY=${settings.authKey}`;
+  const openAiEnv = `OPENAI_BASE_URL=${ep.openAiBase}\nOPENAI_API_KEY=${settings.authKey}`;
 
   return (
     <div className="space-y-4">
       <div className="space-y-1.5">
         <p className="text-[11px] text-muted-foreground">
-          Expose your Claude accounts as an Anthropic-compatible API endpoint.
-          External tools (OpenCode, Cursor, etc.) can use your accounts via this proxy.
+          Expose your accounts as an API that speaks both the Anthropic and OpenAI
+          formats, so most SDKs need only a new base URL. The default path answers
+          from your Claude accounts; pick a provider below to run its agent instead,
+          which also unlocks image generation.
         </p>
       </div>
 
@@ -94,7 +95,7 @@ export function ProxySettingsSection() {
         <div className="space-y-0.5">
           <Label className="text-xs">Enable Proxy</Label>
           <p className="text-[11px] text-muted-foreground">
-            Accept API requests on /proxy/v1/messages
+            Accept API requests under /proxy
           </p>
         </div>
         <Switch
@@ -153,7 +154,7 @@ export function ProxySettingsSection() {
         <div className="space-y-2 rounded-md border p-3 bg-muted/30">
           <div className="flex items-center justify-between">
             <h4 className="text-[11px] font-medium">Connection Info</h4>
-            <ProxyTestButton authKey={settings.authKey!} baseUrl={window.location.origin} />
+            <ProxyTestButton authKey={settings.authKey!} baseUrl={window.location.origin} provider={provider} />
           </div>
 
           {/* Target provider — the only thing that differs between the two
@@ -217,6 +218,19 @@ export function ProxySettingsSection() {
             </div>
           </div>
 
+          {/* Images live only under a provider — the unscoped path has no such route. */}
+          {ep.imagesGenerations && ep.imagesEdits && (
+            <div className="space-y-1">
+              <Label className="text-[10px] text-muted-foreground">Image Endpoints</Label>
+              <code className="block text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded truncate">
+                {ep.imagesGenerations}
+              </code>
+              <code className="block text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded truncate">
+                {ep.imagesEdits}
+              </code>
+            </div>
+          )}
+
           {!hasTunnel && (
             <p className="text-[10px] text-muted-foreground">
               Start a Cloudflare tunnel (Share) to get a public URL.

package/src/web/components/settings/proxy-test-section.tsx

@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { CLAUDE_MODELS } from "../../../types/claude-models";
+import { proxyEndpoints } from "@/lib/proxy-endpoints";
 import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger,
 } from "@/components/ui/dialog";
@@ -16,6 +17,8 @@ type EndpointFormat = "anthropic" | "openai";
 interface ProxyTestDialogProps {
   authKey: string;
   baseUrl: string;
+  /** Provider prefix to test; empty means the unscoped Claude path. */
+  provider?: string;
 }
 
 export function ProxyTestButton(props: ProxyTestDialogProps) {
@@ -42,10 +45,12 @@ export function ProxyTestButton(props: ProxyTestDialogProps) {
   );
 }
 
-function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
+function ProxyTestForm({ authKey, baseUrl, provider }: ProxyTestDialogProps) {
   const [format, setFormat] = useState<EndpointFormat>("anthropic");
   const [message, setMessage] = useState(DEFAULT_MESSAGE);
-  const [model, setModel] = useState(DEFAULT_MODEL);
+  // Only the unscoped path is Claude's. Another provider rejects a Claude model
+  // name outright, so the test starts with none and lets that provider choose.
+  const [model, setModel] = useState(provider ? "" : DEFAULT_MODEL);
   const [streaming, setStreaming] = useState(true);
   const [testing, setTesting] = useState(false);
   const [output, setOutput] = useState<string | null>(null);
@@ -75,11 +80,18 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
     const start = Date.now();
 
     const isOpenAi = format === "openai";
-    const endpoint = isOpenAi
-      ? `${baseUrl}/proxy/v1/chat/completions`
-      : `${baseUrl}/proxy/v1/messages`;
+    // Same helper the Connection Info card uses. Testing the unscoped path while
+    // the card showed a provider was exactly the bug: the answer came back from
+    // Claude and looked like the proxy returning the wrong thing.
+    const ep = proxyEndpoints(baseUrl, provider);
+    const endpoint = isOpenAi ? ep.openAiChatCompletions : ep.anthropicMessages;
 
-    const body = JSON.stringify({ model, max_tokens: 256, stream: streaming, messages: [{ role: "user", content: message }] });
+    const body = JSON.stringify({
+      ...(model ? { model } : {}),
+      max_tokens: 256,
+      stream: streaming,
+      messages: [{ role: "user", content: message }],
+    });
 
     const headers: Record<string, string> = { "Content-Type": "application/json" };
     if (isOpenAi) {
@@ -147,23 +159,39 @@ function ProxyTestForm({ authKey, baseUrl }: ProxyTestDialogProps) {
             </button>
           ))}
         </div>
-        <p className="text-[9px] text-muted-foreground">
+        <p className="text-[9px] text-muted-foreground break-all">
           {format === "anthropic" ? "x-api-key header" : "Authorization: Bearer header"}
+          {" · "}
+          <code>{`/proxy${provider ? `/${provider}` : ""}/v1/${format === "anthropic" ? "messages" : "chat/completions"}`}</code>
         </p>
       </div>
 
-      {/* Model */}
+      {/* Model — the Claude list only applies to the unscoped path. */}
       <div className="space-y-1.5">
         <Label className="text-[11px]">Model</Label>
-        <select
-          value={model}
-          onChange={(e) => setModel(e.target.value)}
-          className="h-8 w-full rounded-md border bg-background px-2 text-[11px]"
-        >
-          {CLAUDE_MODELS.map((m) => (
-            <option key={m.value} value={m.value}>{m.value}</option>
-          ))}
-        </select>
+        {provider ? (
+          <>
+            <Input
+              value={model}
+              onChange={(e) => setModel(e.target.value)}
+              placeholder="leave empty to let the provider choose"
+              className="h-8 text-[11px] font-mono"
+            />
+            <p className="text-[9px] text-muted-foreground">
+              Names come from <code>GET /proxy/{provider}/v1/models</code>.
+            </p>
+          </>
+        ) : (
+          <select
+            value={model}
+            onChange={(e) => setModel(e.target.value)}
+            className="h-8 w-full rounded-md border bg-background px-2 text-[11px]"
+          >
+            {CLAUDE_MODELS.map((m) => (
+              <option key={m.value} value={m.value}>{m.value}</option>
+            ))}
+          </select>
+        )}
       </div>
 
       {/* Streaming toggle */}

package/src/web/hooks/use-wake-lock.ts

@@ -0,0 +1,148 @@
+/**
+ * Keeps the device screen lit while a chat turn is in flight.
+ *
+ * The whole point is a tablet or phone propped up next to you: a long turn produces no touch
+ * input, so the OS dims and locks the screen mid-answer and you lose the thread. The browser's
+ * Screen Wake Lock API asks the OS not to do that, and this hook holds the lock exactly for as
+ * long as something is running.
+ *
+ * Scoped to the *device*, not the project. Favicon and title are per-project because a window
+ * shows one project, but there is one screen — scoping the lock to the active project would
+ * dim the display while another project's turn is still running.
+ *
+ * "Running" is `phase !== "idle"`, which is what `streaming-store` records. That deliberately
+ * includes the wait on an approval or an AskUserQuestion card: the server leaves the phase at
+ * `thinking` while the SDK blocks on the answer, and a screen that dies right as the agent asks
+ * you something is the worst moment to lose it.
+ */
+
+import { useEffect } from "react";
+import { useStreamingStore } from "@/stores/streaming-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useWakeLockStore } from "@/stores/wake-lock-store";
+
+/** The slice of `WakeLockSentinel` this code touches. Declared structurally so the file does
+ *  not depend on the DOM lib shipping the type. */
+export interface WakeLockSentinelLike {
+  release: () => Promise<void>;
+  addEventListener: (type: "release", listener: () => void) => void;
+}
+
+/** Why the feature is or is not available here — the Settings switch explains itself with this. */
+export type WakeLockSupport = "ok" | "insecure" | "unsupported";
+
+/**
+ * The API is gated on a secure context, so PPM reached over plain HTTP — the usual
+ * `http://192.168.x.x:3211` LAN address — has no `navigator.wakeLock` at all. That is by far the
+ * likeliest reason this does nothing on someone's tablet, and it deserves a distinct answer
+ * from "your browser is too old".
+ */
+export function wakeLockSupport(): WakeLockSupport {
+  if (typeof navigator !== "undefined" && "wakeLock" in navigator) return "ok";
+  if (typeof window !== "undefined" && window.isSecureContext === false) return "insecure";
+  return "unsupported";
+}
+
+export interface WakeLockSessionDeps {
+  /** Acquire a lock. Rejects when the platform refuses (battery saver, low battery, hidden tab). */
+  request: () => Promise<WakeLockSentinelLike>;
+  isVisible: () => boolean;
+  /** Subscribe to visibility changes; returns an unsubscribe. */
+  onVisibilityChange: (listener: () => void) => () => void;
+  /** Reports whether a lock is actually held, for the indicator. */
+  onActive: (active: boolean) => void;
+}
+
+/**
+ * Holds a wake lock until the returned teardown runs.
+ *
+ * The re-acquire on `visibilitychange` is not optional. Browsers release the lock every time the
+ * document is hidden — switching tabs, switching apps, a manual screen lock — and never restore
+ * it. Without this listener the feature works once and then silently stops for the rest of the
+ * session, which is the classic way to get this wrong.
+ *
+ * A refusal is a normal outcome, not an error: the platform is allowed to say no when the
+ * battery is low or a power-saving mode is on. Retrying in a loop would only burn what little
+ * battery prompted the refusal, so a failed attempt just waits for the next visibility change.
+ */
+export function startWakeLockSession(deps: WakeLockSessionDeps): () => void {
+  let sentinel: WakeLockSentinelLike | null = null;
+  let stopped = false;
+  // `sentinel` is only assigned after the request resolves, so it cannot by itself stop a second
+  // attempt started while the first is still in flight — which is exactly what rapid tab
+  // flapping produces, and it would leak the lock the second attempt overwrites.
+  let acquiring = false;
+
+  const acquire = async (): Promise<void> => {
+    if (stopped || sentinel || acquiring || !deps.isVisible()) return;
+    acquiring = true;
+    try {
+      const next = await deps.request();
+      // Teardown may have run while the request was in flight; do not leak the lock.
+      if (stopped) {
+        void next.release().catch(() => {});
+        return;
+      }
+      sentinel = next;
+      next.addEventListener("release", () => {
+        // The platform took it back. Drop our handle so a later visibility change can re-acquire.
+        if (sentinel === next) sentinel = null;
+        if (!stopped) deps.onActive(false);
+      });
+      deps.onActive(true);
+    } catch {
+      deps.onActive(false);
+    } finally {
+      acquiring = false;
+    }
+  };
+
+  const unsubscribe = deps.onVisibilityChange(() => {
+    if (deps.isVisible()) {
+      void acquire();
+      return;
+    }
+    // Hidden: the browser always releases the lock here. Drop our handle now instead of waiting
+    // for the `release` event, because the two are separate tasks with no guaranteed order — if
+    // `visibilitychange` fires first on the way back, a stale handle would make `acquire` think
+    // a lock is still held and skip the re-acquire for the rest of the session.
+    sentinel = null;
+    deps.onActive(false);
+  });
+
+  void acquire();
+
+  return () => {
+    stopped = true;
+    unsubscribe();
+    deps.onActive(false);
+    const held = sentinel;
+    sentinel = null;
+    if (held) void held.release().catch(() => {});
+  };
+}
+
+/** Mount once, app-wide. */
+export function useWakeLock(): void {
+  const anyRunning = useStreamingStore((s) => s.sessions.size > 0);
+  const enabled = useSettingsStore((s) => s.keepScreenAwake);
+
+  useEffect(() => {
+    if (!enabled || !anyRunning) return;
+    if (wakeLockSupport() !== "ok") return;
+
+    const wakeLock = (navigator as Navigator & {
+      wakeLock: { request: (type: "screen") => Promise<WakeLockSentinelLike> };
+    }).wakeLock;
+
+    return startWakeLockSession({
+      request: () => wakeLock.request("screen"),
+      isVisible: () => document.visibilityState === "visible",
+      onVisibilityChange: (listener) => {
+        document.addEventListener("visibilitychange", listener);
+        return () => document.removeEventListener("visibilitychange", listener);
+      },
+      onActive: (active) => useWakeLockStore.getState().setActive(active),
+    });
+  }, [enabled, anyRunning]);
+}

package/src/web/lib/proxy-endpoints.ts

@@ -0,0 +1,39 @@
+/**
+ * The one place that knows how a proxy URL is shaped.
+ *
+ * The Connection Info card and the Test dialog both need these. They used to
+ * build them separately, and the Test dialog never learned about provider
+ * prefixes — so picking a provider showed one set of URLs while Test quietly
+ * called another, and the answer came back from the wrong engine.
+ */
+
+/** `<root>/proxy` for the default Claude path, `<root>/proxy/<provider>` otherwise. */
+export function proxyPrefix(root: string, provider?: string): string {
+  return `${root}/proxy${provider ? `/${provider}` : ""}`;
+}
+
+export interface ProxyEndpoints {
+  /** Anthropic SDK base — the SDK appends `/v1/messages` itself. */
+  anthropicBase: string;
+  /** OpenAI SDK base — the SDK appends `/chat/completions` itself. */
+  openAiBase: string;
+  anthropicMessages: string;
+  openAiChatCompletions: string;
+  models: string;
+  /** Images live only under a provider; the default path has no such route. */
+  imagesGenerations: string | null;
+  imagesEdits: string | null;
+}
+
+export function proxyEndpoints(root: string, provider?: string): ProxyEndpoints {
+  const prefix = proxyPrefix(root, provider);
+  return {
+    anthropicBase: prefix,
+    openAiBase: `${prefix}/v1`,
+    anthropicMessages: `${prefix}/v1/messages`,
+    openAiChatCompletions: `${prefix}/v1/chat/completions`,
+    models: `${prefix}/v1/models`,
+    imagesGenerations: provider ? `${prefix}/v1/images/generations` : null,
+    imagesEdits: provider ? `${prefix}/v1/images/edits` : null,
+  };
+}

package/src/web/stores/settings-store.ts

@@ -47,6 +47,9 @@ interface SettingsState {
   /** User ticked "don't show again" on the remote-desktop warning that precedes every open
    *  (`remote-desktop-warning-gate.tsx`); once true the viewer connects straight away. */
   remoteDesktopWarningDismissed: boolean;
+  /** Hold a screen wake lock while any chat turn is running, so a propped-up tablet does not
+   *  dim mid-answer. Defaults on; see `hooks/use-wake-lock.ts`. */
+  keepScreenAwake: boolean;
   deviceName: string | null;
   version: string | null;
   tunnelActive: boolean;
@@ -73,6 +76,7 @@ interface SettingsState {
   setExplorerSkin: (pref: ExplorerSkinPref) => void;
   toggleRemoteDesktopStatsVisible: () => void;
   setRemoteDesktopWarningDismissed: (dismissed: boolean) => void;
+  setKeepScreenAwake: (enabled: boolean) => void;
   fetchServerInfo: () => Promise<void>;
   /** Re-push the in-memory theme selection to the server (see the action for why). */
   syncThemeToServer: () => Promise<void>;
@@ -98,6 +102,7 @@ interface PersistedSettings {
   explorerSkin?: ExplorerSkinPref;
   remoteDesktopStatsVisible?: boolean;
   remoteDesktopWarningDismissed?: boolean;
+  keepScreenAwake?: boolean;
 }
 
 const VALID_STYLES: PpmThemeStyle[] = ["aurora", "slate", "precision", "custom"];
@@ -252,6 +257,7 @@ function applyServerUiPrefs(data: Record<string, unknown>) {
   }
   if (typeof data.remoteDesktopStatsVisible === "boolean") patch.remoteDesktopStatsVisible = data.remoteDesktopStatsVisible;
   if (typeof data.remoteDesktopWarningDismissed === "boolean") patch.remoteDesktopWarningDismissed = data.remoteDesktopWarningDismissed;
+  if (typeof data.keepScreenAwake === "boolean") patch.keepScreenAwake = data.keepScreenAwake;
   const dbExpanded = sanitizeDbExpanded(data.dbSidebarExpanded);
   if (dbExpanded) patch.dbSidebarExpanded = dbExpanded;
   if (Object.keys(patch).length === 0) return;
@@ -281,6 +287,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
   explorerSkin: (_initial.explorerSkin === "windows" || _initial.explorerSkin === "macos") ? _initial.explorerSkin : "auto",
   remoteDesktopStatsVisible: _initial.remoteDesktopStatsVisible ?? false,
   remoteDesktopWarningDismissed: _initial.remoteDesktopWarningDismissed ?? false,
+  keepScreenAwake: _initial.keepScreenAwake ?? true,
   deviceName: null,
   version: null,
   tunnelActive: false,
@@ -405,6 +412,11 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     set({ remoteDesktopWarningDismissed: dismissed });
   },
 
+  setKeepScreenAwake: (enabled) => {
+    persistUiPref({ keepScreenAwake: enabled });
+    set({ keepScreenAwake: enabled });
+  },
+
   setEditorTabStyle: (style) => {
     persistUiPref({ editorTabStyle: style });
     set({ editorTabStyle: style });