@akanjs/cli 3.0.0-alpha.11 → 3.0.0-alpha.110

package/devTui-40ggmd99.js

@@ -0,0 +1,553 @@
+// @bun
+import {
+  openBrowser,
+  plainTextOf,
+  HOST_SOURCE,
+  DevLogBuffer
+} from "./index-v0qh106m.js";
+
+// pkgs/@akanjs/cli/application/devTui.tsx
+import { render } from "ink";
+
+// pkgs/@akanjs/cli/clipboard.ts
+var clipboardCommands = () => {
+  if (process.platform === "darwin")
+    return [["pbcopy"]];
+  if (process.platform === "win32")
+    return [["clip"]];
+  return [["wl-copy"], ["xclip", "-selection", "clipboard"], ["xsel", "--clipboard", "--input"]];
+};
+var writeClipboard = async (text) => {
+  for (const command of clipboardCommands()) {
+    try {
+      const proc = Bun.spawn(command, {
+        stdin: new TextEncoder().encode(text),
+        stdout: "ignore",
+        stderr: "ignore"
+      });
+      if (await proc.exited === 0)
+        return true;
+    } catch {}
+  }
+  return false;
+};
+
+// pkgs/@akanjs/cli/ui/DevTuiApp.tsx
+import { Box, Text, useInput } from "ink";
+import { useEffect, useState } from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var stateGlyph = {
+  starting: { glyph: "\u25D0", color: "yellow" },
+  ready: { glyph: "\u25CF", color: "green" },
+  restarting: { glyph: "\u25D0", color: "yellow" },
+  recovering: { glyph: "\u25D0", color: "yellow" },
+  suspended: { glyph: "\u25CC", color: "blue" },
+  failed: { glyph: "\u2717", color: "red" },
+  stopped: { glyph: "\u25CB", color: "gray" }
+};
+var Rail = ({ rows, selected, readyCount, appCount, width, height }) => /* @__PURE__ */ jsxDEV(Box, {
+  flexDirection: "column",
+  width,
+  height,
+  borderStyle: "round",
+  borderColor: "gray",
+  paddingX: 1,
+  children: [
+    /* @__PURE__ */ jsxDEV(Text, {
+      dimColor: true,
+      children: [
+        "apps ",
+        readyCount,
+        "/",
+        appCount
+      ]
+    }, undefined, true, undefined, this),
+    /* @__PURE__ */ jsxDEV(Box, {
+      flexDirection: "column",
+      flexGrow: 1,
+      children: rows.map((row, idx) => {
+        const marker = row.state ? stateGlyph[row.state] : null;
+        return /* @__PURE__ */ jsxDEV(Text, {
+          inverse: idx === selected,
+          wrap: "truncate",
+          children: [
+            marker ? /* @__PURE__ */ jsxDEV(Text, {
+              color: marker.color,
+              children: marker.glyph
+            }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
+              dimColor: true,
+              children: "\u25C7"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              dimColor: true,
+              children: " ".repeat(row.depth * 2 + 1)
+            }, undefined, false, undefined, this),
+            row.appIndex === null ? null : /* @__PURE__ */ jsxDEV(Text, {
+              dimColor: true,
+              children: `${row.appIndex} `
+            }, undefined, false, undefined, this),
+            row.label,
+            row.port === null ? null : /* @__PURE__ */ jsxDEV(Text, {
+              dimColor: true,
+              children: ` ${row.port}`
+            }, undefined, false, undefined, this)
+          ]
+        }, `${row.app ?? "*"}/${row.source ?? "*"}`, true, undefined, this);
+      })
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var LogPane = ({ lines, title, above, below, following, prefix, prefixWidth, width, height }) => /* @__PURE__ */ jsxDEV(Box, {
+  flexDirection: "column",
+  width,
+  height,
+  borderStyle: "round",
+  borderColor: following ? "gray" : "cyan",
+  paddingX: 1,
+  children: [
+    /* @__PURE__ */ jsxDEV(Text, {
+      wrap: "truncate",
+      children: [
+        title,
+        following ? null : /* @__PURE__ */ jsxDEV(Text, {
+          color: "cyan",
+          children: `  \u25B2${above} \u25BC${below} paused`
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    /* @__PURE__ */ jsxDEV(Box, {
+      flexDirection: "column",
+      flexGrow: 1,
+      children: lines.map((line) => /* @__PURE__ */ jsxDEV(Text, {
+        wrap: "truncate",
+        children: [
+          prefix === "none" ? null : /* @__PURE__ */ jsxDEV(Text, {
+            dimColor: true,
+            children: `${(prefix === "app" ? line.app : line.source).padEnd(prefixWidth)} \u2502 `
+          }, undefined, false, undefined, this),
+          line.text
+        ]
+      }, line.seq, true, undefined, this))
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var DevTuiApp = ({ actions }) => {
+  const [snapshot, setSnapshot] = useState(actions.snapshot);
+  useEffect(() => {
+    const unsubscribe = actions.subscribe(() => setSnapshot(actions.snapshot()));
+    setSnapshot(actions.snapshot());
+    return unsubscribe;
+  }, [actions]);
+  useInput((input, key) => {
+    if (snapshot.editingGrep) {
+      if (key.escape) {
+        actions.setGrep("");
+        actions.setEditingGrep(false);
+      } else if (key.return)
+        actions.setEditingGrep(false);
+      else if (key.backspace || key.delete)
+        actions.setGrep(snapshot.grep.slice(0, -1));
+      else if (input && !key.ctrl && !key.meta)
+        actions.setGrep(snapshot.grep + input);
+      return;
+    }
+    const page = Math.max(1, snapshot.logRows - 1);
+    if (input === "q" || key.ctrl && input === "c")
+      actions.quit();
+    else if (key.upArrow)
+      actions.scroll(key.shift ? -page : -1);
+    else if (key.downArrow)
+      actions.scroll(key.shift ? page : 1);
+    else if (key.pageUp)
+      actions.scroll(-page);
+    else if (key.pageDown)
+      actions.scroll(page);
+    else if (input === "G" || input === "f")
+      actions.follow();
+    else if (key.tab)
+      actions.moveSelection(key.shift ? -1 : 1);
+    else if (input === "/")
+      actions.setEditingGrep(true);
+    else if (input === "e")
+      actions.toggleErrorsOnly();
+    else if (input === "c")
+      actions.clear();
+    else if (input === "y")
+      actions.copyLines();
+    else if (input === "Y")
+      actions.copyPath();
+    else if (input === "o")
+      actions.openSelected();
+    else if (input === "r")
+      actions.restartSelected();
+    else if (/^[1-9]$/.test(input))
+      actions.selectApp(Number(input) - 1);
+  });
+  return /* @__PURE__ */ jsxDEV(Box, {
+    flexDirection: "column",
+    width: snapshot.columns,
+    height: snapshot.terminalRows,
+    children: [
+      /* @__PURE__ */ jsxDEV(Box, {
+        flexDirection: "row",
+        height: snapshot.bodyHeight,
+        children: [
+          /* @__PURE__ */ jsxDEV(Rail, {
+            rows: snapshot.rows,
+            selected: snapshot.selected,
+            readyCount: snapshot.readyCount,
+            appCount: snapshot.appCount,
+            width: snapshot.railWidth,
+            height: snapshot.bodyHeight
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(LogPane, {
+            lines: snapshot.lines,
+            title: snapshot.title,
+            above: snapshot.above,
+            below: snapshot.below,
+            following: snapshot.following,
+            prefix: snapshot.prefix,
+            prefixWidth: snapshot.prefixWidth,
+            width: Math.max(20, snapshot.columns - snapshot.railWidth),
+            height: snapshot.bodyHeight
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      snapshot.editingGrep ? /* @__PURE__ */ jsxDEV(Text, {
+        children: [
+          /* @__PURE__ */ jsxDEV(Text, {
+            color: "cyan",
+            children: "grep "
+          }, undefined, false, undefined, this),
+          snapshot.grep,
+          /* @__PURE__ */ jsxDEV(Text, {
+            inverse: true,
+            children: " "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(Text, {
+            dimColor: true,
+            children: " enter to apply \xB7 esc to clear"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : snapshot.notice ? /* @__PURE__ */ jsxDEV(Text, {
+        color: "cyan",
+        wrap: "truncate",
+        children: snapshot.notice
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV(Text, {
+        dimColor: true,
+        wrap: "truncate",
+        children: `Tab next \xB7 1-9 app \xB7 \u2191\u2193 scroll (shift page) \xB7 G follow${snapshot.following ? "" : " (paused)"} \xB7 / grep${snapshot.grep ? ` (${snapshot.grep})` : ""} \xB7 e errors${snapshot.errorsOnly ? " on" : ""} \xB7 c clear \xB7 y copy \xB7 Y path \xB7 o open \xB7 r restart \xB7 q quit`
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+
+// pkgs/@akanjs/cli/application/devLogWindow.ts
+var windowOf = (lines, rows, anchor) => {
+  const height = Math.max(1, Math.trunc(rows));
+  const end = anchor === null ? lines.length : endOf(lines, height, anchor);
+  const start = Math.max(0, end - height);
+  return {
+    lines: lines.slice(start, end),
+    above: start,
+    below: lines.length - end,
+    following: anchor === null
+  };
+};
+var scrollAnchor = (lines, rows, anchor, delta) => {
+  const height = Math.max(1, Math.trunc(rows));
+  if (lines.length <= height)
+    return null;
+  const end = anchor === null ? lines.length : endOf(lines, height, anchor);
+  const next = Math.min(lines.length, Math.max(height, end + Math.trunc(delta)));
+  if (next >= lines.length)
+    return null;
+  return lines[next - 1]?.seq ?? null;
+};
+var endOf = (lines, height, anchor) => {
+  for (let idx = lines.length - 1;idx >= 0; idx -= 1) {
+    const line = lines[idx];
+    if (line && line.seq <= anchor)
+      return idx + 1;
+  }
+  return Math.min(lines.length, height);
+};
+
+// pkgs/@akanjs/cli/application/devTui.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+
+class DevTui {
+  static frameMs = 34;
+  static footerRows = 1;
+  static paneChromeRows = 3;
+  static noticeMs = 4000;
+  #buffer = new DevLogBuffer;
+  #listeners = new Set;
+  #supervisor;
+  #instance;
+  #statuses = [];
+  #target = { app: null, source: null };
+  #anchor = null;
+  #grep = "";
+  #editingGrep = false;
+  #errorsOnly = false;
+  #frameTimer = null;
+  #cachedSnapshot = null;
+  #notice = "";
+  #noticeTimer = null;
+  constructor(supervisor) {
+    this.#supervisor = supervisor;
+    this.#statuses = supervisor.statuses;
+    process.stdout.on("resize", this.#onResize);
+    this.#instance = render(/* @__PURE__ */ jsxDEV2(DevTuiApp, {
+      actions: {
+        subscribe: this.#subscribe,
+        snapshot: this.#snapshot,
+        moveSelection: this.#moveSelection,
+        selectApp: this.#selectApp,
+        scroll: this.#scroll,
+        follow: this.#follow,
+        setGrep: this.#setGrep,
+        setEditingGrep: this.#setEditingGrep,
+        toggleErrorsOnly: this.#toggleErrorsOnly,
+        clear: this.#clear,
+        copyLines: this.#copyLines,
+        copyPath: this.#copyPath,
+        openSelected: this.#openSelected,
+        restartSelected: this.#restartSelected,
+        quit: this.#quit
+      }
+    }, undefined, false, undefined, this), { patchConsole: false });
+  }
+  onOutput = (app, kind, text) => {
+    this.#buffer.push(app, kind, text);
+    this.#scheduleFrame();
+  };
+  onStatus = (statuses) => {
+    this.#statuses = statuses;
+    this.#scheduleFrame();
+  };
+  onNote = (text, level) => {
+    this.#buffer.push("akan", level === "warn" ? "stderr" : "stdout", `${text}
+`);
+    this.#scheduleFrame();
+  };
+  waitForExit = async () => {
+    await this.#instance.waitUntilExit();
+  };
+  close = () => {
+    if (this.#frameTimer)
+      clearTimeout(this.#frameTimer);
+    this.#frameTimer = null;
+    if (this.#noticeTimer)
+      clearTimeout(this.#noticeTimer);
+    this.#noticeTimer = null;
+    process.stdout.off("resize", this.#onResize);
+    this.#instance.unmount();
+    for (const line of this.#buffer.flushPartials())
+      process.stdout.write(`${line.app} \u2502 ${line.text}
+`);
+    for (const status of this.#statuses)
+      process.stdout.write(`${status.name} ${status.url} \u2014 ${status.state}
+`);
+    const log = this.#supervisor.sessionLog;
+    for (const name of log.appNames)
+      process.stdout.write(`${name} log: ${log.relativePathOf(name)}
+`);
+  };
+  #subscribe = (listener) => {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  };
+  #railRows() {
+    const rows = [
+      { app: null, source: null, label: "all apps", state: null, port: null, depth: 0, appIndex: null }
+    ];
+    this.#statuses.forEach((status, idx) => {
+      rows.push({
+        app: status.name,
+        source: null,
+        label: status.name,
+        state: status.state,
+        port: status.port,
+        depth: 0,
+        appIndex: idx < 9 ? idx + 1 : null
+      });
+      if (status.name !== this.#target.app)
+        return;
+      for (const source of this.#buffer.sourcesOf(status.name))
+        rows.push({ app: status.name, source, label: source, state: null, port: null, depth: 1, appIndex: null });
+    });
+    return rows;
+  }
+  #indexOfTarget(rows) {
+    const found = rows.findIndex((row) => row.app === this.#target.app && row.source === this.#target.source);
+    return found < 0 ? 0 : found;
+  }
+  #filtered(target) {
+    return this.#buffer.select({
+      app: target.app ?? null,
+      source: target.source ?? null,
+      grep: this.#grep,
+      errorsOnly: this.#errorsOnly
+    });
+  }
+  #snapshot = () => {
+    if (this.#cachedSnapshot)
+      return this.#cachedSnapshot;
+    const terminalRows = Math.max(8, process.stdout.rows ?? 24);
+    const columns = Math.max(40, process.stdout.columns ?? 80);
+    const bodyHeight = Math.max(DevTui.paneChromeRows + 1, terminalRows - DevTui.footerRows);
+    const logRows = Math.max(1, bodyHeight - DevTui.paneChromeRows);
+    const rows = this.#railRows();
+    const view = windowOf(this.#filtered(this.#target), logRows, this.#anchor);
+    const status = this.#statuses.find((candidate) => candidate.name === this.#target.app);
+    const railLabelWidth = rows.reduce((max, row) => Math.max(max, row.label.length + row.depth * 2), 0);
+    this.#cachedSnapshot = {
+      rows,
+      selected: this.#indexOfTarget(rows),
+      title: status ? `${status.name}${this.#target.source ? ` \xB7 ${this.#target.source}` : ""} \xB7 ${status.url} \xB7 ${status.state}${status.detail ? ` (${status.detail})` : ""}` : "all apps",
+      lines: view.lines,
+      above: view.above,
+      below: view.below,
+      following: view.following,
+      prefix: this.#target.app === null ? "app" : this.#target.source === null ? "source" : "none",
+      prefixWidth: this.#target.app === null ? this.#appWidth() : this.#sourceWidth(),
+      grep: this.#grep,
+      errorsOnly: this.#errorsOnly,
+      editingGrep: this.#editingGrep,
+      notice: this.#notice,
+      readyCount: this.#statuses.filter((candidate) => candidate.state === "ready").length,
+      appCount: this.#statuses.length,
+      logRows,
+      bodyHeight,
+      railWidth: Math.min(34, Math.max(20, railLabelWidth + 10)),
+      columns,
+      terminalRows
+    };
+    return this.#cachedSnapshot;
+  };
+  #appWidth() {
+    return this.#statuses.reduce((max, status) => Math.max(max, status.name.length), 0);
+  }
+  #sourceWidth() {
+    let width = HOST_SOURCE.length;
+    for (const status of this.#statuses)
+      for (const source of this.#buffer.sourcesOf(status.name))
+        width = Math.max(width, source.length);
+    return width;
+  }
+  #scheduleFrame() {
+    if (this.#frameTimer)
+      return;
+    this.#frameTimer = setTimeout(() => {
+      this.#frameTimer = null;
+      this.#renderNow();
+    }, DevTui.frameMs);
+  }
+  #renderNow() {
+    this.#cachedSnapshot = null;
+    for (const listener of this.#listeners)
+      listener();
+  }
+  #onResize = () => this.#renderNow();
+  #moveSelection = (delta) => {
+    const rows = this.#railRows();
+    const next = ((this.#indexOfTarget(rows) + delta) % rows.length + rows.length) % rows.length;
+    const row = rows[next];
+    if (row)
+      this.#setTarget({ app: row.app, source: row.source });
+  };
+  #selectApp = (index) => {
+    const status = this.#statuses[index];
+    if (status)
+      this.#setTarget({ app: status.name, source: null });
+  };
+  #setTarget(target) {
+    this.#target = { app: target.app ?? null, source: target.source ?? null };
+    this.#anchor = null;
+    this.#renderNow();
+  }
+  #scroll = (delta) => {
+    this.#anchor = scrollAnchor(this.#filtered(this.#target), this.#snapshot().logRows, this.#anchor, delta);
+    this.#renderNow();
+  };
+  #follow = () => {
+    this.#anchor = null;
+    this.#renderNow();
+  };
+  #setGrep = (grep) => {
+    this.#grep = grep;
+    this.#anchor = null;
+    this.#renderNow();
+  };
+  #setEditingGrep = (editing) => {
+    this.#editingGrep = editing;
+    this.#renderNow();
+  };
+  #toggleErrorsOnly = () => {
+    this.#errorsOnly = !this.#errorsOnly;
+    this.#anchor = null;
+    this.#renderNow();
+  };
+  #clear = () => {
+    this.#buffer.clear(this.#target.app ?? null);
+    this.#anchor = null;
+    this.#renderNow();
+  };
+  #copyLines = () => {
+    const lines = this.#filtered(this.#target);
+    if (lines.length === 0) {
+      this.#setNotice("nothing to copy");
+      return;
+    }
+    const text = plainTextOf(lines, { withApp: this.#target.app === null });
+    writeClipboard(text).then((copied) => {
+      this.#setNotice(copied ? `copied ${lines.length} lines` : `no clipboard here \u2014 ${this.#logPaths().join(" \xB7 ")}`);
+    });
+  };
+  #copyPath = () => {
+    const paths = this.#logPaths();
+    writeClipboard(paths.join(`
+`)).then((copied) => {
+      this.#setNotice(copied ? `copied ${paths.join(" \xB7 ")}` : paths.join(" \xB7 "));
+    });
+  };
+  #logPaths() {
+    const log = this.#supervisor.sessionLog;
+    const app = this.#target.app;
+    return (app ? [app] : log.appNames).map((name) => log.relativePathOf(name));
+  }
+  #setNotice(text) {
+    this.#notice = text;
+    if (this.#noticeTimer)
+      clearTimeout(this.#noticeTimer);
+    this.#noticeTimer = setTimeout(() => {
+      this.#notice = "";
+      this.#noticeTimer = null;
+      this.#renderNow();
+    }, DevTui.noticeMs);
+    this.#renderNow();
+  }
+  #openSelected = () => {
+    const status = this.#selectedStatus();
+    if (status)
+      openBrowser(status.url);
+  };
+  #restartSelected = () => {
+    const status = this.#selectedStatus();
+    if (status)
+      this.#supervisor.restart(status.name);
+  };
+  #selectedStatus() {
+    return this.#statuses.find((candidate) => candidate.name === this.#target.app);
+  }
+  #quit = () => {
+    this.#instance.unmount();
+  };
+}
+export {
+  DevTui
+};

package/devTuiView-c08ccbat.js

@@ -0,0 +1,9 @@
+// @bun
+// pkgs/@akanjs/cli/application/devTuiView.ts
+var createDevTuiView = async (supervisor) => {
+  const { DevTui } = await import("./devTui-40ggmd99.js");
+  return new DevTui(supervisor);
+};
+export {
+  createDevTuiView
+};

package/getDirname-dr3jz1xg.js

@@ -0,0 +1,7 @@
+// @bun
+import {
+  getDirname2
+} from "./index-6wwzs1bc.js";
+export {
+  getDirname2 as getDirname
+};

package/{guideline.command-yqf9a372.js → guideline.command-xmqwx8zm.js}

@@ -1,25 +1,23 @@
 // @bun
-import {
-  AiSession
-} from "./index-0cj2zxbm.js";
-import {
-  Prompter
-} from "./index-j37qq1f2.js";
 import {
   Workspace,
-  command,
   runner,
-  script
-} from "./index-etwh7sd3.js";
-import"./index-yzsxc30b.js";
-import"./index-mxvakhsm.js";
-import {
-  getDirname
-} from "./index-1577bej2.js";
+  script,
+  command
+} from "./index-mak3cd28.js";
 import {
   FileSys
-} from "./index-67546d0j.js";
-import"./index-r24hmh0q.js";
+} from "./index-q0y2jq9j.js";
+import"./index-2tv3fdx4.js";
+import {
+  getDirname2
+} from "./index-6wwzs1bc.js";
+import {
+  Prompter
+} from "./index-h7yw2z9n.js";
+import {
+  AiSession
+} from "./index-kn1h7p1x.js";
 
 // pkgs/@akanjs/cli/guideline/guideline.script.ts
 import { Logger } from "akanjs/common";
@@ -65,7 +63,7 @@ class GuidelinePrompt extends Prompter {
       const scanResult = await Promise.all(targetFilePaths.map(async (filePath) => ({ ...scan, ...await this.workspace.getLocalFile(filePath) })));
       scanFiles.push(...scanResult);
     }
-    const resultPath = `${getDirname(import.meta.url)}/../guidelines/${this.name}/${guideJson.update.filePath}`;
+    const resultPath = `${getDirname2(import.meta.url)}/../guidelines/${this.name}/${guideJson.update.filePath}`;
     const writePath = `${this.workspace.workspaceRoot}/pkgs/@akanjs/cli/guidelines/${this.name}/${guideJson.update.filePath}`;
     const isResultExists = await this.workspace.exists(writePath);
     const existingResult = isResultExists ? await this.workspace.readFile(resultPath) : null;
@@ -107,7 +105,7 @@ ${guideJson.update.rules.map((rule) => `- ${rule}`).join(`
   }
   async requestUpdateInstruction(updateRequest) {
     const guideJson = await Prompter.getGuideJson(this.name);
-    const resultPath = `${getDirname(import.meta.url)}/../guidelines/${this.name}/${guideJson.update.filePath}`;
+    const resultPath = `${getDirname2(import.meta.url)}/../guidelines/${this.name}/${guideJson.update.filePath}`;
     const writePath = `${this.workspace.workspaceRoot}/pkgs/@akanjs/cli/guidelines/${this.name}/${guideJson.update.filePath}`;
     const isResultExists = await this.workspace.exists(writePath);
     if (!isResultExists)
@@ -137,9 +135,11 @@ Request: ${updateRequest}
   async requestCreateDocumentPage(page) {
     const writePath = this.#resolveDocsPagePath(page);
     if (!await this.workspace.exists(writePath))
-      await this.workspace.writeFile(writePath, `export default function Page() {
+      await this.workspace.writeFile(writePath, `import { page } from "akanjs/client";
+
+export default page().render(() => {
   return <div>No Content</div>;
-}
+});
 `);
     const instruction = await Prompter.getInstruction(this.name);
     const pageContent = await this.workspace.getLocalFile(writePath);
@@ -180,9 +180,11 @@ Please return only the file result in the following format for easy parsing.
   async requestUpdateDocumentPage(page, updateRequest) {
     const writePath = this.#resolveDocsPagePath(page);
     if (!await this.workspace.exists(writePath))
-      await this.workspace.writeFile(writePath, `export default function Page() {
+      await this.workspace.writeFile(writePath, `import { page } from "akanjs/client";
+
+export default page().render(() => {
   return <div>No Content</div>;
-}
+});
 `);
     const instruction = await Prompter.getInstruction(this.name);
     const pageContent = await this.workspace.getLocalFile(writePath);

package/guidelines/agentRule/agentRule.generate.json

@@ -0,0 +1,31 @@
+{
+  "title": "In-Page Agent Rule",
+  "description": "How an akan screen exposes itself to an in-page agent — st.tool, subscribed keys, built-ins, and the chat",
+  "group": "core",
+  "codegenPriority": 4,
+  "deprecated": false,
+  "scans": [
+    {
+      "type": "example",
+      "description": "Components publishing an agent tool beside the control that already performs the action",
+      "path": "{apps,libs}/*/**/*.tsx",
+      "sample": 4
+    }
+  ],
+  "update": {
+    "filePath": "./agentRule.instruction.md",
+    "contents": [
+      "what a declaration publishes",
+      "mounting the chat",
+      "publishing a tool",
+      "forms and reading state",
+      "built-in tools"
+    ],
+    "rules": [
+      "Use current Akan APIs only",
+      "State the rule before the reason, and keep the reason to one clause",
+      "Never describe a store class as an exposure surface — only st.tool and subscribed keys publish",
+      "Keep it workspace-neutral — no app or repo names"
+    ]
+  }
+}