feat: add sidebar

web/src/components/DeleteConfirmDialog.tsx

@@ -0,0 +1,40 @@
+import { ConfirmDialog } from "@/components/ui/confirm-dialog";
+import { useI18n } from "@/i18n";
+
+export function DeleteConfirmDialog({
+  cancelLabel,
+  confirmLabel,
+  description,
+  loading,
+  onCancel,
+  onConfirm,
+  open,
+  title,
+}: DeleteConfirmDialogProps) {
+  const { t } = useI18n();
+
+  return (
+    <ConfirmDialog
+      open={open}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      title={title}
+      description={description}
+      loading={loading}
+      destructive
+      confirmLabel={confirmLabel ?? t.common.delete}
+      cancelLabel={cancelLabel ?? t.common.cancel}
+    />
+  );
+}
+
+interface DeleteConfirmDialogProps {
+  cancelLabel?: string;
+  confirmLabel?: string;
+  description?: string;
+  loading: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  title: string;
+}

web/src/components/PlatformsCard.tsx

@@ -0,0 +1,97 @@
+import { AlertTriangle, Radio, Wifi, WifiOff } from "lucide-react";
+import type { PlatformStatus } from "@/lib/api";
+import { isoTimeAgo } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useI18n } from "@/i18n";
+
+export function PlatformsCard({ platforms }: PlatformsCardProps) {
+  const { t } = useI18n();
+  const platformStateBadge: Record<
+    string,
+    { variant: "success" | "warning" | "destructive"; label: string }
+  > = {
+    connected: { variant: "success", label: t.status.connected },
+    disconnected: { variant: "warning", label: t.status.disconnected },
+    fatal: { variant: "destructive", label: t.status.error },
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Radio className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">
+            {t.status.connectedPlatforms}
+          </CardTitle>
+        </div>
+      </CardHeader>
+
+      <CardContent className="grid gap-3">
+        {platforms.map(([name, info]) => {
+          const display = platformStateBadge[info.state] ?? {
+            variant: "outline" as const,
+            label: info.state,
+          };
+          const IconComponent =
+            info.state === "connected"
+              ? Wifi
+              : info.state === "fatal"
+                ? AlertTriangle
+                : WifiOff;
+
+          return (
+            <div
+              key={name}
+              className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
+            >
+              <div className="flex items-center gap-3 min-w-0 w-full">
+                <IconComponent
+                  className={`h-4 w-4 shrink-0 ${
+                    info.state === "connected"
+                      ? "text-success"
+                      : info.state === "fatal"
+                        ? "text-destructive"
+                        : "text-warning"
+                  }`}
+                />
+
+                <div className="flex flex-col gap-0.5 min-w-0">
+                  <span className="text-sm font-medium capitalize truncate">
+                    {name}
+                  </span>
+
+                  {info.error_message && (
+                    <span className="text-xs text-destructive">
+                      {info.error_message}
+                    </span>
+                  )}
+
+                  {info.updated_at && (
+                    <span className="text-xs text-muted-foreground">
+                      {t.status.lastUpdate}: {isoTimeAgo(info.updated_at)}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <Badge
+                variant={display.variant}
+                className="shrink-0 self-start sm:self-center"
+              >
+                {display.variant === "success" && (
+                  <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
+                )}
+                {display.label}
+              </Badge>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface PlatformsCardProps {
+  platforms: [string, PlatformStatus][];
+}

web/src/components/SidebarFooter.tsx

@@ -0,0 +1,40 @@
+import { Typography } from "@nous-research/ui";
+import { useSidebarStatus } from "@/hooks/useSidebarStatus";
+import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n";
+
+export function SidebarFooter() {
+  const status = useSidebarStatus();
+  const { t } = useI18n();
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center justify-between gap-2",
+        "px-5 py-2.5",
+        "border-t border-current/10",
+      )}
+    >
+      <Typography
+        mondwest
+        className="font-mono-ui text-[0.7rem] tabular-nums tracking-[0.1em] text-muted-foreground/70"
+      >
+        {status?.version != null ? `v${status.version}` : "—"}
+      </Typography>
+
+      <a
+        href="https://nousresearch.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(
+          "font-mondwest text-[0.65rem] tracking-[0.15em] text-midground",
+          "transition-opacity hover:opacity-90",
+          "focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/40",
+        )}
+        style={{ mixBlendMode: "plus-lighter" }}
+      >
+        {t.app.footer.org}
+      </a>
+    </div>
+  );
+}

web/src/components/SidebarStatusStrip.tsx

@@ -0,0 +1,70 @@
+import { Link } from "react-router-dom";
+import type { StatusResponse } from "@/lib/api";
+import { useSidebarStatus } from "@/hooks/useSidebarStatus";
+import { cn } from "@/lib/utils";
+import { useI18n } from "@/i18n";
+
+/** Gateway + session summary for the System sidebar block (no separate strip chrome). */
+export function SidebarStatusStrip() {
+  const status = useSidebarStatus();
+  const { t } = useI18n();
+
+  if (status === null) {
+    return (
+      <div className="px-5 py-1.5" aria-hidden>
+        <div className="h-2 w-[80%] max-w-full animate-pulse rounded-sm bg-midground/10" />
+      </div>
+    );
+  }
+
+  const gw = gatewayLine(status, t);
+  const { activeSessionsLabel, gatewayStatusLabel } = t.app;
+
+  return (
+    <Link
+      to="/sessions"
+      title={t.app.statusOverview}
+      className={cn(
+        "block text-left",
+        "px-5 pb-2 pt-0.5",
+        "text-muted-foreground/70",
+        "transition-colors hover:text-muted-foreground/90",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/40",
+        "focus-visible:ring-inset",
+      )}
+    >
+      <div className="flex flex-col gap-1 font-mondwest text-[0.55rem] leading-snug tracking-[0.12em]">
+        <p className="break-words">
+          <span className="text-muted-foreground/50">{gatewayStatusLabel}</span>{" "}
+          <span className={cn("font-medium", gw.tone)}>{gw.label}</span>
+        </p>
+
+        <p className="break-words">
+          <span className="text-muted-foreground/50">{activeSessionsLabel}</span>{" "}
+          <span className="tabular-nums text-muted-foreground/70">
+            {status.active_sessions}
+          </span>
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+function gatewayLine(
+  status: StatusResponse,
+  t: ReturnType<typeof useI18n>["t"],
+): { label: string; tone: string } {
+  const g = t.app.gatewayStrip;
+  const byState: Record<string, { label: string; tone: string }> = {
+    running: { label: g.running, tone: "text-success" },
+    starting: { label: g.starting, tone: "text-warning" },
+    startup_failed: { label: g.failed, tone: "text-destructive" },
+    stopped: { label: g.stopped, tone: "text-muted-foreground" },
+  };
+  if (status.gateway_state && byState[status.gateway_state]) {
+    return byState[status.gateway_state];
+  }
+  return status.gateway_running
+    ? { label: g.running, tone: "text-success" }
+    : { label: g.off, tone: "text-muted-foreground" };
+}

web/src/components/ThemeSwitcher.tsx

@@ -11,8 +11,12 @@ import { cn } from "@/lib/utils";
  * glow) so users can preview the palette before committing. User-defined
  * themes from `~/.hermes/dashboard-themes/*.yaml` that aren't in
  * `BUILTIN_THEMES` render without swatches and apply the default palette.
+ *
+ * When placed at the bottom of a container (e.g. the sidebar rail), pass
+ * `dropUp` so the menu opens above the trigger instead of clipping below
+ * the viewport.
  */
-export function ThemeSwitcher() {
+export function ThemeSwitcher({ dropUp = false }: ThemeSwitcherProps) {
   const { themeName, availableThemes, setTheme } = useTheme();
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
@@ -73,7 +77,8 @@ export function ThemeSwitcher() {
           role="listbox"
           aria-label={t.theme?.title ?? "Theme"}
           className={cn(
-            "absolute right-0 top-full mt-1 z-50 min-w-[240px]",
+            "absolute z-50 min-w-[240px]",
+            dropUp ? "left-0 bottom-full mb-1" : "right-0 top-full mt-1",
             "border border-current/20 bg-background-base/95 backdrop-blur-sm",
             "shadow-[0_12px_32px_-8px_rgba(0,0,0,0.6)]",
           )}
@@ -166,3 +171,7 @@ function PlaceholderSwatch() {
     />
   );
 }
+
+interface ThemeSwitcherProps {
+  dropUp?: boolean;
+}

web/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { AlertTriangle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+export function ConfirmDialog({
+  cancelLabel = "Cancel",
+  confirmLabel = "Confirm",
+  description,
+  destructive = false,
+  loading = false,
+  onCancel,
+  onConfirm,
+  open,
+  title,
+}: ConfirmDialogProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Focus the confirm button when opened; trap ESC to cancel.
+  useEffect(() => {
+    if (!open) return;
+
+    const prevActive = document.activeElement as HTMLElement | null;
+    dialogRef.current
+      ?.querySelector<HTMLButtonElement>("[data-confirm]")
+      ?.focus();
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    };
+
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+      prevActive?.focus?.();
+    };
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="confirm-dialog-title"
+      aria-describedby={description ? "confirm-dialog-desc" : undefined}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel();
+      }}
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center",
+        "bg-black/60 backdrop-blur-sm",
+        "animate-[fade-in_150ms_ease-out]",
+      )}
+    >
+      <div
+        ref={dialogRef}
+        className={cn(
+          "relative w-full max-w-md mx-4",
+          "border border-border bg-card shadow-lg",
+          "animate-[dialog-in_180ms_ease-out]",
+        )}
+      >
+        <div className="flex items-start gap-3 p-4 border-b border-border">
+          {destructive && (
+            <div
+              aria-hidden
+              className="mt-0.5 shrink-0 text-destructive"
+            >
+              <AlertTriangle className="h-4 w-4" />
+            </div>
+          )}
+
+          <div className="flex-1 min-w-0 flex flex-col gap-1">
+            <h2
+              id="confirm-dialog-title"
+              className="font-expanded text-sm font-bold tracking-[0.08em] uppercase blend-lighter"
+            >
+              {title}
+            </h2>
+
+            {description && (
+              <p
+                id="confirm-dialog-desc"
+                className="font-mondwest text-xs text-muted-foreground leading-relaxed"
+              >
+                {description}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2 p-3">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={onCancel}
+            disabled={loading}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            data-confirm
+            type="button"
+            variant={destructive ? "destructive" : "default"}
+            size="sm"
+            onClick={onConfirm}
+            disabled={loading}
+          >
+            {loading ? "…" : confirmLabel}
+          </Button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+interface ConfirmDialogProps {
+  cancelLabel?: string;
+  confirmLabel?: string;
+  description?: string;
+  destructive?: boolean;
+  loading?: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+  open: boolean;
+  title: string;
+}

web/src/components/ui/segmented.tsx

@@ -0,0 +1,80 @@
+import { cn } from "@/lib/utils";
+
+export function Segmented<T extends string>({
+  className,
+  onChange,
+  options,
+  size = "sm",
+  value,
+}: SegmentedProps<T>) {
+  return (
+    <div
+      role="radiogroup"
+      className={cn(
+        "inline-flex border border-border bg-background/30",
+        className,
+      )}
+    >
+      {options.map((opt) => {
+        const active = opt.value === value;
+
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            onClick={() => onChange(opt.value)}
+            className={cn(
+              "font-mondwest tracking-[0.1em] uppercase",
+              "transition-colors cursor-pointer whitespace-nowrap",
+              "border-r border-border last:border-r-0",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/30",
+              size === "sm" && "h-7 px-2.5 text-[0.65rem]",
+              size === "md" && "h-8 px-3 text-xs",
+              active
+                ? "bg-foreground/90 text-background"
+                : "text-muted-foreground hover:bg-foreground/10 hover:text-foreground",
+            )}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function FilterGroup({
+  children,
+  className,
+  label,
+}: FilterGroupProps) {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <span className="font-mondwest text-[0.65rem] tracking-[0.12em] uppercase text-muted-foreground/70">
+        {label}
+      </span>
+      {children}
+    </div>
+  );
+}
+
+interface FilterGroupProps {
+  children: React.ReactNode;
+  className?: string;
+  label: string;
+}
+
+interface SegmentedOption<T extends string> {
+  label: string;
+  value: T;
+}
+
+interface SegmentedProps<T extends string> {
+  className?: string;
+  onChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  size?: "sm" | "md";
+  value: T;
+}

web/src/components/ui/switch.tsx

@@ -5,15 +5,18 @@ export function Switch({
   onCheckedChange,
   className,
   disabled,
+  id,
 }: {
   checked: boolean;
   onCheckedChange: (v: boolean) => void;
   className?: string;
   disabled?: boolean;
+  id?: string;
 }) {
   return (
     <button
       type="button"
+      id={id}
       role="switch"
       aria-checked={checked}
       disabled={disabled}