@agent-native/core 0.84.29 → 0.84.32

package/corpus/templates/design/app/pages/DesignEditor.tsx

@@ -67,7 +67,10 @@ import {
   type TweakSelections,
 } from "@shared/resolve-tweaks";
 import { utilityStem, widthToPrefix } from "@shared/responsive-classes";
-import { normalizeDesignSourceType } from "@shared/source-mode";
+import {
+  normalizeDesignSourceType,
+  type DesignSourceType,
+} from "@shared/source-mode";
 import {
   IconArrowLeft,
   IconArrowUpRight,
@@ -146,6 +149,10 @@ import {
   CanvasContextMenu,
   type CanvasContextMenuHandle,
 } from "@/components/design/CanvasContextMenu";
+import {
+  CodeWorkbenchHost,
+  type CodeWorkbenchActiveFile,
+} from "@/components/design/CodeWorkbenchHost";
 import {
   DesignCanvas,
   type IframeContextMenuPayload,
@@ -347,6 +354,28 @@ function getContentSignature(content: string): string {
   return `${content.length}:${hash.toString(36)}`;
 }
 
+export function getOverviewScreenRuntimeReplacementKey({
+  screenId,
+  updatedAt,
+  content,
+}: {
+  screenId: string;
+  updatedAt?: string | null;
+  content: string;
+}) {
+  return [screenId, updatedAt ?? "", getContentSignature(content)].join(":");
+}
+
+export function shouldUseOverviewRuntimeReplacement({
+  sourceType,
+  externalSnapshotHtml,
+}: {
+  sourceType?: DesignSourceType | null;
+  externalSnapshotHtml?: string | null;
+}) {
+  return sourceType === "inline" && !externalSnapshotHtml;
+}
+
 function dedupeStringIds(ids: string[]): string[] {
   return Array.from(new Set(ids.filter(Boolean)));
 }
@@ -525,18 +554,34 @@ export function getDesignEditorStateUrlSearch(args: {
   currentSearch: string;
   viewMode: "single" | "overview";
   screenId?: string | null;
+  codeFileId?: string | null;
+  codeFilename?: string | null;
   selectionId?: string | null;
+  leftPanel?: DesignLeftPanel | null;
   zoom?: number | null;
 }) {
   const params = new URLSearchParams(args.currentSearch);
   params.set("view", args.viewMode);
+  if (args.leftPanel && args.leftPanel !== "file") {
+    params.set("panel", args.leftPanel);
+  } else {
+    params.delete("panel");
+  }
   if (args.screenId) {
     params.set("screen", args.screenId);
   } else {
     params.delete("screen");
   }
-  params.delete("fileId");
-  params.delete("filename");
+  if (args.leftPanel === "code" && args.codeFileId) {
+    params.set("fileId", args.codeFileId);
+  } else {
+    params.delete("fileId");
+  }
+  if (args.leftPanel === "code" && !args.codeFileId && args.codeFilename) {
+    params.set("filename", args.codeFilename);
+  } else {
+    params.delete("filename");
+  }
   if (args.selectionId) {
     params.set("selection", args.selectionId);
   } else {
@@ -3470,13 +3515,20 @@ function AgentNativeMenuMark({ className }: { className?: string }) {
   );
 }
 
-type DesignLeftPanel = "file" | "agent" | "assets" | "tools" | "tokens";
+type DesignLeftPanel =
+  | "file"
+  | "agent"
+  | "assets"
+  | "tools"
+  | "tokens"
+  | "code";
 
 const INITIAL_GENERATION_DISABLED_LEFT_PANELS = new Set<DesignLeftPanel>([
   "file",
   "assets",
   "tools",
   "tokens",
+  "code",
 ]);
 
 function normalizeDesignLeftPanel(value: unknown): DesignLeftPanel | undefined {
@@ -3485,7 +3537,8 @@ function normalizeDesignLeftPanel(value: unknown): DesignLeftPanel | undefined {
     value === "agent" ||
     value === "assets" ||
     value === "tools" ||
-    value === "tokens"
+    value === "tokens" ||
+    value === "code"
     ? value
     : undefined;
 }
@@ -3539,6 +3592,11 @@ function DesignWorkspaceRail({
       icon: <IconAssembly className="size-[15px]" />,
     },
   ];
+  const codeItem = {
+    panel: "code" as const,
+    label: "Code" /* i18n-ignore */,
+    icon: <IconCode className="size-[15px]" />,
+  };
 
   return (
     <nav
@@ -3597,6 +3655,51 @@ function DesignWorkspaceRail({
             </Tooltip>
           );
         })}
+        <div className="mt-auto flex w-full flex-col items-center border-t border-border/70 pt-3">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label={codeItem.label}
+                aria-disabled={disabledPanels?.has(codeItem.panel) || undefined}
+                aria-current={
+                  activePanel === codeItem.panel ? "page" : undefined
+                }
+                tabIndex={disabledPanels?.has(codeItem.panel) ? -1 : undefined}
+                onClick={(event) => {
+                  if (disabledPanels?.has(codeItem.panel)) {
+                    event.preventDefault();
+                    return;
+                  }
+                  onPanelChange(codeItem.panel);
+                }}
+                className={cn(
+                  "group flex w-12 cursor-pointer flex-col items-center justify-start gap-1 rounded-none text-[10px] font-[450] leading-none text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]",
+                  disabledPanels?.has(codeItem.panel) &&
+                    "cursor-default opacity-35 hover:text-muted-foreground",
+                  activePanel === codeItem.panel && "text-foreground",
+                )}
+              >
+                <span
+                  className={cn(
+                    "flex size-8 items-center justify-center rounded-lg transition-colors",
+                    activePanel === codeItem.panel
+                      ? "bg-[var(--design-editor-selection-color)] text-[var(--design-editor-accent-color)]"
+                      : "text-muted-foreground group-hover:bg-[var(--design-editor-layer-hover-color)] group-hover:text-foreground",
+                    disabledPanels?.has(codeItem.panel) &&
+                      "group-hover:bg-transparent group-hover:text-muted-foreground",
+                  )}
+                >
+                  {codeItem.icon}
+                </span>
+                <span className="max-w-full truncate leading-none">
+                  {codeItem.label}
+                </span>
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{codeItem.label}</TooltipContent>
+          </Tooltip>
+        </div>
       </div>
       {onMotionToggle ? (
         <div className="mt-4 flex w-full flex-col items-center border-t border-border/70 pt-3">
@@ -4583,6 +4686,8 @@ export default function DesignEditor() {
     useState<InspectorTab>("design");
   const [activeLeftPanel, setActiveLeftPanel] =
     useState<DesignLeftPanel>("file");
+  const [activeCodeFile, setActiveCodeFile] =
+    useState<CodeWorkbenchActiveFile | null>(null);
   const initialSearchCommandAppliedForIdRef = useRef<string | null>(null);
   const initialUrlSelectionHydratedForIdRef = useRef<string | null>(null);
   const [leftSidebarWidth, setLeftSidebarWidth] = useState(256);
@@ -4871,11 +4976,17 @@ export default function DesignEditor() {
       event.stopPropagation();
       event.currentTarget.setPointerCapture?.(event.pointerId);
       const startX = event.clientX;
-      const startWidth = side === "left" ? leftSidebarWidth : rightSidebarWidth;
+      const codePanelOpen = side === "left" && activeLeftPanel === "code";
+      const startWidth =
+        side === "left"
+          ? codePanelOpen
+            ? Math.max(leftSidebarWidth, 640)
+            : Math.min(leftSidebarWidth, 420)
+          : rightSidebarWidth;
       const setWidth =
         side === "left" ? setLeftSidebarWidth : setRightSidebarWidth;
-      const minWidth = side === "left" ? 220 : 240;
-      const maxWidth = side === "left" ? 420 : 390;
+      const minWidth = side === "left" ? (codePanelOpen ? 520 : 220) : 240;
+      const maxWidth = side === "left" ? (codePanelOpen ? 860 : 420) : 390;
       const previousCursor = document.body.style.cursor;
       const previousUserSelect = document.body.style.userSelect;
       const dragShield = document.createElement("div");
@@ -4914,7 +5025,7 @@ export default function DesignEditor() {
       window.addEventListener("pointerup", cleanup);
       window.addEventListener("pointercancel", cleanup);
     },
-    [leftSidebarWidth, rightSidebarWidth],
+    [activeLeftPanel, leftSidebarWidth, rightSidebarWidth],
   );
   // Undo/redo state driven by Y.UndoManager
   const [canUndo, setCanUndo] = useState(false);
@@ -9109,6 +9220,14 @@ export default function DesignEditor() {
       activeTool,
       inspectorTab: activeInspectorTab,
       leftPanel: activeLeftPanel,
+      codeWorkspace: {
+        open: activeLeftPanel === "code",
+        backendKind: activeCodeFile?.backendKind ?? "virtual-inline",
+        activePath: activeCodeFile?.path ?? null,
+        activeFileId: activeCodeFile?.fileId ?? null,
+        dirty: activeCodeFile?.dirty ?? false,
+        versionHash: activeCodeFile?.versionHash ?? null,
+      },
       // §8 DesignNavigationState additions — dock + breakpoint context
       dock: { kind: "motion" as const, open: motionDockOpen },
       motion: {
@@ -9177,6 +9296,7 @@ export default function DesignEditor() {
       activeTool: selection.activeTool,
       inspectorTab: selection.inspectorTab,
       leftPanel: selection.leftPanel,
+      codeWorkspace: selection.codeWorkspace,
       dock: selection.dock,
       motion: selection.motion,
       breakpoint: selection.breakpoint,
@@ -9218,6 +9338,7 @@ export default function DesignEditor() {
     activeTool,
     activeInspectorTab,
     activeLeftPanel,
+    activeCodeFile,
     overviewSelectedScreenIds,
     viewMode,
     zoom,
@@ -14327,6 +14448,9 @@ ${serializedHtml}
       currentSearch: location.search,
       viewMode,
       screenId: activeFile?.id ?? activeFileId,
+      leftPanel: activeLeftPanel,
+      codeFileId: activeLeftPanel === "code" ? activeCodeFile?.fileId : null,
+      codeFilename: activeLeftPanel === "code" ? activeCodeFile?.path : null,
       selectionId:
         selectedUrlSelectionId ??
         (preserveInitialRouteSelection ? initialRouteSelectionId : null),
@@ -14344,6 +14468,9 @@ ${serializedHtml}
   }, [
     activeFile?.id,
     activeFileId,
+    activeCodeFile?.fileId,
+    activeCodeFile?.path,
+    activeLeftPanel,
     codeLayerOwnerByNodeId.size,
     files,
     id,
@@ -16262,7 +16389,14 @@ ${serializedHtml}
     </div>
   );
 
-  const leftContentWidth = Math.max(leftSidebarWidth, 320);
+  const leftContentWidth =
+    activeLeftPanel === "code"
+      ? Math.max(leftSidebarWidth, 640)
+      : Math.max(Math.min(leftSidebarWidth, 420), 320);
+  const routeCodeFileId =
+    activeLeftPanel === "code" ? searchParams.get("fileId") : null;
+  const routeCodeFilename =
+    activeLeftPanel === "code" ? searchParams.get("filename") : null;
   return (
     // h-full not flex-1: the parent <main> uses overflow-y-auto, not flex,
     // so flex-1 on the child doesn't resolve to the available height. h-full
@@ -16790,6 +16924,32 @@ ${serializedHtml}
                   />
                 )}
               </div>
+              <div
+                className={cn(
+                  "min-h-0 flex-1 flex-col overflow-hidden",
+                  activeLeftPanel === "code" ? "flex" : "hidden",
+                )}
+              >
+                {id ? (
+                  <CodeWorkbenchHost
+                    designId={id}
+                    activeFileId={
+                      activeLeftPanel === "code"
+                        ? routeCodeFileId
+                        : (activeFile?.id ?? activeFileId)
+                    }
+                    activeFilename={
+                      activeLeftPanel === "code"
+                        ? routeCodeFilename
+                        : activeFile?.filename
+                    }
+                    selectedNodeId={selectedElementLayerId}
+                    selectedSelector={selectedCanvasSelector}
+                    canEdit={canEditDesign}
+                    onActiveFileChange={setActiveCodeFile}
+                  />
+                ) : null}
+              </div>
             </div>
             <div
               role="separator"
@@ -17258,12 +17418,26 @@ ${serializedHtml}
                         const screenBridgeUrl = screen.bridgeUrl;
                         const screenSnapshot =
                           liveScreenSnapshotsById[screen.id]?.html;
+                        const screenContentSignature =
+                          getContentSignature(screenContent);
+                        const useRuntimeReplacement =
+                          shouldUseOverviewRuntimeReplacement({
+                            sourceType: screenSourceType,
+                            externalSnapshotHtml: screenSnapshot,
+                          });
+                        const runtimeReplacementKey = useRuntimeReplacement
+                          ? getOverviewScreenRuntimeReplacementKey({
+                              screenId: screen.id,
+                              updatedAt: screen.updatedAt,
+                              content: screenContent,
+                            })
+                          : undefined;
                         const screenContentKey = screenIsActive
                           ? [screen.id, contentRenderRevision].join(":")
                           : [
                               screen.id,
                               screen.updatedAt ?? "",
-                              getContentSignature(screenContent),
+                              screenContentSignature,
                               0,
                             ].join(":");
 
@@ -17271,6 +17445,10 @@ ${serializedHtml}
                           <DesignCanvas
                             content={screenContent}
                             contentKey={screenContentKey}
+                            runtimeReplacementContent={
+                              useRuntimeReplacement ? screenContent : undefined
+                            }
+                            runtimeReplacementKey={runtimeReplacementKey}
                             screenId={screen.id}
                             zoom={100}
                             deviceFrame="none"

package/corpus/templates/design/changelog/2026-07-01-design-code-workspace.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-01
+---
+
+Designs can be edited in a new Code workspace from the left rail.

package/corpus/templates/design/changelog/2026-07-01-design-previews-refresh-immediately-after-agent-screen-edits.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-01
+---
+
+Design previews refresh immediately after agent screen edits.

package/corpus/templates/design/server/source-workspace.ts

@@ -0,0 +1,215 @@
+import {
+  hasCollabState,
+  getText,
+  applyText,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { assertAccess, resolveAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+
+import { isBoardFile } from "../shared/board-file.js";
+import { normalizeDesignSourceType } from "../shared/source-mode.js";
+import type { DesignSourceType } from "../shared/source-mode.js";
+import {
+  languageForSourcePath,
+  normalizeInlineSourcePath,
+  sourceContentHash,
+} from "../shared/source-workspace.js";
+import { getDb, schema } from "./db/index.js";
+import "./db/index.js"; // ensure registerShareableResource runs
+
+export interface SourceWorkspaceFile {
+  id: string;
+  designId: string;
+  filename: string;
+  fileType: string;
+  content?: string | null;
+  createdAt: string | null;
+  updatedAt: string | null;
+}
+
+export interface SourceWorkspaceContext {
+  designId: string;
+  sourceType: DesignSourceType;
+  canEdit: boolean;
+  files: SourceWorkspaceFile[];
+}
+
+function parseDesignDataSourceType(value: unknown): DesignSourceType {
+  if (typeof value !== "string") return "inline";
+  try {
+    const parsed: unknown = JSON.parse(value);
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      const raw = (parsed as Record<string, unknown>).sourceType;
+      return normalizeDesignSourceType(raw) ?? "inline";
+    }
+  } catch {
+    // Invalid design data falls back to inline, matching existing actions.
+  }
+  return "inline";
+}
+
+function roleCanEdit(role: unknown): boolean {
+  return role === "owner" || role === "admin" || role === "editor";
+}
+
+export async function resolveSourceWorkspace(
+  designId: string,
+  options: { includeContent?: boolean } = {},
+): Promise<SourceWorkspaceContext> {
+  const access = await resolveAccess("design", designId);
+  if (!access) throw new Error("Design not found");
+
+  const db = getDb();
+  const files = options.includeContent
+    ? await db
+        .select({
+          id: schema.designFiles.id,
+          designId: schema.designFiles.designId,
+          filename: schema.designFiles.filename,
+          fileType: schema.designFiles.fileType,
+          content: schema.designFiles.content,
+          createdAt: schema.designFiles.createdAt,
+          updatedAt: schema.designFiles.updatedAt,
+        })
+        .from(schema.designFiles)
+        .where(eq(schema.designFiles.designId, designId))
+    : await db
+        .select({
+          id: schema.designFiles.id,
+          designId: schema.designFiles.designId,
+          filename: schema.designFiles.filename,
+          fileType: schema.designFiles.fileType,
+          createdAt: schema.designFiles.createdAt,
+          updatedAt: schema.designFiles.updatedAt,
+        })
+        .from(schema.designFiles)
+        .where(eq(schema.designFiles.designId, designId));
+
+  return {
+    designId,
+    sourceType: parseDesignDataSourceType(
+      (access.resource as { data?: unknown }).data,
+    ),
+    canEdit: roleCanEdit(access.role),
+    files: files.filter((file) => !isBoardFile(file.filename)),
+  };
+}
+
+export function findSourceWorkspaceFile(
+  files: SourceWorkspaceFile[],
+  target: { fileId?: string; path?: string },
+): SourceWorkspaceFile {
+  const normalizedPath =
+    target.path !== undefined ? normalizeInlineSourcePath(target.path) : null;
+  const file = target.fileId
+    ? files.find((candidate) => candidate.id === target.fileId)
+    : files.find((candidate) => candidate.filename === normalizedPath);
+  if (!file) {
+    throw new Error(
+      target.fileId
+        ? `Source file id "${target.fileId}" not found.`
+        : `Source file "${normalizedPath}" not found.`,
+    );
+  }
+  return file;
+}
+
+export async function readLiveSourceFile(file: SourceWorkspaceFile): Promise<{
+  content: string;
+  versionHash: string;
+  language: string;
+}> {
+  let content = file.content ?? "";
+  try {
+    if (await hasCollabState(file.id)) {
+      const live = await getText(file.id, "content");
+      if (typeof live === "string") content = live;
+    }
+  } catch {
+    // Collab reads are best-effort; SQL content is the fallback.
+  }
+  return {
+    content,
+    versionHash: sourceContentHash(content),
+    language: languageForSourcePath(file.filename),
+  };
+}
+
+export async function writeInlineSourceFile(args: {
+  designId: string;
+  file: SourceWorkspaceFile;
+  content: string;
+  expectedVersionHash?: string;
+}): Promise<{ versionHash: string; changed: boolean; updatedAt: string }> {
+  await assertAccess("design", args.designId, "editor");
+  const db = getDb();
+  const [currentFile] = await db
+    .select({
+      id: schema.designFiles.id,
+      designId: schema.designFiles.designId,
+      filename: schema.designFiles.filename,
+      fileType: schema.designFiles.fileType,
+      content: schema.designFiles.content,
+      createdAt: schema.designFiles.createdAt,
+      updatedAt: schema.designFiles.updatedAt,
+    })
+    .from(schema.designFiles)
+    .where(eq(schema.designFiles.id, args.file.id))
+    .limit(1);
+  if (!currentFile || currentFile.designId !== args.designId) {
+    throw new Error("Source file not found.");
+  }
+  const current = await readLiveSourceFile(currentFile);
+  if (
+    args.expectedVersionHash &&
+    args.expectedVersionHash !== current.versionHash
+  ) {
+    throw new Error(
+      "Source file changed since it was read. Re-read the file and retry.",
+    );
+  }
+
+  const changed = args.content !== current.content;
+  const updatedAt = new Date().toISOString();
+  if (!changed) {
+    return {
+      versionHash: current.versionHash,
+      changed: false,
+      updatedAt: currentFile.updatedAt ?? updatedAt,
+    };
+  }
+
+  if (await hasCollabState(args.file.id)) {
+    const liveBeforeApply = await getText(args.file.id, "content");
+    if (
+      args.expectedVersionHash &&
+      args.expectedVersionHash !== sourceContentHash(liveBeforeApply)
+    ) {
+      throw new Error(
+        "Source file changed since it was read. Re-read the file and retry.",
+      );
+    }
+    if (liveBeforeApply !== args.content) {
+      await applyText(args.file.id, args.content, "content", "agent");
+    }
+  } else {
+    await seedFromText(args.file.id, args.content);
+  }
+
+  await db
+    .update(schema.designFiles)
+    .set({ content: args.content, updatedAt })
+    .where(eq(schema.designFiles.id, args.file.id));
+
+  await db
+    .update(schema.designs)
+    .set({ updatedAt })
+    .where(eq(schema.designs.id, args.designId));
+
+  return {
+    versionHash: sourceContentHash(args.content),
+    changed: true,
+    updatedAt,
+  };
+}

package/corpus/templates/design/shared/design-source-capabilities.ts

@@ -147,15 +147,15 @@ export function unavailable(reason?: string): DesignSourceCapabilityEntry {
  *
  * - CSS-var token edits and motion are available through the Tweaks loop and
  *   the managed `<style data-agent-native-motion>` block respectively.
- * - File-level write ops (`readFile`, `writeFile`, `applyEdit`) are `planned`
- *   pending bridge write hardening.
+ * - File-level ops (`readFile`, `writeFile`, `applyEdit`) are available for
+ *   inline SQL-backed design_files through the Design source action surface.
  * - Real-app-only capabilities (`indexComponents`, `writeTokens`, `branch`,
  *   `deploy*`) are `unavailable` and trigger the "Make it real" CTA.
  */
 export const INLINE_DEFAULT_CAPABILITIES: DesignSourceCapabilities = {
-  readFile: planned("Local file reads require bridge hardening"),
-  writeFile: planned("Local file writes require bridge hardening"),
-  applyEdit: planned("Source edits require bridge hardening"),
+  readFile: available("Inline design files can be read from Design"),
+  writeFile: available("Inline design files can be saved through Design"),
+  applyEdit: available("Inline design files can be edited through Design"),
   resolveNodeToFile: available(),
   previewPatch: available(),
   diffPatch: available(),