@swarmclawai/swarmclaw 0.8.8 → 0.8.9

package/README.md

@@ -129,16 +129,18 @@ npm i -g @swarmclawai/swarmclaw
 pnpm add -g @swarmclawai/swarmclaw
 yarn global add @swarmclawai/swarmclaw
 bun add -g @swarmclawai/swarmclaw
-swarmclaw
+swarmclaw server
 ```
 
+`swarmclaw` by itself opens the CLI. `swarmclaw server` launches the packaged standalone server on `http://localhost:3456`.
+
 ### One-off run
 
 ```bash
-npx @swarmclawai/swarmclaw
-pnpm dlx @swarmclawai/swarmclaw
-yarn dlx @swarmclawai/swarmclaw
-bunx @swarmclawai/swarmclaw
+npx @swarmclawai/swarmclaw server
+pnpm dlx @swarmclawai/swarmclaw server
+yarn dlx @swarmclawai/swarmclaw server
+bunx @swarmclawai/swarmclaw server
 ```
 
 ### Install script
@@ -148,7 +150,8 @@ curl -fsSL https://raw.githubusercontent.com/swarmclawai/swarmclaw/main/install.
 ```
 
 The installer resolves the latest stable release tag and installs that version by default.
-To pin a version: `SWARMCLAW_VERSION=v0.8.7 curl ... | bash`
+It also builds the production bundle so `npm run start` is ready immediately after install.
+To pin a version: `SWARMCLAW_VERSION=v0.8.9 curl ... | bash`
 
 Or run locally from the repo (friendly for non-technical users):
 
@@ -165,6 +168,12 @@ npm run quickstart
 - Prepare `.env.local` and `data/`
 - Start the app at `http://localhost:3456`
 
+For the packaged production server, use:
+
+```bash
+npm run quickstart:prod
+```
+
 If you prefer another package manager for local development:
 
 ```bash
@@ -701,7 +710,7 @@ npm run update:easy     # safe update helper for local installs
 SwarmClaw uses tag-based releases (`vX.Y.Z`) as the stable channel.
 
 ```bash
