@hienlh/ppm 0.23.5 → 0.23.7

package/src/web/components/layout/status-bar.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import { memo, useState } from "react";
 import { PanelBottom, GitBranch, ArrowUp, ArrowDown, Check } from "@/lib/icons";
 import { useExtensionStore, type StatusBarItemUI } from "@/stores/extension-store";
 import { usePanelStore } from "@/stores/panel-store";
@@ -11,6 +11,7 @@ import { ThemePicker } from "@/components/settings/theme-picker";
 import { UpgradeButton } from "@/components/layout/upgrade-button";
 import { WakeLockStatusBarItem } from "@/components/layout/wake-lock-indicator";
 import { countDockTabs } from "@/components/layout/dock-tabs";
+import { BranchPicker } from "@/components/git/branch-picker";
 import { DOCK_PANEL_ID } from "@/stores/panel-utils";
 import { cn } from "@/lib/utils";
 
@@ -59,34 +60,56 @@ export const StatusBar = memo(function StatusBar() {
   );
 });
 
-/** Git branch + ahead/behind + synced indicator for the active project. */
+/**
+ * Git branch + ahead/behind + synced indicator for the active project, and the
+ * one way into the branch picker — the same gesture as VS Code's, where this
+ * item is the trigger for "Select a branch or tag to checkout".
+ *
+ * The whole group is the button, counts included, because that is what VS Code
+ * makes clickable; the bar is `hidden md:flex`, so the picker it opens is
+ * desktop-only by construction rather than by a second breakpoint check.
+ */
 const GitStatus = memo(function GitStatus() {
   const activeProjectName = useProjectStore((s) => s.activeProject?.name ?? null);
   const meta = useGitStatusStore((s) => (activeProjectName ? s.meta.get(activeProjectName) : undefined));
+  const [pickerOpen, setPickerOpen] = useState(false);
 
-  if (!meta?.branch) return null;
+  if (!meta?.branch || !activeProjectName) return null;
   const { branch, ahead, behind, tracking } = meta;
   const synced = !!tracking && ahead === 0 && behind === 0;
 
   return (
-    <span className="flex items-center gap-2 min-w-0">
-      <span className="flex items-center gap-1 text-primary min-w-0" title={tracking ? `Tracking ${tracking}` : "No upstream"}>
-        <GitBranch className="size-3 shrink-0" />
-        <span className="truncate max-w-[140px]">{branch}</span>
-      </span>
-      {/* On a bar under 36rem the counts give way, so the branch name stays readable. */}
-      {(ahead > 0 || behind > 0) && (
-        <span className="flex items-center gap-1.5 shrink-0 @max-xl:hidden">
-          {ahead > 0 && <span className="flex items-center gap-0.5"><ArrowUp className="size-3" />{ahead}</span>}
-          {behind > 0 && <span className="flex items-center gap-0.5"><ArrowDown className="size-3" />{behind}</span>}
+    <>
+      <button
+        onClick={() => setPickerOpen(true)}
+        title={`Checkout a branch or tag — ${tracking ? `tracking ${tracking}` : "no upstream"}`}
+        aria-label={`Current branch ${branch}. Checkout a branch or tag`}
+        // `bg-accent/15` is shadcn's hover *surface* at 15% over a near-identical
+        // panel — measured at a 1.01 contrast ratio, i.e. no hover at all. The
+        // brand blue lives in `primary`; see the note in `branch-picker.tsx`.
+        className="flex items-center gap-2 min-w-0 px-1 rounded-sm transition-colors hover:bg-primary/10"
+      >
+        <span className="flex items-center gap-1 text-primary min-w-0">
+          <GitBranch className="size-3 shrink-0" />
+          <span className="truncate max-w-[140px]">{branch}</span>
         </span>
+        {/* On a bar under 36rem the counts give way, so the branch name stays readable. */}
+        {(ahead > 0 || behind > 0) && (
+          <span className="flex items-center gap-1.5 shrink-0 @max-xl:hidden">
+            {ahead > 0 && <span className="flex items-center gap-0.5"><ArrowUp className="size-3" />{ahead}</span>}
+            {behind > 0 && <span className="flex items-center gap-0.5"><ArrowDown className="size-3" />{behind}</span>}
+          </span>
+        )}
+        {synced && (
+          <span className="flex items-center gap-1 text-success shrink-0 @max-xl:hidden">
+            <Check className="size-3" />synced
+          </span>
+        )}
+      </button>
+      {pickerOpen && (
+        <BranchPicker projectName={activeProjectName} onClose={() => setPickerOpen(false)} />
       )}
-      {synced && (
-        <span className="flex items-center gap-1 text-success shrink-0 @max-xl:hidden">
-          <Check className="size-3" />synced
-        </span>
-      )}
-    </span>
+    </>
   );
 });
 

package/src/web/components/settings/accounts/account-card.tsx

@@ -27,6 +27,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip
 import { AccountCardShell } from "./accounts-pane-header";
 import { formatExpiry, formatLastUpdated, tokenStatus } from "./account-usage-format";
 import type { DailyGuardState } from "../../../../shared/codex-daily-guard.ts";
+import type { ReactNode } from "react";
 import type { ResetCredits } from "../../../../types/chat";
 import { ResetCreditsChip, ScopedBucketRows } from "./account-usage-extras";
 
@@ -73,6 +74,8 @@ export interface AccountCardProps {
   onReauth?: (id: string) => void;
   /** Codex's free rate-limit resets for this account, shown in the footer. */
   resetCredits?: ResetCredits;
+  /** Control beside the reset count — Codex's "Use reset", which renders only at a limit. */
+  resetCreditAction?: ReactNode;
 }
 
 // Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
@@ -83,7 +86,7 @@ const STRIP_WIDTH = { readOnly: "min-w-[220px]", withActions: "min-w-[300px]" }
 export function AccountCard({
   entry, isActive, accountInfo, onToggle, toggling, onDelete, onExport, onViewProfile, flash,
   onSelect, unselectableReason, selecting, planLabel, dailyGuard, onDailyGuardToggle, dailyGuardToggling,
-  reauthHint, onReauth, resetCredits, layout = "list",
+  reauthHint, onReauth, resetCredits, resetCreditAction, layout = "list",
 }: AccountCardProps) {
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet || usage.weeklyScoped?.length;
@@ -241,12 +244,16 @@ export function AccountCard({
             </Tooltip>
           )}
           {!isExpired && onToggle && (
+            // The track is 36x20, under the 44px minimum, and padding a wrapper around it
+            // changes nothing — only the button itself takes the tap. The pseudo-element is
+            // the target: 44px tall, and 40px wide rather than 44 because the extra would
+            // reach past the 2px gap into the delete button beside it.
             <Switch
               checked={status !== "disabled"}
               onCheckedChange={() => onToggle(entry.accountId, status)}
               disabled={toggling || status === "cooldown"}
               aria-label={status === "disabled" ? "Enable account" : "Disable account"}
-              className="cursor-pointer"
+              className="cursor-pointer relative before:absolute before:content-[''] before:-inset-y-3 before:-inset-x-0.5"
             />
           )}
           {onDelete && (
@@ -318,6 +325,7 @@ export function AccountCard({
 
       <div className="flex items-center gap-2 text-[10px] text-text-subtle flex-wrap">
         <ResetCreditsChip credits={resetCredits} />
+        {resetCreditAction}
         {usage.lastFetchedAt && (
           <AccountHint
             className="inline-flex items-center gap-1"

package/src/web/components/settings/accounts/account-usage-extras.tsx

@@ -5,7 +5,8 @@
  * - `ScopedBucketRows` — a model's own weekly limit (Claude's "Fable"), one bar per model,
  *   labelled with the name the provider gives it.
  * - `ResetCreditsChip` — how many free rate-limit resets Codex has granted the account and
- *   when the next one lapses. PPM only reports these; they are spent from Codex itself.
+ *   when the next one lapses. Spending one is `CodexResetCreditButton`, shown beside it only
+ *   once a limit is reached.
  */
 
 import { RotateCcw } from "@/lib/icons";
@@ -32,7 +33,7 @@ export function ResetCreditsChip({ credits }: { credits?: ResetCredits }) {
     : `Codex has granted this account ${n} free rate-limit reset${n === 1 ? "" : "s"}`
       + `${credits.title ? ` (${credits.title})` : ""}.`
       + `${credits.nextExpiresAt ? ` The next one expires on ${new Date(credits.nextExpiresAt).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })}.` : ""}`
-      + " Use one from the Codex app when a limit is reached — PPM only shows the count.";
+      + " A \"Use reset\" button appears here once a limit is reached; a reset moves the weekly reset date, so spending one earlier wastes it.";
   return (
     <AccountHint className={`inline-flex items-center gap-1 ${n > 0 ? "text-primary" : ""}`} hint={hint}>
       <RotateCcw className="size-3 shrink-0" aria-hidden />

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

@@ -28,6 +28,7 @@ import { CodexUsageRows } from "./codex-usage-rows";
 import { CODEX_SIGNED_OUT_HINT, useCodexAccounts, type CodexAccount } from "./use-codex-accounts";
 import { CodexSignInAgainDialog } from "./codex-sign-in-again-dialog";
 import { ResetCreditsChip } from "./account-usage-extras";
+import { CodexResetCreditButton } from "./codex-reset-credit-button";
 import { AccountHint } from "./account-hint";
 import { codexPlanLabel } from "../../../../shared/codex-plan-label.ts";
 import { dailyGuardState } from "../../../../shared/codex-daily-guard.ts";
@@ -137,8 +138,9 @@ export function CodexAccountsSection() {
                   </div>
                   <CodexUsageRows usage={u} />
                   {u.resetCredits && (
-                    <div className="text-[10px] text-text-subtle">
+                    <div className="flex items-center gap-2 flex-wrap text-[10px] text-text-subtle">
                       <ResetCreditsChip credits={u.resetCredits} />
+                      <CodexResetCreditButton account={a} usage={u} onDone={(m) => { c.setMsg(m); void c.load(); }} />
                     </div>
                   )}
                   {u.session == null && (() => {

package/src/web/components/settings/accounts/codex-reset-credit-button.tsx

@@ -0,0 +1,120 @@
+/**
+ * "Use reset": spend one of Codex's free rate-limit resets on an account — offered only once a
+ * limit is actually reached.
+ *
+ * Rendered nothing at all otherwise, on purpose: a reset is one-use, it moves the weekly reset
+ * date (the next weekly reset is counted from when you continue; the original one is not also
+ * granted), and spent early it throws away whatever was left of the window. The server applies
+ * the same rule (`usageLimitReached`) against a live read, so a stale card cannot slip past it.
+ *
+ * The confirmation says exactly that before anything is spent. Bottom sheet below `md`,
+ * centred dialog above, like every other confirmation in the accounts pane.
+ */
+
+import { useState } from "react";
+import { Loader2, RotateCcw } from "@/lib/icons";
+import { api } from "@/lib/api-client";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { canUseResetCredit } from "../../../../shared/usage-extra.ts";
+import type { LimitBucket, ResetCredits } from "../../../../types/chat";
+
+type Outcome = "reset" | "nothingToReset" | "noCredit" | "alreadyRedeemed";
+
+const OUTCOME_MESSAGE: Record<Outcome, (label: string) => string> = {
+  reset: (l) => `${l}: limits reset to 0%. The weekly reset date now counts from your next use.`,
+  nothingToReset: (l) => `${l}: nothing needed resetting, so the reset was kept.`,
+  noCredit: (l) => `${l} has no free reset left.`,
+  alreadyRedeemed: (l) => `${l}: that reset had already been used.`,
+};
+
+function when(iso?: string): string | null {
+  return iso ? new Date(iso).toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" }) : null;
+}
+
+export function CodexResetCreditButton({ account, usage, onDone }: {
+  account: { id: string; label: string };
+  usage: { session?: LimitBucket; weekly?: LimitBucket; resetCredits?: ResetCredits };
+  /** Called after an attempt, with a message saying what happened (or why it was refused). */
+  onDone: (message: string) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [confirming, setConfirming] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  if (!canUseResetCredit(usage)) return null;
+  const credits = usage.resetCredits!;
+
+  async function spend() {
+    setBusy(true);
+    try {
+      const r = await api.post<{ outcome: Outcome }>(`/api/codex-accounts/${account.id}/reset-credit`);
+      onDone(OUTCOME_MESSAGE[r.outcome]?.(account.label) ?? `${account.label}: ${r.outcome}`);
+    } catch (e) {
+      onDone((e as Error).message || "Could not use the reset");
+    } finally {
+      setBusy(false);
+      setConfirming(false);
+    }
+  }
+
+  const weeklyNow = when(usage.weekly?.resetsAt);
+  const expires = when(credits.nextExpiresAt);
+  const body = (
+    <div className="space-y-3" data-testid="codex-reset-credit-confirm">
+      <p className="text-sm">
+        Use 1 of <span className="font-medium">{account.label}</span>'s {credits.available} free reset{credits.available === 1 ? "" : "s"}?
+      </p>
+      <ul className="text-xs text-text-secondary space-y-1.5 list-disc pl-4">
+        <li>{credits.title ?? "Full reset"}: the 5-hour and weekly usage go back to 0% now.</li>
+        <li>
+          The weekly reset date moves: the next one is about 7 days after you continue using Codex
+          {weeklyNow ? `, not ${weeklyNow} as now` : ""}. You do not also get that one.
+        </li>
+        {expires && <li>This spends the reset that expires first ({expires}).</li>}
+      </ul>
+      <div className="flex flex-col-reverse md:flex-row gap-2 md:justify-end pt-1">
+        <Button variant="outline" onClick={() => setConfirming(false)} disabled={busy} className="min-h-11">
+          Keep it
+        </Button>
+        <Button onClick={() => void spend()} disabled={busy} className="min-h-11 gap-1.5">
+          {busy ? <Loader2 className="size-4 animate-spin" /> : <RotateCcw className="size-4" />}
+          Use reset
+        </Button>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <Button
+        size="sm"
+        variant="outline"
+        className="min-h-11 md:min-h-0 md:h-7 gap-1 px-2 text-[11px] cursor-pointer border-primary/40 text-primary"
+        onClick={() => setConfirming(true)}
+        disabled={busy}
+      >
+        <RotateCcw className="size-3.5" /> Use reset
+      </Button>
+      {confirming && (isMobile ? (
+        <BottomSheet open onClose={() => { if (!busy) setConfirming(false); }}>
+          <div className="px-4 pb-4">
+            <h2 className="text-base font-semibold mb-3">Use a free reset</h2>
+            {body}
+          </div>
+        </BottomSheet>
+      ) : (
+        <Dialog open onOpenChange={(v) => { if (!v && !busy) setConfirming(false); }}>
+          <DialogContent className="sm:max-w-sm">
+            <DialogHeader>
+              <DialogTitle className="text-sm">Use a free reset</DialogTitle>
+            </DialogHeader>
+            {body}
+          </DialogContent>
+        </Dialog>
+      ))}
+    </>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { useState, useEffect, useCallback } from "react";
-import { ExternalLink, RefreshCw, Trash2 } from "@/lib/icons";
+import { AlertTriangle, ExternalLink, RefreshCw, Trash2 } from "@/lib/icons";
+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -17,6 +18,7 @@ import { openSettings } from "./open-settings";
 import { CodexContextSettings } from "./codex-context-settings";
 import { McpSignInList } from "@/components/mcp-auth/mcp-sign-in-list";
 import type { ModelOption } from "../../../types/chat";
+import type { ProviderProbeStatus } from "../../../providers/provider-probe";
 
 const EFFORT_OPTIONS = [
   { value: "low", label: "Low" },
@@ -48,6 +50,8 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [revision, setRevision] = useState(0);
+  const [probeStatuses, setProbeStatuses] = useState<ProviderProbeStatus[]>([]);
+  const [probing, setProbing] = useState(false);
 
   useEffect(() => {
     getAISettings().then((s) => {
@@ -56,7 +60,25 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
     }).catch((e) => setError(e.message));
   }, []);
 
-  // Fetch models when active tab changes — uses global settings endpoint
+  // A provider keeps its config entry — and so its tab — once it has ever been
+  // configured, which says nothing about whether chat can reach it now. Keyed on
+  // the tab rather than on mount so switching back picks up a retry that has
+  // since succeeded on its own; `activeRegistered` is deliberately NOT a
+  // dependency, since it is derived from what this sets.
+  useEffect(() => {
+    if (!activeTab) return;
+    api.get<ProviderProbeStatus[]>("/api/settings/ai/providers/status")
+      .then(setProbeStatuses)
+      .catch(() => setProbeStatuses([]));
+  }, [activeTab]);
+
+  const unavailable = probeStatuses.find((s) => s.id === activeTab && !s.registered);
+  // A provider nothing probed (claude) is available by construction.
+  const activeRegistered = !unavailable;
+
+  // Fetch models when active tab changes — uses global settings endpoint.
+  // `activeRegistered` is in the deps so a successful retry refetches the list
+  // that came back empty while the provider was missing from the registry.
   useEffect(() => {
     if (!activeTab) return;
     setModelsLoading(true);
@@ -64,7 +86,19 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
       .then(setModels)
       .catch(() => setModels([]))
       .finally(() => setModelsLoading(false));
-  }, [activeTab]);
+  }, [activeTab, activeRegistered]);
+
+  const retryProbe = async () => {
+    setProbing(true);
+    try {
+      const updated = await api.post<ProviderProbeStatus>(`/api/settings/ai/providers/${activeTab}/probe`);
+      setProbeStatuses((prev) => prev.map((s) => (s.id === updated.id ? updated : s)));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setProbing(false);
+    }
+  };
 
   const providerTabs = settings
     ? Object.keys(settings.providers)
@@ -197,6 +231,36 @@ export function AISettingsSection({ compact }: { compact?: boolean } = {}) {
       )}
 
       <div className={innerGap}>
+        {/* Why chat is not offering this provider. Without it the only record is a
+            log line at startup, and the composer's provider chip is hidden while
+            one provider is registered — so the option does not even render. */}
+        {unavailable && (
+          <div className="flex items-start gap-2 rounded-md border border-warning/30 bg-warning/5 px-2.5 py-2">
+            <AlertTriangle className="size-3.5 text-warning shrink-0 mt-0.5" />
+            <div className="min-w-0 flex-1 space-y-1.5">
+              <p className={`${labelSize} text-text-secondary`}>
+                {PROVIDER_NAMES[activeTab] ?? activeTab} is not available in chat — PPM could not start it.
+              </p>
+              <p className="text-[11px] text-muted-foreground break-words">{unavailable.reason}</p>
+              {unavailable.nextProbeAt && (
+                <p className="text-[11px] text-text-subtle">
+                  Checking again at {new Date(unavailable.nextProbeAt).toLocaleTimeString()}
+                </p>
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={retryProbe}
+                disabled={probing}
+                className="gap-1.5 cursor-pointer min-h-11 md:min-h-8"
+              >
+                <RefreshCw className={`size-3.5 ${probing ? "animate-spin" : ""}`} />
+                {probing ? "Checking..." : "Check again"}
+              </Button>
+            </div>
+          </div>
+        )}
+
         {/* Codex sign-ins moved to the Accounts pane, next to the Claude ones — this tab is
             about how the provider runs, not which accounts it has. */}
         {activeTab === "codex" && (

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

@@ -5,14 +5,13 @@
  * light/dark within it, and System follows the OS.
  */
 
-import { WrapText, Zap } from "@/lib/icons";
+import { WrapText } from "@/lib/icons";
 import { useShallow } from "zustand/react/shallow";
 import { Button } from "@/components/ui/button";
 import { Switch } from "@/components/ui/switch";
 import { Separator } from "@/components/ui/separator";
 import { useSettingsStore, type EditorTabStyle, type ExplorerSkinPref } from "@/stores/settings-store";
 import { useIsMobile } from "@/hooks/use-is-mobile";
-import { useIsTouchOnly } from "@/hooks/use-is-touch-only";
 import { cn } from "@/lib/utils";
 import { THEME_MODE_OPTIONS } from "@/theme/theme-mode-options";
 import { ThemeGrid } from "./theme-grid";
@@ -69,17 +68,13 @@ export function AppearanceSettingsSection() {
       setExplorerSkin: s.setExplorerSkin,
     })),
   );
-  const { wordWrap, toggleWordWrap, mobileWordWrap, toggleMobileWordWrap, lspEnabled, setLspEnabled } = useSettingsStore(
+  const { wordWrap, toggleWordWrap, mobileWordWrap, toggleMobileWordWrap } = useSettingsStore(
     useShallow((s) => ({
       wordWrap: s.wordWrap, toggleWordWrap: s.toggleWordWrap,
       mobileWordWrap: s.mobileWordWrap, toggleMobileWordWrap: s.toggleMobileWordWrap,
-      lspEnabled: s.lspEnabled, setLspEnabled: s.setLspEnabled,
     })),
   );
   const isMobile = useIsMobile();
-  // Word wrap is about how wide the editor is; the language server is about what the machine
-  // is being asked to run. Two different questions, two different tests.
-  const isTouchOnly = useIsTouchOnly();
 
   return (
     <div className="space-y-6">
@@ -142,27 +137,6 @@ export function AppearanceSettingsSection() {
         />
       </section>
 
-      {/* Language server. Off until asked: it is a real process on the host (one was
-          854 MB resident), and a touch-only device never starts one.
-
-          The switch follows the same test the editor does — a device one, not the 768px
-          viewport one, or narrowing a desktop window disabled the setting and told the user
-          they were on a phone. */}
-      <section className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-3 min-w-0">
-          <Zap className="size-4 text-muted-foreground shrink-0" />
-          <div className="min-w-0">
-            <p className="text-sm font-medium">Language Server</p>
-            <p className="text-xs text-muted-foreground">
-              {isTouchOnly
-                ? "Off on a touch device — it runs a server process per project"
-                : "Completions, hover, F12, rename and quick fix (this device)"}
-            </p>
-          </div>
-        </div>
-        <Switch checked={lspEnabled && !isTouchOnly} disabled={isTouchOnly} onCheckedChange={setLspEnabled} />
-      </section>
-
       <section className="space-y-2">
         <h3 className="text-sm font-medium">Tab Style</h3>
         <OptionRow options={TAB_STYLE_OPTIONS} value={editorTabStyle} onChange={setEditorTabStyle} />