@volter-ai-dev/supercode-ui 0.1.26 → 0.1.28

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 (6) hide show
  1. package/components.mjs +17 -9
  2. package/embed.mjs +17 -9
  3. package/messenger.mjs +17 -9
  4. package/package.json +1 -1
  5. package/sessions.mjs +17 -9
  6. package/styles.css +3 -2
package/components.mjs CHANGED
@@ -1992,29 +1992,37 @@ import { useEffect as useEffect7, useId as useId2, useMemo as useMemo2, useRef a
1992
1992
  import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState4 } from "preact/hooks";
1993
1993
  import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
1994
1994
  var sessionListMemory = /* @__PURE__ */ new Map();
1995
- function compactSessionPath(value, maxCharacters = 34) {
1996
- const segments = String(value ?? "").replaceAll("\\", "/").split("/").filter((segment) => segment && segment !== "~");
1997
- const complete = segments.join("/");
1998
- if (complete.length <= maxCharacters) return complete;
1999
- if (segments.length < 2) return `${complete.slice(0, maxCharacters - 1)}\u2026`;
2000
- return `${segments[0]}/\u2026/${segments.at(-1)}`;
1995
+ function sessionPathParts(value) {
1996
+ const complete = String(value ?? "").replaceAll("\\", "/");
1997
+ const boundary = complete.lastIndexOf("/");
1998
+ if (boundary < 0) return { complete, leading: complete, separator: "", trailing: "" };
1999
+ return {
2000
+ complete,
2001
+ leading: complete.slice(0, boundary),
2002
+ separator: "/",
2003
+ trailing: complete.slice(boundary + 1)
2004
+ };
2001
2005
  }
2002
2006
  function SessionRow({ row, state, onOpen }) {
2003
2007
  const activity = sessionActivity(state, row);
2004
2008
  const attention = state.attention.find((item) => item.key === row.key);
2005
2009
  const title = sessionDisplayName(row);
2006
- const path = compactSessionPath(row.cwd);
2010
+ const path = sessionPathParts(row.cwd);
2007
2011
  const preview = row.preview || attention?.preview || "";
2008
2012
  const unreadCount = attention?.unreadCount ?? 0;
2009
2013
  const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
2010
- return /* @__PURE__ */ jsxs6("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path ? ` \xB7 ${path}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
2014
+ return /* @__PURE__ */ jsxs6("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
2011
2015
  /* @__PURE__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
2012
2016
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-copy", children: [
2013
2017
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-title", children: [
2014
2018
  /* @__PURE__ */ jsx7("strong", { children: title }),
2015
2019
  row.age ? /* @__PURE__ */ jsx7("time", { children: row.age }) : null
2016
2020
  ] }),
2017
- path ? /* @__PURE__ */ jsx7("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
2021
+ path.complete ? /* @__PURE__ */ jsxs6("small", { class: "scui-session-path", title: row.cwd, children: [
2022
+ /* @__PURE__ */ jsx7("span", { class: "scui-session-path-leading", children: path.leading }),
2023
+ path.separator ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-separator", children: path.separator }) : null,
2024
+ path.trailing ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
2025
+ ] }) : null,
2018
2026
  preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { class: "scui-session-preview", children: [
2019
2027
  preview ? /* @__PURE__ */ jsx7("small", { children: preview }) : null,
2020
2028
  unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
package/embed.mjs CHANGED
@@ -1971,29 +1971,37 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
1971
1971
  import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState4 } from "preact/hooks";
1972
1972
  import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
1973
1973
  var sessionListMemory = /* @__PURE__ */ new Map();
1974
- function compactSessionPath(value, maxCharacters = 34) {
1975
- const segments = String(value ?? "").replaceAll("\\", "/").split("/").filter((segment) => segment && segment !== "~");
1976
- const complete = segments.join("/");
1977
- if (complete.length <= maxCharacters) return complete;
1978
- if (segments.length < 2) return `${complete.slice(0, maxCharacters - 1)}\u2026`;
1979
- return `${segments[0]}/\u2026/${segments.at(-1)}`;
1974
+ function sessionPathParts(value) {
1975
+ const complete = String(value ?? "").replaceAll("\\", "/");
1976
+ const boundary = complete.lastIndexOf("/");
1977
+ if (boundary < 0) return { complete, leading: complete, separator: "", trailing: "" };
1978
+ return {
1979
+ complete,
1980
+ leading: complete.slice(0, boundary),
1981
+ separator: "/",
1982
+ trailing: complete.slice(boundary + 1)
1983
+ };
1980
1984
  }
1981
1985
  function SessionRow({ row, state, onOpen }) {
1982
1986
  const activity = sessionActivity(state, row);
1983
1987
  const attention = state.attention.find((item) => item.key === row.key);
1984
1988
  const title = sessionDisplayName(row);
1985
- const path = compactSessionPath(row.cwd);
1989
+ const path = sessionPathParts(row.cwd);
1986
1990
  const preview = row.preview || attention?.preview || "";
1987
1991
  const unreadCount = attention?.unreadCount ?? 0;
1988
1992
  const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
1989
- return /* @__PURE__ */ jsxs6("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path ? ` \xB7 ${path}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
1993
+ return /* @__PURE__ */ jsxs6("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
1990
1994
  /* @__PURE__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
1991
1995
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-copy", children: [
1992
1996
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-title", children: [
1993
1997
  /* @__PURE__ */ jsx7("strong", { children: title }),
1994
1998
  row.age ? /* @__PURE__ */ jsx7("time", { children: row.age }) : null
1995
1999
  ] }),
1996
- path ? /* @__PURE__ */ jsx7("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
2000
+ path.complete ? /* @__PURE__ */ jsxs6("small", { class: "scui-session-path", title: row.cwd, children: [
2001
+ /* @__PURE__ */ jsx7("span", { class: "scui-session-path-leading", children: path.leading }),
2002
+ path.separator ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-separator", children: path.separator }) : null,
2003
+ path.trailing ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
2004
+ ] }) : null,
1997
2005
  preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { class: "scui-session-preview", children: [
1998
2006
  preview ? /* @__PURE__ */ jsx7("small", { children: preview }) : null,
1999
2007
  unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
package/messenger.mjs CHANGED
@@ -1968,29 +1968,37 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
1968
1968
  import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef5, useState as useState4 } from "preact/hooks";
1969
1969
  import { jsx as jsx7, jsxs as jsxs6 } from "preact/jsx-runtime";
1970
1970
  var sessionListMemory = /* @__PURE__ */ new Map();
1971
- function compactSessionPath(value, maxCharacters = 34) {
1972
- const segments = String(value ?? "").replaceAll("\\", "/").split("/").filter((segment) => segment && segment !== "~");
1973
- const complete = segments.join("/");
1974
- if (complete.length <= maxCharacters) return complete;
1975
- if (segments.length < 2) return `${complete.slice(0, maxCharacters - 1)}\u2026`;
1976
- return `${segments[0]}/\u2026/${segments.at(-1)}`;
1971
+ function sessionPathParts(value) {
1972
+ const complete = String(value ?? "").replaceAll("\\", "/");
1973
+ const boundary = complete.lastIndexOf("/");
1974
+ if (boundary < 0) return { complete, leading: complete, separator: "", trailing: "" };
1975
+ return {
1976
+ complete,
1977
+ leading: complete.slice(0, boundary),
1978
+ separator: "/",
1979
+ trailing: complete.slice(boundary + 1)
1980
+ };
1977
1981
  }
1978
1982
  function SessionRow({ row, state, onOpen }) {
1979
1983
  const activity = sessionActivity(state, row);
1980
1984
  const attention = state.attention.find((item) => item.key === row.key);
1981
1985
  const title = sessionDisplayName(row);
1982
- const path = compactSessionPath(row.cwd);
1986
+ const path = sessionPathParts(row.cwd);
1983
1987
  const preview = row.preview || attention?.preview || "";
1984
1988
  const unreadCount = attention?.unreadCount ?? 0;
1985
1989
  const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
1986
- return /* @__PURE__ */ jsxs6("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path ? ` \xB7 ${path}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
1990
+ return /* @__PURE__ */ jsxs6("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
1987
1991
  /* @__PURE__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
1988
1992
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-copy", children: [
1989
1993
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-title", children: [
1990
1994
  /* @__PURE__ */ jsx7("strong", { children: title }),
1991
1995
  row.age ? /* @__PURE__ */ jsx7("time", { children: row.age }) : null
1992
1996
  ] }),
1993
- path ? /* @__PURE__ */ jsx7("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
1997
+ path.complete ? /* @__PURE__ */ jsxs6("small", { class: "scui-session-path", title: row.cwd, children: [
1998
+ /* @__PURE__ */ jsx7("span", { class: "scui-session-path-leading", children: path.leading }),
1999
+ path.separator ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-separator", children: path.separator }) : null,
2000
+ path.trailing ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
2001
+ ] }) : null,
1994
2002
  preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { class: "scui-session-preview", children: [
1995
2003
  preview ? /* @__PURE__ */ jsx7("small", { children: preview }) : null,
1996
2004
  unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volter-ai-dev/supercode-ui",
3
- "version": "0.1.26",
3
+ "version": "0.1.28",
4
4
  "type": "module",
5
5
  "description": "Composable default UI kit for Supercode-powered coding-agent experiences",
6
6
  "exports": {
package/sessions.mjs CHANGED
@@ -279,29 +279,37 @@ function HarnessLogo({ id, activity, size = 28, onMissingLogo }) {
279
279
  // src/sessions.jsx
280
280
  import { jsx as jsx6, jsxs as jsxs5 } from "preact/jsx-runtime";
281
281
  var sessionListMemory = /* @__PURE__ */ new Map();
282
- function compactSessionPath(value, maxCharacters = 34) {
283
- const segments = String(value ?? "").replaceAll("\\", "/").split("/").filter((segment) => segment && segment !== "~");
284
- const complete = segments.join("/");
285
- if (complete.length <= maxCharacters) return complete;
286
- if (segments.length < 2) return `${complete.slice(0, maxCharacters - 1)}\u2026`;
287
- return `${segments[0]}/\u2026/${segments.at(-1)}`;
282
+ function sessionPathParts(value) {
283
+ const complete = String(value ?? "").replaceAll("\\", "/");
284
+ const boundary = complete.lastIndexOf("/");
285
+ if (boundary < 0) return { complete, leading: complete, separator: "", trailing: "" };
286
+ return {
287
+ complete,
288
+ leading: complete.slice(0, boundary),
289
+ separator: "/",
290
+ trailing: complete.slice(boundary + 1)
291
+ };
288
292
  }
289
293
  function SessionRow({ row, state, onOpen }) {
290
294
  const activity = sessionActivity(state, row);
291
295
  const attention = state.attention.find((item) => item.key === row.key);
292
296
  const title = sessionDisplayName(row);
293
- const path = compactSessionPath(row.cwd);
297
+ const path = sessionPathParts(row.cwd);
294
298
  const preview = row.preview || attention?.preview || "";
295
299
  const unreadCount = attention?.unreadCount ?? 0;
296
300
  const unreadLabel = unreadCount > 99 ? "99+" : String(unreadCount);
297
- return /* @__PURE__ */ jsxs5("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path ? ` \xB7 ${path}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
301
+ return /* @__PURE__ */ jsxs5("button", { class: "scui-session", "data-active": row.active, "data-activity": activity, "data-session-key": row.key, type: "button", "aria-label": `${title} \xB7 ${harnessDisplayName(row.harness)}${path.complete ? ` \xB7 ${path.complete}` : ""}${preview ? ` \xB7 ${preview}` : ""}${unreadCount ? ` \xB7 ${unreadCount} unread` : ""}${row.age ? ` \xB7 ${row.age}` : ""}`, "aria-current": row.active ? "true" : void 0, onClick: () => onOpen(row), children: [
298
302
  /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity, size: 34 }),
299
303
  /* @__PURE__ */ jsxs5("span", { class: "scui-session-copy", children: [
300
304
  /* @__PURE__ */ jsxs5("span", { class: "scui-session-title", children: [
301
305
  /* @__PURE__ */ jsx6("strong", { children: title }),
302
306
  row.age ? /* @__PURE__ */ jsx6("time", { children: row.age }) : null
303
307
  ] }),
304
- path ? /* @__PURE__ */ jsx6("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
308
+ path.complete ? /* @__PURE__ */ jsxs5("small", { class: "scui-session-path", title: row.cwd, children: [
309
+ /* @__PURE__ */ jsx6("span", { class: "scui-session-path-leading", children: path.leading }),
310
+ path.separator ? /* @__PURE__ */ jsx6("span", { class: "scui-session-path-separator", children: path.separator }) : null,
311
+ path.trailing ? /* @__PURE__ */ jsx6("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
312
+ ] }) : null,
305
313
  preview || unreadCount ? /* @__PURE__ */ jsxs5("span", { class: "scui-session-preview", children: [
306
314
  preview ? /* @__PURE__ */ jsx6("small", { children: preview }) : null,
307
315
  unreadCount ? /* @__PURE__ */ jsx6("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
package/styles.css CHANGED
@@ -96,9 +96,10 @@
96
96
  .scui-session:hover,.scui-session[data-active="true"] { background:var(--scui-fill) }
97
97
  .scui-session-copy { display:grid; flex:1; min-width:0; gap:1px }
98
98
  .scui-session-copy > span { display:flex; align-items:baseline; gap:7px; min-width:0 }
99
- .scui-session-copy strong,.scui-session-copy span > small,.scui-session-path { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
99
+ .scui-session-copy strong,.scui-session-copy span > small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
100
100
  .scui-session-copy strong { flex:1; font-size:12.5px }.scui-session-title time { flex:none; color:var(--scui-muted); font-size:10px }
101
- .scui-session-path { min-width:0; color:var(--scui-muted); font-size:9.5px }
101
+ .scui-session-path { display:flex; min-width:0; overflow:hidden; color:var(--scui-muted); font-size:9.5px; white-space:nowrap }
102
+ .scui-session-path-leading { flex:0 1 auto; overflow:hidden; text-overflow:ellipsis }.scui-session-path-separator { flex:none }.scui-session-path-trailing { flex:none; max-width:58%; overflow:hidden; direction:rtl; text-align:left; text-overflow:ellipsis; unicode-bidi:plaintext }
102
103
  .scui-session-preview small { flex:1; min-width:0; color:var(--scui-muted); font-size:10.5px }.scui-session-preview b { display:grid; flex:none; min-width:16px; height:16px; padding:0 4px; place-items:center; border-radius:8px; background:var(--scui-accent); color:var(--scui-bg); font-size:9px; line-height:16px }
103
104
  .scui-session-copy em { overflow:hidden; color:var(--scui-danger); font-size:10px; font-style:normal; text-overflow:ellipsis; white-space:nowrap }
104
105
  .scui-load { display:block; margin:7px auto; padding:5px 10px; border:1px solid var(--scui-border); border-radius:8px; background:var(--scui-bg-raised); color:var(--scui-muted); cursor:pointer }.scui-load:disabled { opacity:.65; cursor:default }