- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(History, "sm"),
- onClick: () => {
- SessionListDialog.open(
- async (sessionId) => {
- await loadSession(sessionId);
- },
- (deletedSessionId) => {
- // Only reload if the current session was deleted
- if (deletedSessionId === currentSessionId) {
- newSession();
- }
- },
- );
- },
- title: "Sessions",
- })}
- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(Plus, "sm"),
- onClick: newSession,
- title: "New Session",
- })}
+ const appHtml = html`
+
+
+
+
+ ${Button({ variant: "ghost", size: "sm", children: icon(History, "sm"),
+ onClick: () => SessionListDialog.open(
+ async (id) => { await loadSession(id); },
+ (id) => { if (id === currentSessionId) newSession(); }
+ ), title: "Sessions (Ctrl+H)" })}
+ ${Button({ variant: "ghost", size: "sm", children: icon(Plus, "sm"), onClick: newSession, title: "New Session (Ctrl+N)" })}
+ ${
+ currentTitle
+ ? isEditingTitle
+ ? html`
+ ${Input({
+ type: "text", value: currentTitle, className: "text-sm w-64",
+ onChange: async (e: Event) => {
+ const newTitle = (e.target as HTMLInputElement).value.trim();
+ if (newTitle && newTitle !== currentTitle && storage.sessions && currentSessionId) {
+ await storage.sessions.updateTitle(currentSessionId, newTitle);
+ currentTitle = newTitle;
+ }
+ isEditingTitle = false; renderApp();
+ },
+ onKeyDown: async (e: KeyboardEvent) => {
+ if (e.key === "Enter") {
+ const newTitle = (e.target as HTMLInputElement).value.trim();
+ if (newTitle && newTitle !== currentTitle && storage.sessions && currentSessionId) {
+ await storage.sessions.updateTitle(currentSessionId, newTitle);
+ currentTitle = newTitle;
+ }
+ isEditingTitle = false; renderApp();
+ } else if (e.key === "Escape") { isEditingTitle = false; renderApp(); }
+ },
+ })}
+
`
+ : html`
`
+ : html`
JAE Web UI`
+ }
+
- ${
- currentTitle
- ? isEditingTitle
- ? html`
- ${Input({
- type: "text",
- value: currentTitle,
- className: "text-sm w-64",
- onChange: async (e: Event) => {
- const newTitle = (e.target as HTMLInputElement).value.trim();
- if (newTitle && newTitle !== currentTitle && storage.sessions && currentSessionId) {
- await storage.sessions.updateTitle(currentSessionId, newTitle);
- currentTitle = newTitle;
- }
- isEditingTitle = false;
- renderApp();
- },
- onKeyDown: async (e: KeyboardEvent) => {
- if (e.key === "Enter") {
- const newTitle = (e.target as HTMLInputElement).value.trim();
- if (newTitle && newTitle !== currentTitle && storage.sessions && currentSessionId) {
- await storage.sessions.updateTitle(currentSessionId, newTitle);
- currentTitle = newTitle;
- }
- isEditingTitle = false;
- renderApp();
- } else if (e.key === "Escape") {
- isEditingTitle = false;
- renderApp();
- }
- },
- })}
-
`
- : html`
`
- : html`
Pi Web UI Example`
- }
-
-
- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(Bell, "sm"),
- onClick: () => {
- // Demo: Inject custom message (will appear on next agent run)
- if (agent) {
- agent.steer(
- createSystemNotification(
- "This is a custom message! It appears in the UI but is never sent to the LLM.",
- ),
- );
- }
- },
- title: "Demo: Add Custom Notification",
- })}
-
- ${Button({
- variant: "ghost",
- size: "sm",
- children: icon(Settings, "sm"),
- onClick: () => SettingsDialog.open([new ProvidersModelsTab(), new ProxyTab()]),
- title: "Settings",
- })}
-
-
+
+
+
+ ${costTracker}
+
+ ${Button({ variant: "ghost", size: "sm", children: icon(Brain, "sm"),
+ onClick: () => memoryManager.show(), title: "Memory Manager" })}
+
+ ${Button({ variant: "ghost", size: "sm", children: icon(Download, "sm"),
+ onClick: () => handleExport(), title: "Export Session (Ctrl+E)" })}
+
+ ${Button({ variant: "ghost", size: "sm", children: icon(Keyboard, "sm"),
+ onClick: () => keyboardShortcuts.show(), title: "Keyboard Shortcuts (?)" })}
+
+ ${Button({ variant: "ghost", size: "sm",
+ children: html`⌘K`,
+ onClick: () => commandPalette.show(), title: "Command Palette (Ctrl+K)" })}
+
+ ${Button({ variant: "ghost", size: "sm", children: icon(Settings, "sm"),
+ onClick: () => SettingsDialog.open([new ProvidersModelsTab(), new ProxyTab()]),
+ title: "Settings" })}
+
+