@gemboss/ui 0.1.0

package/src/assistant/sessions.tsx

@@ -0,0 +1,450 @@
+"use client";
+
+/**
+ * The assistant's thread rail and open-chat tabs — @gemboss/ui (28/09/2026).
+ *
+ * Moved out of gemboss apps/admin/src/components/operator/AssistantWorkspace.tsx, which renders it
+ * now; gemwatcher's assistant renders the same one. The markup and class names are the admin's own
+ * (`gemboss-assistant-*`): their CSS still lives in the admin's gemboss-shell.css and reaches other
+ * surfaces through gemboss-ui.css, extracted by apps/admin/scripts/export-ui-css.mjs.
+ *
+ * What this owns: how the list LOOKS and the UI-only state of looking at it — the search box, the
+ * recency groups, inline rename, the row menu and its two-step delete. What it does not own: the
+ * sessions themselves, and what opening, renaming, pinning, deleting or exporting one does. Those
+ * are the surface's, through callbacks. Collapse and keyboard shortcuts are the surface's too (the
+ * admin only lets its full-screen page own the keyboard).
+ */
+import React, { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+
+/** One conversation in the rail. `updatedAt` is epoch ms. */
+export interface AssistantSession {
+  id: string;
+  title: string;
+  pinned?: boolean;
+  updatedAt: number;
+  /** Searched along with the title. */
+  preview?: string;
+}
+
+type IconC = (props: { className?: string }) => ReactNode;
+export interface SessionRailIcons {
+  compose: IconC; chevronLeft: IconC; chevronRight: IconC; search: IconC; close: IconC; check: IconC;
+  more: IconC; pin: IconC; pinFilled: IconC; edit: IconC; exportIcon: IconC; remove: IconC;
+}
+
+const svg = (name: string, d: ReactNode): IconC => {
+  const Icon = ({ className }: { className?: string }) => (
+    <svg viewBox="0 0 20 20" className={className} aria-hidden="true" focusable="false">
+      <g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{d}</g>
+    </svg>
+  );
+  Icon.displayName = `RailIcon.${name}`;
+  return Icon;
+};
+/** Line icons for a surface that brings none. The admin passes its Polaris icons instead. */
+const DEFAULT_ICONS: SessionRailIcons = {
+  compose: svg("compose", <><path d="M11 4H5.5A1.5 1.5 0 0 0 4 5.5v9A1.5 1.5 0 0 0 5.5 16h9a1.5 1.5 0 0 0 1.5-1.5V9" /><path d="M14.5 3.5l2 2L10 12H8v-2z" /></>),
+  chevronLeft: svg("chevronLeft", <path d="M12 5l-5 5 5 5" />),
+  chevronRight: svg("chevronRight", <path d="M8 5l5 5-5 5" />),
+  search: svg("search", <><circle cx="9" cy="9" r="5" /><path d="M13 13l3.5 3.5" /></>),
+  close: svg("close", <path d="M6 6l8 8M14 6l-8 8" />),
+  check: svg("check", <path d="M4.5 10.5l3.5 3.5 7.5-8" />),
+  more: svg("more", <><circle cx="5" cy="10" r=".8" /><circle cx="10" cy="10" r=".8" /><circle cx="15" cy="10" r=".8" /></>),
+  pin: svg("pin", <><path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" /><path d="M10 11v5.5" /></>),
+  pinFilled: function PinFilled({ className }) {
+    return (
+      <svg viewBox="0 0 20 20" className={className} aria-hidden="true" focusable="false">
+        <path d="M8 3.5h4l-.5 5 2.5 2.5H6l2.5-2.5z" fill="currentColor" />
+        <path d="M10 11v5.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+      </svg>
+    );
+  },
+  edit: svg("edit", <path d="M4 16h3l8.5-8.5-3-3L4 13z" />),
+  exportIcon: svg("exportIcon", <><path d="M10 3.5v9M6.5 7L10 3.5 13.5 7" /><path d="M4 12.5v3h12v-3" /></>),
+  remove: svg("remove", <><path d="M5 6h10M8 6V4.5h4V6M6.5 6l.7 9.5h5.6l.7-9.5" /></>),
+};
+
+/** Every word the rail says. English defaults are the admin's. */
+export interface SessionRailLabels {
+  newChat: string; expand: string; collapse: string; expandTitle: string; collapseTitle: string;
+  searchPlaceholder: string; searchLabel: string; clearSearch: string;
+  noneFound: string; noneYet: string; openNow: string;
+  pinned: string; today: string; yesterday: string; previous7: string; previous30: string; older: string;
+  working: string; options: string; save: string; cancel: string;
+  pin: string; unpin: string; rename: string; exportMarkdown: string; remove: string; confirmRemove: string;
+  /** Relative time, and the locale for dates older than a week. */
+  justNow: string; minutesAgo: (m: number) => string; hoursAgo: (h: number) => string; daysAgo: (d: number) => string;
+  dateLocale: string;
+  /** The popup's open-chat tabs. */
+  openChats: string; newChatN: (n: number) => string; tabWorking: (title: string) => string;
+  closeChat: string; closeChatRunning: string; closeChatSr: string; closeChatRunningSr: string;
+}
+export const SESSION_RAIL_EN: SessionRailLabels = {
+  newChat: "New chat", expand: "Expand sidebar", collapse: "Collapse sidebar", expandTitle: "Expand", collapseTitle: "Collapse",
+  searchPlaceholder: "Search conversations…", searchLabel: "Search history", clearSearch: "Clear search",
+  noneFound: "No conversations found", noneYet: "No conversations yet", openNow: "Open now",
+  pinned: "Pinned", today: "Today", yesterday: "Yesterday", previous7: "Previous 7 days", previous30: "Previous 30 days", older: "Older",
+  working: "working", options: "Options", save: "Save", cancel: "Cancel",
+  pin: "Pin", unpin: "Unpin", rename: "Rename", exportMarkdown: "Export Markdown", remove: "Delete", confirmRemove: "Delete this chat?",
+  justNow: "just now", minutesAgo: (m) => `${m} min ago`, hoursAgo: (h) => `${h} hr ago`,
+  daysAgo: (d) => `${d} day${d > 1 ? "s" : ""} ago`, dateLocale: "en-US",
+  openChats: "Open chats", newChatN: (n) => `New chat ${n}`, tabWorking: (t) => `${t} — working`,
+  closeChat: "Close this chat", closeChatRunning: "Working — closing this stops it",
+  closeChatSr: "Close this chat", closeChatRunningSr: "Close and stop the run",
+};
+
+/** Short relative time for the thread list. */
+export function relativeTime(ts: number, L: SessionRailLabels = SESSION_RAIL_EN, now = Date.now()): string {
+  const m = Math.floor((now - ts) / 60000);
+  if (m < 1) return L.justNow;
+  if (m < 60) return L.minutesAgo(m);
+  const h = Math.floor(m / 60);
+  if (h < 24) return L.hoursAgo(h);
+  const d = Math.floor(h / 24);
+  if (d < 7) return L.daysAgo(d);
+  return new Date(ts).toLocaleDateString(L.dateLocale);
+}
+
+/** Lowercase + strip Vietnamese diacritics so search matches "muc tieu" ↔ "mục tiêu". */
+export function normalizeForSearch(s: string): string {
+  return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/đ/g, "d");
+}
+
+export interface SessionGroup { label: string; items: AssistantSession[] }
+
+/** Bucket threads ChatGPT-style: a pinned group on top, then by recency. Input is already
+ *  pinned-first + newest-first, so each bucket keeps that order and empty buckets are dropped. */
+export function groupSessions(sessions: AssistantSession[], L: SessionRailLabels = SESSION_RAIL_EN, nowMs = Date.now()): SessionGroup[] {
+  const pinned = sessions.filter((s) => s.pinned);
+  const rest = sessions.filter((s) => !s.pinned);
+  const now = new Date(nowMs);
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const DAY = 86_400_000;
+  const buckets: Array<{ label: string; min: number }> = [
+    { label: L.today, min: startOfToday },
+    { label: L.yesterday, min: startOfToday - DAY },
+    { label: L.previous7, min: startOfToday - 7 * DAY },
+    { label: L.previous30, min: startOfToday - 30 * DAY },
+    { label: L.older, min: -Infinity },
+  ];
+  const dateGroups: SessionGroup[] = buckets.map((b) => ({ label: b.label, items: [] }));
+  for (const s of rest) {
+    const idx = buckets.findIndex((b) => s.updatedAt >= b.min);
+    dateGroups[idx === -1 ? dateGroups.length - 1 : idx].items.push(s);
+  }
+  const out: SessionGroup[] = [];
+  if (pinned.length) out.push({ label: L.pinned, items: pinned });
+  return out.concat(dateGroups.filter((g) => g.items.length > 0));
+}
+
+/**
+ * The thread rail. Full screen only — the popup has no room for it and shows `OpenChatTabs` instead.
+ */
+export function SessionRail({
+  sessions, unlistedIds = [], activeId, pendingId, busyIds = [], collapsed, onToggleCollapsed,
+  onNewChat, newChatTitle, onOpen, onRename, onTogglePin, onDelete, onExport, footer, searchRef, labels, icons,
+}: {
+  /** Pinned-first, newest-first — the order the rail shows them in. */
+  sessions: AssistantSession[];
+  /** Chats that are open but not in `sessions` yet (a new chat mid-first-turn) — listed under "Open now". */
+  unlistedIds?: string[];
+  activeId?: string;
+  /** Highlighted while its turns load, so the click reads as heard. */
+  pendingId?: string | null;
+  /** Threads with a turn running right now. */
+  busyIds?: string[];
+  collapsed: boolean;
+  onToggleCollapsed: () => void;
+  onNewChat: () => void;
+  /** Hover text of New chat — the admin puts its shortcut here. */
+  newChatTitle?: string;
+  onOpen: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  onTogglePin?: (session: AssistantSession) => void;
+  onDelete: (id: string) => void;
+  onExport?: (id: string) => void;
+  /** Buttons at the foot of the rail (the admin: "Give Gem a goal", "Store memory"). Give them
+   *  `gemboss-assistant-railfoot is-button`. */
+  footer?: ReactNode;
+  /** The search input, so the surface can focus it from a shortcut. */
+  searchRef?: React.Ref<HTMLInputElement>;
+  labels?: Partial<SessionRailLabels>;
+  icons?: Partial<SessionRailIcons>;
+}) {
+  const L = { ...SESSION_RAIL_EN, ...labels };
+  const I = { ...DEFAULT_ICONS, ...icons };
+  const [query, setQuery] = useState("");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const [menuId, setMenuId] = useState<string | null>(null);
+  // Fixed-position coords for the open row menu (so an overflow:auto list can't clip it), and the
+  // thread awaiting a two-step delete confirm inside that menu.
+  const [menuPos, setMenuPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Search filters by title + preview (diacritic-insensitive); while searching the rail is a flat
+  // result list, otherwise threads are bucketed by recency.
+  const groups = useMemo<SessionGroup[]>(() => {
+    const q = normalizeForSearch(query.trim());
+    if (q) {
+      const hits = sessions.filter((s) => normalizeForSearch(`${s.title} ${s.preview ?? ""}`).includes(q));
+      return hits.length ? [{ label: "", items: hits }] : [];
+    }
+    const listed = groupSessions(sessions, L);
+    /**
+     * Chats that are OPEN but not yet in the server's list. A session appears there only once its
+     * first turn has been logged and titled; until then the rail is the only way back to it in full
+     * mode, so it has to be listed here.
+     */
+    const unlisted = unlistedIds
+      .filter((id) => !sessions.some((x) => x.id === id))
+      .map((id): AssistantSession => ({ id, title: L.newChat, updatedAt: Date.now(), pinned: false }));
+    return unlisted.length ? [{ label: L.openNow, items: unlisted }, ...listed] : listed;
+    // `L` is rebuilt every render from `labels`; the words it carries are what matter here.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessions, query, unlistedIds, labels]);
+
+  // Open the row menu at a FIXED position anchored to the kebab (so the overflow:auto thread list
+  // can't clip it), flipping above the button when it would overflow the viewport bottom.
+  const openMenu = useCallback((e: React.MouseEvent, sessionId: string) => {
+    if (menuId === sessionId) { setMenuId(null); return; }
+    const r = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const MENU_W = 184, MENU_H = 200;
+    const openUp = r.bottom + MENU_H + 8 > window.innerHeight;
+    setMenuPos({
+      left: Math.max(8, Math.min(r.right - MENU_W, window.innerWidth - MENU_W - 8)),
+      top: openUp ? Math.max(8, r.top - 6 - MENU_H) : r.bottom + 6,
+    });
+    setConfirmDeleteId(null);
+    setMenuId(sessionId);
+  }, [menuId]);
+
+  // Close the row actions menu on an outside click / scroll / resize (the kebab stops propagation
+  // so it can toggle; a fixed menu must close on scroll since it no longer tracks the row).
+  useEffect(() => {
+    if (!menuId) return;
+    const close = () => setMenuId(null);
+    const onDown = (e: MouseEvent) => { if (!menuRef.current?.contains(e.target as Node)) close(); };
+    document.addEventListener("mousedown", onDown);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [menuId]);
+
+  const beginEdit = (s: AssistantSession) => { setEditingId(s.id); setEditValue(s.title); };
+  const cancelEdit = () => { setEditingId(null); setEditValue(""); };
+  const commitEdit = (s: AssistantSession) => {
+    const title = editValue.trim();
+    setEditingId(null);
+    if (!title || title === s.title) return;
+    onRename(s.id, title);
+  };
+
+  const renderThread = (s: AssistantSession) => (
+    <div
+      key={s.id}
+      className={`gemboss-assistant-thread${s.id === activeId || s.id === pendingId ? " active" : ""}${editingId === s.id ? " editing" : ""}${menuId === s.id ? " menu-open" : ""}`}
+    >
+      {editingId === s.id ? (
+        <div className="gemboss-assistant-thread-edit">
+          <input className="gemboss-field"
+            autoFocus
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") { e.preventDefault(); commitEdit(s); }
+              else if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
+            }}
+          />
+          <button type="button" className="gemboss-assistant-thread-act" aria-label={L.save} onClick={() => commitEdit(s)}><I.check /></button>
+          <button type="button" className="gemboss-assistant-thread-act" aria-label={L.cancel} onClick={cancelEdit}><I.close /></button>
+        </div>
+      ) : (
+        <>
+          <button type="button" className="gemboss-assistant-thread-main" onClick={() => onOpen(s.id)} title={s.title}>
+            <span className="gemboss-assistant-thread-titlerow">
+              {/* Several threads can be working at once; the rail has to say which. */}
+              {busyIds.includes(s.id) && <span className="gemboss-assistant-thread-running" aria-label={L.working} />}
+              {s.pinned && <I.pinFilled className="gemboss-assistant-pin-dot" />}
+              <span className="gemboss-assistant-thread-title">{s.title}</span>
+            </span>
+            <span className="gemboss-assistant-thread-meta">{relativeTime(s.updatedAt, L)}</span>
+          </button>
+          <div className="gemboss-assistant-thread-actions">
+            <button
+              type="button"
+              className="gemboss-assistant-thread-act"
+              aria-label={L.options}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => openMenu(e, s.id)}
+            ><I.more /></button>
+          </div>
+          {menuId === s.id && (
+            <div className="gemboss-popover-surface gemboss-assistant-menu" ref={menuRef} role="menu" style={{ position: "fixed", top: menuPos.top, left: menuPos.left }}>
+              {confirmDeleteId === s.id ? (
+                <>
+                  <div className="gemboss-assistant-menu-confirm">{L.confirmRemove}</div>
+                  <button type="button" role="menuitem" className="danger" onClick={() => { setMenuId(null); onDelete(s.id); }}>
+                    <I.remove /><span>{L.remove}</span>
+                  </button>
+                  <button type="button" role="menuitem" onClick={() => setConfirmDeleteId(null)}>
+                    <I.close /><span>{L.cancel}</span>
+                  </button>
+                </>
+              ) : (
+                <>
+                  {onTogglePin ? (
+                    <button type="button" role="menuitem" onClick={() => { setMenuId(null); onTogglePin(s); }}>
+                      {s.pinned ? <I.pin /> : <I.pinFilled />}<span>{s.pinned ? L.unpin : L.pin}</span>
+                    </button>
+                  ) : null}
+                  <button type="button" role="menuitem" onClick={() => { setMenuId(null); beginEdit(s); }}>
+                    <I.edit /><span>{L.rename}</span>
+                  </button>
+                  {onExport ? (
+                    <button type="button" role="menuitem" onClick={() => { setMenuId(null); onExport(s.id); }}>
+                      <I.exportIcon /><span>{L.exportMarkdown}</span>
+                    </button>
+                  ) : null}
+                  {/* Two-step: first click asks for confirmation instead of deleting immediately. */}
+                  <button type="button" role="menuitem" className="danger" onClick={() => setConfirmDeleteId(s.id)}>
+                    <I.remove /><span>{L.remove}</span>
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <aside className={`gemboss-assistant-rail${collapsed ? " is-collapsed" : ""}`}>
+      <div className="gemboss-assistant-rail-top">
+        <button type="button" className="gemboss-assistant-newchat" onClick={onNewChat} title={newChatTitle ?? L.newChat}>
+          <I.compose />
+          <span>{L.newChat}</span>
+        </button>
+        <button
+          type="button"
+          className="gemboss-assistant-collapse"
+          onClick={onToggleCollapsed}
+          aria-label={collapsed ? L.expand : L.collapse}
+          title={collapsed ? L.expandTitle : L.collapseTitle}
+        >
+          {collapsed ? <I.chevronRight /> : <I.chevronLeft />}
+        </button>
+      </div>
+
+      {sessions.length > 0 && (
+        <div className="gemboss-assistant-search gemboss-field gemboss-field--group">
+          <I.search />
+          <input className="gemboss-field__bare"
+            ref={searchRef}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Escape") { e.preventDefault(); setQuery(""); e.currentTarget.blur(); } }}
+            placeholder={L.searchPlaceholder}
+            aria-label={L.searchLabel}
+          />
+          {query
+            ? <button type="button" className="gemboss-assistant-search-clear" aria-label={L.clearSearch} onClick={() => setQuery("")}><I.close /></button>
+            : <kbd className="gemboss-assistant-kbd">/</kbd>}
+        </div>
+      )}
+
+      <div className="gemboss-assistant-threads">
+        {/* Ask the LIST what is empty, not the server's copy of it: an open chat mid-first-turn is in
+            `groups` and in nothing else. */}
+        {groups.length === 0 ? (
+          <div className="gemboss-assistant-threads-empty">
+            {query ? L.noneFound : L.noneYet}
+          </div>
+        ) : (
+          groups.map((g) => (
+            <div key={g.label || "search"} className="gemboss-assistant-group">
+              {g.label && <div className="gemboss-assistant-group-label">{g.label}</div>}
+              {g.items.map(renderThread)}
+            </div>
+          ))
+        )}
+      </div>
+
+      {footer}
+    </aside>
+  );
+}
+
+/** The popup's tabs — which of the chats I have OPEN is working right now. Shown only with 2+ open. */
+export function OpenChatTabs({ chats, activeId, onSelect, onClose, labels, icons }: {
+  chats: Array<{ id: string; title?: string; running?: boolean }>;
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onClose: (id: string) => void;
+  labels?: Partial<SessionRailLabels>;
+  icons?: Partial<SessionRailIcons>;
+}) {
+  const L = { ...SESSION_RAIL_EN, ...labels };
+  const I = { ...DEFAULT_ICONS, ...icons };
+  // Untitled tabs are numbered by their POSITION, so two fresh chats are not both called "New chat".
+  const untitledCount = chats.filter((c) => !c.title).length;
+  return (
+    <div className="gemboss-assistant-tabs" role="tablist" aria-label={L.openChats}>
+      {chats.map((chat, index) => {
+        const running = !!chat.running;
+        const title = chat.title || (untitledCount > 1 ? L.newChatN(index + 1) : L.newChat);
+        return (
+          <div key={chat.id} className={`gemboss-assistant-tab${chat.id === activeId ? " active" : ""}`}>
+            <button
+              type="button"
+              role="tab"
+              aria-selected={chat.id === activeId}
+              className="gemboss-assistant-tab-main"
+              onClick={() => onSelect(chat.id)}
+              title={running ? L.tabWorking(title) : title}
+            >
+              <span className={`gemboss-assistant-tab-dot${running ? " is-running" : ""}`} aria-hidden />
+              <span className="gemboss-assistant-tab-title">{title}</span>
+            </button>
+            <button
+              type="button"
+              className="gemboss-assistant-tab-close"
+              onClick={() => onClose(chat.id)}
+              title={running ? L.closeChatRunning : L.closeChat}
+            >
+              <I.close />
+              <span className="gemboss-assistant-sronly">{running ? L.closeChatRunningSr : L.closeChatSr}</span>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Rail + page. `rail` is left out in the popup (`dock`), where there is no room for it.
+ * `after` renders inside the layout after the page (the admin's goal and memory drawers).
+ */
+export function AssistantWorkspaceLayout({ dock, rail, switching, after, children }: {
+  dock?: boolean;
+  rail?: ReactNode;
+  /** A thread switch is loading: the current chat stays visible, dimmed, until the new one arrives. */
+  switching?: boolean;
+  after?: ReactNode;
+  children?: ReactNode;
+}) {
+  return (
+    <div className={`gemboss-assistant-layout${dock ? " is-dock" : ""}`}>
+      {dock ? null : rail}
+      <div className={`gemboss-assistant-page${switching ? " is-switching" : ""}`}>{children}</div>
+      {after}
+    </div>
+  );
+}