@guuey/create-agentic-app 0.15.1 → 0.16.1

package/dist/templates/agentic-app/claude-agent-sdk/package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.3.199",
-    "@guuey/config": "0.15.1",
-    "@guuey/worker": "0.15.1"
+    "@guuey/config": "0.16.1",
+    "@guuey/worker": "0.16.1"
   },
   "devDependencies": {
     "@ggui-ai/cli": "0.12.0",
-    "@guuey/cli": "0.15.1",
+    "@guuey/cli": "0.16.1",
     "tsup": "^8.5.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.0"

package/dist/templates/agentic-app/claude-agent-sdk/prompts/system.md

@@ -7,3 +7,9 @@ loop by default; keep plain prose for one-line answers with nothing to
 show. After changing todos (create, toggle, delete), render the updated
 list, so every turn ends on a surface that reflects the current state.
 Use only the fields the surface's schema declares.
+
+An under-specified ask is NEVER answered with a text-only list of
+questions: render the closest useful surface FIRST — the current list,
+the options, a form — and ask your one narrowing question in a short
+line beside it. Clarification happens ON a surface, from the very first
+turn.

package/dist/templates/agentic-app/claude-agent-sdk/web/package.json

@@ -9,8 +9,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@guuey/chat": "0.15.1",
-    "@guuey/mcp-apps-host": "0.15.1",
+    "@guuey/agent-layout": "0.16.1",
+    "@guuey/chat": "0.16.1",
+    "@guuey/mcp-apps-host": "0.16.1",
     "oidc-client-ts": "^3.1.0",
     "qrcode": "^1.5.4",
     "react": "^19.0.0",

package/dist/templates/agentic-app/claude-agent-sdk/web/src/components/AgentChat.tsx

@@ -10,7 +10,7 @@
  */
 import { useEffect, useState, type CSSProperties } from "react";
 import { GuueyChat } from "@guuey/chat/react";
-import type { GuueyChatHandle } from "@guuey/chat/react";
+import type { GuueyChatActivityEvent, GuueyChatHandle } from "@guuey/chat/react";
 import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
 import { agentEndpointUrl, appConfig, historyBaseUrl } from "../config";
 import { currentIdentityMode, ensureGuestSecret } from "../lib/identity";
@@ -40,12 +40,15 @@ export function AgentChat({
   style,
   viewsBridge,
   onReady,
+  onActivity,
 }: {
   className?: string;
   style?: CSSProperties;
   viewsBridge?: ViewsBridge;
   /** Receives the chat handle — the AppShell mounts canvas views with `handle.viewSlotProps()`. */
   onReady?: (handle: GuueyChatHandle) => void;
+  /** Turn-lifecycle edges (guuey#403) — the agent-layout bridge's seam. */
+  onActivity?: (event: GuueyChatActivityEvent) => void;
 }) {
   // The user's CHOSEN mode wins: an explicit "Continue as guest" must never
   // be shadowed by a cached OIDC session. Only when no choice is recorded
@@ -76,6 +79,7 @@ export function AgentChat({
     className,
     style,
     ...(onReady !== undefined ? { onReady } : {}),
+    ...(onActivity !== undefined ? { onActivity } : {}),
     ...(viewsBridge !== undefined
       ? {
           policy: RAIL_POLICY,

package/dist/templates/agentic-app/claude-agent-sdk/web/src/components/AppShell.tsx

@@ -1,5 +1,7 @@
 /**
- * The CHAT-RAIL shell (guuey#303, founder-confirmed):
+ * The CHAT-RAIL shell (guuey#303, founder-confirmed), on
+ * `@guuey/agent-layout` (guuey#403 — this migration is the lib's
+ * acceptance test):
  *
  *   ┌──────────┬────────────────────────┐
  *   │ ☰ Menu 1 │                        │
@@ -18,20 +20,54 @@
  * re-selects its render onto the canvas ("just like a web browser's
  * history"); a new render navigates forward automatically; picking a
  * menu swaps the canvas back to your pages.
+ *
+ * The layout lib owns the AGENT-MODE physics — the two-tone sidebar, the
+ * pane's ground following the user's attention (submit → agent tone; any
+ * navigation → app tone, derived from the route change), the working
+ * state while the agent has the room, light/dark via the SAME mode you
+ * give the chat. The shell wires it once: `navigationKey` from the
+ * router, `bindGuueyChat` onto the rail, `agentViewClosed` on the back
+ * affordance. Zero per-link wiring.
  */
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { GuueyChatHandle } from "@guuey/chat/react";
-import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
 import { GuueyView } from "@guuey/mcp-apps-host/react";
+import {
+  ActivePane,
+  AgentModeProvider,
+  AgentModeShell,
+  AgentModeSidebar,
+  SidebarPanel,
+  bindGuueyChat,
+  useAgentMode,
+} from "@guuey/agent-layout/react";
 import { appConfig } from "../config";
 import { AgentChat } from "../components/AgentChat";
 import { currentIdentityMode, logOut } from "../lib/identity";
 import { oidcConfigured, signOutOidc } from "../lib/oidc";
 
 export function AppShell() {
+  const location = useLocation();
+  return (
+    <AgentModeProvider
+      mode={appConfig.theme.mode}
+      navigationKey={location.pathname}
+      identity={<span className="brand-mark">{appConfig.brand.logoText}</span>}
+    >
+      <ShellBody />
+    </AgentModeProvider>
+  );
+}
+
+function ShellBody() {
   const navigate = useNavigate();
   const mode = currentIdentityMode();
+  const { dispatch } = useAgentMode();
+  // The lib's chat bridge: submit/settle/view-mount flow into the
+  // active-panel machine; the shell composes its own roster handling on top.
+  const binding = useMemo(() => bindGuueyChat(dispatch), [dispatch]);
 
   // The rail↔canvas bridge: the kit's view roster (mount material lives
   // here, the rail shows only chips), the selected key, and whether the
@@ -45,31 +81,42 @@ export function AppShell() {
   const [canvasShowsView, setCanvasShowsView] = useState(false);
   const newestKeyRef = useRef<string | undefined>(undefined);
 
-  const onViewsChange = useCallback((next: PlanViewSummary[]) => {
-    setViews(next);
-    // Browser-history forward-navigation: a NEW live render takes the
-    // canvas. (Reversed find = newest mountable; live entries sit after
-    // history in the roster's transcript order.)
-    const newest = [...next].reverse().find((v) => v.mount !== null && v.phase !== "expired");
-    if (newest !== undefined && newest.key !== newestKeyRef.current) {
-      newestKeyRef.current = newest.key;
-      setSelectedKey(newest.key);
-      setCanvasShowsView(true);
-      // The demo-tour hook (guuey#303): step machines outside the app can
-      // key on "the agent just drew UI".
-      window.dispatchEvent(
-        new CustomEvent("demo:render-complete", {
-          detail: { key: newest.key, title: newest.title },
-        }),
-      );
-    }
-  }, []);
+  const onViewsChange = useCallback(
+    (next: PlanViewSummary[]) => {
+      binding.onViewsChange(next); // the (d) working state clears on a live mount
+      setViews(next);
+      // Browser-history forward-navigation: a NEW live render takes the
+      // canvas. (Reversed find = newest mountable; live entries sit after
+      // history in the roster's transcript order.)
+      const newest = [...next].reverse().find((v) => v.mount !== null && v.phase !== "expired");
+      if (newest !== undefined && newest.key !== newestKeyRef.current) {
+        newestKeyRef.current = newest.key;
+        setSelectedKey(newest.key);
+        setCanvasShowsView(true);
+        // The demo-tour hook (guuey#303): step machines outside the app can
+        // key on "the agent just drew UI".
+        window.dispatchEvent(
+          new CustomEvent("demo:render-complete", {
+            detail: { key: newest.key, title: newest.title },
+          }),
+        );
+      }
+    },
+    [binding],
+  );
 
   const onViewRef = useCallback((item: ViewRefItem) => {
     setSelectedKey(item.key);
     setCanvasShowsView(true);
   }, []);
 
+  const closeView = useCallback(() => {
+    setCanvasShowsView(false);
+    // The lib rule: closing an agent view returns the tone to the menu
+    // UNLESS a turn is still streaming.
+    dispatch({ type: "agentViewClosed" });
+  }, [dispatch]);
+
   const selected = views.find((v) => v.key === selectedKey && v.mount !== null);
 
   async function handleLogOut() {
@@ -80,44 +127,48 @@ export function AppShell() {
 
   return (
     <div className="app-shell">
-      <div className="app-body">
-        <aside className="sidebar">
-          <div className="sidebar-brand">
-            <span className="brand-mark">{appConfig.brand.logoText}</span>
-            <span>{appConfig.brand.name}</span>
-          </div>
-          <nav className="sidebar-menus">
-            {/* Picking a menu swaps the canvas back to your pages. */}
-            <NavLink to="/app" end onClick={() => setCanvasShowsView(false)}>
-              Dashboard
-            </NavLink>
-            <NavLink to="/app/reports" onClick={() => setCanvasShowsView(false)}>
-              Reports
-            </NavLink>
-            <NavLink to="/app/setup" onClick={() => setCanvasShowsView(false)}>
-              Setup
-            </NavLink>
-            <NavLink to="/app/mobile" onClick={() => setCanvasShowsView(false)}>
-              📱 Talk on mobile
-            </NavLink>
-            <button type="button" className="dock-logout" onClick={() => void handleLogOut()}>
-              Log out{mode === "guest" ? " (guest)" : ""}
-            </button>
-          </nav>
-          <div className="agent-rail" data-tour="agent-rail">
+      <AgentModeShell className="app-body">
+        <AgentModeSidebar className="sidebar">
+          <SidebarPanel section="app" className="sidebar-top">
+            <div className="sidebar-brand">
+              <span className="brand-mark">{appConfig.brand.logoText}</span>
+              <span>{appConfig.brand.name}</span>
+            </div>
+            <nav className="sidebar-menus">
+              {/* Picking a menu swaps the canvas back to your pages — the
+                  TONE follow is the lib's (route change + capture-phase). */}
+              <NavLink to="/app" end onClick={() => setCanvasShowsView(false)}>
+                Dashboard
+              </NavLink>
+              <NavLink to="/app/reports" onClick={() => setCanvasShowsView(false)}>
+                Reports
+              </NavLink>
+              <NavLink to="/app/setup" onClick={() => setCanvasShowsView(false)}>
+                Setup
+              </NavLink>
+              <NavLink to="/app/mobile" onClick={() => setCanvasShowsView(false)}>
+                📱 Talk on mobile
+              </NavLink>
+              <button type="button" className="dock-logout" onClick={() => void handleLogOut()}>
+                Log out{mode === "guest" ? " (guest)" : ""}
+              </button>
+            </nav>
+          </SidebarPanel>
+          <SidebarPanel section="agent" className="agent-rail" data-tour="agent-rail">
             <AgentChat
               className="rail-chat"
               viewsBridge={{ promotedViewKey: selectedKey, onViewRef, onViewsChange }}
               onReady={setChat}
+              onActivity={binding.onActivity}
             />
-          </div>
-        </aside>
-        <main className="canvas" data-tour="canvas">
+          </SidebarPanel>
+        </AgentModeSidebar>
+        <ActivePane className="canvas" data-tour="canvas">
           {canvasShowsView && selected !== undefined && selected.mount !== null ? (
             <div className="canvas-view">
               <header className="canvas-view-bar">
                 <span>{selected.title}</span>
-                <button type="button" className="btn" onClick={() => setCanvasShowsView(false)}>
+                <button type="button" className="btn" onClick={closeView}>
                   Back to {appConfig.brand.name}
                 </button>
               </header>
@@ -146,8 +197,8 @@ export function AppShell() {
           ) : (
             <Outlet />
           )}
-        </main>
-      </div>
+        </ActivePane>
+      </AgentModeShell>
     </div>
   );
 }

package/dist/templates/agentic-app/claude-agent-sdk/web/src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "@guuey/chat/styles.css";
+import "@guuey/agent-layout/styles.css";
 import "./styles.css";
 import "./styles-app.css";
 import { appConfig } from "./config";

package/dist/templates/agentic-app/claude-agent-sdk/web/src/styles-app.css

@@ -7,19 +7,26 @@
   flex-direction: column;
 }
 
+/* The lib's AgentModeShell grid carries this class; the app states its own
+   column width (app-tier override of the lib's minmax default). Display
+   comes from the lib sheet. */
 .app-body {
   flex: 1;
-  display: flex;
   min-height: 0;
+  grid-template-columns: 320px 1fr;
 }
 
+/* Tones come from @guuey/agent-layout (the two-panel pair — light AND
+   dark ride the lib's mode-aware tokens); the app keeps its structure. */
 .sidebar {
-  width: 320px;
-  flex-shrink: 0;
+  border-right: 1px solid var(--line);
+}
+
+.sidebar-top {
+  flex: 1;
   display: flex;
   flex-direction: column;
-  border-right: 1px solid var(--line);
-  background: var(--bg-soft);
+  min-height: 0;
 }
 
 .sidebar-brand {
@@ -52,12 +59,12 @@
 }
 
 .agent-rail {
-  display: flex;
-  flex-direction: column;
+  /* Explicit: the app's fixed rail height wins over the lib's flex:1
+     default (deterministic, not load-order luck). */
+  flex: 0 0 auto;
   min-height: 0;
   height: 46vh;
   border-top: 1px solid var(--line);
-  background: var(--bg);
 }
 
 .rail-chat {

package/dist/templates/agentic-app/google-adk/package.json

@@ -16,8 +16,8 @@
   },
   "devDependencies": {
     "@ggui-ai/cli": "0.12.0",
-    "@guuey/cli": "0.15.1",
-    "@guuey/config": "0.15.1",
+    "@guuey/cli": "0.16.1",
+    "@guuey/config": "0.16.1",
     "tsup": "^8.5.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.0"

package/dist/templates/agentic-app/google-adk/prompts/system.md

@@ -7,3 +7,9 @@ loop by default; keep plain prose for one-line answers with nothing to
 show. After changing todos (create, toggle, delete), render the updated
 list, so every turn ends on a surface that reflects the current state.
 Use only the fields the surface's schema declares.
+
+An under-specified ask is NEVER answered with a text-only list of
+questions: render the closest useful surface FIRST — the current list,
+the options, a form — and ask your one narrowing question in a short
+line beside it. Clarification happens ON a surface, from the very first
+turn.

package/dist/templates/agentic-app/google-adk/web/package.json

@@ -9,8 +9,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@guuey/chat": "0.15.1",
-    "@guuey/mcp-apps-host": "0.15.1",
+    "@guuey/agent-layout": "0.16.1",
+    "@guuey/chat": "0.16.1",
+    "@guuey/mcp-apps-host": "0.16.1",
     "oidc-client-ts": "^3.1.0",
     "qrcode": "^1.5.4",
     "react": "^19.0.0",

package/dist/templates/agentic-app/google-adk/web/src/components/AgentChat.tsx

@@ -10,7 +10,7 @@
  */
 import { useEffect, useState, type CSSProperties } from "react";
 import { GuueyChat } from "@guuey/chat/react";
-import type { GuueyChatHandle } from "@guuey/chat/react";
+import type { GuueyChatActivityEvent, GuueyChatHandle } from "@guuey/chat/react";
 import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
 import { agentEndpointUrl, appConfig, historyBaseUrl } from "../config";
 import { currentIdentityMode, ensureGuestSecret } from "../lib/identity";
@@ -40,12 +40,15 @@ export function AgentChat({
   style,
   viewsBridge,
   onReady,
+  onActivity,
 }: {
   className?: string;
   style?: CSSProperties;
   viewsBridge?: ViewsBridge;
   /** Receives the chat handle — the AppShell mounts canvas views with `handle.viewSlotProps()`. */
   onReady?: (handle: GuueyChatHandle) => void;
+  /** Turn-lifecycle edges (guuey#403) — the agent-layout bridge's seam. */
+  onActivity?: (event: GuueyChatActivityEvent) => void;
 }) {
   // The user's CHOSEN mode wins: an explicit "Continue as guest" must never
   // be shadowed by a cached OIDC session. Only when no choice is recorded
@@ -76,6 +79,7 @@ export function AgentChat({
     className,
     style,
     ...(onReady !== undefined ? { onReady } : {}),
+    ...(onActivity !== undefined ? { onActivity } : {}),
     ...(viewsBridge !== undefined
       ? {
           policy: RAIL_POLICY,

package/dist/templates/agentic-app/google-adk/web/src/components/AppShell.tsx

@@ -1,5 +1,7 @@
 /**
- * The CHAT-RAIL shell (guuey#303, founder-confirmed):
+ * The CHAT-RAIL shell (guuey#303, founder-confirmed), on
+ * `@guuey/agent-layout` (guuey#403 — this migration is the lib's
+ * acceptance test):
  *
  *   ┌──────────┬────────────────────────┐
  *   │ ☰ Menu 1 │                        │
@@ -18,20 +20,54 @@
  * re-selects its render onto the canvas ("just like a web browser's
  * history"); a new render navigates forward automatically; picking a
  * menu swaps the canvas back to your pages.
+ *
+ * The layout lib owns the AGENT-MODE physics — the two-tone sidebar, the
+ * pane's ground following the user's attention (submit → agent tone; any
+ * navigation → app tone, derived from the route change), the working
+ * state while the agent has the room, light/dark via the SAME mode you
+ * give the chat. The shell wires it once: `navigationKey` from the
+ * router, `bindGuueyChat` onto the rail, `agentViewClosed` on the back
+ * affordance. Zero per-link wiring.
  */
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { GuueyChatHandle } from "@guuey/chat/react";
-import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
 import { GuueyView } from "@guuey/mcp-apps-host/react";
+import {
+  ActivePane,
+  AgentModeProvider,
+  AgentModeShell,
+  AgentModeSidebar,
+  SidebarPanel,
+  bindGuueyChat,
+  useAgentMode,
+} from "@guuey/agent-layout/react";
 import { appConfig } from "../config";
 import { AgentChat } from "../components/AgentChat";
 import { currentIdentityMode, logOut } from "../lib/identity";
 import { oidcConfigured, signOutOidc } from "../lib/oidc";
 
 export function AppShell() {
+  const location = useLocation();
+  return (
+    <AgentModeProvider
+      mode={appConfig.theme.mode}
+      navigationKey={location.pathname}
+      identity={<span className="brand-mark">{appConfig.brand.logoText}</span>}
+    >
+      <ShellBody />
+    </AgentModeProvider>
+  );
+}
+
+function ShellBody() {
   const navigate = useNavigate();
   const mode = currentIdentityMode();
+  const { dispatch } = useAgentMode();
+  // The lib's chat bridge: submit/settle/view-mount flow into the
+  // active-panel machine; the shell composes its own roster handling on top.
+  const binding = useMemo(() => bindGuueyChat(dispatch), [dispatch]);
 
   // The rail↔canvas bridge: the kit's view roster (mount material lives
   // here, the rail shows only chips), the selected key, and whether the
@@ -45,31 +81,42 @@ export function AppShell() {
   const [canvasShowsView, setCanvasShowsView] = useState(false);
   const newestKeyRef = useRef<string | undefined>(undefined);
 
-  const onViewsChange = useCallback((next: PlanViewSummary[]) => {
-    setViews(next);
-    // Browser-history forward-navigation: a NEW live render takes the
-    // canvas. (Reversed find = newest mountable; live entries sit after
-    // history in the roster's transcript order.)
-    const newest = [...next].reverse().find((v) => v.mount !== null && v.phase !== "expired");
-    if (newest !== undefined && newest.key !== newestKeyRef.current) {
-      newestKeyRef.current = newest.key;
-      setSelectedKey(newest.key);
-      setCanvasShowsView(true);
-      // The demo-tour hook (guuey#303): step machines outside the app can
-      // key on "the agent just drew UI".
-      window.dispatchEvent(
-        new CustomEvent("demo:render-complete", {
-          detail: { key: newest.key, title: newest.title },
-        }),
-      );
-    }
-  }, []);
+  const onViewsChange = useCallback(
+    (next: PlanViewSummary[]) => {
+      binding.onViewsChange(next); // the (d) working state clears on a live mount
+      setViews(next);
+      // Browser-history forward-navigation: a NEW live render takes the
+      // canvas. (Reversed find = newest mountable; live entries sit after
+      // history in the roster's transcript order.)
+      const newest = [...next].reverse().find((v) => v.mount !== null && v.phase !== "expired");
+      if (newest !== undefined && newest.key !== newestKeyRef.current) {
+        newestKeyRef.current = newest.key;
+        setSelectedKey(newest.key);
+        setCanvasShowsView(true);
+        // The demo-tour hook (guuey#303): step machines outside the app can
+        // key on "the agent just drew UI".
+        window.dispatchEvent(
+          new CustomEvent("demo:render-complete", {
+            detail: { key: newest.key, title: newest.title },
+          }),
+        );
+      }
+    },
+    [binding],
+  );
 
   const onViewRef = useCallback((item: ViewRefItem) => {
     setSelectedKey(item.key);
     setCanvasShowsView(true);
   }, []);
 
+  const closeView = useCallback(() => {
+    setCanvasShowsView(false);
+    // The lib rule: closing an agent view returns the tone to the menu
+    // UNLESS a turn is still streaming.
+    dispatch({ type: "agentViewClosed" });
+  }, [dispatch]);
+
   const selected = views.find((v) => v.key === selectedKey && v.mount !== null);
 
   async function handleLogOut() {
@@ -80,44 +127,48 @@ export function AppShell() {
 
   return (
     <div className="app-shell">
-      <div className="app-body">
-        <aside className="sidebar">
-          <div className="sidebar-brand">
-            <span className="brand-mark">{appConfig.brand.logoText}</span>
-            <span>{appConfig.brand.name}</span>
-          </div>
-          <nav className="sidebar-menus">
-            {/* Picking a menu swaps the canvas back to your pages. */}
-            <NavLink to="/app" end onClick={() => setCanvasShowsView(false)}>
-              Dashboard
-            </NavLink>
-            <NavLink to="/app/reports" onClick={() => setCanvasShowsView(false)}>
-              Reports
-            </NavLink>
-            <NavLink to="/app/setup" onClick={() => setCanvasShowsView(false)}>
-              Setup
-            </NavLink>
-            <NavLink to="/app/mobile" onClick={() => setCanvasShowsView(false)}>
-              📱 Talk on mobile
-            </NavLink>
-            <button type="button" className="dock-logout" onClick={() => void handleLogOut()}>
-              Log out{mode === "guest" ? " (guest)" : ""}
-            </button>
-          </nav>
-          <div className="agent-rail" data-tour="agent-rail">
+      <AgentModeShell className="app-body">
+        <AgentModeSidebar className="sidebar">
+          <SidebarPanel section="app" className="sidebar-top">
+            <div className="sidebar-brand">
+              <span className="brand-mark">{appConfig.brand.logoText}</span>
+              <span>{appConfig.brand.name}</span>
+            </div>
+            <nav className="sidebar-menus">
+              {/* Picking a menu swaps the canvas back to your pages — the
+                  TONE follow is the lib's (route change + capture-phase). */}
+              <NavLink to="/app" end onClick={() => setCanvasShowsView(false)}>
+                Dashboard
+              </NavLink>
+              <NavLink to="/app/reports" onClick={() => setCanvasShowsView(false)}>
+                Reports
+              </NavLink>
+              <NavLink to="/app/setup" onClick={() => setCanvasShowsView(false)}>
+                Setup
+              </NavLink>
+              <NavLink to="/app/mobile" onClick={() => setCanvasShowsView(false)}>
+                📱 Talk on mobile
+              </NavLink>
+              <button type="button" className="dock-logout" onClick={() => void handleLogOut()}>
+                Log out{mode === "guest" ? " (guest)" : ""}
+              </button>
+            </nav>
+          </SidebarPanel>
+          <SidebarPanel section="agent" className="agent-rail" data-tour="agent-rail">
             <AgentChat
               className="rail-chat"
               viewsBridge={{ promotedViewKey: selectedKey, onViewRef, onViewsChange }}
               onReady={setChat}
+              onActivity={binding.onActivity}
             />
-          </div>
-        </aside>
-        <main className="canvas" data-tour="canvas">
+          </SidebarPanel>
+        </AgentModeSidebar>
+        <ActivePane className="canvas" data-tour="canvas">
           {canvasShowsView && selected !== undefined && selected.mount !== null ? (
             <div className="canvas-view">
               <header className="canvas-view-bar">
                 <span>{selected.title}</span>
-                <button type="button" className="btn" onClick={() => setCanvasShowsView(false)}>
+                <button type="button" className="btn" onClick={closeView}>
                   Back to {appConfig.brand.name}
                 </button>
               </header>
@@ -146,8 +197,8 @@ export function AppShell() {
           ) : (
             <Outlet />
           )}
-        </main>
-      </div>
+        </ActivePane>
+      </AgentModeShell>
     </div>
   );
 }

package/dist/templates/agentic-app/google-adk/web/src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import "@guuey/chat/styles.css";
+import "@guuey/agent-layout/styles.css";
 import "./styles.css";
 import "./styles-app.css";
 import { appConfig } from "./config";