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

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 +15 -9
  2. package/embed.mjs +15 -9
  3. package/messenger.mjs +15 -9
  4. package/package.json +1 -1
  5. package/sessions.mjs +15 -9
  6. package/styles.css +3 -2
package/components.mjs CHANGED
@@ -1992,29 +1992,35 @@ 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, trailing: "" };
1999
+ return {
2000
+ complete,
2001
+ leading: complete.slice(0, boundary),
2002
+ trailing: complete.slice(boundary)
2003
+ };
2001
2004
  }
2002
2005
  function SessionRow({ row, state, onOpen }) {
2003
2006
  const activity = sessionActivity(state, row);
2004
2007
  const attention = state.attention.find((item) => item.key === row.key);
2005
2008
  const title = sessionDisplayName(row);
2006
- const path = compactSessionPath(row.cwd);
2009
+ const path = sessionPathParts(row.cwd);
2007
2010
  const preview = row.preview || attention?.preview || "";
2008
2011
  const unreadCount = attention?.unreadCount ?? 0;
2009
2012
  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: [
2013
+ 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
2014
  /* @__PURE__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
2012
2015
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-copy", children: [
2013
2016
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-title", children: [
2014
2017
  /* @__PURE__ */ jsx7("strong", { children: title }),
2015
2018
  row.age ? /* @__PURE__ */ jsx7("time", { children: row.age }) : null
2016
2019
  ] }),
2017
- path ? /* @__PURE__ */ jsx7("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
2020
+ path.complete ? /* @__PURE__ */ jsxs6("small", { class: "scui-session-path", title: row.cwd, children: [
2021
+ /* @__PURE__ */ jsx7("span", { class: "scui-session-path-leading", children: path.leading }),
2022
+ path.trailing ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
2023
+ ] }) : null,
2018
2024
  preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { class: "scui-session-preview", children: [
2019
2025
  preview ? /* @__PURE__ */ jsx7("small", { children: preview }) : null,
2020
2026
  unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
package/embed.mjs CHANGED
@@ -1971,29 +1971,35 @@ 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, trailing: "" };
1978
+ return {
1979
+ complete,
1980
+ leading: complete.slice(0, boundary),
1981
+ trailing: complete.slice(boundary)
1982
+ };
1980
1983
  }
1981
1984
  function SessionRow({ row, state, onOpen }) {
1982
1985
  const activity = sessionActivity(state, row);
1983
1986
  const attention = state.attention.find((item) => item.key === row.key);
1984
1987
  const title = sessionDisplayName(row);
1985
- const path = compactSessionPath(row.cwd);
1988
+ const path = sessionPathParts(row.cwd);
1986
1989
  const preview = row.preview || attention?.preview || "";
1987
1990
  const unreadCount = attention?.unreadCount ?? 0;
1988
1991
  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: [
1992
+ 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
1993
  /* @__PURE__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
1991
1994
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-copy", children: [
1992
1995
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-title", children: [
1993
1996
  /* @__PURE__ */ jsx7("strong", { children: title }),
1994
1997
  row.age ? /* @__PURE__ */ jsx7("time", { children: row.age }) : null
1995
1998
  ] }),
