@adonis-agora/agent 0.78.0 → 0.80.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @adonis-agora/agent
 
+## 0.80.0
+
+### Minor Changes
+
+- [#373](https://github.com/DavideCarvalho/adonis-agora-agent/pull/373) [`9e0c73f`](https://github.com/DavideCarvalho/adonis-agora-agent/commit/9e0c73f4aef443de684257ddec676c1ba6119d63) Thanks [@DavideCarvalho](https://github.com/DavideCarvalho)! - Generative UI: the sandbox's code is checked before a call is accepted, and every UI call is recorded as telemetry for a new dashboard page.
+  
+  - **Validated before accepted.** `ui__sandbox` (and a `Sandbox` inside a `ui__render` tree) parses its JSX with the frame's own transpiler plus acorn/acorn-jsx, and its HTML scripts, `on*=` handlers, `jsFunctions` and `jsExpressions` with acorn. It checks that `App` exists, refuses any bridge other than `agent.send` (`flippy.send(…)`, `window.x.send`, `agent.post`) and any `<Component>` the kit's docs do not have, and warns about undeclared props. The model gets a short error with line, column and a one-line fix: ``invalid Sandbox code: jsx line 12:5: `flippy.send` — the bridge is `agent.send(payload)` ``. A component of your own can do the same with `defineComponent({ check })`. The parsers load on first use, server side only. `validateSandboxCode` is exported.
+  - **An example per mode.** `ui__sandbox`'s description ends with one minimal valid call: JSX with the kit, or HTML. The JSX is a quoted JSON string. It adds about 70–77 prompt tokens (o200k), only on turns that offer `ui__sandbox`.
+  - **Telemetry.** Genui tools are marked `ToolSpec.genui` (`{ mode, telemetry? }`). For each UI call the loop records tool, channel, mode, model, attempt, validity (`first_try` / `retried` / `failed`), error category, the call's share of its step's tokens and cost, and the time from turn start to its first and complete frame. It goes through the new optional `AgentStore.recordGenuiCalls`, into the in-memory store, or into the Lucid store's library-owned table `agent_genui_call`, which its schema heal (`createAgentTables`, run at boot) creates.
+  - **OpenCode.** The UI calls OpenCode's code mode makes through the MCP endpoint are recorded too, with attempts counted per run (`GenuiRunRecorder`). There the tokens are not split per call and the frames are not timed.
+  - **Privacy.** A row is metadata only, with quoted values scrubbed from error messages. Nothing app-side needs migrating. `telemetry: { samplePayloads: true }` also stores the call's input, for debugging only. `telemetry: false` records nothing.
+  - **Dashboard.** A new "Generative UI" page, backed by `GET <governance>/genui` and the optional `AgentGovernanceQueries.genuiStats`, shows first-try success per tool and model, common errors, UI cost per turn and per day, and p50/p95 time to first and complete frame.
+
+## 0.79.0
+
+### Minor Changes
+
+- [#368](https://github.com/DavideCarvalho/adonis-agora-agent/pull/368) [`090c31b`](https://github.com/DavideCarvalho/adonis-agora-agent/commit/090c31b209b7098e760a56a4041db68f641030ff) Thanks [@DavideCarvalho](https://github.com/DavideCarvalho)! - genui sandbox: lighter frames, purged kit styles, overlays that fit, and several kits per app.
+  
+  - **Shared assets (new default).** A page fetches the kit, its styles and the Tailwind runtime once; each sandbox `srcdoc` now carries only placeholders for them, asks its host (`agora:sandbox:load`) and gets their text (`agora:sandbox:assets`), put in inline elements under the same CSP as before (no `blob:`, no network, no `allow-same-origin`). Five Lastro-kit sandboxes went from 5.36 MB of HTML to 0.25 MB, with less browser memory. `createSandboxRenderer({ assets: 'inline' })` keeps the old behaviour; React Native keeps inlining. New: `SandboxDocumentOptions.sharedAssets`, `SANDBOX_MESSAGE.load` / `.assets`, `sandboxSharedAssetsWanted()`.
+  - **Purged kit styles.** `genuiSandboxKit({ purge })`, on by default: with Tailwind v4, the utilities layer keeps only what the kit's code names (the frame's runtime generates the rest); Tailwind v3 drops rules naming classes the kit does not use; other CSS drops unused CSS-modules classes. `purge: false` ships everything, `{ safelist }` keeps more. New: `purgeCss()`, `classTokensOf()`, `purgeSandboxKitStyles()`.
+  - **Complete class vocabulary.** Non-Tailwind stylesheets are described as patterns (`m{,b,e,s,t,x,y}-{0..5,auto}`) instead of a list capped at 600 names: all of Bootstrap's 2,025 classes, spacing included, in about 10 KB. `extractCssVocabulary` gains `maxChars` (default 12,000); `maxClasses` / `maxPerFamily` now default to no cap.
+  - **Overlays grow the frame.** An open dialog, menu or popover (portals, `position: fixed`, `<dialog open>`, `:popover-open`, ARIA roles) counts in the frame's height while it is open, and the frame shrinks back once it closes, so a tall MUI `Dialog` or Radix `Popover` is no longer clipped.
+  - **See-through frame page.** The frame's `html`/`body` stay transparent whatever a kit's baseline paints (MUI `CssBaseline`, Bootstrap reboot): no more box of the theme's background beside a narrower card.
+  - **Named kits.** `genuiSandboxKit({ name })` builds several kits in one app, each under `/@genui-sandbox-kit/<name>/`, its own descriptor and manifest keys; the server picks one with `kitName` (`sandbox: { kit: true, kitName }`, `defineSandbox({ kitName })`), and named discovery is available for per-request choices.
+  - **Kit urls for a hook-only setup.** `genui({ sandboxKit: { kitUrl, cssUrl, tailwindUrl } })` tells the browser where an SPA serves the kit when the assembler hook (`genuiKitHook`) wrote docs without urls — the same options as Nest's `sandboxKit`, which gains `cssUrl` and `tailwindUrl`. `sandboxKitDiscovery` takes all three.
+
 ## 0.78.0
 
 ### Minor Changes

package/dist/assets/spa/assets/{index-DVnnBvfn.css → index-BxmGk7Ik.css}

@@ -1 +1 @@
-:root{--bg:#09090b;--panel:#0c0c0f;--panel-2:#101017;--line:#1c1c22;--line-soft:#16161a;--text:#e7e7ea;--muted:#76767f;--agora-primary:#a78bfa;--agora-primary-soft:#a78bfa24;--agora-accent:#60a5fa;--primary:var(--agora-primary);--primary-fg:#09090b;--good:#34d399;--warn:#fbbf24;--bad:#f87171;--info:var(--agora-accent)}:root[data-theme=light],:root:not([data-theme=dark]),:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f8f6f2;--panel:#fbfaf8;--panel-2:#f5f3ef;--line:#2020271f;--line-soft:#2020270f;--text:#1a1a23;--muted:#656572;--primary-fg:#faf8f4}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,ui-sans-serif,system-ui,sans-serif}.mono{font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,monospace}.tnum{font-variant-numeric:tabular-nums}.app-bg{z-index:0;pointer-events:none;opacity:.9;background-image:radial-gradient(900px 420px at 82% -10%,#4426df1f,#0000 70%),radial-gradient(700px 360px at 8% -12%,#0dccf20f,#0000 70%);position:fixed;inset:0}.shell{z-index:1;max-width:1180px;margin:0 auto;padding:28px 24px 64px;position:relative}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{width:32px;height:32px;color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, transparent);border:1px solid color-mix(in srgb, var(--primary) 40%, transparent);border-radius:8px;place-items:center;font-weight:700;display:grid}.brand h1{letter-spacing:-.01em;margin:0;font-size:14px;font-weight:600}.brand p{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:1px 0 0;font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,monospace;font-size:10px}.tabs{flex-wrap:wrap;gap:6px;margin-bottom:20px;display:flex}.tab{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:8px;align-items:center;gap:7px;padding:6px 12px;font-size:12px;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.tab:hover{color:var(--text)}.tab[aria-selected=true]{color:var(--text);background:color-mix(in srgb, var(--primary) 10%, transparent);border-color:color-mix(in srgb, var(--primary) 50%, var(--line))}.controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.range-input{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 9px;font-family:inherit;font-size:12px}.price-input{min-width:225px}.icon-btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:8px;place-items:center;width:34px;height:32px;display:grid}.icon-btn:hover{color:var(--text)}.panel{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--line);border-radius:12px;padding:18px}.grid{gap:16px;display:grid}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.stat-4{grid-template-columns:repeat(4,1fr)}@media (width<=900px){.grid.cols-3,.grid.cols-2,.grid.stat-4{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.grid.cols-3,.grid.cols-2,.grid.stat-4{grid-template-columns:1fr}}.stat .label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;font-size:11px}.stat .value{letter-spacing:-.02em;font-size:24px;font-weight:600}.stat .sub{color:var(--muted);margin-top:4px;font-size:12px}.section-title{justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;display:flex}.section-title h2{letter-spacing:.01em;margin:0;font-size:14px}.section-title .hint{color:var(--muted);font-size:12px}.table{border-collapse:collapse;width:100%;font-size:12px}.table tbody{font-variant-numeric:tabular-nums;font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,monospace}.table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);padding:0 10px 10px;font-size:11px;font-weight:500}.table td{border-bottom:1px solid var(--line-soft);vertical-align:middle;padding:10px}.table tr:last-child td{border-bottom:none}.table .num{text-align:right}.table-wrap{overflow-x:auto}.bar{background:var(--line);border-radius:999px;min-width:60px;height:6px;overflow:hidden}.bar>span{background:var(--primary);border-radius:999px;height:100%;display:block}.legend{flex-direction:column;gap:8px;font-size:12px;display:flex}.legend .row{align-items:center;gap:8px;display:flex}.swatch{border-radius:3px;flex:none;width:10px;height:10px}.legend .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.pill{border:1px solid var(--line);color:var(--muted);border-radius:999px;align-items:center;gap:6px;padding:2px 9px;font-size:11px;display:inline-flex}.dot{background:currentColor;border-radius:999px;width:7px;height:7px;display:inline-block}.s-completed,.s-ok,.s-success,.s-approved{color:var(--good)}.s-running,.s-pending,.s-pending_approval,.s-awaiting_approval{color:var(--info)}.s-failed,.s-error,.s-rejected,.s-forbidden{color:var(--bad)}.s-cancelled,.s-canceled{color:var(--warn)}.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-family:inherit;font-size:12px;transition:color .15s,border-color .15s,background .15s}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.approve{color:var(--good);background:color-mix(in srgb, var(--good) 10%, var(--panel));border-color:color-mix(in srgb, var(--good) 50%, var(--line))}.btn.reject{color:var(--bad);background:color-mix(in srgb, var(--bad) 10%, var(--panel));border-color:color-mix(in srgb, var(--bad) 50%, var(--line))}.rowbtns{justify-content:flex-end;gap:6px;display:inline-flex}.table tr.clickable{cursor:pointer}.table tr.clickable:hover td{background:var(--panel-2)}.th-sort{appearance:none;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0}.th-sort:hover{color:var(--text)}.warnnum{color:var(--warn)}.msg{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px 12px}.msg-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.msg-body{white-space:pre-wrap;word-break:break-word;font-size:13px}.empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:13px}.err{color:var(--bad);text-align:center;padding:20px 10px;font-size:13px}.skeleton{background:linear-gradient(90deg, var(--line-soft), var(--line), var(--line-soft));background-size:200% 100%;border-radius:8px;height:14px;animation:1.3s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stack{flex-direction:column;gap:16px;display:flex}.muted{color:var(--muted)}.right{text-align:right}.chart-svg{width:100%;height:auto;display:block}.foot{color:var(--muted);text-align:center;margin-top:26px;font-size:11px}
+:root{--bg:#09090b;--panel:#0c0c0f;--panel-2:#101017;--line:#1c1c22;--line-soft:#16161a;--text:#e7e7ea;--muted:#76767f;--agora-primary:#a78bfa;--agora-primary-soft:#a78bfa24;--agora-accent:#60a5fa;--primary:var(--agora-primary);--primary-fg:#09090b;--good:#34d399;--warn:#fbbf24;--bad:#f87171;--info:var(--agora-accent)}:root[data-theme=light],:root:not([data-theme=dark]),:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f8f6f2;--panel:#fbfaf8;--panel-2:#f5f3ef;--line:#2020271f;--line-soft:#2020270f;--text:#1a1a23;--muted:#656572;--primary-fg:#faf8f4}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Space Grotesk,ui-sans-serif,system-ui,sans-serif}.mono{font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,monospace}.tnum{font-variant-numeric:tabular-nums}.app-bg{z-index:0;pointer-events:none;opacity:.9;background-image:radial-gradient(900px 420px at 82% -10%,#4426df1f,#0000 70%),radial-gradient(700px 360px at 8% -12%,#0dccf20f,#0000 70%);position:fixed;inset:0}.shell{z-index:1;max-width:1180px;margin:0 auto;padding:28px 24px 64px;position:relative}.masthead{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{width:32px;height:32px;color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, transparent);border:1px solid color-mix(in srgb, var(--primary) 40%, transparent);border-radius:8px;place-items:center;font-weight:700;display:grid}.brand h1{letter-spacing:-.01em;margin:0;font-size:14px;font-weight:600}.brand p{text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin:1px 0 0;font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,monospace;font-size:10px}.tabs{flex-wrap:wrap;gap:6px;margin-bottom:20px;display:flex}.tab{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:8px;align-items:center;gap:7px;padding:6px 12px;font-size:12px;transition:color .15s,border-color .15s,background .15s;display:inline-flex}.tab:hover{color:var(--text)}.tab[aria-selected=true]{color:var(--text);background:color-mix(in srgb, var(--primary) 10%, transparent);border-color:color-mix(in srgb, var(--primary) 50%, var(--line))}.controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.range-input{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 9px;font-family:inherit;font-size:12px}.price-input{min-width:225px}.icon-btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;border-radius:8px;place-items:center;width:34px;height:32px;display:grid}.icon-btn:hover{color:var(--text)}.panel{background:linear-gradient(180deg, var(--panel-2), var(--panel));border:1px solid var(--line);border-radius:12px;padding:18px}.grid{gap:16px;display:grid}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}.grid.stat-4{grid-template-columns:repeat(4,1fr)}@media (width<=900px){.grid.cols-3,.grid.cols-2,.grid.stat-4{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.grid.cols-3,.grid.cols-2,.grid.stat-4{grid-template-columns:1fr}}.stat .label{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px;font-size:11px}.stat .value{letter-spacing:-.02em;font-size:24px;font-weight:600}.stat .sub{color:var(--muted);margin-top:4px;font-size:12px}.section-title{justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;display:flex}.section-title h2{letter-spacing:.01em;margin:0;font-size:14px}.section-title .hint{color:var(--muted);font-size:12px}.table{border-collapse:collapse;width:100%;font-size:12px}.table tbody{font-variant-numeric:tabular-nums;font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,monospace}.table th{text-align:left;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);padding:0 10px 10px;font-size:11px;font-weight:500}.table td{border-bottom:1px solid var(--line-soft);vertical-align:middle;padding:10px}.table tr:last-child td{border-bottom:none}.table .num{text-align:right}.table-wrap{overflow-x:auto}.bar{background:var(--line);border-radius:999px;min-width:60px;height:6px;overflow:hidden}.bar>span{background:var(--primary);border-radius:999px;height:100%;display:block}.legend{flex-direction:column;gap:8px;font-size:12px;display:flex}.legend .row{align-items:center;gap:8px;display:flex}.swatch{border-radius:3px;flex:none;width:10px;height:10px}.legend .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.pill{border:1px solid var(--line);color:var(--muted);border-radius:999px;align-items:center;gap:6px;padding:2px 9px;font-size:11px;display:inline-flex}.dot{background:currentColor;border-radius:999px;width:7px;height:7px;display:inline-block}.s-completed,.s-ok,.s-success,.s-approved{color:var(--good)}.s-running,.s-pending,.s-pending_approval,.s-awaiting_approval{color:var(--info)}.s-failed,.s-error,.s-rejected,.s-forbidden{color:var(--bad)}.s-cancelled,.s-canceled{color:var(--warn)}.btn{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:6px;padding:6px 12px;font-family:inherit;font-size:12px;transition:color .15s,border-color .15s,background .15s}.btn:hover:not(:disabled){border-color:var(--muted)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.approve{color:var(--good);background:color-mix(in srgb, var(--good) 10%, var(--panel));border-color:color-mix(in srgb, var(--good) 50%, var(--line))}.btn.reject{color:var(--bad);background:color-mix(in srgb, var(--bad) 10%, var(--panel));border-color:color-mix(in srgb, var(--bad) 50%, var(--line))}.rowbtns{justify-content:flex-end;gap:6px;display:inline-flex}.table tr.clickable{cursor:pointer}.table tr.clickable:hover td{background:var(--panel-2)}.th-sort{appearance:none;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0}.th-sort:hover{color:var(--text)}.warnnum{color:var(--warn)}.msg{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px 12px}.msg-head{justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;display:flex}.msg-body{white-space:pre-wrap;word-break:break-word;font-size:13px}.empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:13px}.err{color:var(--bad);text-align:center;padding:20px 10px;font-size:13px}.skeleton{background:linear-gradient(90deg, var(--line-soft), var(--line), var(--line-soft));background-size:200% 100%;border-radius:8px;height:14px;animation:1.3s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stack{flex-direction:column;gap:16px;display:flex}.muted{color:var(--muted)}.right{text-align:right}.chart-svg{width:100%;height:auto;display:block}.foot{color:var(--muted);text-align:center;margin-top:26px;font-size:11px}.pill.cat{color:var(--warn)}.genui-msg{white-space:pre-wrap;word-break:break-word;max-width:520px;font-size:12px}