@agentprojectcontext/apx 1.39.1 → 1.40.1

package/src/interfaces/web/src/App.tsx

@@ -15,6 +15,7 @@ import { RobyBubble } from "./components/RobyBubble";
 import { Roby, RobyEmpty, type RobyMood } from "./components/Roby";
 import { ToastProvider } from "./components/Toast";
 import { Button } from "./components/ui/button";
+import { Tip } from "./components/ui/tip";
 import { TooltipProvider } from "./components/ui/tooltip";
 import { useTheme } from "./hooks/useTheme";
 import { useProjects } from "./hooks/useProjects";
@@ -51,7 +52,7 @@ export function App() {
 
   return (
     <ToastProvider>
-      <TooltipProvider delay={300}>
+      <TooltipProvider delay={0}>
         <Shell />
       </TooltipProvider>
     </ToastProvider>
@@ -71,11 +72,20 @@ function Shell() {
     next.delete("action");
     setParams(next, { replace: true });
   };
+  const openAdd = () => {
+    const next = new URLSearchParams(params);
+    next.set("action", "add-project");
+    setParams(next);
+  };
 
   return (
     <NavCollapseProvider>
       <div className="flex h-screen w-screen overflow-hidden bg-background text-foreground" data-testid="app-shell">
-        <ProjectSidebar onSelect={(href) => navigate(href)} onOpenRoby={() => setRobyOpen(true)} />
+        <ProjectSidebar
+          onSelect={(href) => navigate(href)}
+          onOpenRoby={() => setRobyOpen(true)}
+          onOpenAddProject={openAdd}
+        />
         <main className="m-2 ml-0 flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card shadow-sm">
           <TopBar onToggleTheme={toggle} isDark={theme === "dark"} pathname={location.pathname} />
           <div className="flex-1 overflow-y-auto">
@@ -151,15 +161,16 @@ function TopBar({
       </span>
       {pageActions}
       <LanguageMenu />
-      <button
-        type="button"
-        data-testid="theme-toggle"
-        onClick={onToggleTheme}
-        title={isDark ? t("topbar.light") : t("topbar.dark")}
-        className="shrink-0 rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
-      >
-        {isDark ? <Sun size={14} /> : <Moon size={14} />}
-      </button>
+      <Tip content={isDark ? t("topbar.light") : t("topbar.dark")}>
+        <button
+          type="button"
+          data-testid="theme-toggle"
+          onClick={onToggleTheme}
+          className="shrink-0 rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
+        >
+          {isDark ? <Sun size={14} /> : <Moon size={14} />}
+        </button>
+      </Tip>
     </header>
   );
 }

package/src/interfaces/web/src/components/AddProjectDialog.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { useSWRConfig } from "swr";
-import { FolderOpen, Home, Search } from "lucide-react";
+import { FolderOpen, Home, Search, X } from "lucide-react";
 import { Filesystem, Projects } from "../lib/api";
 import { Button, Dialog, Empty, Field, Input, Loading } from "./ui";
 import { useToast } from "./Toast";
@@ -8,8 +9,10 @@ import { t } from "../i18n";
 
 export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
   const { mutate } = useSWRConfig();
+  const navigate = useNavigate();
   const toast = useToast();
   const [path, setPath] = useState("");
+  const [browseOpen, setBrowseOpen] = useState(false);
   const [browsePath, setBrowsePath] = useState("");
   const [entries, setEntries] = useState<string[]>([]);
   const [parent, setParent] = useState<string | null>(null);
@@ -35,10 +38,34 @@ export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: ()
     }
   };
 
+  // Reset everything when the dialog closes so reopening starts fresh.
   useEffect(() => {
-    if (open && !browsePath) loadDirs(path || "~", true);
+    if (open) return;
+    setPath("");
+    setBrowseOpen(false);
+    setBrowsePath("");
+    setEntries([]);
+    setParent(null);
+    setBrowseError("");
   }, [open]);
 
+  const openBrowser = async () => {
+    // Try the OS-native folder picker first (osascript / zenity / PowerShell).
+    // If the daemon can't open one, fall back to the inline directory list.
+    setLoadingDirs(true);
+    try {
+      const out = await Filesystem.pickDir(t("add_project.picker_prompt"));
+      if ("cancelled" in out) return;
+      setPath(out.path);
+      return;
+    } catch {
+      setBrowseOpen(true);
+      await loadDirs(path || "~");
+    } finally {
+      setLoadingDirs(false);
+    }
+  };
+
   const submit = async () => {
     const trimmed = path.trim();
     if (!trimmed) { toast.error(t("add_project.path_required")); return; }
@@ -47,8 +74,8 @@ export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: ()
       const out = await Projects.register(trimmed);
       toast.success(t("add_project.registered", { id: out.id }));
       await mutate("/projects");
-      setPath("");
       onClose();
+      navigate(`/p/${out.id}`);
     } catch (e) {
       toast.error((e as Error).message);
     } finally { setBusy(false); }
@@ -77,44 +104,49 @@ export function AddProjectDialog({ open, onClose }: { open: boolean; onClose: ()
               onChange={(e) => setPath(e.target.value)}
               onKeyDown={(e) => { if (e.key === "Enter") submit(); }}
             />
-            <Button onClick={() => loadDirs(path || "~")} disabled={loadingDirs}>
+            <Button onClick={openBrowser} disabled={loadingDirs}>
               <Search size={14} /> {t("add_project.search_btn")}
             </Button>
           </div>
         </Field>
 
-        <div className="rounded-md border border-border bg-muted/20">
-          <div className="flex items-center justify-between border-b border-border px-3 py-2">
-            <span className="truncate font-mono text-xs text-muted-fg">{browsePath || path || "~"}</span>
-            <div className="flex gap-1">
-              <Button size="sm" variant="ghost" onClick={() => loadDirs("~")} disabled={loadingDirs}>
-                <Home size={13} />
-              </Button>
-              <Button size="sm" variant="ghost" onClick={() => parent && loadDirs(parent)} disabled={!parent || loadingDirs}>
-                ..
-              </Button>
+        {browseOpen && (
+          <div className="rounded-md border border-border bg-muted/20">
+            <div className="flex items-center justify-between border-b border-border px-3 py-2">
+              <span className="truncate font-mono text-xs text-muted-fg">{browsePath || path || "~"}</span>
+              <div className="flex gap-1">
+                <Button size="sm" variant="ghost" onClick={() => loadDirs("~")} disabled={loadingDirs}>
+                  <Home size={13} />
+                </Button>
+                <Button size="sm" variant="ghost" onClick={() => parent && loadDirs(parent)} disabled={!parent || loadingDirs}>
+                  ..
+                </Button>
+                <Button size="sm" variant="ghost" onClick={() => setBrowseOpen(false)} disabled={loadingDirs}>
+                  <X size={13} />
+                </Button>
+              </div>
+            </div>
+            <div className="max-h-64 overflow-y-auto p-2">
+              {loadingDirs && <Loading />}
+              {!loadingDirs && browseError && (
+                <Empty>{t("add_project.browser_unavailable")}</Empty>
+              )}
+              {!loadingDirs && !browseError && entries.length === 0 && <Empty>{t("add_project.no_folders")}</Empty>}
+              {!loadingDirs && !browseError && entries.map((entry) => (
+                <button
+                  key={entry}
+                  type="button"
+                  onClick={() => loadDirs(entry)}
+                  className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
+                >
+                  <FolderOpen size={14} className="text-muted-fg" />
+                  <span className="truncate">{entry.split("/").pop()}</span>
+                  <span className="ml-auto truncate font-mono text-[10px] text-muted-fg">{entry}</span>
+                </button>
+              ))}
             </div>
           </div>
-          <div className="max-h-64 overflow-y-auto p-2">
-            {loadingDirs && <Loading />}
-            {!loadingDirs && browseError && (
-              <Empty>{t("add_project.browser_unavailable")}</Empty>
-            )}
-            {!loadingDirs && !browseError && entries.length === 0 && <Empty>{t("add_project.no_folders")}</Empty>}
-            {!loadingDirs && !browseError && entries.map((entry) => (
-              <button
-                key={entry}
-                type="button"
-                onClick={() => loadDirs(entry)}
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent"
-              >
-                <FolderOpen size={14} className="text-muted-fg" />
-                <span className="truncate">{entry.split("/").pop()}</span>
-                <span className="ml-auto truncate font-mono text-[10px] text-muted-fg">{entry}</span>
-              </button>
-            ))}
-          </div>
-        </div>
+        )}
       </div>
     </Dialog>
   );

package/src/interfaces/web/src/components/ModelCombobox.tsx

@@ -2,6 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { AlertTriangle, ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn";
+import { Tip } from "./ui/tip";
 import { t } from "../i18n";
 
 // Editable combobox: type freely, matching options appear below; click one to
@@ -83,9 +84,11 @@ export function ModelCombobox({
         )}
       >
         {invalid && (
-          <span title={invalidHint || t("models_ui.invalid_hint")}>
-            <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
-          </span>
+          <Tip content={invalidHint || t("models_ui.invalid_hint")}>
+            <span>
+              <AlertTriangle className="size-3.5 shrink-0 text-amber-400" />
+            </span>
+          </Tip>
         )}
         <input
           value={query}

package/src/interfaces/web/src/components/chat/MessageBubble.tsx

@@ -4,6 +4,7 @@ import { ToolCall } from "./ToolCall";
 import { AskQuestionsCard } from "./AskQuestionsCard";
 import { AskAnswersCard, parseAskAnswerText } from "./AskAnswersCard";
 import { textOf, type ChatMsg } from "../../hooks/useChat";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 interface Props {
@@ -51,22 +52,23 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
 
         {/* Skill Inspector: which skills the per-turn RAG injected for this turn. */}
         {!mine && msg.inspector && (msg.inspector.loaded?.length || msg.inspector.hinted?.length) ? (
-          <div
-            className="flex flex-wrap items-center gap-1 text-[10px] text-sky-400/90"
-            title={t("shared_ui.skill_inspector_title", { embedder: msg.inspector.embedder || "RAG" })}
-          >
-            <Sparkles size={10} />
-            {msg.inspector.loaded?.map((s) => (
-              <span key={`l-${s}`} className="rounded bg-sky-500/15 px-1 py-0.5 font-mono">
-                {s}
-              </span>
-            ))}
-            {msg.inspector.hinted?.map((s) => (
-              <span key={`h-${s}`} className="rounded border border-sky-500/30 px-1 py-0.5 font-mono opacity-70">
-                {s}?
-              </span>
-            ))}
-          </div>
+          <Tip content={t("shared_ui.skill_inspector_title", { embedder: msg.inspector.embedder || "RAG" })}>
+            <div
+              className="flex flex-wrap items-center gap-1 text-[10px] text-sky-400/90"
+            >
+              <Sparkles size={10} />
+              {msg.inspector.loaded?.map((s) => (
+                <span key={`l-${s}`} className="rounded bg-sky-500/15 px-1 py-0.5 font-mono">
+                  {s}
+                </span>
+              ))}
+              {msg.inspector.hinted?.map((s) => (
+                <span key={`h-${s}`} className="rounded border border-sky-500/30 px-1 py-0.5 font-mono opacity-70">
+                  {s}?
+                </span>
+              ))}
+            </div>
+          </Tip>
         ) : null}
 
         {/* Ordered parts: interleaved assistant text + tool calls. */}
@@ -110,15 +112,16 @@ export function MessageBubble({ msg, isLast, isAskAnswer, onCopy }: Props) {
             <span>· {t("shared_ui.tools_count", { n: msg.parts.filter((p) => p.kind === "tool").length })}</span>
           )}
           {onCopy && copyText && (
-            <button
-              type="button"
-              onClick={() => onCopy(copyText)}
-              className="inline-flex items-center gap-1 hover:text-foreground"
-              title={t("chat_ui.copy")}
-              aria-label={t("chat_ui.copy")}
-            >
-              <Copy size={10} /> {t("chat_ui.copy")}
-            </button>
+            <Tip content={t("chat_ui.copy")}>
+              <button
+                type="button"
+                onClick={() => onCopy(copyText)}
+                className="inline-flex items-center gap-1 hover:text-foreground"
+                aria-label={t("chat_ui.copy")}
+              >
+                <Copy size={10} /> {t("chat_ui.copy")}
+              </button>
+            </Tip>
           )}
         </div>
       </div>

package/src/interfaces/web/src/components/chat/ModelPicker.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { Server, ChevronDown, X, Check } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Engines } from "../../lib/api";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 // Compact model picker for the chat composer (the panda.project pattern): a
@@ -70,23 +71,24 @@ export function ModelPicker({
 
   return (
     <div ref={wrapRef} className="relative">
-      <button
-        type="button"
-        disabled={disabled}
-        onClick={() => setOpen((v) => !v)}
-        data-testid="chat-model-picker"
-        className={cn(
-          "flex max-w-[200px] items-center gap-1 rounded-md border border-transparent px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors",
-          "hover:bg-accent/60 hover:text-foreground",
-          value && "text-foreground",
-        )}
-        title={t("chat_ui.pick_model")}
-        aria-label={t("chat_ui.pick_model")}
-      >
-        <Server className="size-3 shrink-0" />
-        <span className="truncate font-mono">{label}</span>
-        <ChevronDown className="size-3 shrink-0 opacity-60" />
-      </button>
+      <Tip content={t("chat_ui.pick_model")}>
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => setOpen((v) => !v)}
+          data-testid="chat-model-picker"
+          className={cn(
+            "flex max-w-[200px] items-center gap-1 rounded-md border border-transparent px-1.5 py-0.5 text-[11px] text-muted-foreground transition-colors",
+            "hover:bg-accent/60 hover:text-foreground",
+            value && "text-foreground",
+          )}
+          aria-label={t("chat_ui.pick_model")}
+        >
+          <Server className="size-3 shrink-0" />
+          <span className="truncate font-mono">{label}</span>
+          <ChevronDown className="size-3 shrink-0 opacity-60" />
+        </button>
+      </Tip>
 
       {open && (
         <div className="absolute bottom-full left-0 z-50 mb-1.5 w-64 rounded-lg border border-border bg-popover p-1.5 shadow-md ring-1 ring-foreground/10">

package/src/interfaces/web/src/components/deck/WidgetRow.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Badge, Switch } from "../ui";
+import { Tip } from "../ui/tip";
 import { cn } from "../../lib/cn";
 import type { DeckWidget } from "../../lib/api/deck";
 import { t } from "../../i18n";
@@ -63,13 +64,14 @@ export function WidgetRow({ widget, onToggle }: WidgetRowProps) {
       )}
     >
       {/* Source dot */}
-      <span
-        title={widget.source === "apx" ? t("deck_screen.widget_native") : t("deck_screen.widget_external")}
-        className={cn(
-          "size-2 shrink-0 rounded-full",
-          widget.source === "apx" ? "bg-emerald-500" : "bg-sky-400"
-        )}
-      />
+      <Tip content={widget.source === "apx" ? t("deck_screen.widget_native") : t("deck_screen.widget_external")}>
+        <span
+          className={cn(
+            "size-2 shrink-0 rounded-full",
+            widget.source === "apx" ? "bg-emerald-500" : "bg-sky-400"
+          )}
+        />
+      </Tip>
 
       {/* Title + desktop */}
       <div className="min-w-0 flex-1">

package/src/interfaces/web/src/components/inputs/VarTokenInput.tsx

@@ -8,6 +8,7 @@ import {
 } from "react";
 import { Plus } from "lucide-react";
 import { cn } from "../../lib/cn";
+import { Tip } from "../ui/tip";
 import { t } from "../../i18n";
 
 // VarTokenInput
@@ -285,25 +286,26 @@ export const VarTokenInput = forwardRef<VarTokenInputHandle, VarTokenInputProps>
           )}
         </div>
         <div className="relative flex">
-          <button
-            type="button"
-            // onMouseDown prevents the editor from blurring before we capture
-            // the saved range — that's what kept the caret jumping to start.
-            onMouseDown={(e) => {
-              e.preventDefault();
-              saveSelection();
-            }}
-            onClick={() => setPickerOpen((v) => !v)}
-            aria-label={t("chat_ui.insert_variable")}
-            title={t("chat_ui.insert_variable")}
-            className={cn(
-              "flex items-center justify-center px-2 min-w-8 border-l border-input text-muted-foreground rounded-r-lg",
-              "hover:bg-muted/60 hover:text-foreground transition-colors",
-              pickerOpen && "bg-muted/60 text-foreground",
-            )}
-          >
-            <Plus size={14} />
-          </button>
+          <Tip content={t("chat_ui.insert_variable")}>
+            <button
+              type="button"
+              // onMouseDown prevents the editor from blurring before we capture
+              // the saved range — that's what kept the caret jumping to start.
+              onMouseDown={(e) => {
+                e.preventDefault();
+                saveSelection();
+              }}
+              onClick={() => setPickerOpen((v) => !v)}
+              aria-label={t("chat_ui.insert_variable")}
+              className={cn(
+                "flex items-center justify-center px-2 min-w-8 border-l border-input text-muted-foreground rounded-r-lg",
+                "hover:bg-muted/60 hover:text-foreground transition-colors",
+                pickerOpen && "bg-muted/60 text-foreground",
+              )}
+            >
+              <Plus size={14} />
+            </button>
+          </Tip>
           {pickerOpen && (
             <VarPickerPopover
               query={pickerQuery}

package/src/interfaces/web/src/components/layout/ProjectSidebar.tsx

@@ -31,6 +31,7 @@ import type { ProjectEntry } from "../../types/daemon";
 interface Props {
   onSelect: (href: string) => void;
   onOpenRoby: () => void;
+  onOpenAddProject?: () => void;
 }
 
 interface ModuleItem {
@@ -158,7 +159,7 @@ function RailProjectMenu({
   );
 }
 
-export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
+export function ProjectSidebar({ onSelect, onOpenRoby, onOpenAddProject }: Props) {
   const { projects, isLoading } = useProjects();
   const location = useLocation();
   const MODULES = buildModules();
@@ -303,7 +304,7 @@ export function ProjectSidebar({ onSelect, onOpenRoby }: Props) {
             testId="nav-add-project"
             icon={<Plus size={18} />}
             active={false}
-            onClick={() => onSelect("/?action=add-project")}
+            onClick={() => (onOpenAddProject ? onOpenAddProject() : onSelect("/?action=add-project"))}
             title={t("nav.add_project")}
           />
         </div>

package/src/interfaces/web/src/components/routines/AvailableVarsCard.tsx

@@ -0,0 +1,23 @@
+import { Tip } from "../ui";
+import { t } from "../../i18n";
+import { routineVars } from "./shared";
+
+// Reference card (lives under the options column): every variable with its
+// context tag + a hover tooltip explaining it. The click-to-insert chips under
+// each textarea are tooltip-free — the explanation lives here.
+export function AvailableVarsCard() {
+  return (
+    <div className="rounded-lg border border-border bg-muted/10 p-3">
+      <div className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-fg">{t("project.routines.vars_title")}</div>
+      <div className="flex flex-wrap gap-1.5">
+        {routineVars().map((v) => (
+          <Tip key={v.v} content={<span className="block max-w-[240px] whitespace-normal leading-snug">{v.desc}</span>}>
+            <span className="inline-flex cursor-help items-center gap-1 rounded-md border border-border bg-card px-1.5 py-0.5 font-mono text-[10px]">
+              {v.v}<span className="not-italic text-muted-fg">· {v.where}</span>
+            </span>
+          </Tip>
+        ))}
+      </div>
+    </div>
+  );
+}