@cryptiklemur/lattice 1.14.2 → 1.16.0

package/client/src/components/sidebar/Sidebar.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect, useRef } from "react";
-import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar, BarChart3 } from "lucide-react";
+import { Plus, ChevronDown, Search, LayoutDashboard, FolderOpen, TerminalSquare, StickyNote, Calendar, BarChart3, Bookmark } from "lucide-react";
 import { LatticeLogomark } from "../ui/LatticeLogomark";
 import type { SessionSummary, ServerMessage, SettingsDataMessage } from "@lattice/shared";
+import type { DateRange } from "./SessionList";
 import { useProjects } from "../../hooks/useProjects";
 import { useMesh } from "../../hooks/useMesh";
 import { useWebSocket } from "../../hooks/useWebSocket";
@@ -9,7 +10,7 @@ import { useSidebar } from "../../hooks/useSidebar";
 import { useSession } from "../../hooks/useSession";
 import { clearSession } from "../../stores/session";
 import { useOnline } from "../../hooks/useOnline";
-import { openTab } from "../../stores/workspace";
+import { openTab, openSessionTab } from "../../stores/workspace";
 import { getSidebarStore, goToAnalytics } from "../../stores/sidebar";
 import { ProjectRail } from "./ProjectRail";
 import { SessionList } from "./SessionList";
@@ -19,6 +20,146 @@ import { SearchFilter } from "./SearchFilter";
 import { ProjectDropdown } from "./ProjectDropdown";
 import { SettingsSidebar } from "./SettingsSidebar";
 
