okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/components/shell/command-palette.tsx

@@ -0,0 +1,334 @@
+/**
+ * ⌘K command palette — beUI block behavior, Console traces chrome.
+ * https://beui.dev/components/blocks/command-palette
+ */
+
+import { Search01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { filterCommandItems } from "@/components/shell/command-match.ts";
+import {
+  EXPLORER_ICON_BUTTON_CLASS,
+  EXPLORER_ICON_CLASS,
+  EXPLORER_LIST_EMPTY_CLASS,
+  EXPLORER_RAIL_ACTIVE_CLASS,
+  EXPLORER_RAIL_CLASS,
+  EXPLORER_ROW_CLASS,
+  EXPLORER_ROW_SELECTED_CLASS,
+  EXPLORER_SEARCH_CLASS,
+  EXPLORER_TOOLBAR_CLASS,
+  SECTION_HEAD_CLASS,
+} from "@/components/explorer/explorer-chrome.ts";
+import { Kbd } from "@/components/ui/kbd";
+import { motion, useReducedMotion } from "@/lib/motion";
+import { ShortcutKeys } from "@/lib/shortcut-keys.tsx";
+import { modChord } from "@/lib/shortcut.ts";
+import { cn } from "@/lib/utils.ts";
+
+/** Hugeicons glyph accepted by {@link CommandItem.icon}. */
+export type CommandIcon = typeof Search01Icon;
+
+/** One palette row. */
+export type CommandItem = {
+  readonly id: string;
+  readonly label: string;
+  readonly group?: string;
+  readonly hint?: string;
+  /** Key caps shown on the right (⌘ K, G O). */
+  readonly keys?: readonly string[];
+  readonly keywords?: readonly string[];
+  readonly icon?: CommandIcon;
+  readonly badge?: ReactNode;
+  readonly onSelect: () => void;
+};
+
+/** Props for {@link CommandPalette}. */
+export interface CommandPaletteProps {
+  readonly items: readonly CommandItem[];
+  /** Opens with Cmd/Ctrl + this key. Default: `k`. */
+  readonly shortcut?: string;
+  readonly placeholder?: string;
+  readonly emptyMessage?: string;
+  readonly open?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+}
+
+/** Ink-only key caps on the search strip — no muted chip. */
+const STRIP_KBD =
+  "h-auto min-w-0 bg-transparent px-0 font-mono text-[10px] tracking-[0.08em] text-muted-foreground";
+
+const PANEL_SPRING = {
+  type: "spring",
+  stiffness: 560,
+  damping: 40,
+  mass: 0.5,
+} as const;
+
+/**
+ * Always-mounted command palette. Cmd/Ctrl+K toggles it; Escape closes.
+ *
+ * @param props - Items and optional controlled open state
+ */
+export function CommandPalette({
+  items,
+  shortcut = "k",
+  placeholder = "Type a command or search…",
+  emptyMessage = "No results found.",
+  open: controlledOpen,
+  onOpenChange,
+}: CommandPaletteProps): ReactNode {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const controlled = controlledOpen !== undefined;
+  const open = controlled ? controlledOpen : internalOpen;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (!controlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [controlled, onOpenChange],
+  );
+
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const uid = useId();
+  const reduce = useReducedMotion();
+  const updateQuery = useCallback((value: string) => {
+    setQuery(value);
+    setActive(0);
+  }, []);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onKey = (event: globalThis.KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === shortcut.toLowerCase()) {
+        event.preventDefault();
+        setOpen(!open);
+        return;
+      }
+      if (event.key === "Escape" && open) {
+        event.preventDefault();
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, shortcut, setOpen]);
+
+  useEffect(() => {
+    if (!open) return;
+    updateQuery("");
+    setActive(0);
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, [open, updateQuery]);
+
+  useEffect(() => {
+    if (!open) return;
+    const root = document.documentElement;
+    const previousRootOverflow = root.style.overflow;
+    const previousBodyOverflow = document.body.style.overflow;
+    root.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    return () => {
+      root.style.overflow = previousRootOverflow;
+      document.body.style.overflow = previousBodyOverflow;
+    };
+  }, [open]);
+
+  const filtered = useMemo(() => filterCommandItems(items, query), [items, query]);
+  const hasIcons = useMemo(() => items.some((item) => item.icon !== undefined), [items]);
+  const grouped = useMemo(() => {
+    const map = new Map<string, CommandItem[]>();
+    for (const item of filtered) {
+      const group = item.group ?? "Results";
+      const list = map.get(group) ?? [];
+      list.push(item);
+      map.set(group, list);
+    }
+    return Array.from(map.entries());
+  }, [filtered]);
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (filtered.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActive((current) => Math.min(filtered.length - 1, current + 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((current) => Math.max(0, current - 1));
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      const item = filtered[active];
+      if (item) {
+        item.onSelect();
+        setOpen(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    const el = listRef.current?.querySelector(`[data-index="${active}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active, open]);
+
+  if (!mounted) return null;
+
+  let cursor = 0;
+  const openKeys = modChord(shortcut.toUpperCase());
+
+  return createPortal(
+    <div
+      aria-hidden={!open}
+      inert={!open}
+      data-slot="command-palette"
+      className={cn(
+        "fixed inset-0 z-100 flex items-start justify-center px-4 pt-[12vh]",
+        open ? "pointer-events-auto" : "pointer-events-none",
+      )}
+    >
+      <motion.button
+        type="button"
+        aria-label="Close command palette"
+        initial={false}
+        animate={{ opacity: open ? 1 : 0 }}
+        transition={{ duration: open ? 0.18 : 0.12 }}
+        onClick={() => setOpen(false)}
+        className={cn(
+          "absolute inset-0 bg-black/20",
+          open ? "pointer-events-auto" : "pointer-events-none",
+        )}
+      />
+      <motion.div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        initial={false}
+        animate={{
+          opacity: open ? 1 : 0,
+          y: open || reduce ? 0 : -8,
+          scale: open || reduce ? 1 : 0.97,
+        }}
+        transition={reduce ? { duration: 0.1 } : open ? PANEL_SPRING : { duration: 0.12 }}
+        onKeyDown={onKeyDown}
+        className={cn(
+          "relative w-full max-w-xl overflow-hidden rounded-none border border-border bg-popover text-popover-foreground shadow-lg will-change-transform",
+          open ? "pointer-events-auto" : "pointer-events-none",
+        )}
+      >
+        <div className={EXPLORER_TOOLBAR_CLASS}>
+          <span className={cn(EXPLORER_ICON_BUTTON_CLASS, "pointer-events-none")}>
+            <HugeiconsIcon icon={Search01Icon} className={EXPLORER_ICON_CLASS} />
+          </span>
+          <input
+            ref={inputRef}
+            value={query}
+            onChange={(event) => updateQuery(event.target.value)}
+            placeholder={placeholder}
+            tabIndex={open ? 0 : -1}
+            role="combobox"
+            aria-expanded={open}
+            aria-controls={`${uid}-list`}
+            aria-activedescendant={filtered.length > 0 ? `${uid}-opt-${active}` : undefined}
+            aria-autocomplete="list"
+            className={EXPLORER_SEARCH_CLASS}
+          />
+          <span className="flex h-full shrink-0 items-center gap-2 pr-2">
+            <span className="inline-flex items-center gap-0.5">
+              {openKeys.map((key) => (
+                <Kbd key={key} className={STRIP_KBD}>
+                  {key}
+                </Kbd>
+              ))}
+            </span>
+            <Kbd className={STRIP_KBD}>Esc</Kbd>
+          </span>
+        </div>
+        <div
+          ref={listRef}
+          id={`${uid}-list`}
+          role="listbox"
+          aria-label="Commands"
+          className="max-h-[60vh] overflow-y-auto overscroll-contain"
+        >
+          {filtered.length === 0 ? (
+            <p className={EXPLORER_LIST_EMPTY_CLASS}>{emptyMessage}</p>
+          ) : (
+            grouped.map(([group, list]) => (
+              <div key={group} className="border-b border-border/60 last:border-b-0">
+                <div aria-hidden className={cn(SECTION_HEAD_CLASS, "px-2 py-1.5")}>
+                  {group}
+                </div>
+                {list.map((item) => {
+                  const idx = cursor;
+                  cursor += 1;
+                  const isActive = idx === active;
+                  const Icon = item.icon;
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      id={`${uid}-opt-${idx}`}
+                      role="option"
+                      aria-selected={isActive}
+                      data-index={idx}
+                      onMouseEnter={() => setActive(idx)}
+                      onClick={() => {
+                        item.onSelect();
+                        setOpen(false);
+                      }}
+                      tabIndex={open ? 0 : -1}
+                      className={cn(
+                        EXPLORER_ROW_CLASS,
+                        "border-b-0",
+                        isActive && EXPLORER_ROW_SELECTED_CLASS,
+                      )}
+                    >
+                      {isActive ? (
+                        <span className={cn(EXPLORER_RAIL_CLASS, EXPLORER_RAIL_ACTIVE_CLASS)} />
+                      ) : null}
+                      {Icon ? (
+                        <HugeiconsIcon
+                          icon={Icon}
+                          className="relative z-10 size-3.5 shrink-0 text-muted-foreground"
+                        />
+                      ) : hasIcons ? (
+                        <span className="size-3.5 shrink-0" />
+                      ) : null}
+                      <span className="relative z-10 min-w-0 flex-1 truncate">{item.label}</span>
+                      {item.badge ? (
+                        <span className="relative z-10 shrink-0 text-[10px] text-muted-foreground">
+                          {item.badge}
+                        </span>
+                      ) : null}
+                      {item.keys && item.keys.length > 0 ? (
+                        <ShortcutKeys keys={item.keys} className="relative z-10" />
+                      ) : item.hint ? (
+                        <span className="relative z-10 shrink-0 text-[10px] text-muted-foreground">
+                          {item.hint}
+                        </span>
+                      ) : null}
+                    </button>
+                  );
+                })}
+              </div>
+            ))
+          )}
+        </div>
+      </motion.div>
+    </div>,
+    document.body,
+  );
+}

package/src/console/ui-next/src/components/shell/nav-footer.tsx

@@ -0,0 +1,109 @@
+/**
+ * Sidebar footer — Fast (command palette), Settings, Logout.
+ */
+
+import { CommandIcon, Logout03Icon, Settings01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { JSX } from "react";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { ShortcutTipLabel } from "@/lib/shortcut-keys.tsx";
+import { consoleShortcut } from "@/lib/shortcut.ts";
+import { cn } from "@/lib/utils.ts";
+
+const FOOTER_ITEM_CLASS =
+  "rounded-none! justify-center data-active:bg-muted/70! data-active:text-foreground group-data-[collapsible=icon]:h-10! group-data-[collapsible=icon]:w-full! group-data-[collapsible=icon]:p-0!";
+
+/** Props for {@link NavFooter}. */
+export interface NavFooterProps {
+  readonly onFast: () => void;
+  readonly onSettings: () => void;
+  readonly onLogout: () => void;
+}
+
+/**
+ * Icon-only footer actions for the always-collapsed sidebar.
+ *
+ * @param props - Fast / Settings / Logout handlers
+ */
+export function NavFooter({ onFast, onSettings, onLogout }: NavFooterProps): JSX.Element {
+  const { isMobile, setOpenMobile } = useSidebar();
+  const closeMobile = (): void => {
+    if (isMobile) setOpenMobile(false);
+  };
+
+  return (
+    <SidebarMenu className="items-stretch gap-0">
+      <FooterItem
+        label="Fast"
+        keys={consoleShortcut("fast")}
+        icon={CommandIcon}
+        slot="sidebar-fast"
+        onClick={() => {
+          closeMobile();
+          onFast();
+        }}
+      />
+      <FooterItem
+        label="Settings"
+        keys={consoleShortcut("settings")}
+        icon={Settings01Icon}
+        slot="sidebar-settings"
+        onClick={() => {
+          closeMobile();
+          onSettings();
+        }}
+      />
+      <FooterItem
+        label="Logout"
+        keys={consoleShortcut("logout")}
+        icon={Logout03Icon}
+        slot="sidebar-logout"
+        danger
+        onClick={() => {
+          closeMobile();
+          onLogout();
+        }}
+      />
+    </SidebarMenu>
+  );
+}
+
+function FooterItem({
+  label,
+  keys,
+  icon,
+  slot,
+  danger,
+  onClick,
+}: {
+  readonly label: string;
+  readonly keys?: readonly string[];
+  readonly icon: typeof CommandIcon;
+  readonly slot: string;
+  readonly danger?: boolean;
+  readonly onClick: () => void;
+}): JSX.Element {
+  return (
+    <SidebarMenuItem className="w-full">
+      <SidebarMenuButton
+        tooltip={keys ? { children: <ShortcutTipLabel label={label} keys={keys} /> } : label}
+        onClick={onClick}
+        data-slot={slot}
+        className={cn(
+          FOOTER_ITEM_CLASS,
+          danger
+            ? "hover:bg-destructive/10! hover:text-destructive"
+            : "hover:bg-muted/50! hover:text-foreground",
+        )}
+      >
+        <HugeiconsIcon icon={icon} />
+        <span className="sr-only">{label}</span>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}

package/src/console/ui-next/src/components/shell/section-empty.tsx

@@ -0,0 +1,42 @@
+/**
+ * Honest empty state for shell sections that are not built yet.
+ */
+
+import { HugeiconsIcon } from "@hugeicons/react";
+import type { ComponentProps } from "react";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
+
+type HugeIcon = ComponentProps<typeof HugeiconsIcon>["icon"];
+
+/**
+ * Empty composition for a named Console section.
+ *
+ * @param props - Section label and icon
+ */
+export function SectionEmpty({
+  title,
+  description,
+  icon,
+}: {
+  readonly title: string;
+  readonly description: string;
+  readonly icon: HugeIcon;
+}) {
+  return (
+    <Empty className="min-h-[50vh] border border-dashed" data-slot="section-empty">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <HugeiconsIcon icon={icon} />
+        </EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}

package/src/console/ui-next/src/components/shell/settings-dialog.tsx

@@ -0,0 +1,65 @@
+/**
+ * Operator settings — identity + theme.
+ */
+
+import type { JSX } from "react";
+import { ModeToggle } from "@/components/mode-toggle";
+import { SECTION_HEAD_CLASS } from "@/components/explorer/explorer-chrome.ts";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog.tsx";
+import type { SessionOperator } from "@/client.ts";
+
+/** Props for {@link SettingsDialog}. */
+export interface SettingsDialogProps {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly operator: SessionOperator;
+}
+
+/**
+ * Centered settings dialog for the signed-in operator.
+ *
+ * @param props - Open state and operator identity
+ */
+export function SettingsDialog({ open, onOpenChange, operator }: SettingsDialogProps): JSX.Element {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent data-slot="settings-dialog">
+        <DialogHeader>
+          <DialogTitle>Settings</DialogTitle>
+          <DialogDescription>Operator account and appearance.</DialogDescription>
+        </DialogHeader>
+        <dl className="flex flex-col">
+          <SettingsFact label="Name" value={operator.name} />
+          <SettingsFact label="Email" value={operator.email} />
+          <div className="flex items-center justify-between gap-3 px-4 py-2">
+            <dt className={SECTION_HEAD_CLASS}>Theme</dt>
+            <dd>
+              <ModeToggle />
+            </dd>
+          </div>
+        </dl>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SettingsFact({
+  label,
+  value,
+}: {
+  readonly label: string;
+  readonly value: string;
+}): JSX.Element {
+  return (
+    <div className="flex items-baseline justify-between gap-3 border-b border-border/60 px-4 py-2">
+      <dt className={SECTION_HEAD_CLASS}>{label}</dt>
+      <dd className="min-w-0 truncate text-xs text-foreground">{value}</dd>
+    </div>
+  );
+}

package/src/console/ui-next/src/components/shell/shell-layout.tsx

@@ -0,0 +1,100 @@
+/**
+ * Authenticated shell — sidebar-07 scaffold, always icon-collapsed on desktop.
+ */
+
+import { Outlet, useNavigate, useRouterState } from "@tanstack/react-router";
+import { useCallback, useMemo, useState } from "react";
+import type { SessionOperator } from "@/client.ts";
+import { AppSidebar } from "@/components/shell/app-sidebar";
+import { consoleCommandItems } from "@/components/shell/command-items.ts";
+import { CommandPalette } from "@/components/shell/command-palette.tsx";
+import { SettingsDialog } from "@/components/shell/settings-dialog.tsx";
+import { useTheme } from "@/components/theme-provider";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { logoutOperator } from "@/features/auth/logout.ts";
+import { lastSearchFor, type ConsoleModulePath } from "@/lib/last-module-search.ts";
+import { useConsoleShortcuts } from "@/lib/use-console-shortcuts.ts";
+import { useLastModuleSearch } from "@/lib/use-last-module-search.ts";
+import { cn } from "@/lib/utils";
+
+/**
+ * Shell chrome around authenticated panel routes.
+ *
+ * `/overview`, `/flows`, `/store`, `/vault`, and `/observability` render full-bleed
+ * (no padding / gap); other sections keep the padded inset. Desktop sidebar
+ * stays icon-collapsed; mobile still uses the sheet trigger.
+ *
+ * @param props - Operator from the session guard
+ */
+export function ShellLayout({ operator }: { readonly operator: SessionOperator }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname });
+  const navigate = useNavigate();
+  const memory = useLastModuleSearch();
+  const { setTheme } = useTheme();
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [commandOpen, setCommandOpen] = useState(false);
+  const fullBleed =
+    pathname === "/overview" ||
+    pathname === "/flows" ||
+    pathname === "/store" ||
+    pathname === "/vault" ||
+    pathname === "/observability";
+
+  const logout = useCallback(() => {
+    void logoutOperator().then(() => {
+      void navigate({ to: "/" });
+    });
+  }, [navigate]);
+
+  const go = useCallback(
+    (path: ConsoleModulePath, search: Record<string, unknown>) => {
+      void navigate({ to: path, search: search as never });
+    },
+    [navigate],
+  );
+
+  const commandItems = useMemo(
+    () =>
+      consoleCommandItems({
+        memory,
+        go,
+        openSettings: () => setSettingsOpen(true),
+        logout,
+        setTheme,
+      }),
+    [go, logout, memory, setTheme],
+  );
+
+  useConsoleShortcuts({
+    enabled: !commandOpen && !settingsOpen,
+    go: (path) => go(path, lastSearchFor(memory, path)),
+    openSettings: () => setSettingsOpen(true),
+    logout,
+  });
+
+  return (
+    <SidebarProvider
+      open={false}
+      className={fullBleed ? "h-svh max-h-svh overflow-hidden" : undefined}
+    >
+      <AppSidebar
+        onFast={() => setCommandOpen(true)}
+        onSettings={() => setSettingsOpen(true)}
+        onLogout={logout}
+      />
+      <SidebarInset className={fullBleed ? "min-h-0 max-h-svh overflow-hidden" : undefined}>
+        <div
+          className={cn(
+            "flex flex-col",
+            fullBleed ? "h-svh max-h-svh min-h-0 overflow-hidden" : "flex-1 gap-4 p-4",
+          )}
+        >
+          <SidebarTrigger className="-ml-1 md:hidden" />
+          <Outlet />
+        </div>
+      </SidebarInset>
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} operator={operator} />
+      <CommandPalette open={commandOpen} onOpenChange={setCommandOpen} items={commandItems} />
+    </SidebarProvider>
+  );
+}