chore: more main-agent config/integration

…aw#49)

Tasks completed: 2/2
- Task 1: Port doc fixes (commits #44, #49, #69)
- Task 2: Port xAI reorder (commits #54, #56) and changelog (#89)

SUMMARY: .planning/phases/12-memory-qmd-hardening/12-05-SUMMARY.md

* feat(ui): Agent configuration experience — gateway hooks, file editors, LLM assist, auto-review

Major additions to the OpenClaw web UI:

Gateway Integration Layer:
- gateway-hooks.ts: React Query integration for all gateway RPC methods
- Typed query/mutation hooks for agents, config, models, sessions, skills, etc.
- Gateway event subscription hook for real-time updates

Agent Configuration Experience:
- AgentConfigPage: Tabbed config with progressive disclosure
- SoulEditor: SOUL.md editor with split view and markdown preview
- AgentFileEditor: Generic file editor for workspace files
- AgentOverviewConfig: Identity card, file health, suggestions
- Route: /agents/:agentId/configure

LLM Assist Panel:
- Conversational AI sidebar for configuration help
- Context-aware suggestions per config section
- Apply changes directly from suggestions

Auto-Review Panel:
- One-click config analysis with score/grade
- Actionable fix suggestions

Updated hooks and navigation to connect config flow.

* fix(ui): lint cleanup — remove unused imports, prefix unused params

- AutoReviewPanel: remove unused AnimatePresence, CardDescription; prefix unused params
- SkillConfigurator: remove unused AnimatePresence, Button; prefix agentId
- AgentConfigPage: remove unused AlertTriangle, RefreshCw, AGENT_FILES; wire SkillConfigurator into skills tab
- LLMAssistPanel: remove unused RefreshCw, ScrollArea, Separator; prefix agentId
- ModelBehaviorConfig: prefix unused isLoading param
- ModelSelector: remove unused Badge; prefix placeholder param
- useAgents: prefix unused isDefault param, fetchAgentsFromConfig fn

* perf(ui): split @xyflow into separate vendor chunk

@xyflow (React Flow for DAG visualization) was bundled into the vendor-react
chunk despite only being used on workstream/workflow pages. Moving it to
vendor-xyflow isolates 122 kB that's only loaded when needed.

Before: vendor-react 557 kB (everything)
After:  vendor-react 433 kB + vendor-xyflow 122 kB (lazy)

* feat(ui): content-shaped page skeletons for improved perceived performance

Add page-specific skeleton loading states that match actual content layout:
- HomeSkeleton: greeting, quick chat, agent grid, panel layout
- AgentListSkeleton: header + search + 3x3 card grid
- AgentDetailSkeleton: back nav, agent header, tabs, stats, content area
- ConversationListSkeleton: sidebar + empty state
- ChatThreadSkeleton: header, message bubbles pattern, input bar
- SettingsSkeleton: sidebar nav + settings content
- WorkstreamsSkeleton: header, filter tabs, workstream cards

Wire AgentDetailSkeleton into /agents/[agentId] route.

* fix(ui): UX polish — branding, cleanup, Skills route, container consistency

- Fix sidebar branding: 'Second Brain' → 'OpenClaw', logo initial 'S' → 'O'
- Remove 211 'use client' directives (Next.js artifact, meaningless in Vite)
- Fix homepage greeting: remove hardcoded 'User!' placeholder
- Normalize container patterns in Nodes and Jobs pages (remove redundant
  min-h-screen/max-w-7xl wrappers — AppShell already provides these)
- Add new /skills route with full CRUD: list, search, filter, enable/disable,
  install from URL/ClawhHub, uninstall, detail panel with config view
- Add Skills nav item to sidebar under Team section
- All changes use existing gateway hooks and API layer (no new APIs needed)
- Build passes cleanly (6.71s)

* feat(ui): mobile bottom navigation for responsive layout

- Add MobileBottomNav component with Home, Chat, Agents, Settings tabs
- 'More' tab opens full sidebar as a slide-out sheet
- Visible only on screens < md (768px), hidden on tablet/desktop
- Auto-hides on fullscreen pages (onboarding, unlock)
- Add bottom padding to content area on mobile to prevent nav overlap
- Respects safe-area-inset for notched devices
- Export from layout index

* feat(ui): add Logs route and mobile navigation improvements

- Add /logs route with log stream viewer (Power User mode)
  - Level filtering (trace/debug/info/warn/error/fatal) with counts
  - Search/filter by message or subsystem
  - Auto-scroll toggle, pause/resume stream
  - Export filtered logs as text file
  - Color-coded log levels with appropriate icons
  - Monospace font, compact density for log readability
- Add Logs nav item to sidebar Power User section
- Uses sample data for UI development; ready for gateway integration

* fix(ui): rebrand Second Brain → OpenClaw, use profile name on home page

- Sidebar: Updated logo text from 'Second Brain' to 'OpenClaw'
- Home page: Reads user display name from profile settings instead of hardcoded 'User!'
- Filesystem: Updated API endpoint and config references to openclaw.ai
- App.tsx: Updated sandbox page branding

Files changed:
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/components/layout/Sidebar.tsx
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routes/index.tsx
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routes/filesystem/index.tsx
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/App.tsx

* feat(ui): add /logs route — real-time gateway log streaming

- New route: /logs with polling-based log tail via gateway 'logs.tail' RPC
- Features: level filtering (trace/debug/info/warn/error/fatal), text search,
  auto-follow, pause/resume, export to JSONL, entry counts per level
- Dark terminal-style UI with color-coded log levels
- Added to sidebar Power User section with ScrollText icon
- Handles disconnected state gracefully

Files changed:
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routes/logs/index.tsx (new)
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/components/layout/Sidebar.tsx
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routeTree.gen.ts (auto-generated)

* feat(ui): add /analytics route — usage dashboard with token/cost/model/agent breakdowns

- New route: /analytics with gateway 'sessions.usage' + 'usage.cost' RPC
- Features: date range picker, stat cards (tokens/cost/messages/tools),
  daily bar charts (tokens + cost), model/agent/tool breakdowns with progress bars,
  full session table with sort-by-cost, expand/collapse
- Token and cost breakdown cards showing input/output/cache splits
- Responsive grid layout, loading skeletons, disconnected state
- Added to sidebar Power User section with BarChart3 icon

Files changed:
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routes/analytics/index.tsx (new)
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/components/layout/Sidebar.tsx
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routeTree.gen.ts (auto-generated)

* fix(ui): add TanStack Router errorComponent on root route

- RouteErrorComponent wraps ErrorFallback with router-aware recovery
- 'Try Again' invalidates the current route (re-fetches data)
- 'Go Home' navigates to / via router (no full page reload)
- Complements existing React ErrorBoundary for render-crash recovery

File changed:
- /Users/openclaw/openclaw-ui-redesign/apps/web/src/routes/__root.tsx

* a11y: skip nav, reduced motion, keyboard support, ARIA landmarks, live region announcer

- Add SkipNavLink + SkipNavContent for keyboard users to bypass sidebar (WCAG 2.4.1)
- Add ReducedMotionProvider wrapping app root — respects prefers-reduced-motion (WCAG 2.3.3)
- Add role/tabIndex/onKeyDown to 6 interactive non-button elements:
  ToolCategorySection, ConversationItem, MemoryCard (2 variants),
  agent-plan task toggle, GatewaySetupStep radio cards
- Add focus-visible ring styles to all fixed elements
- Add aria-label/role='navigation' to Sidebar landmark
- Add aria-expanded/aria-controls to expandable sections
- Add useAnnounce hook + useRouteAnnouncer for screen reader live regions
- Build verified: 7.03s, no errors

* a11y: route change announcer + dynamic document.title

- Announce navigation to screen readers via useAnnounce live region
- Update document.title on route changes (e.g. 'Settings — OpenClaw')
- Derives human-readable page name from URL path segment
- WCAG 4.1.3: Status Messages compliance

* feat(ui): agent activity feed widget on home dashboard

- New AgentActivityFeed component with real-time agent activity stream
- Shows agent avatar, activity type (7 types), description, relative timestamp
- Color-coded activity icons: session started, message sent, tool called,
  task completed, task failed, agent spawned, file edited
- Auto-refresh every 30s with live indicator pulse
- Proper empty state with guidance text
- ARIA: role=feed, role=article, aria-labels, semantic time elements
- Mock data hook (useAgentActivity) ready for real API swap
- Replaces placeholder widget on home page grid
- Build: 6.96s, no errors

* feat(ux): agent status indicators on avatars (openclaw#19)

Add reusable AgentStatusDot component with Framer Motion pulse
animations and useAgentStatus hook for deriving display status from
agent store data.

Status types:
- Online (green, slow pulse): active within last 5 minutes
- Busy (amber, fast pulse): currently processing or awaiting approval
- Offline (gray, static): inactive
- Error (red, static): error state

Integrated into:
- AgentAvatar (composed) — shared avatar used across the app
- AgentCard (compact + expanded variants) — home grid and agent list
- AgentSessionsIndicator — sidebar waiting-agents popover

Includes auto-expiry timer in useAgentStatus that transitions
online → offline when lastActive exceeds the 5-minute threshold.

* feat(ux): keyboard shortcuts discoverability badge (openclaw#18)

Changes landed in c6a1309 (co-committed with openclaw#19).

Summary of changes:
- apps/web/src/hooks/useShortcutsSeen.ts (new)
  localStorage-gated hook (key: oc_shortcuts_seen) tracking first-visit state

- apps/web/src/hooks/index.ts
  Export useShortcutsSeen from hooks barrel

- apps/web/src/providers/ShortcutsProvider.tsx
  Add ShortcutsContext exposing openShortcutsModal / shortcutsSeen / markShortcutsSeen;
  mark as seen whenever modal opens via keyboard, button, or command palette

- apps/web/src/providers/index.ts
  Export ShortcutsContext and useShortcutsContext

- apps/web/src/components/layout/Sidebar.tsx
  Add KeyboardShortcutsButton with Framer Motion pulsing dot + 'NEW' badge;
  button calls openShortcutsModal from context; dot/badge auto-dismiss on first open

- apps/web/src/components/composed/CommandPalette.tsx
  Add footer hint: 'Press ? to see all keyboard shortcuts'

* fix(a11y): dark mode color contrast improvements (openclaw#20)

- Remove all text-muted-foreground opacity modifiers (/40, /50, /60, /70, /80)
  that caused WCAG AA failures in dark mode. Replaced with full-opacity
  text-muted-foreground which passes at 6.16:1 on background and 5.81:1 on card.

- Add dark: overrides for hardcoded Tailwind gray/slate text colors:
  - text-gray-500 → dark:text-gray-400 (4.13:1→7.86:1)
  - text-gray-600 → dark:text-gray-400 (2.64:1→7.86:1)
  - text-slate-500 → dark:text-slate-400 (4.19:1→7.78:1)

Affected components: 25 files across composed, domain, and route layers.

Key contrast ratios (before → after on --background):
  muted-foreground/40:  1.88:1 → 6.16:1
  muted-foreground/50:  2.32:1 → 6.16:1
  muted-foreground/60:  2.85:1 → 6.16:1
  muted-foreground/70:  3.52:1 → 6.16:1
  muted-foreground/80:  4.27:1 → 6.16:1
  gray-500:             4.13:1 → 7.86:1 (via gray-400)
  gray-600:             2.64:1 → 7.86:1 (via gray-400)
  slate-500:            4.19:1 → 7.78:1 (via slate-400)

* feat(i18n): internationalization infrastructure with en/pt-BR/zh-CN/zh-TW (openclaw#11)

- Add react-i18next, i18next, i18next-browser-languagedetector dependencies
- Create i18n setup with language detection, localStorage persistence, en fallback
- Add 4 locale files (en, pt-BR, zh-CN, zh-TW) with ~75 key strings each:
  - common actions (Save, Cancel, Delete, Create, etc.)
  - navigation labels (Home, Conversations, Goals, Memories, etc.)
  - home dashboard greetings and section titles
  - settings section headings and appearance labels
  - error messages
  - agent status labels
- Import i18n initialization in main.tsx (before component tree)
- Integrate useTranslation in 5 key components:
  - Sidebar: all nav labels and section titles
  - AppearanceSection: all labels + language selector with 4 language options
  - HomePage: time-of-day greeting
  - SettingsPage: page title and subtitle
  - YouPage: page title and subtitle
- Language selector in You > Appearance with live switching

* feat(ui): Monaco editor component with lazy loading, fallback textarea, Cmd+S save binding

* fix(build): clear postcss.config.mjs — Tailwind v4 handled by @tailwindcss/vite plugin, not PostCSS

* chore: update pnpm-lock.yaml for @monaco-editor/react dependency

* feat(ui): activity heat map on agent-status route (openclaw#14)

* feat(ui): agent relationship graph visualization (openclaw#13)

- New route /agents/graph with live agent data from gateway
- Parses session key patterns to infer spawn/delegation edges
- ReagraphView integration with custom health-based node coloring
- CSS fallback tree view when reagraph unavailable
- Slide-in detail panel on node click: task, model, tokens, cost, links
- Stats bar: total agents, active count, tokens, cost
- Legend: health colors + spawn edge indicator
- Back link to /agents, 15s auto-refresh
- Added Network icon + Agent Graph link to sidebar Team section
- Removed duplicate Logs entry from Power User section

* feat(ui): chat-driven agent builder at /agents/new (openclaw#15)

- New /agents/new route: conversational interface for agent creation
- Split-panel: chat on left, live config preview on right
- NLP parser: extracts name, role, tags, model, personality from freetext
  - Keyword inference for 8 roles (Monitor, Researcher, Developer, etc.)
  - Domain tag extraction for 15 platforms (github, slack, discord, email, etc.)
  - Model preference detection (opus, haiku, gpt-4, gemini, grok)
  - Personality trait extraction (concise, thorough, friendly, etc.)
- Config preview: flash-highlights fields as they update (framer-motion)
- Tags: editable inline with + input and × remove button
- All fields manually editable in preview panel
- Readiness checklist: name + description = ready to create
- 5 suggested starter prompts (GitHub monitor, research, code review, etc.)
- Animated typing indicator while processing
- useCreateAgent() integration → navigates to agent config after creation
- 'Chat Builder' secondary button added to agents list page header
- Simple markdown renderer for **bold** and `code` in assistant messages

* fix(ui): correct createAgent status field + add Graph View link to agent-status header

- Chat builder: pass required status: 'offline' to createAgent.mutateAsync
  (Agent interface requires status, new agents start offline)
- Agent Status dashboard: add 'Graph View' ghost button linking to /agents/graph
  (natural navigation path from status dashboard → relationship graph)

* chore(ui): remove Next.js 'use client' directives from Vite project

8 files had 'use client' at the top — a Next.js App Router directive that is
meaningless in Vite/React. Strips as dead noise. No behavior change.

* docs: add approvals + milestone feed design doc

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: add approvals + milestone feed implementation plan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: update plan with tsc-per-task, tests-only-at-end strategy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(approvals): add ApprovalItem component

* feat(approvals): add ApprovalsQueue with compact/full modes and agent grouping

* feat(approvals): add MilestoneItem and MilestoneDetailPanel

* feat(ui): redesign layout, session view, and nav components

Redesigns the app shell, sidebar, nav items, session workspace, and agent
status pages with updated visual styling. Adds TerminalOverlay component
and updates NewSessionDialog, SessionHeader, and related routes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(approvals): add MilestoneFeed with date grouping

* feat(approvals): add InboxPanel slide-out with compact approvals + milestones

* feat(approvals): add inbox icon + badge to sidebar

* feat(approvals): add /approvals page with full queue and milestone feed

* docs: add Configure tab redesign design doc

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(ui): fix calendar icon color, reassign button, pill heights, and arrow styling

- Fix black native calendar picker icon on dark theme with CSS invert filter
- Add prominent Reassign button with UserCog icon to agent assignment card in RitualDetailPanel
- Align date/time content text with label text in schedule info cards (pl-6 indent)
- Normalize execution pill font size to text-xs so Status, Tool Calls, and Token/Cost share the same height
- Reduce TokenCostIndicator padding by 50% (px-3 py-1 → px-1.5 py-0.5)
- Improve arrow button visibility in Recent Executions with muted-foreground color

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* docs: add Configure tab redesign implementation plan

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* refactor(approvals): reuse GoalDetailPanel in MilestoneFeed with highlightMilestoneId prop

* fix(inbox): widen panel to 520px and add Open Inbox link in header

* feat(agents): add embedded prop to AgentConfigPage

* feat(agents): add AgentConfigureTab with nested builder/rituals/tools sub-tabs

* chore(agents): export AgentConfigureTab from barrel

* feat(agents): replace Rituals/Tools/Soul tabs with Configure nested tab panel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(goals): add Edit button to Goal Details panel with working edit modal

- Add headerActions slot to DetailPanel so callsites can inject title-bar buttons
- Add Edit icon button in GoalDetailPanel title bar (visible without scrolling)
- Remove goal.status !== 'completed' guard so any goal can be edited
- Extend CreateGoalModal with edit mode: initialGoal prop pre-populates all fields,
  milestones preserve original IDs and completion state, title/CTA reflect edit context
- Wire GoalsPage: handleEdit opens the shared modal in edit mode via useUpdateGoal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(ids): consolidate all UUID generation to uuidv7

Replace crypto.randomUUID() in new.lazy.tsx and the custom generateUUID()
utility in gateway-client.ts with the project-standard uuidv7() from @/lib/ids.
Also convert WebSocket on* property handlers to addEventListener calls and
remove unused Card/CardContent imports surfaced during linting.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(assist): add rituals section prompts to LLMAssistPanel

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(sidebar): increase collapsed icon hit area and nav item spacing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(agents): lift assist/review state and fix embedded padding in AgentConfigPage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(agents): lift AI Assist and Auto Review to AgentConfigureTab level

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(agents): edit button navigates to configure tab, persist configureTab in URL

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(agents): remove AgentSoulTab, consolidated into SoulEditor guided mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(ui): follow-ups + ph1 tab config

Follow-ups:
- GoalDetailPanel: add pl-6 indent to Due Date + Created content text
- RitualScheduler: fix dark time input picker icon with CSS invert filter
- RitualDetailPanel: add Trigger quick-action to DetailPanel headerActions slot
- RitualsPage: wire onReassign → RitualAssignDialog (full agent reassignment flow)
- Export RitualAssignDialog + RitualAssignPayload from rituals barrel

Phase 1:
- Add src/config/agent-tabs.ts with AGENT_TABS config, isValidTab(), resolveTab(),
  and TAB_REDIRECTS backwards-compat map for old tab URL params

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): ph5 inheritance system - useInheritanceStore, InheritanceBadge, InheritableField

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): ph2 new tab components - AgentWorkTab, AgentChatTab, WorkSubNav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): ph4 persona tier system - FeatureGate, usePersonaStore, PersonaTierSection

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): ph3 - wire 5-tab structure into $agentId route

Replaces local AgentDetailTab type with imported type + resolveTab() from
config/agent-tabs.ts. Swaps workstreams tab for work (AgentWorkTab with
WorkSubNav) and adds chat tab (AgentChatTab). Old URL params like
?tab=workstreams and ?tab=rituals are resolved to 'work' via TAB_REDIRECTS.
Section param threaded through for WorkSubNav sub-navigation.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): ph6 - responsive tab triggers and MobileTabNav

Tab triggers now show icon+label stacked on mobile (grid-cols-5) and
side-by-side on sm+. MobileTabNav provides a fixed bottom nav bar on
mobile (hidden sm+) with the same 5-tab structure from AGENT_TABS.
Bottom padding added to page content to prevent overlap with the bar.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test(agents): update AgentConfigureTab tests for rewritten component

* chore(agents): remove unused filesLoading destructure in AgentConfigureTab

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(agents): sync AgentConfigureTab sub-tab with URL on back/forward navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(routes): remove orphaned /agents/$agentId/configure full-page route

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): expand command palette - full action vocab + NL intent (task 2)

* feat(ui): live RPC-connected onboarding wizard (task 1)

* test(ui): ph8 unit tests for tab config, stores, and feature gate components

Add vitest setup fixes (in-memory localStorage mock + jsdom URL) to make
zustand persist middleware work in tests, and update usePersonaStore tests
to avoid replace=true state reset that strips action functions.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* feat(ui): visual agent config editor - identity/model/memory/thinking (task 3)

* Add isSlackId function to validate Slack IDs

* Refactor Slack ID validation to use normalizeSlackId

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

当OpenAI和Gemini都因缺少API key失败时，自动尝试本地embedding
provider（通过node-llama-cpp自动下载默认HF模型）。

之前canAutoSelectLocal()会阻止hf:前缀的模型路径，导致auto模式
在没有云端key时直接报错，而不是尝试本地下载。

Closes openclaw#49

Co-Authored-By: Warp <agent@warp.dev>

- 翻译 docs/concepts/memory.md 全文为中文
- 更新 auto 模式说明以反映 openclaw#49 修复后的行为（自动回退到本地嵌入）

Co-Authored-By: Y1fe1Zh0u <Y1fe1Zh0u@users.noreply.github.com>
Co-Authored-By: Warp <agent@warp.dev>

Cancel actions in menu