feat: enhance gateway types and store with shutdown and update handling

- Added GatewayErrorInfo type for error responses.
- Updated GatewayHelloOk type to require server and features fields.
- Enhanced GatewaySnapshot type with additional fields for presence, health, and state management.
- Introduced gatewayShutdown and gatewayUpdateAvailable states in the gateway store.
- Implemented event handlers for shutdown and update events in the gateway store.
- Added UpdateAgentDialog component for agent configuration updates.
- Created ExecApprovalBell component for handling execution approval requests.
- Implemented GatewayShutdownBanner to display shutdown notifications with countdown.
- Updated unit tests to cover new functionality and ensure stability.

Author: Saleh7

CHANGELOG.md

@@ -6,6 +6,70 @@
 
 ### Added
 
+#### Exec Approval UI
+- **Exec Approval Bell** — new `ExecApprovalBell` component in the global status bar; real-time exec approval queue powered by `exec.approval.requested` / `exec.approval.resolved` gateway events
+- **Approve / Deny actions** — per-request allow-once, allow-always, and deny buttons via `exec.approval.resolve` RPC; auto-expire entries based on server-provided TTL
+- **Timer dedup guard** — duplicate `entry.id` events are rejected before timer creation to prevent leaked timers
+
+#### Agent Update Dialog
+- **`UpdateAgentDialog`** — edit agent name and model via `agents.update` RPC; accessible from agent overview; validates non-empty changes; shows "No changes to save" toast on no-op
+
+#### Session Compact
+- **Compact button** — per-session compact action in session cards via `sessions.compact` RPC; disabled state with "Compacting…" label during operation; success/info toast feedback
+
+#### Dashboard Quick Actions
+- **Wake Agent** — "Wake Agent" button triggers `wake` RPC (`{ mode: 'now', text: 'Manual wake from ClawKernel dashboard' }`)
+- **Update Gateway** — "Update Gateway" button triggers `update.run` RPC with confirm dialog; shows restart countdown toast
+
+#### Gateway Shutdown Banner
+- **`GatewayShutdownBanner`** — layout-level banner displayed when the gateway broadcasts a `shutdown` event; shows reason text + countdown timer until expected restart; auto-clears on successful reconnect (`hello-ok`); uses `useRef` for timestamp tracking to handle repeated shutdown cycles correctly
+
+### Changed
+
+#### OpenClaw v2026.3.11 Compatibility
+- **Device auth v3** — `buildDeviceAuthPayloadV3` and `normalizeDeviceMetadataForAuth` added to `device-auth.ts`; client now signs with v3 payload format (includes `platform` and `deviceFamily`); server falls back to v2 if v3 verification fails
+- **Display name** — connect params now send `displayName` from `opts.clientName` (defaults to `ClawKernel`); previously hardcoded `WebClaw`
+- **Snapshot type realigned** — removed 7 phantom fields (`agents`, `sessions`, `channels`, `config`, `skills`, `cron`, `models`); added 6 upstream fields (`stateVersion`, `uptimeMs`, `configPath`, `stateDir`, `sessionDefaults`, `authMode`); `presence` and `health` now required (matching `SnapshotSchema`)
+- **`GatewayHelloOk` type corrected** — `server`, `features`, `snapshot`, `policy` marked required; `auth` sub-fields (`deviceToken`, `role`, `scopes`) required when `auth` is present; `policy` includes `maxPayload` and `maxBufferedBytes`
+- **Presence type expanded** — added 8 upstream fields (`deviceFamily`, `modelIdentifier`, `reason`, `tags`, `text`, `deviceId`, `roles`, `scopes`); `ts` now required
+- **`ChannelAccountSnapshot` parity** — removed 5 speculative fields (`credentialSource`, `audienceType`, `audience`, `webhookPath`, `webhookUrl`); added 3 upstream fields (`busy`, `activeRuns`, `lastRunActivityAt`); matches `ChannelAccountSnapshotSchema` exactly
+- **`updateAvailable` type** — removed erroneous `| null` union; upstream uses `Type.Optional(Type.Object(...))` only
+
+#### Event Handling
+- **Cron event** — replaced dead `cron.status` / `cron.jobs` handlers with single `cron` handler; re-fetches via RPC on event (matching upstream broadcast pattern at `server-cron.ts:359`)
+- **Device pairing events** — `pairing-bell.tsx` now subscribes to live `device.pair.requested` / `device.pair.resolved` events in addition to polling
+- **Shutdown + update.available events** — new store fields `gatewayShutdown` and `gatewayUpdateAvailable`; `gatewayShutdown` cleared on reconnect
+- **Dead handler cleanup** — removed 4 event handlers for events upstream never broadcasts (`sessions`, `config`, `channels`, `skills`)
+- **Presence event** — correctly unwraps `{ presence: Array<...> }` envelope (matching `presence-events.ts:11`)
+
+#### Gateway Client
+- **`isNonRecoverableAuthError`** — added 3 missing upstream error codes: `PAIRING_REQUIRED`, `CONTROL_UI_DEVICE_IDENTITY_REQUIRED`, `DEVICE_IDENTITY_REQUIRED`; prevents infinite reconnect loops on these errors
+- **`ConnectErrorDetailCodes`** — expanded from 4 to 7 codes to match upstream `connect-error-details.ts`
+- **`GatewayRequestError` class** — matches upstream `ui/src/ui/gateway.ts` (`gatewayCode` + `details`)
+- **Connect params** — sends `caps: ['tool-events']` capability; `instanceId` included in client info
+
+#### Store & UI
+- **`chat.inject` params** — corrected from `{ sessionKey, role, content }` to `{ sessionKey, message }` (matching `ChatInjectParamsSchema`)
+- **Event handlers use injected `set`** — `handleCronEvent` no longer calls `useGatewayStore.setState()` directly
+- **`presenceArrayToRecord`** — replaced `arr.indexOf(entry)` fallback (O(n²)) with loop counter (O(n))
+- **Navigator reference** — `getBrowserNavigator()` called once and shared between auth payload and connect params; prevents platform divergence in v3 signature verification
+- **Pairing bell cleanup** — simplified `unsubs` array to single `unsub` variable with `?.()` cleanup
+- **Agent overview** — added `.catch()` to fire-and-forget `agents.list` refresh in `onUpdated`
+- **`compactingKey` ref guard** — `useCallback` dependency uses `compactingRef` instead of stale closure over `compactingKey` state
+
+### Fixed
+
+#### Channels
+- **DM policy enum** — `allow/deny` → `pairing/allowlist/open/disabled` (matching `DmPolicySchema` at `zod-schema.core.ts:313`)
+- **Group policy enum** — `allow/mention/deny` → `open/disabled/allowlist` (matching `GroupPolicySchema` at `zod-schema.core.ts:315`)
+
+#### Dependencies
+- **`@noble/ed25519`** — updated to `^2.3.0`
+
+---
+
+### Added
+
 #### Usage & Cost Analytics `/usage`
 - **Usage page** — new route `/usage`; nav item (ChartColumn) in sidebar; lazy-loaded with `PageErrorBoundary`
 - **Manual fetch workflow** — page loads idle; user selects date range (or preset: Today, 7d, 30d) and clicks Refresh; empty state with guidance message; matches OpenClaw's pattern

