@agent-native/core 0.176.1 → 0.176.2-nightly-20260831184159

package/corpus/templates/plan/actions/list-plan-versions.ts

@@ -3,7 +3,10 @@ import { and, desc, eq, inArray } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
-import { summarizePlanVersionRow } from "../server/lib/plan-versions.js";
+import {
+  parsePlanVersionChatContext,
+  summarizePlanVersionRow,
+} from "../server/lib/plan-versions.js";
 import { assertPlanEditor } from "../server/plans.js";
 
 export default defineAction({
@@ -47,6 +50,7 @@ export default defineAction({
         hasCanvas: schema.planVersions.hasCanvas,
         hasPrototype: schema.planVersions.hasPrototype,
         previewText: schema.planVersions.previewText,
+        chatContext: schema.planVersions.chatContext,
       })
       .from(schema.planVersions)
       .where(
@@ -77,12 +81,23 @@ export default defineAction({
     return {
       planId,
       count: versions.length,
-      versions: versions.map((version) =>
-        summarizePlanVersionRow({
+      versions: versions.map((version) => {
+        const summary = summarizePlanVersionRow({
           ...version,
           snapshotJson: legacySnapshotById.get(version.id) ?? null,
-        }),
-      ),
+        });
+        let chatContext;
+        try {
+          chatContext = parsePlanVersionChatContext(version.chatContext);
+        } catch {
+          chatContext = undefined;
+        }
+        return {
+          ...summary,
+          editable: Boolean(chatContext),
+          ...(chatContext ? { chatContext } : {}),
+        };
+      }),
     };
   },
 });

package/corpus/templates/plan/agent-native.json

@@ -1,10 +1,7 @@
 {
   "version": 1,
   "onboarding": {
-    "firstRun": {
-      "development": "off",
-      "production": "connect-and-integrations"
-    }
+    "firstRun": "off"
   },
   "doctor": {
     "failOnBuild": false

package/corpus/templates/plan/app/components/editor/PlanDocumentEditor.tsx

@@ -832,7 +832,7 @@ export function PlanDocumentEditor({
    */
   sharedCollabDoc?: Pick<
     UseCollaborativeDocResult,
-    "ydoc" | "awareness" | "isSynced"
+    "ydoc" | "awareness" | "isSynced" | "initialization"
   >;
 }) {
   const t = useT();
@@ -1015,8 +1015,11 @@ export function PlanDocumentEditor({
     ydoc,
     awareness,
     isSynced: collabSyncedRaw,
+    initialization: collabInitialization,
   } = collabEnabled && sharedCollabDoc ? sharedCollabDoc : ownCollabDoc;
   const collabSynced = collabEnabled ? collabSyncedRaw : true;
+  const editorEditable =
+    editable && (!collabEnabled || collabInitialization.status === "ready");
 
   const getDragTransferData = useMemo<DragHandleOptions["getDragTransferData"]>(
     () =>
@@ -1498,7 +1501,7 @@ export function PlanDocumentEditor({
           value={value}
           onChange={handleChange}
           contentUpdatedAt={contentUpdatedAt}
-          editable={editable}
+          editable={editorEditable}
           dialect="gfm"
           features={{ image: false }}
           extraExtensions={extraExtensions}

package/corpus/templates/plan/app/components/layout/Layout.tsx

@@ -1,14 +1,17 @@
 import {
   AgentSidebar,
   isAgentChatHomeHandoffActive,
+  isAssistantChatHistoryVersion,
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
+  type AssistantChatHistoryConfig,
+  type AssistantChatHistoryVersion,
 } from "@agent-native/core/client/agent-chat";
 import { useSession } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
 import { IconMenu2 } from "@tabler/icons-react";
-import { useState, useEffect } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 
 import {
@@ -90,6 +93,41 @@ export function Layout({ children }: LayoutProps) {
   const ownsToolbar = routeOwnsToolbar(location.pathname);
   const planDetailRoute = isPlanDetailRoute(location.pathname);
   const chatRoute = pathname === "/chat";
+  const planScope = useMemo(() => {
+    if (!planDetailRoute || pathname.startsWith("/local-plans/")) {
+      return undefined;
+    }
+    const match = pathname.match(/^\/(?:plans|recaps)\/([^/]+)/);
+    return match?.[1] ? { type: "plan" as const, id: match[1] } : undefined;
+  }, [pathname, planDetailRoute]);
+  const planChatHistory = useMemo<
+    AssistantChatHistoryConfig | undefined
+  >(() => {
+    if (!planScope) return undefined;
+    const planId = planScope.id;
+    return {
+      list: {
+        action: "list-plan-versions",
+        args: { planId, limit: 100 },
+        getVersions: (result: unknown) => {
+          const versions =
+            result && typeof result === "object"
+              ? (result as { versions?: unknown }).versions
+              : undefined;
+          return Array.isArray(versions)
+            ? versions.filter(isAssistantChatHistoryVersion)
+            : [];
+        },
+      },
+      restore: {
+        action: "restore-plan-version",
+        args: (version: AssistantChatHistoryVersion) => ({
+          planId,
+          versionId: version.id,
+        }),
+      },
+    };
+  }, [planScope]);
   const { session, isLoading: sessionLoading } = useSession();
   const chatHomeHandoffActive = useAgentChatHomeHandoff({
     storageKey: "plans",
@@ -227,6 +265,8 @@ export function Layout({ children }: LayoutProps) {
             chatViewTransitionHandoff={chatHomeHandoffPending}
             storageKey="plans"
             openOnChatRunning={chatHomeHandoffActive}
+            scope={planScope}
+            chatHistory={planChatHistory}
             agentPageHref="/settings/agent"
             emptyStateText={t("agent.emptyState")}
             suggestions={[

package/corpus/templates/plan/app/components/layout/Sidebar.tsx

@@ -6,7 +6,6 @@ import {
   type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 import { useCodeMode } from "@agent-native/core/client/agent-chat";
-import { appPath } from "@agent-native/core/client/api-path";
 import { PromptComposer } from "@agent-native/core/client/composer";
 import { DevDatabaseLink } from "@agent-native/core/client/db-admin";
 import { useSession } from "@agent-native/core/client/hooks";
@@ -14,6 +13,7 @@ import { useT } from "@agent-native/core/client/i18n";
 import { openCommandMenu } from "@agent-native/core/client/navigation";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import {
+  AgentNativeIcon,
   buildSignInReturnHref,
   FeedbackButton,
 } from "@agent-native/core/client/ui";
@@ -624,21 +624,9 @@ export function Sidebar({
           disabled={!collapsible || !onCollapsedChange}
           data-sidebar-brand-toggle
         >
-          <img
-            src={appPath("/agent-native-icon-light.svg")}
-            alt=""
+          <AgentNativeIcon
             aria-hidden="true"
-            width={28}
-            height={16}
-            className="block h-4 w-7 shrink-0 object-contain object-center dark:hidden"
-          />
-          <img
-            src={appPath("/agent-native-icon-dark.svg")}
-            alt=""
-            aria-hidden="true"
-            width={28}
-            height={16}
-            className="hidden h-4 w-7 shrink-0 object-contain object-center dark:block"
+            className="h-3.5 w-6 shrink-0 text-sidebar-foreground"
           />
           {!collapsed && (
             <span className="truncate text-sm font-semibold tracking-tight">
@@ -729,7 +717,7 @@ export function Sidebar({
       </nav>
 
       {!collapsed && session ? (
-        <div className="space-y-2 px-3 py-2">
+        <div className="space-y-2 px-3 py-2 empty:hidden">
           <DevDatabaseLink />
           <OrgSwitcher />
         </div>

package/corpus/templates/plan/app/components/plan/PlanMarkdownEditor.tsx

@@ -93,11 +93,14 @@ export function PlanMarkdownEditor({
     ydoc,
     awareness,
     isSynced: collabSynced,
+    initialization,
   } = useCollaborativeDoc({
     docId,
     requestSource: TAB_ID,
     user: collabUser ?? undefined,
   });
+  const editorEditable =
+    editable && (!collabEnabled || initialization.status === "ready");
 
   const queueFlush = useCallback((delay = SAVE_DEBOUNCE_MS) => {
     if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
@@ -156,10 +159,10 @@ export function PlanMarkdownEditor({
   const handleChange = useCallback(
     (nextMarkdown: string) => {
       latestMarkdownRef.current = nextMarkdown;
-      if (!editable) return;
+      if (!editorEditable) return;
       queueFlush();
     },
-    [editable, queueFlush],
+    [editorEditable, queueFlush],
   );
 
   return (
@@ -167,7 +170,7 @@ export function PlanMarkdownEditor({
       value={markdown}
       onChange={handleChange}
       onBlur={() => void flushSave()}
-      editable={editable}
+      editable={editorEditable}
       contentUpdatedAt={contentUpdatedAt}
       dialect="gfm"
       preset="plan"
@@ -177,7 +180,7 @@ export function PlanMarkdownEditor({
       slashItems={PLAN_SLASH_COMMANDS}
       className={cn("plan-rich-markdown-editor mt-4", className)}
       ariaLabel={ariaLabel}
-      interactive={editable}
+      interactive={editorEditable}
       ydoc={collabEnabled ? ydoc : null}
       collabSynced={collabEnabled ? collabSynced : true}
       awareness={collabEnabled ? awareness : null}

package/corpus/templates/plan/app/components/plan/wireframe/Wireframe.tsx

@@ -494,7 +494,7 @@ function HtmlArtboard({
       render={({ theme, style }) => (
         <div
           ref={htmlRef}
-          className="plan-html-frame"
+          className={cn("plan-html-frame", data.skeleton && "skeleton-shimmer")}
           data-theme={theme}
           data-style={style}
           data-frame={showFrame ? "show" : "hide"}

package/corpus/templates/plan/app/components/plan/wireframe/html-artboard.css

@@ -268,11 +268,26 @@
   --wf-card: var(--plan-block, hsl(var(--card)));
   --wf-accent: var(--plan-muted-line, hsl(var(--border)));
   --wf-accent-soft: var(--plan-block, hsl(var(--card)));
+  background-image: linear-gradient(
+    100deg,
+    transparent 30%,
+    hsl(var(--foreground) / 0.043) 50%,
+    transparent 70%
+  );
+  background-position: 150% 0;
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.6s linear infinite;
 }
 .plan-html-frame[data-skeleton="true"] * {
   color: transparent !important;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .plan-html-frame[data-skeleton="true"] {
+    animation: none;
+  }
+}
+
 /*
  * Inline architecture/code diagrams.
  *

package/corpus/templates/plan/app/components/plan/wireframe/kit/plan-wireframe-tokens.css

@@ -125,18 +125,3 @@
 .plan-wf[data-skeleton="true"] {
   --radius: 7px;
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .plan-wf[data-skeleton="true"] {
-    animation: plan-skeleton-pulse 1.6s ease-in-out infinite;
-  }
-}
-@keyframes plan-skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.7;
-  }
-}

package/corpus/templates/plan/app/components/plan/wireframe/kit/primitives.tsx

@@ -112,7 +112,7 @@ export function Screen({
   void sketch;
   return (
     <div
-      className="plan-wf"
+      className={isSkeleton ? "plan-wf skeleton-shimmer" : "plan-wf"}
       data-density={density ?? "regular"}
       data-theme={wfTheme}
       data-skeleton={isSkeleton ? "true" : undefined}
@@ -121,7 +121,7 @@ export function Screen({
         position: "relative",
         width: "100%",
         height: "100%",
-        background: V.paper,
+        backgroundColor: V.paper,
         color: V.ink,
         fontFamily: V.hand,
         fontSize: V.fs,

package/corpus/templates/plan/app/hooks/use-plan-presence.ts

@@ -27,7 +27,10 @@ export interface UsePlanPresenceResult {
    * `Y.Doc`/`Awareness`/poll loop, doubled `/collab/<docId>/*` traffic). Null
    * when presence itself is disabled (recap views, no planId).
    */
-  collabDoc: Pick<UseCollaborativeDocResult, "ydoc" | "awareness" | "isSynced">;
+  collabDoc: Pick<
+    UseCollaborativeDocResult,
+    "ydoc" | "awareness" | "isSynced" | "initialization"
+  >;
 }
 
 /**
@@ -50,14 +53,21 @@ export function usePlanPresence(options: {
   const { planId, enabled = true, user } = options;
   const docId = enabled && planId ? `plan:${planId}` : null;
 
-  const { ydoc, awareness, isSynced, activeUsers, agentPresent, agentActive } =
-    useCollaborativeDoc({
-      docId,
-      user,
-      requestSource: TAB_ID,
-      // Presence is low-stakes; a relaxed poll keeps it cheap.
-      pollInterval: 3000,
-    });
+  const {
+    ydoc,
+    awareness,
+    isSynced,
+    initialization,
+    activeUsers,
+    agentPresent,
+    agentActive,
+  } = useCollaborativeDoc({
+    docId,
+    user,
+    requestSource: TAB_ID,
+    // Presence is low-stakes; a relaxed poll keeps it cheap.
+    pollInterval: 3000,
+  });
 
   const localClientId = ydoc?.clientID ?? null;
   const { others } = usePresence(awareness, localClientId);
@@ -71,6 +81,6 @@ export function usePlanPresence(options: {
     agentPresent,
     agentActive,
     recentEdits,
-    collabDoc: { ydoc, awareness, isSynced },
+    collabDoc: { ydoc, awareness, isSynced, initialization },
   };
 }

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -7410,11 +7410,11 @@ function PlanSkillDemoVideo({ demo }: { demo: PlanSkillDemo }) {
         />
         <div
           aria-hidden
-          className={`pointer-events-none absolute inset-0 bg-muted transition-opacity duration-300 ${
+          className={`skeleton-shimmer pointer-events-none absolute inset-0 bg-muted transition-opacity duration-300 ${
             isLoaded ? "opacity-0" : "opacity-100"
           }`}
         >
-          <div className="flex size-full animate-pulse flex-col justify-between p-4">
+          <div className="flex size-full flex-col justify-between p-4">
             <div className="space-y-2">
               <div className="h-3 w-1/3 rounded-full bg-border" />
               <div className="h-2.5 w-2/3 rounded-full bg-border/80" />

package/corpus/templates/plan/app/root.tsx

@@ -224,6 +224,7 @@ export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   const location = useLocation();
   const pathname = location.pathname.replace(/\/+$/, "") || "/";
+  const isMarketingPath = pathname === "/";
   const sessionBypass =
     pathname === "/chat" ||
     pathname === "/plans" ||
@@ -240,18 +241,23 @@ export default function Root() {
     <AppToolkitProvider>
       <AppProviders
         queryClient={queryClient}
+        isPublicPath={isMarketingPath}
         sessionBypass={sessionBypass}
         documentTitleFallback={APP_TITLE}
         toaster={<Toaster richColors position="bottom-left" />}
         i18n={{ catalog: i18nCatalog }}
       >
-        <div
-          data-an-mask={localPlanPrivacyRoute ? "" : undefined}
-          style={{ display: "contents" }}
-        >
-          <DbSyncSetup />
-          <AppContent />
-        </div>
+        {isMarketingPath ? (
+          <Outlet />
+        ) : (
+          <div
+            data-an-mask={localPlanPrivacyRoute ? "" : undefined}
+            style={{ display: "contents" }}
+          >
+            <DbSyncSetup />
+            <AppContent />
+          </div>
+        )}
       </AppProviders>
     </AppToolkitProvider>
   );

package/corpus/templates/plan/app/routes/_index.tsx

@@ -1,10 +1,35 @@
-import { withSsrHtmlContentType } from "@agent-native/core/shared";
-import { redirect } from "react-router";
+import { appPath } from "@agent-native/core/client/api-path";
+import { MarketingHome } from "@agent-native/toolkit/marketing";
 
-export function loader() {
-  return withSsrHtmlContentType(redirect("/plans"));
+const SEO_TITLE = "Plan";
+const SEO_DESCRIPTION =
+  "Visual plans, diagrams, wireframes, and shareable reviews for coding-agent work.";
+
+export function meta() {
+  return [
+    { title: SEO_TITLE },
+    { name: "description", content: SEO_DESCRIPTION },
+    { property: "og:title", content: SEO_TITLE },
+    { property: "og:description", content: SEO_DESCRIPTION },
+    { name: "twitter:card", content: "summary" },
+    { name: "twitter:title", content: SEO_TITLE },
+    { name: "twitter:description", content: SEO_DESCRIPTION },
+  ];
 }
 
-export default function IndexRedirect() {
-  return null;
+export default function MarketingHomeRoute() {
+  return (
+    <MarketingHome
+      appName="Plan"
+      tagline="Turn coding-agent plans into visual, annotatable HTML before code changes happen."
+      description={SEO_DESCRIPTION}
+      valueProps={[
+        "Create diagrams, wireframes, mockups, and prototype options from one prompt",
+        "Annotate plans as a visual review surface",
+        "Share account-backed review links when a plan needs outside feedback",
+      ]}
+      primaryActionHref={appPath("/home")}
+      secondaryActionHref={appPath("/sign-in")}
+    />
+  );
 }

package/corpus/templates/plan/app/routes/chat.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { DefaultSpinner } from "@agent-native/core/client/ui";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlanChatPage } from "@/pages/PlanChatPage";
 
@@ -22,11 +23,7 @@ export function meta() {
 }
 
 export function HydrateFallback() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <Spinner className="size-8 text-foreground" />
-    </div>
-  );
+  return <DefaultSpinner />;
 }
 
 export default function ChatRoute() {

package/corpus/templates/plan/app/routes/home.tsx

@@ -0,0 +1,11 @@
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
+import { redirect } from "react-router";
+
+export function loader() {
+  return withSsrHtmlContentType(redirect("/plans"));
+}
+
+// Private app redirect retained at /home; / serves the public marketing page.
+export default function IndexRedirect() {
+  return null;
+}

package/corpus/templates/plan/app/routes/local-plans.$slug.tsx

@@ -1,6 +1,6 @@
+import { DefaultSpinner } from "@agent-native/core/client/ui";
 import { useParams } from "react-router";
 
-import { Spinner } from "@/components/ui/spinner";
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 
@@ -16,11 +16,7 @@ export function meta() {
 }
 
 export function HydrateFallback() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <Spinner className="size-8 text-foreground" />
-    </div>
-  );
+  return <DefaultSpinner />;
 }
 
 export default function LocalPlanRoute() {

package/corpus/templates/plan/app/routes/plans.$id.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { DefaultSpinner } from "@agent-native/core/client/ui";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { planDocumentTitle } from "@/lib/plan-document-title";
 import { PlansPage } from "@/pages/PlansPage";
@@ -38,11 +39,7 @@ export const meta: Route.MetaFunction = ({ loaderData }) => {
 };
 
 export function HydrateFallback() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <Spinner className="size-8 text-foreground" />
-    </div>
-  );
+  return <DefaultSpinner />;
 }
 
 export default function PlanRoute() {

package/corpus/templates/plan/app/routes/plans.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { DefaultSpinner } from "@agent-native/core/client/ui";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 
@@ -14,11 +15,7 @@ export function meta() {
 }
 
 export function HydrateFallback() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <Spinner className="size-8 text-foreground" />
-    </div>
-  );
+  return <DefaultSpinner />;
 }
 
 export default function PlansRoute() {

package/corpus/templates/plan/app/routes/recaps.$id.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { DefaultSpinner } from "@agent-native/core/client/ui";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { planDocumentTitle } from "@/lib/plan-document-title";
 import { PlansPage } from "@/pages/PlansPage";
@@ -38,11 +39,7 @@ export const meta: Route.MetaFunction = ({ loaderData }) => {
 };
 
 export function HydrateFallback() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <Spinner className="size-8 text-foreground" />
-    </div>
-  );
+  return <DefaultSpinner />;
 }
 
 export default function RecapRoute() {

package/corpus/templates/plan/app/routes/recaps.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { DefaultSpinner } from "@agent-native/core/client/ui";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 
@@ -14,11 +15,7 @@ export function meta() {
 }
 
 export function HydrateFallback() {
-  return (
-    <div className="flex h-screen w-full items-center justify-center">
-      <Spinner className="size-8 text-foreground" />
-    </div>
-  );
+  return <DefaultSpinner />;
 }
 
 export default function RecapsRoute() {

package/corpus/templates/plan/changelog/2026-08-28-plan-loading-skeletons-use-a-softer-whole-surface.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-28
+---
+
+Plan loading placeholders now use a softer whole-surface shine.

package/corpus/templates/plan/changelog/2026-08-29-plan-loading-shine-is-more-subtle.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-29
+---
+
+Plan loading states now use an even more subtle whole-surface shine.

package/corpus/templates/plan/public/manifest.json

@@ -2,7 +2,7 @@
   "name": "Plan",
   "short_name": "Plan",
   "description": "Generate and review coding-agent plans with diagrams, wireframes, prototypes, annotations, sharing, and feedback.",
-  "start_url": ".",
+  "start_url": "./home",
   "background_color": "#111111",
   "theme_color": "#71717A",
   "icons": [

package/corpus/templates/plan/server/db/schema.ts

@@ -163,6 +163,7 @@ export const planVersions = table("plan_versions", {
     .notNull()
     .default("agent"),
   createdAt: text("created_at").notNull(),
+  chatContext: text("chat_context"),
   // Denormalized copies of summarizePlanVersion's derived fields, populated at
   // snapshot-write time so list-plan-versions can project just these small
   // columns instead of fetching + JSON.parsing every row's full snapshot_json