@volter-ai-dev/supercode-ui 0.1.21 → 0.1.23

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 (12) hide show
  1. package/README.md +8 -2
  2. package/components.d.ts +2 -0
  3. package/components.mjs +261 -125
  4. package/composer.mjs +49 -26
  5. package/conversation.d.ts +2 -0
  6. package/conversation.mjs +136 -44
  7. package/embed.mjs +259 -125
  8. package/index.d.ts +2 -0
  9. package/messenger.mjs +259 -125
  10. package/package.json +1 -1
  11. package/sessions.mjs +14 -13
  12. package/styles.css +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volter-ai-dev/supercode-ui",
3
- "version": "0.1.21",
3
+ "version": "0.1.23",
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,12 @@ 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;
198
199
 
199
200
  // src/conversation.jsx
200
- import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
201
+ import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs3 } from "preact/jsx-runtime";
201
202
  function LoadingStatus({ state, compact = false }) {
202
203
  const copy = {
203
204
  connecting: ["Connecting to coding agents", "Checking installed harnesses and capabilities.", 0],
@@ -216,7 +217,7 @@ function LoadingStatus({ state, compact = false }) {
216
217
  }
217
218
 
218
219
  // src/logo.jsx
219
- import { useEffect as useEffect3 } from "preact/hooks";
220
+ import { useEffect as useEffect4 } from "preact/hooks";
220
221
  import { jsx as jsx5, jsxs as jsxs4 } from "preact/jsx-runtime";
221
222
  var LOGOS = {
222
223
  "claude-code": {
@@ -264,7 +265,7 @@ var LOGOS = {
264
265
  };
265
266
  function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
266
267
  const logo = LOGOS[id];
267
- useEffect3(() => {
268
+ useEffect4(() => {
268
269
  if (!logo) onMissingLogo?.(id);
269
270
  }, [id, logo, onMissingLogo]);
270
271
  if (!logo) return null;
@@ -296,21 +297,21 @@ function SessionRow({ row, state, onOpen }) {
296
297
  }
297
298
  function SessionList({ state, adapter, onOpen, onNew, onClose, components = {}, labels = DEFAULT_LABELS, focusKey = null, memoryKey = state.workspace || "@default" }) {
298
299
  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);
300
+ const [query, setQuery] = useState3(remembered.query);
301
+ const [loadingMore, setLoadingMore] = useState3(false);
302
+ const root = useRef4(null);
303
+ const rowScroller = useRef4(null);
303
304
  const rows = filterSessions(state.sessions, query);
304
305
  const Row = components.SessionRow ?? SessionRow;
305
306
  useLayoutEffect2(() => {
306
307
  if (rowScroller.current) rowScroller.current.scrollTop = remembered.top;
307
308
  }, [memoryKey]);
308
- useEffect4(() => {
309
+ useEffect5(() => {
309
310
  if (!focusKey || !root.current) return;
310
311
  const target = focusKey === "@new" ? root.current.querySelector('[data-list-focus="new"]') : [...root.current.querySelectorAll("[data-session-key]")].find((element) => element.dataset.sessionKey === focusKey);
311
312
  (target ?? root.current.querySelector("input,button"))?.focus({ preventScroll: true });
312
313
  }, [focusKey, rows.length]);
313
- useEffect4(() => {
314
+ useEffect5(() => {
314
315
  if (loadingMore) setLoadingMore(false);
315
316
  }, [state.error, state.history.hasMoreSessions, state.sessions.length]);
316
317
  const loadMore = () => {
package/styles.css CHANGED
@@ -171,10 +171,12 @@
171
171
  .scui-continuation { display:flex; align-items:center; gap:8px; padding:7px 9px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }.scui-continuation > span { display:grid; flex:1 }.scui-continuation small { color:var(--scui-muted); font-size:10px }.scui-continuation button { padding:5px 8px; border:1px solid var(--scui-accent); border-radius:7px; background:transparent; color:var(--scui-accent); cursor:pointer }
172
172
  .scui-compose { flex:none; padding:8px; border-top:1px solid var(--scui-border); background:var(--scui-bg-raised) }
173
173
  .scui-envelope { display:flex; align-items:flex-end; gap:7px; padding:7px; border:1px solid var(--scui-border-strong); border-radius:16px; background:var(--scui-bg) }.scui-envelope textarea { flex:1; min-width:0; min-height:34px; max-height:150px; resize:none; overflow-y:hidden; border:0; outline:0; background:transparent; color:var(--scui-fg) }.scui-envelope > span { display:flex; gap:4px }
174
+ .scui-envelope.scui-drop-target { border-color:var(--scui-accent); background:color-mix(in srgb,var(--scui-accent) 7%,var(--scui-bg)); box-shadow:0 0 0 2px color-mix(in srgb,var(--scui-accent) 16%,transparent) }
174
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) }
175
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) }
176
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 }
177
- .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 { 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 > span > span { display:grid; min-width:0 }.scui-message-images > span 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 { 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 }
178
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 }
179
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 }
180
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) }