package-lock.json

@@ -1,10 +1,4 @@
-// ---------------------------------------------------------------------------
-//  ClawKernel — Database
-//
-//  SQLite via better-sqlite3 + Drizzle ORM.
-//  DB file: ~/.clawkernel.db
-//  Tables are created with IF NOT EXISTS — no migrations needed.
-// ---------------------------------------------------------------------------
+// SQLite database at ~/.clawkernel.db. Tables are created with IF NOT EXISTS, so no migrations are required.
 
 import os from 'node:os'
 import path from 'node:path'

server/db.ts

@@ -1,12 +1,4 @@
-// ---------------------------------------------------------------------------
-//  ClawKernel — Hono server
-//
-//  Entry points:
-//    Production:  spawned by bin/clawkernel.mjs (config via CK_* env vars)
-//    Development: `npm run dev:server` via tsx (reads ~/.clawkernel.json)
-//
-//  Serves the Vite dist/ build + all /api/* routes.
-// ---------------------------------------------------------------------------
+// Hono server for the SPA and local API routes.
 
 import { existsSync, readFileSync } from 'node:fs'
 import { readFile, stat } from 'node:fs/promises'
@@ -60,12 +52,7 @@ const clr = COLOR
   ? { m: '\x1b[95m', g: '\x1b[92m', dim: '\x1b[2m', b: '\x1b[1m', r: '\x1b[0m' }
   : { m: '', g: '', dim: '', b: '', r: '' }
 
-// ---------------------------------------------------------------------------
-//  Config injection into index.html
-//
-//  Built once and cached for the server's lifetime. In dev mode (no dist/),
-//  the server still starts — SPA fallback returns a minimal dev-mode page.
-// ---------------------------------------------------------------------------
+// Build this once per process. In dev mode without dist/, the server returns a minimal fallback page.
 
 const DEV_FALLBACK_HTML = `<!DOCTYPE html><html><head><title>ClawKernel</title></head><body>
 <pre>dist/index.html not found.\n\nRun: npm run build\nThen restart the server.</pre></body></html>`
