@cryptiklemur/lattice 1.14.2 → 1.16.0

package/client/src/components/workspace/BookmarksView.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useMemo } from "react";
+import { Bookmark, MessageSquare, ExternalLink } from "lucide-react";
+import { useBookmarks } from "../../hooks/useBookmarks";
+import { useSession } from "../../hooks/useSession";
+import { useProjects } from "../../hooks/useProjects";
+import { openTab } from "../../stores/workspace";
+import type { MessageBookmark } from "@lattice/shared";
+
+function relativeTime(ts: number): string {
+  var diff = Date.now() - ts;
+  var seconds = Math.floor(diff / 1000);
+  if (seconds < 60) return seconds + "s ago";
+  var minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return minutes + "m ago";
+  var hours = Math.floor(minutes / 60);
+  if (hours < 24) return hours + "h ago";
+  var days = Math.floor(hours / 24);
+  return days + "d ago";
+}
+
+interface GroupedBookmarks {
+  projectSlug: string;
+  sessions: Array<{
+    sessionId: string;
+    bookmarks: MessageBookmark[];
+  }>;
+}
+
+export function BookmarksView() {
+  var { allBookmarks, requestAllBookmarks } = useBookmarks();
+  var { activateSession } = useSession();
+  var { projects } = useProjects();
+
+  useEffect(function () {
+    requestAllBookmarks();
+  }, []);
+
+  var grouped = useMemo(function () {
+    var projectMap = new Map<string, Map<string, MessageBookmark[]>>();
+    for (var i = 0; i < allBookmarks.length; i++) {
+      var bm = allBookmarks[i];
+      if (!projectMap.has(bm.projectSlug)) {
+        projectMap.set(bm.projectSlug, new Map());
+      }
+      var sessionMap = projectMap.get(bm.projectSlug)!;
+      if (!sessionMap.has(bm.sessionId)) {
+        sessionMap.set(bm.sessionId, []);
+      }
+      sessionMap.get(bm.sessionId)!.push(bm);
+    }
+    var result: GroupedBookmarks[] = [];
+    projectMap.forEach(function (sessionMap, projectSlug) {
+      var sessions: GroupedBookmarks["sessions"] = [];
+      sessionMap.forEach(function (bookmarks, sessionId) {
+        sessions.push({ sessionId, bookmarks });
+      });
+      sessions.sort(function (a, b) {
+        return b.bookmarks[0].createdAt - a.bookmarks[0].createdAt;
+      });
+      result.push({ projectSlug, sessions });
+    });
+    result.sort(function (a, b) {
+      var aLatest = a.sessions[0]?.bookmarks[0]?.createdAt ?? 0;
+      var bLatest = b.sessions[0]?.bookmarks[0]?.createdAt ?? 0;
+      return bLatest - aLatest;
+    });
+    return result;
+  }, [allBookmarks]);
+
+  function getProjectTitle(slug: string): string {
+    for (var i = 0; i < projects.length; i++) {
+      if (projects[i].slug === slug) return projects[i].title;
+    }
+    return slug;
+  }
+
+  function handleBookmarkClick(bm: MessageBookmark) {
+    activateSession(bm.projectSlug, bm.sessionId);
+    openTab("chat");
+    setTimeout(function () {
+      var el = document.getElementById("msg-" + bm.messageUuid);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+        el.classList.add("ring-2", "ring-warning/40");
+        setTimeout(function () { el!.classList.remove("ring-2", "ring-warning/40"); }, 2000);
+      }
+    }, 500);
+  }
+
+  return (
+    <div className="flex flex-col h-full w-full overflow-hidden">
+      <div className="flex items-center gap-2 px-4 py-3 border-b border-base-content/10 bg-base-100 flex-shrink-0">
+        <Bookmark size={16} className="text-warning" />
+        <span className="text-sm font-semibold text-base-content">Bookmarks</span>
+        <span className="text-[10px] font-mono text-base-content/30 ml-auto">{allBookmarks.length} total</span>
+      </div>
+      <div className="flex-1 overflow-y-auto p-4">
+        {allBookmarks.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-base-content/30 gap-3">
+            <Bookmark size={32} className="text-base-content/15" />
+            <div className="text-[13px] font-mono">No bookmarks yet</div>
+            <div className="text-[11px] text-base-content/20 max-w-[260px] text-center">
+              Bookmark messages in chat to quickly find them later.
+            </div>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {grouped.map(function (group) {
+              return (
+                <div key={group.projectSlug}>
+                  <div className="text-[10px] uppercase tracking-widest text-base-content/40 font-mono font-bold mb-2">
+                    {getProjectTitle(group.projectSlug)}
+                  </div>
+                  <div className="flex flex-col gap-2">
+                    {group.sessions.map(function (session) {
+                      return (
+                        <div key={session.sessionId} className="bg-base-200/50 border border-base-content/8 rounded-lg overflow-hidden">
+                          <div className="flex items-center gap-2 px-3 py-1.5 border-b border-base-content/5">
+                            <MessageSquare size={11} className="text-base-content/30" />
+                            <span className="text-[11px] font-mono text-base-content/40 truncate">{session.sessionId.slice(0, 12)}...</span>
+                          </div>
+                          <div className="flex flex-col">
+                            {session.bookmarks.map(function (bm) {
+                              return (
+                                <button
+                                  key={bm.id}
+                                  type="button"
+                                  onClick={function () { handleBookmarkClick(bm); }}
+                                  className="flex items-start gap-2 px-3 py-2 hover:bg-base-content/5 transition-colors text-left w-full"
+                                >
+                                  <Bookmark size={10} className="text-warning/60 mt-0.5 flex-shrink-0" />
+                                  <div className="min-w-0 flex-1">
+                                    <div className="text-[12px] text-base-content/70 line-clamp-2">{bm.messageText}</div>
+                                    <div className="flex items-center gap-2 mt-0.5">
+                                      <span className="text-[9px] text-base-content/25 font-mono">{bm.messageType}</span>
+                                      <span className="text-[9px] text-base-content/20 font-mono">{relativeTime(bm.createdAt)}</span>
+                                    </div>
+                                  </div>
+                                  <ExternalLink size={10} className="text-base-content/20 mt-1 flex-shrink-0" />
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/client/src/components/workspace/TabBar.tsx

@@ -1,7 +1,9 @@
 import { useState, useEffect, useRef } from "react";
-import { X, Columns2, Rows2, MessageSquare, FolderOpen, TerminalSquare, StickyNote, Calendar } from "lucide-react";
+import { X, Columns2, Rows2, MessageSquare, FolderOpen, TerminalSquare, StickyNote, Calendar, Bookmark } from "lucide-react";
 import { useWorkspace } from "../../hooks/useWorkspace";
+import { useSession } from "../../hooks/useSession";
 import type { Tab, TabType } from "../../stores/workspace";
+import { formatSessionTitle } from "../../utils/formatSessionTitle";
 
 interface TabBarProps {
   paneId?: string;
@@ -20,10 +22,12 @@ var TAB_ICONS: Record<TabType, typeof MessageSquare> = {
   terminal: TerminalSquare,
   notes: StickyNote,
   tasks: Calendar,
+  bookmarks: Bookmark,
 };
 
 export function TabBar({ paneId, isActivePane }: TabBarProps) {
   var workspace = useWorkspace();
+  var session = useSession();
   var [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
   var menuRef = useRef<HTMLDivElement>(null);
 
@@ -65,7 +69,17 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
     activeTabId = workspace.activeTabId;
   }
 
-  var shouldShow = paneTabs.length > 1 || (paneTabs[0]?.closeable ?? false);
+  var shouldShow = paneTabs.length > 1 || paneTabs.some(function (t) { return t.closeable; });
+
+  function getTabLabel(tab: Tab): string {
+    if (tab.type === "chat" && tab.sessionId) {
+      if (tab.sessionId === session.activeSessionId && session.activeSessionTitle) {
+        return formatSessionTitle(session.activeSessionTitle) || tab.label;
+      }
+      return formatSessionTitle(tab.label) || "Session";
+    }
+    return tab.label;
+  }
 
   function handleTabClick(tabId: string) {
     if (paneId) {
@@ -73,6 +87,12 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
     } else {
       workspace.setActiveTab(tabId);
     }
+    var tab = workspace.tabs.find(function (t) { return t.id === tabId; });
+    if (tab && tab.type === "chat" && tab.sessionId && tab.projectSlug) {
+      if (session.activeSessionId !== tab.sessionId) {
+        session.activateSession(tab.projectSlug, tab.sessionId);
+      }
+    }
   }
 
   function handleCloseTab(tabId: string) {
@@ -101,6 +121,13 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
     setContextMenu(null);
   }
 
+  function handleMiddleClick(e: React.MouseEvent, tab: Tab) {
+    if (e.button === 1 && tab.closeable) {
+      e.preventDefault();
+      handleCloseTab(tab.id);
+    }
+  }
+
   return (
     <>
       <div
@@ -119,6 +146,7 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
         {paneTabs.map(function (tab) {
           var isActive = tab.id === activeTabId;
           var Icon = TAB_ICONS[tab.type] || MessageSquare;
+          var label = getTabLabel(tab);
           return (
             <div
               key={tab.id}
@@ -126,6 +154,7 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
               tabIndex={0}
               aria-selected={isActive}
               onClick={function () { handleTabClick(tab.id); }}
+              onMouseDown={function (e) { handleMiddleClick(e, tab); }}
               onKeyDown={function (e) {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();
@@ -134,17 +163,17 @@ export function TabBar({ paneId, isActivePane }: TabBarProps) {
               }}
               onContextMenu={function (e) { handleContextMenu(e, tab.id); }}
               className={
-                "flex items-center gap-2 px-4 py-2.5 text-[13px] font-mono border-r border-base-content/10 transition-colors whitespace-nowrap flex-shrink-0 outline-none cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset " +
+                "flex items-center gap-2 px-4 py-2.5 text-[13px] font-mono border-r border-base-content/10 transition-colors whitespace-nowrap flex-shrink-0 outline-none cursor-pointer select-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-inset max-w-[200px] " +
                 (isActive
                   ? "bg-base-100 text-base-content border-b-2 border-b-primary"
                   : "text-base-content/40 hover:text-base-content/70 hover:bg-base-300/30")
               }
             >
               <Icon size={14} className={isActive ? "text-primary" : ""} />
-              <span>{tab.label}</span>
+              <span className="truncate text-[12px]">{label}</span>
               {tab.closeable && (
                 <button
-                  aria-label={"Close " + tab.label + " tab"}
+                  aria-label={"Close " + label + " tab"}
                   onClick={function (e) {
                     e.stopPropagation();
                     handleCloseTab(tab.id);

package/client/src/components/workspace/TaskEditModal.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useState, useRef, useCallback } from "react";
 import { X } from "lucide-react";
+import { useFocusTrap } from "../../hooks/useFocusTrap";
 import cronstrue from "cronstrue";
 import type { ScheduledTask } from "@lattice/shared";
 
@@ -25,6 +26,10 @@ export function TaskEditModal(props: TaskEditModalProps) {
   var [prompt, setPrompt] = useState(task ? task.prompt : "");
   var [cron, setCron] = useState(task ? task.cron : "0 9 * * 1-5");
 
+  var modalRef = useRef<HTMLDivElement>(null);
+  var stableOnClose = useCallback(function () { onClose(); }, [onClose]);
+  useFocusTrap(modalRef, stableOnClose);
+
   var cronPreview = getCronPreview(cron);
   var cronValid = cronPreview !== "Invalid cron expression" && cronPreview !== "";
 
@@ -40,12 +45,12 @@ export function TaskEditModal(props: TaskEditModalProps) {
 
   return (
     <div
+      ref={modalRef}
       className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 backdrop-blur-sm"
       onClick={handleBackdrop}
       role="dialog"
       aria-modal="true"
       aria-label={task ? "Edit Task" : "New Scheduled Task"}
-      onKeyDown={function (e) { if (e.key === "Escape") onClose(); }}
     >
       <div className="bg-base-200 border border-base-content/15 rounded-2xl shadow-2xl w-full max-w-md mx-4">
         <div className="flex items-center justify-between px-5 py-4 border-b border-base-content/15">

package/client/src/components/workspace/WorkspaceView.tsx

@@ -9,14 +9,15 @@ import { TerminalView } from "./TerminalView";
 import { FileBrowser } from "./FileBrowser";
 import { NotesView } from "./NotesView";
 import { ScheduledTasksView } from "./ScheduledTasksView";
+import { BookmarksView } from "./BookmarksView";
 import type { Pane, Tab } from "../../stores/workspace";
 
-var TAB_COMPONENTS: Record<string, () => React.JSX.Element> = {
-  chat: ChatView,
+var NON_CHAT_COMPONENTS: Record<string, () => React.JSX.Element> = {
   files: FileBrowser,
   terminal: TerminalView,
   notes: NotesView,
   tasks: ScheduledTasksView,
+  bookmarks: BookmarksView,
 };
 
 function PaneContent({ pane, tabs, isActive, onFocus }: {
@@ -44,9 +45,20 @@ function PaneContent({ pane, tabs, isActive, onFocus }: {
       )}
       <div className="flex-1 min-h-0 relative">
         {paneTabs.map(function (tab) {
-          var Component = TAB_COMPONENTS[tab.type];
-          if (!Component) return null;
           var isTabActive = tab.id === pane.activeTabId;
+          if (tab.type === "chat") {
+            return (
+              <div
+                key={tab.id}
+                className="absolute inset-0"
+                style={{ display: isTabActive ? "flex" : "none", flexDirection: "column" }}
+              >
+                <ChatView sessionId={tab.sessionId} projectSlug={tab.projectSlug} />
+              </div>
+            );
+          }
+          var Component = NON_CHAT_COMPONENTS[tab.type];
+          if (!Component) return null;
           return (
             <div
               key={tab.id}
@@ -79,9 +91,20 @@ export function WorkspaceView() {
         )}
         <div className="flex-1 min-h-0 relative order-0 sm:order-none">
           {tabs.map(function (tab) {
-            var Component = TAB_COMPONENTS[tab.type];
-            if (!Component) return null;
             var isActive = singlePane ? tab.id === singlePane.activeTabId : tab.id === "chat";
+            if (tab.type === "chat") {
+              return (
+                <div
+                  key={tab.id}
+                  className="absolute inset-0"
+                  style={{ display: isActive ? "flex" : "none", flexDirection: "column" }}
+                >
+                  <ChatView sessionId={tab.sessionId} projectSlug={tab.projectSlug} />
+                </div>
+              );
+            }
+            var Component = NON_CHAT_COMPONENTS[tab.type];
+            if (!Component) return null;
             return (
               <div
                 key={tab.id}

package/client/src/hooks/useBookmarks.ts

@@ -0,0 +1,57 @@
+import { useEffect } from "react";
+import { useStore } from "@tanstack/react-store";
+import type { ServerMessage, BookmarkListResultMessage, MessageBookmark } from "@lattice/shared";
+import { useWebSocket } from "./useWebSocket";
+import { getBookmarkStore, setBookmarks, setAllBookmarks } from "../stores/bookmarks";
+import { getSessionStore } from "../stores/session";
+import type { BookmarkState } from "../stores/bookmarks";
+
+export function useBookmarks(): BookmarkState & {
+  requestSessionBookmarks: () => void;
+  requestAllBookmarks: () => void;
+} {
+  var store = getBookmarkStore();
+  var state = useStore(store, function (s) { return s; });
+  var { send, subscribe, unsubscribe } = useWebSocket();
+
+  useEffect(function () {
+    function handleBookmarkList(msg: ServerMessage) {
+      if (msg.type !== "bookmark:list_result") return;
+      var data = msg as BookmarkListResultMessage;
+      if (data.scope === "session") {
+        setBookmarks(data.bookmarks);
+      } else {
+        setAllBookmarks(data.bookmarks);
+        var sessionState = getSessionStore().state;
+        if (sessionState.activeSessionId) {
+          var sessionBookmarks = data.bookmarks.filter(function (b: MessageBookmark) {
+            return b.sessionId === sessionState.activeSessionId;
+          });
+          setBookmarks(sessionBookmarks);
+        }
+      }
+    }
+
+    subscribe("bookmark:list_result", handleBookmarkList);
+    return function () {
+      unsubscribe("bookmark:list_result", handleBookmarkList);
+    };
+  }, [subscribe, unsubscribe]);
+
+  function requestSessionBookmarks() {
+    var sessionState = getSessionStore().state;
+    if (!sessionState.activeSessionId || !sessionState.activeProjectSlug) return;
+    send({ type: "bookmark:list", projectSlug: sessionState.activeProjectSlug, sessionId: sessionState.activeSessionId });
+  }
+
+  function requestAllBookmarks() {
+    send({ type: "bookmark:list" });
+  }
+
+  return {
+    bookmarks: state.bookmarks,
+    allBookmarks: state.allBookmarks,
+    requestSessionBookmarks,
+    requestAllBookmarks,
+  };
+}

package/client/src/hooks/useFocusTrap.ts

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from "react";
+
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(", ");
+
+export function useFocusTrap(
+  containerRef: React.RefObject<HTMLElement | null>,
+  onClose: () => void,
+  active: boolean = true,
+): void {
+  var previouslyFocusedRef = useRef<HTMLElement | null>(null);
+
+  useEffect(function () {
+    if (!active) return;
+
+    var container = containerRef.current;
+    if (!container) return;
+
+    previouslyFocusedRef.current = document.activeElement as HTMLElement | null;
+
+    var focusable = container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    }
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        onClose();
+        return;
+      }
+
+      if (e.key !== "Tab") return;
+
+      var currentContainer = containerRef.current;
+      if (!currentContainer) return;
+
+      var elements = currentContainer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+      if (elements.length === 0) return;
+
+      var first = elements[0];
+      var last = elements[elements.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+
+    var el = container;
+    el.addEventListener("keydown", handleKeyDown);
+
+    return function () {
+      el.removeEventListener("keydown", handleKeyDown);
+      if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === "function") {
+        previouslyFocusedRef.current.focus();
+      }
+    };
+  }, [containerRef, onClose, active]);
+}

package/client/src/hooks/useProjects.ts

@@ -27,7 +27,7 @@ export function useProjects(): UseProjectsResult {
         var storeState = getSidebarStore().state;
         var currentSlug = storeState.activeProjectSlug;
         if (currentSlug !== null) {
-          var found = list.find(function (p) { return p.slug === currentSlug; });
+          var found = list.find(function (p: typeof list[number]) { return p.slug === currentSlug; });
           if (!found && list.length > 0) {
             setActiveProjectSlug(list[0].slug);
           }

package/client/src/hooks/useSession.ts

@@ -18,6 +18,7 @@ import type {
 } from "@lattice/shared";
 import { useWebSocket } from "./useWebSocket";
 import { setActiveSessionId as setSidebarSessionId } from "../stores/sidebar";
+import { updateSessionTabTitle } from "../stores/workspace";
 import {
   getSessionStore,
   setSessionMessages,
@@ -52,8 +53,10 @@ import {
   addPromptQuestion,
   addTodoUpdate,
   setIsPlanMode,
+  setBudgetStatus,
+  setBudgetExceeded,
 } from "../stores/session";
-import type { SessionState } from "../stores/session";
+import type { SessionState, BudgetStatus } from "../stores/session";
 
 var subscriptionsActive = 0;
 var activeStreamGeneration = 0;
@@ -73,6 +76,8 @@ export interface UseSessionReturn extends SessionState {
   removeQueuedMessage: (index: number) => void;
   updateQueuedMessage: (index: number, text: string) => void;
   clearMessageQueue: () => void;
+  sendBudgetOverride: () => void;
+  dismissBudgetExceeded: () => void;
 }
 
 export function useSession(): UseSessionReturn {
@@ -281,6 +286,9 @@ export function useSession(): UseSessionReturn {
         if (m.busy) {
           activeStreamGeneration = getStreamGeneration();
         }
+        if (m.title) {
+          updateSessionTabTitle(m.sessionId, m.title);
+        }
         getSessionStore().setState(function (state) {
           return {
             ...state,
@@ -358,6 +366,17 @@ export function useSession(): UseSessionReturn {
       setIsPlanMode(m.active);
     }
 
+    function handleBudgetStatus(msg: ServerMessage) {
+      var m = msg as { type: string; dailySpend: number; dailyLimit: number; enforcement: "warning" | "soft-block" | "hard-block" };
+      setBudgetStatus({ dailySpend: m.dailySpend, dailyLimit: m.dailyLimit, enforcement: m.enforcement });
+    }
+
+    function handleBudgetExceeded(msg: ServerMessage) {
+      setBudgetExceeded(true);
+      setIsProcessing(false);
+      setCurrentStatus(null);
+    }
+
     subscribe("chat:user_message", handleUserMessage);
     subscribe("chat:delta", handleDelta);
     subscribe("chat:tool_start", handleToolStart);
@@ -376,6 +395,8 @@ export function useSession(): UseSessionReturn {
     subscribe("chat:prompt_resolved", handlePromptResolved);
     subscribe("chat:todo_update", handleTodoUpdate);
     subscribe("chat:plan_mode", handlePlanMode);
+    subscribe("budget:status", handleBudgetStatus);
+    subscribe("budget:exceeded", handleBudgetExceeded);
 
     return function () {
       subscriptionsActive--;
@@ -397,6 +418,8 @@ export function useSession(): UseSessionReturn {
       unsubscribe("chat:prompt_resolved", handlePromptResolved);
       unsubscribe("chat:todo_update", handleTodoUpdate);
       unsubscribe("chat:plan_mode", handlePlanMode);
+      unsubscribe("budget:status", handleBudgetStatus);
+      unsubscribe("budget:exceeded", handleBudgetExceeded);
     };
   }, [subscribe, unsubscribe]);
 
@@ -424,9 +447,23 @@ export function useSession(): UseSessionReturn {
     isBusy: state.isBusy,
     isPlanMode: state.isPlanMode,
     pendingPrefill: state.pendingPrefill,
+    budgetStatus: state.budgetStatus,
+    budgetExceeded: state.budgetExceeded,
     enqueueMessage,
     removeQueuedMessage,
     updateQueuedMessage,
     clearMessageQueue,
+    sendBudgetOverride: function () {
+      setBudgetExceeded(false);
+      setIsProcessing(true);
+      sendRef.current({ type: "budget:override" } as never);
+    },
+    dismissBudgetExceeded: function () {
+      setBudgetExceeded(false);
+      if (lastSentText) {
+        setFailedInput(lastSentText);
+        lastSentText = null;
+      }
+    },
   };
 }

package/client/src/hooks/useTimeTick.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from "react";
+
+var globalTick = 0;
+var listeners = new Set<() => void>();
+var interval: ReturnType<typeof setInterval> | null = null;
+
+function startTicker() {
+  if (interval) return;
+  interval = setInterval(function () {
+    globalTick++;
+    listeners.forEach(function (cb) { cb(); });
+  }, 60000);
+}
+
+function stopTicker() {
+  if (listeners.size > 0) return;
+  if (interval) {
+    clearInterval(interval);
+    interval = null;
+  }
+}
+
+export function useTimeTick(): number {
+  var [tick, setTick] = useState(globalTick);
+  useEffect(function () {
+    function update() { setTick(globalTick); }
+    listeners.add(update);
+    startTicker();
+    return function () {
+      listeners.delete(update);
+      stopTicker();
+    };
+  }, []);
+  return tick;
+}

package/client/src/hooks/useVoiceRecorder.ts

@@ -1,5 +1,19 @@
 import { useState, useCallback, useRef } from "react";
 
+interface SpeechRecognitionLike extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  start(): void;
+  stop(): void;
+  abort(): void;
+  onresult: ((event: SpeechRecognitionEvent) => void) | null;
+  onerror: ((event: SpeechRecognitionErrorEvent) => void) | null;
+  onend: (() => void) | null;
+  onspeechstart: (() => void) | null;
+  onspeechend: (() => void) | null;
+}
+
 export interface UseVoiceRecorderReturn {
   isRecording: boolean;
   isSupported: boolean;
@@ -17,14 +31,14 @@ export function useVoiceRecorder(): UseVoiceRecorderReturn {
   var [elapsed, setElapsed] = useState(0);
   var [interimTranscript, setInterimTranscript] = useState("");
 
-  var recognitionRef = useRef<SpeechRecognition | null>(null);
+  var recognitionRef = useRef<SpeechRecognitionLike | null>(null);
   var timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   var finalTranscriptRef = useRef("");
   var startTimeRef = useRef(0);
 
   var SpeechRecognitionClass = typeof window !== "undefined"
-    ? (window as unknown as { SpeechRecognition?: typeof SpeechRecognition; webkitSpeechRecognition?: typeof SpeechRecognition }).SpeechRecognition
-      || (window as unknown as { webkitSpeechRecognition?: typeof SpeechRecognition }).webkitSpeechRecognition
+    ? (window as unknown as { SpeechRecognition?: new () => SpeechRecognitionLike; webkitSpeechRecognition?: new () => SpeechRecognitionLike }).SpeechRecognition
+      || (window as unknown as { webkitSpeechRecognition?: new () => SpeechRecognitionLike }).webkitSpeechRecognition
     : undefined;
 
   var isSupported = !!SpeechRecognitionClass;