@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/src/components/settings/WebPanel.tsx

@@ -1,43 +1,34 @@
-import { useState } from "react";
 import { Section } from "../Section";
-import { Button } from "../ui";
-import { useTheme } from "../../hooks/useTheme";
-import { t, setLocale, getLocale, LOCALES, type Locale } from "../../i18n";
+import { LanguageButtons, NotificationChannels, NotificationSwitch, ThemeButtons } from "./PanelPrefs";
+import { t } from "../../i18n";
 
-// Settings for the web panel itself: visual appearance (theme) + UI language.
-// This is panel-local UX, distinct from the agent's identity.
+// Settings for the web panel itself: appearance, UI language, notifications.
+// This is panel-local UX, distinct from the agent's identity. The controls
+// themselves live in PanelPrefs — the phone offers the same choices from its
+// own inbox, and one of them drifting from the other is how you end up with a
+// panel that is dark in one place and light in the next.
+//
+// Notifications shipped in the phone's dialog only, which is the one surface
+// the person at a desk never opens: there was a switch, and no way to reach it
+// from the panel where they actually sit. A permission you cannot grant is the
+// same as not having built it.
 export function WebPanel() {
-  const { preference, set } = useTheme();
-  const [locale, setLocaleState] = useState<Locale>(getLocale());
-
-  const changeLocale = (l: Locale) => {
-    setLocale(l);
-    setLocaleState(l);
-    // Reload so all rendered strings pick up the new locale.
-    window.location.reload();
-  };
-
   return (
     <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
       <Section title={t("settings.appearance")}>
-        <div className="flex items-center gap-2">
-          <Button variant={preference === "light"  ? "primary" : "secondary"} onClick={() => set("light")}>{t("settings.light_mode")}</Button>
-          <Button variant={preference === "dark"   ? "primary" : "secondary"} onClick={() => set("dark")}>{t("settings.dark_mode")}</Button>
-          <Button variant={preference === "system" ? "primary" : "secondary"} onClick={() => set("system")}>{t("settings.system_mode")}</Button>
-        </div>
+        <ThemeButtons />
       </Section>
 
       <Section title={t("settings.language")}>
-        <div className="flex items-center gap-2">
-          {LOCALES.map((lo) => (
-            <Button
-              key={lo.value}
-              variant={locale === lo.value ? "primary" : "secondary"}
-              onClick={() => changeLocale(lo.value)}
-            >
-              {lo.label}
-            </Button>
-          ))}
+        <LanguageButtons />
+      </Section>
+
+      <Section title={t("notify.title")}>
+        <div className="space-y-4">
+          <NotificationSwitch />
+          {/* Which channels may ring THIS device — the laptop and the phone
+              answer that differently, so the answer is stored per device. */}
+          <NotificationChannels />
         </div>
       </Section>
     </div>

package/src/interfaces/web/src/components/settings/providers/ProviderCard.tsx

@@ -1,5 +1,6 @@
-import { Trash2 } from "lucide-react";
+import { Trash2, Zap } from "lucide-react";
 import { cn } from "../../../lib/cn";
+import { toneDot, toneText } from "../../../lib/tone";
 import { Tip } from "../../ui/tip";
 import { secretSuffix } from "../../../lib/secrets";
 import { ENGINE_BADGES, ENGINE_GRADIENTS, ENGINE_ICONS, ENGINE_OPTIONS, engineStyle } from "./typeStyles";
@@ -11,11 +12,13 @@ export function ProviderCard({
   onEdit,
   onDelete,
   onToggle,
+  onTest,
 }: {
   provider: Provider;
   onEdit: () => void;
   onDelete: () => void;
   onToggle: () => void;
+  onTest: () => void;
 }) {
   const gradient = engineStyle(ENGINE_GRADIENTS, provider.engine);
   const badge = engineStyle(ENGINE_BADGES, provider.engine);
@@ -50,14 +53,23 @@ export function ProviderCard({
               className={cn(
                 "flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium transition-colors",
                 active
-                  ? "border-emerald-500/40 text-emerald-400 hover:bg-emerald-500/10"
+                  ? cn(toneText.emerald, "border-emerald-600/40 hover:bg-emerald-500/10 dark:border-emerald-500/40")
                   : "border-border text-muted-fg hover:text-foreground",
               )}
             >
-              <span className={cn("size-1.5 rounded-full", active ? "bg-emerald-400" : "bg-muted-fg/40")} />
+              <span className={cn("size-1.5 rounded-full", active ? toneDot.emerald : "bg-muted-fg/40")} />
               {active ? t("providers_card.active") : t("providers_card.off")}
             </button>
           </Tip>
+          <Tip content={t("provider_test.button")}>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onTest(); }}
+              className="rounded-md p-1 text-muted-fg hover:bg-accent hover:text-foreground"
+            >
+              <Zap className="size-3.5" />
+            </button>
+          </Tip>
           <Tip content={t("providers_modal.delete")}>
             <button
               type="button"

package/src/interfaces/web/src/components/settings/providers/ProviderModal.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
-import { Braces, Loader2, RefreshCw } from "lucide-react";
+import { Braces, Loader2, RefreshCw, SlidersHorizontal } from "lucide-react";
 import { Button, Dialog, Field, Input, Switch, Textarea } from "../../ui";
 import { Tip } from "../../ui/tip";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/tabs";
 import { UiSelect } from "../../UiSelect";
 import { ModelCombobox } from "../../ModelCombobox";
 import { Engines } from "../../../lib/api";
@@ -9,6 +10,7 @@ import { isSecretMarker, secretSuffix } from "../../../lib/secrets";
 import { ENGINE_ICONS, ENGINE_OPTIONS, ENGINE_PRESETS, type EngineType } from "./typeStyles";
 import type { Provider } from "./types";
 import { t } from "../../../i18n";
+import { toneText } from "../../../lib/tone";
 
 export interface ProviderSaveResult {
   provider: Provider;
@@ -35,6 +37,7 @@ interface FormState {
   default_temperature: number;
   default_max_tokens: number;
   is_active: boolean;
+  thinking: boolean;
   context_limit_tokens: number;
   model_context_limits_json: string;
   p_input: string;
@@ -46,13 +49,11 @@ interface FormState {
 const EMPTY: FormState = {
   name: "", slug: "", engine: "anthropic", base_url: "", api_key_value: "",
   default_model: "", default_temperature: 0.7, default_max_tokens: 4096,
-  is_active: true, context_limit_tokens: 200000, model_context_limits_json: "",
+  is_active: true, thinking: true, context_limit_tokens: 200000, model_context_limits_json: "",
   p_input: "", p_output: "", p_cache_read: "", p_cache_write: "",
 };
 
 // Preset pills shown on create (the common providers).
-const PRESET_PILLS: EngineType[] = ["anthropic", "openai", "gemini", "groq", "openrouter", "ollama", "custom"];
-
 function slugify(s: string): string {
   return s.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -73,6 +74,7 @@ function fromProvider(p: Provider): FormState {
     default_temperature: p.default_temperature ?? 0.7,
     default_max_tokens: p.default_max_tokens ?? 4096,
     is_active: p.is_active !== false,
+    thinking: p.thinking !== false,
     context_limit_tokens: p.context_limit_tokens ?? 200000,
     model_context_limits_json: p.model_context_limits ? JSON.stringify(p.model_context_limits, null, 2) : "",
     p_input: numOrEmpty(p.pricing?.input_per_million),
@@ -108,29 +110,33 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
 
   const up = (patch: Partial<FormState>) => setF((s) => ({ ...s, ...patch }));
 
-  // Apply a full preset (pill click on create): name/slug/engine/base_url/model.
-  const pickPreset = (engine: EngineType) => {
-    const p = ENGINE_PRESETS[engine];
-    up({
-      engine,
-      name: engine === "custom" ? f.name : (ENGINE_OPTIONS.find((o) => o.value === engine)?.label || engine),
-      slug: engine === "custom" ? f.slug : engine,
-      base_url: p.base_url,
-      default_model: p.default_model,
-    });
-    setAvailableModels(p.known_models);
-    setModelError(null);
-  };
+  // Picking an engine applies its whole preset — endpoint, default model, model
+  // list. There used to be two ways to do this (a pill row and this select)
+  // that disagreed: the pills overwrote the endpoint, the select only filled it
+  // when empty, so the same choice left you in different states depending on
+  // where you clicked. One control now, and it fills the endpoint.
+  //
+  // A base_url the user typed themselves is never clobbered: only a blank, or
+  // one still carrying another engine's preset value, gets replaced. Same rule
+  // for the default model, so switching engine to compare two providers doesn't
+  // quietly discard what you configured.
+  const isUntouched = (value: string, field: "base_url" | "default_model") =>
+    !value || Object.values(ENGINE_PRESETS).some((preset) => preset[field] && preset[field] === value);
 
-  // Engine select change: switch adapter, soft-fill base_url/model if empty.
   const changeEngine = (engine: EngineType) => {
     const p = ENGINE_PRESETS[engine];
-    up({
-      engine,
-      base_url: f.base_url || p.base_url,
-      default_model: f.default_model || p.default_model,
-    });
+    const patch: Partial<FormState> = { engine };
+    if (isUntouched(f.base_url, "base_url")) patch.base_url = p.base_url;
+    if (isUntouched(f.default_model, "default_model")) patch.default_model = p.default_model;
+    // On create the provider is also named after the engine; an existing one
+    // keeps the name it is referred to by.
+    if (!isEdit && engine !== "custom") {
+      patch.name = ENGINE_OPTIONS.find((o) => o.value === engine)?.label || engine;
+      patch.slug = engine;
+    }
+    up(patch);
     setAvailableModels(p.known_models);
+    setModelError(null);
   };
 
   const loadModels = async () => {
@@ -191,6 +197,7 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
         default_temperature: f.default_temperature,
         default_max_tokens: f.default_max_tokens,
         is_active: f.is_active,
+        thinking: f.thinking,
         context_limit_tokens: f.context_limit_tokens || undefined,
         model_context_limits: modelLimits,
         pricing,
@@ -222,6 +229,48 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
     setJsonMode(true);
   };
 
+  // Leaving the JSON tab: parse it back into the form so edits made there are
+  // not silently dropped. Returns false (and shows why) when it cannot, so the
+  // caller can keep the user on the JSON tab with their text intact.
+  const applyJsonToForm = (): boolean => {
+    let parsed: unknown;
+    try { parsed = JSON.parse(jsonText); }
+    catch { setError(t("providers_modal.err_json_invalid")); return false; }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+      setError(t("providers_modal.err_json_object")); return false;
+    }
+    const raw = parsed as Record<string, unknown>;
+    const str = (k: string) => (typeof raw[k] === "string" ? (raw[k] as string) : undefined);
+    const num = (k: string) => (typeof raw[k] === "number" ? (raw[k] as number) : undefined);
+    const pricing = (raw.pricing || {}) as Record<string, unknown>;
+    const engine = str("engine") as EngineType | undefined;
+    setF((s) => ({
+      ...s,
+      name: str("name") ?? s.name,
+      engine: engine ?? s.engine,
+      base_url: str("base_url") ?? "",
+      default_model: str("default_model") ?? "",
+      api_key_value: str("api_key") ?? s.api_key_value,
+      default_temperature: num("default_temperature") ?? s.default_temperature,
+      default_max_tokens: num("default_max_tokens") ?? s.default_max_tokens,
+      is_active: raw.is_active !== false,
+      context_limit_tokens: num("context_limit_tokens") ?? s.context_limit_tokens,
+      model_context_limits_json: raw.model_context_limits ? JSON.stringify(raw.model_context_limits, null, 2) : "",
+      p_input: numOrEmpty(pricing.input_per_million),
+      p_output: numOrEmpty(pricing.output_per_million),
+      p_cache_read: numOrEmpty(pricing.cache_read_per_million),
+      p_cache_write: numOrEmpty(pricing.cache_write_per_million),
+    }));
+    if (engine) setAvailableModels(ENGINE_PRESETS[engine]?.known_models || []);
+    setError(null);
+    return true;
+  };
+
+  const switchTab = (tab: string) => {
+    if (tab === "json") { enterJsonMode(); return; }
+    if (applyJsonToForm()) setJsonMode(false);
+  };
+
   const submit = async () => {
     setBusy(true);
     setError(null);
@@ -281,43 +330,17 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
         </>
       }
     >
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          {!isEdit ? (
-            <div className="flex flex-wrap gap-1.5">
-              {PRESET_PILLS.map((eng) => {
-                const Icon = ENGINE_ICONS[eng];
-                const label = eng === "custom" ? t("providers_modal.custom") : (ENGINE_OPTIONS.find((o) => o.value === eng)?.label || eng);
-                const selected = f.engine === eng;
-                return (
-                  <button
-                    key={eng}
-                    type="button"
-                    onClick={() => pickPreset(eng)}
-                    className={`flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs transition-colors ${
-                      selected
-                        ? "border-emerald-500/50 bg-emerald-500/10 text-emerald-400"
-                        : "border-border text-muted-fg hover:border-muted-fg/60 hover:text-foreground"
-                    }`}
-                  >
-                    <Icon className="size-3.5" /> {label}
-                  </button>
-                );
-              })}
-            </div>
-          ) : <span />}
-          <button
-            type="button"
-            onClick={() => (jsonMode ? setJsonMode(false) : enterJsonMode())}
-            className={`flex shrink-0 items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs transition-colors ${
-              jsonMode ? "border-sky-500/50 bg-sky-500/10 text-sky-400" : "border-border text-muted-fg hover:text-foreground"
-            }`}
-          >
-            <Braces className="size-3.5" /> {jsonMode ? t("providers_modal.form_mode") : t("providers_modal.json_mode")}
-          </button>
-        </div>
-
-        {jsonMode ? (
+      <Tabs value={jsonMode ? "json" : "form"} onValueChange={(v) => switchTab(String(v))} className="gap-3">
+        <TabsList>
+          <TabsTrigger value="form">
+            <SlidersHorizontal className="size-3.5" /> {t("providers_modal.tab_form")}
+          </TabsTrigger>
+          <TabsTrigger value="json">
+            <Braces className="size-3.5" /> {t("providers_modal.tab_json")}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="json">
           <div className="space-y-2">
             <Field label={t("providers_modal.json_label")} hint={t("providers_modal.json_hint", { slug: (f.slug || slugify(f.name)) || "<slug>" })}>
               <Textarea
@@ -330,8 +353,10 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
             </Field>
             <p className="text-[11px] text-muted-fg">{t("providers_modal.json_help")}</p>
           </div>
-        ) : (
-          <>
+        </TabsContent>
+
+        <TabsContent value="form">
+          <div className="space-y-3">
             <div className="grid grid-cols-2 gap-3">
               <Field label={t("providers_modal.name_label")}>
                 <Input value={f.name} onChange={(e) => up({ name: e.target.value, slug: isEdit ? f.slug : slugify(e.target.value) })} placeholder={t("providers_modal.name_ph")} />
@@ -371,7 +396,7 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
                     </Button>
                   </Tip>
                 </div>
-                {modelError && <p className="text-[11px] text-amber-400">{modelError}</p>}
+                {modelError && <p className={`text-[11px] ${toneText.amber}`}>{modelError}</p>}
               </div>
             </Field>
 
@@ -399,11 +424,17 @@ export function ProviderModal({ open, initial, existingSlugs, onClose, onSave }:
             </details>
 
             <Switch checked={f.is_active} onChange={(v) => up({ is_active: v })} label={t("providers_modal.active_label")} />
-          </>
-        )}
+            <div className="space-y-1">
+              <Switch checked={f.thinking} onChange={(v) => up({ thinking: v })} label={t("providers_modal.thinking_label")} />
+              <p className="text-xs text-muted-fg">{t("providers_modal.thinking_hint")}</p>
+            </div>
+          </div>
+        </TabsContent>
 
+        {/* Outside the panels: an error raised while switching tabs has to stay
+            visible on whichever tab you land on. */}
         {error && <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">{error}</div>}
-      </div>
+      </Tabs>
     </Dialog>
   );
 }

package/src/interfaces/web/src/components/settings/providers/ProviderTestDialog.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useMemo, useState } from "react";
+import { Loader2, Send, Zap } from "lucide-react";
+import { Button, Dialog, Field, Textarea } from "../../ui";
+import { ModelCombobox } from "../../ModelCombobox";
+import { Engines, type EngineTestResult } from "../../../lib/api/engines";
+import { useOllamaModels } from "../../../hooks/useOllamaModels";
+import { ENGINE_PRESETS, type EngineType } from "./typeStyles";
+import type { Provider } from "./types";
+import { t } from "../../../i18n";
+import { toneText } from "../../../lib/tone";
+
+/** True when the gateway's echoed id is the same model we asked for. */
+function servedMatchesRequested(requested: string, served: string | null | undefined): boolean {
+  if (!served) return true;
+  const a = requested.trim().toLowerCase();
+  const b = served.trim().toLowerCase();
+  if (!a || a === b) return true;
+  const tail = b.split(/[/:]/).pop() || b;
+  return tail === a;
+}
+
+// "Does this actually answer?" — one message, one reply, nothing kept.
+//
+// Deliberately not a chat: no history is sent or stored, so the reply costs a
+// couple of hundred tokens and tells you the credentials, the endpoint and the
+// model id all line up. Closing it throws the exchange away.
+export function ProviderTestDialog({
+  open,
+  provider,
+  onClose,
+}: {
+  open: boolean;
+  provider: Provider | null;
+  onClose: () => void;
+}) {
+  const [model, setModel] = useState("");
+  const [message, setMessage] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState<EngineTestResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const engine = (provider?.engine as EngineType) || "custom";
+  const isOllama = engine === "ollama";
+
+  // Ollama's catalog only exists on the machine running it.
+  const ollamaTargets = useMemo(
+    () => (isOllama && provider ? [{ slug: provider.slug, base_url: provider.base_url }] : []),
+    [isOllama, provider],
+  );
+  const { models: ollamaModels } = useOllamaModels(ollamaTargets);
+
+  const modelOptions = useMemo(() => {
+    if (!provider) return [];
+    if (isOllama) return ollamaModels[provider.slug] || [];
+    const known = ENGINE_PRESETS[engine]?.known_models || [];
+    return Array.from(new Set([...(provider.default_model ? [provider.default_model] : []), ...known]));
+  }, [provider, engine, isOllama, ollamaModels]);
+
+  // Every open starts clean — this is a probe, not a session.
+  useEffect(() => {
+    if (!open) return;
+    setModel(provider?.default_model || "");
+    setMessage(t("provider_test.default_message"));
+    setResult(null);
+    setError(null);
+  }, [open, provider]);
+
+  const send = async () => {
+    if (!provider || !model.trim()) return;
+    setBusy(true);
+    setError(null);
+    setResult(null);
+    try {
+      setResult(await Engines.test({ provider: provider.slug, model: model.trim(), message: message.trim() }));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally { setBusy(false); }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={t("provider_test.title", { name: provider?.name || provider?.slug || "" })}
+      description={t("provider_test.description")}
+      size="md"
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>{t("common.close")}</Button>
+          <Button variant="primary" onClick={send} loading={busy} disabled={!model.trim()}>
+            <Send size={13} /> {t("provider_test.send")}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-3">
+        <Field label={t("provider_test.model_label")} hint={t("provider_test.model_hint")}>
+          <ModelCombobox
+            value={model}
+            onChange={setModel}
+            options={modelOptions}
+            emptyHint={isOllama ? t("router_panel.ollama_empty") : undefined}
+          />
+        </Field>
+
+        <Field label={t("provider_test.message_label")}>
+          <Textarea
+            rows={2}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder={t("provider_test.message_ph")}
+            onKeyDown={(e) => { if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) send(); }}
+          />
+        </Field>
+
+        {busy && (
+          <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-xs text-muted-fg">
+            <Loader2 className="size-3.5 animate-spin" /> {t("provider_test.waiting")}
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive">
+            {error}
+          </div>
+        )}
+
+        {result && (
+          <div className="space-y-1.5 rounded-lg border border-emerald-500/30 bg-emerald-500/5 px-3 py-2">
+            <div className="flex items-center gap-2 text-[11px] text-muted-fg">
+              <Zap className={`size-3 ${toneText.emerald}`} />
+              <span className="font-mono">{result.provider}:{result.model}</span>
+              <span>· {result.ms} ms</span>
+              {result.usage?.output_tokens !== undefined && (
+                <span>· {t("provider_test.tokens", { n: String(result.usage.output_tokens) })}</span>
+              )}
+            </div>
+            {result.served_model && !servedMatchesRequested(result.model, result.served_model) && (
+              <div className={`text-[11px] font-mono ${toneText.amber}`}>
+                {t("provider_test.served", { id: result.served_model })}
+                <span> · {t("provider_test.served_mismatch")}</span>
+              </div>
+            )}
+            <p className="whitespace-pre-wrap text-sm">{result.text || t("provider_test.empty_reply")}</p>
+          </div>
+        )}
+      </div>
+    </Dialog>
+  );
+}