1996
- path ? /* @__PURE__ */ jsx7("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
1999
+ path.complete ? /* @__PURE__ */ jsxs6("small", { class: "scui-session-path", title: row.cwd, children: [
2000
+ /* @__PURE__ */ jsx7("span", { class: "scui-session-path-leading", children: path.leading }),
2001
+ path.trailing ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
2002
+ ] }) : null,
1997
2003
  preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { class: "scui-session-preview", children: [
1998
2004
  preview ? /* @__PURE__ */ jsx7("small", { children: preview }) : null,
1999
2005
  unreadCount ? /* @__PURE__ */ jsx7("b", { "aria-label": `${unreadCount} unread messages`, children: unreadLabel }) : null
package/messenger.mjs CHANGED
@@ -1968,29 +1968,35 @@ 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, trailing: "" };
1975
+ return {
1976
+ complete,
1977
+ leading: complete.slice(0, boundary),
1978
+ trailing: complete.slice(boundary)
1979
+ };
1977
1980
  }
1978
1981
  function SessionRow({ row, state, onOpen }) {
1979
1982
  const activity = sessionActivity(state, row);
1980
1983
  const attention = state.attention.find((item) => item.key === row.key);
1981
1984
  const title = sessionDisplayName(row);
1982
- const path = compactSessionPath(row.cwd);
1985
+ const path = sessionPathParts(row.cwd);
1983
1986
  const preview = row.preview || attention?.preview || "";
1984
1987
  const unreadCount = attention?.unreadCount ?? 0;
1985
1988
  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: [
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.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
1990
  /* @__PURE__ */ jsx7(HarnessLogo, { id: row.harness, activity, size: 34 }),
1988
1991
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-copy", children: [
1989
1992
  /* @__PURE__ */ jsxs6("span", { class: "scui-session-title", children: [
1990
1993
  /* @__PURE__ */ jsx7("strong", { children: title }),
1991
1994
  row.age ? /* @__PURE__ */ jsx7("time", { children: row.age }) : null
1992
1995
  ] }),
1993
- path ? /* @__PURE__ */ jsx7("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
1996
+ path.complete ? /* @__PURE__ */ jsxs6("small", { class: "scui-session-path", title: row.cwd, children: [
1997
+ /* @__PURE__ */ jsx7("span", { class: "scui-session-path-leading", children: path.leading }),
1998
+ path.trailing ? /* @__PURE__ */ jsx7("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
1999
+ ] }) : null,
1994
2000
  preview || unreadCount ? /* @__PURE__ */ jsxs6("span", { class: "scui-session-preview", children: [
1995
2001
  preview ? /* @__PURE__ */ jsx7("small", { children: preview }) : null,
1996
2002
  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.27",
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,35 @@ 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, trailing: "" };
286
+ return {
287
+ complete,
288
+ leading: complete.slice(0, boundary),
289
+ trailing: complete.slice(boundary)
290
+ };
288
291
  }
289
292
  function SessionRow({ row, state, onOpen }) {
290
293
  const activity = sessionActivity(state, row);
291
294
  const attention = state.attention.find((item) => item.key === row.key);
292
295
  const title = sessionDisplayName(row);
293
- const path = compactSessionPath(row.cwd);
296
+ const path = sessionPathParts(row.cwd);
294
297
  const preview = row.preview || attention?.preview || "";
295
298
  const unreadCount = attention?.unreadCount ?? 0;
296
299
  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: [
300
+ 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
301
  /* @__PURE__ */ jsx6(HarnessLogo, { id: row.harness, activity, size: 34 }),
299
302
  /* @__PURE__ */ jsxs5("span", { class: "scui-session-copy", children: [
300
303
  /* @__PURE__ */ jsxs5("span", { class: "scui-session-title", children: [
301
304
  /* @__PURE__ */ jsx6("strong", { children: title }),
302
305
  row.age ? /* @__PURE__ */ jsx6("time", { children: row.age }) : null
303
306
  ] }),
304
- path ? /* @__PURE__ */ jsx6("small", { class: "scui-session-path", title: row.cwd, children: path }) : null,
307
+ path.complete ? /* @__PURE__ */ jsxs5("small", { class: "scui-session-path", title: row.cwd, children: [
308
+ /* @__PURE__ */ jsx6("span", { class: "scui-session-path-leading", children: path.leading }),
309
+ path.trailing ? /* @__PURE__ */ jsx6("span", { class: "scui-session-path-trailing", children: path.trailing }) : null
310
+ ] }) : null,
305
311
  preview || unreadCount ? /* @__PURE__ */ jsxs5("span", { class: "scui-session-preview", children: [
306
312
  preview ? /* @__PURE__ */ jsx6("small", { children: preview }) : null,
307
313
  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-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 }