even-toolkit 1.4.2 → 1.5.1

package/glasses/gestures.ts

@@ -10,6 +10,14 @@ const SCROLL_SUPPRESS_AFTER_TEXT_MS = 80;
 
 let lastTapTime = 0;
 let lastTapKind: 'tap' | 'double' | null = null;
+let bypassNextScrollChecks = false;
+
+function consumeExternalScrollBypass(): boolean {
+  const g = globalThis as typeof globalThis & { __evenAllowImmediateScrollOnce?: boolean };
+  if (!g.__evenAllowImmediateScrollOnce) return false;
+  g.__evenAllowImmediateScrollOnce = false;
+  return true;
+}
 
 export function tryConsumeTap(kind: 'tap' | 'double'): boolean {
   const now = Date.now();
@@ -31,6 +39,10 @@ export function tryConsumeTap(kind: 'tap' | 'double'): boolean {
 }
 
 export function isScrollSuppressed(): boolean {
+  if (bypassNextScrollChecks || consumeExternalScrollBypass()) {
+    bypassNextScrollChecks = false;
+    return false;
+  }
   return Date.now() - lastTapTime < SCROLL_SUPPRESS_AFTER_TAP_MS;
 }
 
@@ -46,6 +58,12 @@ export function notifyTextUpdate(): void {
 export function isScrollDebounced(direction: 'prev' | 'next'): boolean {
   const now = Date.now();
 
+  if (bypassNextScrollChecks || consumeExternalScrollBypass()) {
+    lastScrollTime = now;
+    lastScrollDir = direction;
+    return false;
+  }
+
   // Suppress scrolls briefly after a text update (G2 re-layout fires spurious events)
   if (now - textUpdateTime < SCROLL_SUPPRESS_AFTER_TEXT_MS) return true;
 
@@ -58,3 +76,35 @@ export function isScrollDebounced(direction: 'prev' | 'next'): boolean {
   lastScrollDir = direction;
   return false;
 }
+
+/** Shared scroll gate so a single bypass applies to the full event. */
+export function shouldIgnoreScroll(direction: 'prev' | 'next'): boolean {
+  const now = Date.now();
+  const bypassed = bypassNextScrollChecks || consumeExternalScrollBypass();
+
+  if (bypassed) {
+    bypassNextScrollChecks = false;
+    lastScrollTime = now;
+    lastScrollDir = direction;
+    return false;
+  }
+
+  if (now - lastTapTime < SCROLL_SUPPRESS_AFTER_TAP_MS) return true;
+  if (now - textUpdateTime < SCROLL_SUPPRESS_AFTER_TEXT_MS) return true;
+
+  const threshold =
+    direction === lastScrollDir ? SAME_DIRECTION_DEBOUNCE_MS : DIRECTION_CHANGE_DEBOUNCE_MS;
+
+  if (now - lastScrollTime < threshold) return true;
+
+  lastScrollTime = now;
+  lastScrollDir = direction;
+  return false;
+}
+
+/** Allow the next scroll event through immediately after a tap-driven mode change. */
+export function armImmediateScroll(): void {
+  bypassNextScrollChecks = true;
+  lastScrollTime = 0;
+  lastScrollDir = null;
+}

package/glasses/glass-chat-display.ts

@@ -0,0 +1,152 @@
+/**
+ * Chat/terminal output display builder for G2 glasses.
+ * Optimized for reading streaming AI output on a 10-line text display.
+ *
+ * Line type prefixes:
+ *   > user prompt
+ *   >> tool call
+ *   + collapsed thinking
+ *   - expanded thinking header
+ *   ! error
+ *   (no prefix) assistant text
+ */
+
+import type { DisplayData, DisplayLine } from './types';
+import { line, glassHeader } from './types';
+import { applyScrollIndicators } from './text-utils';
+
+export interface ChatLine {
+  type: 'prompt' | 'text' | 'tool' | 'thinking-collapsed' | 'thinking-expanded' | 'thinking-body' | 'error' | 'system';
+  text: string;
+}
+
+/**
+ * Format a single ChatLine into one or more display strings,
+ * word-wrapping at maxChars.
+ */
+export function formatChatLine(chatLine: ChatLine, maxChars = 44): string[] {
+  const { type, text } = chatLine;
+
+  let prefix: string;
+  switch (type) {
+    case 'prompt':
+      prefix = '> ';
+      break;
+    case 'tool':
+      prefix = '>> ';
+      break;
+    case 'thinking-collapsed':
+      prefix = '+ ';
+      break;
+    case 'thinking-expanded':
+      prefix = '- ';
+      break;
+    case 'thinking-body':
+      prefix = '  ';
+      break;
+    case 'error':
+      prefix = '! ';
+      break;
+    case 'system':
+      prefix = '= ';
+      break;
+    case 'text':
+    default:
+      prefix = '';
+      break;
+  }
+
+  const available = maxChars - prefix.length;
+  if (text.length <= available) {
+    return [`${prefix}${text}`];
+  }
+
+  // Word-wrap: try to break at word boundaries
+  const lines: string[] = [];
+  let remaining = text;
+  let isFirst = true;
+
+  while (remaining.length > 0) {
+    const pfx = isFirst ? prefix : ' '.repeat(prefix.length);
+    const avail = maxChars - pfx.length;
+
+    if (remaining.length <= avail) {
+      lines.push(`${pfx}${remaining}`);
+      break;
+    }
+
+    // Find last space within available width
+    let breakAt = remaining.lastIndexOf(' ', avail);
+    if (breakAt <= 0) breakAt = avail; // no space found, hard break
+
+    lines.push(`${pfx}${remaining.slice(0, breakAt)}`);
+    remaining = remaining.slice(breakAt).trimStart();
+    isFirst = false;
+  }
+
+  return lines;
+}
+
+export interface ChatDisplayOptions {
+  /** Header title, e.g. "CLAUDE · opus · running" */
+  title: string;
+  /** Action bar string from buildStaticActionBar() */
+  actionBar: string;
+  /** Ordered chat lines to display */
+  chatLines: ChatLine[];
+  /** Scroll offset from bottom. 0 = show latest. Positive = scrolled up. */
+  scrollOffset: number;
+  /** Number of visible content lines. Default: 7 (10 total - 3 header) */
+  contentSlots?: number;
+  /** Max chars per line. Default: 44 */
+  maxChars?: number;
+}
+
+/**
+ * Build a complete chat display for G2 glasses.
+ * Auto-scrolls to bottom (latest content) unless scrollOffset > 0.
+ * Returns DisplayData with header + scrollable content.
+ */
+export function buildChatDisplay(opts: ChatDisplayOptions): DisplayData {
+  const {
+    title,
+    actionBar,
+    chatLines,
+    scrollOffset,
+    contentSlots = 7,
+    maxChars = 44,
+  } = opts;
+
+  const lines = [...glassHeader(title, actionBar)];
+
+  // Format all chat lines into display strings
+  const allLines: string[] = [];
+  for (const cl of chatLines) {
+    allLines.push(...formatChatLine(cl, maxChars));
+  }
+
+  if (allLines.length === 0) {
+    lines.push(line('  Waiting for output...', 'meta'));
+    return { lines };
+  }
+
+  // Scroll from bottom: offset 0 = show last contentSlots lines
+  const totalLines = allLines.length;
+  const maxFromBottom = Math.max(0, totalLines - contentSlots);
+  const clampedOffset = Math.min(scrollOffset, maxFromBottom);
+  const start = Math.max(0, totalLines - contentSlots - clampedOffset);
+
+  const visible = allLines.slice(start, start + contentSlots);
+  const contentDisplayLines: DisplayLine[] = visible.map((t) => line(t, 'normal'));
+
+  applyScrollIndicators(
+    contentDisplayLines,
+    start,
+    totalLines,
+    contentSlots,
+    (t) => line(t, 'meta'),
+  );
+
+  lines.push(...contentDisplayLines);
+  return { lines };
+}

package/glasses/glass-format.ts

@@ -0,0 +1,75 @@
+/**
+ * Glass display formatting constants and helpers.
+ * Safe Unicode characters confirmed working on G2 LVGL display.
+ * Inspired by tesla-even-g2 formatting patterns.
+ */
+
+/** Middle dot · field separator */
+export const SEP = '\u00B7';
+
+/** Single right-pointing angle › drill-in indicator */
+export const DRILL = '\u203A';
+
+/** Single left-pointing angle ‹ back prefix */
+export const BACK_CHAR = '\u2039';
+
+/** En-dash – result separator */
+export const DASH = '\u2013';
+
+/** Heavy horizontal ═ filled progress bar segment */
+export const BAR_FILL = '\u2501';
+
+/** Light horizontal ─ empty progress bar segment */
+export const BAR_EMPTY = '\u2500';
+
+/**
+ * Join non-empty values with · separator.
+ * Falsy values are filtered out.
+ *
+ * @example fieldJoin('CLAUDE', 'opus', 'running') → "CLAUDE · opus · running"
+ * @example fieldJoin('HOSTS', false, '2 total') → "HOSTS · 2 total"
+ */
+export function fieldJoin(...parts: (string | undefined | null | false)[]): string {
+  return parts.filter(Boolean).join(` ${SEP} `);
+}
+
+/**
+ * Render an ASCII progress bar.
+ * Uses ═ for filled and ─ for empty.
+ *
+ * @example progressBar(67) → "═══════───"
+ * @example progressBar(30, 20) → "══════──────────────"
+ */
+export function progressBar(percent: number, width = 10): string {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const filled = Math.round((clamped / 100) * width);
+  return BAR_FILL.repeat(filled) + BAR_EMPTY.repeat(width - filled);
+}
+
+/**
+ * Format a key · value pair, truncating value if needed.
+ *
+ * @example kvLine('Language', 'EN') → "Language · EN"
+ */
+export function kvLine(label: string, value: string, maxWidth = 44): string {
+  const sep = ` ${SEP} `;
+  const available = maxWidth - label.length - sep.length;
+  const val = value.length > available ? value.slice(0, available - 1) + '~' : value;
+  return `${label}${sep}${val}`;
+}
+
+/**
+ * Append › drill-in indicator to a label.
+ *
+ * @example drillLabel('Sessions') → "Sessions ›"
+ */
+export function drillLabel(text: string): string {
+  return `${text} ${DRILL}`;
+}
+
+/**
+ * Build a "‹ Back" label for menu items.
+ */
+export function backLabel(): string {
+  return `${BACK_CHAR} Back`;
+}

package/glasses/index.ts

@@ -13,3 +13,5 @@ export * from './glass-display-builders';
 export * from './glass-mode';
 export * from './glass-router';
 export * from './glass-screen-router';
+export * from './glass-format';
+export * from './glass-chat-display';

package/glasses/useGlasses.ts

@@ -71,7 +71,7 @@ export function useGlasses<S>(config: UseGlassesConfig<S>): void {
       // Build display text from lines
       const data = configRef.current.toDisplayData(snapshot, nav);
       const text = data.lines.map(l => {
-        if (l.style === 'separator') return '\u2500'.repeat(28) + '\n';
+        if (l.style === 'separator') return '\u2500'.repeat(28);
         if (l.inverted) return `\u25B6 ${l.text}`;
         return `  ${l.text}`;
       }).join('\n');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "even-toolkit",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "Design system & component library for Even Realities G2 smart glasses apps — 55+ web components, 191 pixel-art icons, glasses SDK bridge, and design tokens.",
   "type": "module",
   "main": "./dist/glasses/index.js",
@@ -102,6 +102,14 @@
       "types": "./dist/glasses/glass-screen-router.d.ts",
       "import": "./dist/glasses/glass-screen-router.js"
     },
+    "./glass-format": {
+      "types": "./dist/glasses/glass-format.d.ts",
+      "import": "./dist/glasses/glass-format.js"
+    },
+    "./glass-chat-display": {
+      "types": "./dist/glasses/glass-chat-display.d.ts",
+      "import": "./dist/glasses/glass-chat-display.js"
+    },
     "./web": {
       "types": "./dist/web/index.d.ts",
       "import": "./dist/web/index.js"
@@ -353,6 +361,7 @@
     "glasses",
     "stt",
     "README.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "scripts": {

package/stt/providers/deepgram.ts

@@ -28,6 +28,7 @@ export class DeepgramProvider implements STTProvider {
   private language = 'en';
   private modelId = 'nova-2';
   private ws: WebSocket | null = null;
+  private suppressSocketEvents = false;
 
   private transcriptCbs: Array<(t: STTTranscript) => void> = [];
   private stateCbs: Array<(s: STTState) => void> = [];
@@ -51,8 +52,9 @@ export class DeepgramProvider implements STTProvider {
 
   start(): void {
     if (this.ws) {
-      this.closeSocket();
+      this.closeSocket(true);
     }
+    this.suppressSocketEvents = false;
 
     const params = new URLSearchParams({
       model: this.modelId,
@@ -98,6 +100,7 @@ export class DeepgramProvider implements STTProvider {
     };
 
     this.ws.onerror = (event) => {
+      if (this.suppressSocketEvents) return;
       sttLog('deepgram: WebSocket error', event);
       const err: STTError = {
         code: 'network',
@@ -110,6 +113,11 @@ export class DeepgramProvider implements STTProvider {
 
     this.ws.onclose = () => {
       this.ws = null;
+      if (this.suppressSocketEvents) {
+        this.suppressSocketEvents = false;
+        this.setState('idle');
+        return;
+      }
       if (this._state === 'listening') {
         this.setState('idle');
       }
@@ -140,15 +148,15 @@ export class DeepgramProvider implements STTProvider {
       // Send close message per Deepgram protocol
       this.ws.send(JSON.stringify({ type: 'CloseStream' }));
     }
-    this.closeSocket();
+    this.closeSocket(true);
   }
 
   abort(): void {
-    this.closeSocket();
+    this.closeSocket(true);
   }
 
   dispose(): void {
-    this.closeSocket();
+    this.closeSocket(true);
     this.transcriptCbs = [];
     this.stateCbs = [];
     this.errorCbs = [];
@@ -171,10 +179,18 @@ export class DeepgramProvider implements STTProvider {
 
   // ── Private ──
 
-  private closeSocket(): void {
-    if (this.ws) {
-      try { this.ws.close(); } catch { /* ignore */ }
+  private closeSocket(silent = false): void {
+    const socket = this.ws;
+    if (socket) {
       this.ws = null;
+      if (silent) {
+        this.suppressSocketEvents = true;
+        socket.onopen = null;
+        socket.onmessage = null;
+        socket.onerror = null;
+        socket.onclose = null;
+      }
+      try { socket.close(); } catch { /* ignore */ }
     }
     this.setState('idle');
   }

package/web/components/dialog.tsx

@@ -21,7 +21,6 @@ interface DialogProps {
 function Dialog({ open, onClose, title, icon, children, actions, className }: DialogProps) {
   const [visible, setVisible] = React.useState(false);
   const [closing, setClosing] = React.useState(false);
-
   React.useEffect(() => {
     if (open) {
       setVisible(true);
@@ -42,17 +41,29 @@ function Dialog({ open, onClose, title, icon, children, actions, className }: Di
     return () => document.removeEventListener('keydown', handler);
   }, [visible, onClose]);
 
+  React.useEffect(() => {
+    if (!visible) return;
+    const prevBodyOverflow = document.body.style.overflow;
+    const prevHtmlOverflow = document.documentElement.style.overflow;
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+    return () => {
+      document.body.style.overflow = prevBodyOverflow;
+      document.documentElement.style.overflow = prevHtmlOverflow;
+    };
+  }, [visible]);
+
   if (!visible) return null;
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center px-6"
+      className="fixed inset-0 z-50 flex items-center justify-center px-6 overscroll-contain"
       style={{ animation: closing ? 'fadeOut 200ms ease forwards' : 'fadeIn 200ms ease' }}
     >
       <div className="absolute inset-0 bg-overlay" onClick={onClose} />
       <div
         className={cn(
-          'relative z-10 w-full max-w-[311px] bg-surface rounded-[6px] shadow-[0_4px_24px_rgba(0,0,0,0.16)] p-4',
+          'relative z-10 w-full max-w-[311px] bg-surface rounded-[6px] shadow-[0_4px_24px_rgba(0,0,0,0.16)] p-4 overscroll-contain',
           className,
         )}
         style={{ animation: closing ? 'fadeOut 200ms ease forwards' : 'fadeIn 250ms ease' }}

package/web/components/drawer-shell.tsx

@@ -66,13 +66,19 @@ function DrawerShell({
   const headerTitle = headerOverride?.title ?? getPageTitle(pathname);
   const headerHidden = headerOverride?.hidden ?? false;
 
+  const handleBack = useCallback(() => {
+    const explicit = headerOverride?.backTo ?? getBackPath?.(pathname);
+    if (explicit) {
+      navigate(explicit);
+    } else {
+      // Use browser history to go back to the actual previous page
+      navigate(-1);
+    }
+  }, [navigate, headerOverride?.backTo, getBackPath, pathname]);
+
   const defaultLeft = nested
     ? (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => navigate(headerOverride?.backTo ?? getBackPath?.(pathname) ?? '/')}
-        >
+        <Button variant="ghost" size="icon" onClick={handleBack}>
           {backIcon}
         </Button>
       )

package/web/components/list-item.tsx

@@ -2,6 +2,7 @@ import { cn } from '../utils/cn';
 import { useRef, useState, useCallback } from 'react';
 import type { ReactNode, TouchEvent as ReactTouchEvent } from 'react';
 import { IcEditTrash } from '../icons/svg-icons';
+import { Loading } from './loading';
 
 interface ListItemProps {
   title: string;
@@ -9,7 +10,7 @@ interface ListItemProps {
   leading?: ReactNode;
   trailing?: ReactNode;
   onPress?: () => void;
-  onDelete?: () => void;
+  onDelete?: () => void | Promise<void>;
   className?: string;
 }
 
@@ -20,22 +21,23 @@ const DIRECTION_LOCK_PX = 10;
 function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, className }: ListItemProps) {
   const [offset, setOffset] = useState(0);
   const [swiping, setSwiping] = useState(false);
+  const [deleting, setDeleting] = useState(false);
   const startX = useRef(0);
   const startY = useRef(0);
   const currentOffset = useRef(0);
   const direction = useRef<'none' | 'horizontal' | 'vertical'>('none');
 
   const onTouchStart = useCallback((e: ReactTouchEvent) => {
-    if (!onDelete) return;
+    if (!onDelete || deleting) return;
     startX.current = e.touches[0].clientX;
     startY.current = e.touches[0].clientY;
     currentOffset.current = offset;
     direction.current = 'none';
     setSwiping(true);
-  }, [onDelete, offset]);
+  }, [deleting, onDelete, offset]);
 
   const onTouchMove = useCallback((e: ReactTouchEvent) => {
-    if (!swiping) return;
+    if (!swiping || deleting) return;
     const dx = e.touches[0].clientX - startX.current;
     const dy = e.touches[0].clientY - startY.current;
 
@@ -52,7 +54,7 @@ function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, class
 
     const next = Math.min(0, Math.max(-DELETE_WIDTH, currentOffset.current + dx));
     setOffset(next);
-  }, [swiping]);
+  }, [deleting, swiping]);
 
   const onTouchEnd = useCallback(() => {
     if (!swiping) return;
@@ -61,6 +63,18 @@ function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, class
     setOffset(offset < -SWIPE_THRESHOLD / 2 ? -DELETE_WIDTH : 0);
   }, [swiping, offset]);
 
+  const handleDeleteClick = useCallback(async () => {
+    if (!onDelete || deleting) return;
+    setDeleting(true);
+    try {
+      await Promise.resolve(onDelete());
+    } finally {
+      setDeleting(false);
+      setOffset(0);
+      direction.current = 'none';
+    }
+  }, [deleting, onDelete]);
+
   const Comp = onPress ? 'button' : 'div';
 
   return (
@@ -68,22 +82,23 @@ function ListItem({ title, subtitle, leading, trailing, onPress, onDelete, class
       {onDelete && offset < 0 && (
         <button
           type="button"
-          onClick={onDelete}
-          className="absolute right-0 top-0 bottom-0 flex items-center justify-center bg-negative text-text-highlight cursor-pointer"
+          onClick={handleDeleteClick}
+          disabled={deleting}
+          className="absolute right-0 top-0 bottom-0 flex items-center justify-center bg-negative text-text-highlight cursor-pointer disabled:cursor-default"
           style={{ width: DELETE_WIDTH }}
         >
-          <IcEditTrash width={20} height={20} />
+          {deleting ? <Loading size={18} className="text-text-highlight" /> : <IcEditTrash width={20} height={20} />}
         </button>
       )}
       <Comp
         type={onPress ? 'button' : undefined}
-        onClick={onPress}
+        onClick={deleting ? undefined : onPress}
         onTouchStart={onTouchStart}
         onTouchMove={onTouchMove}
         onTouchEnd={onTouchEnd}
         className={cn(
           'flex items-center gap-4 w-full bg-surface p-4 text-left transition-colors relative',
-          onPress && 'cursor-pointer hover:bg-surface-light',
+          onPress && !deleting && 'cursor-pointer hover:bg-surface-light',
           className,
         )}
         style={{