-# example patch release (v0.8.7 style)
+# example patch release (v0.8.9 style)
 npm version patch
 git push origin main --follow-tags
 ```
@@ -711,14 +720,15 @@ On `v*` tags, GitHub Actions will:
 2. Create a GitHub Release
 3. Build and publish Docker images to `ghcr.io/swarmclawai/swarmclaw` (`:vX.Y.Z`, `:latest`, `:sha-*`)
 
-#### v0.8.7 Release Readiness Notes
+#### v0.8.9 Release Readiness Notes
 
-Before shipping `v0.8.7`, confirm the following user-facing changes are reflected in docs:
+Before shipping `v0.8.9`, confirm the following user-facing changes are reflected in docs:
 
-1. Install/update docs note that `v0.8.7` repairs the committed npm lockfile so `npm ci` succeeds again on clean GitHub Actions and operator installs.
-2. Site and README install/version strings are updated to `v0.8.7`, including install snippets, release notes index text, and sidebar/footer labels.
-3. Release notes make it explicit that this patch is a packaging/install integrity fix on top of the `v0.8.6` runtime changes, not a new behavior rollout.
-4. The release branch and `main` stay aligned so the shipped tag points at the same commit users see on the default branch.
+1. Install docs make it explicit that global npm installs use `swarmclaw server`, not the Next dev server, and that the curl installer prebuilds the production bundle.
+2. Update docs note that repository updates rebuild with `npm run build` and packaged installs can use `swarmclaw update` to rebuild the standalone server after upgrading.
+3. Site and README install/version strings are updated to `v0.8.9`, including install snippets, release notes index text, and sidebar/footer labels.
+4. Release notes mention the browser resilience changes and the installer/update build alignment, then absorb any final release bullets from the remaining in-flight work before tagging.
+5. The release branch and `main` stay aligned so the shipped tag points at the same commit users see on the default branch.
 
 ## CLI
 

package/bin/update-cmd.js

@@ -36,10 +36,32 @@ function getLatestStableTag() {
   return tags.find((t) => RELEASE_TAG_RE.test(t)) || null
 }
 
+function rebuildStandaloneServer(
+  execImpl = execFileSync,
+  logger = { log, logError },
+) {
+  const serverCmdPath = path.join(PKG_ROOT, 'bin', 'server-cmd.js')
+  logger.log('Rebuilding the standalone server bundle...')
+  try {
+    execImpl(process.execPath, [serverCmdPath, '--build'], {
+      cwd: PKG_ROOT,
+      stdio: 'inherit',
+      timeout: 10 * 60_000,
+    })
+    logger.log('Standalone server bundle rebuilt.')
+    return 0
+  } catch (err) {
+    logger.logError(`Standalone rebuild failed: ${err.message}`)
+    logger.logError('Retry manually with: swarmclaw server --build')
+    return 1
+  }
+}
+
 function runRegistrySelfUpdate(
   packageManager = PACKAGE_MANAGER,
   execImpl = execFileSync,
   logger = { log, logError },
+  rebuildImpl = execFileSync,
 ) {
   const update = getGlobalUpdateSpec(packageManager, PACKAGE_NAME)
   logger.log(`No git checkout detected. Updating the global ${PACKAGE_NAME} install via ${packageManager}...`)
@@ -50,13 +72,17 @@ function runRegistrySelfUpdate(
       timeout: 120_000,
     })
     logger.log(`Global update complete via ${packageManager}.`)
-    logger.log('Restart the server to apply changes: swarmclaw server stop && swarmclaw server start')
-    return 0
   } catch (err) {
     logger.logError(`Registry update failed: ${err.message}`)
     logger.logError(`Retry manually with: ${update.display}`)
     return 1
   }
+
+  const rebuildExitCode = rebuildStandaloneServer(rebuildImpl, logger)
+  if (rebuildExitCode !== 0) return rebuildExitCode
+
+  logger.log('Restart the server to apply changes: swarmclaw server stop && swarmclaw server start')
+  return 0
 }
 
 function main() {

package/bin/update-cmd.test.js

@@ -3,36 +3,53 @@
 
 const test = require('node:test')
 const assert = require('node:assert/strict')
+const path = require('node:path')
 
 const { runRegistrySelfUpdate } = require('./update-cmd.js')
 
-test('runRegistrySelfUpdate executes the manager-specific global update command', () => {
+test('runRegistrySelfUpdate executes the manager-specific global update command and rebuilds the standalone server', () => {
   const messages = []
-  let captured = null
+  const captured = []
 
   const exitCode = runRegistrySelfUpdate(
     'pnpm',
     (command, args, options) => {
-      captured = { command, args, options }
+      captured.push({ command, args, options })
     },
     {
       log: (message) => messages.push(`log:${message}`),
       logError: (message) => messages.push(`err:${message}`),
     },
+    (command, args, options) => {
+      captured.push({ command, args, options })
+    },
   )
 
   assert.equal(exitCode, 0)
-  assert.deepEqual(captured, {
-    command: 'pnpm',
-    args: ['add', '-g', '@swarmclawai/swarmclaw@latest'],
-    options: {
-      cwd: process.cwd(),
-      stdio: 'inherit',
-      timeout: 120_000,
-    },
-  })
+  assert.deepEqual(captured, [
+    {
+      command: 'pnpm',
+      args: ['add', '-g', '@swarmclawai/swarmclaw@latest'],
+      options: {
+        cwd: process.cwd(),
+        stdio: 'inherit',
+        timeout: 120_000,
+      },
+    },
+    {
+      command: process.execPath,
+      args: [path.join(process.cwd(), 'bin', 'server-cmd.js'), '--build'],
+      options: {
+        cwd: process.cwd(),
+        stdio: 'inherit',
+        timeout: 600_000,
+      },
+    },
+  ])
   assert.match(messages.join('\n'), /updating the global @swarmclawai\/swarmclaw install via pnpm/i)
   assert.match(messages.join('\n'), /global update complete via pnpm/i)
+  assert.match(messages.join('\n'), /rebuilding the standalone server bundle/i)
+  assert.match(messages.join('\n'), /standalone server bundle rebuilt/i)
 })
 
 test('runRegistrySelfUpdate reports a manual retry command when the registry update fails', () => {
@@ -53,3 +70,23 @@ test('runRegistrySelfUpdate reports a manual retry command when the registry upd
   assert.match(messages.join('\n'), /registry update failed: spawn bun ENOENT/i)
   assert.match(messages.join('\n'), /retry manually with: bun add -g @swarmclawai\/swarmclaw@latest/i)
 })
+
+test('runRegistrySelfUpdate reports a manual rebuild command when the rebuild step fails', () => {
+  const messages = []
+
+  const exitCode = runRegistrySelfUpdate(
+    'npm',
+    () => {},
+    {
+      log: (message) => messages.push(`log:${message}`),
+      logError: (message) => messages.push(`err:${message}`),
+    },
+    () => {
+      throw new Error('build failed')
+    },
+  )
+
+  assert.equal(exitCode, 1)
+  assert.match(messages.join('\n'), /standalone rebuild failed: build failed/i)
+  assert.match(messages.join('\n'), /retry manually with: swarmclaw server --build/i)
+})

package/bundled-skills/google-workspace/SKILL.md

@@ -0,0 +1,94 @@
+---
+name: google-workspace
+description: Use Google Workspace CLI (`gws`) for Drive, Docs, Sheets, Gmail, Calendar, Chat, and related Workspace API tasks.
+homepage: https://github.com/googleworkspace/cli
+metadata:
+  openclaw:
+    requires:
+      bins: [gws]
+---
+
+# Google Workspace CLI
+
+Use `gws` when the task is about Google Workspace resources or Google Workspace API automation.
+
+Prefer `gws` over generic HTTP calls when possible because it already knows the Workspace API surface and returns structured JSON by default.
+
+## Rules
+
+1. Start with read/list/get commands before mutating Workspace state.
+2. Confirm IDs first: document IDs, spreadsheet IDs, file IDs, message IDs, calendar IDs, space IDs.
+3. Do not run interactive auth flows from an agent tool call. If auth is missing, report that `gws` needs to be configured in plugin settings or via a manual terminal login.
+4. Keep commands machine-readable. Prefer JSON output and parse it instead of scraping human text.
+5. For large list operations, limit the scope first, then page or filter.
+
+## Common Commands
+
+Check installation and health:
+
+```bash
+gws doctor
+```
+
+Inspect help for a resource or method:
+
+```bash
+gws help
+gws drive help
+gws drive files help
+```
+
+Google Docs:
+
+```bash
+gws docs get --document-id <DOC_ID>
+```
+
+Google Drive:
+
+```bash
+gws drive files list --params '{"pageSize":10}'
+gws drive files get --file-id <FILE_ID>
+```
+
+Google Sheets:
+
+```bash
+gws sheets spreadsheets get --spreadsheet-id <SPREADSHEET_ID>
+```
+
+Gmail:
+
+```bash
+gws gmail users messages list --user-id me --params '{"maxResults":10}'
+gws gmail users messages get --user-id me --message-id <MESSAGE_ID>
+```
+
+Google Calendar:
+
+```bash
+gws calendar events list --calendar-id primary --params '{"maxResults":10,"singleEvents":true}'
+```
+
+Google Chat:
+
+```bash
+gws chat spaces messages list --parent spaces/<SPACE_ID>
+```
+
+## Tool Usage In SwarmClaw
+
+When using the `google_workspace` tool:
+
+- Put the `gws` command after the binary into `args`, for example:
+  `{"args":["drive","files","list"],"params":{"pageSize":5}}`
+- Use `params` for `--params`
+- Use `jsonInput` for `--json`
+- Use `pageAll: true` when you intentionally want all pages
+- Use `dryRun: true` before risky mutations if you are unsure
+
+## Error Handling
+
+- If `gws` is missing: tell the user to install Google Workspace CLI.
+- If auth is missing or expired: tell the user to configure the plugin settings or authenticate `gws` manually.
+- If a command fails because an ID is missing: switch to a list/search command first and find the right ID.

package/next.config.ts

@@ -3,7 +3,6 @@ import { execSync } from "child_process";
 import { networkInterfaces } from "os";
 import path from "path";
 import { fileURLToPath } from "url";
-import { DIRECT_NAV_SEGMENTS } from "./view-route-paths";
 
 const PROJECT_ROOT = path.dirname(fileURLToPath(import.meta.url))
 
@@ -76,19 +75,6 @@ const nextConfig: NextConfig = {
     'qrcode',
   ],
   allowedDevOrigins: getAllowedDevOrigins(),
-  async rewrites() {
-    const views = DIRECT_NAV_SEGMENTS.join('|')
-    return [
-      {
-        source: `/:view(${views})`,
-        destination: '/',
-      },
-      {
-        source: `/:view(${views})/:id`,
-        destination: '/',
-      },
-    ]
-  },
 };
 
 export default nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swarmclawai/swarmclaw",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "Self-hosted AI agent orchestration dashboard — manage LLM providers, orchestrate agent swarms, schedule tasks, and bridge agents to chat platforms.",
   "license": "MIT",
   "publishConfig": {
@@ -29,6 +29,7 @@
   },
   "files": [
     "bin/",
+    "bundled-skills/",
     "src/",
     "public/",
     "scripts/postinstall.mjs",
@@ -42,9 +43,9 @@
     "quickstart": "node ./scripts/easy-setup.mjs --start",
     "quickstart:prod": "node ./scripts/easy-setup.mjs --prod",
     "update:easy": "node ./scripts/easy-update.mjs",
-    "dev": "next dev --webpack --hostname 0.0.0.0 -p 3456",
+    "dev": "next dev --turbopack --hostname 0.0.0.0 -p 3456",
     "dev:webpack": "next dev --webpack --hostname 0.0.0.0 -p 3456",
-    "dev:clean": "rm -rf .next && next dev --hostname 0.0.0.0 -p 3456",
+    "dev:clean": "rm -rf .next && next dev --turbopack --hostname 0.0.0.0 -p 3456",
     "build": "next build",
     "build:ci": "NEXT_DISABLE_ESLINT=1 next build",
     "start": "node .next/standalone/server.js",
@@ -59,15 +60,15 @@
     "lint:baseline:update": "node ./scripts/lint-baseline.mjs update",
     "cli": "node ./bin/swarmclaw.js",
     "test:cli": "node --test src/cli/*.test.js bin/*.test.js",
-    "test:openclaw": "tsx --test src/lib/openclaw-agent-id.test.ts src/lib/openclaw-endpoint.test.ts src/lib/server/agent-runtime-config.test.ts src/lib/server/build-llm.test.ts src/lib/server/connectors/connector-routing.test.ts src/lib/server/connectors/openclaw.test.ts src/lib/server/gateway/protocol.test.ts src/lib/server/llm-response-cache.test.ts src/lib/server/mcp-conformance.test.ts src/lib/server/openclaw-agent-resolver.test.ts src/lib/server/openclaw-deploy.test.ts src/lib/server/openclaw-skills-normalize.test.ts src/lib/server/session-tools/openclaw-nodes.test.ts src/lib/server/task-quality-gate.test.ts src/lib/server/task-validation.test.ts src/lib/server/tool-capability-policy.test.ts",
+    "test:openclaw": "tsx --test src/lib/openclaw/openclaw-agent-id.test.ts src/lib/openclaw/openclaw-endpoint.test.ts src/lib/server/agents/agent-runtime-config.test.ts src/lib/server/build-llm.test.ts src/lib/server/connectors/connector-routing.test.ts src/lib/server/connectors/openclaw.test.ts src/lib/server/gateway/protocol.test.ts src/lib/server/llm-response-cache.test.ts src/lib/server/mcp-conformance.test.ts src/lib/server/openclaw/agent-resolver.test.ts src/lib/server/openclaw/deploy.test.ts src/lib/server/openclaw/skills-normalize.test.ts src/lib/server/session-tools/openclaw-nodes.test.ts src/lib/server/tasks/task-quality-gate.test.ts src/lib/server/tasks/task-validation.test.ts src/lib/server/tool-capability-policy.test.ts",
     "test:mcp:conformance": "node --import tsx ./scripts/mcp-conformance-check.ts",
     "postinstall": "node ./scripts/postinstall.mjs"
   },
   "dependencies": {
     "@huggingface/transformers": "^3.8.1",
     "@langchain/anthropic": "^1.3.18",
-    "@langchain/core": "^1.1.26",
-    "@langchain/langgraph": "^1.1.5",
+    "@langchain/core": "^1.1.31",
+    "@langchain/langgraph": "^1.2.2",
     "@langchain/openai": "^1.2.8",
     "@multiavatar/multiavatar": "^1.0.7",
     "@playwright/mcp": "^0.0.68",
@@ -88,6 +89,7 @@
     "grammy": "^1.40.0",
     "highlight.js": "^11.11.1",
     "imapflow": "^1.2.11",
+    "langchain": "^1.2.30",
     "lucide-react": "^0.574.0",
     "mailparser": "^3.9.3",
     "next": "16.1.6",
@@ -133,6 +135,8 @@
   "optionalDependencies": {
     "botbuilder": "^4.23.3",
     "googleapis": "^171.4.0",
-    "matrix-bot-sdk": "^0.8.0"
+    "matrix-bot-sdk": "^0.8.0",
+    "opusscript": "0.0.8",
+    "utf-8-validate": "5.0.10"
   }
 }

package/src/app/activity/page.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { useNow } from '@/hooks/use-now'
+import { useWs } from '@/hooks/use-ws'
+import { MainContent } from '@/components/layout/main-content'
+import { timeAgo } from '@/lib/time-format'
+import type { ActivityEntry } from '@/types'
+
+const ENTITY_ICONS: Record<string, string> = {
+  agent: 'A', task: 'T', connector: 'C', session: 'S', webhook: 'W', schedule: 'R',
+}
+
+const ACTION_COLORS: Record<string, string> = {
+  created: 'bg-emerald-500/15 text-emerald-400',
+  updated: 'bg-blue-500/15 text-blue-400',
+  deleted: 'bg-red-500/15 text-red-400',
+  started: 'bg-green-500/15 text-green-400',
+  stopped: 'bg-gray-500/15 text-gray-400',
+  queued: 'bg-amber-500/15 text-amber-400',
+  completed: 'bg-emerald-500/15 text-emerald-400',
+  failed: 'bg-red-500/15 text-red-400',
+  approved: 'bg-green-500/15 text-green-400',
+  rejected: 'bg-red-500/15 text-red-400',
+}
+
+const ENTITY_TYPES = ['', 'agent', 'task', 'connector', 'session', 'webhook', 'schedule'] as const
+
+export default function ActivityPage() {
+  const now = useNow()
+  const entries = useAppStore((s) => s.activityEntries)
+  const loadActivity = useAppStore((s) => s.loadActivity)
+  const [filterType, setFilterType] = useState('')
+
+  useEffect(() => { loadActivity({ entityType: filterType || undefined, limit: 100 }) }, [filterType, loadActivity])
+  useWs('activity', () => loadActivity({ entityType: filterType || undefined, limit: 100 }), 10_000)
+
+  return (
+    <MainContent>
+      <div className="flex-1 flex flex-col h-full overflow-hidden">
+        <div className="flex items-center justify-between px-8 pt-6 pb-4 shrink-0">
+          <div>
+            <h1 className="font-display text-[28px] font-800 tracking-[-0.03em]">Activity</h1>
+            <p className="text-[13px] text-text-3 mt-1">Audit trail of all entity mutations</p>
+          </div>
+          <select
+            value={filterType}
+            onChange={(e) => setFilterType(e.target.value)}
+            className="px-3 py-2 rounded-[10px] text-[13px] font-600 cursor-pointer transition-all border bg-transparent border-white/[0.06] text-text-3 hover:bg-white/[0.03] appearance-none"
+            style={{ fontFamily: 'inherit', minWidth: 130 }}
+          >
+            <option value="">All Types</option>
+            {ENTITY_TYPES.filter(Boolean).map((t) => (
+              <option key={t} value={t}>{t.charAt(0).toUpperCase() + t.slice(1)}s</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-8 pb-6">
+          {entries.length === 0 ? (
+            <div className="text-center text-text-3 text-[14px] mt-16">No activity yet</div>
+          ) : (
+            <div className="space-y-1">
+              {entries.map((entry: ActivityEntry, idx: number) => (
+                <div
+                  key={entry.id}
+                  className="flex items-start gap-3 py-3 border-b border-white/[0.04]"
+                  style={{
+                    animation: 'fade-up 0.5s var(--ease-spring) both',
+                    animationDelay: `${Math.min(idx * 0.03, 0.5)}s`
+                  }}
+                >
+                  <div className="w-8 h-8 rounded-[8px] bg-surface-2 flex items-center justify-center text-[12px] font-700 text-text-3 shrink-0">
+                    {ENTITY_ICONS[entry.entityType] || '?'}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className={`px-1.5 py-0.5 rounded-[5px] text-[10px] font-600 ${ACTION_COLORS[entry.action] || 'bg-white/[0.06] text-text-3'}`}>
+                        {entry.action}
+                      </span>
+                      <span className="text-[10px] text-text-3/50 font-mono">{entry.entityType}</span>
+                      <span className="text-[10px] text-text-3/40">{entry.actor}</span>
+                    </div>
+                    <p className="text-[13px] text-text-2 leading-[1.4] truncate">{entry.summary}</p>
+                  </div>
+                  <span className="text-[11px] text-text-3/50 shrink-0 pt-1">{timeAgo(entry.timestamp, now)}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </MainContent>
+  )
+}

package/src/app/agents/[id]/page.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { useAppStore } from '@/stores/use-app-store'
+import { selectActiveSessionId } from '@/stores/slices/session-slice'
+import { ChatArea } from '@/components/chat/chat-area'
+import { CanvasPanel } from '@/components/canvas/canvas-panel'
+
+export default function AgentChatPage() {
+  const { id } = useParams<{ id: string }>()
+  const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
+  const activeSessionId = useAppStore(selectActiveSessionId)
+  const sessions = useAppStore((s) => s.sessions)
+  const agents = useAppStore((s) => s.agents)
+  const [canvasDismissedFor, setCanvasDismissedFor] = useState<string | null>(null)
+
+  // Sync URL param to store
+  useEffect(() => {
+    if (id) {
+      void setCurrentAgent(decodeURIComponent(id))
+    }
+  }, [id, setCurrentAgent])
+
+  const currentSession = activeSessionId ? sessions[activeSessionId] : null
+  const hasCanvas = !!(currentSession?.canvasContent && canvasDismissedFor !== activeSessionId)
+  const canvasAgentName = currentSession?.agentId && agents[currentSession.agentId] ? agents[currentSession.agentId].name : undefined
+
+  return (
+    <div className="flex-1 flex h-full min-h-0 min-w-0">
+      <div className="flex-1 min-h-0 min-w-0 overflow-hidden">
+        <ChatArea key={id} />
+      </div>
+      {hasCanvas && activeSessionId && (
+        <CanvasPanel
+          sessionId={activeSessionId}
+          agentName={canvasAgentName}
+          onClose={() => activeSessionId && setCanvasDismissedFor(activeSessionId)}
+        />
+      )}
+    </div>
+  )
+}

package/src/app/agents/layout.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useState } from 'react'
+import { SidebarPanelShell } from '@/components/layout/sidebar-panel-shell'
+import { MainContent } from '@/components/layout/main-content'
+import { AgentChatList } from '@/components/agents/agent-chat-list'
+import { AgentList } from '@/components/agents/agent-list'
+import { useAppStore } from '@/stores/use-app-store'
+
+export default function AgentsLayout({ children }: { children: React.ReactNode }) {
+  const [agentViewMode, setAgentViewMode] = useState<'chat' | 'config'>('chat')
+
+  return (
+    <>
+      <SidebarPanelShell
+        title="Agents"
+        createLabel="Agent"
+        onNew={() => useAppStore.getState().setAgentSheetOpen(true)}
+        headerContent={
+          <div className="flex gap-1 px-4 pb-2">
+            {(['chat', 'config'] as const).map((mode) => (
+              <button
+                key={mode}
+                onClick={() => setAgentViewMode(mode)}
+                className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 capitalize cursor-pointer transition-all
+                  ${agentViewMode === mode ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                {mode}
+              </button>
+            ))}
+          </div>
+        }
+      >
+        {agentViewMode === 'chat' ? <AgentChatList inSidebar /> : <AgentList inSidebar />}
+      </SidebarPanelShell>
+      <MainContent>{children}</MainContent>
+    </>
+  )
+}

package/src/app/agents/page.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { useRouter } from 'next/navigation'
+import { useAppStore } from '@/stores/use-app-store'
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { getViewPath } from '@/lib/app/navigation'
+import { AgentChatList } from '@/components/agents/agent-chat-list'
+
+export default function AgentsPage() {
+  const isDesktop = useMediaQuery('(min-width: 768px)')
+  const router = useRouter()
+  const agents = useAppStore((s) => s.agents)
+  const appSettings = useAppStore((s) => s.appSettings)
+  const redirected = useRef(false)
+
+  const defaultAgent = appSettings.defaultAgentId && agents[appSettings.defaultAgentId]
+    ? agents[appSettings.defaultAgentId]
+    : Object.values(agents)[0] || null
+
+  // On desktop, auto-redirect to the default (or first) agent instead of showing a placeholder
+  useEffect(() => {
+    if (!isDesktop || redirected.current) return
+    if (defaultAgent) {
+      redirected.current = true
+      router.replace(getViewPath('agents', defaultAgent.id))
+    }
+  }, [isDesktop, defaultAgent, router])
+
+  if (!isDesktop) return <AgentChatList />
+
+  // Brief flash while redirecting, or no agents exist yet
+  return null
+}

package/src/app/api/agents/[id]/route.ts

@@ -1,8 +1,10 @@
 import { NextResponse } from 'next/server'
 import { loadAgents, saveAgents, loadSessions, logActivity, upsertStoredItem, upsertStoredItems } from '@/lib/server/storage'
-import { normalizeProviderEndpoint } from '@/lib/openclaw-endpoint'
+import { normalizeProviderEndpoint } from '@/lib/openclaw/openclaw-endpoint'
 import { mutateItem, notFound, type CollectionOps } from '@/lib/server/collection-helpers'
-import { ensureAgentThreadSession } from '@/lib/server/agent-thread-session'
+import { ensureAgentThreadSession } from '@/lib/server/agents/agent-thread-session'
+import { suspendAgentReferences } from '@/lib/server/agents/agent-cascade'
+import { notify } from '@/lib/server/ws-hub'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ops: CollectionOps<any> = { load: () => loadAgents({ includeTrashed: true }), save: saveAgents, topic: 'agents', table: 'agents' }
@@ -110,6 +112,7 @@ export async function DELETE(_req: Request, { params }: { params: Promise<{ id:
   for (const session of Object.values(sessions) as Array<Record<string, unknown>>) {
     if (!session || session.agentId !== id) continue
     session.agentId = null
+    session.heartbeatEnabled = false
     detached.push([session.id as string, session])
   }
   if (detached.length > 0) {
@@ -117,5 +120,13 @@ export async function DELETE(_req: Request, { params }: { params: Promise<{ id:
   }
   const detachedSessions = detached.length
 
-  return NextResponse.json({ ok: true, detachedSessions })
+  // Cascade: suspend tasks, schedules, watch jobs, connectors, webhooks, chatrooms
+  const cascade = suspendAgentReferences(id)
+  if (cascade.tasks) notify('tasks')
+  if (cascade.schedules) notify('schedules')
+  if (cascade.connectors) notify('connectors')
+  if (cascade.webhooks) notify('webhooks')
+  if (cascade.chatrooms) notify('chatrooms')
+
+  return NextResponse.json({ ok: true, detachedSessions, ...cascade })
 }