diff --git a/docs/web/control-ui.md b/docs/web/control-ui.md index 241853a2946..ade9ac3537d 100644 --- a/docs/web/control-ui.md +++ b/docs/web/control-ui.md @@ -119,7 +119,7 @@ Appearance also has a browser-local Text size setting, stored with the rest of C The sidebar pins navigation above a scrollable recent-session list split into **Pinned**, one section per custom group (the session `category`, sorted alphabetically), and **Ungrouped** for the rest. Every pinned session stays visible, while unpinned sessions keep an independent nine-item recent budget. Opening a visible session moves the selection highlight without reordering the rows; an off-list deep link is surfaced at the top. Sessions with new activity since they were last read show an unread dot, and opening one marks it read. Each session row has a context menu (kebab button or right-click) with Pin/Unpin, Mark as unread/read, Rename, Fork, Move to group (including New group and Remove from group), Archive, and Delete; touch layouts keep the direct pin and menu controls visible. Group headers have their own menu (kebab button or right-click) with Rename group, New group, and Delete group; renaming or deleting a group updates every member session, including archived ones, and deleting a group keeps its sessions and moves them back to Ungrouped. Groups created from the header start empty and stay visible as move targets. The sort control in the session list header also has a Group by toggle: Custom groups (default) or None for one flat list (Pinned stays separate); the choice is stored in the current browser profile. Multi-agent setups show a compact scope control in the Ungrouped header. **Overview** is the only destination pinned by default; expand **More** to reach every other destination. Select **Customize sidebar** under More, or right-click the navigation area, to pin or unpin destinations and restore the defaults. The pinned set and More expansion state are stored in the current browser profile and survive reloads. -The compact footer keeps connection status, **Settings**, **Docs**, mobile pairing, and the sidebar collapse toggle together. Collapsing shrinks the sidebar to an icon rail with the expand button at the top of the footer stack. At drawer breakpoints, the topbar hamburger button replaces that control. +A **Search** field at the top of the sidebar opens the command palette (⌘K). The compact footer keeps connection status, **Settings**, **Docs**, mobile pairing, and the light/dark/system color-mode toggle together. The sidebar collapse toggle sits at the left edge of the top bar, macOS style; collapsing shrinks the sidebar to an icon rail. At drawer breakpoints, the same top bar button opens the sidebar as a slide-over drawer instead. ## What it can do (today) @@ -239,7 +239,7 @@ The terminal is also available as a full-screen, terminal-only document at `/?vi - Live `chat` events are delivery state, while `chat.history` is rebuilt from the durable session transcript. After tool-final events the Control UI reloads history and merges only a small optimistic tail; the transcript boundary is documented in [WebChat](/web/webchat). - `chat.inject` appends an assistant note to the session transcript and broadcasts a `chat` event for UI-only updates (no agent run, no channel delivery). - The sidebar lists recent sessions by pinned/custom/ungrouped section with a New Session action and an All Sessions link. Pinned sessions always stay visible; unpinned sessions keep a nine-item budget and a stable recency order, so opening a visible row moves only the highlight. A new dashboard session asynchronously gets a concise generated title from its first non-command message; explicit names are never replaced. Set `agents.defaults.utilityModel` (or `agents.list[].utilityModel`) to route this separate model call to a lower-cost model. Switching the compact agent scope shows only sessions tied to that agent and falls back to that agent's main session when it has no saved dashboard sessions yet. - - Session search lives in the command palette (⌘K, or the search button in the top bar): typing a query follows a bounded number of matching pages across agents, filters internal child/cron rows, and lists visible matches next to navigation commands. The All Sessions page keeps the exhaustive searchable list with filters. + - Session search lives in the command palette (⌘K, or the Search field at the top of the sidebar): typing a query follows a bounded number of matching pages across agents, filters internal child/cron rows, and lists visible matches next to navigation commands. The All Sessions page keeps the exhaustive searchable list with filters. - Each sidebar row keeps direct pin access plus a full context menu for unread state, rename, fork, grouping, archive, and delete. An active run and an agent's main session cannot be archived. Archiving or deleting the currently selected session switches Chat back to that agent's main session. - In the macOS app, the OpenClaw mark uses the otherwise-empty native titlebar strip next to the window controls instead of consuming a sidebar row. - On desktop widths, chat controls stay on one compact row and collapse while scrolling down the transcript; scrolling up, returning to the top, or reaching the bottom restores the controls. diff --git a/ui/src/app/app-host.ts b/ui/src/app/app-host.ts index 3d7b7f4fce4..71c8ead723c 100644 --- a/ui/src/app/app-host.ts +++ b/ui/src/app/app-host.ts @@ -707,15 +707,17 @@ class OpenClawShell extends LitElement { .basePath=${context.basePath} .agentLabel=${this.agentLabel} .overviewHref=${pathForRoute("overview", context.basePath)} - .searchDisabled=${false} .navDrawerOpen=${navDrawerOpen} - .themeMode=${context.theme.mode} + .navCollapsed=${navCollapsed} .onboarding=${this.onboarding} - .onOpenPalette=${this.openPalette} .terminalAvailable=${this.terminalAvailable} .onToggleTerminal=${() => window.dispatchEvent(new CustomEvent("openclaw:terminal-toggle"))} .onToggleDrawer=${(trigger: HTMLElement) => this.toggleNavDrawer(trigger)} + .onToggleCollapse=${() => + context.navigation.update({ + navCollapsed: !navCollapsed, + })} .onNavigate=${(routeId: string, options?: ApplicationNavigationOptions) => this.navigate(routeId, options)} > @@ -733,10 +735,7 @@ class OpenClawShell extends LitElement { .sidebarPinnedRoutes=${this.sidebarPinnedRoutes} .sidebarMoreExpanded=${this.sidebarMoreExpanded} .themeMode=${context.theme.mode} - .onToggleCollapse=${() => - context.navigation.update({ - navCollapsed: !navCollapsed, - })} + .onOpenPalette=${this.openPalette} .onToggleMore=${() => context.navigation.update({ sidebarMoreExpanded: !context.navigation.snapshot.sidebarMoreExpanded, diff --git a/ui/src/components/app-sidebar.ts b/ui/src/components/app-sidebar.ts index 7d8d8af9503..f43088f026c 100644 --- a/ui/src/components/app-sidebar.ts +++ b/ui/src/components/app-sidebar.ts @@ -94,6 +94,11 @@ type SidebarSessionSortMode = "created" | "updated"; const SIDEBAR_SESSION_GROUPING_STORAGE_KEY = "openclaw:sidebar:sessions:grouping"; +// Command palette shortcut hint (see command-palette.ts keydown handling). +const PALETTE_SHORTCUT = /Mac|iP(hone|ad|od)/i.test(globalThis.navigator?.platform ?? "") + ? "⌘K" + : "Ctrl K"; + function loadStoredSidebarSessionsGrouping(): SidebarSessionsGrouping { return normalizeSidebarSessionsGrouping( getSafeLocalStorage()?.getItem(SIDEBAR_SESSION_GROUPING_STORAGE_KEY), @@ -136,7 +141,7 @@ export class AppSidebar extends LitElement { DEFAULT_SIDEBAR_PINNED_ROUTES; @property({ attribute: false }) sidebarMoreExpanded = false; @property({ attribute: false }) themeMode: ThemeMode = "system"; - @property({ attribute: false }) onToggleCollapse?: () => void; + @property({ attribute: false }) onOpenPalette?: () => void; @property({ attribute: false }) onToggleMore?: () => void; @property({ attribute: false }) onUpdatePinnedRoutes?: (routes: SidebarNavRoute[]) => void; @property({ attribute: false }) onPairMobile?: () => void; @@ -1518,6 +1523,30 @@ export class AppSidebar extends LitElement { `; } + /** Command palette entry point; the palette itself is owned by the shell. */ + private renderSearch() { + const row = html` + + `; + return this.collapsed + ? html`${row}` + : row; + } + private renderMoreSection() { if (this.collapsed) { return nothing; @@ -1593,6 +1622,7 @@ export class AppSidebar extends LitElement { />
+ ${this.renderSearch()}
diff --git a/ui/src/components/app-topbar.ts b/ui/src/components/app-topbar.ts index 5816fcefdef..2e27245e03b 100644 --- a/ui/src/components/app-topbar.ts +++ b/ui/src/components/app-topbar.ts @@ -1,13 +1,15 @@ import { LitElement, html, nothing } from "lit"; import { property } from "lit/decorators.js"; import type { NavigationRouteId } from "../app-navigation.ts"; -import type { ThemeMode } from "../app/theme.ts"; import "./dashboard-header.ts"; -import "./theme-mode-toggle.ts"; import "./tooltip.ts"; import { t } from "../i18n/index.ts"; import { icons } from "./icons.ts"; +// Mirrors the layout.mobile.css breakpoint where the sidebar becomes a +// slide-over drawer; the one topbar toggle switches behavior there. +const NAV_DRAWER_MEDIA_QUERY = "(max-width: 1100px)"; + export class AppTopbar extends LitElement { override createRenderRoot() { return this; @@ -17,30 +19,69 @@ export class AppTopbar extends LitElement { @property({ attribute: false }) basePath = ""; @property({ attribute: false }) agentLabel = ""; @property({ attribute: false }) navDrawerOpen = false; + @property({ attribute: false }) navCollapsed = false; @property({ attribute: false }) onboarding = false; - @property({ attribute: false }) routeOwnsHeader = false; - @property({ attribute: false }) headerError: string | null = null; - @property({ attribute: false }) themeMode: ThemeMode = "system"; @property({ attribute: false }) onToggleDrawer?: (trigger: HTMLElement) => void; - @property({ attribute: false }) onOpenPalette?: () => void; + @property({ attribute: false }) onToggleCollapse?: () => void; @property({ attribute: false }) onToggleTerminal?: () => void; @property({ attribute: false }) onNavigate?: (routeId: NavigationRouteId) => void; @property({ attribute: false }) overviewHref = ""; - @property({ attribute: false }) searchDisabled = false; @property({ attribute: false }) terminalAvailable = false; + private drawerMedia?: MediaQueryList; + private drawerMediaCleanup?: () => void; + override connectedCallback() { super.connectedCallback(); this.style.display = "contents"; + if (typeof globalThis.matchMedia === "function") { + const media = globalThis.matchMedia(NAV_DRAWER_MEDIA_QUERY); + this.drawerMedia = media; + // Older WebViews expose only the legacy addListener API (see the same + // pattern in app/bootstrap.ts). + if (typeof media.addEventListener === "function") { + media.addEventListener("change", this.handleDrawerMediaChange); + this.drawerMediaCleanup = () => + media.removeEventListener("change", this.handleDrawerMediaChange); + } else if (typeof media.addListener === "function") { + media.addListener(this.handleDrawerMediaChange); + this.drawerMediaCleanup = () => media.removeListener(this.handleDrawerMediaChange); + } + } + } + + override disconnectedCallback() { + this.drawerMediaCleanup?.(); + this.drawerMediaCleanup = undefined; + this.drawerMedia = undefined; + super.disconnectedCallback(); + } + + private readonly handleDrawerMediaChange = () => { + this.requestUpdate(); + }; + + private get drawerMode(): boolean { + return this.drawerMedia?.matches ?? false; } private readonly handleNavigate = (event: CustomEvent) => { this.onNavigate?.(event.detail); }; + private readonly handleToggleSidebar = (event: MouseEvent) => { + if (this.drawerMode) { + this.onToggleDrawer?.(event.currentTarget as HTMLElement); + } else { + this.onToggleCollapse?.(); + } + }; + override render() { - const drawerLabel = this.navDrawerOpen ? t("nav.collapse") : t("nav.expand"); - const paletteLabel = t("chat.commandPaletteTitle"); + // One toggle, viewport-dependent behavior: it drives the persistent rail + // collapse on desktop and the slide-over drawer at drawer breakpoints. + const sidebarOpen = this.drawerMode ? this.navDrawerOpen : !this.navCollapsed; + const toggleLabel = sidebarOpen ? t("nav.collapse") : t("nav.expand"); return html`
- +
@@ -70,16 +110,6 @@ export class AppTopbar extends LitElement { >
- - - ${this.terminalAvailable ? html` @@ -94,12 +124,6 @@ export class AppTopbar extends LitElement { ` : nothing} -
- ${this.routeOwnsHeader && this.headerError - ? html`
${this.headerError}
` - : nothing} - -
diff --git a/ui/src/components/icons.ts b/ui/src/components/icons.ts index f6c1ddabd0e..142cdacb61d 100644 --- a/ui/src/components/icons.ts +++ b/ui/src/components/icons.ts @@ -349,6 +349,12 @@ export const icons = { /> `, + panelLeft: html` + + + + + `, panelLeftClose: html` diff --git a/ui/src/components/theme-mode-toggle.ts b/ui/src/components/theme-mode-toggle.ts index 284c5702913..8b311757397 100644 --- a/ui/src/components/theme-mode-toggle.ts +++ b/ui/src/components/theme-mode-toggle.ts @@ -43,7 +43,7 @@ export class ThemeModeToggle extends LitElement { ]; return html` -
+
${options.map((option) => { const label = t(option.labelKey); const tooltip = t("common.colorModeOption", { mode: label }); @@ -51,8 +51,8 @@ export class ThemeModeToggle extends LitElement {