@agentprojectcontext/apx 1.80.2 → 1.89.1

package/src/interfaces/web/public/favicon/dark/site.webmanifest

@@ -3,16 +3,22 @@
   "short_name": "APX",
   "icons": [
     {
-      "src": "android-chrome-192x192.png",
+      "src": "/favicon/dark/android-chrome-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
-      "src": "android-chrome-512x512.png",
+      "src": "/favicon/dark/android-chrome-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ],
   "theme_color": "#0a0a0a",
-  "background_color": "#0a0a0a"
-}
+  "background_color": "#0a0a0a",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary"
+}

package/src/interfaces/web/public/favicon/white/site.webmanifest

@@ -3,16 +3,22 @@
   "short_name": "APX",
   "icons": [
     {
-      "src": "android-chrome-192x192.png",
+      "src": "/favicon/white/android-chrome-192x192.png",
       "sizes": "192x192",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     },
     {
-      "src": "android-chrome-512x512.png",
+      "src": "/favicon/white/android-chrome-512x512.png",
       "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any maskable"
     }
   ],
   "theme_color": "#ffffff",
-  "background_color": "#ffffff"
-}
+  "background_color": "#ffffff",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "portrait-primary"
+}

package/src/interfaces/web/public/manifest.webmanifest

@@ -0,0 +1,25 @@
+{
+  "name": "APX",
+  "short_name": "APX",
+  "description": "Your agents, on your phone.",
+  "id": "/",
+  "start_url": "/m/chat",
+  "scope": "/",
+  "display": "standalone",
+  "display_override": ["standalone", "minimal-ui"],
+  "orientation": "portrait-primary",
+  "theme_color": "#0a0a0a",
+  "background_color": "#0a0a0a",
+  "icons": [
+    { "src": "/favicon/dark/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/favicon/dark/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/favicon/dark/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
+    { "src": "/favicon/dark/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ],
+  "shortcuts": [
+    { "name": "Chats", "url": "/m/chat" },
+    { "name": "Tasks", "url": "/m/tasks" },
+    { "name": "Commitments", "url": "/m/commitments" },
+    { "name": "Panel", "url": "/" }
+  ]
+}

package/src/interfaces/web/public/sw.js

@@ -0,0 +1,106 @@
+// The panel as an installed app.
+//
+// Chrome will not offer "install" without a service worker that handles fetch,
+// and iOS will not keep a home-screen app in its own window without the
+// manifest this sits beside. That is the whole reason this file exists — it is
+// an installability requirement first and an offline story second.
+//
+// Which makes the caching policy the important part: NETWORK FIRST, always. A
+// panel that served a stale bundle after a rebuild would be worse than no app
+// at all, and this one talks to a daemon on the same machine, so "offline" is
+// nearly always "the daemon moved", not "there is no network". The cache is a
+// last resort that keeps the shell painting long enough to say so.
+//
+// Never cached, under any circumstances:
+//   • /api/*        — data, and the failover in lib/net depends on a real error
+//                     reaching it rather than a cached 200 from an hour ago.
+//   • cross-origin  — when the app fails over to another address, its requests
+//                     are not ours to answer.
+const CACHE = "apx-shell-v3";
+const SHELL = "/index.html";
+
+self.addEventListener("install", () => {
+  // Take over immediately: a half-updated app is a support ticket.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      const names = await caches.keys();
+      await Promise.all(names.filter((n) => n !== CACHE).map((n) => caches.delete(n)));
+      await self.clients.claim();
+    })(),
+  );
+});
+
+self.addEventListener("fetch", (event) => {
+  const req = event.request;
+  if (req.method !== "GET") return;
+
+  let url;
+  try {
+    url = new URL(req.url);
+  } catch {
+    return;
+  }
+  if (url.origin !== self.location.origin) return;
+  if (url.pathname.startsWith("/api/")) return;
+
+  const navigating = req.mode === "navigate";
+
+  event.respondWith(
+    (async () => {
+      try {
+        const res = await fetch(req);
+        if (res && res.ok) {
+          const copy = res.clone();
+          // A navigation to any client route resolves to the same shell, so
+          // one entry serves every path the app can be launched at.
+          const key = navigating ? SHELL : req;
+          caches.open(CACHE).then((c) => c.put(key, copy)).catch(() => {});
+        }
+        return res;
+      } catch (err) {
+        const cache = await caches.open(CACHE);
+        const hit = await cache.match(navigating ? SHELL : req);
+        if (hit) return hit;
+        throw err;
+      }
+    })(),
+  );
+});
+
+// ── Notifications ───────────────────────────────────────────────────────────
+//
+// The worker SHOWS them (lib/notify.ts calls registration.showNotification —
+// Android Chrome has no page-scoped Notification constructor), so the worker
+// has to own the tap. The rule the user expects from every other messaging app:
+// one app. If a window is already open, focus it and route it; only open a new
+// one when there is nothing to focus.
+self.addEventListener("notificationclick", (event) => {
+  event.notification.close();
+  const target = event.notification.data && event.notification.data.url;
+  if (!target) return;
+  event.waitUntil(
+    (async () => {
+      const url = new URL(target, self.location.origin);
+      const clients = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+      for (const client of clients) {
+        if (new URL(client.url).origin !== url.origin) continue;
+        // navigate() is a no-op in some browsers when the client is already
+        // there; focus is the part that must happen either way.
+        try { await client.navigate(url.href); } catch { /* focus still helps */ }
+        // …and focus itself can be refused — a background Chrome tab is not
+        // something an installed app is allowed to raise. Returning it either
+        // way meant the tap did NOTHING: neither focused nor opened. Falling
+        // through to the line below opens the app instead.
+        try {
+          const focused = await client.focus();
+          if (focused) return focused;
+        } catch { /* try the next client, then open a window */ }
+      }
+      return self.clients.openWindow(url.href);
+    })(),
+  );
+});

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

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { Route, Routes, useLocation, useNavigate, useSearchParams } from "react-router-dom";
-import { Languages, Moon, Sun } from "lucide-react";
+import { Navigate, Route, Routes, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { Languages, Moon, Smartphone, Sun } from "lucide-react";
 import { ProjectSidebar, projectKindLabel } from "./components/layout/ProjectSidebar";
 import { ApxAdminScreen } from "./screens/ApxAdminScreen";
 import { InboxScreen } from "./screens/InboxScreen";
@@ -10,7 +10,12 @@ import { DesktopScreen } from "./screens/modules/DesktopScreen";
 import { CodeScreen } from "./screens/modules/CodeScreen";
 import { AddProjectDialog } from "./components/AddProjectDialog";
 import { PairingScreen } from "./screens/PairingScreen";
+import { MobileScreen } from "./screens/mobile/MobileScreen";
+import { fromLegacyMobilePath } from "./screens/mobile/routes";
 import { RobyBubble } from "./components/RobyBubble";
+import { MobileHint } from "./components/MobileHint";
+import { NotifyNudge } from "./components/settings/PanelPrefs";
+import { MobileLinkDialog } from "./components/MobileLinkDialog";
 import { Roby, RobyEmpty, type RobyMood } from "./components/Roby";
 import { ToastProvider } from "./components/Toast";
 import { Button } from "./components/ui/button";
@@ -52,12 +57,64 @@ export function App() {
   return (
     <ToastProvider>
       <TooltipProvider delay={0}>
-        <Shell />
+        <Routes>
+          {/* The panel's own modules used to live under /m too (/m/inbox,
+              /m/code, /m/desktop), which is why they are listed FIRST: a static
+              segment outranks the `/m/*` splat below in React Router's ranking,
+              so these keep working as links even though the namespace now
+              belongs to the phone. They are one-way — the panel's own rail
+              points at the short paths. */}
+          <Route path="/m/inbox"     element={<Moved to="/inbox" />} />
+          <Route path="/m/code/*"    element={<Moved to="/code" />} />
+          <Route path="/m/desktop/*" element={<Moved to="/desktop" />} />
+
+          {/* The phone surface renders OUTSIDE the desktop shell — no project
+              rail, no top bar, no card. Everything it needs is its own header,
+              and anything the shell would add is width it does not have. */}
+          <Route path="/m/*" element={
+            /* Its own viewport box. Outside the Shell there is no h-screen
+               ancestor, so the screen's h-full had nothing to be full OF: the
+               composer flowed past the fold and you could not reach it.
+               100dvh, not 100vh — on a phone the browser's address bar is part
+               of the viewport by the vh definition, so vh puts the last ~60px
+               of the app under it. */
+            <div className="h-[100dvh] w-screen overflow-hidden bg-background text-foreground">
+              <MobileScreen />
+            </div>
+          } />
+
+          {/* The phone's old address. Kept because the links are out in the
+              world and cannot be recalled: the Android shell hardcodes
+              `/mobile`, QR codes have been scanned onto phones, and an
+              installed PWA keeps whatever start_url it was installed with. */}
+          <Route path="/mobile/*" element={<LegacyMobile />} />
+
+          <Route path="*" element={<Shell />} />
+        </Routes>
       </TooltipProvider>
     </ToastProvider>
   );
 }
 
+/**
+ * A route that moved, with everything after it intact.
+ *
+ * `<Navigate to="/code" />` alone would drop the deep segments AND the query,
+ * and `/m/code?pid=7&edit=1` is a real link the Artifacts tab hands out — the
+ * whole point of the redirect is that the thing it opens still opens.
+ */
+function Moved({ to }: { to: string }) {
+  const location = useLocation();
+  const rest = location.pathname.split("/").slice(3).join("/");
+  return <Navigate to={`${to}${rest ? `/${rest}` : ""}${location.search}${location.hash}`} replace />;
+}
+
+/** `/mobile/...` → `/m/...` (see screens/mobile/routes.ts). */
+function LegacyMobile() {
+  const location = useLocation();
+  return <Navigate to={`${fromLegacyMobilePath(location.pathname)}${location.search}${location.hash}`} replace />;
+}
+
 function Shell() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -65,6 +122,7 @@ function Shell() {
   const { theme, toggle } = useTheme();
   const addOpen = params.get("action") === "add-project";
   const [robyOpen, setRobyOpen] = useState(false);
+  const [mobileLinkOpen, setMobileLinkOpen] = useState(false);
 
   const closeAdd = () => {
     const next = new URLSearchParams(params);
@@ -86,14 +144,19 @@ function Shell() {
           onOpenAddProject={openAdd}
         />
         <main className="m-2 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} />
+          <TopBar
+            onToggleTheme={toggle}
+            isDark={theme === "dark"}
+            pathname={location.pathname}
+            onOpenMobileLink={() => setMobileLinkOpen(true)}
+          />
           <div className="flex-1 overflow-y-auto">
             <Routes>
               <Route path="/"           element={<ApxAdminScreen />} />
-              <Route path="/m/inbox"    element={<InboxScreen />} />
+              <Route path="/inbox"      element={<InboxScreen />} />
               <Route path="/settings/*" element={<SettingsScreen />} />
-              <Route path="/m/desktop/*" element={<DesktopScreen />} />
-              <Route path="/m/code/*"   element={<CodeScreen />} />
+              <Route path="/desktop/*"  element={<DesktopScreen />} />
+              <Route path="/code/*"     element={<CodeScreen />} />
               <Route path="/p/:pid/*"   element={<ProjectScreen />} />
               <Route path="*"           element={<NotFound />} />
             </Routes>
@@ -103,6 +166,14 @@ function Shell() {
         {/* Roby (the super-agent) chat sheet. Launcher lives in the rail (below
             Settings); open state is owned here so the rail can trigger it. */}
         <RobyBubble open={robyOpen} onOpenChange={setRobyOpen} />
+        <MobileLinkDialog open={mobileLinkOpen} onClose={() => setMobileLinkOpen(false)} />
+        {/* On a narrow screen, the way to the phone surface and the way to
+            install it — both of which otherwise only exist inside /m,
+            which is the place you have not found yet. */}
+        <MobileHint />
+        {/* The offer, in the corner. It cannot open by itself: a browser only
+            accepts a permission request that came from a real click. */}
+        <NotifyNudge floating />
       </div>
     </NavCollapseProvider>
   );
@@ -112,10 +183,12 @@ function TopBar({
   onToggleTheme,
   isDark,
   pathname,
+  onOpenMobileLink,
 }: {
   onToggleTheme: () => void;
   isDark: boolean;
   pathname: string;
+  onOpenMobileLink: () => void;
 }) {
   const { projects } = useProjects();
   const pageLabel = usePageLabel();
@@ -132,8 +205,8 @@ function TopBar({
     ? t("topbar.breadcrumb_root")
     : parts[0] === "settings"
       ? [t("topbar.breadcrumb_root"), t("nav.settings"), section].filter(Boolean).join(" › ")
-      : parts[0] === "m"
-        ? [t("topbar.breadcrumb_root"), moduleLabel(parts[1]), pageLabel].filter(Boolean).join(" › ")
+      : isModule(parts[0])
+        ? [t("topbar.breadcrumb_root"), moduleLabel(parts[0]), pageLabel].filter(Boolean).join(" › ")
         : parts[0] === "p"
           ? (isDefault
               ? [t("topbar.breadcrumb_root"), t("topbar.breadcrumb_base"), section].filter(Boolean).join(" › ")
@@ -155,9 +228,22 @@ function TopBar({
       {nav && <NavToggle collapsed={nav.collapsed} onToggle={nav.toggle} />}
       <span className="min-w-0 flex-1 truncate text-[11px] tracking-wide text-muted-fg">
         {crumb}
-        {subtitle && <span className="text-muted-fg/50"> · {subtitle}</span>}
+        {subtitle && <span className="text-muted-fg"> · {subtitle}</span>}
       </span>
       {pageActions}
+      {/* Send the chat surface to a phone: one scan carries the address, the
+          /m/chat path and a pairing nonce. */}
+      <Tip content={t("mobile_link.title")}>
+        <button
+          type="button"
+          data-testid="mobile-link"
+          onClick={onOpenMobileLink}
+          aria-label={t("mobile_link.title")}
+          className="shrink-0 rounded-md p-1.5 text-muted-fg hover:bg-accent hover:text-accent-fg"
+        >
+          <Smartphone size={14} />
+        </button>
+      </Tip>
       <LanguageMenu />
       <Tip content={isDark ? t("topbar.light") : t("topbar.dark")}>
         <button
@@ -204,10 +290,20 @@ function LanguageMenu() {
   );
 }
 
+/** The panel's own modules — the top-level sections that are not a project. */
+const MODULES = new Set(["inbox", "code", "desktop"]);
+
+function isModule(key?: string): boolean {
+  return !!key && MODULES.has(key);
+}
+
 function moduleLabel(key?: string) {
   switch (key) {
     case "desktop": return t("nav.modules.desktop");
     case "code":    return t("nav.modules.code");
+    // The inbox prints no heading of its own — the breadcrumb is where its
+    // name lives, so it has to be the real name and not the route segment.
+    case "inbox":   return t("inbox.title");
     default: return key || "";
   }
 }

package/src/interfaces/web/src/assets/cli/cursor.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g clip-path="url(#prefix__clip0_5_17)"><rect width="512" height="512" rx="122" fill="#000"/><g clip-path="url(#prefix__clip1_5_17)"><mask id="prefix__a" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="85" y="89" width="343" height="334"><path d="M85 89h343v334H85V89z" fill="#fff"/></mask><g mask="url(#prefix__a)"><path d="M255.428 423l148.991-83.5L255.428 256l-148.99 83.5 148.99 83.5z" fill="url(#prefix__paint0_linear_5_17)"/><path d="M404.419 339.5v-167L255.428 89v167l148.991 83.5z" fill="url(#prefix__paint1_linear_5_17)"/><path d="M255.428 89l-148.99 83.5v167l148.99-83.5V89z" fill="url(#prefix__paint2_linear_5_17)"/><path d="M404.419 172.5L255.428 423V256l148.991-83.5z" fill="#E4E4E4"/><path d="M404.419 172.5L255.428 256l-148.99-83.5h297.981z" fill="#fff"/></g></g></g><defs><linearGradient id="prefix__paint0_linear_5_17" x1="255.428" y1="256" x2="255.428" y2="423" gradientUnits="userSpaceOnUse"><stop offset=".16" stop-color="#fff" stop-opacity=".39"/><stop offset=".658" stop-color="#fff" stop-opacity=".8"/></linearGradient><linearGradient id="prefix__paint1_linear_5_17" x1="404.419" y1="173.015" x2="257.482" y2="261.497" gradientUnits="userSpaceOnUse"><stop offset=".182" stop-color="#fff" stop-opacity=".31"/><stop offset=".715" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="prefix__paint2_linear_5_17" x1="255.428" y1="89" x2="112.292" y2="342.802" gradientUnits="userSpaceOnUse"><stop stop-color="#fff" stop-opacity=".6"/><stop offset=".667" stop-color="#fff" stop-opacity=".22"/></linearGradient><clipPath id="prefix__clip0_5_17"><path fill="#fff" d="M0 0h512v512H0z"/></clipPath><clipPath id="prefix__clip1_5_17"><path fill="#fff" transform="translate(85 89)" d="M0 0h343v334H0z"/></clipPath></defs></svg>