feat: a design area where each bot's screens take shape live

app/src-tauri/tauri.conf.json

@@ -21,7 +21,7 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self'; connect-src 'self' ipc: http://ipc.localhost ws://127.0.0.1:*; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; frame-src blob:; font-src 'self'"
+      "csp": "default-src 'self'; connect-src 'self' ipc: http://ipc.localhost ws://127.0.0.1:*; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; frame-src blob: http://127.0.0.1:*; font-src 'self'"
     }
   },
   "plugins": {

app/src/dev/preview.ts

@@ -14,6 +14,7 @@ import { seedBrowser } from "./seedBrowser";
 import { seedChats } from "./seedChats";
 import { seedChief } from "./seedChief";
 import { seedRoutines } from "./seedRoutines";
+import { seedScreens } from "./seedScreens";
 
 export function previewProps(search: string): { host: Host; connect: Connect } {
   const params = new URLSearchParams(search);
@@ -113,6 +114,7 @@ function seed(fake: FakeBotloft): void {
   });
   seedRoutines(fake, { scout: scout.id, analyst: analyst.id });
   seedBrowser(fake, scout.id);
+  seedScreens(fake, research.id);
   const ops = fake.addCrew("Ops");
   const deploy = fake.addBot(ops.id, "Deploy", "Ships the site on Fridays");
   const watcher = fake.addBot(ops.id, "Watcher", "Keeps an eye on the error log");

app/src/dev/seedScreens.ts

@@ -0,0 +1,72 @@
+// Dev only: a Designer drawing screens in the fake preview, so the design
+// area has something live to show. The page arrives in pieces, as the
+// daemon's drafts do while the model writes it.
+
+import type { FakeBotloft } from "../lib/fake";
+import type { CrewId } from "../lib/protocol.gen";
+
+const LANDING = `<!doctype html>
+<html><head><meta charset="utf-8"><title>Padaria Aurora</title>
+<style>
+body{margin:0;font-family:Georgia,serif;background:#fbf6ef;color:#3b2a1a}
+header{display:flex;justify-content:space-between;align-items:center;padding:28px 64px}
+.logo{font-size:26px;font-weight:bold;letter-spacing:.5px}
+nav a{margin-left:28px;color:#3b2a1a;text-decoration:none;font-family:system-ui}
+.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;padding:40px 64px 72px;align-items:center}
+h1{font-size:64px;line-height:1.02;margin:0 0 20px}
+.hero p{font:18px/1.6 system-ui;color:#6b5540;max-width:460px}
+.cta{display:inline-block;margin-top:24px;background:#c2410c;color:#fff;padding:16px 28px;border-radius:999px;font:600 16px system-ui}
+.bread{height:360px;border-radius:32px;background:radial-gradient(circle at 30% 30%,#f5c27a,#b45309 70%);box-shadow:0 30px 60px #b4530944}
+.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:0 64px 64px}
+.card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 8px 24px #3b2a1a14;font-family:system-ui}
+.card b{display:block;font:bold 20px Georgia,serif;margin-bottom:6px}
+</style></head>
+<body>
+<header><div class="logo">Padaria Aurora</div><nav><a href="#">Pães</a><a href="#">Doces</a><a href="#">Encomendas</a></nav></header>
+<section class="hero"><div><h1>Pão quente, todo dia às 6h.</h1>
+<p>Fermentação natural de 36 horas, farinha orgânica e um forno a lenha que não apaga desde 1987.</p>
+<a class="cta" href="#">Ver o cardápio</a></div><div class="bread"></div></section>
+<section class="cards"><div class="card"><b>Sourdough</b>Casca crocante, miolo aberto.</div>
+<div class="card"><b>Croissant</b>81 camadas de manteiga francesa.</div>
+<div class="card"><b>Bolo de fubá</b>A receita da vó, sem mudar nada.</div></section>
+</body></html>`;
+
+const APP = `<!doctype html><html><head><meta name="botloft-device" content="mobile">
+<style>body{margin:0;font-family:system-ui;background:#111;color:#fff}
+.top{padding:56px 24px 16px;font-size:28px;font-weight:700}
+.item{margin:12px 16px;padding:18px;border-radius:18px;background:#1f1f1f;display:flex;justify-content:space-between}
+.price{color:#f59e0b;font-weight:600}</style></head>
+<body><div class="top">Encomendas</div>
+<div class="item">2 Sourdough<span class="price">R$ 38</span></div>
+<div class="item">6 Croissants<span class="price">R$ 54</span></div>
+<div class="item">Bolo de fubá<span class="price">R$ 29</span></div></body></html>`;
+
+/** A Designer that draws the landing page again and again. */
+export function seedScreens(fake: FakeBotloft, crewId: CrewId): void {
+  const designer = fake.addBot(crewId, "Designer", "Draws the bakery's screens");
+  fake.setBotState(designer.id, "busy", 1);
+  fake.screens.add(designer.id, "encomendas.html", APP, {
+    folder: "site",
+    device: "mobile",
+    at: fake.now - 60_000,
+  });
+  const path = "C:\\Work\\site\\index.html";
+  let written = 0;
+  let resting = 0;
+  setInterval(() => {
+    if (resting > 0) {
+      resting -= 1;
+      if (resting === 0) {
+        written = 0;
+      }
+      return;
+    }
+    written = Math.min(LANDING.length, written + 70);
+    const done = written === LANDING.length;
+    if (done) {
+      fake.screens.add(designer.id, "index.html", LANDING, { folder: "site" });
+      resting = 30;
+    }
+    fake.screens.draft(designer.id, path, LANDING.slice(0, written), done);
+  }, 150);
+}

app/src/features/bots/BotHeader.tsx

@@ -5,6 +5,7 @@ import {
   Files,
   FolderOpen,
   Globe,
+  LayoutTemplate,
   PanelRight,
   Pause,
   Pencil,
@@ -40,6 +41,9 @@ export function BotHeader({
   browserOpen,
   browsing,
   onToggleBrowser,
+  screensOpen,
+  drawing,
+  onToggleScreens,
 }: {
   bot: Bot;
   crew: Crew;
@@ -53,6 +57,10 @@ export function BotHeader({
   /** The bot's browser is open (spec 21.8). */
   browsing: boolean;
   onToggleBrowser(): void;
+  screensOpen: boolean;
+  /** The bot is writing a screen (spec 22.5). */
+  drawing: boolean;
+  onToggleScreens(): void;
 }) {
   const t = useT();
   const words = t.bots.header;
@@ -115,6 +123,28 @@ export function BotHeader({
       <Button icon={RotateCw} disabled={stopped} onClick={() => restart(false)}>
         {words.restart}
       </Button>
+      <span className="relative">
+        <Button
+          variant={screensOpen ? "secondary" : "ghost"}
+          icon={LayoutTemplate}
+          label={
+            screensOpen
+              ? t.screens.hide
+              : drawing
+                ? `${t.screens.show}: ${t.screens.drawing(bot.name)}`
+                : t.screens.show
+          }
+          aria-pressed={screensOpen}
+          onClick={onToggleScreens}
+        />
+        {drawing && !screensOpen && (
+          <span
+            aria-hidden
+            className="live-dot pointer-events-none absolute top-0.5 right-0.5"
+            style={{ background: bot.color }}
+          />
+        )}
+      </span>
       <span className="relative">
         <Button
           variant={browserOpen ? "secondary" : "ghost"}

app/src/features/bots/BotView.tsx

@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useT } from "../../i18n";
 import type { Bot, Crew } from "../../lib/protocol.gen";
@@ -17,12 +17,15 @@ import { ShowFile } from "../files/showFile";
 import { useBotFiles } from "../files/useBotFiles";
 import { SignInButton } from "../onboarding/SignIn";
 import { BotRoutines } from "../routines/RoutineList";
+import { ScreensPanel } from "../screens/ScreensPanel";
+import { ShowScreen } from "../screens/showScreen";
+import { useScreens } from "../screens/useScreens";
 import { BotHeader } from "./BotHeader";
 import { stateView } from "./BotStateBadge";
 
 type Pane = "chat" | "routines";
 /** What the panel beside the chat shows. */
-type Side = "details" | "files" | "browser" | null;
+type Side = "details" | "files" | "browser" | "screens" | null;
 
 /**
  * A bot's conversation and its routines, with its details in a side panel
@@ -73,6 +76,36 @@ export function BotView({ bot, crew }: { bot: Bot; crew: Crew }) {
     return status === "open" || status === "starting";
   });
   const browserOpen = side === "browser";
+  const screens = useScreens(bot);
+  const screensOpen = side === "screens";
+  const [screenPath, setScreenPath] = useState<string | null>(null);
+  const showScreen = (path: string | null) => {
+    if (filesOpen) {
+      seen();
+    }
+    setSide("screens");
+    setScreenPath(path);
+    void screens.refresh();
+  };
+  // The design area opens by itself when the bot starts drawing a screen,
+  // once per screen, if nothing else is open beside the chat (spec 22.5).
+  const drawn = useRef(new Set<string>());
+  // biome-ignore lint/correctness/useExhaustiveDependencies: another bot starts with its own screens
+  useEffect(() => {
+    drawn.current = new Set();
+    setScreenPath(null);
+  }, [bot.id]);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: only a new screen being written opens it
+  useEffect(() => {
+    const path = screens.writing?.toLowerCase();
+    if (path && !drawn.current.has(path)) {
+      drawn.current.add(path);
+      if (side === null) {
+        setSide("screens");
+        setScreenPath(null);
+      }
+    }
+  }, [screens.writing]);
   const showBrowser = () => {
     if (filesOpen) {
       seen();
@@ -101,6 +134,9 @@ export function BotView({ bot, crew }: { bot: Bot; crew: Crew }) {
         browserOpen={browserOpen}
         browsing={browsing}
         onToggleBrowser={() => (browserOpen ? setSide(null) : showBrowser())}
+        screensOpen={screensOpen}
+        drawing={screens.writing !== null}
+        onToggleScreens={() => (screensOpen ? setSide(null) : showScreen(null))}
       />
       <Notices bot={bot} crew={crew} view={view} />
       <Tabs<Pane> label={bot.name} tabs={tabs} value={pane} onChange={setPane} />
@@ -109,7 +145,9 @@ export function BotView({ bot, crew }: { bot: Bot; crew: Crew }) {
           {pane === "chat" ? (
             <ShowFile.Provider value={showFile}>
               <ShowBrowser.Provider value={showBrowser}>
-                <ChatView bot={bot} stopped={bot.paused || crew.paused} />
+                <ShowScreen.Provider value={showScreen}>
+                  <ChatView bot={bot} stopped={bot.paused || crew.paused} />
+                </ShowScreen.Provider>
               </ShowBrowser.Provider>
             </ShowFile.Provider>
           ) : (
@@ -118,6 +156,15 @@ export function BotView({ bot, crew }: { bot: Bot; crew: Crew }) {
         </div>
         {side === "details" && <Details bot={bot} onClose={() => setSide(null)} />}
         {browserOpen && <BrowserPanel bot={bot} onClose={() => setSide(null)} />}
+        {screensOpen && (
+          <ScreensPanel
+            bot={bot}
+            data={screens}
+            path={screenPath}
+            onPath={setScreenPath}
+            onClose={() => setSide(null)}
+          />
+        )}
         {filesOpen && (
           <FilesPanel
             bot={bot}

app/src/features/chat/ToolLines.tsx

@@ -9,6 +9,7 @@ import {
   Files,
   FileText,
   Globe,
+  LayoutTemplate,
   ListChecks,
   ListTodo,
   LoaderCircle,
@@ -26,6 +27,7 @@ import type { ChatItem, ToolItem } from "../../lib/protocol.gen";
 import { useArrival } from "../../ui/motion";
 import { isBrowserTool, ShowBrowser } from "../browser/showBrowser";
 import { ShowFile } from "../files/showFile";
+import { isScreenFile, ShowScreen } from "../screens/showScreen";
 
 const ICONS: Record<string, LucideIcon> = {
   Bash: SquareTerminal,
@@ -89,6 +91,7 @@ function ToolLine({ tool, createdAt }: { tool: ToolItem; createdAt: number }) {
   const [open, setOpen] = useState(false);
   const showFile = useContext(ShowFile);
   const showBrowser = useContext(ShowBrowser);
+  const showScreen = useContext(ShowScreen);
   const arrival = useArrival(createdAt);
   const label = toolLabel(tool.name);
   const Icon = iconOf(label);
@@ -129,6 +132,17 @@ function ToolLine({ tool, createdAt }: { tool: ToolItem; createdAt: number }) {
             <Files aria-hidden size={14} />
           </button>
         )}
+        {showScreen && tool.file && isScreenFile(tool.file) && tool.status !== "failed" && (
+          <button
+            type="button"
+            title={t.screens.showInPanel}
+            aria-label={`${t.screens.showInPanel}: ${tool.summary}`}
+            onClick={() => showScreen(tool.file as string)}
+            className="grid size-6 shrink-0 place-items-center rounded-md text-muted transition-colors hover:bg-sunken hover:text-ink"
+          >
+            <LayoutTemplate aria-hidden size={14} />
+          </button>
+        )}
         {showBrowser && isBrowserTool(tool.name) && (
           <button
             type="button"