@bivy/bivy 0.20.9-staging.20 → 0.20.9-staging.22

package/dist/agent-instructions.js

@@ -33,9 +33,12 @@ export const BIVY_AGENT_NOTE = [
     "- Show an IMAGE (screenshot, chart, diagram) inside your reply: write it as markdown, " +
         "`![short caption](relative/path.png)`, where you want it to appear. The path must be inside the session " +
         "workspace; a remote `https://` image works too. No tool call needed.",
-    "- Send a FILE, or an image on its own (a report, a download they asked for): run " +
-        '`bivy attach <path> [--caption "short note"]`, or call the `attach_to_chat` tool if you have it. Same ' +
-        "workspace-only rule; files arrive as downloads.",
+    "- Show a FILE (a report, a log, data they asked for) inside your reply: put " +
+        '`::view{src=relative/path.pdf caption="what it is"}` on its own line, where you want it. Same workspace-only ' +
+        "rule. A `.csv`/`.tsv` renders as a table; anything else arrives as a download. For a single number worth " +
+        'reading at a glance, fence a spec instead: ```bivy {"type":"metric","value":"4 650 kWh","label":"per year"} ```.',
+    "- Send a file WITHOUT writing a reply (or from a script): run " +
+        '`bivy attach <path> [--caption "short note"]`, or call the `attach_to_chat` tool if you have it.',
     "- Something with a UI: `bivy app publish <manifest.json>` (a web server's port, a static build, a terminal) or " +
         "`bivy app run -- <command>` (a desktop app) gives the user a live preview; `bivy app shot` screenshots it so you " +
         "can check your work; `bivy app present` tells the user a visible change is ready to look at, and " +

package/dist/apps/styles.css

@@ -639,6 +639,29 @@ input, textarea, select { font-family: inherit; font-size: 16px; }
 .msg.assistant .mermaid-diagram:first-child { margin-top: 0; }
 .msg.assistant .mermaid-diagram:last-child { margin-bottom: 0; }
 .msg.assistant .mermaid-diagram svg { display: inline-block; max-width: none; height: auto; vertical-align: top; }
+/* Mount point for a component the agent placed in its message (::view{…}, a
+   ```bivy fence). Layout only: what renders inside is an existing component
+   (.msg-attachment, .card), so this must not restyle its shell — it only gives
+   it the same vertical rhythm as a paragraph. Empty until the portal mounts,
+   and empty forever if a reference never resolves, so it carries no border or
+   background of its own that would leave a visible hole. */
+.msg.assistant .md-component { margin: 0.75em 0; }
+.msg.assistant .md-component:first-child { margin-top: 0; }
+.msg.assistant .md-component:last-child { margin-bottom: 0; }
+.msg.assistant .md-component:empty { margin: 0; }
+/* A placed component is a block in the reading column, not a tile in a row: it
+   fills the message width so every kind lines up with every other one and with
+   the prose around it. The fixed chip width belongs to the composer's wrapping
+   attachment list, where several chips share a line. */
+.msg.assistant .md-component > * { width: 100%; }
+/* A single number the agent wants read at a glance. Inherits .card's shell;
+   only the value's type scale is its own. */
+.metric-component { text-align: center; }
+.metric-value { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: var(--weight-semibold); }
+/* A table from a CSV or a spec reuses .markdown-table-wrap, so it reads exactly
+   like a table the agent wrote as markdown. The caption is the only addition. */
+.table-component { margin: 0; }
+.table-component figcaption { margin-top: var(--space-2); }
 /* Syntax highlighting for fenced code blocks (highlight.js token classes).
    Colors use light-dark() so one rule set tracks the app's light/dark scheme
    (color-scheme is set on :root). A GitHub-flavored palette that sits well on

package/dist/server.js

@@ -8170,7 +8170,7 @@ function attachSessionListeners(record) {
         // resolvers are internally deduped, so checking twice costs nothing.
         if (event.type === "message_end" || event.type === "turn_end") {
             transcripts.resolveInlineImages(record);
-            transcripts.resolveWorkspaceImages(record, harnessDirFor(record));
+            transcripts.resolveWorkspaceRefs(record, harnessDirFor(record));
         }
         // Durably persist the throttled sidecars at the turn boundary so a crash
         // loses at most the in-flight turn's UI detail, not the whole turn. A

package/dist/session/inline-image-fetch.js

@@ -19,7 +19,7 @@
 import dns from "node:dns/promises";
 import { hostnameIsLocal } from "../auth.js";
 import { sanitizeAttachmentName, sniffMime } from "./attach-to-chat.js";
-import { extractImageReferences, MAX_COMPONENTS_PER_MESSAGE } from "./message-components.js";
+import { extractImageReferences, extractMessageReferences, MAX_COMPONENTS_PER_MESSAGE } from "./message-components.js";
 /** Bound how many distinct images a single message can trigger a resolve for —
  *  a pathological/malicious message can't fan out into an unbounded number of
  *  outbound requests or file reads. Re-exported from the shared grammar, which
@@ -41,10 +41,13 @@ const MAX_REDIRECTS = 5;
 export function extractInlineImageUrls(text) {
     return extractImageReferences(text).filter((i) => i.origin === "remote").map((i) => i.ref);
 }
-/** The distinct workspace-relative paths a message's raw markdown references,
- *  in first-seen order, under the same per-message cap. */
-export function extractWorkspaceImagePaths(text) {
-    return extractImageReferences(text).filter((i) => i.origin === "workspace").map((i) => i.ref);
+/** The distinct workspace references a message makes — from image syntax or a
+ *  `::view{src=…}` directive — in first-seen order, under the same per-message
+ *  cap. `syntax` tells the resolver whether non-image bytes are acceptable. */
+export function extractWorkspaceRefs(text) {
+    return extractMessageReferences(text)
+        .filter((r) => r.origin === "workspace")
+        .map(({ ref, syntax }) => ({ ref, syntax }));
 }
 /** Best-effort plain text for an assistant RuntimeMessage's `content`, which is
  *  either a plain string or an array of typed blocks (`{type:"text", text}`

package/dist/session/message-components.js

@@ -152,3 +152,175 @@ export function replaceImageReferences(text, render) {
         return render({ alt: alt ?? "", ref, origin });
     });
 }
+// ---------------------------------------------------------------------------
+// Components the agent places with a directive or a spec
+//
+// `![alt](path)` says "show this image here" and nothing else. The two forms
+// below are how an agent says anything more — show this FILE, show this CSV as a
+// table — without a second out-of-band channel per kind:
+//
+//   ::view{src=data/sales.csv}         point at something in the workspace
+//   ```bivy … ```                      carry a small spec inline
+//
+// Both land as the same value, a ComponentPlacement, and both render through one
+// table keyed by `kind`. Adding a kind is a row in that table, not another
+// branch here. Anything this file cannot make sense of stays the text the agent
+// wrote, because an agent WILL get the syntax wrong and a message must still
+// read.
+// ---------------------------------------------------------------------------
+/** The info string that marks a fenced block as a component spec. */
+export const COMPONENT_FENCE_LANG = "bivy";
+/** Ceiling for one inline spec. A spec rides in the message and then in every
+ *  rendered copy of it, so it is for a handful of values — a file is the right
+ *  home for real data. Past this the fence stays an ordinary code block. */
+export const MAX_COMPONENT_SPEC_CHARS = 16 * 1024;
+/** Ceiling for a directive's attribute list, bounding the parse below. */
+const MAX_ATTRS_CHARS = 512;
+/** Leaf directives this grammar knows. `view` is the general one; a named leaf
+ *  can be added later without touching the parser. */
+const LEAF_NAMES = new Set(["view"]);
+/**
+ * `{src=a/b.csv height=200 caption="Last quarter" #fig-1 .wide}` →
+ * `{ src: "a/b.csv", height: "200", caption: "Last quarter", id: "fig-1", class: "wide" }`
+ *
+ * Every repetition is bounded (see imagePattern's note — this runs on the same
+ * agent-authored text), and the whole list is length-capped, so a pathological
+ * attribute string is refused rather than parsed slowly.
+ */
+export function parseAttrs(source) {
+    const out = {};
+    const text = String(source || "").trim().replace(/^\{|\}$/g, "");
+    if (!text || text.length > MAX_ATTRS_CHARS)
+        return out;
+    const re = /([#.]?[\w-]{1,64})(?:\s*=\s*(?:"([^"\n]{0,512})"|'([^'\n]{0,512})'|([^\s"'}]{1,512})))?/g;
+    for (const m of text.matchAll(re)) {
+        const key = m[1] ?? "";
+        const value = m[2] ?? m[3] ?? m[4];
+        if (key.startsWith("#"))
+            out.id = key.slice(1);
+        else if (key.startsWith("."))
+            out.class = out.class ? `${String(out.class)} ${key.slice(1)}` : key.slice(1);
+        else if (key)
+            out[key] = value === undefined ? true : value;
+    }
+    return out;
+}
+/**
+ * A whole line that is a leaf directive, or null. Block-level by construction:
+ * the directive must own its line, so a `::view{…}` written mid-sentence is
+ * prose and a half-streamed one cannot render until its line is complete.
+ *
+ * `src` is validated as a WORKSPACE reference. A directive is not a link — it
+ * names something Bivy has to read — so a remote URL is refused here even
+ * though `![](https://…)` accepts one.
+ */
+export function parseComponentDirective(line) {
+    // Surrounding whitespace is trimmed rather than matched, leaving exactly ONE
+    // whitespace quantifier in the pattern. Two of them around an optional group
+    // (`::name[ \t]*{…}?[ \t]*$`) is ambiguous — a run of tabs can be split
+    // between them in as many ways as it is long, which is quadratic on a line
+    // like `::a` followed by whitespace, and this runs on agent-authored text.
+    // See imagePattern's note; the same rule applies to every pattern here.
+    const m = /^::([a-z][\w-]{0,31})[ \t]{0,32}(\{[^}\n]{0,512}\})?$/i.exec(String(line || "").trim());
+    if (!m || !LEAF_NAMES.has((m[1] ?? "").toLowerCase()))
+        return null;
+    const { src, ...attrs } = parseAttrs(m[2] ?? "");
+    const ref = typeof src === "string" ? unescapeComponentRef(src) : "";
+    if (!ref || classifyImageTarget(ref) !== "workspace")
+        return null;
+    return { ref, spec: null, attrs };
+}
+/** True for the info string of a component fence (```bivy). */
+export function isComponentFence(info) {
+    return String(info || "").trim().toLowerCase() === COMPONENT_FENCE_LANG;
+}
+/**
+ * A component fence's body as a spec object, or null to leave the fence as an
+ * ordinary code block — which is what an agent gets for malformed JSON, and is
+ * strictly better than an error: the source stays readable and copyable.
+ */
+export function parseComponentSpec(body) {
+    const text = String(body || "").trim();
+    if (!text || text.length > MAX_COMPONENT_SPEC_CHARS)
+        return null;
+    let parsed;
+    try {
+        parsed = JSON.parse(text);
+    }
+    catch {
+        return null;
+    }
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed))
+        return null;
+    return parsed;
+}
+/**
+ * How a component is rendered, from its spec's own `type` or from the file it
+ * points at. One table, so a new kind is a row here plus a row in the view
+ * layer's registry — never a branch in the parser.
+ *
+ * Returns a kind string even for a kind this build cannot render; the registry
+ * decides, and falls back visibly rather than dropping the component.
+ */
+export function componentKind(opts) {
+    const declared = opts.spec?.type;
+    if (typeof declared === "string" && declared.trim())
+        return declared.trim().toLowerCase();
+    if (opts.spec)
+        return "unknown";
+    const mime = String(opts.mimeType || "").toLowerCase();
+    if (mime.startsWith("image/"))
+        return "image";
+    const ext = String(opts.path || "").toLowerCase().split(".").pop() ?? "";
+    if (ext === "csv" || ext === "tsv")
+        return "table";
+    // Everything else is a file the reader can open or download. Rows for richer
+    // readings of a file — a notebook, a diff — belong here alongside the renderer
+    // that can actually draw them. A row added early would promise a kind the view
+    // layer has to decline, turning a useful download into "this version cannot
+    // show that yet".
+    return "file";
+}
+/**
+ * Every reference a message makes that Bivy has to resolve — from image syntax
+ * or from a directive — de-duplicated, in first-seen order, under ONE shared
+ * cap. One budget across both forms is deliberate: the cost being bounded is
+ * file reads and persisted bytes, which do not care which syntax asked.
+ */
+export function extractMessageReferences(text, limit = MAX_COMPONENTS_PER_MESSAGE) {
+    if (!text)
+        return [];
+    const source = String(text);
+    const found = [];
+    // Images are matched against the WHOLE text, not line by line: alt text may
+    // contain a newline (an agent wrapping a long caption at 80 columns), and the
+    // renderer — which sees a paragraph with its lines already joined — would
+    // place a mount point the node then never resolved.
+    for (const match of source.matchAll(imagePattern())) {
+        const ref = unescapeComponentRef(match[2] ?? "");
+        const origin = classifyImageTarget(ref);
+        if (origin)
+            found.push({ ref, origin, syntax: "image", at: match.index ?? 0 });
+    }
+    // Directives own a whole line, so they are matched per line; the running
+    // offset keeps them in document order with the images above.
+    let at = 0;
+    for (const line of source.split("\n")) {
+        const directive = parseComponentDirective(line);
+        if (directive?.ref)
+            found.push({ ref: directive.ref, origin: "workspace", syntax: "view", at });
+        at += line.length + 1;
+    }
+    found.sort((a, b) => a.at - b.at);
+    const out = [];
+    const seen = new Set();
+    for (const { ref, origin, syntax } of found) {
+        if (seen.has(ref))
+            continue;
+        seen.add(ref);
+        out.push({ ref, origin, syntax });
+        if (out.length >= limit)
+            break;
+    }
+    return out;
+}

package/dist/session/transcript-persistence.js

@@ -17,7 +17,7 @@ import { createClientProjection } from "./client-projection.js";
 import { randomBytes } from "node:crypto";
 import { mergeBases } from "./event-log.js";
 import { thinkingTextFromContent } from "./transcript-merge.js";
-import { extractInlineImageUrls, extractWorkspaceImagePaths, fetchInlineImage, isFetchImageError, inlineImageDisplayName, assistantTextForImageScan } from "./inline-image-fetch.js";
+import { extractInlineImageUrls, extractWorkspaceRefs, fetchInlineImage, isFetchImageError, inlineImageDisplayName, assistantTextForImageScan } from "./inline-image-fetch.js";
 import { planAttachment, isAttachPlanError } from "./attach-to-chat.js";
 import { historyDelta } from "../history-sync.js";
 import { withToolDetails } from "../runtime/tool-call-map.js";
@@ -73,12 +73,12 @@ function thinkingTextFromEvent(event) {
     return "";
 }
 const INLINE_IMAGE_RETRY_COOLDOWN_MS = 10 * 60 * 1000;
-/** Ceiling for one workspace image copied into the transcript. Matches the
+/** Ceiling for one workspace file copied into the transcript. Matches the
  *  remote cap (MAX_INLINE_IMAGE_BYTES) rather than the larger explicit-attach
  *  one: a `![…](path)` is incidental illustration the agent spent no tool call
  *  on, and every byte is persisted in the event log and replicated to phones. An
  *  agent that means to send something big still has `bivy attach`. */
-const MAX_WORKSPACE_IMAGE_BYTES = 8 * 1024 * 1024;
+const MAX_WORKSPACE_REF_BYTES = 8 * 1024 * 1024;
 export function createTranscriptPersistence(deps) {
     const { eventLog, attachmentStore } = deps;
     const project = createClientProjection(attachmentStore, eventLog);
@@ -112,11 +112,28 @@ export function createTranscriptPersistence(deps) {
         }
         return refs;
     }
+    /** The same, for workspace references, keeping which syntax asked for each.
+     *  First mention wins: a path written as an image and as a directive is one
+     *  file read, and the stricter image rule applies to it. */
+    function workspaceRefsInTranscript(record) {
+        const refs = new Map();
+        for (const m of record.session.getMessages()) {
+            if (m.role !== "assistant")
+                continue;
+            for (const { ref, syntax } of extractWorkspaceRefs(assistantTextForImageScan(m.content))) {
+                if (!refs.has(ref))
+                    refs.set(ref, syntax);
+            }
+        }
+        return refs;
+    }
     /** Store resolved bytes under `ref` and tell every client, durably and live.
      *  One place, so the remote and workspace resolvers below cannot drift in how
-     *  they record what they found. */
-    function recordResolvedImage(sessionId, ref, bytes, meta) {
-        const stored = attachmentStore.put(bytes, { name: meta.name, mimeType: meta.mimeType, kind: "image" });
+     *  they record what they found. `kind` carries whether the bytes are an image,
+     *  which is what lets the view layer pick a renderer for a `::view` that
+     *  points at something other than a picture. */
+    function recordResolvedRef(sessionId, ref, bytes, meta) {
+        const stored = attachmentStore.put(bytes, { name: meta.name, mimeType: meta.mimeType, kind: meta.kind ?? "image" });
         eventLog.appendInlineImage(sessionId, { url: ref, ref: stored });
         eventLog.flush(sessionId);
         deps.broadcast(deps.stampSessionEvent({ type: "session.event", sessionId, event: { type: "inlineImage", url: ref, ref: stored } }));
@@ -143,37 +160,39 @@ export function createTranscriptPersistence(deps) {
      * Distinct paths are the workaround until componentRefs carry a per-message
      * anchor the way outbound attachments already do.
      */
-    function resolveWorkspaceImages(record, workspaceDir) {
+    function resolveWorkspaceRefs(record, workspaceDir) {
         if (!workspaceDir)
             return;
-        const paths = imageRefsInTranscript(record, extractWorkspaceImagePaths);
-        if (!paths.size)
+        const refs = workspaceRefsInTranscript(record);
+        if (!refs.size)
             return;
         const alreadyResolved = new Set(eventLog.readInlineImages(record.id).map(([ref]) => ref));
-        for (const rel of paths) {
+        for (const [rel, syntax] of refs) {
             if (alreadyResolved.has(rel))
                 continue;
             const failedAt = inlineImageFailedAt.get(rel);
             if (failedAt !== undefined && Date.now() - failedAt < INLINE_IMAGE_RETRY_COOLDOWN_MS)
                 continue;
-            const plan = planAttachment({ workspaceDir, filePath: rel, maxBytes: MAX_WORKSPACE_IMAGE_BYTES });
+            const plan = planAttachment({ workspaceDir, filePath: rel, maxBytes: MAX_WORKSPACE_REF_BYTES });
             if (isAttachPlanError(plan)) {
-                console.warn(`[inline-image] ${rel}: ${plan.error}`);
+                console.warn(`[component] ${rel}: ${plan.error}`);
                 inlineImageFailedAt.set(rel, Date.now());
                 continue;
             }
-            // `![…](notes.md)` is a link the agent mistyped, not an image. Refusing
-            // non-image bytes keeps a stray one from becoming an unopenable chip.
-            if (plan.kind !== "image") {
-                console.warn(`[inline-image] ${rel}: not an image (${plan.mimeType})`);
+            // `![…](notes.md)` is a link the agent mistyped, not an image, so refusing
+            // non-image bytes keeps a stray one from becoming an unopenable chip. A
+            // `::view{src=notes.md}` asked for the file on purpose, so it is kept and
+            // the view layer picks a renderer from the mime type.
+            if (syntax === "image" && plan.kind !== "image") {
+                console.warn(`[component] ${rel}: not an image (${plan.mimeType})`);
                 inlineImageFailedAt.set(rel, Date.now());
                 continue;
             }
             try {
-                recordResolvedImage(record.id, rel, plan.bytes, { name: plan.name, mimeType: plan.mimeType });
+                recordResolvedRef(record.id, rel, plan.bytes, { name: plan.name, mimeType: plan.mimeType, kind: plan.kind });
             }
             catch (error) {
-                console.warn(`[inline-image] ${rel}:`, error instanceof Error ? error.message : String(error));
+                console.warn(`[component] ${rel}:`, error instanceof Error ? error.message : String(error));
                 inlineImageFailedAt.set(rel, Date.now());
             }
         }
@@ -197,7 +216,7 @@ export function createTranscriptPersistence(deps) {
                         inlineImageFailedAt.set(url, Date.now());
                         return;
                     }
-                    recordResolvedImage(record.id, url, result.bytes, { name: inlineImageDisplayName(url, result.mimeType), mimeType: result.mimeType });
+                    recordResolvedRef(record.id, url, result.bytes, { name: inlineImageDisplayName(url, result.mimeType), mimeType: result.mimeType });
                 }
                 catch (error) {
                     console.warn(`[inline-image] ${url}:`, error instanceof Error ? error.message : String(error));
@@ -353,7 +372,7 @@ export function createTranscriptPersistence(deps) {
         persistToolActivityFromEvent,
         persistIntermediateFromEvent,
         resolveInlineImages,
-        resolveWorkspaceImages,
+        resolveWorkspaceRefs,
         conversationMessages,
         forkMessages,
         buildHistoryEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bivy/bivy",
-  "version": "0.20.9-staging.20",
+  "version": "0.20.9-staging.22",
   "type": "module",
   "license": "AGPL-3.0-only",
   "description": "Run coding agents on machines you own. Open-source, self-hostable agent workspace.",