+type DatePreset = "all" | "today" | "yesterday" | "week" | "month" | "custom";
+
+var DATE_PRESET_LABELS: Record<DatePreset, string> = {
+  all: "All time",
+  today: "Today",
+  yesterday: "Yesterday",
+  week: "This week",
+  month: "This month",
+  custom: "Custom",
+};
+
+function computeDateRange(preset: DatePreset, customFrom?: string, customTo?: string): DateRange {
+  if (preset === "all") return {};
+  var now = new Date();
+  var todayStart = new Date(now);
+  todayStart.setHours(0, 0, 0, 0);
+
+  if (preset === "today") {
+    return { from: todayStart.getTime() };
+  }
+  if (preset === "yesterday") {
+    var yesterdayStart = new Date(todayStart);
+    yesterdayStart.setDate(yesterdayStart.getDate() - 1);
+    return { from: yesterdayStart.getTime(), to: todayStart.getTime() };
+  }
+  if (preset === "week") {
+    var weekStart = new Date(todayStart);
+    weekStart.setDate(weekStart.getDate() - weekStart.getDay());
+    return { from: weekStart.getTime() };
+  }
+  if (preset === "month") {
+    var monthStart = new Date(todayStart.getFullYear(), todayStart.getMonth(), 1);
+    return { from: monthStart.getTime() };
+  }
+  if (preset === "custom") {
+    var range: DateRange = {};
+    if (customFrom) {
+      range.from = new Date(customFrom + "T00:00:00").getTime();
+    }
+    if (customTo) {
+      var toDate = new Date(customTo + "T23:59:59");
+      range.to = toDate.getTime() + 999;
+    }
+    return range;
+  }
+  return {};
+}
+
+function DateRangeDropdown({ dateRange, onChange }: { dateRange: DateRange; onChange: (r: DateRange, preset: DatePreset) => void }) {
+  var [open, setOpen] = useState(false);
+  var [preset, setPreset] = useState<DatePreset>("all");
+  var [customFrom, setCustomFrom] = useState("");
+  var [customTo, setCustomTo] = useState("");
+  var dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(function () {
+    if (!open) return;
+    function dismiss(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", dismiss);
+    return function () { document.removeEventListener("mousedown", dismiss); };
+  }, [open]);
+
+  function handlePreset(p: DatePreset) {
+    setPreset(p);
+    if (p !== "custom") {
+      onChange(computeDateRange(p), p);
+      setOpen(false);
+    }
+  }
+
+  function handleCustomApply() {
+    onChange(computeDateRange("custom", customFrom, customTo), "custom");
+    setOpen(false);
+  }
+
+  var hasFilter = preset !== "all";
+
+  return (
+    <div ref={dropdownRef} className="relative">
+      <button
+        type="button"
+        onClick={function () { setOpen(function (v) { return !v; }); }}
+        className={"btn btn-ghost btn-xs btn-square " + (hasFilter ? "text-primary" : "text-base-content/40 hover:text-base-content")}
+        aria-label="Filter by date"
+        title={DATE_PRESET_LABELS[preset]}
+      >
+        <Calendar size={13} />
+      </button>
+      {open && (
+        <div className="absolute top-full right-0 mt-1 z-[9999] bg-base-300 border border-base-content/15 rounded-lg shadow-xl min-w-[180px] py-1">
+          {(["all", "today", "yesterday", "week", "month", "custom"] as DatePreset[]).map(function (p) {
+            return (
+              <button
+                key={p}
+                type="button"
+                onClick={function () { handlePreset(p); }}
+                className={
+                  "block w-full text-left px-3 py-1.5 text-[12px] transition-colors duration-75 " +
+                  (preset === p ? "text-primary bg-primary/10" : "text-base-content/70 hover:bg-base-content/5 hover:text-base-content")
+                }
+              >
+                {DATE_PRESET_LABELS[p]}
+              </button>
+            );
+          })}
+          {preset === "custom" && (
+            <div className="px-3 py-2 border-t border-base-content/10 flex flex-col gap-1.5">
+              <label className="text-[10px] text-base-content/40 uppercase tracking-wider">From</label>
+              <input
+                type="date"
+                value={customFrom}
+                onChange={function (e) { setCustomFrom(e.target.value); }}
+                className="h-7 px-2 bg-base-200 border border-base-content/15 rounded text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors [color-scheme:dark]"
+              />
+              <label className="text-[10px] text-base-content/40 uppercase tracking-wider">To</label>
+              <input
+                type="date"
+                value={customTo}
+                onChange={function (e) { setCustomTo(e.target.value); }}
+                className="h-7 px-2 bg-base-200 border border-base-content/15 rounded text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors [color-scheme:dark]"
+              />
+              <button
+                type="button"
+                onClick={handleCustomApply}
+                className="btn btn-xs btn-primary mt-1"
+              >
+                Apply
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SectionLabel({ label, actions }: { label: string; actions?: React.ReactNode }) {
   return (
     <div className="px-4 pt-4 pb-2 flex items-center justify-between flex-shrink-0 select-none">
@@ -43,6 +184,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
   var session = useSession();
   var [sessionSearch, setSessionSearch] = useState<string>("");
   var [sessionSearchOpen, setSessionSearchOpen] = useState<boolean>(false);
+  var [sessionDateRange, setSessionDateRange] = useState<DateRange>({});
   var userIslandRef = useRef<HTMLElement | null>(null);
   var projectHeaderRef = useRef<HTMLElement | null>(null);
 
@@ -72,6 +214,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
     if (!sidebar.activeProjectSlug || !sidebar.activeSessionId) return;
     if (!activeProject) return;
     initialActivatedRef.current = true;
+    openSessionTab(sidebar.activeSessionId, sidebar.activeProjectSlug, "Session");
     session.activateSession(sidebar.activeProjectSlug, sidebar.activeSessionId);
   }, [sidebar.activeProjectSlug, sidebar.activeSessionId, activeProject]);
 
@@ -79,6 +222,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
 
   function handleSessionActivate(s: SessionSummary) {
     if (activeProject) {
+      openSessionTab(s.id, activeProject.slug, s.title);
       session.activateSession(activeProject.slug, s.id);
     }
     sidebar.closeMenus();
@@ -154,6 +298,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                     { type: "terminal" as const, icon: TerminalSquare, label: "Terminal" },
                     { type: "notes" as const, icon: StickyNote, label: "Notes" },
                     { type: "tasks" as const, icon: Calendar, label: "Tasks" },
+                    { type: "bookmarks" as const, icon: Bookmark, label: "Bookmarks" },
                   ].map(function (item) {
                     return (
                       <button
@@ -192,6 +337,10 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                       <button onClick={function () { setSessionSearchOpen(function (v) { return !v; }); }} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="Search sessions">
                         <Search size={13} />
                       </button>
+                      <DateRangeDropdown
+                        dateRange={sessionDateRange}
+                        onChange={function (r) { setSessionDateRange(r); }}
+                      />
                       <button onClick={handleNewSession} disabled={!online} className="btn btn-ghost btn-xs btn-square text-base-content/40 hover:text-base-content" aria-label="New session">
                         <Plus size={13} />
                       </button>
@@ -212,6 +361,7 @@ export function Sidebar({ onSessionSelect }: { onSessionSelect?: () => void }) {
                   onSessionActivate={handleSessionActivate}
                   onSessionDeactivate={clearSession}
                   filter={sessionSearch}
+                  dateRange={sessionDateRange}
                 />
               </>
             )}

package/client/src/components/sidebar/UserIsland.tsx

@@ -1,7 +1,10 @@
+import { useState } from "react";
 import { Sun, Moon, Settings, Download } from "lucide-react";
+import { useStore } from "@tanstack/react-store";
 import { useTheme } from "../../hooks/useTheme";
 import { useSidebar } from "../../hooks/useSidebar";
 import { useInstallPrompt } from "../../hooks/useInstallPrompt";
+import { getSessionStore } from "../../stores/session";
 import pkg from "../../../package.json";
 
 interface UserIslandProps {
@@ -13,57 +16,93 @@ export function UserIsland(props: UserIslandProps) {
   var { mode, toggleMode } = useTheme();
   var sidebar = useSidebar();
   var { canInstall, install } = useInstallPrompt();
+  var budgetStatus = useStore(getSessionStore(), function (s) { return s.budgetStatus; });
+  var [showTooltip, setShowTooltip] = useState(false);
 
   var initial = props.nodeName.charAt(0).toUpperCase();
 
+  var budgetBar = null;
+  if (budgetStatus && budgetStatus.dailyLimit > 0) {
+    var pct = Math.min((budgetStatus.dailySpend / budgetStatus.dailyLimit) * 100, 100);
+    var remaining = Math.max(budgetStatus.dailyLimit - budgetStatus.dailySpend, 0);
+    var barColor = pct >= 100
+      ? "bg-error"
+      : pct >= 80
+        ? "bg-warning"
+        : "bg-primary";
+
+    budgetBar = (
+      <div
+        className="px-3 pt-2 pb-0 relative"
+        onMouseEnter={function () { setShowTooltip(true); }}
+        onMouseLeave={function () { setShowTooltip(false); }}
+      >
+        <div className="h-1.5 rounded-full bg-base-content/8 overflow-hidden">
+          <div
+            className={"h-full rounded-full transition-all duration-300 " + barColor}
+            style={{ width: pct + "%" }}
+          />
+        </div>
+        {showTooltip && (
+          <div className="absolute bottom-full left-3 right-3 mb-1.5 px-2.5 py-1.5 bg-base-100 border border-base-content/10 rounded-lg shadow-lg z-50 text-[11px] font-mono text-base-content/70 whitespace-nowrap">
+            <div>Daily spend: ${budgetStatus.dailySpend.toFixed(2)} / ${budgetStatus.dailyLimit.toFixed(2)}</div>
+            <div className="text-base-content/40">Remaining: ${remaining.toFixed(2)}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div
       role="group"
       aria-label="User controls"
-      className="flex items-center gap-2 px-3 py-2"
     >
-      <button
-        onClick={props.onClick}
-        className="flex items-center gap-2 flex-1 min-w-0 rounded-lg px-1 py-1 -mx-1 hover:bg-base-content/5 transition-colors duration-[120ms] cursor-pointer"
-        aria-label="Node info"
-      >
-        <div className="w-7 h-7 rounded-full bg-primary text-primary-content text-[12px] font-bold flex items-center justify-center flex-shrink-0">
-          {initial}
-        </div>
-        <div className="flex-1 min-w-0 text-left">
-          <div className="text-[13px] font-semibold text-base-content truncate">
-            {props.nodeName}
+      {budgetBar}
+      <div className="flex items-center gap-2 px-3 py-2">
+        <button
+          onClick={props.onClick}
+          className="flex items-center gap-2 flex-1 min-w-0 rounded-lg px-1 py-1 -mx-1 hover:bg-base-content/5 transition-colors duration-[120ms] cursor-pointer"
+          aria-label="Node info"
+        >
+          <div className="w-7 h-7 rounded-full bg-primary text-primary-content text-[12px] font-bold flex items-center justify-center flex-shrink-0">
+            {initial}
           </div>
-          <div className="text-[10px] text-base-content/30 font-mono">
-            {"v" + pkg.version}
+          <div className="flex-1 min-w-0 text-left">
+            <div className="text-[13px] font-semibold text-base-content truncate">
+              {props.nodeName}
+            </div>
+            <div className="text-[10px] text-base-content/30 font-mono">
+              {"v" + pkg.version}
+            </div>
           </div>
-        </div>
-      </button>
+        </button>
 
-      <div className="flex items-center gap-0.5 flex-shrink-0">
-        {canInstall && (
+        <div className="flex items-center gap-0.5 flex-shrink-0">
+          {canInstall && (
+            <button
+              aria-label="Install Lattice"
+              onClick={install}
+              className="btn btn-ghost btn-xs btn-square text-primary/60 hover:text-primary transition-colors"
+            >
+              <Download size={14} />
+            </button>
+          )}
           <button
-            aria-label="Install Lattice"
-            onClick={install}
-            className="btn btn-ghost btn-xs btn-square text-primary/60 hover:text-primary transition-colors"
+            aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+            onClick={function (e) { e.stopPropagation(); toggleMode(); }}
+            className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
           >
-            <Download size={14} />
+            {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
           </button>
-        )}
-        <button
-          aria-label={mode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
-          onClick={function (e) { e.stopPropagation(); toggleMode(); }}
-          className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
-        >
-          {mode === "dark" ? <Sun size={14} /> : <Moon size={14} />}
-        </button>
-        <button
-          aria-label="Global settings"
-          onClick={function () { sidebar.openSettings("appearance"); }}
-          className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
-        >
-          <Settings size={14} />
-        </button>
+          <button
+            aria-label="Global settings"
+            onClick={function () { sidebar.openSettings("appearance"); }}
+            className="btn btn-ghost btn-xs btn-square text-base-content/30 hover:text-base-content transition-colors"
+          >
+            <Settings size={14} />
+          </button>
+        </div>
       </div>
     </div>
   );

package/client/src/components/ui/IconPicker.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo } from "react";
 import { icons } from "lucide-react";
 import type { ProjectIcon } from "@lattice/shared";
 
-type Tab = "lucide" | "emoji" | "text" | "upload";
+type Tab = "lucide" | "text" | "upload";
 
 interface IconPickerProps {
   value?: ProjectIcon;
@@ -28,14 +28,6 @@ function renderPreview(value?: ProjectIcon) {
     );
   }
 
-  if (value.type === "emoji") {
-    return (
-      <div className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-[18px]">
-        {value.value}
-      </div>
-    );
-  }
-
   if (value.type === "text") {
     return (
       <div
@@ -57,11 +49,11 @@ function renderPreview(value?: ProjectIcon) {
 }
 
 export function IconPicker({ value, onChange }: IconPickerProps) {
-  var [tab, setTab] = useState<Tab>(value?.type === "emoji" ? "emoji" : value?.type === "text" ? "text" : value?.type === "image" ? "upload" : "lucide");
+  var normalizedValue = value && (value as { type: string }).type === "emoji" ? undefined : value;
+  var [tab, setTab] = useState<Tab>(normalizedValue?.type === "text" ? "text" : normalizedValue?.type === "image" ? "upload" : "lucide");
   var [search, setSearch] = useState("");
-  var [emojiValue, setEmojiValue] = useState(value?.type === "emoji" ? value.value : "");
-  var [textValue, setTextValue] = useState(value?.type === "text" ? value.value : "");
-  var [textColor, setTextColor] = useState(value?.type === "text" ? (value.color || "#ffffff") : "#ffffff");
+  var [textValue, setTextValue] = useState(normalizedValue?.type === "text" ? normalizedValue.value : "");
+  var [textColor, setTextColor] = useState(normalizedValue?.type === "text" ? (normalizedValue.color || "#ffffff") : "#ffffff");
 
   var iconNames = useMemo(function () {
     var allNames = Object.keys(icons);
@@ -74,7 +66,6 @@ export function IconPicker({ value, onChange }: IconPickerProps) {
 
   var tabs: { id: Tab; label: string }[] = [
     { id: "lucide", label: "Lucide" },
-    { id: "emoji", label: "Emoji" },
     { id: "text", label: "Text" },
     { id: "upload", label: "Upload" },
   ];
@@ -93,7 +84,7 @@ export function IconPicker({ value, onChange }: IconPickerProps) {
   return (
     <div className="space-y-3">
       <div className="flex items-center gap-3">
-        {renderPreview(value)}
+        {renderPreview(normalizedValue)}
         <span className="text-[11px] text-base-content/40">Current icon</span>
       </div>
 
@@ -124,7 +115,7 @@ export function IconPicker({ value, onChange }: IconPickerProps) {
           <div className="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
             {iconNames.map(function (name) {
               var Icon = icons[name as keyof typeof icons];
-              var selected = value?.type === "lucide" && value.name === name;
+              var selected = normalizedValue?.type === "lucide" && normalizedValue.name === name;
               return (
                 <button
                   key={name}
@@ -144,24 +135,6 @@ export function IconPicker({ value, onChange }: IconPickerProps) {
         </div>
       )}
 
-      {tab === "emoji" && (
-        <div>
-          <input
-            type="text"
-            value={emojiValue}
-            maxLength={2}
-            onChange={function (e) {
-              setEmojiValue(e.target.value);
-              if (e.target.value) {
-                onChange({ type: "emoji", value: e.target.value });
-              }
-            }}
-            placeholder="Enter emoji"
-            className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
-          />
-        </div>
-      )}
-
       {tab === "text" && (
         <div className="flex gap-2">
           <input
@@ -199,8 +172,8 @@ export function IconPicker({ value, onChange }: IconPickerProps) {
             onChange={handleFileChange}
             className="w-full text-[12px] text-base-content/60 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[12px] file:bg-base-300 file:text-base-content/60 file:cursor-pointer"
           />
-          {value?.type === "image" && (
-            <img src={value.path} alt="preview" className="w-16 h-16 rounded-xl object-cover border border-base-content/15" loading="lazy" />
+          {normalizedValue?.type === "image" && (
+            <img src={normalizedValue.path} alt="preview" className="w-16 h-16 rounded-xl object-cover border border-base-content/15" loading="lazy" />
           )}
         </div>
       )}

package/client/src/components/ui/KeyboardShortcuts.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+
+interface ShortcutEntry {
+  keys: string[];
+  description: string;
+}
+
+interface ShortcutCategory {
+  name: string;
+  shortcuts: ShortcutEntry[];
+}
+
+var isMac = typeof navigator !== "undefined" && navigator.platform.indexOf("Mac") !== -1;
+var modKey = isMac ? "\u2318" : "Ctrl";
+
+var categories: ShortcutCategory[] = [
+  {
+    name: "Chat",
+    shortcuts: [
+      { keys: ["Enter"], description: "Send message" },
+      { keys: ["Shift", "Enter"], description: "New line" },
+      { keys: ["\u2191"], description: "Previous input history" },
+      { keys: ["\u2193"], description: "Next input history" },
+      { keys: ["/"], description: "Slash commands" },
+      { keys: ["Escape"], description: "Close autocomplete" },
+    ],
+  },
+  {
+    name: "Navigation",
+    shortcuts: [
+      { keys: [modKey, "K"], description: "Command palette" },
+      { keys: ["?"], description: "Keyboard shortcuts" },
+      { keys: ["Escape"], description: "Close modal / exit settings" },
+    ],
+  },
+  {
+    name: "Session",
+    shortcuts: [
+      { keys: ["/clear"], description: "New session" },
+      { keys: ["/copy"], description: "Copy last response" },
+      { keys: ["/export"], description: "Export conversation" },
+      { keys: ["/rename"], description: "Rename session" },
+    ],
+  },
+];
+
+function Kbd(props: { children: string }) {
+  return (
+    <kbd className="bg-base-300 border border-base-content/20 rounded px-1.5 py-0.5 text-[11px] font-mono text-base-content/70 leading-none inline-flex items-center justify-center min-w-[22px]">
+      {props.children}
+    </kbd>
+  );
+}
+
+export function KeyboardShortcuts() {
+  var [open, setOpen] = useState(false);
+
+  useEffect(function () {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "?" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        var tag = (e.target as HTMLElement).tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement).isContentEditable) return;
+        e.preventDefault();
+        setOpen(true);
+      }
+      if (e.key === "Escape" && open) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return function () { document.removeEventListener("keydown", handleKeyDown); };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[9998] flex items-center justify-center" onClick={function () { setOpen(false); }}>
+      <div className="absolute inset-0 bg-black/50" />
+      <div
+        className="relative w-full max-w-[540px] mx-4 bg-base-200 border border-base-content/15 rounded-2xl shadow-xl overflow-hidden"
+        onClick={function (e) { e.stopPropagation(); }}
+      >
+        <div className="flex items-center justify-between px-5 py-3.5 border-b border-base-content/10">
+          <h2 className="text-[14px] font-mono font-bold text-base-content tracking-tight">Keyboard Shortcuts</h2>
+          <button
+            onClick={function () { setOpen(false); }}
+            className="w-6 h-6 rounded flex items-center justify-center text-base-content/30 hover:text-base-content/60 transition-colors"
+          >
+            <X size={14} />
+          </button>
+        </div>
+        <div className="px-5 py-4 max-h-[70vh] overflow-y-auto">
+          <div className="flex flex-col gap-5">
+            {categories.map(function (cat) {
+              return (
+                <div key={cat.name}>
+                  <div className="text-[9px] uppercase tracking-widest text-base-content/30 font-mono font-bold mb-2">{cat.name}</div>
+                  <div className="flex flex-col gap-1">
+                    {cat.shortcuts.map(function (shortcut, i) {
+                      return (
+                        <div key={i} className="flex items-center justify-between py-1.5 px-2 rounded hover:bg-base-content/5 transition-colors">
+                          <span className="text-[13px] text-base-content/60">{shortcut.description}</span>
+                          <div className="flex items-center gap-1 flex-shrink-0 ml-4">
+                            {shortcut.keys.map(function (key, ki) {
+                              return (
+                                <span key={ki} className="flex items-center gap-1">
+                                  {ki > 0 && <span className="text-[10px] text-base-content/20">+</span>}
+                                  <Kbd>{key}</Kbd>
+                                </span>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <div className="px-5 py-2.5 border-t border-base-content/10 flex justify-end">
+          <span className="text-[10px] font-mono text-base-content/20">Press <Kbd>Esc</Kbd> to close</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/ui/Toast.tsx

@@ -1,10 +1,17 @@
 import { useEffect, useState, useCallback } from "react";
 import { X, Info, AlertTriangle, AlertCircle } from "lucide-react";
 
+export interface ToastOptions {
+  persistent?: boolean;
+  duration?: number;
+}
+
 export interface ToastItem {
   id: string;
   message: string;
   type: "info" | "error" | "warning";
+  persistent?: boolean;
+  duration?: number;
 }
 
 interface ToastProps {
@@ -63,11 +70,20 @@ export function Toast(props: ToastProps) {
 
 var toastListeners: Array<(item: ToastItem) => void> = [];
 
-export function showToast(message: string, type: ToastItem["type"] = "info"): void {
+export function showToast(message: string, type: ToastItem["type"] = "info", options?: ToastOptions): void {
+  var persistent = options?.persistent;
+  var duration = options?.duration;
+
+  if (type === "error" && persistent === undefined && duration === undefined) {
+    persistent = true;
+  }
+
   var item: ToastItem = {
     id: Math.random().toString(36).slice(2),
     message,
     type,
+    persistent,
+    duration,
   };
   toastListeners.forEach(function (listener) {
     listener(item);
@@ -90,13 +106,17 @@ export function useToastState(): { items: ToastItem[]; dismiss: (id: string) =>
       setItems(function (prev) {
         return [...prev, item];
       });
+
+      if (item.persistent) return;
+
+      var timeout = item.duration ?? 5000;
       setTimeout(function () {
         setItems(function (prev) {
           return prev.filter(function (i) {
             return i.id !== item.id;
           });
         });
-      }, 5000);
+      }, timeout);
     }
 
     toastListeners.push(listener);