@volter-ai-dev/supercode-ui 0.1.22 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +9 -0
  2. package/components.d.ts +2 -0
  3. package/components.mjs +260 -109
  4. package/composer.mjs +19 -17
  5. package/controller.d.ts +20 -0
  6. package/controller.mjs +69 -12
  7. package/conversation.d.ts +2 -0
  8. package/conversation.mjs +192 -44
  9. package/core.mjs +3 -0
  10. package/embed.mjs +258 -109
  11. package/index.d.ts +8 -0
  12. package/messenger.mjs +258 -109
  13. package/package.json +1 -1
  14. package/sessions.mjs +15 -13
  15. package/styles.css +2 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volter-ai-dev/supercode-ui",
3
- "version": "0.1.22",
3
+ "version": "0.1.24",
4
4
  "type": "module",
5
5
  "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
6
6
  "exports": {
package/sessions.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/sessions.jsx
2
- import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState2 } from "preact/hooks";
2
+ import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState3 } from "preact/hooks";
3
3
 
4
4
  // core.mjs
5
5
  var HARNESS_NAMES = Object.freeze({
@@ -82,8 +82,8 @@ function filterSessions(rows, query) {
82
82
  }
83
83
 
84
84
  // src/conversation.jsx
85
- import { Fragment as Fragment2 } from "preact";
86
- import { useEffect as useEffect2, useId, useLayoutEffect, useRef as useRef2, useState } from "preact/hooks";
85
+ import { Fragment as Fragment3 } from "preact";
86
+ import { useEffect as useEffect3, useId, useLayoutEffect, useRef as useRef3, useState as useState2 } from "preact/hooks";
87
87
 
88
88
  // src/markdown.jsx
89
89
  import MarkdownIt from "markdown-it";
@@ -193,11 +193,13 @@ function UiIcon({ name, size = 16, class: className = "" }) {
193
193
  }
194
194
 
195
195
  // src/context.jsx
196
- import { jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
196
+ import { useEffect as useEffect2, useRef as useRef2, useState } from "preact/hooks";
197
+ import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "preact/jsx-runtime";
197
198
  var MAX_IMAGE_BYTES = 5 * 1024 * 1024;
199
+ var MAX_RESOLVED_IMAGE_BYTES = 16 * 1024 * 1024;
198
200
 
199
201
  // src/conversation.jsx
200
- import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
202
+ import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
201
203
  function LoadingStatus({ state, compact = false }) {
202
204
  const copy = {
203
205
  connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
@@ -216,7 +218,7 @@ function LoadingStatus({ state, compact = false }) {
216
218
  }
217
219
 
218
220
  // src/logo.jsx
219
- import { useEffect as useEffect3 } from "preact/hooks";
221
+ import { useEffect as useEffect4 } from "preact/hooks";
220
222
  import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
221
223
  var LOGOS = {
222
224
  "claude-code": {
@@ -264,7 +266,7 @@ var LOGOS = {
264
266
  };
265
267
  function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
266
268
  const logo = LOGOS[id];
267
- useEffect3(() => {
269
+ useEffect4(() => {
268
270
  if (!logo) onMissingLogo?.(id);
269
271
  }, [id, logo, onMissingLogo]);
270
272
  if (!logo) return null;
@@ -296,21 +298,21 @@ function SessionRow({ row, state, onOpen }) {
296
298
  }
297
299
  function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
298
300
  const remembered = sessionListMemory.get(memoryKey) ?? { query: "", top: 0 };
299
- const [query, setQuery] = useState2(remembered.query);
300
- const [loadingMore, setLoadingMore] = useState2(false);
301
- const root = useRef3(null);
302
- const rowScroller = useRef3(null);
301
+ const [query, setQuery] = useState3(remembered.query);
302
+ const [loadingMore, setLoadingMore] = useState3(false);
303
+ const root = useRef4(null);
304
+ const rowScroller = useRef4(null);
303
305
  const rows = filterSessions(state.sessions, query);
304
306
  const Row = components.SessionRow ?? SessionRow;
305
307
  useLayoutEffect2(() => {
306
308
  if (rowScroller.current) rowScroller.current.scrollTop = remembered.top;
307
309
  }, [memoryKey]);
308
- useEffect4(() => {
310
+ useEffect5(() => {
309
311
  if (!focusKey || !root.current) return;
310
312
  const target = focusKey === "@new" ? root.current.querySelector('[data-list-focus="new"]') : [...root.current.querySelectorAll("[data-session-key]")].find((element) => element.dataset.sessionKey === focusKey);
311
313
  (target ?? root.current.querySelector("input,button"))?.focus({ preventScroll: true });
312
314
  }, [focusKey, rows.length]);
313
- useEffect4(() => {
315
+ useEffect5(() => {
314
316
  if (loadingMore) setLoadingMore(false);
315
317
  }, [state.error, state.history.hasMoreSessions, state.sessions.length]);
316
318
  const loadMore = () => {
package/styles.css CHANGED
@@ -175,7 +175,8 @@
175
175
  .scui-attach { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--scui-muted) }.scui-attach:hover:not(:disabled) { background:var(--scui-fill); color:var(--scui-fg) }
176
176
  .scui-compose-context { display:flex; gap:5px; margin-bottom:6px; overflow-x:auto; scrollbar-width:thin }.scui-compose-context > span { display:flex; flex:0 0 auto; max-width:210px; align-items:center; gap:5px; padding:4px 5px 4px 7px; border:1px solid var(--scui-border); border-radius:999px; background:var(--scui-fill); font-size:10px }.scui-compose-context strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-compose-context button { display:grid; width:18px; height:18px; padding:0; place-items:center; border:0; border-radius:50%; background:transparent }.scui-compose-context button:hover { background:color-mix(in srgb,var(--scui-fg) 9%,transparent) }.scui-context-error { display:block; margin:0 2px 6px; color:var(--scui-danger) }
177
177
  .scui-compose-images { display:flex; gap:6px; margin-bottom:6px; overflow-x:auto; scrollbar-width:thin }.scui-compose-images > span { position:relative; display:grid; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-fill); place-items:center }.scui-compose-images img { width:100%; height:100%; object-fit:cover }.scui-compose-images strong { position:absolute; right:2px; bottom:2px; left:2px; overflow:hidden; padding:2px 3px; border-radius:4px; background:rgba(0,0,0,.65); color:#fff; font-size:8px; font-weight:500; text-overflow:ellipsis; white-space:nowrap }.scui-compose-images button { position:absolute; z-index:1; top:2px; right:2px; display:grid; width:19px; height:19px; padding:0; border:1px solid rgba(255,255,255,.32); border-radius:50%; background:rgba(0,0,0,.68); color:#fff; place-items:center; cursor:pointer }
178
- .scui-message-images { display:flex; max-width:280px; gap:5px; margin-bottom:6px; flex-wrap:wrap }.scui-message-images img { display:block; width:auto; min-width:72px; max-width:100%; height:auto; max-height:210px; border:1px solid var(--scui-border); border-radius:8px; object-fit:contain; background:var(--scui-fill) }.scui-message-images > span { display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid var(--scui-border); border-radius:7px; color:var(--scui-muted); font-size:10px }
178
+ .scui-message-images { display:flex; max-width:280px; gap:5px; margin-bottom:6px; flex-wrap:wrap }.scui-message-images > button { display:block; max-width:100%; padding:0; overflow:hidden; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-fill); cursor:zoom-in }.scui-message-images > button:hover,.scui-message-images > button:focus-visible { border-color:var(--scui-border-strong); box-shadow:0 0 0 2px color-mix(in srgb,var(--scui-accent) 16%,transparent) }.scui-message-images img { display:block; width:auto; min-width:72px; max-width:100%; height:auto; max-height:210px; object-fit:contain }.scui-message-images > span,.scui-message-images > button[data-lazy="true"] { display:flex; align-items:center; gap:6px; padding:5px 7px; border:1px solid var(--scui-border); border-radius:7px; color:var(--scui-muted); font-size:10px }.scui-message-images > button[data-lazy="true"] { text-align:left; cursor:pointer }.scui-message-images > span > span,.scui-message-images > button[data-lazy="true"] > span { display:grid; min-width:0 }.scui-message-images > span strong,.scui-message-images > button[data-lazy="true"] strong { max-width:180px; overflow:hidden; color:var(--scui-fg); font-size:10px; font-weight:550; text-overflow:ellipsis; white-space:nowrap }.scui-message-images > span small,.scui-message-images > button[data-lazy="true"] small { color:var(--scui-muted); font-size:8.5px }
179
+ .scui-image-viewer { box-sizing:border-box; width:min(620px,calc(100vw - 16px)); max-width:none; height:min(620px,calc(100dvh - 16px)); max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid var(--scui-border-strong); border-radius:12px; background:var(--scui-bg); color:var(--scui-fg); box-shadow:0 18px 50px rgba(0,0,0,.28) }.scui-image-viewer::backdrop { background:rgba(10,12,15,.68); backdrop-filter:blur(2px) }.scui-image-viewer > header { display:flex; min-height:43px; align-items:center; gap:8px; padding:0 6px 0 11px; border-bottom:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-image-viewer > header > span { display:grid; min-width:0; flex:1 }.scui-image-viewer > header strong { overflow:hidden; font-size:11px; font-weight:600; text-overflow:ellipsis; white-space:nowrap }.scui-image-viewer > header small { color:var(--scui-muted); font-size:9px }.scui-image-viewer nav { display:flex; flex:none; gap:2px }.scui-image-viewer nav button,.scui-image-viewer nav a { display:grid; box-sizing:border-box; width:31px; height:31px; padding:0; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--scui-muted); cursor:pointer }.scui-image-viewer nav button:hover,.scui-image-viewer nav button:focus-visible,.scui-image-viewer nav a:hover,.scui-image-viewer nav a:focus-visible { background:var(--scui-fill); color:var(--scui-fg) }.scui-image-viewer nav button[data-status="copied"] { color:var(--scui-positive) }.scui-image-viewer nav button[data-status="failed"] { color:var(--scui-danger) }.scui-image-viewer figure { position:relative; display:grid; box-sizing:border-box; height:calc(100% - 43px); margin:0; padding:12px; overflow:hidden; place-items:center; background:color-mix(in srgb,var(--scui-fg) 4%,var(--scui-bg)) }.scui-image-viewer figure > img { display:block; max-width:100%; max-height:100%; object-fit:contain }.scui-image-viewer figure > button { position:absolute; top:50%; display:grid; width:34px; height:34px; padding:0; place-items:center; border:1px solid color-mix(in srgb,var(--scui-fg) 18%,transparent); border-radius:50%; background:color-mix(in srgb,var(--scui-bg) 82%,transparent); color:var(--scui-fg); box-shadow:0 2px 8px rgba(0,0,0,.16); cursor:pointer; transform:translateY(-50%); backdrop-filter:blur(5px) }.scui-image-viewer figure > button:hover,.scui-image-viewer figure > button:focus-visible { background:var(--scui-bg) }.scui-image-previous { left:10px }.scui-image-previous svg { transform:rotate(180deg) }.scui-image-next { right:10px }.scui-image-resolution { display:grid; max-width:280px; justify-items:center; gap:7px; color:var(--scui-muted); text-align:center }.scui-image-resolution strong { color:var(--scui-fg); font-size:12px }.scui-image-resolution small { font-size:10px }.scui-image-resolution > button { position:static; width:auto; height:auto; padding:6px 10px; border:1px solid var(--scui-border-strong); border-radius:7px; background:var(--scui-bg); color:var(--scui-fg); transform:none; backdrop-filter:none }
179
180
  .scui-send,.scui-stop { display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:8px; background:var(--scui-accent); color:#fff; cursor:pointer }.scui-stop { background:var(--scui-danger) }.scui-send:disabled,.scui-stop:disabled { opacity:.4; cursor:default }.scui-control-spinner { box-sizing:border-box; width:13px; height:13px; border:1.5px solid currentColor; border-right-color:transparent; border-radius:50%; animation:scui-spin .75s linear infinite }
180
181
  .scui-queue { display:grid; gap:4px; max-height:85px; margin-bottom:6px; overflow:auto; font-size:10.5px }.scui-queue > span { display:flex; gap:6px; padding:4px 6px; border-radius:5px; background:var(--scui-fill) }.scui-queue > span > span { display:grid; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }.scui-queue small { color:var(--scui-muted) }.scui-queue > span button { margin-left:auto; border:0; background:transparent }
181
182
  .scui-harness-picker { display:flex; align-items:center; gap:7px; margin-bottom:7px }.scui-harness-picker select { margin-left:auto; max-width:55%; padding:4px; border:1px solid var(--scui-border); border-radius:6px; background:var(--scui-bg); color:var(--scui-fg) }