agentful 0.3.8 → 0.4.0

package/dist/index.cjs

@@ -3040,11 +3040,11 @@ function banner() {
     paint.dim(brand.tagline)
   ].join("\n");
 }
-var VERSION, brand, useColor, wrap, paint, sym, ui;
+var VERSION, brand, useColor, wrap, paint, tuiDesign, sym, ui;
 var init_branding = __esm({
   "src/branding.ts"() {
     "use strict";
-    VERSION = "0.3.8" ? "0.3.8" : null.version;
+    VERSION = "0.4.0" ? "0.4.0" : null.version;
     brand = {
       name: "agentful",
       // the command users type
@@ -3067,6 +3067,12 @@ var init_branding = __esm({
       dim: wrap("2"),
       bold: wrap("1")
     };
+    tuiDesign = {
+      /** Sits in front of the input line. U+276F, the shell prompt sigil. */
+      promptMark: "\u276F",
+      /** Marks an item in progress in the sidebar's task list. U+203A. */
+      activeMark: "\u203A"
+    };
     sym = {
       ok: paint.success("\u2714"),
       fail: paint.error("\u2716"),
@@ -3504,40 +3510,289 @@ function brandingPluginSource() {
   const logoLiteral = JSON.stringify(logo_default.replace(/\n+$/, "").split("\n"));
   return `// Generated by ${brand.name} v${VERSION} \u2014 do not edit; rewritten on every start.
 const LOGO = ${logoLiteral}
+const MARK = ${JSON.stringify(tuiDesign.promptMark)}
+const ACTIVE = ${JSON.stringify(tuiDesign.activeMark)}
+const USD = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+
+// Ours, not the engine's generic examples ("Fix a TODO in the codebase").
+const PLACEHOLDERS = {
+  normal: [
+    'Build a landing page for my newsletter',
+    'Add a contact form and push it live',
+    'What changed since my last push?',
+  ],
+  shell: ['agentful push', 'agentful open', 'git status'],
+}
+
+/** Engine state reads are best-effort: a renamed field must not blank the UI. */
+function safe(fn, fallback) {
+  try {
+    const value = fn()
+    return value === undefined || value === null ? fallback : value
+  } catch (err) {
+    return fallback
+  }
+}
+
+/** Keep the tail of a path \u2014 the file name matters more than its parent. */
+function tail(text, max) {
+  const s = String(text)
+  return s.length <= max ? s : '\u2026' + s.slice(s.length - (max - 1))
+}
 
 const plugin = {
   id: 'agentful-branding',
   tui(api) {
+    const Prompt = api.ui.Prompt
+    const HostSlot = api.ui.Slot
+    // The slot context carries no colors; the theme lives on the plugin api.
+    const t = () => api.theme.current
+
+    // \u2500\u2500 band pieces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    // The engine closes its prompt with a heavy line (an upper-half block, not
+    // a box-drawing rune), so the band's own top line has to match it or the
+    // two read as unrelated. Sidebar dividers stay thin: they repeat four
+    // times and must not compete with the input.
+    const HEAVY = {
+      topLeft: '\u2580', topRight: '\u2580', bottomLeft: '\u2580', bottomRight: '\u2580',
+      horizontal: '\u2580', vertical: '\u2580',
+      topT: '\u2580', bottomT: '\u2580', leftT: '\u2580', rightT: '\u2580', cross: '\u2580',
+    }
+
+    function Rule(props) {
+      return (
+        <box
+          height={1}
+          flexShrink={0}
+          border={['top']}
+          borderColor={props.heavy ? t().border : t().borderSubtle}
+          customBorderChars={props.heavy ? HEAVY : undefined}
+        />
+      )
+    }
+
+    function Row(props) {
+      return (
+        <box flexDirection="row" justifyContent="space-between" gap={1}>
+          <text fg={t().textMuted} wrapMode="none">{props.label}</text>
+          <text fg={props.fg || t().text} flexShrink={0} wrapMode="none">{props.value}</text>
+        </box>
+      )
+    }
+
+    function Section(props) {
+      return (
+        <box flexDirection="column" flexShrink={0}>
+          <Rule />
+          <text fg={t().textMuted}>{props.label}</text>
+          {props.children}
+        </box>
+      )
+    }
+
+    // \u2500\u2500 sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    function Sidebar(props) {
+      const messages = () => safe(() => api.state.session.messages(props.sessionID), [])
+      const usage = () => safe(() => {
+        const last = messages().findLast((m) => m.role === 'assistant' && m.tokens && m.tokens.output > 0)
+        if (!last) return { tokens: 0, percent: null }
+        const tk = last.tokens
+        const total = tk.input + tk.output + tk.reasoning + tk.cache.read + tk.cache.write
+        const provider = api.state.provider.find((p) => p.id === last.providerID)
+        const model = provider && provider.models ? provider.models[last.modelID] : undefined
+        const limit = model && model.limit ? model.limit.context : 0
+        return { tokens: total, percent: limit ? Math.round((total / limit) * 100) : null }
+      }, { tokens: 0, percent: null })
+      // Only shown once it is real: platform models bill credits server-side
+      // and report 0 here, and a permanent "$0.00" reads like a promise.
+      const cost = () => safe(() => api.state.session.get(props.sessionID).cost, 0)
+      const lsp = () => safe(() => api.state.lsp(), [])
+      const lspDisabled = () => safe(() => !api.state.config.lsp, true)
+      const mcp = () => safe(() => api.state.mcp(), [])
+      const todos = () => safe(() => api.state.session.todo(props.sessionID), [])
+      const openTodos = () => todos().filter((item) => item.status !== 'completed')
+      const files = () => safe(() => api.state.session.diff(props.sessionID), [])
+
+      return (
+        <box flexDirection="column" gap={1} flexShrink={0}>
+          <Section label="CONTEXT">
+            <Row label="tokens" value={() => usage().tokens.toLocaleString('en-US')} />
+            {() => usage().percent === null
+              ? null
+              : <Row label="window" value={() => usage().percent + '%'} />}
+            {() => cost() > 0
+              ? <Row label="cost" value={() => USD.format(cost())} />
+              : null}
+          </Section>
+
+          <Section label="TOOLS">
+            <Row
+              label="language server"
+              value={() => lsp().length
+                ? lsp().filter((s) => s.status === 'connected').length + '/' + lsp().length
+                : (lspDisabled() ? 'off' : 'idle')}
+            />
+            {() => mcp().length
+              ? <Row
+                  label="mcp"
+                  value={() => mcp().filter((s) => s.status === 'connected').length + '/' + mcp().length}
+                />
+              : null}
+          </Section>
+
+          {() => openTodos().length === 0 ? null : (
+            <Section label="TASKS">
+              {() => todos().slice(0, 8).map((item) => (
+                <box flexDirection="row" gap={1}>
+                  <text
+                    flexShrink={0}
+                    fg={item.status === 'completed'
+                      ? t().success
+                      : item.status === 'in_progress' ? t().primary : t().textMuted}
+                  >
+                    {item.status === 'completed' ? '\u2713' : item.status === 'in_progress' ? ACTIVE : '\xB7'}
+                  </text>
+                  <text fg={item.status === 'completed' ? t().textMuted : t().text}>{item.content}</text>
+                </box>
+              ))}
+              {() => todos().length > 8
+                ? <text fg={t().textMuted}>{'+' + (todos().length - 8) + ' more'}</text>
+                : null}
+            </Section>
+          )}
+
+          {() => files().length === 0 ? null : (
+            <Section label="CHANGES">
+              {() => files().slice(0, 8).map((file) => (
+                <box flexDirection="row" gap={1} justifyContent="space-between">
+                  <text fg={t().text} wrapMode="none">{tail(file.file, 24)}</text>
+                  <box flexDirection="row" gap={1} flexShrink={0}>
+                    {file.additions ? <text fg={t().diffAdded}>{'+' + file.additions}</text> : null}
+                    {file.deletions ? <text fg={t().diffRemoved}>{'-' + file.deletions}</text> : null}
+                  </box>
+                </box>
+              ))}
+              {() => files().length > 8
+                ? <text fg={t().textMuted}>{'+' + (files().length - 8) + ' more'}</text>
+                : null}
+            </Section>
+          )}
+        </box>
+      )
+    }
+
+    // \u2500\u2500 prompt \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    /** Left half of the line under the input; replaces the engine's plain cwd. */
+    function Hint(props) {
+      const directory = () => safe(
+        () => api.state.session.get(props.sessionID).directory,
+        safe(() => api.state.path.directory, ''),
+      )
+      const branch = () => safe(() => api.state.vcs.branch, '')
+      return (
+        <box flexDirection="row" gap={1} marginLeft={1}>
+          <text fg={t().textMuted} wrapMode="none">{() => directory()}</text>
+          {() => branch() ? <text fg={t().textMuted} wrapMode="none">{'\xB7 ' + branch()}</text> : null}
+        </box>
+      )
+    }
+
+    /**
+     * The band: our hairline on top, the marker in the gutter, and the
+     * engine's own input between them. The rule sits INSIDE the right column
+     * so it starts exactly where the engine draws its own rule under the
+     * input \u2014 the two lines of the band must share a left edge. The marker is
+     * pushed down by two rows for the same reason: one for the rule, one for
+     * the padding the engine's prompt adds above its first line.
+     */
+    function Band(props) {
+      return (
+        <box flexDirection="row" width="100%">
+          <box flexShrink={0} paddingTop={2} paddingRight={1}>
+            <text fg={t().primary}>{MARK}</text>
+          </box>
+          <box flexGrow={1} flexDirection="column">
+            <Rule heavy />
+            {props.children}
+          </box>
+        </box>
+      )
+    }
+
     api.slots.register({
       order: 1,
       slots: {
-        home_logo(ctx) {
-          const accent = ctx && ctx.theme ? ctx.theme.primary : undefined
-          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
+        home_logo() {
           return (
             <box flexDirection="column">
               {LOGO.map((line) => (
-                <text fg={accent}>{line}</text>
+                <text fg={t().primary}>{line}</text>
               ))}
               <text> </text>
-              <text fg={muted}>${brand.tagline}</text>
+              <text fg={t().textMuted}>${brand.tagline}</text>
             </box>
           )
         },
-        home_footer(ctx) {
-          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
-          return <text fg={muted}>${brand.name} v${VERSION}</text>
+
+        home_footer() {
+          return <text fg={t().textMuted}>${brand.name} v${VERSION}</text>
+        },
+
+        home_prompt(ctx, data) {
+          return (
+            <Band>
+              <Prompt
+                ref={data.ref}
+                placeholders={PLACEHOLDERS}
+                right={<HostSlot name="home_prompt_right" />}
+              />
+            </Band>
+          )
         },
-        // Bottom of the sidebar \u2014 this is where the engine prints its own
-        // name and engine version (for example "OpenCode 1.18.18"); ours replaces it.
-        sidebar_footer(ctx) {
-          const accent = ctx && ctx.theme ? ctx.theme.primary : undefined
-          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
+
+        session_prompt(ctx, data) {
           return (
-            <text>
-              <span fg={accent}>${brand.displayName}</span>
-              <span fg={muted}> v${VERSION}</span>
-            </text>
+            <Band>
+              <Prompt
+                sessionID={data.session_id}
+                visible={data.visible}
+                disabled={data.disabled}
+                onSubmit={data.on_submit}
+                ref={data.ref}
+                placeholders={PLACEHOLDERS}
+                hint={<Hint sessionID={data.session_id} />}
+                right={<HostSlot name="session_prompt_right" session_id={data.session_id} />}
+              />
+            </Band>
+          )
+        },
+
+        sidebar_title(ctx, data) {
+          return (
+            <box flexDirection="column">
+              <text fg={t().text}>{data.title}</text>
+              {() => data.share_url
+                ? <text fg={t().accent} wrapMode="none">{data.share_url}</text>
+                : null}
+            </box>
+          )
+        },
+
+        sidebar_content(ctx, data) {
+          return <Sidebar sessionID={data.session_id} />
+        },
+
+        // Bottom of the sidebar \u2014 where the engine prints its own name and
+        // version (for example "OpenCode 1.18.18"); ours replaces it.
+        sidebar_footer() {
+          return (
+            <box flexDirection="column">
+              <Rule />
+              <text>
+                <span fg={t().primary}>${brand.name}</span>
+                <span fg={t().textMuted}> v${VERSION}</span>
+              </text>
+            </box>
           )
         },
       },
@@ -6753,6 +7008,10 @@ is fine \u2014 but then say clearly that \`agentful push\` cannot deploy it.
   vars (\`database.anon_key\`/\`publishable_key\` expanded as
   \`VITE_\`/\`PUBLIC_\`/\`NEXT_PUBLIC_\`). Never rely on \`.env*\` files reaching the
   cloud \u2014 the CLI and server both strip them.
+- \`.agentful/\` is local CLI control metadata and is excluded from the cloud
+  build source. You may read \`.agentful/project.json\` while authoring, but app
+  code must never import or fetch it. Copy the fixed project ID into an ordinary
+  source constant when the managed backend client needs it.
 
 ## Supported frameworks (the cloud build table)
 
@@ -6778,7 +7037,9 @@ process, and never a script the user must run locally to produce the result.
 
 When the project uses the platform's managed backend, its ONLY API surface is:
 
-- Base: \`/api/p/{projectId}/\` \u2014 projectId comes from \`.agentful/project.json\`.
+- Base: \`/api/p/{projectId}/\` \u2014 while authoring, read projectId from
+  \`.agentful/project.json\` and materialize it in a normal app source constant;
+  never import \`.agentful/\` from app code.
 - End-user auth: \`\u2026/auth/*\` (\`register\`, \`login\`, \`me\`, \`verify\`, \u2026).
 - Data CRUD: \`\u2026/data/{collection}\` and \`\u2026/data/{collection}/{docId}\`.
 - Managed Server Actions: \`POST \u2026/actions/{action-name}\` \u2014 and NOTHING else.
@@ -6877,6 +7138,13 @@ ${backendSessionLines(backend)}
 
 // src/lib/engineConfig.ts
 var PROVIDER_ID = "agentful";
+var DISABLED_ENGINE_PLUGINS = {
+  "internal:sidebar-context": false,
+  "internal:sidebar-lsp": false,
+  "internal:sidebar-mcp": false,
+  "internal:sidebar-todo": false,
+  "internal:sidebar-files": false
+};
 var CLOUD_AGENT = "agentful-build";
 var LOCAL_AGENT = "local-only";
 var CLOUD_AGENT_PROMPT = `You are the Agentful Cloud build agent: everything you build in this directory targets deployment on Agentful Cloud via \`agentful push\`. Follow the platform contract in AGENTFUL_CLOUD.md strictly \u2014 static files only, no server process, no build-time env vars or secrets. When a push or cloud build fails, diagnose ONLY from the \`agentful push\` output and \`agentful build-status\`; quote the record and never invent causes or settings it does not show. If the user wants development that is not meant for the platform, suggest the ${LOCAL_AGENT} agent (Tab).`;
@@ -7006,7 +7274,15 @@ async function writeEngineSession(session, catalog, localProviders = {}, framewo
   (0, import_node_fs12.writeFileSync)(pluginPath, brandingPluginSource2());
   (0, import_node_fs12.writeFileSync)((0, import_node_path14.join)(configDir2, "tui.json"), JSON.stringify({
     theme: "agentful",
-    plugin: [`file://${pluginPath}`]
+    plugin: [`file://${pluginPath}`],
+    // The engine's own sidebar sections are plugins with fixed ids, and
+    // sidebar_content composes rather than replaces — without switching them
+    // off, ours would render UNDER theirs and the column would show every
+    // number twice. `plugin_enabled` is keyed by plugin id and applies to the
+    // built-in ones too (verified in the v1.18.18 binary); a user's own toggle
+    // in the plugin manager still wins, because the engine merges its kv
+    // state over this map.
+    plugin_enabled: DISABLED_ENGINE_PLUGINS
   }, null, 2));
   (0, import_node_fs12.writeFileSync)((0, import_node_path14.join)(themesDir, "agentful.json"), JSON.stringify(await resolveTheme(), null, 2));
   for (const name of Object.keys(SLASH_COMMANDS)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentful",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Agentful in your terminal — local development with push-to-cloud previews",
   "license": "Apache-2.0",
   "homepage": "https://agentful.dev",
@@ -23,6 +23,7 @@
     "sync-starters": "node scripts/sync-starters.mjs",
     "sync-skills": "node scripts/sync-skills.mjs",
     "typecheck": "tsc --noEmit",
+    "check-engine": "node scripts/check-engine-contract.mjs",
     "dev": "tsx src/index.ts",
     "sync-theme": "cp src/branding/agentful-theme.json ../frontend/public/cli/theme.json",
     "test": "node --import tsx --test src/lib/*.test.ts"