@ycodium-ai/plugin-visualize 0.0.0-stage → 0.2.2942

package/README.md

@@ -1,3 +1,66 @@
-# Temporary Holding Version
+# @ycodium-ai/plugin-visualize
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Puts an interactive HTML card in the conversation when an agent calls `visualize_visualize`.
+
+## What it does
+
+The agent passes an inline HTML fragment. While the call is still streaming, Web and Desktop show a preview under the composer. When the call finishes, the same fragment is a sandboxed card under the answer, and a copy is written to `viz/<slug>-<hash>.html` in the session workspace. The agent only receives one confirmation line. Reopening the thread reads the stored card.
+
+A later call can patch that file with one exact replacement instead of sending the whole fragment again. Buttons inside the card stay in the card. They do not send the next chat message.
+
+## Requirements
+
+A Ycodium server that loads plugin API version 4, including tool presentation, the conversation dock, deliverable tool cards, workspace write, and skill companion files.
+
+## Install
+
+From a checkout, build first, then install the directory:
+
+```
+vp run --filter @ycodium-ai/plugin-visualize build
+ycodium plugin add ./plugins/visualize
+```
+
+From a published package:
+
+```
+ycodium plugin add @ycodium-ai/plugin-visualize
+```
+
+The plugin is not part of the default install. After it is enabled, new sessions see the tool `visualize_visualize`. Approve the declared permissions: read and write the session workspace, the composer dock, the turn tail, and a session projection named `cards`.
+
+## Read this before installing
+
+The card runs third-party HTML in a sandboxed frame. Scripts are allowed. Network requests, nested frames, and form posts are not. A script or stylesheet loaded from a URL is rejected; inline it in the fragment. Images and fonts may still come from the CDN hosts named in the frame policy.
+
+Disabling the plugin removes the tool and the card view. Confirmation lines already in the transcript stay. Files under `viz/` stay in the workspace. The plugin cache that replays cards can be deleted with the rest of that plugin's cache. Uninstalling does not delete workspace files.
+
+## Upgrading
+
+```
+ycodium plugin add @ycodium-ai/plugin-visualize@<version>
+```
+
+Installing a newer version replaces the running one. Cards written by the previous version still open when their presentation or cache entry is intact.
+
+## Limits
+
+- The folded tool row keeps a one-line summary. The sandboxed card is the deliverable under the answer, not a second copy inside the folded group.
+- Web and Desktop preview the call under the composer. The host only forwards the first 8000 characters of the arguments, and it refreshes that preview about four times a second. The phone does not receive the live argument text, so the dock stays empty there and the card appears after the call finishes, on the latest turn.
+- The host stores each presentation in its database, so a card survives a server restart. This card is a deliverable, so the host's per-conversation size and age limits for presentations never evict or expire it. If the host has no presentation for a call, replay reads the plugin cache. If that cache is gone too, the confirmation line remains and the card body does not.
+- A card button cannot send the next user message.
+- The host recognizes this tool's activity row for every built-in agent: Codex, Claude, Grok, DSH, OpenCode, Kimi Code, and ACP. When that agent streams arguments, the composer preview fills. When an update has no arguments, the preview stays empty and the settled card still appears. The phone still does not receive the live argument text. Live model runs are not part of this package's checks.
+
+## Developing
+
+```
+vp run --filter @ycodium-ai/plugin-visualize typecheck
+vp run --filter @ycodium-ai/plugin-visualize test
+vp run --filter @ycodium-ai/plugin-visualize build
+```
+
+The server bundle externalizes `@ycodium-ai/plugin-api`. The UI bundle reads React from the host. `dist/` and `assets/ui.js` are build output.
+
+## License
+
+UNLICENSED.

package/assets/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect x="3" y="4" width="26" height="24" rx="5" stroke="#3B82F6" stroke-width="2"/>
+  <path d="M9 21V15M16 21V11M23 21V17" stroke="#3B82F6" stroke-width="2.2" stroke-linecap="round"/>
+</svg>

