@agentprojectcontext/apx 1.81.0 → 1.89.1

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

@@ -6,6 +6,7 @@ import { useToast } from "../Toast";
 import { useNudges, useNudgePolicy } from "../../hooks/useNudges";
 import { NudgesApi, type NudgePolicy } from "../../lib/api/nudges";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 /**
  * The interruption budget — how often APX may speak unprompted.
@@ -113,7 +114,7 @@ export function NudgePanel() {
             label={t("settings.nudge.critical_bypass")}
             disabled={!draft.enabled}
           />
-          <p className="mt-1 text-[11px] text-muted-foreground/70">
+          <p className="mt-1 text-[11px] text-muted-foreground">
             {t("settings.nudge.critical_bypass_hint")}
           </p>
         </div>
@@ -157,7 +158,7 @@ export function NudgePanel() {
                     aria-label={t("settings.nudge.useful")}
                     onClick={() => rate(e.id, true)}
                     className={`rounded p-1.5 transition hover:bg-muted ${
-                      e.feedback?.useful === true ? "text-emerald-500" : "opacity-40"
+                      e.feedback?.useful === true ? toneText.emerald : "opacity-40"
                     }`}
                   >
                     <ThumbsUp size={14} />
@@ -167,7 +168,7 @@ export function NudgePanel() {
                     aria-label={t("settings.nudge.noise")}
                     onClick={() => rate(e.id, false)}
                     className={`rounded p-1.5 transition hover:bg-muted ${
-                      e.feedback?.useful === false ? "text-red-500" : "opacity-40"
+                      e.feedback?.useful === false ? toneText.red : "opacity-40"
                     }`}
                   >
                     <ThumbsDown size={14} />

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

@@ -7,11 +7,22 @@ import { useToast } from "../Toast";
 import { Pair, HttpError } from "../../lib/api";
 import type { PairInit } from "../../types/daemon";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
+/** Which address the QR should send the phone to.
+ *
+ *  An https:// one wins outright when there is one: the origin a device pairs
+ *  over is the origin its installed app keeps launching at, and only a secure
+ *  one can install as an app, record a voice note, or read the clipboard. The
+ *  daemon already returns the list best-first; this only makes the preference
+ *  explicit and skips loopback, which no other device can reach. */
 function pickLanUrl(urls: string[]): string {
-  return urls.find((u) => !u.includes("127.0.0.1") && !u.includes("localhost"))
-    || urls[0]
-    || window.location.origin;
+  return (
+    urls.find((u) => u.startsWith("https://")) ||
+    urls.find((u) => !u.includes("127.0.0.1") && !u.includes("localhost")) ||
+    urls[0] ||
+    window.location.origin
+  );
 }
 
 export function PairDeviceDialog({
@@ -117,7 +128,7 @@ export function PairDeviceDialog({
           </div>
 
           {done ? (
-            <p className="text-sm font-medium text-emerald-500">{t("settings.devices_pair_done")}</p>
+            <p className={`text-sm font-medium ${toneText.emerald}`}>{t("settings.devices_pair_done")}</p>
           ) : expired ? (
             <div className="flex flex-col items-center gap-2">
               <p className="text-sm text-muted-fg">{t("settings.devices_pair_expired")}</p>

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

@@ -0,0 +1,374 @@
+import { useEffect, useState } from "react";
+import { Bell, BellOff, Monitor, Moon, Send, Sun, X } from "lucide-react";
+import { Button, Dialog } from "../ui";
+import { cn } from "../../lib/cn";
+import { useTheme } from "../../hooks/useTheme";
+import { t, setLocale, getLocale, LOCALES, type Locale } from "../../i18n";
+import {
+  disableNotifications,
+  enableNotifications,
+  notifyStance,
+  sendTestNotification,
+  type NotifyStance,
+} from "../../lib/notify";
+import { ChannelChips } from "../inbox/ChannelFilter";
+import { channelsOf } from "../../lib/channels";
+import { useChannelPrefs } from "../../hooks/useChannelPrefs";
+import { useInbox } from "../../hooks/useInbox";
+
+// The two panel-local preferences — how it looks, and what language it speaks.
+// They live here rather than inside the settings screen because the phone
+// surface needs them too: /mobile is chat and nothing else, so "switch to dark"
+// used to mean leaving for the desktop panel and finding the Web module.
+
+/** Light / dark / follow-the-OS, as three buttons with the mode's own glyph. */
+export function ThemeButtons({ className }: { className?: string }) {
+  const { preference, set } = useTheme();
+  const modes = [
+    { key: "light", icon: Sun, label: t("settings.light_mode") },
+    { key: "dark", icon: Moon, label: t("settings.dark_mode") },
+    { key: "system", icon: Monitor, label: t("settings.system_mode") },
+  ] as const;
+  return (
+    <div className={className ?? "flex items-center gap-2"}>
+      {modes.map((m) => (
+        <Button
+          key={m.key}
+          variant={preference === m.key ? "primary" : "secondary"}
+          onClick={() => set(m.key)}
+          aria-pressed={preference === m.key}
+        >
+          <m.icon size={14} /> {m.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+/** One button per locale we ship. Picking one reloads: every string in the
+ *  tree was resolved at render time, so a live swap would leave half the app
+ *  in the language you just left. */
+export function LanguageButtons({ className }: { className?: string }) {
+  const [locale, setLocaleState] = useState<Locale>(getLocale());
+  const change = (l: Locale) => {
+    setLocale(l);
+    setLocaleState(l);
+    window.location.reload();
+  };
+  return (
+    <div className={className ?? "flex items-center gap-2"}>
+      {LOCALES.map((lo) => (
+        <Button
+          key={lo.value}
+          variant={locale === lo.value ? "primary" : "secondary"}
+          onClick={() => change(lo.value)}
+          aria-pressed={locale === lo.value}
+        >
+          {lo.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * One switch for "tell me when an agent writes".
+ *
+ * It is a button and not a checkbox because turning it ON is a browser
+ * permission prompt, which can be refused — the state afterwards is the
+ * browser's answer, not the click's. Everything the user cannot fix from here
+ * (a blocked permission, an insecure origin) says so in place of the button
+ * rather than offering one that would do nothing.
+ */
+export function NotificationSwitch({ className }: { className?: string }) {
+  const [stance, setStance] = useState<NotifyStance>(() => notifyStance());
+
+  // "On" is a claim until something actually appears. Between the browser's
+  // permission, the OS letting the browser post at all, and a service worker
+  // that has to be registered, there are three places this dies silently — and
+  // the switch reads exactly the same in all of them.
+  //
+  // This hook belongs ABOVE the three early returns below. It used to sit after
+  // them, so the component rendered one hook while permission was denied and two
+  // once it was granted — and granting permission is the whole point of the
+  // switch. React throws "rendered more hooks than during the previous render"
+  // on that transition.
+  const [tested, setTested] = useState<null | boolean>(null);
+
+  if (stance.kind === "insecure") {
+    return <p className={className ?? "text-xs text-muted-fg"}>{t("notify.insecure")}</p>;
+  }
+  if (stance.kind === "unsupported") {
+    return <p className={className ?? "text-xs text-muted-fg"}>{t("notify.unsupported")}</p>;
+  }
+  if (stance.kind === "denied") {
+    return <p className={className ?? "text-xs text-muted-fg"}>{t("notify.denied")}</p>;
+  }
+
+  const on = stance.kind === "on";
+  const toggle = async () => {
+    if (on) {
+      disableNotifications();
+      setStance(notifyStance());
+      return;
+    }
+    setStance(await enableNotifications());
+  };
+
+  const test = async () => {
+    setTested(null);
+    setTested(await sendTestNotification());
+  };
+
+  return (
+    <div className={className ?? "space-y-2"}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Button variant={on ? "primary" : "secondary"} onClick={toggle} aria-pressed={on}>
+          {on ? <Bell size={14} /> : <BellOff size={14} />} {on ? t("notify.on") : t("notify.off")}
+        </Button>
+        {on && (
+          <Button variant="secondary" onClick={test}>
+            <Send size={14} /> {t("notify.test")}
+          </Button>
+        )}
+      </div>
+      <p className="text-xs text-muted-fg">
+        {tested === false ? t("notify.test_failed") : on ? t("notify.on_hint") : t("notify.off_hint")}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Which channels are allowed to ring THIS device.
+ *
+ * Not a global setting, and that is the point: the phone has Telegram
+ * installed on it, so an APX notification about a Telegram reply is the same
+ * news twice — while on the laptop it is the only way to hear it at all. So the
+ * phone starts with Telegram off and the panel starts with everything on, and
+ * either can be changed here, per channel.
+ *
+ * The list is the channels this install actually uses (from the inbox it has
+ * already loaded), not a catalog of everything APX can speak: a switch for a
+ * channel you have never received anything on is a question nobody asked.
+ */
+export function NotificationChannels({ className }: { className?: string }) {
+  const notify = useChannelPrefs("notify");
+  const { rows } = useInbox();
+  const channels = channelsOf(rows);
+  // Only while notifications can actually arrive. Offering "which channels may
+  // ring you" under "this browser is blocking notifications" is a switch that
+  // does nothing — the same rule the stance messages above follow.
+  if (notifyStance().kind !== "on") return null;
+  if (channels.length < 2) return null;
+  return (
+    <div className={className ?? "space-y-2"}>
+      <ChannelChips
+        channels={channels}
+        enabled={notify.enabled}
+        onToggle={notify.toggle}
+        testIdPrefix="notify-channel"
+      />
+      <p className="text-xs text-muted-fg">{t("notify.channels_hint")}</p>
+    </div>
+  );
+}
+
+/**
+ * The same question, asked of the APK.
+ *
+ * The switches above this one live in localStorage and govern the panel's own
+ * bell. Inside the app that bell is not the one that rings: the APK holds its
+ * own socket so it can announce a turn while the WebView is closed, and it
+ * cannot read this browser's storage from a foreground service. So on that
+ * surface the ticks write through the bridge into the app's own store, and the
+ * native menu (⋯ → "Avisarme de…") edits exactly the same five.
+ *
+ * Absent on an APK installed before the bridge learned these methods: nothing
+ * renders rather than a row of switches that would silently do nothing.
+ */
+function NativeNotificationChannels({ className }: { className?: string }) {
+  const read = (): Record<string, boolean> => {
+    try {
+      const raw = window.APXAndroid?.notifyChannels?.();
+      if (!raw) return {};
+      const parsed = JSON.parse(raw) as unknown;
+      if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+      const out: Record<string, boolean> = {};
+      for (const [k, v] of Object.entries(parsed as Record<string, unknown>)) {
+        if (typeof v === "boolean") out[k] = v;
+      }
+      return out;
+    } catch {
+      return {};
+    }
+  };
+  const [channels, setChannels] = useState<Record<string, boolean>>(read);
+
+  useEffect(() => {
+    // Two ways this changes behind the panel's back: the native menu ticking a
+    // box over the top of it (the activity fires the event), and the phone
+    // coming back to the app after the same edit somewhere else.
+    const refresh = () => setChannels(read());
+    window.addEventListener("apx:native-notify-channels", refresh);
+    window.addEventListener("focus", refresh);
+    return () => {
+      window.removeEventListener("apx:native-notify-channels", refresh);
+      window.removeEventListener("focus", refresh);
+    };
+  }, []);
+
+  const names = Object.keys(channels);
+  if (!names.length) return null;
+
+  const toggle = (channel: string) => {
+    const next = channels[channel] !== true;
+    window.APXAndroid?.setNotifyChannel?.(channel, next);
+    setChannels((prev) => ({ ...prev, [channel]: next }));
+  };
+
+  return (
+    <div className={className ?? "space-y-2"}>
+      <ChannelChips
+        channels={names}
+        enabled={(channel) => channels[channel] === true}
+        onToggle={toggle}
+        testIdPrefix="native-notify-channel"
+      />
+      <p className="text-xs text-muted-fg">{t("notify.native_channels_hint")}</p>
+    </div>
+  );
+}
+
+function NativeNotificationStatus({ className }: { className?: string }) {
+  const read = () => {
+    try { return window.APXAndroid?.notificationsEnabled() === true; } catch { return false; }
+  };
+  const [on, setOn] = useState(read);
+
+  useEffect(() => {
+    const refresh = () => setOn(read());
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    return () => {
+      window.removeEventListener("focus", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+    };
+  }, []);
+
+  return (
+    <div className={className ?? "space-y-2"}>
+      <Button
+        variant={on ? "primary" : "secondary"}
+        onClick={() => window.APXAndroid?.openNotificationSettings()}
+        aria-pressed={on}
+      >
+        {on ? <Bell size={14} /> : <BellOff size={14} />}
+        {on ? t("notify.on") : t("notify.native_off")}
+      </Button>
+      <p className="text-xs text-muted-fg">
+        {on ? t("notify.native_on_hint") : t("notify.native_off_hint")}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * The offer, where you already are.
+ *
+ * It cannot be a prompt that opens by itself: browsers only accept
+ * `Notification.requestPermission()` from a real click, and Chrome drops the
+ * request outright when it is not tied to a gesture. So the app asks, and the
+ * browser's own dialog comes after the tap. Shown once — a banner that returns
+ * every session is an advert — and only while the browser has not decided yet.
+ */
+const NUDGE_DISMISSED = "apx.notify.nudge.dismissed";
+
+export function NotifyNudge({ className, floating }: { className?: string; floating?: boolean }) {
+  const [stance, setStance] = useState<NotifyStance>(() => notifyStance());
+  const [hidden, setHidden] = useState(() => {
+    try {
+      return localStorage.getItem(NUDGE_DISMISSED) === "1";
+    } catch {
+      return false;
+    }
+  });
+  // Only the undecided case. Denied is not something a banner can fix, and off
+  // is a decision that was already made here.
+  if (hidden || stance.kind !== "ask") return null;
+
+  const dismiss = () => {
+    setHidden(true);
+    try {
+      localStorage.setItem(NUDGE_DISMISSED, "1");
+    } catch {
+      /* private mode: gone for this session, which is enough */
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 text-sm",
+        // A strip at the top of the list on the phone, a card in the corner on
+        // a desktop — the same offer, put where the eye already is.
+        floating
+          ? "fixed bottom-4 right-4 z-50 max-w-sm rounded-2xl border border-border bg-card/95 p-3 shadow-lg backdrop-blur"
+          : "shrink-0 border-b border-border bg-primary/5 px-4 py-3",
+        className,
+      )}
+    >
+      <Bell size={16} className="shrink-0 text-primary" />
+      <span className="min-w-0 flex-1">{t("notify.nudge")}</span>
+      <Button
+        size="sm"
+        variant="primary"
+        onClick={async () => {
+          const next = await enableNotifications();
+          setStance(next);
+          if (next.kind === "on") dismiss();
+        }}
+      >
+        {t("notify.nudge_yes")}
+      </Button>
+      <button
+        type="button"
+        onClick={dismiss}
+        aria-label={t("common.close")}
+        className="shrink-0 rounded p-1 text-muted-fg hover:text-foreground"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
+
+/** Both of them in a sheet small enough to be a decision, not a screen. */
+export function PrefsDialog({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const nativeNotifications = typeof window.APXAndroid?.notificationsEnabled === "function";
+  return (
+    <Dialog open={open} onClose={onClose} title={t("mobile.prefs")} size="sm">
+      <div className="space-y-5">
+        <section className="space-y-2">
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-fg">
+            {t("settings.appearance")}
+          </h3>
+          <ThemeButtons className="grid grid-cols-3 gap-2" />
+        </section>
+        <section className="space-y-2">
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-fg">
+            {t("settings.language")}
+          </h3>
+          <LanguageButtons className="grid grid-cols-2 gap-2" />
+        </section>
+        <section className="space-y-2">
+          <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-fg">
+            {t("notify.title")}
+          </h3>
+          {nativeNotifications ? <NativeNotificationStatus /> : <NotificationSwitch />}
+          {nativeNotifications ? <NativeNotificationChannels /> : <NotificationChannels />}
+        </section>
+      </div>
+    </Dialog>
+  );
+}

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

@@ -8,6 +8,7 @@ import { useProfiles, useProfile, useProfileDoctor } from "../../hooks/useProfil
 import { ProfilesApi, type ProfileSchemaProp } from "../../lib/api/profiles";
 import { CronPicker } from "../cron/CronPicker";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 /**
  * Agent profiles — an installable line of work for the super-agent.
@@ -33,6 +34,8 @@ export function ProfilePanel() {
   const [draft, setDraft] = useState<Record<string, string>>({});
   const [busy, setBusy] = useState(false);
   const [confirmOff, setConfirmOff] = useState(false);
+  // null = dialog closed; "*" = re-adopt every routine; else a routine name.
+  const [readoptTarget, setReadoptTarget] = useState<string | null>(null);
 
   useEffect(() => {
     if (!profile) return;
@@ -50,6 +53,10 @@ export function ProfilePanel() {
   const activate = async (id: string, force: boolean) => {
     setBusy(true);
     try {
+      // Not a React hook: `ProfilesApi.use` is the daemon call that ACTIVATES a
+      // profile (POST /api/profiles/:id/use), mirroring `apx profile use`. The
+      // rule keys off the `use` prefix alone and cannot tell the two apart.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const r = await ProfilesApi.use(id, force);
       for (const w of r.warnings || []) toast.error(w);
       await refreshAll();
@@ -92,6 +99,23 @@ export function ProfilePanel() {
     }
   };
 
+  // Force the profile's routines back to the package — the web equivalent of
+  // `apx routine remove` + `apx profile sync`, for the drift sync won't repair.
+  const doReadopt = async () => {
+    if (!readoptTarget) return;
+    setBusy(true);
+    try {
+      const r = await ProfilesApi.readopt(readoptTarget === "*" ? undefined : readoptTarget);
+      await refreshAll();
+      toast.success(`${t("settings.profile.readopt_done")}: ${r.readopted.join(", ") || "—"}`);
+    } catch (e) {
+      toast.error((e as Error).message);
+    } finally {
+      setBusy(false);
+      setReadoptTarget(null);
+    }
+  };
+
   const props: Record<string, ProfileSchemaProp> = profile?.schema?.properties || {};
   const overBudget = !!profile?.budget && !!profile?.tokens && profile.tokens > profile.budget;
 
@@ -237,7 +261,7 @@ export function ProfilePanel() {
           <Section title={t("settings.profile.doctor_title")} description={doctor?.summary || ""}>
             {!doctor?.checks?.length ? (
               <div className="flex items-center gap-2 text-sm">
-                <CheckCircle2 size={16} className="text-emerald-500" />
+                <CheckCircle2 size={16} className={toneText.emerald} />
                 {active ? t("settings.profile.doctor_clean") : t("settings.profile.doctor_vanilla")}
               </div>
             ) : (
@@ -246,7 +270,7 @@ export function ProfilePanel() {
                   <li key={i} className="flex items-start gap-2 text-sm">
                     <AlertTriangle
                       size={16}
-                      className={`mt-0.5 shrink-0 ${c.level === "error" ? "text-red-500" : "text-amber-500"}`}
+                      className={`mt-0.5 shrink-0 ${c.level === "error" ? toneText.red : toneText.amber}`}
                     />
                     <span className="min-w-0">
                       <span className="opacity-60">[{c.label}]</span> {c.detail}
@@ -255,11 +279,34 @@ export function ProfilePanel() {
                           {c.fix}
                         </code>
                       ) : null}
+                      {/* A one-click repair sitting next to the exact warning:
+                          re-adopt just this drifted routine from the package. */}
+                      {c.routine ? (
+                        <Button
+                          size="sm"
+                          variant="secondary"
+                          className="mt-1.5"
+                          disabled={busy}
+                          onClick={() => setReadoptTarget(c.routine as string)}
+                        >
+                          {t("settings.profile.readopt_one")}
+                        </Button>
+                      ) : null}
                     </span>
                   </li>
                 ))}
               </ul>
             )}
+            {/* Blanket recovery, for the drift a per-routine warning misses (a
+                routine whose profile origin went null is skipped by the check
+                above, but re-adopting all still repairs it). */}
+            {active ? (
+              <div className="mt-3">
+                <Button size="sm" variant="secondary" disabled={busy} onClick={() => setReadoptTarget("*")}>
+                  {t("settings.profile.readopt_all")}
+                </Button>
+              </div>
+            ) : null}
           </Section>
 
           <Section
@@ -297,6 +344,27 @@ export function ProfilePanel() {
       >
         {t("settings.profile.deactivate_confirm")}
       </Dialog>
+
+      <Dialog
+        open={!!readoptTarget}
+        onClose={() => setReadoptTarget(null)}
+        title={t("settings.profile.readopt_title")}
+        footer={
+          <>
+            <Button onClick={() => setReadoptTarget(null)}>{t("common.cancel")}</Button>
+            <Button variant="primary" loading={busy} onClick={doReadopt}>
+              {readoptTarget && readoptTarget !== "*"
+                ? t("settings.profile.readopt_one")
+                : t("settings.profile.readopt_all")}
+            </Button>
+          </>
+        }
+      >
+        {t("settings.profile.readopt_confirm")}
+        {readoptTarget && readoptTarget !== "*" ? (
+          <code className="mt-2 block rounded bg-muted px-1.5 py-0.5 text-xs">{readoptTarget}</code>
+        ) : null}
+      </Dialog>
     </div>
   );
 }

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

@@ -5,6 +5,7 @@ import { Badge, Button, Dialog, Field, Loading, Switch, Textarea, Tip } from "..
 import { useToast } from "../Toast";
 import { useGlobalConfig } from "../../hooks/useGlobalConfig";
 import { t } from "../../i18n";
+import { toneText } from "../../lib/tone";
 
 // Content-based model routing (OpenHands RouterLLM pattern). NOT the failover
 // router (that is DefaultRouterCard). Here each rule prefers a model for a turn
@@ -189,7 +190,7 @@ export function RoutingPanel() {
                 spellCheck={false}
               />
               {parsed.error ? (
-                <span className="mt-1 block text-[11px] text-red-400">{parsed.error}</span>
+                <span className={`mt-1 block text-[11px] ${toneText.red}`}>{parsed.error}</span>
               ) : (
                 <button
                   type="button"