@@ -111,14 +98,7 @@ const MIME_TYPES = new Map([
   ['.map', 'application/json'],
 ])
 
-// ---------------------------------------------------------------------------
-//  Auth middleware for mutating API endpoints
-//
-//  When CK_API_TOKEN is set, POST/PATCH/DELETE requests to /api/* require
-//  a matching Authorization: Bearer <token> header. GET requests are always
-//  public (health, version, prefs read). When CK_API_TOKEN is empty (default),
-//  all endpoints are open — appropriate for localhost-only access.
-// ---------------------------------------------------------------------------
+// When CK_API_TOKEN is set, mutating /api requests require Authorization: Bearer <token>.
 
 function requireAuth(c: { req: { header: (name: string) => string | undefined } }): Response | null {
   if (!API_TOKEN) return null

server/index.ts

@@ -217,10 +217,7 @@ const ActivityItem = memo(function ActivityItem({ item, now }: { readonly item:
 
   return (
     <div className="group relative flex gap-3 py-2.5">
-      {/* Timeline line */}
       <div className="absolute left-[13px] top-10 bottom-0 w-px bg-border/40 group-last:hidden" />
-
-      {/* Dot + icon */}
       <div
         className={cn(
           'relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full',
@@ -229,8 +226,6 @@ const ActivityItem = memo(function ActivityItem({ item, now }: { readonly item:
       >
         <Icon className={cn('h-3.5 w-3.5', CATEGORY_COLORS[item.category])} />
       </div>
-
-      {/* Content */}
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
           <span className="text-xs font-medium text-foreground truncate">{item.title}</span>
@@ -294,7 +289,7 @@ export function AgentActivity({ agentId, client }: Props) {
   const [filter, setFilter] = useState<EventCategory>('all')
   const [cronRuns, setCronRuns] = useState<Array<CronRunLogEntry & { _jobName?: string }>>([])
 
-  const [cleared, setCleared] = useState<number>(0) // timestamp of last clear
+  const [cleared, setCleared] = useState<number>(0)
   const [now, setNow] = useState(Date.now())
 
   useEffect(() => {
@@ -339,7 +334,6 @@ export function AgentActivity({ agentId, client }: Props) {
 
   return (
     <div className="flex h-full flex-col gap-3 p-4">
-      {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
           <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-primary/10">
@@ -362,13 +356,9 @@ export function AgentActivity({ agentId, client }: Props) {
       </div>
 
       <Separator className="opacity-50" />
-
-      {/* Filter bar */}
       <div className="rounded-2xl border border-border/50 bg-card/80 backdrop-blur-sm px-3 py-2">
         <ActivityFilter active={filter} onChange={setFilter} counts={counts} />
       </div>
-
-      {/* Timeline */}
       <div className="flex-1 min-h-0">
         <ScrollArea className="h-full">
           {filtered.length === 0 ? (

src/app/agents/components/agent-activity.tsx

@@ -221,7 +221,6 @@ function BindingFormDialog({
         </DialogHeader>
 
         <div className="space-y-4">
-          {/* Channel */}
           <div className="space-y-1.5">
             <Label className="text-xs">Channel *</Label>
             <div className="relative">
@@ -239,8 +238,6 @@ function BindingFormDialog({
               </select>
             </div>
           </div>
-
-          {/* Account ID */}
           <div className="space-y-1.5">
             <Label className="text-xs">Account ID</Label>
             <Input
@@ -250,8 +247,6 @@ function BindingFormDialog({
               className="text-sm"
             />
           </div>
-
-          {/* Peer */}
           <div className="grid grid-cols-3 gap-2">
             <div className="space-y-1.5">
               <Label className="text-xs">Peer Kind</Label>
@@ -277,8 +272,6 @@ function BindingFormDialog({
               />
             </div>
           </div>
-
-          {/* Guild / Team */}
           <div className="grid grid-cols-2 gap-2">
             <div className="space-y-1.5">
               <Label className="text-xs">Guild ID</Label>
@@ -299,8 +292,6 @@ function BindingFormDialog({
               />
             </div>
           </div>
-
-          {/* Roles */}
           <div className="space-y-1.5">
             <Label className="text-xs">Roles</Label>
             <Input
@@ -421,7 +412,6 @@ export function AgentBindings({ agentId, config, isDefault, client }: Props) {
 
   return (
     <div className="space-y-4">
-      {/* Header */}
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="flex flex-wrap items-center gap-2">
           <AgentStatPill
@@ -441,8 +431,6 @@ export function AgentBindings({ agentId, config, isDefault, client }: Props) {
           Add Binding
         </Button>
       </div>
-
-      {/* Bindings list */}
       {agentBindingsWithIndex.length === 0 ? (
         <AgentTabEmptyState
           icon={Unlink}
@@ -470,8 +458,6 @@ export function AgentBindings({ agentId, config, isDefault, client }: Props) {
           ))}
         </div>
       )}
-
-      {/* Other agents' bindings for context */}
       {otherAgentBindings.length > 0 && (
         <div className="space-y-2">
           <Separator className="opacity-30" />
@@ -494,8 +480,6 @@ export function AgentBindings({ agentId, config, isDefault, client }: Props) {
           </div>
         </div>
       )}
-
-      {/* Create Dialog */}
       <BindingFormDialog
         open={createOpen}
         onOpenChange={setCreateOpen}
@@ -505,8 +489,6 @@ export function AgentBindings({ agentId, config, isDefault, client }: Props) {
         onSave={handleCreate}
         saving={saving}
       />
-
-      {/* Edit Dialog */}
       <BindingFormDialog
         open={editIndex !== null}
         onOpenChange={(o) => {
@@ -518,8 +500,6 @@ export function AgentBindings({ agentId, config, isDefault, client }: Props) {
         onSave={handleEdit}
         saving={saving}
       />
-
-      {/* Delete Confirm */}
       <ConfirmDialog
         open={deleteIndex !== null}
         onOpenChange={(o) => {

src/app/agents/components/agent-bindings.tsx

@@ -98,7 +98,6 @@ function ChannelCard({
         channelBorderClass(allConnected, partial),
       )}
     >
-      {/* Header */}
       <div className="flex items-start justify-between mb-3">
         <div
           className={cn('flex h-12 w-12 items-center justify-center rounded-xl', iconBoxClass(allConnected, partial))}
@@ -129,20 +128,14 @@ function ChannelCard({
           <span className={cn('h-3 w-3 rounded-full', dotClass(allConnected, partial))} />
         </div>
       </div>
-
-      {/* Name */}
       <p className="text-sm font-semibold text-foreground">{label}</p>
       <p className="font-mono text-[10px] text-muted-foreground/40 mt-0.5">{channelId}</p>
-
-      {/* Connection bar */}
       <div className="mt-3 h-1.5 rounded-full bg-muted/30 overflow-hidden">
         <div
           className={cn('h-full rounded-full transition-all duration-500', barClass(allConnected, partial))}
           style={{ width: `${Math.max(ratio, 2)}%` }}
         />
       </div>
-
-      {/* Stats */}
       <div className="flex gap-3 mt-3">
         <div>
           <p className="text-xs font-bold text-foreground">{s.connected}</p>
@@ -157,8 +150,6 @@ function ChannelCard({
           <p className="text-[9px] text-muted-foreground/40">Enabled</p>
         </div>
       </div>
-
-      {/* Bindings detail */}
       {bindings.length > 0 && (
         <>
           <Separator className="my-3 opacity-30" />
@@ -229,7 +220,6 @@ export function AgentChannels({ agentId, channels, config, isDefault }: Props) {
 
   return (
     <div className="space-y-4">
-      {/* Summary bar */}
       <div className="flex flex-wrap items-center gap-2">
         <AgentStatPill icon={Radio} value={ids.length} label="channels" />
         <AgentStatPill
@@ -245,8 +235,6 @@ export function AgentChannels({ agentId, channels, config, isDefault }: Props) {
           </Badge>
         )}
       </div>
-
-      {/* Channel grid */}
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {sortedIds.map((id) => {
           const accounts = channels.channelAccounts?.[id] ?? []

src/app/agents/components/agent-channels.tsx

@@ -279,7 +279,6 @@ export function AgentComparison({ agents, sessions, config, identities, activeRu
 
   return (
     <div className="rounded-2xl border border-border/50 bg-card/80 backdrop-blur-sm p-5 sm:p-6 space-y-4">
-      {/* Top bar */}
       <div className="flex flex-wrap items-center gap-3">
         <div className="flex items-center gap-2 mr-auto">
           <ArrowLeftRight className="h-5 w-5 text-primary" />
@@ -293,17 +292,13 @@ export function AgentComparison({ agents, sessions, config, identities, activeRu
       </div>
 
       <Separator className="opacity-40" />
-
-      {/* Column headers */}
       <div className="grid grid-cols-[140px_1fr_1fr] gap-4 px-4 max-sm:hidden">
         <div />
         <AgentColumnHeader d={dataA} />
         <AgentColumnHeader d={dataB} />
       </div>
 
       <Separator className="opacity-30" />
-
-      {/* Comparison rows */}
       <div className="space-y-0.5">
         <ComparisonRow label="Identity" valueA={agentIdentityLabel(dataA)} valueB={agentIdentityLabel(dataB)} />
         <ComparisonRow