package/assets/ui.js

@@ -0,0 +1,326 @@
+var W=window.__ycodiumPluginHost.react;var{Activity:he,Children:pe,Component:ye,Fragment:ve,Profiler:be,PureComponent:xe,StrictMode:ze,Suspense:we,__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE:ke,__COMPILER_RUNTIME:Se,act:Ie,cache:Ce,cacheSignal:Ee,captureOwnerStack:Te,cloneElement:Ae,createContext:Pe,createElement:m,createRef:Ne,forwardRef:Re,isValidElement:Ve,lazy:_e,memo:Fe,startTransition:Me,unstable_useCacheRefresh:Oe,use:De,useActionState:Le,useCallback:Be,useContext:$e,useDebugValue:He,useDeferredValue:Ue,useEffect:f,useEffectEvent:je,useId:Ge,useImperativeHandle:Ye,useInsertionEffect:We,useLayoutEffect:Je,useMemo:g,useOptimistic:Ze,useReducer:Qe,useRef:E,useState:y,useSyncExternalStore:qe,useTransition:Ke,version:Xe}=W;var J={'"':'"',"\\":"\\","/":"/",b:"\b",f:"\f",n:`
+`,r:"\r",t:"	"};function T(e){return Z(e,!1)}function Z(e,t){let n=/"fragment"\s*:\s*"/u.exec(e);if(!n)return;let r="";for(let i=n.index+n[0].length;i<e.length;i++){let o=e[i];if(o===void 0)break;if(o==='"')return r;if(o!=="\\"){r+=o;continue}let d=e[i+1];if(d===void 0)return t?void 0:r;if(d==="u"){let s=e.slice(i+2,i+6);if(s.length<4||!/^[0-9a-fA-F]{4}$/u.test(s))return t?void 0:r;r+=String.fromCharCode(Number.parseInt(s,16)),i+=5;continue}let l=J[d];if(l===void 0)return t?void 0:r;r+=l,i+=1}return t?void 0:r}var Q=/<script\b[^>]*>?(?![\s\S]*<script\b)/iu;function A(e){let t=Q.exec(e);if(!t)return e;let n=e.slice(t.index+t[0].length);return/<\/script\s*>/iu.test(n)?e:e.slice(0,t.index)}var q=/(?:workspace copy at|updated card at) (viz\/[a-z0-9][a-z0-9-]{0,80}-[0-9a-f]{8}\.html)/u;function v(e){return e==null?null:q.exec(e)?.[1]??null}function N(e){if(typeof e!="object"||e===null)return null;let t=e;if(t.kind!=="visualize")return null;let n=t.fragment,r=t.title,i=t.path,o=t.mode,d=t.invocationId,l=t.action,s=t.sizeBytes;return typeof n!="string"||n.trim().length===0||typeof r!="string"||r.trim().length===0||typeof i!="string"||o!=="inline"&&o!=="wide"||l!=="create"&&l!=="update"||typeof d!="string"||typeof s!="number"||!Number.isFinite(s)?null:{kind:"visualize",invocationId:d,fragment:n,title:r,mode:o,path:i,sizeBytes:s,action:l}}function P(e,t){return N(e)??z(t)}function R(e){let t=v(e.confirmation),n=P(e.presentation,e.commandData);if(n!==null&&K(n,e.invocationId,t))return n;if(t===null)return null;let r=P(void 0,e.pathCommandData);return r===null||r.path!==t?null:r}function K(e,t,n){return!(n!==null&&e.path!==n||t.length>0&&e.invocationId!==t&&n===null)}function z(e){return typeof e!="object"||e===null?null:N(e.card)}function V(e){if(typeof e!="object"||e===null)return[];let t=e.cards;if(!Array.isArray(t))return[];let n=[];for(let r of t){if(typeof r!="object"||r===null)continue;let i=r,o=i.mode,d=i.action;typeof i.invocationId!="string"||typeof i.title!="string"||typeof i.path=="string"&&(o!=="inline"&&o!=="wide"||d!=="create"&&d!=="update"||typeof i.sizeBytes=="number"&&n.push({invocationId:i.invocationId,title:i.title,mode:o,path:i.path,sizeBytes:i.sizeBytes,action:d}))}return n}function w(e){return e===void 0?{}:{background:e.surface,foreground:e.foreground,card:e.surface,"muted-foreground":e.muted,border:e.border,primary:e.accent,"primary-foreground":e.surface}}function _(e){return e.querySelector('meta[name="ycodium-plugin-surface"]')!==null}function h(e){return e.i18n.usePluginTranslation()}var F=`
+.ycodium-visualize-ui {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  color: var(--viz-fg, var(--foreground));
+  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+.ycodium-visualize-ui * { box-sizing: border-box; }
+.ycodium-visualize-card {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--viz-border, var(--border));
+  border-radius: var(--radius-lg, 12px);
+  background: var(--viz-surface, var(--card));
+  box-shadow: 0 1px 0 color-mix(in srgb, currentColor 6%, transparent);
+}
+.ycodium-visualize-card[data-status="streaming"] {
+  border-color: var(--viz-accent, var(--primary));
+}
+.ycodium-visualize-card[data-status="missing"] {
+  border-color: var(--destructive);
+}
+.ycodium-visualize-accent {
+  height: 3px;
+  background: var(--viz-accent, var(--primary));
+}
+.ycodium-visualize-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 10px;
+  padding: 10px 12px 8px;
+}
+.ycodium-visualize-title {
+  flex: 1 1 10rem;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ycodium-visualize-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.ycodium-visualize-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 2px 8px;
+  border: 1px solid var(--viz-border, var(--border));
+  border-radius: 999px;
+  color: var(--viz-muted, var(--muted-foreground));
+  font-size: 11px;
+  letter-spacing: 0.02em;
+}
+.ycodium-visualize-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--viz-accent, var(--primary));
+}
+.ycodium-visualize-copy {
+  margin-left: auto;
+}
+.ycodium-visualize-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  padding: 0 12px 10px;
+  color: var(--viz-muted, var(--muted-foreground));
+  font-size: 12px;
+}
+.ycodium-visualize-path {
+  min-width: 0;
+  overflow: hidden;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ycodium-visualize-viewport {
+  min-width: 0;
+  border-top: 1px solid var(--viz-border, var(--border));
+  background: var(--viz-surface, var(--card));
+}
+.ycodium-visualize-viewport iframe {
+  display: block;
+  width: 100%;
+  min-height: 160px;
+  border: 0;
+  background: transparent;
+}
+.ycodium-visualize-card[data-mode="wide"] .ycodium-visualize-viewport iframe {
+  min-height: 220px;
+}
+.ycodium-visualize-note {
+  padding: 16px 14px 18px;
+  color: var(--viz-muted, var(--muted-foreground));
+}
+.ycodium-visualize-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+}
+`;var{jsx:a,jsxs:c,Fragment:dt}=window.__ycodiumPluginHost.jsxRuntime;function p(e){let t=h(e.bridge),[n,r]=y(!1),i=e.bridge.ui;f(()=>{r(!1)},[e.path]);let o={...e.colors===void 0?{}:{"--viz-fg":e.colors.foreground,"--viz-surface":e.colors.surface,"--viz-muted":e.colors.muted,"--viz-border":e.colors.border,"--viz-accent":e.colors.accent},colorScheme:e.colorScheme};return c("div",{className:"ycodium-visualize-ui","data-mode":e.mode,"data-status":e.status,"data-visualize-card":"",style:o,children:[a("style",{children:F}),c("article",{className:"ycodium-visualize-card","data-mode":e.mode,"data-status":e.status,children:[a("div",{className:"ycodium-visualize-accent"}),c("header",{className:"ycodium-visualize-header",children:[a("h3",{className:"ycodium-visualize-title",children:e.title}),c("div",{className:"ycodium-visualize-chips",children:[c("span",{className:"ycodium-visualize-chip",children:[a("span",{className:"ycodium-visualize-dot"}),t(X(e.status))]}),a("span",{className:"ycodium-visualize-chip",children:e.mode==="wide"?t("card.modeWide"):t("card.modeInline")})]}),e.path.length>0?m(i.Button,{type:"button",size:"xs",variant:"outline",className:"ycodium-visualize-copy","aria-label":t(n?"card.copied":"card.copyPath"),onClick:()=>{e.bridge.writeClipboard(e.path).then(()=>{r(!0)})}},t(n?"card.copied":"card.copyPath")):null]}),e.sizeBytes!==null||e.path.length>0?c("div",{className:"ycodium-visualize-meta",children:[e.sizeBytes!==null?a("span",{children:t("card.bytes",{count:e.sizeBytes})}):null,e.path.length>0?a("span",{className:"ycodium-visualize-path",children:t("card.path",{path:e.path})}):null]}):null,e.children]})]})}function X(e){switch(e){case"streaming":return"status.streaming";case"ready":return"status.ready";case"loading":return"status.loading";case"missing":return"status.missing";default:return e}}function M(e){return e.className.split(/\s+/u).includes("dark")||e.prefersDark?"dark":"light"}var k="ycodium-visualize:height",b="ycodium-visualize:stream";function O(e,t){if(typeof e!="object"||e===null)return null;let n=e;if(n.type!==k||n.token!==t)return null;let r=n.height;return typeof r!="number"||!Number.isFinite(r)||r<0?null:r}function D(e){return Math.min(960,Math.max(96,Math.round(e)))}var L=`
+:root {
+  color-scheme: light dark;
+  --background: var(--ycodium-viz-background, transparent);
+  --foreground: var(--ycodium-viz-foreground, light-dark(rgb(26 28 31), rgb(240 242 245)));
+  --card: var(--ycodium-viz-card, light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 6%)));
+  --card-foreground: var(--ycodium-viz-foreground, light-dark(rgb(26 28 31), rgb(240 242 245)));
+  --muted-foreground: var(--ycodium-viz-muted-foreground, light-dark(rgb(26 28 31 / 55%), rgb(240 242 245 / 55%)));
+  --border: var(--ycodium-viz-border, light-dark(rgb(0 0 0 / 10%), rgb(255 255 255 / 12%)));
+  --primary: var(--ycodium-viz-primary, light-dark(rgb(65 118 230), rgb(110 150 240)));
+  --primary-foreground: var(--ycodium-viz-primary-foreground, light-dark(rgb(255 255 255), rgb(13 13 13)));
+  --viz-series-1: var(--ycodium-viz-primary, light-dark(rgb(65 118 230), rgb(110 150 240)));
+  --viz-series-2: light-dark(rgb(226 116 26), rgb(245 152 66));
+  --viz-series-3: light-dark(rgb(16 148 82), rgb(72 196 130));
+  --viz-series-4: light-dark(rgb(146 94 220), rgb(176 132 240));
+  --viz-series-5: light-dark(rgb(212 66 84), rgb(240 110 126));
+  --viz-series-6: light-dark(rgb(160 138 22), rgb(206 182 70));
+  --radius: 8px;
+  --font-size-base: 14px;
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font: 400 var(--font-size-base)/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+h1, h2, h3 { margin: 0 0 0.5em; font-weight: 500; line-height: 1.3; }
+h1 { font-size: 1.3em; }
+h2 { font-size: 1.15em; }
+h3 { font-size: 1em; }
+p { margin: 0 0 0.75em; }
+a { color: var(--primary); }
+svg text { fill: var(--foreground); font-size: 12px; }
+.text-small { font-size: 12px; color: var(--muted-foreground); }
+
+.card {
+  background: var(--card);
+  color: var(--card-foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 14px;
+}
+
+.btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  cursor: pointer;
+}
+.btn:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); }
+.btn-primary,
+.btn[aria-pressed='true'],
+.btn[aria-selected='true'],
+.btn.is-selected {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: var(--primary-foreground);
+}
+.btn-ghost { border-color: transparent; }
+.btn:disabled { color: var(--muted-foreground); cursor: default; }
+
+.viz-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px;
+}
+.viz-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.viz-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+.viz-stat .viz-stat-label,
+.viz-stat > :first-child { font-size: 12px; color: var(--muted-foreground); }
+.viz-stat-value { font-size: 1.4em; font-weight: 500; line-height: 1.2; }
+.viz-badge {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--primary) 14%, transparent);
+  color: var(--primary);
+  font-size: 12px;
+}
+
+.form-label { display: block; font-size: 12px; color: var(--muted-foreground); margin-bottom: 4px; }
+.form-control, .form-select {
+  width: 100%;
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+}
+.form-check { display: flex; align-items: center; gap: 6px; }
+.form-check input { accent-color: var(--primary); }
+input[type='range'] { accent-color: var(--primary); }
+
+table { border-collapse: collapse; width: 100%; }
+th, td { text-align: left; padding: 5px 10px; border-bottom: 1px solid var(--border); }
+th { font-weight: 500; color: var(--muted-foreground); font-size: 12px; }
+.table-responsive { overflow-x: auto; }
+`;var ee=["https://cdnjs.cloudflare.com","https://cdn.jsdelivr.net","https://esm.sh","https://fonts.bunny.net","https://fonts.googleapis.com","https://fonts.gstatic.com","https://unpkg.com"],S=["blob:","data:",...ee].join(" "),te="'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' blob: data:",ne="'unsafe-inline' blob: data:",re=["default-src 'none'",`script-src ${te}`,`style-src ${ne}`,`img-src ${S}`,`font-src ${S}`,`media-src ${S}`,"worker-src blob:","connect-src blob: data:","frame-src 'none'","object-src 'none'","base-uri 'none'","form-action 'none'"].join("; ");function ie(e){let t=e.trim();return/[;{}<>]/u.test(t)?"":t}function I(e){let t=Object.entries(e.themeVars).map(([n,r])=>[n,ie(r)]).filter(([,n])=>n.length>0).map(([n,r])=>`--ycodium-viz-${n}: ${r};`).join(" ");return`<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="referrer" content="no-referrer">
+<meta http-equiv="Content-Security-Policy" content="${re}">
+<title>${se(e.title)}</title>
+<style>${L}
+:root { ${t} color-scheme: ${e.colorScheme}; }
+body { padding: 4px 2px; }</style>
+</head>
+<body>
+${e.fragment}
+<script>${oe(e.reportToken)}<\/script>
+</body>
+</html>
+`}function B(e){return I({...e,title:"preview",fragment:`<div id="ycodium-viz-stream-root"></div>
+<style>
+.ycodium-viz-enter { animation: ycodium-viz-enter 0.4s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
+@keyframes ycodium-viz-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .ycodium-viz-enter { animation: none; } }
+</style>
+<script>${ae(e.reportToken)}<\/script>`})}function oe(e){let t=x(e);return`
+(function () {
+  var post = function () {
+    parent.postMessage({
+      type: ${x(k)},
+      token: ${t},
+      height: document.documentElement.scrollHeight,
+    }, '*');
+  };
+  new ResizeObserver(post).observe(document.documentElement);
+  addEventListener('load', post);
+  post();
+})();
+`}function ae(e){return`
+(function () {
+  var root = document.getElementById('ycodium-viz-stream-root');
+  var token = ${x(e)};
+  function syncAttrs(cur, next) {
+    var i, attrs = cur.attributes;
+    for (i = attrs.length - 1; i >= 0; i--) {
+      if (!next.hasAttribute(attrs[i].name)) cur.removeAttribute(attrs[i].name);
+    }
+    attrs = next.attributes;
+    for (i = 0; i < attrs.length; i++) {
+      if (cur.getAttribute(attrs[i].name) !== attrs[i].value) cur.setAttribute(attrs[i].name, attrs[i].value);
+    }
+  }
+  function executable(node) {
+    var script = document.createElement('script');
+    for (var i = 0; i < node.attributes.length; i++) {
+      script.setAttribute(node.attributes[i].name, node.attributes[i].value);
+    }
+    script.textContent = node.textContent;
+    return script;
+  }
+  function sync(cur, next) {
+    var want = next.childNodes, have = cur.childNodes, i;
+    for (i = 0; i < want.length; i++) {
+      var target = want[i], live = have[i];
+      if (live === undefined) {
+        var added = target.nodeName === 'SCRIPT' ? executable(target) : target.cloneNode(true);
+        if (added.nodeType === 1 && added.nodeName !== 'SCRIPT') added.classList.add('ycodium-viz-enter');
+        cur.appendChild(added);
+        continue;
+      }
+      if (live.nodeType !== target.nodeType || live.nodeName !== target.nodeName) {
+        cur.replaceChild(target.cloneNode(true), live);
+        continue;
+      }
+      if (live.nodeType === 3 || live.nodeType === 8) {
+        if (live.nodeValue !== target.nodeValue) live.nodeValue = target.nodeValue;
+        continue;
+      }
+      if (live.nodeType === 1) {
+        syncAttrs(live, target);
+        sync(live, target);
+      }
+    }
+    while (cur.childNodes.length > want.length) cur.removeChild(cur.lastChild);
+  }
+  addEventListener('message', function (event) {
+    var data = event.data;
+    if (!data || data.type !== ${x(b)} || data.token !== token) return;
+    if (typeof data.fragment !== 'string') return;
+    var next = document.createElement('div');
+    next.innerHTML = data.fragment;
+    sync(root, next);
+  });
+})();
+`}function x(e){return JSON.stringify(e).replaceAll("<","\\u003c")}function se(e){return e.replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;")}function $(e){let t=e.colorScheme??j(),n=g(()=>I({fragment:e.fragment,title:e.title,themeVars:w(e.colors),colorScheme:t,reportToken:e.token}),[e.colors,e.fragment,e.title,e.token,t]);return a(U,{srcDoc:n,token:e.token,title:e.frameLabel,fragment:null})}function H(e){let t=j(),n=g(()=>B({themeVars:w(e.colors),colorScheme:t,reportToken:e.token}),[e.colors,e.token,t]);return a(U,{srcDoc:n,token:e.token,title:e.frameLabel,fragment:A(e.fragment)})}function U(e){let t=E(null),[n,r]=y(160);return f(()=>{let i=t.current;if(i===null)return;let o=d=>{if(d.source!==i.contentWindow)return;let l=O(d.data,e.token);l!==null&&r(D(l))};return window.addEventListener("message",o),()=>window.removeEventListener("message",o)},[e.token]),f(()=>{let i=t.current;if(i===null||e.fragment===null)return;let o=()=>{i.contentWindow?.postMessage({type:b,token:e.token,fragment:e.fragment},"*")};return i.addEventListener("load",o),o(),()=>i.removeEventListener("load",o)},[e.fragment,e.token]),a("div",{className:"ycodium-visualize-viewport",children:a("iframe",{ref:t,title:e.title,sandbox:"allow-scripts",srcDoc:e.srcDoc,style:{height:n}})})}function j(){let e=window.matchMedia?.("(prefers-color-scheme: dark)").matches??!1;return M({className:document.documentElement.className,prefersDark:e})}function C(e){let t=h(e.bridge),n=e.threadRef?.threadId??"",r=e.invocationId??"",i=ce(e.entry,e.details),o=v(i),d=e.bridge.commands.useQuery("card",{threadId:n,invocationId:r,path:""},{environmentId:e.environmentId}),l=e.bridge.commands.useQuery("card",{threadId:n,invocationId:o??"",path:o??""},{environmentId:e.environmentId}),s=R({invocationId:r,presentation:e.presentation,commandData:d.data,pathCommandData:l.data,confirmation:i}),u=e.colors;return s===null&&(d.isPending||o!==null&&l.isPending)?a(p,{bridge:e.bridge,title:t("status.loading"),mode:"inline",path:"",sizeBytes:null,status:"loading",...u===void 0?{}:{colors:u},...e.colorScheme===void 0?{}:{colorScheme:e.colorScheme},children:a("p",{className:"ycodium-visualize-note",children:t("card.loading")})}):s===null?a(p,{bridge:e.bridge,title:t("status.missing"),mode:"inline",path:"",sizeBytes:null,status:"missing",...u===void 0?{}:{colors:u},...e.colorScheme===void 0?{}:{colorScheme:e.colorScheme},children:a(ue,{bridge:e.bridge,title:t("status.missing"),description:t("card.missing")})}):a(p,{bridge:e.bridge,title:s.title,mode:s.mode,path:s.path,sizeBytes:s.sizeBytes,status:"ready",...u===void 0?{}:{colors:u},...e.colorScheme===void 0?{}:{colorScheme:e.colorScheme},children:a($,{fragment:s.fragment,title:s.title,token:s.invocationId.length>0?s.invocationId:r,frameLabel:t("card.frame",{title:s.title}),...u===void 0?{}:{colors:u},...e.colorScheme===void 0?{}:{colorScheme:e.colorScheme}})})}function G(e){return typeof e.argumentsText!="string"?null:a(de,{...e})}function de(e){let t=h(e.bridge),n=T(e.argumentsText),r=n===void 0?"":n.trim();return a(p,{bridge:e.bridge,title:t("status.streaming"),mode:"inline",path:"",sizeBytes:r.length===0?null:new TextEncoder().encode(r).length,status:"streaming",children:r.length===0?a("p",{className:"ycodium-visualize-note",children:t("dock.waiting")}):a(H,{fragment:r,token:e.threadId,frameLabel:t("card.frame",{title:t("status.streaming")})})})}function Y(e){return!_(document)||e.environmentId===void 0||e.threadId===void 0||e.threadId.length===0?null:a(le,{bridge:e.bridge,environmentId:e.environmentId,threadId:e.threadId})}function le(e){let t=e.bridge.commands.useSubscription("cards",{threadId:e.threadId},{environmentId:e.environmentId}),n=g(()=>V(t.data),[t.data]),r=g(()=>n.map(o=>({environmentId:e.environmentId,payload:{threadId:e.threadId,invocationId:o.invocationId}})),[n,e.environmentId,e.threadId]),i=e.bridge.commands.useQueryEach("card",r);return n.length===0?null:a("div",{className:"ycodium-visualize-stack",children:n.map((o,d)=>{let l=me(i.rows[d]?.data);return a(C,{bridge:e.bridge,environmentId:e.environmentId,invocationId:o.invocationId,entry:ge(o.invocationId),details:{files:[],inputFields:[]},...l===void 0?{}:{presentation:l},...e.threadId.length>0?{threadRef:{environmentId:e.environmentId,threadId:e.threadId}}:{}},o.invocationId)})})}function ue(e){let t=e.bridge.ui;return m(t.Alert,{variant:"error",layout:"inline"},m(t.AlertTitle,null,e.title),m(t.AlertDescription,null,e.description))}function ce(e,t){let n=e.toolIo?.output??t.output?.text??e.detail;return typeof n=="string"&&n.length>0?n:null}function me(e){return z(e)??void 0}function ge(e){return{id:e,label:"",displayFailed:!1}}function fe(e){return{views:{card(t){return a(C,{bridge:e,...t})}},slots:[{name:"conversation.input.dock",component(t){return a(G,{bridge:e,...t})}},{name:"conversation.chat.turnTail",component(t){return a(Y,{bridge:e,...t})}}]}}export{fe as default};