@hienlh/ppm 0.23.6 → 0.23.7

package/src/web/components/git/create-worktree-dialog.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { BranchSelect } from "@/components/git/branch-select";
 import type { GitBranch } from "../../../types/git";
 import { cn } from "@/lib/utils";
 
@@ -36,7 +37,7 @@ export function CreateWorktreeDialog({
   const [branchMode, setBranchMode] = useState<BranchMode>("new");
   const [newBranch, setNewBranch] = useState("");
   const [existingBranch, setExistingBranch] = useState("");
-  const [branches, setBranches] = useState<string[]>([]);
+  const [branches, setBranches] = useState<GitBranch[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -46,10 +47,10 @@ export function CreateWorktreeDialog({
     api
       .get<GitBranch[]>(gitUrl("/branches"))
       .then((data) => {
-        const local = data.filter((b) => !b.remote).map((b) => b.name);
+        const local = data.filter((b) => !b.remote);
         setBranches(local);
         if (local.length > 0 && !existingBranch) {
-          setExistingBranch(local[0]!);
+          setExistingBranch((local.find((b) => b.current) ?? local[0]!).name);
         }
       })
       .catch(() => setBranches([]));
@@ -143,21 +144,21 @@ export function CreateWorktreeDialog({
             onChange={(e) => setNewBranch(e.target.value)}
             className="w-full"
           />
+        ) : branches.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No branches available</p>
         ) : (
-          <select
+          /* `modal`: this is inside a Radix dialog — see the prop's note. */
+          <BranchSelect
             value={existingBranch}
-            onChange={(e) => setExistingBranch(e.target.value)}
-            className="w-full h-9 px-3 rounded-md border border-input bg-transparent text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-          >
-            {branches.length === 0 && (
-              <option value="">No branches available</option>
-            )}
-            {branches.map((b) => (
-              <option key={b} value={b}>
-                {b}
-              </option>
-            ))}
-          </select>
+            branches={branches}
+            onChange={setExistingBranch}
+            label="Existing branch"
+            testId="worktree-branch"
+            // h-9 on both, so it lines up with the Input it replaces in this form
+            // rather than with the compact panel row the picker was written for.
+            className="h-9 w-full md:h-9"
+            modal
+          />
         )}
       </div>
     </div>

package/src/web/components/git/git-repo-picker.tsx

@@ -15,16 +15,10 @@
  * whole panel: a picker tucked into a header is a picker nobody finds, and
  * until it is answered there is nothing else for the panel to show.
  */
-import { FolderGit2, GitBranch, ChevronsUpDown, RefreshCw } from "@/lib/icons";
+import { useMemo } from "react";
+import { FolderGit2, GitBranch, RefreshCw } from "@/lib/icons";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+import { SearchSelect } from "@/components/ui/search-select";
 import type { GitRepoCandidate } from "@/lib/git-repo-scope";
 import { usePrefersCoarsePointer } from "@/components/os-explorer/use-coarse-long-press";
 import { cn } from "@/lib/utils";
@@ -40,6 +34,13 @@ export function GitRepoBar({ repo, repos, onChoose }: GitRepoBarProps) {
   // a subfolder's history under the project's name, and that has to be visible.
   const single = repos.length < 2;
   const coarse = usePrefersCoarsePointer();
+  // Searchable, because a folder of checkouts is named the way this one is —
+  // `nxsys-backend-nx5833`, `…-nx5838`, `…-nx5838-ma` — and a plain menu of
+  // thirty of them is read top to bottom for the last few characters.
+  const items = useMemo(
+    () => repos.map((c) => ({ value: c.path, label: c.relative, title: c.path, icon: GitBranch })),
+    [repos],
+  );
   return (
     <div className="flex items-center gap-1.5 px-3 py-1.5 border-b border-border shrink-0 text-xs text-text-secondary">
       <FolderGit2 className="size-3.5 shrink-0 text-text-subtle" />
@@ -48,37 +49,24 @@ export function GitRepoBar({ repo, repos, onChoose }: GitRepoBarProps) {
           {repo.relative}
         </span>
       ) : (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            {/* The only way back to the other repository, so it is a full
-                44px target wherever the pointer is coarse — gated on the
-                pointer rather than on a width, because a touch laptop is wide
-                and has no mouse. On a mouse it stays out of the way. */}
-            <Button
-              variant="ghost"
-              size="sm"
-              className={cn("min-w-0 gap-1 px-1.5 text-xs", coarse ? "h-11" : "h-8")}
-            >
-              <span className="truncate" title={repo.path}>{repo.relative}</span>
-              <ChevronsUpDown className="size-3 shrink-0 opacity-60" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="max-w-[min(20rem,90vw)]">
-            <DropdownMenuLabel className="text-xs">Repository</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            {repos.map((candidate) => (
-              <DropdownMenuItem
-                key={candidate.path}
-                onClick={() => onChoose(candidate.path)}
-                className="gap-2"
-              >
-                <GitBranch className="size-3.5 shrink-0" />
-                <span className="truncate">{candidate.relative}</span>
-                {candidate.path === repo.path && <span className="ml-auto text-text-subtle">✓</span>}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <SearchSelect
+          value={repo.path}
+          items={items}
+          onChange={onChoose}
+          label="Repository"
+          searchPlaceholder="Search repositories"
+          emptyText="No matching repositories"
+          testId="git-repo-picker"
+          // Ghost, not a form field: this row says which repository, it does not
+          // ask. And it is the only way back to the other repository, so a full
+          // 44px target wherever the pointer is coarse — gated on the pointer
+          // rather than on a width, because a touch laptop is wide and has no
+          // mouse. Both heights are restated at `md:` to beat the field's own.
+          className={cn(
+            "border-transparent bg-transparent px-1.5 text-text-secondary hover:bg-accent",
+            coarse ? "h-11 md:h-11" : "h-8 md:h-8",
+          )}
+        />
       )}
     </div>
   );

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

@@ -244,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 && (

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} />