From aac5db54a62fd27bf94f1959953655b3f636637e Mon Sep 17 00:00:00 2001
From: namtranii <ttnam.work.ii@gmail.com>
Date: Mon, 6 Apr 2026 07:53:46 +0000
Subject: [PATCH] feat: integrate ii-claw-runtime into II-Agent System

---
 frontend/src/app/router.tsx                   |   15 +
 frontend/src/app/routes/ii-claw.tsx           |  226 +++
 frontend/src/components/home-mobile.tsx       |    7 +
 frontend/src/components/ii-claw/agents.tsx    |  905 ++++++++++
 .../src/components/ii-claw/channel-defs.ts    |   48 +
 frontend/src/components/ii-claw/channels.tsx  | 1126 ++++++++++++
 frontend/src/components/ii-claw/cron-jobs.tsx | 1532 +++++++++++++++++
 frontend/src/components/sidebar.tsx           |   26 +
 frontend/src/components/ui/select.tsx         |    4 +-
 frontend/src/i18n/locales/en.json             |  233 +++
 frontend/src/i18n/locales/hi.json             |  233 +++
 frontend/src/i18n/locales/ja.json             |  233 +++
 frontend/src/i18n/locales/vi.json             |  233 +++
 frontend/src/services/ii-claw.service.ts      |  430 +++++
 .../20260404_000000_add_user_agents_table.py  |   81 +
 src/ii_agent/agents/factory/tools.py          |   49 +
 src/ii_agent/agents/prompts/agent_prompts.py  |   55 +
 src/ii_agent/agents/types.py                  |    1 +
 src/ii_agent/app/routers.py                   |    6 +
 src/ii_agent/core/config/settings.py          |   15 +
 src/ii_agent/ii_claw/__init__.py              |   19 +
 src/ii_agent/ii_claw/ai_processor.py          |  169 ++
 src/ii_agent/ii_claw/api/__init__.py          |    3 +
 src/ii_agent/ii_claw/api/client.py            |  116 ++
 src/ii_agent/ii_claw/api/router.py            |  727 ++++++++
 src/ii_agent/ii_claw/api/user_agent_router.py |  123 ++
 src/ii_agent/ii_claw/call_agent.py            |  667 +++++++
 src/ii_agent/ii_claw/custom_agent/__init__.py |   20 +
 src/ii_agent/ii_claw/custom_agent/factory.py  |  166 ++
 src/ii_agent/ii_claw/custom_agent/loader.py   |   64 +
 src/ii_agent/ii_claw/custom_agent/models.py   |   94 +
 src/ii_agent/ii_claw/custom_agent/service.py  |  210 +++
 src/ii_agent/ii_claw/models.py                |   35 +
 src/ii_agent/ii_claw/run.py                   |  187 ++
 src/ii_agent/ii_claw/run_args.py              |  198 +++
 src/ii_agent/users/models.py                  |   66 +-
 36 files changed, 8318 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/routes/ii-claw.tsx
 create mode 100644 frontend/src/components/ii-claw/agents.tsx
 create mode 100644 frontend/src/components/ii-claw/channel-defs.ts
 create mode 100644 frontend/src/components/ii-claw/channels.tsx
 create mode 100644 frontend/src/components/ii-claw/cron-jobs.tsx
 create mode 100644 frontend/src/services/ii-claw.service.ts
 create mode 100644 migrations/versions/20260404_000000_add_user_agents_table.py
 create mode 100644 src/ii_agent/ii_claw/__init__.py
 create mode 100644 src/ii_agent/ii_claw/ai_processor.py
 create mode 100644 src/ii_agent/ii_claw/api/__init__.py
 create mode 100644 src/ii_agent/ii_claw/api/client.py
 create mode 100644 src/ii_agent/ii_claw/api/router.py
 create mode 100644 src/ii_agent/ii_claw/api/user_agent_router.py
 create mode 100644 src/ii_agent/ii_claw/call_agent.py
 create mode 100644 src/ii_agent/ii_claw/custom_agent/__init__.py
 create mode 100644 src/ii_agent/ii_claw/custom_agent/factory.py
 create mode 100644 src/ii_agent/ii_claw/custom_agent/loader.py
 create mode 100644 src/ii_agent/ii_claw/custom_agent/models.py
 create mode 100644 src/ii_agent/ii_claw/custom_agent/service.py
 create mode 100644 src/ii_agent/ii_claw/models.py
 create mode 100644 src/ii_agent/ii_claw/run.py
 create mode 100644 src/ii_agent/ii_claw/run_args.py

diff --git a/frontend/src/app/router.tsx b/frontend/src/app/router.tsx
index 8e9392cc5..ca4f5a195 100644
--- a/frontend/src/app/router.tsx
+++ b/frontend/src/app/router.tsx
@@ -225,6 +225,21 @@ const createAppRouter = () =>
                         }
                     }
                 },
+                {
+                    path: 'ii-claw',
+                    async lazy() {
+                        const { Component } = await import(
+                            '@/app/routes/ii-claw'
+                        )
+                        return {
+                            Component: () => (
+                                <ProtectedRoute>
+                                    <Component />
+                                </ProtectedRoute>
+                            )
+                        }
+                    }
+                },
                 {
                     path: 'share/:sessionId',
                     async lazy() {
diff --git a/frontend/src/app/routes/ii-claw.tsx b/frontend/src/app/routes/ii-claw.tsx
new file mode 100644
index 000000000..98d2b8a1d
--- /dev/null
+++ b/frontend/src/app/routes/ii-claw.tsx
@@ -0,0 +1,226 @@
+'use client'
+
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+
+import { Logo } from '@/components/logo'
+import { Icon } from '@/components/ui/icon'
+import {
+    SidebarProvider,
+    SidebarTrigger
+} from '@/components/ui/sidebar'
+import Sidebar from '@/components/sidebar'
+import { useIsSageTheme } from '@/hooks/use-is-sage-theme'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { ChannelsPanel } from '@/components/ii-claw/channels'
+import { CronJobsPanel } from '@/components/ii-claw/cron-jobs'
+import { AgentsPanel } from '@/components/ii-claw/agents'
+
+type ClawTab = 'agents' | 'channels' | 'cronjobs'
+
+const CLAW_SIDEBAR_ITEMS: {
+    key: ClawTab
+    label: string
+    iconName: string
+    i18nKey: string
+}[] = [
+    { key: 'agents', label: 'Agents', iconName: 'agent', i18nKey: 'iiClaw.agents.title' },
+    { key: 'channels', label: 'Channels', iconName: 'connector', i18nKey: 'iiClaw.channels.title' },
+    { key: 'cronjobs', label: 'Cron Jobs', iconName: 'clock', i18nKey: 'iiClaw.cronJobs.title' },
+]
+
+// ---------------------------------------------------------------------------
+// Desktop Sidebar
+// ---------------------------------------------------------------------------
+
+const ClawDesktopSidebar = ({
+    activeTab,
+    setActiveTab,
+    handleBack,
+    isSage
+}: {
+    activeTab: ClawTab
+    setActiveTab: (tab: ClawTab) => void
+    handleBack: () => void
+    isSage: boolean
+}) => {
+    const { t } = useTranslation()
+
+    return (
+        <div className="hidden md:flex w-64 shrink-0 border-r border-grey-2 dark:border-grey/30 bg-sidebar-bg dark:bg-charcoal flex-col">
+            <div className="p-6 pb-4">
+                <div className="flex items-center gap-3 mb-6">
+                    <button className="cursor-pointer" onClick={handleBack}>
+                        <Icon name="arrow-left" className="size-5 hidden dark:inline" />
+                        <Icon name="arrow-left-dark" className="size-5 inline dark:hidden" />
+                    </button>
+                    <Logo
+                        className="gap-x-2"
+                        imageClassName={clsx('rounded-sm', isSage ? '!h-5' : 'size-7')}
+                        label={t('iiClaw.title')}
+                        labelClassName="text-black dark:text-white text-lg font-bold"
+                        width={28}
+                        height={28}
+                    />
+                </div>
+            </div>
+
+            <nav className="flex-1 px-3">
+                {CLAW_SIDEBAR_ITEMS.map((item) => (
+                    <button
+                        key={item.key}
+                        onClick={() => setActiveTab(item.key)}
+                        className={clsx(
+                            'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer',
+                            {
+                                'bg-sky-blue/30 text-black dark:bg-sky-blue/15 dark:text-white':
+                                    activeTab === item.key,
+                                'text-black/90 dark:text-white/90 hover:text-black dark:hover:text-white hover:bg-sky-blue/10 dark:hover:bg-sky-blue/10':
+                                    activeTab !== item.key
+                            }
+                        )}
+                    >
+                        <Icon
+                            name={item.iconName}
+                            className={clsx('size-5', {
+                                'fill-black dark:fill-white': activeTab === item.key,
+                                'fill-black/60 dark:fill-white/60': activeTab !== item.key
+                            })}
+                        />
+                        {t(item.i18nKey)}
+                    </button>
+                ))}
+            </nav>
+
+            <div className="p-4 border-t border-grey-2 dark:border-grey/30">
+                <p className="text-xs text-charcoal/30 dark:text-white/20 text-center">
+                    {t('iiClaw.version')}
+                </p>
+            </div>
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Mobile Layout
+// ---------------------------------------------------------------------------
+
+const IIClawMobile = ({
+    activeTab,
+    setActiveTab,
+    renderContent,
+    handleBack
+}: {
+    activeTab: ClawTab
+    setActiveTab: (tab: ClawTab) => void
+    renderContent: () => React.ReactNode
+    handleBack: () => void
+}) => {
+    const { t } = useTranslation()
+
+    return (
+        <SidebarProvider>
+            <Sidebar />
+            <div className="flex flex-col min-h-screen w-full bg-white dark:bg-charcoal text-black dark:text-white">
+                <div className="flex items-start justify-between px-3 pt-6 pb-3">
+                    <div className="flex items-center gap-3">
+                        <SidebarTrigger className="size-6 p-0" />
+                        <span className="text-lg font-bold text-black dark:text-white leading-tight">
+                            {t('iiClaw.title')}
+                        </span>
+                    </div>
+                    <button className="cursor-pointer p-1" onClick={handleBack}>
+                        <Icon name="arrow-left" className="size-5 hidden dark:inline" />
+                        <Icon name="arrow-left-dark" className="size-5 inline dark:hidden" />
+                    </button>
+                </div>
+
+                <div className="flex gap-2 px-3 pb-3">
+                    {CLAW_SIDEBAR_ITEMS.map((item) => (
+                        <button
+                            key={item.key}
+                            onClick={() => setActiveTab(item.key)}
+                            className={clsx(
+                                'flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition',
+                                {
+                                    'bg-firefly dark:bg-sky-blue-2 text-sky-blue-2 dark:text-black':
+                                        activeTab === item.key,
+                                    'text-black/60 dark:text-white/60':
+                                        activeTab !== item.key
+                                }
+                            )}
+                        >
+                            <Icon
+                                name={item.iconName}
+                                className={clsx('size-4', {
+                                    'fill-sky-blue-2 dark:fill-black': activeTab === item.key,
+                                    'fill-black/60 dark:fill-white/60': activeTab !== item.key
+                                })}
+                            />
+                            {t(item.i18nKey)}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="flex-1 overflow-y-auto">{renderContent()}</div>
+            </div>
+        </SidebarProvider>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Main Component
+// ---------------------------------------------------------------------------
+
+const IIClaw = () => {
+    const navigate = useNavigate()
+    const isSage = useIsSageTheme()
+    const isMobile = useIsMobile()
+    const [activeTab, setActiveTab] = useState<ClawTab>('agents')
+
+    const handleBack = () => {
+        navigate(-1)
+    }
+
+    const renderContent = () => {
+        switch (activeTab) {
+            case 'agents':
+                return <AgentsPanel />
+            case 'channels':
+                return <ChannelsPanel />
+            case 'cronjobs':
+                return <CronJobsPanel />
+            default:
+                return null
+        }
+    }
+
+    if (isMobile) {
+        return (
+            <IIClawMobile
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
+                renderContent={renderContent}
+                handleBack={handleBack}
+            />
+        )
+    }
+
+    return (
+        <div className="flex h-screen bg-white dark:bg-charcoal overflow-hidden text-black dark:text-white">
+            <ClawDesktopSidebar
+                activeTab={activeTab}
+                setActiveTab={setActiveTab}
+                handleBack={handleBack}
+                isSage={isSage}
+            />
+            <div className="flex-1 flex flex-col overflow-hidden">
+                {renderContent()}
+            </div>
+        </div>
+    )
+}
+
+export { IIClaw as Component }
diff --git a/frontend/src/components/home-mobile.tsx b/frontend/src/components/home-mobile.tsx
index 3e07cd24b..e2b287dd6 100644
--- a/frontend/src/components/home-mobile.tsx
+++ b/frontend/src/components/home-mobile.tsx
@@ -20,6 +20,7 @@ import {
 } from '@/state'
 import { AGENT_TYPE, QUESTION_MODE } from '@/typings/agent'
 import { SidebarTrigger } from './ui/sidebar'
+import { Link } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import QuestionInput from './question-input'
 import type {
@@ -347,6 +348,12 @@ const HomeMobile = ({
                         </div>
                     </div>
                     <div className="flex items-center gap-4">
+                        <Link to="/ii-claw" aria-label="II-Claw">
+                            <Icon
+                                name="connector"
+                                className="size-6 fill-black dark:fill-white"
+                            />
+                        </Link>
                         <SwitchLanguage />
                         <button
                             type="button"
diff --git a/frontend/src/components/ii-claw/agents.tsx b/frontend/src/components/ii-claw/agents.tsx
new file mode 100644
index 000000000..288fe2296
--- /dev/null
+++ b/frontend/src/components/ii-claw/agents.tsx
@@ -0,0 +1,905 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+
+import { Switch } from '@/components/ui/switch'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from '@/components/ui/dialog'
+import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogCancel,
+    AlertDialogAction,
+} from '@/components/ui/alert-dialog'
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
+import {
+    iiClawService,
+    type UserAgent,
+    type UserAgentCreateRequest,
+} from '@/services/ii-claw.service'
+import { AGENT_TYPE } from '@/typings'
+import { Icon } from '@/components/ui/icon'
+import { INIT_TOOLS } from '@/constants/tool'
+import { PROVIDER_MODELS, PROVIDERS_NAME } from '@/constants/models'
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+// Map INIT_TOOLS name → tool_args key (irregular names only; rest derived via snake_case)
+const TOOL_KEY_OVERRIDES: Record<string, string> = {
+    'Codex': 'codex_tools',
+    'Claude Code': 'claude_code',
+}
+
+function toSnakeCase(name: string) {
+    return name.toLowerCase().replace(/\s+/g, '_')
+}
+
+const TOOL_TOGGLES = INIT_TOOLS.map((tool) => ({
+    key: TOOL_KEY_OVERRIDES[tool.name] ?? toSnakeCase(tool.name),
+    label: tool.name,
+    icon: tool.icon,
+    isFill: tool.isFill,
+    defaultActive: tool.isActive,
+}))
+
+const SKILL_MODES = [
+    { value: 'default', label: 'Default' },
+    { value: 'custom_skill', label: 'Custom Only' },
+    { value: 'default_and_custom_skill', label: 'Default + Custom' },
+]
+
+const CONNECTOR_MODES = [
+    { value: 'default', label: 'Default' },
+    { value: 'custom_connector', label: 'Custom Only' },
+    { value: 'default_and_custom_connector', label: 'Default + Custom' },
+]
+
+export const BUILTIN_AGENTS = [
+    { type: AGENT_TYPE.GENERAL, nameKey: 'iiClaw.agents.builtinAgents.general.name', descKey: 'iiClaw.agents.builtinAgents.general.description', icon: 'agent', isFill: false },
+    { type: AGENT_TYPE.FAST_RESEARCH, nameKey: 'iiClaw.agents.builtinAgents.fastResearch.name', descKey: 'iiClaw.agents.builtinAgents.fastResearch.description', icon: 'search-fast', isFill: false },
+    { type: AGENT_TYPE.DEEP_RESEARCH, nameKey: 'iiClaw.agents.builtinAgents.deepResearch.name', descKey: 'iiClaw.agents.builtinAgents.deepResearch.description', icon: 'search-status', isFill: true },
+    { type: AGENT_TYPE.WEBSITE_BUILD, nameKey: 'iiClaw.agents.builtinAgents.websiteBuilder.name', descKey: 'iiClaw.agents.builtinAgents.websiteBuilder.description', icon: 'monitor', isFill: false },
+    { type: AGENT_TYPE.MOBILE_APP, nameKey: 'iiClaw.agents.builtinAgents.mobileApp.name', descKey: 'iiClaw.agents.builtinAgents.mobileApp.description', icon: 'mobile', isFill: false },
+    { type: AGENT_TYPE.MEDIA, nameKey: 'iiClaw.agents.builtinAgents.media.name', descKey: 'iiClaw.agents.builtinAgents.media.description', icon: 'image', isFill: false },
+    { type: AGENT_TYPE.SLIDE, nameKey: 'iiClaw.agents.builtinAgents.slide.name', descKey: 'iiClaw.agents.builtinAgents.slide.description', icon: 'presentation-2', isFill: false },
+    { type: AGENT_TYPE.CODEX, nameKey: 'iiClaw.agents.builtinAgents.codex.name', descKey: 'iiClaw.agents.builtinAgents.codex.description', icon: 'codex', isFill: false },
+    { type: AGENT_TYPE.CLAUDE_CODE, nameKey: 'iiClaw.agents.builtinAgents.claudeCode.name', descKey: 'iiClaw.agents.builtinAgents.claudeCode.description', icon: 'claude', isFill: false },
+]
+
+const TOTAL_STEPS = 4
+
+// ---------------------------------------------------------------------------
+// Step Indicator
+// ---------------------------------------------------------------------------
+
+const StepIndicator = ({ currentStep, totalSteps }: { currentStep: number; totalSteps: number }) => (
+    <div className="flex items-center gap-1.5">
+        {Array.from({ length: totalSteps }, (_, i) => (
+            <div
+                key={i}
+                className={clsx(
+                    'h-1.5 rounded-full transition-all',
+                    i + 1 === currentStep
+                        ? 'w-6 bg-sky-blue'
+                        : i + 1 < currentStep
+                          ? 'w-3 bg-sky-blue/50'
+                          : 'w-3 bg-charcoal/10 dark:bg-white/10'
+                )}
+            />
+        ))}
+    </div>
+)
+
+// ---------------------------------------------------------------------------
+// Create Agent Dialog
+// ---------------------------------------------------------------------------
+
+const CreateAgentDialog = ({
+    open,
+    onOpenChange,
+    onCreated,
+    editAgent,
+}: {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onCreated: () => void
+    editAgent: UserAgent | null
+}) => {
+    const { t } = useTranslation()
+
+    // Sidebar: custom agent list
+    const [agents, setAgents] = useState<UserAgent[]>([])
+    const [loadingAgents, setLoadingAgents] = useState(false)
+
+    // Wizard state
+    const [formActive, setFormActive] = useState(false)
+    const [editingAgentId, setEditingAgentId] = useState<string | null>(null)
+    const [step, setStep] = useState(1)
+    const [submitting, setSubmitting] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const [confirmDelete, setConfirmDelete] = useState<string | null>(null)
+    const [mobileListOpen, setMobileListOpen] = useState(false)
+
+    // Step 1: Identity
+    const [agentName, setAgentName] = useState('')
+    const [tag, setTag] = useState('')
+    const [systemPrompt, setSystemPrompt] = useState('')
+
+    // Step 2: Model
+    const [modelId, setModelId] = useState('')
+
+    // Step 3: Tools
+    const [toolArgs, setToolArgs] = useState<Record<string, boolean>>(() =>
+        Object.fromEntries(TOOL_TOGGLES.map((t) => [t.key, t.defaultActive]))
+    )
+
+    // Step 4: Skills & Connectors
+    const [skillMode, setSkillMode] = useState('default')
+    const [connectorMode, setConnectorMode] = useState('default')
+
+    const fetchAgents = useCallback(async () => {
+        setLoadingAgents(true)
+        try {
+            const list = await iiClawService.listUserAgents()
+            setAgents(list)
+        } catch {
+            setAgents([])
+        } finally {
+            setLoadingAgents(false)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (open) {
+            fetchAgents()
+            if (editAgent) {
+                populateFromAgent(editAgent)
+            } else {
+                startNew()
+            }
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, editAgent, fetchAgents])
+
+    const resetForm = () => {
+        setFormActive(false)
+        setEditingAgentId(null)
+        setStep(1)
+        setAgentName('')
+        setTag('')
+        setSystemPrompt('')
+        setModelId('')
+        setToolArgs(Object.fromEntries(TOOL_TOGGLES.map((t) => [t.key, t.defaultActive])))
+        setSkillMode('default')
+        setConnectorMode('default')
+        setError(null)
+    }
+
+    const startNew = () => {
+        resetForm()
+        setFormActive(true)
+    }
+
+    const populateFromAgent = (agent: UserAgent) => {
+        setFormActive(true)
+        setEditingAgentId(agent.id)
+        setStep(1)
+        setAgentName(agent.agent_name)
+        setTag(agent.tag || '')
+        setSystemPrompt(agent.system_prompt || '')
+        setModelId(agent.model_id || '')
+        const tools: Record<string, boolean> = {}
+        TOOL_TOGGLES.forEach((t) => {
+            tools[t.key] = agent.tool_args?.[t.key] === true || (agent.tool_args?.[t.key] === undefined && t.defaultActive)
+        })
+        setToolArgs(tools)
+        setSkillMode(agent.skill_mode || 'default')
+        setConnectorMode(agent.connector_mode || 'default')
+        setError(null)
+    }
+
+    const handleSelectAgent = (agent: UserAgent) => {
+        populateFromAgent(agent)
+    }
+
+    const canNext = () => {
+        if (step === 1) return agentName.trim().length > 0
+        return true
+    }
+
+    const handleNext = () => {
+        if (step < TOTAL_STEPS) setStep(step + 1)
+    }
+    const handleBack = () => {
+        if (step > 1) setStep(step - 1)
+    }
+
+    const handleSubmit = async () => {
+        if (!agentName.trim()) {
+            setError('Agent name is required')
+            return
+        }
+
+        setSubmitting(true)
+        setError(null)
+        try {
+            const payload: UserAgentCreateRequest = {
+                agent_name: agentName.trim(),
+                tag: tag.trim() || undefined,
+                system_prompt: systemPrompt.trim() || undefined,
+                model_id: modelId || undefined,
+                tool_args: toolArgs,
+                skill_mode: skillMode,
+                connector_mode: connectorMode,
+            }
+
+            if (editingAgentId) {
+                await iiClawService.updateUserAgent(editingAgentId, payload)
+            } else {
+                await iiClawService.createUserAgent(payload)
+            }
+
+            resetForm()
+            onCreated()
+            await fetchAgents()
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : 'Failed to save agent'
+            setError(msg)
+        } finally {
+            setSubmitting(false)
+        }
+    }
+
+    const handleDeleteAgent = async (agentId: string) => {
+        try {
+            await iiClawService.deleteUserAgent(agentId)
+            if (editingAgentId === agentId) {
+                resetForm()
+            }
+            onCreated()
+            await fetchAgents()
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : 'Failed to delete agent'
+            setError(msg)
+        }
+    }
+
+    // ---- Step renderers ----
+
+    const renderStep1 = () => (
+        <div className="space-y-4">
+            <div className="flex gap-3">
+                <div className="flex-1 space-y-1.5">
+                    <label className="text-xs sm:text-sm font-medium text-black dark:text-white flex items-center gap-2">
+                        {t('iiClaw.agents.dialog.fields.agentName')}
+                        <span className="text-red text-xs">*</span>
+                    </label>
+                    <Input
+                        type="text"
+                        placeholder="e.g. My Research Assistant"
+                        value={agentName}
+                        onChange={(e) => setAgentName(e.target.value)}
+                        className="h-10 text-sm"
+                    />
+                </div>
+
+                <div className="w-40 shrink-0 space-y-1.5">
+                    <label className="text-xs sm:text-sm font-medium text-black dark:text-white">
+                        {t('iiClaw.agents.dialog.fields.tag')}
+                    </label>
+                    <Input
+                        type="text"
+                        placeholder={t('iiClaw.agents.dialog.fields.tagPlaceholder')}
+                        value={tag}
+                        onChange={(e) => {
+                            const v = e.target.value
+                                .toLowerCase()
+                                .replace(/[^a-z0-9\s-]/g, '')
+                                .replace(/\s+/g, '-')
+                                .replace(/-+/g, '-')
+                            setTag(v)
+                        }}
+                        className="h-10 text-sm"
+                        maxLength={64}
+                    />
+                </div>
+            </div>
+
+            <div className="space-y-1.5">
+                <label className="text-xs sm:text-sm font-medium text-black dark:text-white">
+                    {t('iiClaw.agents.dialog.fields.systemPrompt')}
+                </label>
+                <Textarea
+                    placeholder={t('iiClaw.agents.dialog.fields.systemPromptPlaceholder')}
+                    value={systemPrompt}
+                    onChange={(e) => setSystemPrompt(e.target.value)}
+                    className="text-sm min-h-[200px] resize-y"
+                />
+                <p className="text-[10px] text-charcoal/40 dark:text-white/30">
+                    {t('iiClaw.agents.dialog.fields.systemPromptHint')}
+                </p>
+            </div>
+        </div>
+    )
+
+    const renderStep2 = () => (
+        <div className="space-y-4">
+            <div className="space-y-1.5">
+                <label className="text-xs sm:text-sm font-medium text-black dark:text-white">
+                    {t('iiClaw.agents.dialog.fields.llmModel')}
+                </label>
+                <Select value={modelId || '_default'} onValueChange={(v) => setModelId(v === '_default' ? '' : v)}>
+                    <SelectTrigger className="!h-10 text-sm">
+                        <SelectValue placeholder={t('iiClaw.agents.dialog.fields.llmModelDefault')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="_default" className="text-sm">
+                            {t('iiClaw.agents.dialog.fields.llmModelDefault')}
+                        </SelectItem>
+                        {Object.entries(PROVIDER_MODELS)
+                            .filter(([, models]) => models.length > 0)
+                            .map(([provider, models]) => (
+                                <SelectGroup key={provider}>
+                                    <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                        {PROVIDERS_NAME[provider] ?? provider}
+                                    </SelectLabel>
+                                    {models.map((m) => (
+                                        <SelectItem key={m.id} value={m.model} className="text-sm">
+                                            {m.model}
+                                        </SelectItem>
+                                    ))}
+                                </SelectGroup>
+                            ))}
+                    </SelectContent>
+                </Select>
+                <p className="text-[10px] text-charcoal/40 dark:text-white/30">
+                    {t('iiClaw.agents.dialog.fields.llmModelHint')}
+                </p>
+            </div>
+        </div>
+    )
+
+    const renderStep3 = () => (
+        <div className="space-y-3">
+            <p className="text-xs text-charcoal/50 dark:text-white/40">
+                {t('iiClaw.agents.dialog.fields.toolsDescription')}
+            </p>
+            <div className="space-y-2">
+                {TOOL_TOGGLES.map((tool) => (
+                    <div
+                        key={tool.key}
+                        className={clsx(
+                            'flex items-center justify-between px-3 py-2.5 rounded-xl border transition-colors',
+                            toolArgs[tool.key]
+                                ? 'border-sky-blue/30 bg-sky-blue/5 dark:border-sky-blue/20 dark:bg-sky-blue/5'
+                                : 'border-charcoal/10 dark:border-white/10'
+                        )}
+                    >
+                        <div className="flex items-center gap-2.5">
+                            <Icon name={tool.icon} className={clsx('size-4', tool.isFill ? 'fill-charcoal/40 dark:fill-white/40' : 'stroke-charcoal/40 dark:stroke-white/40')} />
+                            <span className="text-sm font-medium text-black dark:text-white">
+                                {tool.label}
+                            </span>
+                        </div>
+                        <Switch
+                            checked={toolArgs[tool.key]}
+                            onCheckedChange={(checked) =>
+                                setToolArgs((prev) => ({ ...prev, [tool.key]: checked }))
+                            }
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+
+    const renderStep4 = () => (
+        <div className="space-y-4">
+            <div className="space-y-1.5">
+                <label className="text-xs sm:text-sm font-medium text-black dark:text-white">
+                    {t('iiClaw.agents.dialog.fields.skillMode')}
+                </label>
+                <Select value={skillMode} onValueChange={setSkillMode}>
+                    <SelectTrigger className="!h-10 text-sm">
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {SKILL_MODES.map((m) => (
+                            <SelectItem key={m.value} value={m.value} className="text-sm">
+                                {m.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+
+            <div className="space-y-1.5">
+                <label className="text-xs sm:text-sm font-medium text-black dark:text-white">
+                    {t('iiClaw.agents.dialog.fields.connectorMode')}
+                </label>
+                <Select value={connectorMode} onValueChange={setConnectorMode}>
+                    <SelectTrigger className="!h-10 text-sm">
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {CONNECTOR_MODES.map((m) => (
+                            <SelectItem key={m.value} value={m.value} className="text-sm">
+                                {m.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    )
+
+    const STEP_TITLES = [
+        t('iiClaw.agents.dialog.steps.identity'),
+        t('iiClaw.agents.dialog.steps.model'),
+        t('iiClaw.agents.dialog.steps.tools'),
+        t('iiClaw.agents.dialog.steps.skills'),
+    ]
+
+    return (
+        <>
+            <Dialog open={open} onOpenChange={onOpenChange}>
+                <DialogContent className="max-w-[calc(100%-1rem)] sm:max-w-2xl md:max-w-3xl">
+                    <DialogHeader>
+                        <div className="flex items-center gap-3">
+                            <div className="w-10 h-10 rounded-xl bg-sky-blue/20 dark:bg-sky-blue/10 flex items-center justify-center shrink-0">
+                                <Icon name="agent" className="size-5 fill-firefly dark:fill-sky-blue" />
+                            </div>
+                            <div>
+                                <DialogTitle className="dark:text-white">
+                                    {editingAgentId ? t('iiClaw.agents.dialog.editTitle') : t('iiClaw.agents.dialog.createTitle')}
+                                </DialogTitle>
+                                <DialogDescription className="mt-1">
+                                    {t('iiClaw.agents.dialog.stepOf', { current: step, total: TOTAL_STEPS })}: {STEP_TITLES[step - 1]}
+                                </DialogDescription>
+                            </div>
+                        </div>
+                    </DialogHeader>
+
+                    {/* Mobile: button to open agent list */}
+                    <button
+                        type="button"
+                        onClick={() => setMobileListOpen(true)}
+                        className={clsx(
+                            'sm:hidden w-full h-9 rounded-lg flex items-center justify-center gap-2 text-xs font-medium transition-colors cursor-pointer',
+                            'bg-sky-blue/15 text-firefly dark:bg-sky-blue/10 dark:text-sky-blue hover:bg-sky-blue/25 dark:hover:bg-sky-blue/20'
+                        )}
+                    >
+                        <Icon name="agent" className="size-3.5 fill-firefly dark:fill-sky-blue" />
+                        {t('iiClaw.agents.dialog.sidebar.title')}
+                        {agents.length > 0 && (
+                            <span className="text-[10px] font-normal text-charcoal/40 dark:text-white/30">
+                                ({agents.length})
+                            </span>
+                        )}
+                    </button>
+
+                    <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-2 sm:h-[420px]">
+                        {/* ===== Left side: Agent list (hidden on mobile) ===== */}
+                        <div className="hidden sm:flex w-48 shrink-0 flex-col min-h-0">
+                            <div className="flex items-center justify-between mb-3">
+                                <h3 className="text-xs sm:text-sm font-semibold text-black dark:text-white">
+                                    {t('iiClaw.agents.dialog.sidebar.title')}
+                                    {agents.length > 0 && (
+                                        <span className="ml-1.5 text-[10px] font-normal text-charcoal/40 dark:text-white/30">
+                                            ({agents.length})
+                                        </span>
+                                    )}
+                                </h3>
+                                <button
+                                    type="button"
+                                    onClick={startNew}
+                                    className={clsx(
+                                        'w-7 h-7 rounded-lg flex items-center justify-center transition-colors cursor-pointer',
+                                        'text-firefly dark:text-sky-blue hover:text-charcoal dark:hover:text-white',
+                                        'bg-sky-blue/20 hover:bg-sky-blue/40 dark:bg-sky-blue/10 dark:hover:bg-sky-blue/20'
+                                    )}
+                                    title={t('iiClaw.agents.dialog.buttons.newAgent')}
+                                >
+                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M7 1.75V12.25M1.75 7H12.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                                    </svg>
+                                </button>
+                            </div>
+
+                            <div className="flex-1 overflow-y-auto">
+                                {loadingAgents ? (
+                                    <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                                        {t('common.loading', 'Loading...')}
+                                    </div>
+                                ) : agents.length === 0 ? (
+                                    <div className="flex flex-col items-center justify-center h-24 text-center">
+                                        <p className="text-xs text-charcoal/40 dark:text-white/30">
+                                            {t('iiClaw.agents.dialog.sidebar.empty')}
+                                        </p>
+                                        <p className="text-[10px] text-charcoal/30 dark:text-white/20 mt-0.5">
+                                            {t('iiClaw.agents.dialog.sidebar.emptyHint')}
+                                        </p>
+                                    </div>
+                                ) : (
+                                    <div className="divide-y divide-charcoal/[0.06] dark:divide-white/[0.08]">
+                                        {agents.map((agent) => {
+                                            const isSelected = editingAgentId === agent.id
+                                            return (
+                                                <div
+                                                    key={agent.id}
+                                                    onClick={() => handleSelectAgent(agent)}
+                                                    className={clsx(
+                                                        'flex items-center gap-2.5 px-2.5 py-2.5 cursor-pointer transition-all rounded-md',
+                                                        isSelected
+                                                            ? 'bg-sky-blue/35 dark:bg-sky-blue/15'
+                                                            : 'hover:bg-charcoal/[0.02] dark:hover:bg-white/[0.1]'
+                                                    )}
+                                                >
+                                                    <div className="min-w-0 flex-1">
+                                                        <p className="text-xs font-medium text-black dark:text-white truncate">
+                                                            {agent.agent_name}
+                                                        </p>
+                                                        {agent.tag && (
+                                                            <span className="inline-block mt-1 text-[10px] font-medium px-1.5 py-0.5 rounded-md
+bg-[rgb(210,240,245)] text-gray-700 hover:bg-[rgb(190,230,240)] truncate max-w-full">
+                                                                {agent.tag}
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                    <button
+                                                        onClick={(e) => {
+                                                            e.stopPropagation()
+                                                            setConfirmDelete(agent.id)
+                                                        }}
+                                                        className={clsx(
+                                                            'shrink-0 w-6 h-6 rounded-md flex items-center justify-center transition-colors cursor-pointer',
+                                                            'text-charcoal/20 dark:text-white/25 hover:text-red hover:bg-red/10',
+                                                        )}
+                                                        title={t('iiClaw.agents.dialog.delete.confirm')}
+                                                    >
+                                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                            <path d="M2.5 3.5H9.5M4.5 3.5V2.5C4.5 2.22386 4.72386 2 5 2H7C7.27614 2 7.5 2.22386 7.5 2.5V3.5M5 5.5V8.5M7 5.5V8.5M3.5 3.5L3.85 9.17C3.87 9.63 4.25 10 4.71 10H7.29C7.75 10 8.13 9.63 8.15 9.17L8.5 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                                                        </svg>
+                                                    </button>
+                                                </div>
+                                            )
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* ===== Divider (hidden on mobile) ===== */}
+                        <div className="hidden sm:block sm:w-px bg-charcoal/10 dark:bg-white/10 shrink-0" />
+
+                        {/* ===== Right side: Wizard form or placeholder ===== */}
+                        <div className="flex-1 min-w-0 flex flex-col">
+                            {!formActive ? (
+                                <div className="flex flex-col items-center justify-center h-full text-center px-8">
+                                    <div className="w-12 h-12 rounded-full bg-sky-blue/20 dark:bg-sky-blue/10 flex items-center justify-center mb-3">
+                                        <Icon name="agent" className="size-5 fill-firefly dark:fill-sky-blue" />
+                                    </div>
+                                    <p className="text-sm text-charcoal/50 dark:text-white/40">
+                                        {t('iiClaw.agents.dialog.placeholder')}
+                                    </p>
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="mb-4">
+                                        <StepIndicator currentStep={step} totalSteps={TOTAL_STEPS} />
+                                    </div>
+
+                                    <div className="flex-1 overflow-y-auto pr-1">
+                                        {step === 1 && renderStep1()}
+                                        {step === 2 && renderStep2()}
+                                        {step === 3 && renderStep3()}
+                                        {step === 4 && renderStep4()}
+                                    </div>
+
+                                    {error && (
+                                        <p className="text-xs text-red bg-red/10 rounded-lg px-3 py-2 mt-3">
+                                            {error}
+                                        </p>
+                                    )}
+
+                                    <div className="flex items-center justify-between pt-3 mt-3 border-t border-charcoal/[0.06] dark:border-white/[0.06]">
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={handleBack}
+                                            disabled={step === 1 || submitting}
+                                            className="dark:text-white dark:border-white/20 dark:hover:bg-white/5"
+                                        >
+                                            {t('iiClaw.agents.dialog.buttons.back')}
+                                        </Button>
+
+                                        <div className="flex gap-2">
+                                            {step < TOTAL_STEPS ? (
+                                                <Button
+                                                    size="sm"
+                                                    onClick={handleNext}
+                                                    disabled={!canNext()}
+                                                    className="bg-sky-blue text-charcoal hover:bg-sky-blue/80 dark:bg-sky-blue dark:text-charcoal dark:hover:bg-sky-blue/80"
+                                                >
+                                                    {t('iiClaw.agents.dialog.buttons.next')}
+                                                </Button>
+                                            ) : (
+                                                <Button
+                                                    size="sm"
+                                                    onClick={handleSubmit}
+                                                    disabled={submitting || !canNext()}
+                                                    className="bg-sky-blue text-charcoal hover:bg-sky-blue/80 dark:bg-sky-blue dark:text-charcoal dark:hover:bg-sky-blue/80"
+                                                >
+                                                    {submitting
+                                                        ? t('iiClaw.agents.dialog.buttons.saving')
+                                                        : editingAgentId
+                                                          ? t('iiClaw.agents.dialog.buttons.update')
+                                                          : t('iiClaw.agents.dialog.buttons.create')}
+                                                </Button>
+                                            )}
+                                        </div>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                    </div>
+                    {/* Mobile: Agent list overlay (inside DialogContent) */}
+                    {mobileListOpen && (
+                        <div className="sm:hidden absolute inset-0 z-50 bg-white dark:bg-charcoal rounded-xl flex flex-col">
+                            <div className="flex items-center justify-between px-5 pt-5 pb-3 border-b border-charcoal/[0.06] dark:border-white/[0.06]">
+                                <h3 className="text-sm font-semibold text-black dark:text-white">
+                                    {t('iiClaw.agents.dialog.sidebar.title')}
+                                    {agents.length > 0 && (
+                                        <span className="ml-1.5 text-[10px] font-normal text-charcoal/40 dark:text-white/30">
+                                            ({agents.length})
+                                        </span>
+                                    )}
+                                </h3>
+                                <button
+                                    type="button"
+                                    onClick={() => setMobileListOpen(false)}
+                                    className="w-7 h-7 rounded-lg flex items-center justify-center text-charcoal/40 dark:text-white/40 hover:text-black dark:hover:text-white hover:bg-charcoal/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
+                                >
+                                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M3.5 3.5L10.5 10.5M3.5 10.5L10.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                                    </svg>
+                                </button>
+                            </div>
+                            <div className="flex-1 overflow-y-auto px-3 py-2">
+                                {loadingAgents ? (
+                                    <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                                        {t('common.loading', 'Loading...')}
+                                    </div>
+                                ) : agents.length === 0 ? (
+                                    <div className="flex flex-col items-center justify-center h-24 text-center">
+                                        <p className="text-xs text-charcoal/40 dark:text-white/30">
+                                            {t('iiClaw.agents.dialog.sidebar.empty')}
+                                        </p>
+                                        <p className="text-[10px] text-charcoal/30 dark:text-white/20 mt-0.5">
+                                            {t('iiClaw.agents.dialog.sidebar.emptyHint')}
+                                        </p>
+                                    </div>
+                                ) : (
+                                    <div className="divide-y divide-charcoal/[0.06] dark:divide-white/[0.08]">
+                                        {agents.map((agent) => {
+                                            const isSelected = editingAgentId === agent.id
+                                            return (
+                                                <div
+                                                    key={agent.id}
+                                                    onClick={() => { handleSelectAgent(agent); setMobileListOpen(false) }}
+                                                    className={clsx(
+                                                        'flex items-center gap-2.5 px-3 py-3 cursor-pointer transition-all rounded-md',
+                                                        isSelected
+                                                            ? 'bg-sky-blue/35 dark:bg-sky-blue/15'
+                                                            : 'hover:bg-charcoal/[0.04] dark:hover:bg-white/[0.1]'
+                                                    )}
+                                                >
+                                                    <div className="min-w-0 flex-1">
+                                                        <p className="text-sm font-medium text-black dark:text-white truncate">
+                                                            {agent.agent_name}
+                                                        </p>
+                                                        {agent.tag && (
+                                                            <span className="inline-block mt-1 text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-[rgb(210,240,245)] text-gray-700 truncate max-w-full">
+                                                                {agent.tag}
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                    <button
+                                                        onClick={(e) => {
+                                                            e.stopPropagation()
+                                                            setConfirmDelete(agent.id)
+                                                            setMobileListOpen(false)
+                                                        }}
+                                                        className={clsx(
+                                                            'shrink-0 w-7 h-7 rounded-md flex items-center justify-center transition-colors cursor-pointer',
+                                                            'text-charcoal/20 dark:text-white/25 hover:text-red hover:bg-red/10',
+                                                        )}
+                                                        title={t('iiClaw.agents.dialog.delete.confirm')}
+                                                    >
+                                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                            <path d="M2.5 3.5H9.5M4.5 3.5V2.5C4.5 2.22386 4.72386 2 5 2H7C7.27614 2 7.5 2.22386 7.5 2.5V3.5M5 5.5V8.5M7 5.5V8.5M3.5 3.5L3.85 9.17C3.87 9.63 4.25 10 4.71 10H7.29C7.75 10 8.13 9.63 8.15 9.17L8.5 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                                                        </svg>
+                                                    </button>
+                                                </div>
+                                            )
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </DialogContent>
+            </Dialog>
+
+            <AlertDialog open={!!confirmDelete} onOpenChange={(v) => { if (!v) setConfirmDelete(null) }}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t('iiClaw.agents.dialog.delete.title')}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t('iiClaw.agents.dialog.delete.description')}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>{t('iiClaw.agents.dialog.delete.cancel')}</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={async () => {
+                                if (confirmDelete) {
+                                    await handleDeleteAgent(confirmDelete)
+                                    setConfirmDelete(null)
+                                }
+                            }}
+                            className="bg-red text-white hover:bg-red/80"
+                        >
+                            {t('iiClaw.agents.dialog.delete.confirm')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Agent Card (grid item)
+// ---------------------------------------------------------------------------
+
+const AgentCard = ({
+    name,
+    description,
+    icon,
+    isFill = false,
+    onClick,
+}: {
+    name: string
+    description: string
+    icon: string
+    isFill?: boolean
+    onClick: () => void
+}) => (
+    <div
+        onClick={onClick}
+        className={clsx(
+            'group relative flex flex-col rounded-xl border transition-all cursor-pointer',
+            'p-4',
+            'border-sky-blue/80 bg-sky-blue/5 hover:bg-sky-blue/10 hover:border-sky-blue/40',
+            'dark:border-sky-blue/20 dark:bg-sky-blue/[0.04] dark:hover:bg-sky-blue/[0.08] dark:hover:border-sky-blue/30'
+        )}
+    >
+        <div className="w-9 h-9 rounded-lg bg-sky-blue/15 dark:bg-sky-blue/10 flex items-center justify-center mb-3">
+            <Icon name={icon} className={clsx('size-4.5', isFill
+                ? 'fill-firefly dark:fill-sky-blue'
+                : 'stroke-firefly dark:stroke-sky-blue'
+            )} />
+        </div>
+        <h3 className="text-sm font-semibold text-firefly dark:text-sky-blue mb-0.5">
+            {name}
+        </h3>
+        <p className="text-[10px] leading-snug text-firefly/60 dark:text-sky-blue/50 line-clamp-2">
+            {description}
+        </p>
+    </div>
+)
+
+// ---------------------------------------------------------------------------
+// Agents Panel (main export)
+// ---------------------------------------------------------------------------
+
+const AgentsPanel = () => {
+    const { t } = useTranslation()
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [editAgent, setEditAgent] = useState<UserAgent | null>(null)
+
+    const handleOpenCreate = () => {
+        setEditAgent(null)
+        setDialogOpen(true)
+    }
+
+    return (
+        <div className="flex-1 p-4 sm:p-6 md:p-8 overflow-y-auto bg-white dark:bg-charcoal">
+            <div className="max-w-4xl mx-auto">
+                <div className="mb-6 sm:mb-8">
+                    <h1 className="text-xl sm:text-2xl font-bold text-black dark:text-white">
+                        {t('iiClaw.agents.title')}
+                    </h1>
+                    <p className="text-xs sm:text-sm text-charcoal/50 dark:text-white/40 mt-1.5 sm:mt-2">
+                        {t('iiClaw.agents.subtitle')}
+                    </p>
+                </div>
+
+                {/* Custom your Agent — standalone card */}
+                <div
+                    onClick={handleOpenCreate}
+                    className={clsx(
+                        'flex items-center gap-4 rounded-xl border border-dashed cursor-pointer transition-all mb-6 sm:mb-8',
+                        'px-4 py-4 sm:px-5 sm:py-5',
+                        'border-sky-blue/50 bg-sky-blue/5 hover:bg-sky-blue/10',
+                        'dark:border-sky-blue/30 dark:bg-sky-blue/[0.03] dark:hover:bg-sky-blue/[0.08]'
+                    )}
+                >
+                    <div className="w-10 h-10 rounded-xl bg-sky-blue/20 dark:bg-sky-blue/15 flex items-center justify-center shrink-0">
+                        <svg width="18" height="18" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M7 1.75V12.25M1.75 7H12.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-firefly dark:text-sky-blue" />
+                        </svg>
+                    </div>
+                    <div>
+                        <h3 className="text-sm sm:text-base font-semibold text-black dark:text-white">
+                            {t('iiClaw.agents.customCard.title')}
+                        </h3>
+                        <p className="text-xs sm:text-sm text-charcoal/50 dark:text-white/40 mt-0.5">
+                            {t('iiClaw.agents.customCard.description')}
+                        </p>
+                    </div>
+                </div>
+
+                {/* Available Agents */}
+                <h2 className="text-sm sm:text-base font-semibold text-black dark:text-white mb-3 sm:mb-4">
+                    {t('iiClaw.agents.availableAgents')}
+                </h2>
+
+                <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2.5 sm:gap-3">
+                    {BUILTIN_AGENTS.map((agent) => (
+                        <AgentCard
+                            key={agent.type}
+                            name={t(agent.nameKey)}
+                            description={t(agent.descKey)}
+                            icon={agent.icon}
+                            isFill={agent.isFill}
+                            onClick={() => {}}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <CreateAgentDialog
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                onCreated={() => {}}
+                editAgent={editAgent}
+            />
+        </div>
+    )
+}
+
+export { AgentsPanel }
diff --git a/frontend/src/components/ii-claw/channel-defs.ts b/frontend/src/components/ii-claw/channel-defs.ts
new file mode 100644
index 000000000..7605307d0
--- /dev/null
+++ b/frontend/src/components/ii-claw/channel-defs.ts
@@ -0,0 +1,48 @@
+export interface ChannelField {
+    key: string
+    type: 'secret' | 'text' | 'number' | 'list' | 'boolean'
+    required: boolean
+    placeholder: string
+    advanced: boolean
+}
+
+export interface ChannelDef {
+    name: string
+    icon: string
+    fields: ChannelField[]
+}
+
+export const CHANNEL_DEFS: ChannelDef[] = [
+    {
+        name: 'telegram',
+        icon: 'https://logos.composio.dev/api/telegram',
+        fields: [
+            { key: 'bot_token_env', type: 'secret', required: true, placeholder: '123456:ABC-DEF...', advanced: false },
+            { key: 'allowed_users', type: 'list', required: false, placeholder: '12345, 67890', advanced: true },
+            // { key: 'default_agent', type: 'text', required: false, placeholder: 'assistant', advanced: true },
+            { key: 'poll_interval_secs', type: 'number', required: false, placeholder: '1', advanced: true }
+        ]
+    },
+    {
+        name: 'discord',
+        icon: 'https://logos.composio.dev/api/discord',
+        fields: [
+            { key: 'bot_token_env', type: 'secret', required: true, placeholder: 'MTIz...', advanced: false },
+            { key: 'allowed_guilds', type: 'list', required: false, placeholder: '123456789, 987654321', advanced: true },
+            { key: 'allowed_users', type: 'list', required: false, placeholder: '123456789, 987654321', advanced: true },
+            // { key: 'default_agent', type: 'text', required: false, placeholder: 'assistant', advanced: true },
+            { key: 'intents', type: 'number', required: false, placeholder: '37376', advanced: true },
+            // { key: 'ignore_bots', type: 'boolean', required: false, placeholder: 'true', advanced: true }
+        ]
+    },
+    {
+        name: 'slack',
+        icon: 'https://logos.composio.dev/api/slack',
+        fields: [
+            { key: 'app_token_env', type: 'secret', required: true, placeholder: 'xapp-1-...', advanced: false },
+            { key: 'bot_token_env', type: 'secret', required: true, placeholder: 'xoxb-...', advanced: false },
+            { key: 'allowed_channels', type: 'list', required: false, placeholder: 'C01234, C56789', advanced: true },
+            // { key: 'default_agent', type: 'text', required: false, placeholder: 'assistant', advanced: true }
+        ]
+    }
+]
diff --git a/frontend/src/components/ii-claw/channels.tsx b/frontend/src/components/ii-claw/channels.tsx
new file mode 100644
index 000000000..9b7bd8083
--- /dev/null
+++ b/frontend/src/components/ii-claw/channels.tsx
@@ -0,0 +1,1126 @@
+import { useState, useEffect, useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+
+import { Switch } from '@/components/ui/switch'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from '@/components/ui/dialog'
+import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogCancel,
+    AlertDialogAction,
+} from '@/components/ui/alert-dialog'
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
+import { iiClawService, type UserChannelInstance, type UserAgent } from '@/services/ii-claw.service'
+import { CHANNEL_DEFS, type ChannelDef, type ChannelField } from './channel-defs'
+import { BUILTIN_AGENTS } from './agents'
+import { useAuth } from '@/contexts/auth-context'
+import { Icon } from '@/components/ui/icon'
+
+/**
+ * Generate a unique instance_name_id: {channel_type}_{random_id}
+ * e.g. "discord_a1b2c3d4"
+ */
+function generateInstanceNameId(channelType: string): string {
+    const randomId = Math.random().toString(36).substring(2, 10)
+    return `${channelType.toLowerCase()}_${randomId}`
+}
+
+// ---------------------------------------------------------------------------
+// Agent ID helpers: convert between backend value and Select value
+// ---------------------------------------------------------------------------
+
+const BUILTIN_AGENT_TYPES = new Set(BUILTIN_AGENTS.map((a) => a.type))
+
+/** Backend value → Select value */
+function agentIdToSelectValue(backendId: string | undefined | null): string {
+    if (!backendId || backendId === 'general') return '_default'
+    if (BUILTIN_AGENT_TYPES.has(backendId as never)) return `builtin:${backendId}`
+    return backendId // custom agent UUID
+}
+
+/** Select value → backend value */
+function selectValueToAgentId(selectVal: string): string {
+    if (selectVal === '_default') return ''
+    if (selectVal.startsWith('builtin:')) return selectVal.replace('builtin:', '')
+    return selectVal // custom agent UUID
+}
+
+// ---------------------------------------------------------------------------
+// Configure Dialog
+// ---------------------------------------------------------------------------
+
+type EditMode = { type: 'new' } | { type: 'edit'; instance: UserChannelInstance }
+
+const ConfigureDialog = ({
+    channel,
+    open,
+    onOpenChange,
+    onConfigured,
+}: {
+    channel: ChannelDef | null
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onConfigured: () => void
+}) => {
+    const { t } = useTranslation()
+    const { user } = useAuth()
+
+    // Left panel: bot list
+    const [instances, setInstances] = useState<UserChannelInstance[]>([])
+    const [loadingInstances, setLoadingInstances] = useState(false)
+    const [removingInstance, setRemovingInstance] = useState<string | null>(null)
+    const [mobileListOpen, setMobileListOpen] = useState(false)
+
+    // Agent selector
+    const [customAgents, setCustomAgents] = useState<UserAgent[]>([])
+    const [agentId, setAgentId] = useState('')
+
+    // Right panel: form
+    const [editMode, setEditMode] = useState<EditMode | null>(null)
+    const [botName, setBotName] = useState('')
+    const [fieldValues, setFieldValues] = useState<Record<string, string>>({})
+    const [showAdvanced, setShowAdvanced] = useState(false)
+    const [showSteps, setShowSteps] = useState(false)
+    const [submitting, setSubmitting] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const [confirmRemove, setConfirmRemove] = useState<string | null>(null)
+    const [editingName, setEditingName] = useState(false)
+    const [editedName, setEditedName] = useState('')
+    const [newInstanceId, setNewInstanceId] = useState('')
+
+    const instanceNameId = editMode?.type === 'edit'
+        ? editMode.instance.instance_name_id
+        : newInstanceId
+
+    const fetchInstances = useCallback(async () => {
+        if (!channel || !user) return
+        setLoadingInstances(true)
+        try {
+            const list = await iiClawService.listUserChannels(user.id, channel.name)
+            setInstances(list)
+        } catch {
+            setInstances([])
+        } finally {
+            setLoadingInstances(false)
+        }
+    }, [channel, user])
+
+    const fetchCustomAgents = useCallback(async () => {
+        try {
+            const list = await iiClawService.listUserAgents()
+            setCustomAgents(list)
+        } catch {
+            setCustomAgents([])
+        }
+    }, [])
+
+    // Fetch instances when dialog opens — default to "new" form
+    useEffect(() => {
+        if (open && channel) {
+            fetchInstances()
+            fetchCustomAgents()
+            resetForm()
+            setNewInstanceId(generateInstanceNameId(channel.name))
+            setEditMode({ type: 'new' })
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, channel, fetchInstances, fetchCustomAgents])
+
+    const resetForm = () => {
+        if (channel) {
+            const initial: Record<string, string> = {}
+            channel.fields.forEach((f) => {
+                initial[f.key] = ''
+            })
+            setFieldValues(initial)
+            setBotName('')
+            setAgentId('')
+            setShowAdvanced(false)
+            setShowSteps(false)
+            setError(null)
+        }
+    }
+
+    const startNew = () => {
+        resetForm()
+        setEditingName(false)
+        if (channel) {
+            setNewInstanceId(generateInstanceNameId(channel.name))
+        }
+        setEditMode({ type: 'new' })
+    }
+
+    const startEdit = (inst: UserChannelInstance) => {
+        if (!channel) return
+        setEditingName(false)
+        setEditedName('')
+        setBotName(inst.instance_name || inst.instance_name_id)
+        setAgentId(agentIdToSelectValue(inst.agent_id))
+        // Pre-fill fields from config_json
+        const initial: Record<string, string> = {}
+        channel.fields.forEach((f) => {
+            const configVal = inst.config_json?.[f.key]
+            if (configVal !== undefined && configVal !== null) {
+                if (Array.isArray(configVal)) {
+                    initial[f.key] = configVal.join(', ')
+                } else {
+                    initial[f.key] = String(configVal)
+                }
+            } else {
+                initial[f.key] = ''
+            }
+        })
+        setFieldValues(initial)
+        setShowAdvanced(false)
+        setShowSteps(false)
+        setError(null)
+        setEditMode({ type: 'edit', instance: inst })
+    }
+
+    if (!channel) return null
+
+    const basicFields = channel.fields.filter((f) => !f.advanced)
+    const advancedFields = channel.fields.filter((f) => f.advanced)
+    const setupSteps = t(`iiClaw.channels.${channel.name}.setupSteps`, { returnObjects: true }) as string[]
+
+    const handleSubmit = async () => {
+        if (!user) {
+            setError('User not authenticated')
+            return
+        }
+
+        if (editMode?.type === 'new') {
+            if (!botName.trim()) {
+                setError(t('iiClaw.channels.botNameRequired', 'Bot name is required'))
+                return
+            }
+        }
+
+        // Only validate required fields for new bots — editing can leave blank to keep current
+        if (editMode?.type === 'new') {
+            const missing = channel.fields
+                .filter((f) => f.required && !fieldValues[f.key]?.trim())
+                .map((f) => t(`iiClaw.channels.${channel.name}.fields.${f.key}`))
+            if (missing.length > 0) {
+                setError(`${t('iiClaw.channels.required')}: ${missing.join(', ')}`)
+                return
+            }
+        }
+
+        setSubmitting(true)
+        setError(null)
+        try {
+            const fields: Record<string, string | number | boolean | string[]> = {}
+            for (const [key, val] of Object.entries(fieldValues)) {
+                if (!val.trim()) continue
+                const fieldDef = channel.fields.find((f) => f.key === key)
+                if (fieldDef?.type === 'number') {
+                    fields[key] = parseInt(val.trim(), 10)
+                } else if (fieldDef?.type === 'boolean') {
+                    fields[key] = val.trim().toLowerCase() === 'true'
+                } else if (fieldDef?.type === 'list') {
+                    fields[key] = val.split(',').map((s) => s.trim()).filter(Boolean)
+                } else {
+                    fields[key] = val.trim()
+                }
+            }
+
+            if (editMode?.type === 'edit') {
+                // PUT to update existing bot
+                const updatePayload: Record<string, unknown> = {}
+                if (editingName && editedName.trim()) {
+                    updatePayload.instance_name = editedName.trim()
+                }
+                if (Object.keys(fields).length > 0) {
+                    updatePayload.fields = fields
+                }
+                const resolvedAgentId = selectValueToAgentId(agentId)
+                if (resolvedAgentId) {
+                    updatePayload.agent_id = resolvedAgentId
+                }
+                await iiClawService.updateUserChannel(
+                    user.id,
+                    editMode.instance.instance_name_id,
+                    updatePayload
+                )
+            } else {
+                // POST to create new bot
+                const resolvedAgentId = selectValueToAgentId(agentId)
+                await iiClawService.configureUserChannel(user.id, instanceNameId, {
+                    channel_type: channel.name,
+                    instance_name: botName.trim(),
+                    fields,
+                    agent_id: resolvedAgentId || undefined,
+                })
+            }
+
+            resetForm()
+            setEditingName(false)
+            setEditedName('')
+            setEditMode(null)
+            onConfigured()
+            await fetchInstances()
+        } catch (e: unknown) {
+            const msg =
+                e instanceof Error ? e.message : 'Failed to configure channel'
+            setError(msg)
+        } finally {
+            setSubmitting(false)
+        }
+    }
+
+    const handleRemoveInstance = async (nameId: string) => {
+        if (!user) return
+        setRemovingInstance(nameId)
+        try {
+            await iiClawService.removeUserChannel(user.id, nameId)
+            if (editMode?.type === 'edit' && editMode.instance.instance_name_id === nameId) {
+                setEditMode(null)
+            }
+            onConfigured()
+            await fetchInstances()
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : 'Failed to remove bot'
+            setError(msg)
+        } finally {
+            setRemovingInstance(null)
+        }
+    }
+
+    const isEditing = editMode?.type === 'edit'
+
+    const renderField = (field: ChannelField) => {
+        const isSecret = field.type === 'secret'
+        const placeholder = isEditing && isSecret ? '••••••••' : field.placeholder
+
+        return (
+            <div key={field.key} className="space-y-1.5">
+                <label className="text-xs sm:text-sm font-medium text-black dark:text-white flex items-center gap-2">
+                    {t(`iiClaw.channels.${channel.name}.fields.${field.key}`)}
+                    {field.required && !isEditing && (
+                        <span className="text-red-500 text-xs">*</span>
+                    )}
+                    {isSecret && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-600 dark:text-amber-400 font-normal">
+                            {t('iiClaw.channels.secret')}
+                        </span>
+                    )}
+                    {isEditing && isSecret && (
+                        <span className="text-[10px] text-charcoal/30 dark:text-white/20 font-normal">
+                            {t('iiClaw.channels.leaveBlankToKeep', 'leave blank to keep current')}
+                        </span>
+                    )}
+                </label>
+                {field.type === 'boolean' ? (
+                    <div className="flex items-center gap-2">
+                        <Switch
+                            checked={fieldValues[field.key] === 'true'}
+                            onCheckedChange={(checked) =>
+                                setFieldValues((prev) => ({
+                                    ...prev,
+                                    [field.key]: checked ? 'true' : 'false'
+                                }))
+                            }
+                        />
+                        <span className="text-xs text-charcoal/50 dark:text-white/40">
+                            {fieldValues[field.key] === 'true' ? 'Enabled' : 'Disabled'}
+                        </span>
+                    </div>
+                ) : (
+                    <Input
+                        type={field.type === 'secret' ? 'password' : 'text'}
+                        placeholder={placeholder}
+                        value={fieldValues[field.key] || ''}
+                        onChange={(e) =>
+                            setFieldValues((prev) => ({
+                                ...prev,
+                                [field.key]: e.target.value
+                            }))
+                        }
+                        className="h-10 text-sm"
+                    />
+                )}
+                {field.type === 'list' && (
+                    <p className="text-[10px] text-charcoal/40 dark:text-white/30">
+                        {t('iiClaw.channels.commaSeparated')}
+                    </p>
+                )}
+            </div>
+        )
+    }
+
+    return (
+        <>
+        <Dialog
+            open={open}
+            onOpenChange={(v) => {
+                if (v && channel) {
+                    resetForm()
+                    setNewInstanceId(generateInstanceNameId(channel.name))
+                    setEditMode({ type: 'new' })
+                }
+                onOpenChange(v)
+            }}
+        >
+            <DialogContent className="max-w-[calc(100%-1rem)] sm:max-w-2xl md:max-w-3xl">
+                <DialogHeader>
+                    <div className="flex items-center gap-3">
+                        <img
+                            src={channel.icon}
+                            alt={channel.name}
+                            className="w-10 h-10 rounded-xl shrink-0 object-contain"
+                        />
+                        <div>
+                            <DialogTitle className="dark:text-white">
+                                {t('iiClaw.channels.configure')} {t(`iiClaw.channels.${channel.name}.displayName`)}
+                            </DialogTitle>
+                            <DialogDescription className="mt-1">
+                                {t(`iiClaw.channels.${channel.name}.quickSetup`)}
+                            </DialogDescription>
+                        </div>
+                    </div>
+                </DialogHeader>
+
+                {/* Mobile: button to open bot list */}
+                <button
+                    type="button"
+                    onClick={() => setMobileListOpen(true)}
+                    className={clsx(
+                        'sm:hidden w-full h-9 rounded-lg flex items-center justify-center gap-2 text-xs font-medium transition-colors cursor-pointer',
+                        'bg-sky-blue/15 text-firefly dark:bg-sky-blue/10 dark:text-sky-blue hover:bg-sky-blue/25 dark:hover:bg-sky-blue/20'
+                    )}
+                >
+                    {t('iiClaw.channels.yourBots', 'Your Bots')}
+                    {instances.length > 0 && (
+                        <span className="text-[10px] font-normal text-charcoal/40 dark:text-white/30">
+                            ({instances.length})
+                        </span>
+                    )}
+                </button>
+
+                <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-2 sm:h-[360px]">
+                    {/* ===== Left side: Bot instances list (hidden on mobile) ===== */}
+                    <div className="hidden sm:flex w-52 shrink-0 flex-col min-h-0">
+                        <div className="flex items-center justify-between mb-3">
+                            <h3 className="text-xs sm:text-sm font-semibold text-black dark:text-white">
+                                {t('iiClaw.channels.yourBots', 'Your Bots')}
+                                {instances.length > 0 && (
+                                    <span className="ml-1.5 text-[10px] font-normal text-charcoal/40 dark:text-white/30">
+                                        ({instances.length})
+                                    </span>
+                                )}
+                            </h3>
+                            <button
+                                type="button"
+                                onClick={startNew}
+                                className={clsx(
+                                    'w-7 h-7 rounded-lg flex items-center justify-center transition-colors cursor-pointer',
+                                    'text-firefly dark:text-sky-blue hover:text-charcoal dark:hover:text-white',
+                                    'bg-sky-blue/20 hover:bg-sky-blue/40 dark:bg-sky-blue/10 dark:hover:bg-sky-blue/20',
+                                    editMode?.type === 'new' && 'bg-sky-blue/40 dark:bg-sky-blue/20 text-charcoal dark:text-white'
+                                )}
+                                title={t('iiClaw.channels.addBot', 'Add Bot')}
+                            >
+                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M7 1.75V12.25M1.75 7H12.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                                </svg>
+                            </button>
+                        </div>
+
+                        <div className="flex-1 overflow-y-auto">
+                            {loadingInstances ? (
+                                <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                                    {t('common.loading', 'Loading...')}
+                                </div>
+                            ) : instances.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-24 text-center">
+                                    <p className="text-xs text-charcoal/40 dark:text-white/30">
+                                        {t('iiClaw.channels.noBots', 'No bots configured yet')}
+                                    </p>
+                                    <p className="text-[10px] text-charcoal/30 dark:text-white/20 mt-0.5">
+                                        {t('iiClaw.channels.noBotsHint', 'Click + to create one')}
+                                    </p>
+                                </div>
+                            ) : (
+                                <div className="divide-y divide-charcoal/[0.06] dark:divide-white/[0.08]">
+                                    {instances.map((inst) => {
+                                        const isSelected = editMode?.type === 'edit' && editMode.instance.instance_name_id === inst.instance_name_id
+                                        return (
+                                            <div
+                                                key={inst.instance_name_id}
+                                                onClick={() => startEdit(inst)}
+                                                className={clsx(
+                                                    'flex items-center gap-2.5 px-2.5 py-2.5 cursor-pointer transition-all',
+                                                    isSelected
+                                                        ? 'bg-charcoal/[0.04] dark:bg-white/[0.08]'
+                                                        : 'hover:bg-charcoal/[0.02] dark:hover:bg-white/[0.05]'
+                                                )}
+                                            >
+                                                <div className="min-w-0 flex-1">
+                                                    <p className="text-xs font-medium text-black dark:text-white truncate">
+                                                        {inst.instance_name || inst.instance_name_id}
+                                                    </p>
+                                                    <div className="flex items-center gap-1.5 mt-0.5">
+                                                        <span
+                                                            className={clsx('w-1.5 h-1.5 rounded-full shrink-0', {
+                                                                'bg-green-5': inst.status === 'running' || inst.status === 'active',
+                                                                'bg-yellow dark:bg-yellow': inst.status === 'configured',
+                                                                'bg-charcoal/20 dark:bg-white/30': !inst.status || inst.status === 'stopped',
+                                                            })}
+                                                        />
+                                                        <span className="text-[10px] text-charcoal/40 dark:text-white/40">
+                                                            {inst.status === 'active' ? 'active' : 'error'}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <button
+                                                    onClick={(e) => {
+                                                        e.stopPropagation()
+                                                        setConfirmRemove(inst.instance_name_id)
+                                                    }}
+                                                    disabled={removingInstance === inst.instance_name_id}
+                                                    className={clsx(
+                                                        'shrink-0 w-6 h-6 rounded-md flex items-center justify-center transition-colors cursor-pointer',
+                                                        'text-charcoal/20 dark:text-white/25 hover:text-red hover:bg-red/10',
+                                                        'disabled:opacity-40 disabled:cursor-not-allowed'
+                                                    )}
+                                                    title={t('iiClaw.channels.remove', 'Remove')}
+                                                >
+                                                    {removingInstance === inst.instance_name_id ? (
+                                                        <span className="text-[10px]">...</span>
+                                                    ) : (
+                                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                            <path d="M2.5 3.5H9.5M4.5 3.5V2.5C4.5 2.22386 4.72386 2 5 2H7C7.27614 2 7.5 2.22386 7.5 2.5V3.5M5 5.5V8.5M7 5.5V8.5M3.5 3.5L3.85 9.17C3.87 9.63 4.25 10 4.71 10H7.29C7.75 10 8.13 9.63 8.15 9.17L8.5 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                                                        </svg>
+                                                    )}
+                                                </button>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* ===== Divider (hidden on mobile) ===== */}
+                    <div className="hidden sm:block sm:w-px bg-charcoal/10 dark:bg-white/10 shrink-0" />
+
+                    {/* ===== Right side: Config form ===== */}
+                    <div className="flex-1 min-w-0 overflow-y-auto pr-1">
+                        {editMode === null ? (
+                            <div className="flex flex-col items-center justify-center h-full text-center px-8">
+                                <div className="w-12 h-12 rounded-full bg-charcoal/5 dark:bg-white/5 flex items-center justify-center mb-3">
+                                    <img
+                                        src={channel.icon}
+                                        alt={channel.name}
+                                        className="w-6 h-6 rounded object-contain opacity-40"
+                                    />
+                                </div>
+                                <p className="text-sm text-charcoal/50 dark:text-white/40">
+                                    {instances.length > 0
+                                        ? t('iiClaw.channels.selectOrCreate', 'Select a bot to edit, or click + to add a new one')
+                                        : t('iiClaw.channels.clickToCreate', 'Click + to create your first bot')}
+                                </p>
+                                {instances.length === 0 && (
+                                    <Button
+                                        size="sm"
+                                        variant="outline"
+                                        className="mt-4 dark:text-white dark:border-white/20 dark:hover:bg-white/5"
+                                        onClick={startNew}
+                                    >
+                                        {t('iiClaw.channels.addBot', 'Add Bot')}
+                                    </Button>
+                                )}
+                            </div>
+                        ) : (
+                            <div className="space-y-4">
+                                <div className="flex items-center justify-between gap-3 pb-3 border-b border-charcoal/[0.06] dark:border-white/[0.06]">
+                                    <div className="flex items-center gap-2 min-w-0 flex-1">
+                                        {editMode.type === 'new' ? (
+                                            <h3 className="text-sm font-semibold text-black dark:text-white truncate">
+                                                {t('iiClaw.channels.newBot', 'New Bot')}
+                                            </h3>
+                                        ) : editingName ? (
+                                            <Input
+                                                type="text"
+                                                value={editedName}
+                                                onChange={(e) => setEditedName(e.target.value)}
+                                                className="h-8 text-sm font-semibold flex-1"
+                                                autoFocus
+                                                onKeyDown={(e) => {
+                                                    if (e.key === 'Escape') {
+                                                        setEditingName(false)
+                                                        setEditedName('')
+                                                    }
+                                                }}
+                                            />
+                                        ) : (
+                                            <>
+                                                <h3 className="text-sm font-semibold text-black dark:text-white truncate">
+                                                    {editMode.instance.instance_name || editMode.instance.instance_name_id}
+                                                </h3>
+                                                <button
+                                                    type="button"
+                                                    onClick={() => {
+                                                        setEditedName(editMode.instance.instance_name || editMode.instance.instance_name_id)
+                                                        setEditingName(true)
+                                                    }}
+                                                    className="shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-charcoal/25 dark:text-white/20 hover:text-charcoal/60 dark:hover:text-white/50 hover:bg-charcoal/5 dark:hover:bg-white/5 transition-colors cursor-pointer"
+                                                    title={t('iiClaw.channels.editName', 'Edit name')}
+                                                >
+                                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M8.5 1.5L10.5 3.5M1.5 10.5L2 8.5L8.5 2L10 3.5L3.5 10L1.5 10.5Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                                                    </svg>
+                                                </button>
+                                            </>
+                                        )}
+                                    </div>
+                                    {editMode.type === 'edit' && (
+                                        <div className="w-44 shrink-0">
+                                            <Select value={agentId || '_default'} onValueChange={(v) => setAgentId(v === '_default' ? '' : v)}>
+                                                <SelectTrigger className="!h-8 !w-full !px-2.5 !py-1 !rounded-lg text-sm [&_svg[class*='size-6']]:!size-4">
+                                                    <SelectValue placeholder={t('iiClaw.channels.selectAgent', 'Select agent')} />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {customAgents.length > 0 && (
+                                                        <SelectGroup>
+                                                            <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                                                {t('iiClaw.channels.customAgents', 'Custom')}
+                                                            </SelectLabel>
+                                                            {customAgents.map((agent) => (
+                                                                <SelectItem key={agent.id} value={agent.id} className="text-sm">
+                                                                    <span className="flex items-center gap-2">
+                                                                        <Icon name="agent" className="size-3.5 fill-charcoal/40 dark:fill-white/40" />
+                                                                        {agent.agent_name}
+                                                                        {agent.tag && (
+                                                                            <span className="text-[10px] px-1 py-0.5 rounded bg-sky-blue/10 text-charcoal/50 dark:text-white/40">
+                                                                                {agent.tag}
+                                                                            </span>
+                                                                        )}
+                                                                    </span>
+                                                                </SelectItem>
+                                                            ))}
+                                                        </SelectGroup>
+                                                    )}
+                                                    <SelectGroup>
+                                                        <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                                            {t('iiClaw.channels.builtinAgents', 'Built-in')}
+                                                        </SelectLabel>
+                                                        <SelectItem value="_default" className="text-sm">
+                                                            <span className="flex items-center gap-2">
+                                                                <Icon name="agent" className="size-3.5 fill-charcoal/40 dark:fill-white/40" />
+                                                                {t('iiClaw.agents.builtinAgents.general.name')}
+                                                            </span>
+                                                        </SelectItem>
+                                                        {BUILTIN_AGENTS.filter((a) => a.type !== 'general').map((agent) => (
+                                                            <SelectItem key={agent.type} value={`builtin:${agent.type}`} className="text-sm">
+                                                                <span className="flex items-center gap-2">
+                                                                    <Icon
+                                                                        name={agent.icon}
+                                                                        className={clsx('size-3.5', agent.isFill
+                                                                            ? 'fill-charcoal/40 dark:fill-white/40'
+                                                                            : 'stroke-charcoal/40 dark:stroke-white/40'
+                                                                        )}
+                                                                    />
+                                                                    {t(agent.nameKey)}
+                                                                </span>
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectGroup>
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                    )}
+                                </div>
+
+                                {/* Setup steps */}
+                                {Array.isArray(setupSteps) && setupSteps.length > 0 && (
+                                    <div>
+                                        <button
+                                            type="button"
+                                            onClick={() => setShowSteps(!showSteps)}
+                                            className="flex items-center gap-1.5 text-xs font-medium text-charcoal/40 dark:text-white/30 hover:text-charcoal dark:hover:text-white transition-colors cursor-pointer"
+                                        >
+                                            <span
+                                                className={clsx(
+                                                    'transition-transform inline-block',
+                                                    showSteps && 'rotate-90'
+                                                )}
+                                            >
+                                                ▶
+                                            </span>
+                                            {t('iiClaw.channels.setupSteps')} ({setupSteps.length})
+                                        </button>
+                                        {showSteps && (
+                                            <ol className="mt-2 space-y-1.5 rounded-xl bg-charcoal/[0.03] dark:bg-white/[0.03] p-3 sm:p-4">
+                                                {setupSteps.map((step, i) => (
+                                                    <li
+                                                        key={i}
+                                                        className="text-xs sm:text-sm text-charcoal/70 dark:text-white/60 flex gap-2"
+                                                    >
+                                                        <span className="shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold bg-charcoal/10 dark:bg-white/10 text-charcoal/60 dark:text-white/50">
+                                                            {i + 1}
+                                                        </span>
+                                                        {step}
+                                                    </li>
+                                                ))}
+                                            </ol>
+                                        )}
+                                    </div>
+                                )}
+
+                                {/* Bot Name + Agent selector */}
+                                {editMode.type === 'new' && (
+                                    <div className="flex gap-3">
+                                        <div className="flex-1 space-y-1.5">
+                                            <label className="text-xs sm:text-sm font-medium text-black dark:text-white flex items-center gap-2">
+                                                {t('iiClaw.channels.botName', 'Bot Name')}
+                                                <span className="text-red text-xs">*</span>
+                                            </label>
+                                            <Input
+                                                type="text"
+                                                placeholder={t('iiClaw.channels.botNamePlaceholder', 'e.g. My Agent 1')}
+                                                value={botName}
+                                                onChange={(e) => setBotName(e.target.value)}
+                                                className="h-10 text-sm"
+                                            />
+                                        </div>
+                                        <div className="w-44 shrink-0 space-y-1.5">
+                                            <label className="text-xs sm:text-sm font-medium text-black dark:text-white">
+                                                {t('iiClaw.channels.agent', 'Agent')}
+                                            </label>
+                                            <Select value={agentId || '_default'} onValueChange={(v) => setAgentId(v === '_default' ? '' : v)}>
+                                                <SelectTrigger className="!h-10 !w-full !px-2.5 !py-1.5 !rounded-lg text-sm [&_svg[class*='size-6']]:!size-4">
+                                                    <SelectValue placeholder={t('iiClaw.channels.selectAgent', 'Select agent')} />
+                                                </SelectTrigger>
+                                                <SelectContent>
+                                                    {customAgents.length > 0 && (
+                                                        <SelectGroup>
+                                                            <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                                                {t('iiClaw.channels.customAgents', 'Custom')}
+                                                            </SelectLabel>
+                                                            {customAgents.map((agent) => (
+                                                                <SelectItem key={agent.id} value={agent.id} className="text-sm">
+                                                                    <span className="flex items-center gap-2">
+                                                                        <Icon name="agent" className="size-3.5 fill-charcoal/40 dark:fill-white/40" />
+                                                                        {agent.agent_name}
+                                                                        {agent.tag && (
+                                                                            <span className="text-[10px] px-1 py-0.5 rounded bg-sky-blue/10 text-charcoal/50 dark:text-white/40">
+                                                                                {agent.tag}
+                                                                            </span>
+                                                                        )}
+                                                                    </span>
+                                                                </SelectItem>
+                                                            ))}
+                                                        </SelectGroup>
+                                                    )}
+                                                    <SelectGroup>
+                                                        <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                                            {t('iiClaw.channels.builtinAgents', 'Built-in')}
+                                                        </SelectLabel>
+                                                        <SelectItem value="_default" className="text-sm">
+                                                            <span className="flex items-center gap-2">
+                                                                <Icon name="agent" className="size-3.5 fill-charcoal/40 dark:fill-white/40" />
+                                                                {t('iiClaw.agents.builtinAgents.general.name')}
+                                                            </span>
+                                                        </SelectItem>
+                                                        {BUILTIN_AGENTS.filter((a) => a.type !== 'general').map((agent) => (
+                                                            <SelectItem key={agent.type} value={`builtin:${agent.type}`} className="text-sm">
+                                                                <span className="flex items-center gap-2">
+                                                                    <Icon
+                                                                        name={agent.icon}
+                                                                        className={clsx('size-3.5', agent.isFill
+                                                                            ? 'fill-charcoal/40 dark:fill-white/40'
+                                                                            : 'stroke-charcoal/40 dark:stroke-white/40'
+                                                                        )}
+                                                                    />
+                                                                    {t(agent.nameKey)}
+                                                                </span>
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectGroup>
+                                                </SelectContent>
+                                            </Select>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Fields */}
+                                <div className="space-y-3">
+                                    {basicFields.map(renderField)}
+
+                                    {advancedFields.length > 0 && (
+                                        <>
+                                            <button
+                                                type="button"
+                                                onClick={() => setShowAdvanced(!showAdvanced)}
+                                                className="flex items-center gap-1.5 text-xs font-medium text-charcoal/40 dark:text-white/30 hover:text-charcoal dark:hover:text-white transition-colors cursor-pointer"
+                                            >
+                                                <span
+                                                    className={clsx(
+                                                        'transition-transform inline-block',
+                                                        showAdvanced && 'rotate-90'
+                                                    )}
+                                                >
+                                                    ▶
+                                                </span>
+                                                {t('iiClaw.channels.advanced')} ({advancedFields.length})
+                                            </button>
+                                            {showAdvanced && advancedFields.map(renderField)}
+                                        </>
+                                    )}
+                                </div>
+
+                                {error && (
+                                    <p className="text-xs text-red bg-red/10 rounded-lg px-3 py-2">
+                                        {error}
+                                    </p>
+                                )}
+
+                                <div className="flex gap-2 justify-end pt-3 border-t border-charcoal/[0.06] dark:border-white/[0.06]">
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => { resetForm(); if (channel) setNewInstanceId(generateInstanceNameId(channel.name)); setEditMode({ type: 'new' }) }}
+                                        disabled={submitting}
+                                        className="dark:text-white dark:border-white/20 dark:hover:bg-white/5"
+                                    >
+                                        {t('common.cancel', 'Cancel')}
+                                    </Button>
+                                    <Button
+                                        size="sm"
+                                        onClick={handleSubmit}
+                                        disabled={submitting}
+                                        className="bg-sky-blue text-charcoal hover:bg-sky-blue/80 dark:bg-sky-blue dark:text-charcoal dark:hover:bg-sky-blue/80"
+                                    >
+                                        {submitting
+                                            ? t('iiClaw.channels.saving')
+                                            : editMode.type === 'new'
+                                              ? t('iiClaw.channels.addBot', 'Add Bot')
+                                              : t('iiClaw.channels.update', 'Update')}
+                                    </Button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                {/* Mobile: Bot list overlay (inside DialogContent) */}
+                {mobileListOpen && (
+                    <div className="sm:hidden absolute inset-0 z-50 bg-white dark:bg-charcoal rounded-xl flex flex-col">
+                        <div className="flex items-center justify-between px-5 pt-5 pb-3 border-b border-charcoal/[0.06] dark:border-white/[0.06]">
+                            <h3 className="text-sm font-semibold text-black dark:text-white">
+                                {t('iiClaw.channels.yourBots', 'Your Bots')}
+                                {instances.length > 0 && (
+                                    <span className="ml-1.5 text-[10px] font-normal text-charcoal/40 dark:text-white/30">
+                                        ({instances.length})
+                                    </span>
+                                )}
+                            </h3>
+                            <button
+                                type="button"
+                                onClick={() => setMobileListOpen(false)}
+                                className="w-7 h-7 rounded-lg flex items-center justify-center text-charcoal/40 dark:text-white/40 hover:text-black dark:hover:text-white hover:bg-charcoal/5 dark:hover:bg-white/10 transition-colors cursor-pointer"
+                            >
+                                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M3.5 3.5L10.5 10.5M3.5 10.5L10.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="flex-1 overflow-y-auto px-3 py-2">
+                            {loadingInstances ? (
+                                <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                                    {t('common.loading', 'Loading...')}
+                                </div>
+                            ) : instances.length === 0 ? (
+                                <div className="flex flex-col items-center justify-center h-24 text-center">
+                                    <p className="text-xs text-charcoal/40 dark:text-white/30">
+                                        {t('iiClaw.channels.noBots', 'No bots configured yet')}
+                                    </p>
+                                    <p className="text-[10px] text-charcoal/30 dark:text-white/20 mt-0.5">
+                                        {t('iiClaw.channels.noBotsHint', 'Click + to create one')}
+                                    </p>
+                                </div>
+                            ) : (
+                                <div className="divide-y divide-charcoal/[0.06] dark:divide-white/[0.08]">
+                                    {instances.map((inst) => {
+                                        const isSelected = editMode?.type === 'edit' && editMode.instance.instance_name_id === inst.instance_name_id
+                                        return (
+                                            <div
+                                                key={inst.instance_name_id}
+                                                onClick={() => { startEdit(inst); setMobileListOpen(false) }}
+                                                className={clsx(
+                                                    'flex items-center gap-2.5 px-3 py-3 cursor-pointer transition-all rounded-md',
+                                                    isSelected
+                                                        ? 'bg-sky-blue/35 dark:bg-sky-blue/15'
+                                                        : 'hover:bg-charcoal/[0.04] dark:hover:bg-white/[0.1]'
+                                                )}
+                                            >
+                                                <div className="min-w-0 flex-1">
+                                                    <p className="text-sm font-medium text-black dark:text-white truncate">
+                                                        {inst.instance_name || inst.instance_name_id}
+                                                    </p>
+                                                    <div className="flex items-center gap-1.5 mt-0.5">
+                                                        <span
+                                                            className={clsx('w-1.5 h-1.5 rounded-full shrink-0', {
+                                                                'bg-green-5': inst.status === 'running' || inst.status === 'active',
+                                                                'bg-yellow dark:bg-yellow': inst.status === 'configured',
+                                                                'bg-charcoal/20 dark:bg-white/30': !inst.status || inst.status === 'stopped',
+                                                            })}
+                                                        />
+                                                        <span className="text-[10px] text-charcoal/40 dark:text-white/40">
+                                                            {inst.status === 'active' ? 'active' : 'error'}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <button
+                                                    onClick={(e) => {
+                                                        e.stopPropagation()
+                                                        setConfirmRemove(inst.instance_name_id)
+                                                        setMobileListOpen(false)
+                                                    }}
+                                                    disabled={removingInstance === inst.instance_name_id}
+                                                    className={clsx(
+                                                        'shrink-0 w-7 h-7 rounded-md flex items-center justify-center transition-colors cursor-pointer',
+                                                        'text-charcoal/20 dark:text-white/25 hover:text-red hover:bg-red/10',
+                                                        'disabled:opacity-40 disabled:cursor-not-allowed'
+                                                    )}
+                                                    title={t('iiClaw.channels.remove', 'Remove')}
+                                                >
+                                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                        <path d="M2.5 3.5H9.5M4.5 3.5V2.5C4.5 2.22386 4.72386 2 5 2H7C7.27614 2 7.5 2.22386 7.5 2.5V3.5M5 5.5V8.5M7 5.5V8.5M3.5 3.5L3.85 9.17C3.87 9.63 4.25 10 4.71 10H7.29C7.75 10 8.13 9.63 8.15 9.17L8.5 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                                                    </svg>
+                                                </button>
+                                            </div>
+                                        )
+                                    })}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
+            </DialogContent>
+        </Dialog>
+
+        <AlertDialog open={!!confirmRemove} onOpenChange={(v) => { if (!v) setConfirmRemove(null) }}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>
+                        {t('iiClaw.channels.confirmRemoveTitle', 'Remove bot?')}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                        {t('iiClaw.channels.confirmRemoveDesc', 'Are you sure you want to remove "{{name}}"? This action cannot be undone.', { name: confirmRemove })}
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                    <AlertDialogCancel disabled={!!removingInstance}>
+                        {t('common.cancel', 'Cancel')}
+                    </AlertDialogCancel>
+                    <AlertDialogAction
+                        onClick={async () => {
+                            if (confirmRemove) {
+                                await handleRemoveInstance(confirmRemove)
+                                setConfirmRemove(null)
+                            }
+                        }}
+                        disabled={!!removingInstance}
+                        className="bg-red text-white hover:bg-red/80"
+                    >
+                        {removingInstance
+                            ? t('iiClaw.channels.removing', 'Removing...')
+                            : t('iiClaw.channels.remove', 'Remove')}
+                    </AlertDialogAction>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+        </>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Channel Card
+// ---------------------------------------------------------------------------
+
+const ChannelCard = ({
+    channel,
+    botCount,
+    onConfigure
+}: {
+    channel: ChannelDef
+    botCount: number
+    onConfigure: (channel: ChannelDef) => void
+}) => {
+    const { t } = useTranslation()
+    const connected = botCount > 0
+
+    return (
+        <div
+            className={clsx(
+                'group relative flex flex-col justify-between rounded-2xl border transition-all',
+                'p-4 sm:p-5',
+                'border-grey-2 bg-sidebar-bg hover:shadow-md hover:border-sky-blue/50',
+                'dark:border-grey/30 dark:bg-white/[0.04] dark:hover:border-sky-blue/40 dark:hover:shadow-lg dark:hover:shadow-black/40'
+            )}
+        >
+            <div>
+                <div className="flex items-start justify-between mb-3 sm:mb-4">
+                    <img
+                        src={channel.icon}
+                        alt={channel.name}
+                        className="w-10 h-10 sm:w-11 sm:h-11 rounded-xl shrink-0 object-contain"
+                    />
+                    {connected && (
+                        <span className="text-[10px] sm:text-xs font-medium px-2 py-0.5 rounded-full bg-sky-blue/30 text-firefly dark:bg-sky-blue/20 dark:text-sky-blue">
+                            {botCount} {botCount === 1 ? 'bot' : 'bots'}
+                        </span>
+                    )}
+                </div>
+
+                <h3 className="text-sm sm:text-base font-semibold text-black dark:text-white mb-1">
+                    {t(`iiClaw.channels.${channel.name}.displayName`)}
+                </h3>
+                <p className="text-xs sm:text-sm text-charcoal/50 dark:text-white/40 leading-relaxed line-clamp-2">
+                    {t(`iiClaw.channels.${channel.name}.description`)}
+                </p>
+            </div>
+
+            <div className="flex items-center justify-between mt-3 sm:mt-4">
+                <span
+                    className={clsx(
+                        'text-[10px] sm:text-xs font-medium px-2 sm:px-2.5 py-0.5 sm:py-1 rounded-full inline-flex items-center gap-1.5',
+                        {
+                            'bg-green-5/15 text-green-5 dark:bg-green-5/20 dark:text-green-5': connected,
+                            'bg-charcoal/5 text-charcoal/40 dark:bg-white/10 dark:text-white/40': !connected
+                        }
+                    )}
+                >
+                    <span
+                        className={clsx('w-1.5 h-1.5 rounded-full', {
+                            'bg-green-5': connected,
+                            'bg-charcoal/20 dark:bg-white/25': !connected
+                        })}
+                    />
+                    {connected
+                        ? t('iiClaw.channels.status.connected')
+                        : t('iiClaw.channels.status.disconnected')}
+                </span>
+                <button
+                    onClick={() => onConfigure(channel)}
+                    className={clsx(
+                        'text-[10px] sm:text-xs font-medium px-3 py-1.5 rounded-lg transition-colors cursor-pointer',
+                        'bg-sky-blue/30 text-firefly hover:bg-sky-blue/50 hover:text-charcoal',
+                        'dark:bg-sky-blue/15 dark:text-sky-blue dark:hover:bg-sky-blue/25'
+                    )}
+                >
+                    {t('iiClaw.channels.configure')}
+                </button>
+            </div>
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Channels Panel
+// ---------------------------------------------------------------------------
+
+const ChannelsPanel = () => {
+    const { t } = useTranslation()
+    const { user } = useAuth()
+    const [botCounts, setBotCounts] = useState<Record<string, number>>(
+        () => Object.fromEntries(CHANNEL_DEFS.map((ch) => [ch.name, 0]))
+    )
+    const [configureTarget, setConfigureTarget] = useState<ChannelDef | null>(null)
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const refreshBotCounts = useCallback(async () => {
+        if (!user) return
+        try {
+            const all = await iiClawService.listUserChannels(user.id)
+            const counts: Record<string, number> = {}
+            CHANNEL_DEFS.forEach((ch) => { counts[ch.name] = 0 })
+            all.forEach((inst) => {
+                if (counts[inst.channel_type] !== undefined) {
+                    counts[inst.channel_type]++
+                }
+            })
+            setBotCounts(counts)
+        } catch {
+            // Keep existing counts on error
+        }
+    }, [user])
+
+    useEffect(() => {
+        refreshBotCounts()
+    }, [refreshBotCounts])
+
+    const handleConfigure = (ch: ChannelDef) => {
+        setConfigureTarget(ch)
+        setDialogOpen(true)
+    }
+
+    const handleConfigured = () => {
+        refreshBotCounts()
+    }
+
+    const totalBots = Object.values(botCounts).reduce((a, b) => a + b, 0)
+
+    return (
+        <div className="flex-1 p-4 sm:p-6 md:p-8 overflow-y-auto bg-white dark:bg-charcoal">
+            <div className="max-w-4xl mx-auto">
+                <div className="mb-6 sm:mb-8">
+                    <h1 className="text-xl sm:text-2xl font-bold text-black dark:text-white">
+                        {t('iiClaw.channels.title')}
+                    </h1>
+                    <p className="text-xs sm:text-sm text-charcoal/50 dark:text-white/40 mt-1.5 sm:mt-2">
+                        {t('iiClaw.channels.subtitle')}{' '}
+                        <span className="text-black dark:text-white font-medium">
+                            {totalBots}
+                        </span>{' '}
+                        {totalBots === 1 ? 'bot' : 'bots'} {t('iiClaw.channels.connected')}.
+                    </p>
+                </div>
+
+                <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4">
+                    {CHANNEL_DEFS.map((channel) => (
+                        <ChannelCard
+                            key={channel.name}
+                            channel={channel}
+                            botCount={botCounts[channel.name] || 0}
+                            onConfigure={handleConfigure}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            <ConfigureDialog
+                channel={configureTarget}
+                open={dialogOpen}
+                onOpenChange={setDialogOpen}
+                onConfigured={handleConfigured}
+            />
+        </div>
+    )
+}
+
+export { ChannelsPanel }
diff --git a/frontend/src/components/ii-claw/cron-jobs.tsx b/frontend/src/components/ii-claw/cron-jobs.tsx
new file mode 100644
index 000000000..b4044a03b
--- /dev/null
+++ b/frontend/src/components/ii-claw/cron-jobs.tsx
@@ -0,0 +1,1532 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
+
+import { Switch } from '@/components/ui/switch'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select'
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from '@/components/ui/dialog'
+import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogCancel,
+    AlertDialogAction,
+} from '@/components/ui/alert-dialog'
+import {
+    iiClawService,
+    type CronJob,
+    type CronJobCreateRequest,
+    type CronJobUpdateRequest,
+    type CronJobRun,
+    type CronJobTestResponse,
+    type UserChannelInstance,
+    type UserAgent,
+} from '@/services/ii-claw.service'
+import { CHANNEL_DEFS } from './channel-defs'
+import { BUILTIN_AGENTS } from './agents'
+import { useAuth } from '@/contexts/auth-context'
+import { Icon } from '@/components/ui/icon'
+
+// ---------------------------------------------------------------------------
+// Agent ID helpers
+// ---------------------------------------------------------------------------
+
+const BUILTIN_AGENT_TYPES = new Set(BUILTIN_AGENTS.map((a) => a.type))
+
+function agentIdToSelectValue(backendId: string | undefined | null): string {
+    if (!backendId || backendId === 'general') return '_default'
+    if (BUILTIN_AGENT_TYPES.has(backendId as never)) return `builtin:${backendId}`
+    return backendId
+}
+
+function selectValueToAgentId(selectVal: string): string {
+    if (selectVal === '_default') return ''
+    if (selectVal.startsWith('builtin:')) return selectVal.replace('builtin:', '')
+    return selectVal
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const SCHEDULE_TYPES = ['every', 'cron', 'at'] as const
+type ScheduleType = (typeof SCHEDULE_TYPES)[number]
+
+const ACTION_TYPES = ['channel_message', 'assistant_task'] as const
+type ActionType = (typeof ACTION_TYPES)[number]
+
+type EveryUnit = 'minutes' | 'hours' | 'days'
+
+// Cron presets for user-friendly selection
+const CRON_PRESETS = [
+    { key: 'daily_9am', expr: '0 9 * * *', label: 'Daily at 9:00 AM' },
+    { key: 'daily_midnight', expr: '0 0 * * *', label: 'Daily at midnight' },
+    { key: 'daily_6pm', expr: '0 18 * * *', label: 'Daily at 6:00 PM' },
+    { key: 'weekdays_9am', expr: '0 9 * * 1-5', label: 'Weekdays at 9:00 AM' },
+    { key: 'weekdays_6pm', expr: '0 18 * * 1-5', label: 'Weekdays at 6:00 PM' },
+    { key: 'weekly_monday', expr: '0 9 * * 1', label: 'Every Monday at 9:00 AM' },
+    { key: 'weekly_friday', expr: '0 17 * * 5', label: 'Every Friday at 5:00 PM' },
+    { key: 'twice_daily', expr: '0 9,18 * * *', label: 'Twice daily (9 AM & 6 PM)' },
+    { key: 'every_6h', expr: '0 */6 * * *', label: 'Every 6 hours' },
+    { key: 'monthly_first', expr: '0 9 1 * *', label: 'First of month at 9:00 AM' },
+    { key: 'monthly_last_friday', expr: '0 17 * * 5#L', label: 'Last Friday of month at 5 PM' },
+    { key: 'quarterly', expr: '0 9 1 1,4,7,10 *', label: 'Quarterly (Jan, Apr, Jul, Oct 1st)' },
+    { key: 'custom', expr: '', label: 'Custom expression' },
+] as const
+
+const COMMON_TIMEZONES = [
+    'UTC',
+    'America/New_York',
+    'America/Chicago',
+    'America/Denver',
+    'America/Los_Angeles',
+    'Europe/London',
+    'Europe/Paris',
+    'Europe/Berlin',
+    'Asia/Tokyo',
+    'Asia/Shanghai',
+    'Asia/Bangkok',
+    'Asia/Ho_Chi_Minh',
+    'Asia/Singapore',
+    'Australia/Sydney',
+] as const
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function describeCron(expr: string): string {
+    const parts = String(expr).trim().split(/\s+/)
+    if (parts.length < 5) return expr
+
+    const [min, hour, dom, mon, dow] = parts
+
+    // Check against known presets first
+    const preset = CRON_PRESETS.find((p) => p.expr === expr)
+    if (preset && preset.key !== 'custom') return preset.label
+
+    // Build human-readable description
+    const hourNum = parseInt(hour, 10)
+    const minNum = parseInt(min, 10)
+    const timeStr = !isNaN(hourNum) && !isNaN(minNum)
+        ? `${hourNum % 12 || 12}:${String(minNum).padStart(2, '0')} ${hourNum >= 12 ? 'PM' : 'AM'}`
+        : null
+
+    // Every N hours
+    if (min === '0' && hour.startsWith('*/')) {
+        const n = parseInt(hour.slice(2), 10)
+        return `Every ${n} hour${n > 1 ? 's' : ''}`
+    }
+
+    // Every N minutes
+    if (min.startsWith('*/') && hour === '*') {
+        const n = parseInt(min.slice(2), 10)
+        return `Every ${n} min`
+    }
+
+    // Weekdays
+    const dowMap: Record<string, string> = {
+        '1': 'Mon', '2': 'Tue', '3': 'Wed', '4': 'Thu', '5': 'Fri', '6': 'Sat', '0': 'Sun', '7': 'Sun',
+        '1-5': 'Weekdays', '0-6': 'Every day', '1,3,5': 'Mon/Wed/Fri', '2,4': 'Tue/Thu',
+        '6,0': 'Weekends', '0,6': 'Weekends',
+    }
+
+    const dowLabel = dowMap[dow] || (dow === '*' ? null : dow)
+
+    if (timeStr && dom === '*' && mon === '*') {
+        if (dowLabel) return `${dowLabel} at ${timeStr}`
+        return `Daily at ${timeStr}`
+    }
+
+    if (timeStr && dom !== '*' && mon === '*' && dow === '*') {
+        const d = parseInt(dom, 10)
+        const suffix = d === 1 ? 'st' : d === 2 ? 'nd' : d === 3 ? 'rd' : 'th'
+        return `${d}${suffix} of month at ${timeStr}`
+    }
+
+    return expr
+}
+
+function formatSchedule(job: CronJob): string {
+    const s = job.schedule
+    switch (job.schedule_type) {
+        case 'every': {
+            const secs = Number(s.every_secs) || 0
+            if (secs >= 86400) {
+                const d = Math.round(secs / 86400)
+                return `Every ${d} day${d > 1 ? 's' : ''}`
+            }
+            if (secs >= 3600) {
+                const h = Math.round(secs / 3600)
+                return `Every ${h} hour${h > 1 ? 's' : ''}`
+            }
+            if (secs >= 60) {
+                const m = Math.round(secs / 60)
+                return `Every ${m} min${m > 1 ? 's' : ''}`
+            }
+            return `Every ${secs}s`
+        }
+        case 'cron': {
+            const desc = describeCron(String(s.expr || ''))
+            const tz = s.tz ? ` (${s.tz})` : ''
+            return `${desc}${tz}`
+        }
+        case 'at':
+            return new Date(s.at as string).toLocaleString()
+        default:
+            return job.schedule_type
+    }
+}
+
+function formatDuration(ms: number | null): string {
+    if (ms === null) return '-'
+    if (ms < 1000) return `${ms}ms`
+    return `${(ms / 1000).toFixed(1)}s`
+}
+
+function formatTimeAgo(dateStr: string): string {
+    const diff = Date.now() - new Date(dateStr).getTime()
+    const mins = Math.floor(diff / 60000)
+    if (mins < 1) return 'just now'
+    if (mins < 60) return `${mins}m ago`
+    const hours = Math.floor(mins / 60)
+    if (hours < 24) return `${hours}h ago`
+    const days = Math.floor(hours / 24)
+    return `${days}d ago`
+}
+
+// ---------------------------------------------------------------------------
+// Status Badge
+// ---------------------------------------------------------------------------
+
+const StatusBadge = ({ status }: { status: string }) => {
+    const color = {
+        ok: 'bg-green-5/15 text-green-5',
+        running: 'bg-sky-blue/15 text-sky-blue',
+        error: 'bg-red/15 text-red',
+        timeout: 'bg-amber-500/15 text-amber-600 dark:text-amber-400',
+    }[status] || 'bg-charcoal/5 text-charcoal/40 dark:bg-white/10 dark:text-white/40'
+
+    return (
+        <span className={clsx('text-[10px] font-medium px-1.5 py-0.5 rounded-full', color)}>
+            {status}
+        </span>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Channel + Bot Picker (shared between Post Message & AI Task)
+// ---------------------------------------------------------------------------
+
+const ChannelBotPicker = ({
+    channelInstances,
+    loadingInstances,
+    selectedInstanceId,
+    onSelect,
+    label,
+}: {
+    channelInstances: UserChannelInstance[]
+    loadingInstances: boolean
+    selectedInstanceId: string
+    onSelect: (instanceNameId: string, channelType: string, botName: string) => void
+    label: string
+}) => {
+    const { t } = useTranslation()
+
+    // Group instances by channel type
+    const grouped: Record<string, UserChannelInstance[]> = {}
+    for (const inst of channelInstances) {
+        if (!grouped[inst.channel_type]) grouped[inst.channel_type] = []
+        grouped[inst.channel_type].push(inst)
+    }
+
+    const channelDef = (type: string) => CHANNEL_DEFS.find((c) => c.name === type)
+
+    return (
+        <div className="space-y-1">
+            <label className="text-[10px] text-charcoal/50 dark:text-white/40">
+                {label}
+            </label>
+            {loadingInstances ? (
+                <div className="h-9 flex items-center text-xs text-charcoal/40 dark:text-white/30">
+                    {t('common.loading', 'Loading...')}
+                </div>
+            ) : channelInstances.length === 0 ? (
+                <div className="h-9 flex items-center text-xs text-charcoal/40 dark:text-white/30">
+                    {t('iiClaw.cronJobs.noChannelsConfigured')}
+                </div>
+            ) : (
+                <Select
+                    value={selectedInstanceId}
+                    onValueChange={(val) => {
+                        const inst = channelInstances.find((i) => i.instance_name_id === val)
+                        if (inst) onSelect(inst.instance_name_id, inst.channel_type, inst.instance_name || inst.instance_name_id)
+                    }}
+                >
+                    <SelectTrigger className="!h-9 !py-0 !px-3 text-sm !rounded-lg">
+                        <SelectValue placeholder={t('iiClaw.cronJobs.selectChannelBot')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {Object.entries(grouped).map(([type, instances]) => (
+                            <SelectGroup key={type}>
+                                <SelectLabel className="flex items-center gap-2">
+                                    <img
+                                        src={channelDef(type)?.icon}
+                                        alt={type}
+                                        className="w-3.5 h-3.5 rounded object-contain"
+                                    />
+                                    {t(`iiClaw.channels.${type}.displayName`, type)}
+                                </SelectLabel>
+                                {instances.map((inst) => (
+                                    <SelectItem key={inst.instance_name_id} value={inst.instance_name_id}>
+                                        <div className="flex items-center gap-2">
+                                            <span
+                                                className={clsx('w-1.5 h-1.5 rounded-full shrink-0', {
+                                                    'bg-green-5': inst.status === 'running' || inst.status === 'active',
+                                                    'bg-yellow': inst.status === 'configured',
+                                                    'bg-charcoal/20 dark:bg-white/30': !inst.status || inst.status === 'stopped',
+                                                })}
+                                            />
+                                            {inst.instance_name || inst.instance_name_id}
+                                        </div>
+                                    </SelectItem>
+                                ))}
+                            </SelectGroup>
+                        ))}
+                    </SelectContent>
+                </Select>
+            )}
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// History Dialog
+// ---------------------------------------------------------------------------
+
+const HistoryDialog = ({
+    job,
+    open,
+    onOpenChange,
+}: {
+    job: CronJob | null
+    open: boolean
+    onOpenChange: (open: boolean) => void
+}) => {
+    const { t } = useTranslation()
+    const { user } = useAuth()
+    const [runs, setRuns] = useState<CronJobRun[]>([])
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        if (open && job && user) {
+            setLoading(true)
+            iiClawService
+                .getCronJobHistory(user.id, job.id, 20)
+                .then(setRuns)
+                .catch(() => setRuns([]))
+                .finally(() => setLoading(false))
+        }
+    }, [open, job, user])
+
+    if (!job) return null
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[calc(100%-1rem)] sm:max-w-xl">
+                <DialogHeader>
+                    <DialogTitle className="dark:text-white">
+                        {t('iiClaw.cronJobs.history')} — {job.name}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {t('iiClaw.cronJobs.historyDesc')}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="max-h-[360px] overflow-y-auto mt-2">
+                    {loading ? (
+                        <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                            {t('common.loading', 'Loading...')}
+                        </div>
+                    ) : runs.length === 0 ? (
+                        <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                            {t('iiClaw.cronJobs.noHistory')}
+                        </div>
+                    ) : (
+                        <div className="divide-y divide-charcoal/[0.06] dark:divide-white/[0.08]">
+                            {runs.map((run) => (
+                                <div key={run.id} className="flex items-center gap-3 px-2 py-2.5">
+                                    <StatusBadge status={run.status} />
+                                    <div className="min-w-0 flex-1">
+                                        <p className="text-xs text-black dark:text-white">
+                                            {new Date(run.started_at).toLocaleString()}
+                                        </p>
+                                        {run.error_message && (
+                                            <p className="text-[10px] text-red truncate mt-0.5">
+                                                {run.error_message}
+                                            </p>
+                                        )}
+                                    </div>
+                                    <span className="text-[10px] text-charcoal/40 dark:text-white/30 shrink-0">
+                                        {formatDuration(run.duration_ms)}
+                                    </span>
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Create Job Dialog
+// ---------------------------------------------------------------------------
+
+const CreateJobDialog = ({
+    open,
+    onOpenChange,
+    onCreated,
+    editJob,
+}: {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onCreated: () => void
+    editJob?: CronJob | null
+}) => {
+    const { t } = useTranslation()
+    const { user } = useAuth()
+    const isEdit = !!editJob
+
+    // Form state
+    const [name, setName] = useState('')
+    const [label, setLabel] = useState('')
+    const [oneShot, setOneShot] = useState(false)
+    const [scheduleType, setScheduleType] = useState<ScheduleType>('every')
+    const [actionType, setActionType] = useState<ActionType>('channel_message')
+
+    // Schedule fields — every
+    const [everyValue, setEveryValue] = useState('5')
+    const [everyUnit, setEveryUnit] = useState<EveryUnit>('minutes')
+
+    // Schedule fields — cron
+    const [cronPreset, setCronPreset] = useState('weekdays_9am')
+    const [cronCustomExpr, setCronCustomExpr] = useState('')
+    const [cronTz, setCronTz] = useState('UTC')
+
+    // Schedule fields — at
+    const [atTime, setAtTime] = useState('')
+
+    // Channel instances (loaded from API)
+    const [channelInstances, setChannelInstances] = useState<UserChannelInstance[]>([])
+    const [loadingInstances, setLoadingInstances] = useState(false)
+
+    // Custom agents (loaded from API)
+    const [customAgents, setCustomAgents] = useState<UserAgent[]>([])
+
+    // Action fields — channel_message (Post Message)
+    const [selectedInstanceId, setSelectedInstanceId] = useState('')
+    const [selectedChannelType, setSelectedChannelType] = useState('')
+    const [recipient, setRecipient] = useState('')
+    const [message, setMessage] = useState('')
+
+    // Action fields — assistant_task (AI Task)
+    const [agentId, setAgentId] = useState('')
+    const [context, setContext] = useState('')
+    const [deliveryInstanceId, setDeliveryInstanceId] = useState('')
+    const [deliveryChannelType, setDeliveryChannelType] = useState('')
+    const [deliveryRecipient, setDeliveryRecipient] = useState('')
+
+    const [submitting, setSubmitting] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+
+    // Fetch user's channel instances and custom agents when dialog opens
+    useEffect(() => {
+        if (open && user) {
+            setLoadingInstances(true)
+            iiClawService
+                .listUserChannels(user.id)
+                .then(setChannelInstances)
+                .catch(() => setChannelInstances([]))
+                .finally(() => setLoadingInstances(false))
+            iiClawService
+                .listUserAgents()
+                .then(setCustomAgents)
+                .catch(() => setCustomAgents([]))
+        }
+    }, [open, user])
+
+    const resetForm = () => {
+        setName('')
+        setLabel('')
+        setOneShot(false)
+        setScheduleType('every')
+        setActionType('channel_message')
+        setEveryValue('5')
+        setEveryUnit('minutes')
+        setCronPreset('weekdays_9am')
+        setCronCustomExpr('')
+        setCronTz('UTC')
+        setAtTime('')
+        setSelectedInstanceId('')
+        setSelectedChannelType('')
+        setRecipient('')
+        setMessage('')
+        setAgentId('')
+        setContext('')
+        setDeliveryInstanceId('')
+        setDeliveryChannelType('')
+        setDeliveryRecipient('')
+        setError(null)
+    }
+
+    const populateFromJob = (job: CronJob) => {
+        setName(job.name)
+        setLabel(job.label || '')
+        setOneShot(job.one_shot)
+
+        // Schedule
+        const st = job.schedule_type as ScheduleType
+        setScheduleType(st)
+        if (st === 'every') {
+            const secs = Number(job.schedule.every_secs) || 300
+            if (secs >= 86400 && secs % 86400 === 0) {
+                setEveryValue(String(secs / 86400))
+                setEveryUnit('days')
+            } else if (secs >= 3600 && secs % 3600 === 0) {
+                setEveryValue(String(secs / 3600))
+                setEveryUnit('hours')
+            } else {
+                setEveryValue(String(Math.round(secs / 60)))
+                setEveryUnit('minutes')
+            }
+        } else if (st === 'cron') {
+            const expr = String(job.schedule.expr || '')
+            const matchedPreset = CRON_PRESETS.find((p) => p.expr === expr)
+            if (matchedPreset && matchedPreset.key !== 'custom') {
+                setCronPreset(matchedPreset.key)
+            } else {
+                setCronPreset('custom')
+                setCronCustomExpr(expr)
+            }
+            setCronTz(String(job.schedule.tz || 'UTC'))
+        } else if (st === 'at') {
+            const d = new Date(job.schedule.at as string)
+            // Format for datetime-local input: YYYY-MM-DDTHH:mm
+            const pad = (n: number) => String(n).padStart(2, '0')
+            setAtTime(`${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`)
+        }
+
+        // Action
+        const at = job.action_type as ActionType
+        setActionType(at)
+        if (at === 'channel_message') {
+            setSelectedInstanceId(String(job.action.channel || ''))
+            setRecipient(String(job.action.recipient || ''))
+            setMessage(String(job.action.message || ''))
+            // Try to resolve channel type from instance
+            setSelectedChannelType(job.channel_type?.platform as string || '')
+        } else if (at === 'assistant_task') {
+            setAgentId(agentIdToSelectValue(String(job.action.agent_id || '')))
+            setContext(String(job.action.context || ''))
+            const delivery = job.action.delivery as Record<string, unknown> | undefined
+            if (delivery) {
+                setDeliveryInstanceId(String(delivery.channel || ''))
+                setDeliveryRecipient(String(delivery.recipient || ''))
+                setDeliveryChannelType(job.channel_type?.platform as string || '')
+            }
+        }
+
+        setError(null)
+    }
+
+    useEffect(() => {
+        if (open) {
+            if (editJob) {
+                populateFromJob(editJob)
+            } else {
+                resetForm()
+            }
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, editJob])
+
+    const buildSchedule = (): Record<string, unknown> => {
+        switch (scheduleType) {
+            case 'every': {
+                const num = parseInt(everyValue, 10) || 1
+                const multiplier = { minutes: 60, hours: 3600, days: 86400 }[everyUnit]
+                return { type: 'every', every_secs: num * multiplier }
+            }
+            case 'cron': {
+                const expr = cronPreset === 'custom' ? cronCustomExpr : CRON_PRESETS.find((p) => p.key === cronPreset)?.expr || ''
+                const s: Record<string, unknown> = { type: 'cron', expr }
+                if (cronTz && cronTz !== 'UTC') s.tz = cronTz
+                return s
+            }
+            case 'at':
+                return { type: 'at', at: new Date(atTime).toISOString() }
+        }
+    }
+
+    const buildAction = (): Record<string, unknown> => {
+        switch (actionType) {
+            case 'channel_message':
+                return {
+                    type: 'channel_message',
+                    channel: selectedInstanceId,
+                    recipient,
+                    message,
+                }
+            case 'assistant_task':
+                return {
+                    type: 'assistant_task',
+                    agent_id: selectValueToAgentId(agentId),
+                    context,
+                    delivery: {
+                        type: 'channel_message',
+                        channel: deliveryInstanceId,
+                        recipient: deliveryRecipient,
+                    },
+                }
+        }
+    }
+
+    const handleSubmit = async () => {
+        if (!name.trim()) {
+            setError(t('iiClaw.cronJobs.nameRequired'))
+            return
+        }
+
+        setSubmitting(true)
+        setError(null)
+        try {
+            const relevantChannelType = actionType === 'channel_message' ? selectedChannelType : deliveryChannelType
+
+            if (isEdit && editJob) {
+                const req: CronJobUpdateRequest = {
+                    name: name.trim(),
+                    enabled: editJob.enabled,
+                    schedule: buildSchedule(),
+                    action: buildAction(),
+                    one_shot: oneShot,
+                }
+                if (label.trim()) req.label = label.trim()
+                if (relevantChannelType) req.channel_type = { platform: relevantChannelType }
+                await iiClawService.updateCronJob(user!.id, editJob.id, req)
+            } else {
+                const req: CronJobCreateRequest = {
+                    name: name.trim(),
+                    schedule: buildSchedule(),
+                    action: buildAction(),
+                    one_shot: oneShot,
+                }
+                if (label.trim()) req.label = label.trim()
+                if (relevantChannelType) req.channel_type = { platform: relevantChannelType }
+                await iiClawService.createCronJob(user!.id, req)
+            }
+
+            onCreated()
+            onOpenChange(false)
+        } catch (e: unknown) {
+            setError(e instanceof Error ? e.message : 'Failed to create cron job')
+        } finally {
+            setSubmitting(false)
+        }
+    }
+
+    const fieldClass = 'h-9 text-sm'
+    const labelClass = 'text-[10px] text-charcoal/50 dark:text-white/40'
+    const tabBtnClass = (active: boolean) => clsx(
+        'px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer',
+        active
+            ? 'bg-sky-blue/30 text-firefly dark:bg-sky-blue/15 dark:text-sky-blue'
+            : 'text-charcoal/40 dark:text-white/40 hover:bg-charcoal/5 dark:hover:bg-white/5'
+    )
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-[calc(100%-1rem)] sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle className="dark:text-white">
+                        {isEdit ? t('iiClaw.cronJobs.editJob') : t('iiClaw.cronJobs.createJob')}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {isEdit ? t('iiClaw.cronJobs.editJobDesc') : t('iiClaw.cronJobs.createJobDesc')}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4 mt-2 max-h-[60vh] overflow-y-auto pr-1">
+                    {/* Name & Label */}
+                    <div className="grid grid-cols-2 gap-3">
+                        <div className="space-y-1">
+                            <label className="text-xs font-medium text-black dark:text-white">
+                                {t('iiClaw.cronJobs.jobName')} <span className="text-red">*</span>
+                            </label>
+                            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. standup-reminder" className={fieldClass} />
+                        </div>
+                        <div className="space-y-1">
+                            <label className="text-xs font-medium text-black dark:text-white">
+                                {t('iiClaw.cronJobs.label')}
+                            </label>
+                            <Input value={label} onChange={(e) => setLabel(e.target.value)} placeholder="e.g. notifications" className={fieldClass} />
+                        </div>
+                    </div>
+
+                    {/* One-shot */}
+                    <div className="flex items-center gap-2">
+                        <Switch checked={oneShot} onCheckedChange={setOneShot} />
+                        <span className="text-xs text-charcoal/60 dark:text-white/50">
+                            {t('iiClaw.cronJobs.oneShot')}
+                        </span>
+                    </div>
+
+                    {/* ========================= Schedule ========================= */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-semibold text-black dark:text-white">
+                            {t('iiClaw.cronJobs.schedule')}
+                        </label>
+                        <div className="flex gap-2">
+                            {SCHEDULE_TYPES.map((st) => (
+                                <button
+                                    key={st}
+                                    type="button"
+                                    onClick={() => setScheduleType(st)}
+                                    className={tabBtnClass(scheduleType === st)}
+                                >
+                                    {t(`iiClaw.cronJobs.scheduleTypes.${st}`)}
+                                </button>
+                            ))}
+                        </div>
+
+                        {/* Every — value + unit */}
+                        {scheduleType === 'every' && (
+                            <div className="flex gap-2 items-end">
+                                <div className="space-y-1 flex-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.everyValue')}
+                                    </label>
+                                    <Input
+                                        type="number"
+                                        value={everyValue}
+                                        onChange={(e) => setEveryValue(e.target.value)}
+                                        placeholder="5"
+                                        min="1"
+                                        className={fieldClass}
+                                    />
+                                </div>
+                                <div className="space-y-1 w-32">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.everyUnit')}
+                                    </label>
+                                    <Select value={everyUnit} onValueChange={(v) => setEveryUnit(v as EveryUnit)}>
+                                        <SelectTrigger className="!h-9 !py-0 !px-3 text-sm !rounded-lg">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="minutes">{t('iiClaw.cronJobs.units.minutes')}</SelectItem>
+                                            <SelectItem value="hours">{t('iiClaw.cronJobs.units.hours')}</SelectItem>
+                                            <SelectItem value="days">{t('iiClaw.cronJobs.units.days')}</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Cron — preset picker + timezone */}
+                        {scheduleType === 'cron' && (
+                            <div className="space-y-2">
+                                <div className="space-y-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.cronPreset')}
+                                    </label>
+                                    <Select value={cronPreset} onValueChange={setCronPreset}>
+                                        <SelectTrigger className="!h-9 !py-0 !px-3 text-sm !rounded-lg">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {CRON_PRESETS.map((p) => (
+                                                <SelectItem key={p.key} value={p.key}>
+                                                    <div className="flex items-center gap-2">
+                                                        <span>{t(`iiClaw.cronJobs.cronPresets.${p.key}`, p.label)}</span>
+                                                        {p.expr && (
+                                                            <span className="text-[10px] text-charcoal/30 dark:text-white/20 font-mono">
+                                                                {p.expr}
+                                                            </span>
+                                                        )}
+                                                    </div>
+                                                </SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+
+                                {cronPreset === 'custom' && (
+                                    <div className="space-y-1">
+                                        <label className={labelClass}>
+                                            {t('iiClaw.cronJobs.cronExpr')}
+                                        </label>
+                                        <Input
+                                            value={cronCustomExpr}
+                                            onChange={(e) => setCronCustomExpr(e.target.value)}
+                                            placeholder="0 9 * * 1-5"
+                                            className={clsx(fieldClass, 'font-mono')}
+                                        />
+                                        <p className="text-[9px] text-charcoal/30 dark:text-white/20">
+                                            {t('iiClaw.cronJobs.cronExprHint')}
+                                        </p>
+                                    </div>
+                                )}
+
+                                <div className="space-y-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.timezone')}
+                                    </label>
+                                    <Select value={cronTz} onValueChange={setCronTz}>
+                                        <SelectTrigger className="!h-9 !py-0 !px-3 text-sm !rounded-lg">
+                                            <SelectValue />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {COMMON_TIMEZONES.map((tz) => (
+                                                <SelectItem key={tz} value={tz}>{tz}</SelectItem>
+                                            ))}
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* At — datetime picker */}
+                        {scheduleType === 'at' && (
+                            <div className="space-y-1">
+                                <label className={labelClass}>
+                                    {t('iiClaw.cronJobs.runAt')}
+                                </label>
+                                <Input type="datetime-local" value={atTime} onChange={(e) => setAtTime(e.target.value)} className={fieldClass} />
+                            </div>
+                        )}
+                    </div>
+
+                    {/* ========================= Action ========================= */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-semibold text-black dark:text-white">
+                            {t('iiClaw.cronJobs.action')}
+                        </label>
+                        <div className="flex flex-wrap gap-2">
+                            {ACTION_TYPES.map((at) => (
+                                <button
+                                    key={at}
+                                    type="button"
+                                    onClick={() => setActionType(at)}
+                                    className={tabBtnClass(actionType === at)}
+                                >
+                                    {t(`iiClaw.cronJobs.actionTypes.${at}`)}
+                                </button>
+                            ))}
+                        </div>
+
+                        {/* Post Message */}
+                        {actionType === 'channel_message' && (
+                            <div className="space-y-2">
+                                <ChannelBotPicker
+                                    channelInstances={channelInstances}
+                                    loadingInstances={loadingInstances}
+                                    selectedInstanceId={selectedInstanceId}
+                                    onSelect={(id, type) => {
+                                        setSelectedInstanceId(id)
+                                        setSelectedChannelType(type)
+                                    }}
+                                    label={t('iiClaw.cronJobs.actionFields.channelBot')}
+                                />
+                                <div className="space-y-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.actionFields.recipient')}
+                                    </label>
+                                    <Input value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="Channel ID" className={fieldClass} />
+                                </div>
+                                <div className="space-y-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.actionFields.message')}
+                                    </label>
+                                    <Textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Hey team! Time for standup." className="text-sm min-h-[36px] !rounded-lg !px-3 !py-2" />
+                                </div>
+                            </div>
+                        )}
+
+                        {/* AI Task */}
+                        {actionType === 'assistant_task' && (
+                            <div className="space-y-2">
+                                <div className="space-y-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.actionFields.agentId')}
+                                    </label>
+                                    <Select value={agentId || '_default'} onValueChange={(v) => setAgentId(v === '_default' ? '' : v)}>
+                                        <SelectTrigger className={fieldClass}>
+                                            <SelectValue placeholder={t('iiClaw.channels.selectAgent', 'Select agent')} />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            {customAgents.length > 0 && (
+                                                <SelectGroup>
+                                                    <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                                        {t('iiClaw.channels.customAgents', 'Custom')}
+                                                    </SelectLabel>
+                                                    {customAgents.map((agent) => (
+                                                        <SelectItem key={agent.id} value={agent.id} className="text-sm">
+                                                            <span className="flex items-center gap-2">
+                                                                <Icon name="agent" className="size-3.5 fill-charcoal/40 dark:fill-white/40" />
+                                                                {agent.agent_name}
+                                                                {agent.tag && (
+                                                                    <span className="text-[10px] px-1 py-0.5 rounded bg-sky-blue/10 text-charcoal/50 dark:text-white/40">
+                                                                        {agent.tag}
+                                                                    </span>
+                                                                )}
+                                                            </span>
+                                                        </SelectItem>
+                                                    ))}
+                                                </SelectGroup>
+                                            )}
+                                            <SelectGroup>
+                                                <SelectLabel className="text-xs font-semibold text-charcoal/40 dark:text-white/30">
+                                                    {t('iiClaw.channels.builtinAgents', 'Built-in')}
+                                                </SelectLabel>
+                                                <SelectItem value="_default" className="text-sm">
+                                                    <span className="flex items-center gap-2">
+                                                        <Icon name="agent" className="size-3.5 fill-charcoal/40 dark:fill-white/40" />
+                                                        {t('iiClaw.agents.builtinAgents.general.name')}
+                                                    </span>
+                                                </SelectItem>
+                                                {BUILTIN_AGENTS.filter((a) => a.type !== 'general').map((agent) => (
+                                                    <SelectItem key={agent.type} value={`builtin:${agent.type}`} className="text-sm">
+                                                        <span className="flex items-center gap-2">
+                                                            <Icon
+                                                                name={agent.icon}
+                                                                className={clsx('size-3.5', agent.isFill
+                                                                    ? 'fill-charcoal/40 dark:fill-white/40'
+                                                                    : 'stroke-charcoal/40 dark:stroke-white/40'
+                                                                )}
+                                                            />
+                                                            {t(agent.nameKey)}
+                                                        </span>
+                                                    </SelectItem>
+                                                ))}
+                                            </SelectGroup>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="space-y-1">
+                                    <label className={labelClass}>
+                                        {t('iiClaw.cronJobs.actionFields.context')}
+                                    </label>
+                                    <Textarea value={context} onChange={(e) => setContext(e.target.value)} placeholder="Summarize today's customer support tickets. Include counts by category and highlight any critical issues." className="text-sm min-h-[36px] !rounded-lg !px-3 !py-2" />
+                                </div>
+
+                                <div className="pt-2 border-t border-charcoal/[0.06] dark:border-white/[0.08]">
+                                    <p className="text-[10px] font-semibold text-charcoal/50 dark:text-white/40 mb-2">
+                                        {t('iiClaw.cronJobs.deliverTo')}
+                                    </p>
+                                    <ChannelBotPicker
+                                        channelInstances={channelInstances}
+                                        loadingInstances={loadingInstances}
+                                        selectedInstanceId={deliveryInstanceId}
+                                        onSelect={(id, type) => {
+                                            setDeliveryInstanceId(id)
+                                            setDeliveryChannelType(type)
+                                        }}
+                                        label={t('iiClaw.cronJobs.actionFields.channelBot')}
+                                    />
+                                    <div className="space-y-1 mt-2">
+                                        <label className={labelClass}>
+                                            {t('iiClaw.cronJobs.actionFields.recipient')}
+                                        </label>
+                                        <Input value={deliveryRecipient} onChange={(e) => setDeliveryRecipient(e.target.value)} placeholder="Channel ID" className={fieldClass} />
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Error */}
+                    {error && (
+                        <p className="text-xs text-red bg-red/10 rounded-lg px-3 py-2">
+                            {error}
+                        </p>
+                    )}
+                </div>
+
+                {/* Actions */}
+                <div className="flex gap-2 justify-end pt-3 border-t border-charcoal/[0.06] dark:border-white/[0.08]">
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onOpenChange(false)}
+                        disabled={submitting}
+                        className="dark:text-white dark:border-white/20 dark:hover:bg-white/5"
+                    >
+                        {t('common.cancel', 'Cancel')}
+                    </Button>
+                    <Button
+                        size="sm"
+                        onClick={handleSubmit}
+                        disabled={submitting}
+                        className="bg-sky-blue text-charcoal hover:bg-sky-blue/80 dark:bg-sky-blue dark:text-charcoal dark:hover:bg-sky-blue/80"
+                    >
+                        {submitting
+                            ? (isEdit ? t('iiClaw.cronJobs.saving') : t('iiClaw.cronJobs.creating'))
+                            : (isEdit ? t('iiClaw.cronJobs.save') : t('iiClaw.cronJobs.create'))}
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Job Row
+// ---------------------------------------------------------------------------
+
+const JobRow = ({
+    job,
+    onToggle,
+    onDelete,
+    onHistory,
+    onEdit,
+    onTest,
+}: {
+    job: CronJob
+    onToggle: (job: CronJob) => void
+    onDelete: (job: CronJob) => void
+    onHistory: (job: CronJob) => void
+    onEdit: (job: CronJob) => void
+    onTest: (job: CronJob) => void
+}) => {
+    const { t } = useTranslation()
+
+    const iconBtnBase = 'rounded-lg flex items-center justify-center transition-colors cursor-pointer'
+
+    return (
+        <div
+            className={clsx(
+                'px-3 sm:px-5 py-3 sm:py-3.5 transition-colors',
+                'hover:bg-charcoal/[0.02] dark:hover:bg-white/[0.03]'
+            )}
+        >
+            {/* Row 1: switch + name + badge + (desktop: time + buttons) */}
+            <div className="flex items-center gap-3 sm:gap-4">
+                <Switch
+                    checked={job.enabled}
+                    onCheckedChange={() => onToggle(job)}
+                />
+
+                <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 sm:gap-2.5">
+                        <p className={clsx(
+                            'text-sm sm:text-base font-medium truncate',
+                            job.enabled ? 'text-black dark:text-white' : 'text-charcoal/40 dark:text-white/30'
+                        )}>
+                            {job.name}
+                        </p>
+                        {job.label && (
+                            <span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-sky-blue/10 text-firefly dark:bg-sky-blue/10 dark:text-sky-blue hidden sm:inline">
+                                {job.label}
+                            </span>
+                        )}
+                        {job.one_shot && (
+                            <span className="text-[10px] sm:text-xs px-2 py-0.5 rounded-full bg-amber-500/10 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400 hidden sm:inline">
+                                {t('iiClaw.cronJobs.oneShotBadge')}
+                            </span>
+                        )}
+                    </div>
+                    <p className="text-[11px] sm:text-xs text-charcoal/40 dark:text-white/30 mt-0.5">
+                        {formatSchedule(job)}
+                    </p>
+                </div>
+
+                {/* Action type badge */}
+                <span className={clsx(
+                    'text-[10px] sm:text-xs px-2 sm:px-2.5 py-0.5 sm:py-1 rounded-full shrink-0 font-medium',
+                    job.action_type === 'channel_message'
+                        ? 'bg-sky-blue/15 text-firefly dark:bg-sky-blue/10 dark:text-sky-blue'
+                        : 'bg-sky-blue-3/20 text-firefly dark:bg-sky-blue-4/10 dark:text-sky-blue-4'
+                )}>
+                    {job.action_type === 'channel_message' ? t('iiClaw.cronJobs.actionTypes.channel_message') : t(`iiClaw.cronJobs.actionTypes.${job.action_type}`, job.action_type)}
+                </span>
+
+                {/* Time ago — desktop */}
+                <span className="text-xs text-charcoal/30 dark:text-white/20 shrink-0 hidden md:block">
+                    {formatTimeAgo(job.created_at)}
+                </span>
+
+                {/* Action buttons — desktop */}
+                <div className="hidden sm:flex items-center gap-1 shrink-0">
+                    <button type="button" onClick={() => onEdit(job)} className={clsx(iconBtnBase, 'w-8 h-8 text-firefly/40 dark:text-sky-blue/40 hover:text-firefly dark:hover:text-sky-blue hover:bg-sky-blue/10 dark:hover:bg-sky-blue/10')} title={t('iiClaw.cronJobs.edit')}>
+                        <svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8.5 1.5L10.5 3.5M1.5 10.5L2 8.5L8.5 2L10 3.5L3.5 10L1.5 10.5Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                    <button type="button" onClick={() => onTest(job)} className={clsx(iconBtnBase, 'w-8 h-8 text-firefly/40 dark:text-sky-blue/40 hover:text-firefly dark:hover:text-sky-blue hover:bg-sky-blue/15 dark:hover:bg-sky-blue/10')} title={t('iiClaw.cronJobs.testJob')}>
+                        <svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M4 2.5V9.5L10 6L4 2.5Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                    <button type="button" onClick={() => onHistory(job)} className={clsx(iconBtnBase, 'w-8 h-8 text-firefly/40 dark:text-sky-blue/40 hover:text-firefly dark:hover:text-sky-blue hover:bg-sky-blue/10 dark:hover:bg-sky-blue/10')} title={t('iiClaw.cronJobs.history')}>
+                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M7 3.5V7L9.5 8.5M12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                    <button type="button" onClick={() => onDelete(job)} className={clsx(iconBtnBase, 'w-8 h-8 text-charcoal/20 dark:text-white/20 hover:text-red hover:bg-red/10 dark:hover:bg-red/10')} title={t('iiClaw.cronJobs.delete')}>
+                        <svg width="14" height="14" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2.5 3.5H9.5M4.5 3.5V2.5C4.5 2.22386 4.72386 2 5 2H7C7.27614 2 7.5 2.22386 7.5 2.5V3.5M5 5.5V8.5M7 5.5V8.5M3.5 3.5L3.85 9.17C3.87 9.63 4.25 10 4.71 10H7.29C7.75 10 8.13 9.63 8.15 9.17L8.5 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            {/* Row 2: mobile only — badges + time + action buttons */}
+            <div className="flex sm:hidden items-center gap-2 mt-2 ml-[44px]">
+                {job.label && (
+                    <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-sky-blue/10 text-firefly dark:bg-sky-blue/10 dark:text-sky-blue">
+                        {job.label}
+                    </span>
+                )}
+                {job.one_shot && (
+                    <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 dark:bg-amber-500/15 text-amber-600 dark:text-amber-400">
+                        {t('iiClaw.cronJobs.oneShotBadge')}
+                    </span>
+                )}
+                <span className="text-[10px] text-charcoal/30 dark:text-white/20">
+                    {formatTimeAgo(job.created_at)}
+                </span>
+                <div className="flex-1" />
+                <div className="flex items-center gap-1">
+                    <button type="button" onClick={() => onEdit(job)} className={clsx(iconBtnBase, 'w-7 h-7 text-firefly/40 dark:text-sky-blue/40 hover:text-firefly dark:hover:text-sky-blue hover:bg-sky-blue/10 dark:hover:bg-sky-blue/10')} title={t('iiClaw.cronJobs.edit')}>
+                        <svg width="13" height="13" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M8.5 1.5L10.5 3.5M1.5 10.5L2 8.5L8.5 2L10 3.5L3.5 10L1.5 10.5Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                    <button type="button" onClick={() => onTest(job)} className={clsx(iconBtnBase, 'w-7 h-7 text-firefly/40 dark:text-sky-blue/40 hover:text-firefly dark:hover:text-sky-blue hover:bg-sky-blue/15 dark:hover:bg-sky-blue/10')} title={t('iiClaw.cronJobs.testJob')}>
+                        <svg width="13" height="13" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M4 2.5V9.5L10 6L4 2.5Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                    <button type="button" onClick={() => onHistory(job)} className={clsx(iconBtnBase, 'w-7 h-7 text-firefly/40 dark:text-sky-blue/40 hover:text-firefly dark:hover:text-sky-blue hover:bg-sky-blue/10 dark:hover:bg-sky-blue/10')} title={t('iiClaw.cronJobs.history')}>
+                        <svg width="13" height="13" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M7 3.5V7L9.5 8.5M12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7Z" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                    <button type="button" onClick={() => onDelete(job)} className={clsx(iconBtnBase, 'w-7 h-7 text-charcoal/20 dark:text-white/20 hover:text-red hover:bg-red/10 dark:hover:bg-red/10')} title={t('iiClaw.cronJobs.delete')}>
+                        <svg width="13" height="13" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M2.5 3.5H9.5M4.5 3.5V2.5C4.5 2.22386 4.72386 2 5 2H7C7.27614 2 7.5 2.22386 7.5 2.5V3.5M5 5.5V8.5M7 5.5V8.5M3.5 3.5L3.85 9.17C3.87 9.63 4.25 10 4.71 10H7.29C7.75 10 8.13 9.63 8.15 9.17L8.5 3.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Filter Chip (dropdown-style)
+// ---------------------------------------------------------------------------
+
+const FilterChip = ({
+    label,
+    value,
+    options,
+    onChange,
+}: {
+    label: string
+    value: string
+    options: { value: string; label: string }[]
+    onChange: (value: string) => void
+}) => {
+    const isActive = value !== 'all'
+    return (
+        <Select value={value} onValueChange={onChange}>
+            <SelectTrigger
+                className={clsx(
+                    '!h-8 !py-0 !px-2.5 !rounded-lg text-[11px] font-medium !gap-1 !w-auto !min-w-0 border transition-colors',
+                    isActive
+                        ? 'bg-sky-blue/10 border-sky-blue/30 text-firefly dark:bg-sky-blue/10 dark:border-sky-blue/20 dark:text-sky-blue'
+                        : 'bg-white dark:bg-[#A6FFFF0D] border-charcoal/10 dark:border-white/15 text-charcoal/50 dark:text-white/40'
+                )}
+            >
+                <span className="shrink-0">{label}:</span>
+                <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="min-w-[120px]">
+                {options.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value} className="text-xs">
+                        {opt.label}
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Cron Jobs Panel
+// ---------------------------------------------------------------------------
+
+const CronJobsPanel = () => {
+    const { t } = useTranslation()
+    const { user } = useAuth()
+
+    const [jobs, setJobs] = useState<CronJob[]>([])
+    const [loading, setLoading] = useState(true)
+    const [createOpen, setCreateOpen] = useState(false)
+    const [editTarget, setEditTarget] = useState<CronJob | null>(null)
+    const [editOpen, setEditOpen] = useState(false)
+    const [historyTarget, setHistoryTarget] = useState<CronJob | null>(null)
+    const [historyOpen, setHistoryOpen] = useState(false)
+    const [confirmDelete, setConfirmDelete] = useState<CronJob | null>(null)
+    const [deleting, setDeleting] = useState(false)
+    const [testResult, setTestResult] = useState<{ job: CronJob; result: CronJobTestResponse['result'] } | null>(null)
+
+    // Filters
+    const [search, setSearch] = useState('')
+    const [filterEnabled, setFilterEnabled] = useState<'all' | 'enabled' | 'disabled'>('all')
+    const [filterSchedule, setFilterSchedule] = useState<'all' | 'every' | 'cron' | 'at'>('all')
+    const [filterLabel, setFilterLabel] = useState<string>('all')
+
+    const fetchJobs = useCallback(async () => {
+        if (!user) return
+        setLoading(true)
+        try {
+            const list = await iiClawService.listCronJobs(user.id)
+            setJobs(list)
+        } catch {
+            setJobs([])
+        } finally {
+            setLoading(false)
+        }
+    }, [user])
+
+    useEffect(() => {
+        fetchJobs()
+    }, [fetchJobs])
+
+    const handleToggle = async (job: CronJob) => {
+        if (!user) return
+        try {
+            await iiClawService.toggleCronJob(user.id, job.id, !job.enabled)
+            setJobs((prev) =>
+                prev.map((j) => (j.id === job.id ? { ...j, enabled: !j.enabled } : j))
+            )
+        } catch {
+            fetchJobs()
+        }
+    }
+
+    const handleDelete = async () => {
+        if (!user || !confirmDelete) return
+        setDeleting(true)
+        try {
+            await iiClawService.deleteCronJob(user.id, confirmDelete.id)
+            setJobs((prev) => prev.filter((j) => j.id !== confirmDelete.id))
+        } catch {
+            // ignore
+        } finally {
+            setDeleting(false)
+            setConfirmDelete(null)
+        }
+    }
+
+    const handleHistory = (job: CronJob) => {
+        setHistoryTarget(job)
+        setHistoryOpen(true)
+    }
+
+    const handleEdit = (job: CronJob) => {
+        setEditTarget(job)
+        setEditOpen(true)
+    }
+
+    const handleTest = async (job: CronJob) => {
+        if (!user) return
+        try {
+            const resp = await iiClawService.testCronJob(user.id, job.id)
+            setTestResult({ job, result: resp.result })
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : 'Test failed'
+            setTestResult({ job, result: { status: 'error', id: job.id, error: msg } })
+        }
+    }
+
+    const enabledCount = jobs.filter((j) => j.enabled).length
+
+    const labels = useMemo(() => {
+        const set = new Set<string>()
+        jobs.forEach((j) => { if (j.label) set.add(j.label) })
+        return Array.from(set).sort()
+    }, [jobs])
+
+    const filteredJobs = useMemo(() => {
+        let result = jobs
+        if (search.trim()) {
+            const q = search.toLowerCase()
+            result = result.filter((j) => j.name.toLowerCase().includes(q) || (j.label && j.label.toLowerCase().includes(q)))
+        }
+        if (filterEnabled !== 'all') {
+            result = result.filter((j) => filterEnabled === 'enabled' ? j.enabled : !j.enabled)
+        }
+        if (filterSchedule !== 'all') {
+            result = result.filter((j) => j.schedule_type === filterSchedule)
+        }
+        if (filterLabel !== 'all') {
+            result = result.filter((j) => j.label === filterLabel)
+        }
+        return result
+    }, [jobs, search, filterEnabled, filterSchedule, filterLabel])
+
+    const hasActiveFilters = search.trim() !== '' || filterEnabled !== 'all' || filterSchedule !== 'all' || filterLabel !== 'all'
+
+    return (
+        <div className="flex-1 p-4 sm:p-6 md:p-8 overflow-y-auto bg-white dark:bg-charcoal">
+            <div className="max-w-4xl mx-auto">
+                {/* Header */}
+                <div className="flex items-start justify-between mb-6 sm:mb-8">
+                    <div>
+                        <h1 className="text-xl sm:text-2xl font-bold text-black dark:text-white">
+                            {t('iiClaw.cronJobs.title')}
+                        </h1>
+                        <p className="text-xs sm:text-sm text-charcoal/50 dark:text-white/40 mt-1.5 sm:mt-2">
+                            {t('iiClaw.cronJobs.subtitle')}{' '}
+                            <span className="text-black dark:text-white font-medium">{enabledCount}</span>{' '}
+                            {t('iiClaw.cronJobs.active')}.
+                        </p>
+                    </div>
+                    <Button
+                        size="sm"
+                        onClick={() => setCreateOpen(true)}
+                        className="bg-sky-blue text-charcoal hover:bg-sky-blue/80 dark:bg-sky-blue dark:text-charcoal dark:hover:bg-sky-blue/80"
+                    >
+                        {t('iiClaw.cronJobs.create')}
+                    </Button>
+                </div>
+
+                {/* Search & Filters */}
+                {jobs.length > 0 && (
+                    <div className="flex flex-wrap items-center gap-2 mb-3">
+                        {/* Search */}
+                        <div className="relative flex-1 min-w-[180px]">
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute left-2.5 top-1/2 -translate-y-1/2 text-charcoal/30 dark:text-white/25">
+                                <path d="M6.5 11C9.26142 11 11.5 8.76142 11.5 6C11.5 3.23858 9.26142 1 6.5 1C3.73858 1 1.5 3.23858 1.5 6C1.5 8.76142 3.73858 11 6.5 11ZM10.5 10.5L13 13" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
+                            </svg>
+                            <Input
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                placeholder={t('iiClaw.cronJobs.searchPlaceholder')}
+                                className="h-8 text-xs pl-8 pr-3"
+                            />
+                        </div>
+
+                        {/* Enabled filter */}
+                        <FilterChip
+                            label={t('iiClaw.cronJobs.filters.enabled')}
+                            value={filterEnabled}
+                            options={[
+                                { value: 'all', label: t('iiClaw.cronJobs.filters.all') },
+                                { value: 'enabled', label: t('iiClaw.cronJobs.filters.enabledOnly') },
+                                { value: 'disabled', label: t('iiClaw.cronJobs.filters.disabledOnly') },
+                            ]}
+                            onChange={(v) => setFilterEnabled(v as typeof filterEnabled)}
+                        />
+
+                        {/* Schedule filter */}
+                        <FilterChip
+                            label={t('iiClaw.cronJobs.filters.schedule')}
+                            value={filterSchedule}
+                            options={[
+                                { value: 'all', label: t('iiClaw.cronJobs.filters.all') },
+                                { value: 'every', label: t('iiClaw.cronJobs.scheduleTypes.every') },
+                                { value: 'cron', label: t('iiClaw.cronJobs.scheduleTypes.cron') },
+                                { value: 'at', label: t('iiClaw.cronJobs.scheduleTypes.at') },
+                            ]}
+                            onChange={(v) => setFilterSchedule(v as typeof filterSchedule)}
+                        />
+
+                        {/* Label filter */}
+                        {labels.length > 0 && (
+                            <FilterChip
+                                label={t('iiClaw.cronJobs.filters.label')}
+                                value={filterLabel}
+                                options={[
+                                    { value: 'all', label: t('iiClaw.cronJobs.filters.all') },
+                                    ...labels.map((l) => ({ value: l, label: l })),
+                                ]}
+                                onChange={setFilterLabel}
+                            />
+                        )}
+
+                        {/* Clear filters */}
+                        {hasActiveFilters && (
+                            <button
+                                type="button"
+                                onClick={() => { setSearch(''); setFilterEnabled('all'); setFilterSchedule('all'); setFilterLabel('all') }}
+                                className="text-[10px] text-charcoal/40 dark:text-white/30 hover:text-charcoal dark:hover:text-white transition-colors cursor-pointer px-1"
+                            >
+                                {t('iiClaw.cronJobs.filters.clear')}
+                            </button>
+                        )}
+                    </div>
+                )}
+
+                {/* Job List */}
+                <div className="rounded-2xl border border-grey-2 dark:border-grey/30 bg-sidebar-bg dark:bg-white/[0.04] overflow-hidden">
+                    {loading ? (
+                        <div className="flex items-center justify-center h-32 text-sm text-charcoal/40 dark:text-white/30">
+                            {t('common.loading', 'Loading...')}
+                        </div>
+                    ) : jobs.length === 0 ? (
+                        <div className="flex flex-col items-center justify-center h-40 text-center px-6">
+                            <div className="w-12 h-12 rounded-full bg-charcoal/5 dark:bg-white/5 flex items-center justify-center mb-3">
+                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className="opacity-30">
+                                    <path d="M10 5V10L13 12M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                                </svg>
+                            </div>
+                            <p className="text-sm text-charcoal/40 dark:text-white/30">
+                                {t('iiClaw.cronJobs.noJobs')}
+                            </p>
+                            <p className="text-[10px] text-charcoal/30 dark:text-white/20 mt-1">
+                                {t('iiClaw.cronJobs.noJobsHint')}
+                            </p>
+                        </div>
+                    ) : filteredJobs.length === 0 ? (
+                        <div className="flex items-center justify-center h-24 text-xs text-charcoal/40 dark:text-white/30">
+                            {t('iiClaw.cronJobs.noMatchingJobs')}
+                        </div>
+                    ) : (
+                        <div className="divide-y divide-charcoal/[0.06] dark:divide-white/[0.08]">
+                            {filteredJobs.map((job) => (
+                                <JobRow
+                                    key={job.id}
+                                    job={job}
+                                    onToggle={handleToggle}
+                                    onDelete={setConfirmDelete}
+                                    onHistory={handleHistory}
+                                    onEdit={handleEdit}
+                                    onTest={handleTest}
+                                />
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* Create Dialog */}
+            <CreateJobDialog
+                open={createOpen}
+                onOpenChange={setCreateOpen}
+                onCreated={fetchJobs}
+            />
+
+            {/* History Dialog */}
+            <HistoryDialog
+                job={historyTarget}
+                open={historyOpen}
+                onOpenChange={setHistoryOpen}
+            />
+
+            {/* Edit Dialog */}
+            <CreateJobDialog
+                open={editOpen}
+                onOpenChange={setEditOpen}
+                onCreated={fetchJobs}
+                editJob={editTarget}
+            />
+
+            {/* Delete Confirmation */}
+            <AlertDialog open={!!confirmDelete} onOpenChange={(v) => { if (!v) setConfirmDelete(null) }}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>
+                            {t('iiClaw.cronJobs.confirmDeleteTitle')}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t('iiClaw.cronJobs.confirmDeleteDesc', { name: confirmDelete?.name })}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={deleting}>
+                            {t('common.cancel', 'Cancel')}
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={handleDelete}
+                            disabled={deleting}
+                            className="bg-red text-white hover:bg-red/80"
+                        >
+                            {deleting ? t('iiClaw.cronJobs.deleting') : t('iiClaw.cronJobs.delete')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+            {/* Test Result */}
+            <AlertDialog open={!!testResult} onOpenChange={(v) => { if (!v) setTestResult(null) }}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle className="flex items-center gap-2">
+                            {testResult?.result.status === 'ok' ? (
+                                <span className="w-2 h-2 rounded-full bg-green-5 shrink-0" />
+                            ) : (
+                                <span className="w-2 h-2 rounded-full bg-red shrink-0" />
+                            )}
+                            {t('iiClaw.cronJobs.testResult')} — {testResult?.job.name}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription asChild>
+                            <div className="space-y-2 mt-2">
+                                <div className="flex items-center gap-2">
+                                    <StatusBadge status={testResult?.result.status || 'error'} />
+                                    {testResult?.result.action_type && (
+                                        <span className="text-[10px] text-charcoal/40 dark:text-white/30">
+                                            {testResult.result.action_type}
+                                        </span>
+                                    )}
+                                </div>
+                                {testResult?.result.message && (
+                                    <p className="text-xs text-green-5 bg-green-5/5 dark:bg-green-5/10 rounded-lg px-3 py-2">
+                                        {testResult.result.message}
+                                    </p>
+                                )}
+                                {testResult?.result.error && (
+                                    <p className="text-xs text-red bg-red/5 dark:bg-red/10 rounded-lg px-3 py-2">
+                                        {testResult.result.error}
+                                    </p>
+                                )}
+                            </div>
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogAction className="bg-sky-blue text-charcoal hover:bg-sky-blue/80 dark:bg-sky-blue dark:text-charcoal dark:hover:bg-sky-blue/80">
+                            {t('common.ok', 'OK')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    )
+}
+
+export { CronJobsPanel }
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
index 9a5a5326b..353261c88 100644
--- a/frontend/src/components/sidebar.tsx
+++ b/frontend/src/components/sidebar.tsx
@@ -357,6 +357,32 @@ const Sidebar = ({ className, workspaceInfo }: SidebarButtonProps) => {
                                 </TooltipContent>
                             </Tooltip>
                         </SidebarMenuItem>
+                        <SidebarMenuItem className="hidden md:block mt-4 group-data-[collapsible=icon]:mt-6">
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Link
+                                        to="/ii-claw"
+                                        aria-label="II-Claw"
+                                        className="flex items-center gap-x-2 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:justify-center"
+                                    >
+                                        <Icon
+                                            name="connector"
+                                            className="fill-black dark:fill-white"
+                                        />
+                                        <span className="group-data-[collapsible=icon]:hidden">
+                                            II-Claw
+                                        </span>
+                                    </Link>
+                                </TooltipTrigger>
+                                <TooltipContent
+                                    side="right"
+                                    align="center"
+                                    hidden={state !== 'collapsed' || isMobile}
+                                >
+                                    II-Claw
+                                </TooltipContent>
+                            </Tooltip>
+                        </SidebarMenuItem>
 
                         <div className="mt-4 md:mt-8 space-y-8 group-data-[collapsible=icon]:mt-4">
                             <ProjectList
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index a272db328..1f07fe9d5 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -63,7 +63,7 @@ function SelectContent({
             <SelectPrimitive.Content
                 data-slot="select-content"
                 className={cn(
-                    'bg-white text-black data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border border-charcoal/30 dark:border-white/30 shadow-md',
+                    'bg-white dark:bg-charcoal text-black dark:text-white data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border border-charcoal/30 dark:border-white/30 shadow-md',
                     position === 'popper' &&
                         'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
                     className
@@ -112,7 +112,7 @@ function SelectItem({
         <SelectPrimitive.Item
             data-slot="select-item"
             className={cn(
-                "focus:font-semibold focus:text-black [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+                "focus:font-semibold focus:text-black dark:focus:text-white dark:text-white [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
                 className
             )}
             {...props}
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index d84cbedb2..16d6e2288 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -2744,5 +2744,238 @@
                 "unableToUpdate": "Unable to update secrets"
             }
         }
+    },
+    "iiClaw": {
+        "title": "II-Claw",
+        "version": "II-Claw v0.1.0",
+        "agents": {
+            "title": "Agents",
+            "subtitle": "Choose a built-in agent mode or create your own custom agent.",
+            "customCard": {
+                "title": "Custom your Agent",
+                "description": "Create a personalized agent with custom prompt, tools & model"
+            },
+            "availableAgents": "Available Agents",
+            "dialog": {
+                "createTitle": "Create Custom Agent",
+                "editTitle": "Edit Agent",
+                "stepOf": "Step {{current}} of {{total}}",
+                "steps": {
+                    "identity": "Identity & Prompt",
+                    "model": "Choose Model",
+                    "tools": "Configure Tools",
+                    "skills": "Skills & Connectors"
+                },
+                "sidebar": {
+                    "title": "Your Agents",
+                    "empty": "No custom agents yet",
+                    "emptyHint": "Create your first one",
+                    "noTag": "No tag"
+                },
+                "placeholder": "Select your agent to edit, or click + to add a new one",
+                "fields": {
+                    "agentName": "Agent Name",
+                    "tag": "Tag",
+                    "tagPlaceholder": "e.g. research-ai",
+                    "systemPrompt": "System Prompt",
+                    "systemPromptPlaceholder": "Custom instructions for this agent...",
+                    "systemPromptHint": "Leave blank to use the default base prompt.",
+                    "llmModel": "LLM Model",
+                    "llmModelDefault": "Default (Session)",
+                    "llmModelHint": "Choose the model this agent will use. \"Default\" uses your session model.",
+                    "toolsDescription": "Toggle the tools available to this agent.",
+                    "skillMode": "Skill Mode",
+                    "connectorMode": "Connector Mode"
+                },
+                "skillModes": {
+                    "default": "Default",
+                    "customOnly": "Custom Only",
+                    "defaultAndCustom": "Default + Custom"
+                },
+                "connectorModes": {
+                    "default": "Default",
+                    "customOnly": "Custom Only",
+                    "defaultAndCustom": "Default + Custom"
+                },
+                "buttons": {
+                    "back": "Back",
+                    "next": "Next",
+                    "create": "Create Agent",
+                    "update": "Update Agent",
+                    "saving": "Saving...",
+                    "newAgent": "New Agent"
+                },
+                "delete": {
+                    "title": "Delete agent?",
+                    "description": "Are you sure you want to delete this agent? This action cannot be undone.",
+                    "confirm": "Delete",
+                    "cancel": "Cancel"
+                }
+            },
+            "builtinAgents": {
+                "general": { "name": "General Agent", "description": "Default multi-purpose agent" },
+                "fastResearch": { "name": "Fast Research Agent", "description": "Quick web research & summarization" },
+                "deepResearch": { "name": "Deep Research Agent", "description": "In-depth research with citations" },
+                "websiteBuilder": { "name": "Website Builder Agent", "description": "Full-stack web development" },
+                "mobileApp": { "name": "Mobile App Agent", "description": "React Native mobile development" },
+                "media": { "name": "Media Agent", "description": "Image & video generation" },
+                "slide": { "name": "Slide Creator Agent", "description": "Create presentations" },
+                "codex": { "name": "Codex Agent", "description": "OpenAI Codex code generation" },
+                "claudeCode": { "name": "Claude Code Agent", "description": "Claude autonomous coding" }
+            }
+        },
+        "channels": {
+            "title": "Channels",
+            "subtitle": "Connect messaging platforms to enable II-Claw to communicate across channels.",
+            "connected": "connected",
+            "status": {
+                "connected": "Connected",
+                "disconnected": "Disconnected"
+            },
+            "configure": "Configure",
+            "loading": "Loading channels...",
+            "error": "Could not load channels. Is the backend running?",
+            "setupSteps": "Setup steps",
+            "advanced": "Advanced",
+            "required": "Required",
+            "secret": "secret",
+            "commaSeparated": "Comma-separated values",
+            "saving": "Saving...",
+            "removing": "Removing...",
+            "disconnect": "Disconnect",
+            "connect": "Connect",
+            "update": "Update",
+            "agent": "Agent",
+            "selectAgent": "Select agent",
+            "builtinAgents": "Built-in",
+            "customAgents": "Custom",
+            "telegram": {
+                "displayName": "Telegram",
+                "description": "Telegram Bot API — long-polling adapter",
+                "quickSetup": "Paste your bot token from @BotFather",
+                "setupSteps": ["Open @BotFather on Telegram", "Send /newbot and follow the prompts", "Paste the token below"],
+                "fields": {
+                    "bot_token_env": "Bot Token",
+                    "allowed_users": "Allowed User IDs",
+                    "default_agent": "Default Agent",
+                    "poll_interval_secs": "Poll Interval (sec)"
+                }
+            },
+            "discord": {
+                "displayName": "Discord",
+                "description": "Discord Gateway bot adapter",
+                "quickSetup": "Paste your bot token from the Discord Developer Portal",
+                "setupSteps": ["Go to discord.com/developers/applications", "Create a bot and copy the token", "Paste it below"],
+                "fields": {
+                    "bot_token_env": "Bot Token",
+                    "allowed_guilds": "Allowed Guild IDs",
+                    "allowed_users": "Allowed User IDs",
+                    "default_agent": "Default Agent",
+                    "intents": "Intents Bitmask"
+                }
+            },
+            "slack": {
+                "displayName": "Slack",
+                "description": "Slack Socket Mode + Events API",
+                "quickSetup": "Paste your App Token and Bot Token from api.slack.com",
+                "setupSteps": ["Create app at api.slack.com/apps", "Enable Socket Mode and copy App Token", "Copy Bot Token from OAuth & Permissions"],
+                "fields": {
+                    "app_token_env": "App Token (xapp-)",
+                    "bot_token_env": "Bot Token (xoxb-)",
+                    "allowed_channels": "Allowed Channel IDs",
+                    "default_agent": "Default Agent"
+                }
+            }
+        },
+        "cronJobs": {
+            "title": "Cron Jobs",
+            "subtitle": "Schedule automated tasks and messages.",
+            "active": "active",
+            "create": "Create Job",
+            "creating": "Creating...",
+            "createJob": "Create Cron Job",
+            "createJobDesc": "Set up a scheduled task with a trigger and action.",
+            "jobName": "Job Name",
+            "label": "Label",
+            "oneShot": "One-shot (auto-delete after success)",
+            "oneShotBadge": "one-shot",
+            "schedule": "Schedule",
+            "action": "Action",
+            "history": "History",
+            "historyDesc": "Recent execution runs for this job.",
+            "noHistory": "No runs yet",
+            "noJobs": "No cron jobs configured",
+            "noJobsHint": "Click \"Create Job\" to schedule your first task",
+            "delete": "Delete",
+            "deleting": "Deleting...",
+            "confirmDeleteTitle": "Delete cron job?",
+            "confirmDeleteDesc": "Are you sure you want to delete \"{{name}}\"? This action cannot be undone.",
+            "nameRequired": "Job name is required",
+            "everyValue": "Run every",
+            "everyUnit": "Unit",
+            "units": {
+                "minutes": "Minutes",
+                "hours": "Hours",
+                "days": "Days"
+            },
+            "cronPreset": "Frequency",
+            "cronExpr": "Cron Expression",
+            "cronExprHint": "Format: minute hour day-of-month month day-of-week",
+            "cronPresets": {
+                "daily_9am": "Daily at 9:00 AM",
+                "daily_midnight": "Daily at midnight",
+                "daily_6pm": "Daily at 6:00 PM",
+                "weekdays_9am": "Weekdays at 9:00 AM",
+                "weekdays_6pm": "Weekdays at 6:00 PM",
+                "weekly_monday": "Every Monday at 9:00 AM",
+                "weekly_friday": "Every Friday at 5:00 PM",
+                "twice_daily": "Twice daily (9 AM & 6 PM)",
+                "every_6h": "Every 6 hours",
+                "monthly_first": "First of month at 9:00 AM",
+                "monthly_last_friday": "Last Friday of month at 5 PM",
+                "quarterly": "Quarterly (Jan, Apr, Jul, Oct 1st)",
+                "custom": "Custom expression"
+            },
+            "timezone": "Timezone",
+            "runAt": "Run At",
+            "scheduleTypes": {
+                "every": "Every",
+                "cron": "Cron",
+                "at": "One-Time"
+            },
+            "actionTypes": {
+                "channel_message": "Post Message",
+                "assistant_task": "AI Task"
+            },
+            "actionFields": {
+                "channelBot": "Channel / Bot",
+                "recipient": "Recipient",
+                "message": "Message",
+                "agentId": "Agent ID",
+                "context": "Prompt / Context"
+            },
+            "selectChannelBot": "Select a channel bot...",
+            "noChannelsConfigured": "No channels configured. Set up a channel first.",
+            "deliverTo": "Deliver AI response to",
+            "searchPlaceholder": "Search jobs...",
+            "noMatchingJobs": "No jobs match your filters",
+            "filters": {
+                "enabled": "Status",
+                "schedule": "Schedule",
+                "label": "Label",
+                "all": "All",
+                "enabledOnly": "Enabled",
+                "disabledOnly": "Disabled",
+                "clear": "Clear filters"
+            },
+            "edit": "Edit",
+            "editJob": "Edit Cron Job",
+            "editJobDesc": "Modify the schedule, action, or settings for this job.",
+            "save": "Save Changes",
+            "saving": "Saving...",
+            "testJob": "Test Job",
+            "testResult": "Test Result",
+            "testing": "Testing..."
+        }
     }
 }
diff --git a/frontend/src/i18n/locales/hi.json b/frontend/src/i18n/locales/hi.json
index 97b7c093b..d800c7db9 100644
--- a/frontend/src/i18n/locales/hi.json
+++ b/frontend/src/i18n/locales/hi.json
@@ -2543,5 +2543,238 @@
                 "unableToUpdate": "सीक्रेट्स अपडेट करने में असमर्थ"
             }
         }
+    },
+    "iiClaw": {
+        "title": "II-Claw",
+        "version": "II-Claw v0.1.0",
+        "agents": {
+            "title": "एजेंट्स",
+            "subtitle": "बिल्ट-इन एजेंट मोड चुनें या अपना कस्टम एजेंट बनाएं।",
+            "customCard": {
+                "title": "अपना एजेंट कस्टमाइज़ करें",
+                "description": "कस्टम प्रॉम्प्ट, टूल्स और मॉडल के साथ व्यक्तिगत एजेंट बनाएं"
+            },
+            "availableAgents": "उपलब्ध एजेंट्स",
+            "dialog": {
+                "createTitle": "कस्टम एजेंट बनाएं",
+                "editTitle": "एजेंट संपादित करें",
+                "stepOf": "चरण {{current}} / {{total}}",
+                "steps": {
+                    "identity": "पहचान और प्रॉम्प्ट",
+                    "model": "मॉडल चुनें",
+                    "tools": "टूल्स कॉन्फ़िगर करें",
+                    "skills": "स्किल्स और कनेक्टर्स"
+                },
+                "sidebar": {
+                    "title": "आपके एजेंट्स",
+                    "empty": "अभी तक कोई कस्टम एजेंट नहीं",
+                    "emptyHint": "अपना पहला एजेंट बनाएं",
+                    "noTag": "कोई टैग नहीं"
+                },
+                "placeholder": "संपादित करने के लिए एजेंट चुनें, या नया बनाने के लिए + क्लिक करें",
+                "fields": {
+                    "agentName": "एजेंट का नाम",
+                    "tag": "टैग",
+                    "tagPlaceholder": "उदा. research-ai",
+                    "systemPrompt": "सिस्टम प्रॉम्प्ट",
+                    "systemPromptPlaceholder": "एजेंट के लिए कस्टम निर्देश...",
+                    "systemPromptHint": "डिफ़ॉल्ट बेस प्रॉम्प्ट के लिए खाली छोड़ें।",
+                    "llmModel": "LLM मॉडल",
+                    "llmModelDefault": "डिफ़ॉल्ट (सेशन)",
+                    "llmModelHint": "एजेंट के लिए मॉडल चुनें। \"डिफ़ॉल्ट\" सेशन मॉडल का उपयोग करता है।",
+                    "toolsDescription": "इस एजेंट के लिए उपलब्ध टूल्स टॉगल करें।",
+                    "skillMode": "स्किल मोड",
+                    "connectorMode": "कनेक्टर मोड"
+                },
+                "skillModes": {
+                    "default": "डिफ़ॉल्ट",
+                    "customOnly": "केवल कस्टम",
+                    "defaultAndCustom": "डिफ़ॉल्ट + कस्टम"
+                },
+                "connectorModes": {
+                    "default": "डिफ़ॉल्ट",
+                    "customOnly": "केवल कस्टम",
+                    "defaultAndCustom": "डिफ़ॉल्ट + कस्टम"
+                },
+                "buttons": {
+                    "back": "पीछे",
+                    "next": "अगला",
+                    "create": "एजेंट बनाएं",
+                    "update": "एजेंट अपडेट करें",
+                    "saving": "सहेज रहा है...",
+                    "newAgent": "नया एजेंट"
+                },
+                "delete": {
+                    "title": "एजेंट हटाएं?",
+                    "description": "क्या आप वाकई इस एजेंट को हटाना चाहते हैं? यह क्रिया पूर्ववत नहीं की जा सकती।",
+                    "confirm": "हटाएं",
+                    "cancel": "रद्द करें"
+                }
+            },
+            "builtinAgents": {
+                "general": { "name": "सामान्य एजेंट", "description": "डिफ़ॉल्ट बहुउद्देशीय एजेंट" },
+                "fastResearch": { "name": "तेज़ रिसर्च एजेंट", "description": "त्वरित वेब खोज और सारांश" },
+                "deepResearch": { "name": "गहन रिसर्च एजेंट", "description": "उद्धरणों के साथ गहन शोध" },
+                "websiteBuilder": { "name": "वेबसाइट बिल्डर एजेंट", "description": "फुल-स्टैक वेब डेवलपमेंट" },
+                "mobileApp": { "name": "मोबाइल ऐप एजेंट", "description": "React Native मोबाइल डेवलपमेंट" },
+                "media": { "name": "मीडिया एजेंट", "description": "चित्र और वीडियो जनरेशन" },
+                "slide": { "name": "स्लाइड क्रिएटर एजेंट", "description": "प्रस्तुतियाँ बनाएं" },
+                "codex": { "name": "Codex एजेंट", "description": "OpenAI Codex कोड जनरेशन" },
+                "claudeCode": { "name": "Claude Code एजेंट", "description": "Claude स्वायत्त कोडिंग" }
+            }
+        },
+        "channels": {
+            "title": "चैनल",
+            "subtitle": "II-Claw को कई चैनलों पर संवाद करने के लिए मैसेजिंग प्लेटफ़ॉर्म कनेक्ट करें।",
+            "connected": "कनेक्टेड",
+            "status": {
+                "connected": "कनेक्टेड",
+                "disconnected": "डिस्कनेक्टेड"
+            },
+            "configure": "कॉन्फ़िगर करें",
+            "loading": "चैनल लोड हो रहे हैं...",
+            "error": "चैनल लोड नहीं हो सके। क्या बैकएंड चल रहा है?",
+            "setupSteps": "सेटअप चरण",
+            "advanced": "एडवांस्ड",
+            "required": "आवश्यक",
+            "secret": "सीक्रेट",
+            "commaSeparated": "कॉमा से अलग किए गए मान",
+            "saving": "सेव हो रहा है...",
+            "removing": "हटाया जा रहा है...",
+            "disconnect": "डिस्कनेक्ट",
+            "connect": "कनेक्ट",
+            "update": "अपडेट",
+            "agent": "एजेंट",
+            "selectAgent": "एजेंट चुनें",
+            "builtinAgents": "बिल्ट-इन",
+            "customAgents": "कस्टम",
+            "telegram": {
+                "displayName": "Telegram",
+                "description": "Telegram Bot API — लॉन्ग-पोलिंग एडेप्टर",
+                "quickSetup": "@BotFather से अपना बॉट टोकन पेस्ट करें",
+                "setupSteps": ["Telegram पर @BotFather खोलें", "/newbot भेजें और निर्देशों का पालन करें", "नीचे टोकन पेस्ट करें"],
+                "fields": {
+                    "bot_token_env": "बॉट टोकन",
+                    "allowed_users": "अनुमत यूज़र ID",
+                    "default_agent": "डिफ़ॉल्ट एजेंट",
+                    "poll_interval_secs": "पोल अंतराल (सेकंड)"
+                }
+            },
+            "discord": {
+                "displayName": "Discord",
+                "description": "Discord Gateway बॉट एडेप्टर",
+                "quickSetup": "Discord Developer Portal से अपना बॉट टोकन पेस्ट करें",
+                "setupSteps": ["discord.com/developers/applications पर जाएं", "बॉट बनाएं और टोकन कॉपी करें", "नीचे पेस्ट करें"],
+                "fields": {
+                    "bot_token_env": "बॉट टोकन",
+                    "allowed_guilds": "अनुमत गिल्ड ID",
+                    "allowed_users": "अनुमत यूज़र ID",
+                    "default_agent": "डिफ़ॉल्ट एजेंट",
+                    "intents": "इंटेंट्स बिटमास्क"
+                }
+            },
+            "slack": {
+                "displayName": "Slack",
+                "description": "Slack Socket Mode + Events API",
+                "quickSetup": "api.slack.com से अपना App Token और Bot Token पेस्ट करें",
+                "setupSteps": ["api.slack.com/apps पर ऐप बनाएं", "Socket Mode सक्षम करें और App Token कॉपी करें", "OAuth & Permissions से Bot Token कॉपी करें"],
+                "fields": {
+                    "app_token_env": "App Token (xapp-)",
+                    "bot_token_env": "Bot Token (xoxb-)",
+                    "allowed_channels": "अनुमत चैनल ID",
+                    "default_agent": "डिफ़ॉल्ट एजेंट"
+                }
+            }
+        },
+        "cronJobs": {
+            "title": "शेड्यूल्ड टास्क",
+            "subtitle": "स्वचालित कार्य और संदेश शेड्यूल करें।",
+            "active": "सक्रिय",
+            "create": "टास्क बनाएं",
+            "creating": "बना रहे हैं...",
+            "createJob": "शेड्यूल्ड टास्क बनाएं",
+            "createJobDesc": "ट्रिगर और एक्शन के साथ एक शेड्यूल्ड टास्क सेट करें।",
+            "jobName": "टास्क का नाम",
+            "label": "लेबल",
+            "oneShot": "एक बार (सफलता के बाद स्वतः हटाएं)",
+            "oneShotBadge": "एक बार",
+            "schedule": "शेड्यूल",
+            "action": "एक्शन",
+            "history": "इतिहास",
+            "historyDesc": "इस टास्क की हाल की रन हिस्ट्री।",
+            "noHistory": "अभी तक कोई रन नहीं",
+            "noJobs": "कोई शेड्यूल्ड टास्क कॉन्फ़िगर नहीं है",
+            "noJobsHint": "अपना पहला टास्क शेड्यूल करने के लिए \"टास्क बनाएं\" पर क्लिक करें",
+            "delete": "हटाएं",
+            "deleting": "हटा रहे हैं...",
+            "confirmDeleteTitle": "शेड्यूल्ड टास्क हटाएं?",
+            "confirmDeleteDesc": "क्या आप \"{{name}}\" को हटाना चाहते हैं? यह क्रिया वापस नहीं की जा सकती।",
+            "nameRequired": "टास्क का नाम आवश्यक है",
+            "everyValue": "हर",
+            "everyUnit": "इकाई",
+            "units": {
+                "minutes": "मिनट",
+                "hours": "घंटे",
+                "days": "दिन"
+            },
+            "cronPreset": "फ्रीक्वेंसी",
+            "cronExpr": "Cron एक्सप्रेशन",
+            "cronExprHint": "फॉर्मैट: मिनट घंटा दिन महीना सप्ताह-का-दिन",
+            "cronPresets": {
+                "daily_9am": "रोज़ सुबह 9:00 बजे",
+                "daily_midnight": "रोज़ आधी रात",
+                "daily_6pm": "रोज़ शाम 6:00 बजे",
+                "weekdays_9am": "कार्य दिवस सुबह 9:00 बजे",
+                "weekdays_6pm": "कार्य दिवस शाम 6:00 बजे",
+                "weekly_monday": "हर सोमवार सुबह 9:00 बजे",
+                "weekly_friday": "हर शुक्रवार शाम 5:00 बजे",
+                "twice_daily": "दिन में दो बार (सुबह 9 और शाम 6)",
+                "every_6h": "हर 6 घंटे",
+                "monthly_first": "हर महीने की 1 तारीख सुबह 9:00 बजे",
+                "monthly_last_friday": "महीने का आखिरी शुक्रवार शाम 5 बजे",
+                "quarterly": "तिमाही (जनवरी, अप्रैल, जुलाई, अक्टूबर 1)",
+                "custom": "कस्टम एक्सप्रेशन"
+            },
+            "timezone": "टाइमज़ोन",
+            "runAt": "चलाने का समय",
+            "scheduleTypes": {
+                "every": "नियमित",
+                "cron": "Cron",
+                "at": "एक बार"
+            },
+            "actionTypes": {
+                "channel_message": "संदेश भेजें",
+                "assistant_task": "AI टास्क"
+            },
+            "actionFields": {
+                "channelBot": "चैनल / Bot",
+                "recipient": "प्राप्तकर्ता",
+                "message": "संदेश",
+                "agentId": "एजेंट ID",
+                "context": "प्रॉम्प्ट / संदर्भ"
+            },
+            "selectChannelBot": "एक चैनल Bot चुनें...",
+            "noChannelsConfigured": "कोई चैनल कॉन्फ़िगर नहीं है। पहले एक चैनल सेट करें।",
+            "deliverTo": "AI प्रतिक्रिया भेजें",
+            "searchPlaceholder": "टास्क खोजें...",
+            "noMatchingJobs": "आपके फ़िल्टर से कोई टास्क मेल नहीं खाता",
+            "filters": {
+                "enabled": "स्थिति",
+                "schedule": "शेड्यूल",
+                "label": "लेबल",
+                "all": "सभी",
+                "enabledOnly": "सक्रिय",
+                "disabledOnly": "निष्क्रिय",
+                "clear": "फ़िल्टर साफ़ करें"
+            },
+            "edit": "संपादित करें",
+            "editJob": "शेड्यूल्ड टास्क संपादित करें",
+            "editJobDesc": "इस टास्क का शेड्यूल, एक्शन या सेटिंग बदलें।",
+            "save": "बदलाव सहेजें",
+            "saving": "सहेज रहे हैं...",
+            "testJob": "टेस्ट करें",
+            "testResult": "टेस्ट परिणाम",
+            "testing": "टेस्ट हो रहा है..."
+        }
     }
 }
diff --git a/frontend/src/i18n/locales/ja.json b/frontend/src/i18n/locales/ja.json
index daf3e123a..f6d8c565d 100644
--- a/frontend/src/i18n/locales/ja.json
+++ b/frontend/src/i18n/locales/ja.json
@@ -2543,5 +2543,238 @@
                 "unableToUpdate": "シークレットを更新できませんでした"
             }
         }
+    },
+    "iiClaw": {
+        "title": "II-Claw",
+        "version": "II-Claw v0.1.0",
+        "agents": {
+            "title": "エージェント",
+            "subtitle": "組み込みエージェントモードを選択するか、カスタムエージェントを作成してください。",
+            "customCard": {
+                "title": "エージェントをカスタマイズ",
+                "description": "カスタムプロンプト、ツール、モデルでパーソナライズされたエージェントを作成"
+            },
+            "availableAgents": "利用可能なエージェント",
+            "dialog": {
+                "createTitle": "カスタムエージェントを作成",
+                "editTitle": "エージェントを編集",
+                "stepOf": "ステップ {{current}} / {{total}}",
+                "steps": {
+                    "identity": "ID & プロンプト",
+                    "model": "モデル選択",
+                    "tools": "ツール設定",
+                    "skills": "スキル & コネクタ"
+                },
+                "sidebar": {
+                    "title": "あなたのエージェント",
+                    "empty": "カスタムエージェントはまだありません",
+                    "emptyHint": "最初のエージェントを作成してください",
+                    "noTag": "タグなし"
+                },
+                "placeholder": "編集するエージェントを選択するか、+をクリックして新規作成",
+                "fields": {
+                    "agentName": "エージェント名",
+                    "tag": "タグ",
+                    "tagPlaceholder": "例: research-ai",
+                    "systemPrompt": "システムプロンプト",
+                    "systemPromptPlaceholder": "エージェントへのカスタム指示...",
+                    "systemPromptHint": "空白の場合、デフォルトのベースプロンプトが使用されます。",
+                    "llmModel": "LLMモデル",
+                    "llmModelDefault": "デフォルト（セッション）",
+                    "llmModelHint": "エージェントが使用するモデルを選択してください。「デフォルト」はセッションのモデルを使用します。",
+                    "toolsDescription": "エージェントで使用するツールを切り替えます。",
+                    "skillMode": "スキルモード",
+                    "connectorMode": "コネクタモード"
+                },
+                "skillModes": {
+                    "default": "デフォルト",
+                    "customOnly": "カスタムのみ",
+                    "defaultAndCustom": "デフォルト + カスタム"
+                },
+                "connectorModes": {
+                    "default": "デフォルト",
+                    "customOnly": "カスタムのみ",
+                    "defaultAndCustom": "デフォルト + カスタム"
+                },
+                "buttons": {
+                    "back": "戻る",
+                    "next": "次へ",
+                    "create": "エージェントを作成",
+                    "update": "エージェントを更新",
+                    "saving": "保存中...",
+                    "newAgent": "新しいエージェント"
+                },
+                "delete": {
+                    "title": "エージェントを削除しますか？",
+                    "description": "このエージェントを削除してもよろしいですか？この操作は元に戻せません。",
+                    "confirm": "削除",
+                    "cancel": "キャンセル"
+                }
+            },
+            "builtinAgents": {
+                "general": { "name": "汎用エージェント", "description": "デフォルトの多目的エージェント" },
+                "fastResearch": { "name": "高速リサーチエージェント", "description": "ウェブ検索と要約" },
+                "deepResearch": { "name": "深層リサーチエージェント", "description": "引用付きの詳細な調査" },
+                "websiteBuilder": { "name": "ウェブサイトビルダーエージェント", "description": "フルスタックWeb開発" },
+                "mobileApp": { "name": "モバイルアプリエージェント", "description": "React Nativeモバイル開発" },
+                "media": { "name": "メディアエージェント", "description": "画像・動画生成" },
+                "slide": { "name": "スライド作成エージェント", "description": "プレゼンテーション作成" },
+                "codex": { "name": "Codexエージェント", "description": "OpenAI Codexによるコード生成" },
+                "claudeCode": { "name": "Claude Codeエージェント", "description": "Claudeによる自律コーディング" }
+            }
+        },
+        "channels": {
+            "title": "チャンネル",
+            "subtitle": "II-Clawが複数のチャンネルで通信できるよう、メッセージングプラットフォームを接続します。",
+            "connected": "接続済み",
+            "status": {
+                "connected": "接続済み",
+                "disconnected": "未接続"
+            },
+            "configure": "設定",
+            "loading": "チャンネルを読み込み中...",
+            "error": "チャンネルを読み込めませんでした。バックエンドは稼働していますか？",
+            "setupSteps": "セットアップ手順",
+            "advanced": "詳細設定",
+            "required": "必須",
+            "secret": "シークレット",
+            "commaSeparated": "カンマ区切りの値",
+            "saving": "保存中...",
+            "removing": "削除中...",
+            "disconnect": "切断",
+            "connect": "接続",
+            "update": "更新",
+            "agent": "エージェント",
+            "selectAgent": "エージェントを選択",
+            "builtinAgents": "ビルトイン",
+            "customAgents": "カスタム",
+            "telegram": {
+                "displayName": "Telegram",
+                "description": "Telegram Bot API — ロングポーリングアダプター",
+                "quickSetup": "@BotFatherからボットトークンを貼り付けてください",
+                "setupSteps": ["Telegramで@BotFatherを開く", "/newbotを送信し、指示に従う", "下にトークンを貼り付ける"],
+                "fields": {
+                    "bot_token_env": "ボットトークン",
+                    "allowed_users": "許可されたユーザーID",
+                    "default_agent": "デフォルトエージェント",
+                    "poll_interval_secs": "ポーリング間隔（秒）"
+                }
+            },
+            "discord": {
+                "displayName": "Discord",
+                "description": "Discord Gatewayボットアダプター",
+                "quickSetup": "Discord Developer Portalからボットトークンを貼り付けてください",
+                "setupSteps": ["discord.com/developers/applicationsにアクセス", "ボットを作成してトークンをコピー", "下に貼り付ける"],
+                "fields": {
+                    "bot_token_env": "ボットトークン",
+                    "allowed_guilds": "許可されたギルドID",
+                    "allowed_users": "許可されたユーザーID",
+                    "default_agent": "デフォルトエージェント",
+                    "intents": "インテントビットマスク"
+                }
+            },
+            "slack": {
+                "displayName": "Slack",
+                "description": "Slack Socket Mode + Events API",
+                "quickSetup": "api.slack.comからApp TokenとBot Tokenを貼り付けてください",
+                "setupSteps": ["api.slack.com/appsでアプリを作成", "Socket Modeを有効にしてApp Tokenをコピー", "OAuth & PermissionsからBot Tokenをコピー"],
+                "fields": {
+                    "app_token_env": "App Token (xapp-)",
+                    "bot_token_env": "Bot Token (xoxb-)",
+                    "allowed_channels": "許可されたチャンネルID",
+                    "default_agent": "デフォルトエージェント"
+                }
+            }
+        },
+        "cronJobs": {
+            "title": "定期タスク",
+            "subtitle": "自動タスクとメッセージをスケジュールします。",
+            "active": "アクティブ",
+            "create": "タスク作成",
+            "creating": "作成中...",
+            "createJob": "定期タスクを作成",
+            "createJobDesc": "トリガーとアクションを設定してスケジュールタスクを作成します。",
+            "jobName": "タスク名",
+            "label": "ラベル",
+            "oneShot": "ワンショット（成功後に自動削除）",
+            "oneShotBadge": "ワンショット",
+            "schedule": "スケジュール",
+            "action": "アクション",
+            "history": "履歴",
+            "historyDesc": "このタスクの最近の実行履歴です。",
+            "noHistory": "まだ実行履歴がありません",
+            "noJobs": "定期タスクが設定されていません",
+            "noJobsHint": "「タスク作成」をクリックして最初のタスクをスケジュールしてください",
+            "delete": "削除",
+            "deleting": "削除中...",
+            "confirmDeleteTitle": "定期タスクを削除しますか？",
+            "confirmDeleteDesc": "「{{name}}」を削除してもよろしいですか？この操作は元に戻せません。",
+            "nameRequired": "タスク名は必須です",
+            "everyValue": "間隔",
+            "everyUnit": "単位",
+            "units": {
+                "minutes": "分",
+                "hours": "時間",
+                "days": "日"
+            },
+            "cronPreset": "頻度",
+            "cronExpr": "Cron式",
+            "cronExprHint": "形式: 分 時 日 月 曜日",
+            "cronPresets": {
+                "daily_9am": "毎日午前9時",
+                "daily_midnight": "毎日深夜0時",
+                "daily_6pm": "毎日午後6時",
+                "weekdays_9am": "平日午前9時",
+                "weekdays_6pm": "平日午後6時",
+                "weekly_monday": "毎週月曜日午前9時",
+                "weekly_friday": "毎週金曜日午後5時",
+                "twice_daily": "1日2回（午前9時・午後6時）",
+                "every_6h": "6時間ごと",
+                "monthly_first": "毎月1日午前9時",
+                "monthly_last_friday": "毎月最終金曜日午後5時",
+                "quarterly": "四半期ごと（1月・4月・7月・10月1日）",
+                "custom": "カスタム式"
+            },
+            "timezone": "タイムゾーン",
+            "runAt": "実行日時",
+            "scheduleTypes": {
+                "every": "定期",
+                "cron": "Cron",
+                "at": "1回のみ"
+            },
+            "actionTypes": {
+                "channel_message": "メッセージ送信",
+                "assistant_task": "AIタスク"
+            },
+            "actionFields": {
+                "channelBot": "チャンネル / Bot",
+                "recipient": "宛先",
+                "message": "メッセージ",
+                "agentId": "エージェントID",
+                "context": "プロンプト / コンテキスト"
+            },
+            "selectChannelBot": "チャンネルBotを選択...",
+            "noChannelsConfigured": "チャンネルが設定されていません。先にチャンネルを設定してください。",
+            "deliverTo": "AI応答の送信先",
+            "searchPlaceholder": "タスクを検索...",
+            "noMatchingJobs": "フィルターに一致するタスクがありません",
+            "filters": {
+                "enabled": "状態",
+                "schedule": "スケジュール",
+                "label": "ラベル",
+                "all": "すべて",
+                "enabledOnly": "有効",
+                "disabledOnly": "無効",
+                "clear": "フィルターをクリア"
+            },
+            "edit": "編集",
+            "editJob": "定期タスクを編集",
+            "editJobDesc": "このタスクのスケジュール、アクション、設定を変更します。",
+            "save": "変更を保存",
+            "saving": "保存中...",
+            "testJob": "テスト実行",
+            "testResult": "テスト結果",
+            "testing": "テスト中..."
+        }
     }
 }
diff --git a/frontend/src/i18n/locales/vi.json b/frontend/src/i18n/locales/vi.json
index 04e3086c4..0b0eb376d 100644
--- a/frontend/src/i18n/locales/vi.json
+++ b/frontend/src/i18n/locales/vi.json
@@ -2603,5 +2603,238 @@
                 "unableToUpdate": "Không thể cập nhật secrets"
             }
         }
+    },
+    "iiClaw": {
+        "title": "II-Claw",
+        "version": "II-Claw v0.1.0",
+        "agents": {
+            "title": "Agents",
+            "subtitle": "Chọn chế độ agent có sẵn hoặc tạo agent tùy chỉnh của bạn.",
+            "customCard": {
+                "title": "Tùy chỉnh Agent",
+                "description": "Tạo agent cá nhân với prompt, công cụ & mô hình tùy chỉnh"
+            },
+            "availableAgents": "Agent có sẵn",
+            "dialog": {
+                "createTitle": "Tạo Agent tùy chỉnh",
+                "editTitle": "Chỉnh sửa Agent",
+                "stepOf": "Bước {{current}} / {{total}}",
+                "steps": {
+                    "identity": "Định danh & Prompt",
+                    "model": "Chọn mô hình",
+                    "tools": "Cấu hình công cụ",
+                    "skills": "Kỹ năng & Kết nối"
+                },
+                "sidebar": {
+                    "title": "Agent của bạn",
+                    "empty": "Chưa có agent tùy chỉnh",
+                    "emptyHint": "Tạo agent đầu tiên",
+                    "noTag": "Không có tag"
+                },
+                "placeholder": "Chọn agent để chỉnh sửa, hoặc nhấn + để tạo mới",
+                "fields": {
+                    "agentName": "Tên Agent",
+                    "tag": "Tag",
+                    "tagPlaceholder": "vd. research-ai",
+                    "systemPrompt": "System Prompt",
+                    "systemPromptPlaceholder": "Hướng dẫn tùy chỉnh cho agent...",
+                    "systemPromptHint": "Để trống để sử dụng prompt mặc định.",
+                    "llmModel": "Mô hình LLM",
+                    "llmModelDefault": "Mặc định (Phiên)",
+                    "llmModelHint": "Chọn mô hình agent sẽ sử dụng. \"Mặc định\" dùng mô hình của phiên hiện tại.",
+                    "toolsDescription": "Bật/tắt các công cụ cho agent này.",
+                    "skillMode": "Chế độ kỹ năng",
+                    "connectorMode": "Chế độ kết nối"
+                },
+                "skillModes": {
+                    "default": "Mặc định",
+                    "customOnly": "Tùy chỉnh",
+                    "defaultAndCustom": "Mặc định + Tùy chỉnh"
+                },
+                "connectorModes": {
+                    "default": "Mặc định",
+                    "customOnly": "Tùy chỉnh",
+                    "defaultAndCustom": "Mặc định + Tùy chỉnh"
+                },
+                "buttons": {
+                    "back": "Quay lại",
+                    "next": "Tiếp theo",
+                    "create": "Tạo Agent",
+                    "update": "Cập nhật Agent",
+                    "saving": "Đang lưu...",
+                    "newAgent": "Agent mới"
+                },
+                "delete": {
+                    "title": "Xóa agent?",
+                    "description": "Bạn có chắc muốn xóa agent này? Hành động này không thể hoàn tác.",
+                    "confirm": "Xóa",
+                    "cancel": "Hủy"
+                }
+            },
+            "builtinAgents": {
+                "general": { "name": "Agent Tổng hợp", "description": "Agent đa năng mặc định" },
+                "fastResearch": { "name": "Agent Nghiên cứu Nhanh", "description": "Tìm kiếm web nhanh & tóm tắt" },
+                "deepResearch": { "name": "Agent Nghiên cứu Sâu", "description": "Nghiên cứu chuyên sâu với trích dẫn" },
+                "websiteBuilder": { "name": "Agent Xây dựng Website", "description": "Phát triển web full-stack" },
+                "mobileApp": { "name": "Agent Ứng dụng Di động", "description": "Phát triển React Native" },
+                "media": { "name": "Agent Media", "description": "Tạo hình ảnh & video" },
+                "slide": { "name": "Agent Tạo Slide", "description": "Tạo bài thuyết trình" },
+                "codex": { "name": "Agent Codex", "description": "Tạo mã với OpenAI Codex" },
+                "claudeCode": { "name": "Agent Claude Code", "description": "Lập trình tự động với Claude" }
+            }
+        },
+        "channels": {
+            "title": "Kênh",
+            "subtitle": "Kết nối các nền tảng nhắn tin để II-Claw giao tiếp đa kênh.",
+            "connected": "đã kết nối",
+            "status": {
+                "connected": "Đã kết nối",
+                "disconnected": "Chưa kết nối"
+            },
+            "configure": "Cấu hình",
+            "loading": "Đang tải kênh...",
+            "error": "Không thể tải kênh. Backend đang chạy chưa?",
+            "setupSteps": "Các bước thiết lập",
+            "advanced": "Nâng cao",
+            "required": "Bắt buộc",
+            "secret": "bí mật",
+            "commaSeparated": "Các giá trị phân cách bằng dấu phẩy",
+            "saving": "Đang lưu...",
+            "removing": "Đang xóa...",
+            "disconnect": "Ngắt kết nối",
+            "connect": "Kết nối",
+            "update": "Cập nhật",
+            "agent": "Agent",
+            "selectAgent": "Chọn agent",
+            "builtinAgents": "Có sẵn",
+            "customAgents": "Tùy chỉnh",
+            "telegram": {
+                "displayName": "Telegram",
+                "description": "Telegram Bot API — bộ điều hợp long-polling",
+                "quickSetup": "Dán token bot từ @BotFather",
+                "setupSteps": ["Mở @BotFather trên Telegram", "Gửi /newbot và làm theo hướng dẫn", "Dán token bên dưới"],
+                "fields": {
+                    "bot_token_env": "Token Bot",
+                    "allowed_users": "ID người dùng được phép",
+                    "default_agent": "Agent mặc định",
+                    "poll_interval_secs": "Chu kỳ poll (giây)"
+                }
+            },
+            "discord": {
+                "displayName": "Discord",
+                "description": "Bộ điều hợp bot Discord Gateway",
+                "quickSetup": "Dán token bot từ Discord Developer Portal",
+                "setupSteps": ["Truy cập discord.com/developers/applications", "Tạo bot và sao chép token", "Dán bên dưới"],
+                "fields": {
+                    "bot_token_env": "Token Bot",
+                    "allowed_guilds": "ID Guild được phép",
+                    "allowed_users": "ID người dùng được phép",
+                    "default_agent": "Agent mặc định",
+                    "intents": "Bitmask Intent"
+                }
+            },
+            "slack": {
+                "displayName": "Slack",
+                "description": "Slack Socket Mode + Events API",
+                "quickSetup": "Dán App Token và Bot Token từ api.slack.com",
+                "setupSteps": ["Tạo app tại api.slack.com/apps", "Bật Socket Mode và sao chép App Token", "Sao chép Bot Token từ OAuth & Permissions"],
+                "fields": {
+                    "app_token_env": "App Token (xapp-)",
+                    "bot_token_env": "Bot Token (xoxb-)",
+                    "allowed_channels": "ID kênh được phép",
+                    "default_agent": "Agent mặc định"
+                }
+            }
+        },
+        "cronJobs": {
+            "title": "Tác vụ định kỳ",
+            "subtitle": "Lên lịch các tác vụ và tin nhắn tự động.",
+            "active": "đang hoạt động",
+            "create": "Tạo tác vụ",
+            "creating": "Đang tạo...",
+            "createJob": "Tạo tác vụ định kỳ",
+            "createJobDesc": "Thiết lập tác vụ theo lịch với điều kiện kích hoạt và hành động.",
+            "jobName": "Tên tác vụ",
+            "label": "Nhãn",
+            "oneShot": "Chạy một lần (tự xóa sau khi thành công)",
+            "oneShotBadge": "một lần",
+            "schedule": "Lịch trình",
+            "action": "Hành động",
+            "history": "Lịch sử",
+            "historyDesc": "Các lần chạy gần đây của tác vụ này.",
+            "noHistory": "Chưa có lần chạy nào",
+            "noJobs": "Chưa có tác vụ định kỳ nào",
+            "noJobsHint": "Nhấn \"Tạo tác vụ\" để lên lịch tác vụ đầu tiên",
+            "delete": "Xóa",
+            "deleting": "Đang xóa...",
+            "confirmDeleteTitle": "Xóa tác vụ định kỳ?",
+            "confirmDeleteDesc": "Bạn có chắc muốn xóa \"{{name}}\"? Hành động này không thể hoàn tác.",
+            "nameRequired": "Tên tác vụ là bắt buộc",
+            "everyValue": "Chạy mỗi",
+            "everyUnit": "Đơn vị",
+            "units": {
+                "minutes": "Phút",
+                "hours": "Giờ",
+                "days": "Ngày"
+            },
+            "cronPreset": "Tần suất",
+            "cronExpr": "Biểu thức Cron",
+            "cronExprHint": "Định dạng: phút giờ ngày-trong-tháng tháng ngày-trong-tuần",
+            "cronPresets": {
+                "daily_9am": "Hàng ngày lúc 9:00 sáng",
+                "daily_midnight": "Hàng ngày lúc nửa đêm",
+                "daily_6pm": "Hàng ngày lúc 6:00 chiều",
+                "weekdays_9am": "Ngày thường lúc 9:00 sáng",
+                "weekdays_6pm": "Ngày thường lúc 6:00 chiều",
+                "weekly_monday": "Thứ Hai hàng tuần lúc 9:00 sáng",
+                "weekly_friday": "Thứ Sáu hàng tuần lúc 5:00 chiều",
+                "twice_daily": "Hai lần/ngày (9 sáng & 6 chiều)",
+                "every_6h": "Mỗi 6 giờ",
+                "monthly_first": "Ngày đầu tháng lúc 9:00 sáng",
+                "monthly_last_friday": "Thứ Sáu cuối tháng lúc 5 chiều",
+                "quarterly": "Hàng quý (1 Tháng 1, 4, 7, 10)",
+                "custom": "Biểu thức tùy chỉnh"
+            },
+            "timezone": "Múi giờ",
+            "runAt": "Chạy lúc",
+            "scheduleTypes": {
+                "every": "Định kỳ",
+                "cron": "Cron",
+                "at": "Một lần"
+            },
+            "actionTypes": {
+                "channel_message": "Gửi tin nhắn",
+                "assistant_task": "Tác vụ AI"
+            },
+            "actionFields": {
+                "channelBot": "Kênh / Bot",
+                "recipient": "Người nhận",
+                "message": "Tin nhắn",
+                "agentId": "ID Agent",
+                "context": "Prompt / Ngữ cảnh"
+            },
+            "selectChannelBot": "Chọn một kênh bot...",
+            "noChannelsConfigured": "Chưa có kênh nào. Hãy thiết lập kênh trước.",
+            "deliverTo": "Gửi phản hồi AI đến",
+            "searchPlaceholder": "Tìm tác vụ...",
+            "noMatchingJobs": "Không có tác vụ nào phù hợp với bộ lọc",
+            "filters": {
+                "enabled": "Trạng thái",
+                "schedule": "Lịch trình",
+                "label": "Nhãn",
+                "all": "Tất cả",
+                "enabledOnly": "Đang bật",
+                "disabledOnly": "Đang tắt",
+                "clear": "Xóa bộ lọc"
+            },
+            "edit": "Sửa",
+            "editJob": "Sửa tác vụ định kỳ",
+            "editJobDesc": "Thay đổi lịch trình, hành động hoặc cài đặt của tác vụ này.",
+            "save": "Lưu thay đổi",
+            "saving": "Đang lưu...",
+            "testJob": "Thử nghiệm",
+            "testResult": "Kết quả thử nghiệm",
+            "testing": "Đang thử..."
+        }
     }
 }
diff --git a/frontend/src/services/ii-claw.service.ts b/frontend/src/services/ii-claw.service.ts
new file mode 100644
index 000000000..92ef33b3f
--- /dev/null
+++ b/frontend/src/services/ii-claw.service.ts
@@ -0,0 +1,430 @@
+import axiosInstance from '@/lib/axios'
+
+export interface ChannelField {
+    key: string
+    label: string
+    type: 'secret' | 'text' | 'number' | 'list' | 'boolean'
+    env_var: string | null
+    required: boolean
+    has_value: boolean
+    placeholder: string
+    advanced: boolean
+}
+
+export interface Channel {
+    name: string
+    display_name: string
+    icon: string
+    description: string
+    category: string
+    difficulty: string
+    setup_time: string
+    quick_setup: string
+    setup_type: string
+    configured: boolean
+    has_token: boolean
+    fields: ChannelField[]
+    setup_steps: string[]
+    config_template: string
+}
+
+export interface ListChannelsResponse {
+    source: string
+    channels: Channel[]
+    total: number
+    configured_count: number
+}
+
+export interface ConfigureChannelRequest {
+    fields: Record<string, string>
+    register_webhook?: boolean
+}
+
+export interface UserChannelConfigureRequest {
+    channel_type: string
+    instance_name?: string  // Display name, defaults to instance_name_id
+    fields: Record<string, string | number | boolean | string[]>
+    agent_id?: string
+    register_webhook?: boolean
+}
+
+export interface UserChannelUpdateRequest {
+    instance_name?: string  // Rename display name
+    enabled?: boolean
+    fields?: Record<string, string | number | boolean | string[]>
+    agent_id?: string
+}
+
+export interface UserChannelConfigureResponse {
+    source: string
+    result: unknown
+    status: number
+    webhook: string | null
+    channel_type: string
+    instance_name_id: string
+    user_id: string
+}
+
+export interface UserChannelUpdateResponse {
+    source: string
+    result: unknown
+    status: number
+    instance_name_id: string
+    user_id: string
+}
+
+export interface UserChannelInstance {
+    instance_name_id: string  // Immutable slug ID (e.g. "my_agent_1")
+    instance_name: string     // Display name (e.g. "My Agent 1")
+    channel_type: string
+    status: string
+    config_json: Record<string, unknown>
+    enabled: boolean
+    agent_id: string
+    created_at: string
+    id: string
+}
+
+export interface ListUserChannelsResponse {
+    source: string
+    channels: UserChannelInstance[]
+}
+
+export interface ConfigureChannelResponse {
+    source: string
+    result: unknown
+    status: number
+    webhook: string | null
+}
+
+export interface RemoveChannelResponse {
+    source: string
+    result: unknown
+    status: number
+    webhook: string | null
+}
+
+class IIClawService {
+    async listChannels(): Promise<ListChannelsResponse> {
+        const response =
+            await axiosInstance.get<ListChannelsResponse>('/ii-claw/channels/')
+        return response.data
+    }
+
+    async getChannel(name: string): Promise<{ source: string; channel: Channel }> {
+        const response = await axiosInstance.get<{
+            source: string
+            channel: Channel
+        }>(`/ii-claw/channels/${name}`)
+        return response.data
+    }
+
+    async configureChannel(
+        name: string,
+        req: ConfigureChannelRequest
+    ): Promise<ConfigureChannelResponse> {
+        const response = await axiosInstance.post<ConfigureChannelResponse>(
+            `/ii-claw/channels/${name}/configure`,
+            req
+        )
+        return response.data
+    }
+
+    async removeChannel(name: string): Promise<RemoveChannelResponse> {
+        const response = await axiosInstance.delete<RemoveChannelResponse>(
+            `/ii-claw/channels/${name}/configure`
+        )
+        return response.data
+    }
+
+    async listUserChannels(
+        userId: string,
+        channelType?: string
+    ): Promise<UserChannelInstance[]> {
+        const params = channelType ? { channel_type: channelType } : undefined
+        const response = await axiosInstance.get<ListUserChannelsResponse>(
+            `/ii-claw/users/${userId}/channels`,
+            { params }
+        )
+        return response.data.channels ?? []
+    }
+
+    async removeUserChannel(
+        userId: string,
+        instanceNameId: string
+    ): Promise<RemoveChannelResponse> {
+        const response = await axiosInstance.delete<RemoveChannelResponse>(
+            `/ii-claw/users/${userId}/channels/${instanceNameId}`
+        )
+        return response.data
+    }
+
+    async configureUserChannel(
+        userId: string,
+        instanceNameId: string,
+        req: UserChannelConfigureRequest
+    ): Promise<UserChannelConfigureResponse> {
+        const response = await axiosInstance.post<UserChannelConfigureResponse>(
+            `/ii-claw/users/${userId}/channels/${instanceNameId}/configure`,
+            req
+        )
+        return response.data
+    }
+
+    async updateUserChannel(
+        userId: string,
+        instanceNameId: string,
+        req: UserChannelUpdateRequest
+    ): Promise<UserChannelUpdateResponse> {
+        const response = await axiosInstance.put<UserChannelUpdateResponse>(
+            `/ii-claw/users/${userId}/channels/${instanceNameId}`,
+            req
+        )
+        return response.data
+    }
+
+    // -----------------------------------------------------------------------
+    // Cron Jobs
+    // -----------------------------------------------------------------------
+
+    async listCronJobs(userId: string, label?: string): Promise<CronJob[]> {
+        const params = label ? { label } : undefined
+        const response = await axiosInstance.get<ListCronJobsResponse>(
+            `/ii-claw/users/${userId}/cron/jobs`,
+            { params }
+        )
+        return response.data.jobs ?? []
+    }
+
+    async createCronJob(userId: string, req: CronJobCreateRequest): Promise<unknown> {
+        const response = await axiosInstance.post(
+            `/ii-claw/users/${userId}/cron/jobs`,
+            req
+        )
+        return response.data
+    }
+
+    async deleteCronJob(userId: string, jobId: string): Promise<unknown> {
+        const response = await axiosInstance.delete(
+            `/ii-claw/users/${userId}/cron/jobs/${jobId}`
+        )
+        return response.data
+    }
+
+    async toggleCronJob(userId: string, jobId: string, enabled: boolean): Promise<unknown> {
+        const response = await axiosInstance.put(
+            `/ii-claw/users/${userId}/cron/jobs/${jobId}/enable`,
+            { enabled }
+        )
+        return response.data
+    }
+
+    async getCronJobHistory(userId: string, jobId: string, limit = 20): Promise<CronJobRun[]> {
+        const response = await axiosInstance.get<ListCronRunsResponse>(
+            `/ii-claw/users/${userId}/cron/jobs/${jobId}/history`,
+            { params: { limit } }
+        )
+        return response.data.runs ?? []
+    }
+
+    async getAllCronHistory(userId: string, limit = 50): Promise<CronJobRun[]> {
+        const response = await axiosInstance.get<ListCronRunsResponse>(
+            `/ii-claw/users/${userId}/cron/history`,
+            { params: { limit } }
+        )
+        return response.data.runs ?? []
+    }
+
+    async updateCronJob(userId: string, jobId: string, req: CronJobUpdateRequest): Promise<unknown> {
+        const response = await axiosInstance.put(
+            `/ii-claw/users/${userId}/cron/jobs/${jobId}`,
+            req
+        )
+        return response.data
+    }
+
+    async testCronJob(userId: string, jobId: string): Promise<CronJobTestResponse> {
+        const response = await axiosInstance.post<CronJobTestResponse>(
+            `/ii-claw/users/${userId}/cron/jobs/${jobId}/test`
+        )
+        return response.data
+    }
+
+    // -----------------------------------------------------------------------
+    // User Agents (Custom Agents)
+    // -----------------------------------------------------------------------
+
+    async listUserAgents(activeOnly = false): Promise<UserAgent[]> {
+        const params = activeOnly ? { active_only: true } : undefined
+        const response = await axiosInstance.get<ListUserAgentsResponse>(
+            '/ii-claw/agents',
+            { params }
+        )
+        return response.data.agents ?? []
+    }
+
+    async getUserAgent(agentId: string): Promise<UserAgent> {
+        const response = await axiosInstance.get<UserAgent>(
+            `/ii-claw/agents/${agentId}`
+        )
+        return response.data
+    }
+
+    async createUserAgent(req: UserAgentCreateRequest): Promise<UserAgent> {
+        const response = await axiosInstance.post<UserAgent>(
+            '/ii-claw/agents',
+            req
+        )
+        return response.data
+    }
+
+    async updateUserAgent(agentId: string, req: UserAgentUpdateRequest): Promise<UserAgent> {
+        const response = await axiosInstance.put<UserAgent>(
+            `/ii-claw/agents/${agentId}`,
+            req
+        )
+        return response.data
+    }
+
+    async deleteUserAgent(agentId: string): Promise<{ success: boolean; message: string }> {
+        const response = await axiosInstance.delete<{ success: boolean; message: string }>(
+            `/ii-claw/agents/${agentId}`
+        )
+        return response.data
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Cron Jobs — Types
+// ---------------------------------------------------------------------------
+
+export interface CronJob {
+    id: string
+    name: string
+    label: string | null
+    enabled: boolean
+    schedule_type: string
+    schedule: Record<string, unknown>
+    action_type: string
+    action: Record<string, unknown>
+    one_shot: boolean
+    channel_type: Record<string, unknown> | null
+    metadata: Record<string, unknown> | null
+    created_at: string
+    updated_at: string
+}
+
+export interface CronJobCreateRequest {
+    name: string
+    label?: string
+    one_shot?: boolean
+    schedule: Record<string, unknown>
+    action: Record<string, unknown>
+    channel_type?: Record<string, unknown>
+    metadata?: Record<string, unknown>
+}
+
+export interface CronJobUpdateRequest {
+    name: string
+    label?: string
+    enabled?: boolean
+    one_shot?: boolean
+    schedule: Record<string, unknown>
+    action: Record<string, unknown>
+    channel_type?: Record<string, unknown>
+    metadata?: Record<string, unknown>
+}
+
+export interface CronJobTestResponse {
+    source: string
+    result: {
+        status: string
+        id: string
+        name?: string
+        action_type?: string
+        message?: string
+        error?: string
+        enabled?: boolean
+    }
+    status: number
+}
+
+export interface CronJobRun {
+    id: string
+    job_id: string
+    status: 'running' | 'ok' | 'error' | 'timeout'
+    started_at: string
+    finished_at: string | null
+    duration_ms: number | null
+    error_message: string | null
+    action_type: string
+    schedule_type: string
+    metadata: Record<string, unknown> | null
+}
+
+export interface ListCronJobsResponse {
+    source: string
+    jobs: CronJob[]
+    total: number
+}
+
+export interface ListCronRunsResponse {
+    source: string
+    runs: CronJobRun[]
+    total: number
+}
+
+// ---------------------------------------------------------------------------
+// User Agents — Types
+// ---------------------------------------------------------------------------
+
+export interface UserAgent {
+    id: string
+    agent_name: string
+    tag: string | null
+    model_id: string | null
+    system_prompt: string | null
+    tool_args: Record<string, unknown> | null
+    skill_mode: string | null
+    connector_mode: string | null
+    skill_config: Record<string, unknown> | null
+    connector_config: Record<string, unknown> | null
+    metadata: Record<string, unknown> | null
+    is_active: boolean
+    created_at: string
+    updated_at: string | null
+}
+
+export interface UserAgentCreateRequest {
+    agent_name: string
+    tag?: string
+    model_id?: string
+    system_prompt?: string
+    tool_args?: Record<string, unknown>
+    skill_mode?: string
+    connector_mode?: string
+    skill_config?: Record<string, unknown>
+    connector_config?: Record<string, unknown>
+    metadata?: Record<string, unknown>
+}
+
+export interface UserAgentUpdateRequest {
+    agent_name?: string
+    tag?: string
+    model_id?: string
+    system_prompt?: string
+    tool_args?: Record<string, unknown>
+    skill_mode?: string
+    connector_mode?: string
+    skill_config?: Record<string, unknown>
+    connector_config?: Record<string, unknown>
+    metadata?: Record<string, unknown>
+    is_active?: boolean
+}
+
+export interface ListUserAgentsResponse {
+    agents: UserAgent[]
+    total: number
+}
+
+export const iiClawService = new IIClawService()
diff --git a/migrations/versions/20260404_000000_add_user_agents_table.py b/migrations/versions/20260404_000000_add_user_agents_table.py
new file mode 100644
index 000000000..4dc46d5e9
--- /dev/null
+++ b/migrations/versions/20260404_000000_add_user_agents_table.py
@@ -0,0 +1,81 @@
+"""Add user_agents table for custom agent configurations.
+
+Revision ID: 20260404_000000
+Revises: 20260402_000002
+Create Date: 2026-04-04
+"""
+
+from alembic import op
+import sqlalchemy as sa
+from sqlalchemy.dialects.postgresql import JSONB, UUID
+
+# revision identifiers, used by Alembic.
+revision = "20260404_000000"
+down_revision = "20260402_000002"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    """Create user_agents table."""
+    op.create_table(
+        "user_agents",
+        # PK: UUID matching Base convention
+        sa.Column(
+            "id",
+            UUID(as_uuid=True),
+            server_default=sa.text("gen_random_uuid()"),
+            nullable=False,
+        ),
+        # FK: UUID matching users.id type
+        sa.Column(
+            "user_id",
+            UUID(as_uuid=True),
+            sa.ForeignKey("users.id", ondelete="CASCADE"),
+            nullable=False,
+        ),
+        # Identity
+        sa.Column("agent_name", sa.String(128), nullable=False),
+        sa.Column("tag", sa.String(64), nullable=True),
+        # Model preference
+        sa.Column("model_id", sa.String(), nullable=True),
+        # System prompt
+        sa.Column("system_prompt", sa.Text(), nullable=True),
+        # Tool toggles (JSONB)
+        sa.Column("tool_args", JSONB(), nullable=True),
+        # Skill / connector modes
+        sa.Column("skill_mode", sa.String(), nullable=True, server_default="default"),
+        sa.Column("connector_mode", sa.String(), nullable=True, server_default="default"),
+        # Flexible JSONB bags
+        sa.Column("skill_config", JSONB(), nullable=True),
+        sa.Column("connector_config", JSONB(), nullable=True),
+        sa.Column("metadata", JSONB(), nullable=True),
+        # Status
+        sa.Column("is_active", sa.Boolean(), nullable=True, server_default=sa.text("true")),
+        # Timestamps: DateTime(timezone=True) matching TimestampColumn
+        sa.Column(
+            "created_at",
+            sa.DateTime(timezone=True),
+            server_default=sa.func.now(),
+            nullable=True,
+        ),
+        sa.Column(
+            "updated_at",
+            sa.DateTime(timezone=True),
+            server_default=sa.func.now(),
+            nullable=True,
+        ),
+        sa.PrimaryKeyConstraint("id"),
+        sa.UniqueConstraint("user_id", "agent_name", name="uq_user_agents_user_name"),
+    )
+
+    # Indexes
+    op.create_index("idx_user_agents_user_id", "user_agents", ["user_id"])
+    op.create_index("idx_user_agents_active", "user_agents", ["user_id", "is_active"])
+
+
+def downgrade() -> None:
+    """Drop user_agents table."""
+    op.drop_index("idx_user_agents_active", table_name="user_agents")
+    op.drop_index("idx_user_agents_user_id", table_name="user_agents")
+    op.drop_table("user_agents")
diff --git a/src/ii_agent/agents/factory/tools.py b/src/ii_agent/agents/factory/tools.py
index 946a2794e..8fd5c8be7 100644
--- a/src/ii_agent/agents/factory/tools.py
+++ b/src/ii_agent/agents/factory/tools.py
@@ -124,6 +124,7 @@ class AgentType(str, Enum):
     FAST_RESEARCH = "fast_research"
     RESEARCH_TO_WEBSITE = "research_to_website"
     MOBILE_APP = "mobile_app"
+    CUSTOM = "custom"
 
 
 @dataclass
@@ -535,6 +536,54 @@ class AgentConfig:
         max_turns=200,
         supports_media=True,
     ),
+    AgentType.CUSTOM: AgentConfig(
+        agent_type=AgentType.CUSTOM,
+        description="Custom agent with user-defined behavior",
+        tool_config=AgentToolConfig(
+            core_tools=[
+                ShellRunCommand.name,
+                ShellView.name,
+                ShellList.name,
+                FileReadTool.name,
+                FileWriteTool.name,
+                FileEditTool.name,
+                WebSearchTool.name,
+                WebVisitTool.name,
+                ImageSearchTool.name,
+                # Dev tools
+                FullStackInitTool.name,
+                RestartServerTool.name,
+                AddUserEnvTool.name,
+                AskUserEnvTool.name,
+                GetServerStatusTool.name,
+                SaveCheckpointTool.name,
+                # SaveCheckpointTool.name,
+                # Productivity
+                TodoWriteTool.name,
+                SendUserFile.name,
+            ],
+            model_exclusions={
+                Provider.OPENAI: [
+                    FileWriteTool.name,
+                    FileEditTool.name,
+                    ShellList.name,
+                    ShellWriteToProcessTool.name,
+                ],
+                Provider.ANTHROPIC: [
+                    FileWriteTool.name,
+                    FileEditTool.name,
+                    ShellList.name,
+                    ShellWriteToProcessTool.name,
+                ],
+            },
+            model_additions={
+                Provider.OPENAI: [ApplyPatchTool.name],
+                Provider.ANTHROPIC: [StrReplaceEditorTool.name],
+            },
+        ),
+        supports_media=True,
+        supports_design_doc=True,
+    ),
 }
 
 
diff --git a/src/ii_agent/agents/prompts/agent_prompts.py b/src/ii_agent/agents/prompts/agent_prompts.py
index 67255f477..6f5851a9c 100644
--- a/src/ii_agent/agents/prompts/agent_prompts.py
+++ b/src/ii_agent/agents/prompts/agent_prompts.py
@@ -193,6 +193,61 @@ def get_base_prompt_template() -> str:
 {specialized_instructions}
 """
 
+def get_custom_agent_base_prompt() -> str:
+    """Get a simplified base prompt for CUSTOM agent type.
+
+    This is a streamlined version of get_base_prompt_template() that removes
+    tool-specific rules (media, browser, shell, UI/UX) so users can provide
+    their own system prompt on top of it.
+    """
+    return """\
+You are II Agent, an advanced AI assistant engineered by the II team. You operate on a real computer system with access to tools and resources.
+Workspace: /workspace
+Operating System: {platform}
+Today: {today}
+
+# INTRODUCTION AND OVERVIEW
+<intro>
+You excel at the following tasks:
+1. Information gathering, conducting research, fact-checking, and documentation
+2. Data processing, analysis, and visualization
+3. Writing multi-chapter articles and in-depth research reports
+4. Creating websites, applications, and tools
+5. Using programming to solve various problems beyond development
+6. Various tasks that can be accomplished using computers and the internet
+</intro>
+
+<system_capability>
+- Access a Linux sandbox environment with internet connection
+- Use shell and text editor
+- Write and run code in Python / TypeScript and various programming languages
+- Independently install required software packages and dependencies via shell
+- Utilize various tools to complete user-assigned tasks step by step
+- Engage in multi-turn conversation with user
+- Leveraging conversation history to complete the current task accurately and efficiently
+</system_capability>
+
+# OPERATING MODE
+
+<event_stream>
+You will be provided with a chronological event stream containing the following types of events:
+1. Message: Messages input by actual users
+2. Action: Tool use (function calling) actions
+3. Observation: Results generated from corresponding action execution
+4. Plan: Task step planning and status update provide by TodoWrite tool
+5. Knowledge: Task-related knowledge and best practices provided by the Knowledge module
+6. Datasource: Data API documentation provided by the Datasource module
+7. Other miscellaneous events generated during system operation
+</event_stream>
+
+<task_management>
+You have access to the TodoWrite tool to help you manage and plan tasks. Use this tool frequently to ensure that you are tracking your tasks and giving the user visibility into your progress.
+It is critical that you mark todos as completed as soon as you are done with a task.
+</task_management>
+
+{specialized_instructions}
+"""
+
 
 def get_slide_nano_banana_prompt_template() -> str:
     """Get the prompt template for the slide nano banana agent."""
diff --git a/src/ii_agent/agents/types.py b/src/ii_agent/agents/types.py
index 5b876addd..ada8c63b9 100644
--- a/src/ii_agent/agents/types.py
+++ b/src/ii_agent/agents/types.py
@@ -30,6 +30,7 @@ class AgentType(StrEnum):
     FAST_RESEARCH = "fast_research"
     RESEARCH_TO_WEBSITE = "research_to_website"
     MOBILE_APP = "mobile_app"
+    CUSTOM = "custom"
 
 
 __all__ = ["AgentType"]
diff --git a/src/ii_agent/app/routers.py b/src/ii_agent/app/routers.py
index 4dcd564ea..60afdafb9 100644
--- a/src/ii_agent/app/routers.py
+++ b/src/ii_agent/app/routers.py
@@ -29,6 +29,8 @@ def include_routers(app: FastAPI) -> None:
     from ii_agent.sessions.router import router as sessions_router
     from ii_agent.sessions.router import public_router as sessions_public_router
     from ii_agent.settings.router import router as settings_router
+    from ii_agent.ii_claw.api.router import router as ii_claw_router
+    from ii_agent.ii_claw.api.user_agent_router import router as ii_claw_agents_router
 
     # ── Root-level routes (no /v1 prefix) ────────────────────────────────
     app.include_router(health_router)
@@ -57,6 +59,10 @@ def include_routers(app: FastAPI) -> None:
 
     app.include_router(v1_router)
 
+    # ── II-Claw routes (root level, no /v1 prefix) ──────────────────────
+    app.include_router(ii_claw_router)  # /ii-claw (channels, cron, webhook)
+    app.include_router(ii_claw_agents_router)  # /ii-claw/agents (custom agents CRUD)
+
     # ── Public API routes (/v1/public) ───────────────────────────────────
     v1_public_router = APIRouter(prefix="/v1/public")
 
diff --git a/src/ii_agent/core/config/settings.py b/src/ii_agent/core/config/settings.py
index ccb52438f..4a14fb21a 100644
--- a/src/ii_agent/core/config/settings.py
+++ b/src/ii_agent/core/config/settings.py
@@ -230,6 +230,21 @@ class Settings(BaseSettings):
         description="OAuth Redirect URI for Composio toolkit integration",
     )
 
+    # ========== II-Claw Configuration ==========
+    ii_claw_client_url: str = Field(
+        default="http://localhost:4200"
+    )
+
+    ii_claw_client_api_key: str = Field(
+        default="5c3e2f56de9411068f675ef32ffa12735210b9cbfee2ba521367a3955334a343", # terminal: echo -n "message" | openssl dgst -sha256 -hmac "secretkey"
+        description="API key for authenticating with II-Claw Rust backend (sent as Bearer token)",
+    )
+    
+    ii_claw_webhook_secret: str = Field(
+        default="ii-claw-webhook-secret",
+        description="Secret for verifying incoming webhooks from II-Claw (set to enable webhook verification)",
+    )
+
     # ========== LLM Configuration ==========
 
     researcher_agent_config: Optional[Any] = Field(
diff --git a/src/ii_agent/ii_claw/__init__.py b/src/ii_agent/ii_claw/__init__.py
new file mode 100644
index 000000000..5324176f2
--- /dev/null
+++ b/src/ii_agent/ii_claw/__init__.py
@@ -0,0 +1,19 @@
+"""II-Claw: Programmatic agent caller matching production Socket.IO flow."""
+
+from ii_agent.ii_claw.call_agent import (
+    CallAgentInput,
+    CallAgentOutput,
+    FileAttachment,
+    MediaOutput,
+    call_agent,
+    call_agent_stream,
+)
+
+__all__ = [
+    "CallAgentInput",
+    "CallAgentOutput",
+    "FileAttachment",
+    "MediaOutput",
+    "call_agent",
+    "call_agent_stream",
+]
diff --git a/src/ii_agent/ii_claw/ai_processor.py b/src/ii_agent/ii_claw/ai_processor.py
new file mode 100644
index 000000000..66cc911ee
--- /dev/null
+++ b/src/ii_agent/ii_claw/ai_processor.py
@@ -0,0 +1,169 @@
+"""AI processing logic — calls the II-Agent backend via call_agent().
+
+Converts inbound II-Claw webhook messages into CallAgentInput,
+runs the agent, and returns CallAgentOutput (with content + media).
+"""
+
+import re
+import logging
+from typing import Optional
+
+from ii_agent.agents.types import AgentType
+from ii_agent.settings.llm import Provider
+from ii_agent.ii_claw.models import InboundMessage
+from ii_agent.ii_claw.call_agent import CallAgentInput, CallAgentOutput, call_agent
+from ii_agent.ii_claw.custom_agent import process_custom_agent
+
+logger = logging.getLogger(__name__)
+
+# Default agent type when no match is found
+DEFAULT_AGENT_TYPE = AgentType.GENERAL
+
+# Map string values to AgentType for fast membership checks from inbound agent_id
+_AGENT_TYPE_BY_VALUE = {agent_type.value: agent_type for agent_type in AgentType}
+
+DEFAULT_MODEL_ID = "gpt-5.2"
+DEFAULT_PROVIDER = Provider.OPENAI
+
+def detect_agent_type_from_metadata(metadata: Optional[dict]) -> AgentType:
+    """Detect the AgentType from an InboundMessage's metadata.
+
+    Priority: thread_name > channel_name.
+    Matches by normalizing the name to lowercase with underscores removed/spaces
+    collapsed, then comparing against AgentType enum values.
+
+    Examples:
+        "Fast Research" / "FastResearch" / "fastresearch" -> AgentType.FAST_RESEARCH
+        "Deep Research" -> AgentType.DEEP_RESEARCH
+        "general" -> AgentType.GENERAL
+
+    Returns DEFAULT_AGENT_TYPE if no match is found.
+    """
+    if not metadata:
+        return DEFAULT_AGENT_TYPE
+
+    # Priority: thread_name first, then channel_name
+    name = metadata.get("thread_name") or metadata.get("channel_name") or metadata.get("chat_title")
+    if not name:
+        return DEFAULT_AGENT_TYPE
+
+    # Normalize: "Fast Research" -> "fast_research", "FastResearch" -> "fast_research"
+    # 1. Insert underscore before uppercase letters (for camelCase/PascalCase)
+    normalized = re.sub(r"(?<=[a-z0-9])(?=[A-Z])", "_", name)
+    # 2. Replace spaces/hyphens with underscores
+    normalized = re.sub(r"[\s\-]+", "_", normalized)
+    # 3. Lowercase and strip
+    normalized = normalized.lower().strip("_")
+
+    # Try to match against AgentType values
+    for agent_type in AgentType:
+        if normalized == agent_type.value:
+            return agent_type
+
+    return DEFAULT_AGENT_TYPE
+
+
+def detect_session_id_from_metadata(metadata: Optional[dict]) -> Optional[str]:
+    """Derive a stable session ID from an InboundMessage's metadata.
+
+    Priority: thread_id > channel_id
+    Messages in the same thread/channel will share one agent session.
+
+    Returns None if no usable identifier is found (creates a new session).
+    """
+    if not metadata:
+        return None
+    return metadata.get("thread_id") or metadata.get("message_thread_id") or metadata.get("channel_id") or metadata.get("chat_id") or None
+
+
+def _build_agent_text(msg: InboundMessage) -> str:
+    """Build the text prompt to send to the agent from an inbound message."""
+    parts: list[str] = []
+
+    if msg.text:
+        parts.append(msg.text)
+
+    if msg.content_type == "image" and msg.media_url:
+        parts.append(f"[Image: {msg.media_url}]")
+    elif msg.content_type == "video" and msg.media_url:
+        parts.append(f"[Video: {msg.media_url}]")
+    elif msg.content_type == "audio" and msg.media_url:
+        parts.append(f"[Audio: {msg.media_url}]")
+    elif msg.content_type == "voice" and msg.media_url:
+        parts.append(f"[Voice message ({msg.media_duration_seconds or 0}s): {msg.media_url}]")
+    elif msg.content_type == "file" and msg.media_url:
+        parts.append(f"[File '{msg.media_filename or 'unknown'}': {msg.media_url}]")
+    elif msg.content_type == "location":
+        parts.append("[Location shared]")
+
+    return "\n".join(parts) if parts else "(empty message)"
+
+
+async def process_inbound_message(msg: InboundMessage) -> CallAgentOutput:
+    """Process an inbound channel message and return CallAgentOutput.
+
+    Args:
+        msg: The parsed inbound message from II-Claw webhook.
+
+    Returns:
+        CallAgentOutput with content (text) and media (images, videos, audio, files).
+        The caller (_process_and_reply) sends these via send_to_channel.
+    """
+    input_text = _build_agent_text(msg)
+    user_id = msg.user_id if msg.user_id else "cli-user"
+
+    # --- Resolve agent_id: built-in AgentType first, custom agent second ---
+    raw_agent_id = msg.agent_id
+    agent_id = raw_agent_id.strip().lower() if raw_agent_id else None
+    agent_type_from_agent_id = _AGENT_TYPE_BY_VALUE.get(agent_id) if agent_id else None
+    custom_overrides = None
+
+    if agent_id and agent_type_from_agent_id is None:
+        custom_overrides = await process_custom_agent(
+            agent_id=agent_id,
+            user_id=user_id,
+        )
+        if custom_overrides is None:
+            logger.warning(
+                "agent_id=%s not found for user=%s, falling back to default",
+                agent_id,
+                user_id,
+            )
+
+    # --- Build CallAgentInput ---
+    if custom_overrides is not None:
+        inp = CallAgentInput(
+            user_id=user_id,
+            text=input_text,
+            model_id=custom_overrides.model_id,
+            provider=custom_overrides.provider or DEFAULT_PROVIDER,
+            source="system",
+            agent_type=AgentType.CUSTOM,
+            session_id=detect_session_id_from_metadata(msg.metadata),
+            custom_system_prompt=custom_overrides.custom_system_prompt,
+            tool_args=custom_overrides.tool_args or {},
+            skill_mode=custom_overrides.skill_mode,
+            connector_mode=custom_overrides.connector_mode,
+        )
+    else:
+        inp = CallAgentInput(
+            user_id=user_id,
+            text=input_text,
+            model_id=DEFAULT_MODEL_ID,
+            provider=DEFAULT_PROVIDER,
+            source="system",
+            agent_type=agent_type_from_agent_id or detect_agent_type_from_metadata(msg.metadata),
+            session_id=detect_session_id_from_metadata(msg.metadata),
+        )
+
+    output = await call_agent(inp)
+
+    if output.error:
+        logger.error("Agent error: %s", output.error)
+        output.content = f"Sorry, something went wrong: {output.error}"
+    elif not output.content:
+        output.content = "I processed your request but have no response to share."
+
+    logger.info("AI response: %s", (output.content or "")[:100])
+
+    return output
diff --git a/src/ii_agent/ii_claw/api/__init__.py b/src/ii_agent/ii_claw/api/__init__.py
new file mode 100644
index 000000000..fe6678116
--- /dev/null
+++ b/src/ii_agent/ii_claw/api/__init__.py
@@ -0,0 +1,3 @@
+from ii_agent.ii_claw.api.router import router
+
+__all__ = ["router"]
\ No newline at end of file
diff --git a/src/ii_agent/ii_claw/api/client.py b/src/ii_agent/ii_claw/api/client.py
new file mode 100644
index 000000000..3a195b049
--- /dev/null
+++ b/src/ii_agent/ii_claw/api/client.py
@@ -0,0 +1,116 @@
+"""HTTP client for communicating with II-Claw Rust backend."""
+
+import httpx
+from ii_agent.core.config.settings import get_settings
+
+_client: httpx.AsyncClient | None = None
+
+
+def _auth_headers() -> dict[str, str]:
+    """Build Authorization header if II-Claw API key is configured."""
+    settings = get_settings()
+    if settings.ii_claw_client_api_key:
+        return {"Authorization": f"Bearer {settings.ii_claw_client_api_key}"}
+    return {}
+
+
+async def get_client() -> httpx.AsyncClient:
+    """Get or create a shared async HTTP client."""
+    global _client
+    if _client is None or _client.is_closed:
+        settings = get_settings()
+        _client = httpx.AsyncClient(
+            base_url=settings.ii_claw_client_url,
+            headers=_auth_headers(),
+            timeout=30.0,
+        )
+    return _client
+
+
+async def close_client():
+    global _client
+    if _client and not _client.is_closed:
+        await _client.aclose()
+        _client = None
+
+
+# ---------------------------------------------------------------------------
+# Proxy helpers — forward Frontend requests to II-Claw
+# ---------------------------------------------------------------------------
+
+async def proxy_get(path: str, params: dict | None = None) -> httpx.Response:
+    """Proxy a GET request to II-Claw."""
+    client = await get_client()
+    return await client.get(path, params=params)
+
+
+async def proxy_post(path: str, json: dict | None = None) -> httpx.Response:
+    """Proxy a POST request to II-Claw."""
+    client = await get_client()
+    return await client.post(path, json=json)
+
+
+async def proxy_put(path: str, json: dict | None = None) -> httpx.Response:
+    """Proxy a PUT request to II-Claw."""
+    client = await get_client()
+    return await client.put(path, json=json)
+
+
+async def proxy_delete(path: str) -> httpx.Response:
+    """Proxy a DELETE request to II-Claw."""
+    client = await get_client()
+    return await client.delete(path)
+
+
+# ---------------------------------------------------------------------------
+# Outbound: send messages to channels via II-Claw
+# ---------------------------------------------------------------------------
+
+async def send_to_user_channel(
+    user_id: str,
+    channel_name: str,
+    recipient: str,
+    *,
+    text: str | None = None,
+    image_url: str | None = None,
+    file_url: str | None = None,
+    filename: str | None = None,
+    voice_url: str | None = None,
+    video_url: str | None = None,
+    caption: str | None = None,
+    thread_id: str | None = None,
+) -> dict:
+    """Send a message via a user-scoped channel instance.
+
+    Proxies to /api/users/{user_id}/channels/{name}/send.
+    """
+    body: dict = {"recipient": recipient}
+    if text:
+        body["message"] = text
+    if image_url:
+        body["image_url"] = image_url
+    if file_url:
+        body["file_url"] = file_url
+    if filename:
+        body["filename"] = filename
+    if voice_url:
+        body["voice_url"] = voice_url
+    if video_url:
+        body["video_url"] = video_url
+    if caption:
+        body["caption"] = caption
+    if thread_id:
+        body["thread_id"] = thread_id
+
+    client = await get_client()
+    resp = await client.post(
+        f"/api/users/{user_id}/channels/{channel_name}/send", json=body
+    )
+    if resp.status_code >= 400:
+        error_detail = resp.text
+        raise httpx.HTTPStatusError(
+            f"II-Claw error {resp.status_code}: {error_detail}",
+            request=resp.request,
+            response=resp,
+        )
+    return resp.json()
diff --git a/src/ii_agent/ii_claw/api/router.py b/src/ii_agent/ii_claw/api/router.py
new file mode 100644
index 000000000..2e0f1d5a9
--- /dev/null
+++ b/src/ii_agent/ii_claw/api/router.py
@@ -0,0 +1,727 @@
+"""Layer 3: Webhook receiver — handles inbound messages forwarded by II-Claw."""
+
+import asyncio
+import hashlib
+import hmac
+import logging
+
+from ii_agent.ii_claw.api.client import proxy_get, proxy_post, proxy_put, proxy_delete, send_to_user_channel
+
+from fastapi import APIRouter, BackgroundTasks, Depends, Header, HTTPException, Request
+from typing import Any
+
+from pydantic import BaseModel
+
+from ii_agent.auth.dependencies import CurrentUser
+from ii_agent.core.config.settings import get_settings
+
+logger = logging.getLogger(__name__)
+
+router = APIRouter(prefix="/ii-claw", tags=["ii-claw"])
+
+# ===========================================================================
+# Webhook
+# ===========================================================================
+_settings = get_settings()
+WEBHOOK_SECRET = _settings.ii_claw_webhook_secret
+
+# ---------------------------------------------------------------------------
+# HMAC verification
+# ---------------------------------------------------------------------------
+
+def verify_signature(body: bytes, signature: str | None) -> bool:
+    """Verify HMAC-SHA256 signature from II-Claw."""
+    if not WEBHOOK_SECRET:
+        return True  # No secret configured, skip verification
+    if not signature:
+        return False
+    expected = hmac.new(
+        WEBHOOK_SECRET.encode(), body, hashlib.sha256
+    ).hexdigest()
+    return hmac.compare_digest(f"sha256={expected}", signature)
+
+
+# ---------------------------------------------------------------------------
+# Webhook endpoint
+# ---------------------------------------------------------------------------
+
+@router.post("/webhook/inbound")
+async def receive_inbound(
+    request: Request,
+    background_tasks: BackgroundTasks,
+    x_webhook_signature: str | None = Header(None),
+):
+    """Receive an inbound message forwarded from II-Claw.
+
+    Flow:
+      1. Return {"immediate_reply": "Processing...", "async_processing": true} immediately
+      2. Background task: call_agent → send text content via send_to_user_channel → send media
+    """
+    body = await request.body()
+
+    # Verify HMAC signature
+    if not verify_signature(body, x_webhook_signature):
+        raise HTTPException(status_code=401, detail="Invalid signature")
+
+    import json
+    from ii_agent.ii_claw.models import InboundMessage
+    payload = InboundMessage(**json.loads(body))
+
+    # logger.info(
+    #     "Inbound [%s] from %s (%s): content_type=%s",
+    #     payload.channel,
+    #     payload.sender.display_name,
+    #     payload.sender.platform_id,
+    #     payload.content_type,
+    # )
+
+    # Fire background processing — response will be sent via send_to_user_channel
+    background_tasks.add_task(_process_and_reply, payload)
+
+    return {"immediate_reply": "Processing...", "async_processing": True}
+
+
+async def _process_and_reply(payload):
+    """Background: run AI agent, then send results back via II-Claw channel."""
+    from ii_agent.ii_claw.ai_processor import process_inbound_message
+
+    user_id = payload.user_id if payload.user_id else "unknown_user"
+    channel = payload.instance_name if payload.instance_name else payload.channel
+    recipient = payload.reply_to.recipient if payload.reply_to else payload.sender.platform_id
+    thread_id = payload.reply_to.thread_id if payload.reply_to else payload.thread_id
+
+    try:
+        output = await process_inbound_message(payload)
+
+        # Step 1: Send text content
+        if output.content:
+            await send_to_user_channel(
+                user_id, channel, recipient,
+                text=output.content,
+                thread_id=thread_id,
+            )
+
+        # Step 2: Send media (images, videos, audio, files)
+        for img in output.media.images:
+            await send_to_user_channel(
+                user_id, channel, recipient,
+                image_url=img.get("url"),
+                caption=img.get("caption"),
+                thread_id=thread_id,
+            )
+
+        for vid in output.media.videos:
+            await send_to_user_channel(
+                user_id, channel, recipient,
+                video_url=vid.get("url"),
+                caption=vid.get("caption"),
+                thread_id=thread_id,
+            )
+
+        for aud in output.media.audio:
+            await send_to_user_channel(
+                user_id, channel, recipient,
+                voice_url=aud.get("url"),
+                caption=aud.get("caption"),
+                thread_id=thread_id,
+            )
+
+        for f in output.media.files:
+            await send_to_user_channel(
+                user_id, channel, recipient,
+                file_url=f.url,
+                filename=f.name,
+                caption=f.name,
+                thread_id=thread_id,
+            )
+
+    except Exception as e:
+        logger.error("Background processing failed for %s/%s: %s", channel, recipient, e, exc_info=True)
+        # Try to notify user of the error
+        try:
+            await send_to_user_channel(
+                user_id, channel, recipient,
+                text=f"Sorry, an error occurred while processing your message: {e}",
+                thread_id=thread_id,
+            )
+        except Exception:
+            logger.error("Failed to send error message to channel")
+
+# ===========================================================================
+# Channels
+# ===========================================================================
+
+# ---------------------------------------------------------------------------
+# Request models
+# ---------------------------------------------------------------------------
+
+class UserChannelConfigureRequest(BaseModel):
+    """Configure a user-scoped channel instance.
+
+    fields can have mixed types (str, int, bool, list)
+    matching the actual channel config schema.
+
+    Example payload:
+        {
+            "channel_type": "discord",
+            "fields": {
+                "bot_token_env": "actual-discord-bot-token-here",
+                "allowed_guilds": ["123456"],
+                "allowed_users": [],
+                "intents": 37376,
+                "ignore_bots": true
+            }
+        }
+    """
+    channel_type: str
+    instance_name: str | None = None  # Display name, defaults to instance_name_id
+    fields: dict[str, Any]
+    agent_id: str | None = None  # Optional agent scoping for this channel instance
+    register_webhook: bool = True
+
+
+class UserChannelUpdateRequest(BaseModel):
+    """Update an existing user-scoped channel instance.
+
+    PUT /api/users/{user_id}/channels/{instance_name_id}
+
+    All fields are optional — only provided fields are updated.
+    Fields are merged into existing config (not replaced).
+
+    Example payload:
+        {
+            "instance_name": "New Display Name",
+            "enabled": false,
+            "fields": {"allowed_guilds": ["456"]}
+        }
+    """
+    instance_name: str | None = None  # Rename display name
+    enabled: bool | None = None
+    fields: dict[str, Any] | None = None
+    agent_id: str | None = None  # Optional agent scoping for this channel instance
+
+
+class UserChannelSendRequest(BaseModel):
+    """Send a message via a user-scoped channel instance."""
+    recipient: str
+    message: str | None = None
+    image_url: str | None = None
+    file_url: str | None = None
+    filename: str | None = None
+    voice_url: str | None = None
+    video_url: str | None = None
+    caption: str | None = None
+    thread_id: str | None = None
+
+
+# ---------------------------------------------------------------------------
+# Endpoints
+# ---------------------------------------------------------------------------
+
+async def _try_ii_claw_get(path: str):
+    """Try GET from II-Claw, return (data, status_code, is_live)."""
+    try:
+        resp = await proxy_get(path)
+        return resp.json(), resp.status_code, True
+    except Exception as e:
+        logger.debug("II-Claw unreachable for %s: %s", path, e)
+        return None, None, False
+
+@router.get("/users/{user_id}/channels")
+async def list_user_channels(
+    user_id: str,
+    current_user: CurrentUser,
+    channel_type: str | None = None,
+):
+    """List all channel instances for a user.
+
+    Optional query param ?channel_type=discord to filter by type.
+    Proxies to GET /api/users/{user_id}/channels
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot list channels for another user")
+
+    params = {"channel_type": channel_type} if channel_type else None
+    try:
+        data, status, live = await _try_ii_claw_get(f"/api/users/{user_id}/channels")
+        if live:
+            channels = data.get("channels", []) if isinstance(data, dict) else []
+            if channel_type:
+                channels = [ch for ch in channels if ch.get("channel_type") == channel_type]
+            return {"source": "II-Claw", "channels": channels}
+        return {"source": "II-Claw", "channels": []}
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+
+@router.post("/users/{user_id}/channels/{instance_name_id}/configure")
+async def configure_user_channel(
+    user_id: str,
+    instance_name_id: str,
+    req: UserChannelConfigureRequest,
+    current_user: CurrentUser,
+):
+    """Configure a user-scoped channel instance.
+
+    POST /ii_claw/users/{user_id}/channels/{instance_name_id}/configure
+
+    - instance_name_id (path): the slug ID (e.g. "my_agent_1")
+    - instance_name (body): optional display name, defaults to instance_name_id
+
+    1. Validates user_id matches the authenticated user.
+    2. Converts mixed-type fields to string format for Rust compatibility.
+    3. Proxies to POST /api/users/{user_id}/channels/{instance_name_id}/configure.
+    """
+    # Validate user ownership
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot configure channels for another user")
+
+    # Convert mixed-type fields to strings for Rust compatibility
+    string_fields: dict[str, str] = {}
+    for key, value in req.fields.items():
+        if isinstance(value, list):
+            string_fields[key] = ", ".join(str(v) for v in value)
+        elif isinstance(value, bool):
+            string_fields[key] = str(value).lower()
+        else:
+            string_fields[key] = str(value)
+
+    channel_type = req.channel_type.lower()
+
+    # Configure the channel instance
+    payload: dict[str, Any] = {
+        "channel_type": channel_type,
+        "fields": string_fields,
+    }
+    if req.instance_name:
+        payload["instance_name"] = req.instance_name
+    if req.agent_id:
+        payload["agent_id"] = req.agent_id
+
+    try:
+        resp = await proxy_post(
+            f"/api/users/{user_id}/channels/{instance_name_id}/configure",
+            json=payload,
+        )
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {
+        "source": "II-Claw",
+        "result": result,
+        "status": resp.status_code,
+        "webhook": "registered",
+        "channel_type": req.channel_type,
+        "instance_name_id": instance_name_id,
+        "user_id": user_id,
+    }
+
+
+@router.put("/users/{user_id}/channels/{instance_name_id}")
+async def update_user_channel(
+    user_id: str,
+    instance_name_id: str,
+    req: UserChannelUpdateRequest,
+    current_user: CurrentUser,
+):
+    """Update an existing user-scoped channel instance.
+
+    PUT /ii_claw/users/{user_id}/channels/{instance_name_id}
+
+    Proxies to PUT /api/users/{user_id}/channels/{instance_name_id}.
+    - instance_name_id (path): the immutable slug ID (e.g. "my_agent_1")
+    - instance_name (body): optional new display name
+    Only provided fields are updated; fields dict is merged into existing config.
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot update channels for another user")
+
+    # Build payload with only provided fields
+    payload: dict[str, Any] = {}
+    if req.instance_name is not None:
+        payload["instance_name"] = req.instance_name
+    if req.enabled is not None:
+        payload["enabled"] = req.enabled
+    if req.agent_id is not None:
+        payload["agent_id"] = req.agent_id
+    if req.fields is not None:
+        # Convert mixed-type fields to strings for Rust compatibility
+        string_fields: dict[str, str] = {}
+        for key, value in req.fields.items():
+            if isinstance(value, list):
+                string_fields[key] = ", ".join(str(v) for v in value)
+            elif isinstance(value, bool):
+                string_fields[key] = str(value).lower()
+            else:
+                string_fields[key] = str(value)
+        payload["fields"] = string_fields
+
+    try:
+        resp = await proxy_put(
+            f"/api/users/{user_id}/channels/{instance_name_id}",
+            json=payload,
+        )
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {
+        "source": "II-Claw",
+        "result": result,
+        "status": resp.status_code,
+        "instance_name_id": instance_name_id,
+        "user_id": user_id,
+    }
+
+
+@router.delete("/users/{user_id}/channels/{instance_name_id}")
+async def remove_user_channel(
+    user_id: str,
+    instance_name_id: str,
+    current_user: CurrentUser,
+):
+    """Remove a user-scoped channel instance.
+
+    Proxies to DELETE /api/users/{user_id}/channels/{instance_name_id}
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot remove channels for another user")
+
+    try:
+        resp = await proxy_delete(f"/api/users/{user_id}/channels/{instance_name_id}")
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {
+        "source": "II-Claw",
+        "result": result,
+        "status": resp.status_code,
+    }
+
+
+@router.post("/users/{user_id}/channels/{instance_name_id}/send")
+async def send_to_user_channel_endpoint(
+    user_id: str,
+    instance_name_id: str,
+    req: UserChannelSendRequest,
+    current_user: CurrentUser,
+):
+    """Send a message via a user-scoped channel instance.
+
+    Proxies to POST /api/users/{user_id}/channels/{instance_name_id}/send
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot send via channels for another user")
+
+    try:
+        result = await send_to_user_channel(
+            user_id,
+            instance_name_id,
+            req.recipient,
+            text=req.message,
+            image_url=req.image_url,
+            file_url=req.file_url,
+            filename=req.filename,
+            voice_url=req.voice_url,
+            video_url=req.video_url,
+            caption=req.caption,
+            thread_id=req.thread_id,
+        )
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {"source": "II-Claw", "result": result}
+
+
+@router.post("/users/{user_id}/channels/reload")
+async def reload_user_channels(
+    user_id: str,
+    current_user: CurrentUser,
+):
+    """Trigger hot-reload of all channel instances for a user.
+
+    Proxies to POST /api/users/{user_id}/channels/reload
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot reload channels for another user")
+
+    try:
+        resp = await proxy_post(f"/api/users/{user_id}/channels/reload")
+        return {"source": "II-Claw", "result": resp.json(), "status": resp.status_code}
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+
+# ===========================================================================
+# Cron Jobs
+# ===========================================================================
+
+# ---------------------------------------------------------------------------
+# Request models
+# ---------------------------------------------------------------------------
+
+class CronJobCreateRequest(BaseModel):
+    """Create a new cron job.
+
+    Example payload:
+        {
+            "name": "standup-reminder",
+            "label": "notifications",
+            "schedule": {"type": "cron", "expr": "0 9 * * 1-5", "tz": "America/New_York"},
+            "action": {"type": "channel_message", "channel": "slack", "recipient": "#general", "message": "Hey!"},
+            "one_shot": false,
+            "channel_type": {"platform": "slack"},
+            "metadata": {"team": "eng"}
+        }
+    """
+    name: str
+    label: str | None = None
+    one_shot: bool = False
+    schedule: dict[str, Any]
+    action: dict[str, Any]
+    channel_type: dict[str, Any] | None = None
+    metadata: dict[str, Any] | None = None
+
+
+class CronJobToggleRequest(BaseModel):
+    """Toggle a cron job enabled/disabled."""
+    enabled: bool
+
+
+# ---------------------------------------------------------------------------
+# Endpoints
+# ---------------------------------------------------------------------------
+
+@router.post("/users/{user_id}/cron/jobs")
+async def create_cron_job(
+    user_id: str,
+    req: CronJobCreateRequest,
+    current_user: CurrentUser,
+):
+    """Create a new cron job for a user.
+
+    Proxies to POST /api/users/{user_id}/cron/jobs
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot create cron jobs for another user")
+
+    payload: dict[str, Any] = {
+        "name": req.name,
+        "schedule": req.schedule,
+        "action": req.action,
+        "one_shot": req.one_shot,
+    }
+    if req.label is not None:
+        payload["label"] = req.label
+    if req.channel_type is not None:
+        payload["channel_type"] = req.channel_type
+    if req.metadata is not None:
+        payload["metadata"] = req.metadata
+
+    try:
+        resp = await proxy_post(f"/api/users/{user_id}/cron/jobs", json=payload)
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {"source": "II-Claw", "result": result, "status": resp.status_code}
+
+
+@router.get("/users/{user_id}/cron/jobs")
+async def list_cron_jobs(
+    user_id: str,
+    current_user: CurrentUser,
+    label: str | None = None,
+):
+    """List all cron jobs for a user.
+
+    Optional query param ?label=notifications to filter.
+    Proxies to GET /api/users/{user_id}/cron/jobs
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot list cron jobs for another user")
+
+    params = {"label": label} if label else None
+    try:
+        data, status, live = await _try_ii_claw_get(f"/api/users/{user_id}/cron/jobs")
+        if live:
+            jobs = data.get("jobs", []) if isinstance(data, dict) else []
+            if label:
+                jobs = [j for j in jobs if j.get("label") == label]
+            return {"source": "II-Claw", "jobs": jobs, "total": len(jobs)}
+        return {"source": "II-Claw", "jobs": [], "total": 0}
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+
+@router.delete("/users/{user_id}/cron/jobs/{job_id}")
+async def delete_cron_job(
+    user_id: str,
+    job_id: str,
+    current_user: CurrentUser,
+):
+    """Delete a cron job.
+
+    Proxies to DELETE /api/users/{user_id}/cron/jobs/{job_id}
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot delete cron jobs for another user")
+
+    try:
+        resp = await proxy_delete(f"/api/users/{user_id}/cron/jobs/{job_id}")
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {"source": "II-Claw", "result": result, "status": resp.status_code}
+
+
+@router.put("/users/{user_id}/cron/jobs/{job_id}/enable")
+async def toggle_cron_job(
+    user_id: str,
+    job_id: str,
+    req: CronJobToggleRequest,
+    current_user: CurrentUser,
+):
+    """Toggle a cron job enabled/disabled.
+
+    Proxies to PUT /api/users/{user_id}/cron/jobs/{job_id}/enable
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot toggle cron jobs for another user")
+
+    try:
+        resp = await proxy_put(
+            f"/api/users/{user_id}/cron/jobs/{job_id}/enable",
+            json={"enabled": req.enabled},
+        )
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {"source": "II-Claw", "result": result, "status": resp.status_code}
+
+
+class CronJobUpdateRequest(BaseModel):
+    """Update an existing cron job (full overwrite).
+
+    Same fields as create, plus `enabled`.
+    """
+    name: str
+    label: str | None = None
+    enabled: bool = True
+    one_shot: bool = False
+    schedule: dict[str, Any]
+    action: dict[str, Any]
+    channel_type: dict[str, Any] | None = None
+    metadata: dict[str, Any] | None = None
+
+
+@router.put("/users/{user_id}/cron/jobs/{job_id}")
+async def update_cron_job(
+    user_id: str,
+    job_id: str,
+    req: CronJobUpdateRequest,
+    current_user: CurrentUser,
+):
+    """Update an existing cron job (full overwrite).
+
+    Proxies to PUT /api/users/{user_id}/cron/jobs/{job_id}
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot update cron jobs for another user")
+
+    payload: dict[str, Any] = {
+        "name": req.name,
+        "enabled": req.enabled,
+        "one_shot": req.one_shot,
+        "schedule": req.schedule,
+        "action": req.action,
+    }
+    if req.label is not None:
+        payload["label"] = req.label
+    if req.channel_type is not None:
+        payload["channel_type"] = req.channel_type
+    if req.metadata is not None:
+        payload["metadata"] = req.metadata
+
+    try:
+        resp = await proxy_put(f"/api/users/{user_id}/cron/jobs/{job_id}", json=payload)
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {"source": "II-Claw", "result": result, "status": resp.status_code}
+
+
+@router.post("/users/{user_id}/cron/jobs/{job_id}/test")
+async def test_cron_job(
+    user_id: str,
+    job_id: str,
+    current_user: CurrentUser,
+):
+    """Test-trigger a cron job immediately.
+
+    Proxies to POST /api/users/{user_id}/cron/jobs/{job_id}/test
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot test cron jobs for another user")
+
+    try:
+        resp = await proxy_post(f"/api/users/{user_id}/cron/jobs/{job_id}/test")
+        result = resp.json()
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+    return {"source": "II-Claw", "result": result, "status": resp.status_code}
+
+
+@router.get("/users/{user_id}/cron/jobs/{job_id}/history")
+async def get_cron_job_history(
+    user_id: str,
+    job_id: str,
+    current_user: CurrentUser,
+    limit: int = 50,
+):
+    """Get run history for a specific cron job.
+
+    Proxies to GET /api/users/{user_id}/cron/jobs/{job_id}/history
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot view cron job history for another user")
+
+    try:
+        data, status, live = await _try_ii_claw_get(
+            f"/api/users/{user_id}/cron/jobs/{job_id}/history"
+        )
+        if live:
+            runs = data.get("runs", []) if isinstance(data, dict) else []
+            return {"source": "II-Claw", "runs": runs[:limit], "total": len(runs)}
+        return {"source": "II-Claw", "runs": [], "total": 0}
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
+
+
+@router.get("/users/{user_id}/cron/history")
+async def get_all_cron_history(
+    user_id: str,
+    current_user: CurrentUser,
+    limit: int = 50,
+):
+    """Get all cron job run history for a user.
+
+    Proxies to GET /api/users/{user_id}/cron/history
+    """
+    if str(current_user.id) != user_id:
+        raise HTTPException(status_code=403, detail="Cannot view cron history for another user")
+
+    try:
+        data, status, live = await _try_ii_claw_get(f"/api/users/{user_id}/cron/history")
+        if live:
+            runs = data.get("runs", []) if isinstance(data, dict) else []
+            return {"source": "II-Claw", "runs": runs[:limit], "total": len(runs)}
+        return {"source": "II-Claw", "runs": [], "total": 0}
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"II-Claw unreachable: {e}")
diff --git a/src/ii_agent/ii_claw/api/user_agent_router.py b/src/ii_agent/ii_claw/api/user_agent_router.py
new file mode 100644
index 000000000..e56e497ec
--- /dev/null
+++ b/src/ii_agent/ii_claw/api/user_agent_router.py
@@ -0,0 +1,123 @@
+"""User agents management API endpoints."""
+
+from fastapi import APIRouter, HTTPException, Query
+
+from ii_agent.auth.dependencies import CurrentUser
+from ii_agent.core.dependencies import DBSession
+from ii_agent.core.logger import logger
+
+from ii_agent.ii_claw.custom_agent.models import (
+    UserAgentCreate,
+    UserAgentUpdate,
+    UserAgentInfo,
+    UserAgentList,
+    UserAgentDeleteResponse,
+)
+from ii_agent.ii_claw.custom_agent.service import (
+    create_user_agent,
+    list_user_agents,
+    get_user_agent,
+    update_user_agent,
+    delete_user_agent,
+)
+
+router = APIRouter(prefix="/ii-claw/agents", tags=["II-Claw User Agents Management"])
+
+
+@router.post("", response_model=UserAgentInfo, status_code=201)
+async def create_agent(
+    request: UserAgentCreate,
+    current_user: CurrentUser,
+    db: DBSession,
+):
+    """Create a new custom agent.
+
+    The agent_name must be unique per user.
+    """
+    try:
+        return await create_user_agent(
+            db_session=db,
+            user_id=str(current_user.id),
+            agent_in=request,
+        )
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        logger.exception(f"Unexpected error creating agent: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to create agent: {str(e)}")
+
+
+@router.get("", response_model=UserAgentList)
+async def list_agents(
+    current_user: CurrentUser,
+    db: DBSession,
+    active_only: bool = Query(
+        default=False,
+        description="Whether to return only active agents",
+    ),
+):
+    """List all custom agents for the current user."""
+    return await list_user_agents(
+        db_session=db,
+        user_id=str(current_user.id),
+        active_only=active_only,
+    )
+
+
+@router.get("/{agent_id}", response_model=UserAgentInfo)
+async def get_agent(
+    agent_id: str,
+    current_user: CurrentUser,
+    db: DBSession,
+):
+    """Get details of a specific custom agent by ID."""
+    agent_info = await get_user_agent(
+        db_session=db,
+        agent_id=agent_id,
+        user_id=str(current_user.id),
+    )
+    if not agent_info:
+        raise HTTPException(status_code=404, detail="Agent not found")
+    return agent_info
+
+
+@router.put("/{agent_id}", response_model=UserAgentInfo)
+async def update_agent(
+    agent_id: str,
+    request: UserAgentUpdate,
+    current_user: CurrentUser,
+    db: DBSession,
+):
+    """Update a custom agent. Only provided fields are changed."""
+    try:
+        agent_info = await update_user_agent(
+            db_session=db,
+            agent_id=agent_id,
+            user_id=str(current_user.id),
+            agent_update=request,
+        )
+        if not agent_info:
+            raise HTTPException(status_code=404, detail="Agent not found")
+        return agent_info
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+
+@router.delete("/{agent_id}", response_model=UserAgentDeleteResponse)
+async def delete_agent(
+    agent_id: str,
+    current_user: CurrentUser,
+    db: DBSession,
+):
+    """Delete a custom agent."""
+    success = await delete_user_agent(
+        db_session=db,
+        agent_id=agent_id,
+        user_id=str(current_user.id),
+    )
+    if not success:
+        raise HTTPException(status_code=404, detail="Agent not found")
+    return UserAgentDeleteResponse(
+        success=True,
+        message="Agent deleted successfully",
+    )
diff --git a/src/ii_agent/ii_claw/call_agent.py b/src/ii_agent/ii_claw/call_agent.py
new file mode 100644
index 000000000..560ac405a
--- /dev/null
+++ b/src/ii_agent/ii_claw/call_agent.py
@@ -0,0 +1,667 @@
+"""
+Backend function to call agent programmatically, matching the exact
+production flow of UserQueryHandler._handle_v1_query().
+
+Reference files:
+  - server/socket/command/query_handler.py  (_handle_v1_query, lines 193-309)
+  - server/services/agent_service.py        (create_agent_v1, lines 696-727)
+  - server/socket/command/command_handler.py (validate_and_update_session, lines 141-222)
+"""
+
+from __future__ import annotations
+
+import uuid
+from dataclasses import dataclass, field
+from typing import Any, AsyncIterator, Dict, List, Literal, Optional
+
+from ii_agent.agents.types import AgentType
+from ii_agent.core.config.settings import get_settings
+from ii_agent.core.config.llm_config import LLMConfig
+from ii_agent.core.container import get_app_container
+from ii_agent.core.db import get_db_session_local, get_session_factory
+from ii_agent.core.logger import logger
+from ii_agent.files.media.media import Image, File as UrlFile
+from ii_agent.realtime.events.app_events import AppEvent
+from ii_agent.realtime.events.converter import convert_agent_event_to_realtime
+from ii_agent.sessions.schemas import SessionInfo
+from ii_agent.tasks.models import RunTask
+from ii_agent.tasks.types import RunStatus
+from ii_agent.ii_claw.custom_agent import resolve_skill_creator, resolve_connector_tool, resolve_system_prompt
+from ii_agent.agents.factory import agent_factory
+from ii_agent.agents.runs.agent import RunOutput, RunCompletedEvent
+from ii_agent.agents.sessions.store import AgentSessionStore
+
+# Same constants as query_handler.py
+IMAGE_CONTENT_TYPES = {"image/png", "image/jpeg", "image/gif", "image/webp"}
+SEVEN_DAY_SECONDS = 7 * 24 * 3600
+
+
+# ---------------------------------------------------------------------------
+# Input / Output
+# ---------------------------------------------------------------------------
+
+@dataclass
+class CallAgentInput:
+    """
+    Input matching what frontend sends via Socket.IO "chat_message" event.
+
+    Maps to QueryCommandContent (server/models/messages.py lines 104-137).
+    Frontend sends: {type: "query", content: {text, files, model_id, agent_type, tool_args, ...}}
+    """
+
+    # --- Required ---
+    user_id: str                                       # JWT user id
+    text: str                                          # User's message
+
+    # --- Model config (frontend model selector) ---
+    model_id: Optional[str] = None                     # e.g. "gpt-5.2", "claude-sonnet-4", "custom_model_xyz"
+    provider: Optional[str] = None                      # e.g. Provider.OPENAI
+    source: Literal["user", "system"] = "user"         # "user" = user key, "system" = platform key
+
+    # --- Agent mode (frontend mode selector) ---
+    agent_type: AgentType = AgentType.GENERAL
+
+    # --- Tool toggles (frontend tool switches) ---
+    tool_args: Dict[str, Any] = field(default_factory=dict)
+
+    # --- File attachments (frontend file upload) ---
+    file_ids: List[str] = field(default_factory=list)  # Uploaded file UUIDs from /files/* API
+
+    # --- Custom agent config (primarily for agent_type == CUSTOM) ---
+    custom_system_prompt: Optional[str] = None         # User's custom system prompt
+    skill_mode: Optional[str] = "default"              # None | "default" | "custom_skill" | "default_and_custom_skill"
+    connector_mode: Optional[str] = "default"          # None | "default" | "custom_connector" | "default_and_custom_connector"
+
+    # --- Optional ---
+    session_id: Optional[str] = None                   # None = new session
+    metadata: Optional[Dict[str, Any]] = None
+    github_repository: Optional[Dict[str, str]] = None
+
+
+@dataclass
+class FileAttachment:
+    """A file delivered to the user (from send_user_files tool or RunOutput)."""
+    name: str
+    url: str
+    file_type: str = "documents"  # code, xlsx, archive, documents
+
+
+@dataclass
+class MediaOutput:
+    """All media produced by the agent run."""
+    images: List[Dict[str, Any]] = field(default_factory=list)   # [{url, mime_type, ...}]
+    videos: List[Dict[str, Any]] = field(default_factory=list)   # [{url, format, ...}]
+    audio: List[Dict[str, Any]] = field(default_factory=list)    # [{url, format, ...}]
+    files: List[FileAttachment] = field(default_factory=list)    # Delivered files (send_user_files)
+
+
+@dataclass
+class CallAgentOutput:
+    """Output containing everything the frontend would receive."""
+
+    session_id: str
+    run_id: str
+    status: RunStatus
+    content: Optional[str]                  # Final text response
+    events: List[AppEvent]                   # All events (same as Socket.IO)
+    media: MediaOutput = field(default_factory=MediaOutput)  # All media/file outputs
+    run_output: Optional[RunOutput] = None  # Full RunOutput for programmatic use
+    error: Optional[str] = None
+
+
+# ---------------------------------------------------------------------------
+# Internal helpers (avoid code duplication between call_agent / call_agent_stream)
+# ---------------------------------------------------------------------------
+
+async def _ensure_user_exists(user_id: str) -> None:
+    """Ensure the user and API key exist in DB (for CLI/programmatic usage).
+
+    The API key is required because the E2B sandbox MCP server uses it
+    as a credential during configure_sandbox_mcp(). Without it, the
+    set_credential endpoint returns 400 and sandbox tools (apply_patch,
+    ShellRunCommand, etc.) are never registered → "Unknown tool" errors.
+    """
+    from ii_agent.users.models import User, APIKey
+    from sqlalchemy import select
+    import secrets
+
+    async with get_db_session_local() as db:
+        # Ensure user
+        result = await db.execute(select(User).where(User.id == user_id))
+        if result.scalars().first() is None:
+            user = User(id=user_id, email=f"{user_id}@cli.local", credits=999999.0, bonus_credits=0.0)
+            db.add(user)
+            await db.flush()
+            logger.info(f"Created CLI user: {user_id}")
+
+        # Ensure API key (needed for sandbox MCP tool registration)
+        result = await db.execute(
+            select(APIKey).where(APIKey.user_id == user_id, APIKey.is_active == True)
+        )
+        if result.scalars().first() is None:
+            api_key = APIKey(
+                user_id=user_id,
+                api_key=f"ii-claw-{secrets.token_hex(16)}",
+                is_active=True,
+            )
+            db.add(api_key)
+            logger.info(f"Created API key for user: {user_id}")
+
+        await db.commit()
+
+
+async def _resolve_llm_config(session_id: uuid.UUID, user_id: str, source: str, model_id: Optional[str], provider: Optional[str]) -> LLMConfig:
+    """Resolve LLM config for the given session/user."""
+    container = get_app_container()
+    async with get_db_session_local() as db:
+        if source == "user" and model_id:
+            try:
+                setting = await container.model_setting_service.get_model_settings_by_name(
+                    db,
+                    model_name=model_id,
+                    user_id=uuid.UUID(user_id),
+                    include_key=True,
+                )
+                if setting:
+                    return LLMConfig(
+                        model=setting.model_id,
+                        provider=setting.provider,
+                    )
+            except Exception:
+                pass
+
+        # Fallback to system default
+        return LLMConfig(model=model_id or "default", provider=provider or "default")
+
+
+async def _update_session_meta(session_info: SessionInfo, inp: CallAgentInput) -> None:
+    """Update session name + agent_type (mirrors command_handler.py:167-170)."""
+    container = get_app_container()
+    async with get_db_session_local() as db:
+        fields: Dict[str, Any] = {}
+        if not session_info.name and inp.text:
+            fields["name"] = inp.text.strip()[:100]
+        if fields:
+            await container.session_service.update_session_fields(
+                db, session_info.id, **fields
+            )
+
+
+async def _check_credits(llm_config: LLMConfig, user_id: str) -> bool:
+    """Check credits (mirrors command_handler.py:185-192)."""
+    container = get_app_container()
+    async with get_db_session_local() as db:
+        return await container.credit_service.has_sufficient_credits(
+            db, uuid.UUID(user_id)
+        )
+
+
+async def _create_run_task(session_info: SessionInfo, inp: CallAgentInput) -> RunTask | None:
+    """Create RunTask in DB for ii_claw programmatic calls.
+
+    Bypasses claim_task's partial-unique constraint by force-completing
+    any stale active tasks first, then inserting directly.
+    """
+    from ii_agent.tasks.types import TaskType
+    from sqlalchemy import select, update
+
+    # Step 1: Force-complete all stale active tasks for this session
+    async with get_db_session_local() as db:
+        active_values = [s.value for s in RunStatus.active_states()]
+        await db.execute(
+            update(RunTask)
+            .where(
+                RunTask.session_id == session_info.id,
+                RunTask.status.in_(active_values),
+            )
+            .values(status=RunStatus.FAILED, error_message="Superseded by new ii_claw call")
+        )
+        # auto-commit on context exit
+
+    # Step 2: Insert new task directly
+    async with get_db_session_local() as db:
+        task = RunTask(
+            session_id=session_info.id,
+            task_type=TaskType.AGENT_RUN,
+            status=RunStatus.RUNNING,
+        )
+        db.add(task)
+        await db.flush()
+        await db.refresh(task)
+        return task
+
+
+async def _create_agent(inp: CallAgentInput, session_id_str: str, llm_config: LLMConfig):
+    """Create IIAgent via AgentFactory.
+
+    Uses resolve_* helpers from ii_claw.custom_agent to build skill_creator,
+    connector_tool, and system_prompt based on CallAgentInput config.
+    """
+    skill_creator = resolve_skill_creator(inp, mode=inp.skill_mode)
+    connector_tool = resolve_connector_tool(inp, mode=inp.connector_mode)
+    system_prompt = resolve_system_prompt(inp)
+
+    return await agent_factory.create_agent(
+        user_id=inp.user_id,
+        session_id=session_id_str,
+        llm_config=llm_config,
+        tool_args=inp.tool_args,
+        metadata=inp.metadata,
+        agent_type=inp.agent_type,
+        session_store=AgentSessionStore(session_maker=get_session_factory()),
+        skill_creator=skill_creator,
+        connector_tool=connector_tool,
+        system_prompt=system_prompt,
+    )
+
+
+async def _process_files(inp: CallAgentInput, session_id_str: str) -> tuple[list[Image], list[UrlFile]]:
+    """Process file uploads (mirrors query_handler.py:579-623)."""
+    images: list[Image] = []
+    files: list[UrlFile] = []
+
+    if not inp.file_ids:
+        return images, files
+
+    container = get_app_container()
+    async with get_db_session_local() as db:
+        files_data = await container.file_service.get_files_by_ids_and_update_session(
+            db,
+            file_ids=[uuid.UUID(fid) for fid in inp.file_ids],
+            user_id=uuid.UUID(inp.user_id),
+            session_id=uuid.UUID(session_id_str),
+            expiration_seconds=SEVEN_DAY_SECONDS,
+        )
+
+    for fd in files_data:
+        if not fd.url:
+            continue
+        files.append(UrlFile(id=fd.id, url=fd.url, filename=fd.name))
+        if fd.content_type in IMAGE_CONTENT_TYPES:
+            images.append(Image(url=fd.url, mime_type=fd.content_type))
+
+    return images, files
+
+
+def _extract_media(
+    events: List[AppEvent],
+    run_output: Optional[RunOutput],
+) -> MediaOutput:
+    """Extract all media/files from events and RunOutput.
+
+    Sources:
+      1. RunOutput.images/videos/audio/files  (direct agent media)
+      2. TOOL_RESULT events from send_user_files  (delivered file attachments)
+      3. TOOL_RESULT events with images/videos from other tools
+    """
+    from ii_agent.realtime.events.app_events import AgentToolResultEvent
+
+    media = MediaOutput()
+
+    # --- From RunOutput (images, videos, audio, files from agent) ---
+    if run_output:
+        if run_output.images:
+            for img in run_output.images:
+                d = img.model_dump(exclude_none=True) if hasattr(img, "model_dump") else {"url": getattr(img, "url", None)}
+                if d.get("url"):
+                    media.images.append(d)
+        if run_output.videos:
+            for vid in run_output.videos:
+                d = vid.model_dump(exclude_none=True) if hasattr(vid, "model_dump") else {"url": getattr(vid, "url", None)}
+                if d.get("url"):
+                    media.videos.append(d)
+        if run_output.audio:
+            for aud in run_output.audio:
+                d = aud.model_dump(exclude_none=True) if hasattr(aud, "model_dump") else {"url": getattr(aud, "url", None)}
+                if d.get("url"):
+                    media.audio.append(d)
+        if run_output.files:
+            for f in run_output.files:
+                url = getattr(f, "url", None)
+                if url:
+                    media.files.append(FileAttachment(
+                        name=getattr(f, "filename", None) or getattr(f, "name", None) or "file",
+                        url=url,
+                        file_type=getattr(f, "file_type", "documents") or "documents",
+                    ))
+
+    # --- From ToolExecution results (e.g. generate_image, generate_video) ---
+    # Collect already-seen URLs to avoid duplicates
+    seen_urls: set[str] = set()
+    for img in media.images:
+        if img.get("url"):
+            seen_urls.add(img["url"])
+    for vid in media.videos:
+        if vid.get("url"):
+            seen_urls.add(vid["url"])
+    for aud in media.audio:
+        if aud.get("url"):
+            seen_urls.add(aud["url"])
+    for f in media.files:
+        seen_urls.add(f.url)
+
+    if run_output and run_output.tools:
+        for tool_exec in run_output.tools:
+            result = tool_exec.result
+            if result is None:
+                continue
+            display = getattr(result, "user_display_content", None)
+            if not isinstance(display, dict) or display.get("type") != "file_url":
+                continue
+            url = display.get("url")
+            if not url or url in seen_urls:
+                continue
+            seen_urls.add(url)
+            mime = display.get("mime_type", "")
+            if mime.startswith("image/"):
+                media.images.append({"url": url, "mime_type": mime})
+            elif mime.startswith("video/"):
+                media.videos.append({"url": url, "mime_type": mime})
+            elif mime.startswith("audio/"):
+                media.audio.append({"url": url, "mime_type": mime})
+            else:
+                media.files.append(FileAttachment(
+                    name=display.get("name") or "file",
+                    url=url,
+                    file_type="documents",
+                ))
+
+    # --- From AgentToolResultEvent events (send_user_files attachments) ---
+    for evt in events:
+        if not isinstance(evt, AgentToolResultEvent):
+            continue
+
+        tool_name = getattr(evt, "tool_name", "")
+        content = evt.content if hasattr(evt, "content") else {}
+        result = content.get("result") if isinstance(content, dict) else None
+
+        # send_user_files: result = {tool_name: "message", action: {text, attachments: [{name, file_type, url}]}}
+        if tool_name == "send_user_files" and isinstance(result, dict):
+            action = result.get("action", {})
+            attachments = action.get("attachments", [])
+            if isinstance(attachments, list):
+                for att in attachments:
+                    if isinstance(att, dict) and att.get("url") and att["url"] not in seen_urls:
+                        media.files.append(FileAttachment(
+                            name=att.get("name", "file"),
+                            url=att["url"],
+                            file_type=att.get("file_type", "documents"),
+                        ))
+                        seen_urls.add(att["url"])
+
+    return media
+
+
+async def _extract_content(
+    events: List[AppEvent],
+    run_output: Optional[RunOutput],
+) -> Optional[str]:
+    """Extract final text content from RunOutput or events."""
+    from ii_agent.realtime.events.app_events import AgentResponseEvent
+
+    if run_output and run_output.content:
+        return str(run_output.content)
+
+    # Fallback: collect from AgentResponseEvent events
+    parts = []
+    for e in events:
+        if isinstance(e, AgentResponseEvent):
+            content = e.content if hasattr(e, "content") else {}
+            if isinstance(content, dict):
+                parts.append(content.get("text", ""))
+    return "\n".join(parts) if parts else None
+
+
+async def _update_task_status(task_id: uuid.UUID, status: RunStatus) -> None:
+    """Update RunTask status in DB."""
+    container = get_app_container()
+    async with get_db_session_local() as db:
+        await container.run_task_service.transition_status(db, task_id=task_id, to_status=status)
+
+
+# ---------------------------------------------------------------------------
+# Public API
+# ---------------------------------------------------------------------------
+
+async def call_agent(inp: CallAgentInput) -> CallAgentOutput:
+    """
+    Call agent exactly like frontend does, with full session/DB/event handling.
+
+    Mirrors UserQueryHandler._handle_v1_query() (query_handler.py:193-309):
+      [1] Get or create session in DB
+      [2] Resolve LLM config (model, provider, API key)
+      [3] Validate credits
+      [4] Create AgentRunTask in DB
+      [5] Create IIAgent via AgentFactory (with skills, connectors)
+      [6] Process file uploads -> images + files
+      [7] Run agent with streaming, collect events
+      [8] Update task status in DB
+
+    Returns:
+        CallAgentOutput with session_id, events, final content, and status.
+    """
+    collected_events: list[AppEvent] = []
+    final_status = RunStatus.FAILED
+    run_output: Optional[RunOutput] = None
+    run_id_str: Optional[str] = None
+
+    try:
+        # [0] Ensure user exists
+        await _ensure_user_exists(inp.user_id)
+
+        # [1] Session
+        container = get_app_container()
+        session_uuid = uuid.uuid5(uuid.NAMESPACE_DNS, str(inp.session_id)) if inp.session_id else uuid.uuid4()
+
+        user_uuid = uuid.UUID(inp.user_id)
+        async with get_db_session_local() as db:
+            session_info = await container.session_service.find_session_by_id(db, session_uuid)
+            if not session_info:
+                session_info = await container.session_service.create_new_session(
+                    db, session_uuid, user_uuid, "v1"
+                )
+
+        session_id_str = str(session_info.id)
+        await _update_session_meta(session_info, inp)
+
+        # [2] LLM Config
+        llm_config = await _resolve_llm_config(
+            session_id=session_info.id,
+            user_id=inp.user_id,
+            source=inp.source,
+            model_id=inp.model_id,
+            provider=inp.provider
+
+        )
+
+        # [3] Credits
+        if not await _check_credits(llm_config, inp.user_id):
+            return CallAgentOutput(
+                session_id=session_id_str, run_id="", status=RunStatus.FAILED,
+                content=None, events=[], error="Insufficient credits",
+            )
+
+        # [4] Run task
+        task = await _create_run_task(session_info, inp)
+        if task is None:
+            return CallAgentOutput(
+                session_id=session_id_str, run_id="", status=RunStatus.FAILED,
+                content=None, events=[], error="Another task is already running",
+            )
+        run_id_str = str(task.id)
+
+        # [5] Create agent
+        agent = await _create_agent(inp, session_id_str, llm_config)
+
+        # [6] Files
+        images, files = await _process_files(inp, session_id_str)
+
+        # [7] Run + collect events
+        event_stream = await agent.arun(
+            inp.text,
+            stream=True,
+            stream_events=True,
+            run_id=run_id_str,
+            images=images or None,
+            files=files or None,
+            yield_run_output=True,
+        )
+
+        async for event in event_stream:
+            realtime_event = convert_agent_event_to_realtime(
+                event=event,
+                run_id=uuid.UUID(run_id_str),
+                session_id=session_info.id,
+            )
+            if realtime_event:
+                collected_events.append(realtime_event)
+
+            if isinstance(event, RunCompletedEvent):
+                final_status = event.status or RunStatus.COMPLETED
+            if isinstance(event, RunOutput):
+                run_output = event
+                if final_status == RunStatus.FAILED:
+                    final_status = RunStatus.COMPLETED
+
+        # [8] Update task status
+        await _update_task_status(task.id, final_status)
+
+    except Exception as e:
+        logger.error(f"call_agent error: {e}", exc_info=True)
+        if run_id_str:
+            try:
+                await _update_task_status(uuid.UUID(run_id_str), RunStatus.FAILED)
+            except Exception:
+                pass
+
+        return CallAgentOutput(
+            session_id=inp.session_id or "",
+            run_id=run_id_str or "",
+            status=RunStatus.FAILED,
+            content=None,
+            events=collected_events,
+            error=str(e),
+        )
+
+    content = await _extract_content(collected_events, run_output)
+    media = _extract_media(collected_events, run_output)
+
+    return CallAgentOutput(
+        session_id=session_id_str,
+        run_id=run_id_str or "",
+        status=final_status,
+        content=content,
+        events=collected_events,
+        media=media,
+        run_output=run_output,
+    )
+
+
+async def call_agent_stream(inp: CallAgentInput) -> AsyncIterator[AppEvent]:
+    """
+    Same as call_agent() but yields AppEvent one-by-one for real-time streaming.
+
+    Each yielded event has the same format that frontend receives via Socket.IO,
+    so you can forward them directly to any consumer.
+    """
+    from ii_agent.realtime.events.app_events import SystemErrorEvent, ErrorCode, EventGroup
+
+    # [0] Ensure user exists
+    await _ensure_user_exists(inp.user_id)
+
+    # [1] Session
+    container = get_app_container()
+    session_uuid = uuid.uuid5(uuid.NAMESPACE_DNS, str(inp.session_id)) if inp.session_id else uuid.uuid4()
+    user_uuid = uuid.UUID(inp.user_id)
+
+    async with get_db_session_local() as db:
+        session_info = await container.session_service.find_session_by_id(db, session_uuid)
+        if not session_info:
+            session_info = await container.session_service.create_new_session(
+                db, session_uuid, user_uuid, "v1"
+            )
+
+    session_id_str = str(session_info.id)
+    await _update_session_meta(session_info, inp)
+
+    # [2] LLM Config
+    llm_config = await _resolve_llm_config(
+        session_id=session_info.id,
+        user_id=inp.user_id,
+        source=inp.source,
+        model_id=inp.model_id,
+        provider=inp.provider,
+    )
+
+    # [3] Credits
+    if not await _check_credits(llm_config, inp.user_id):
+        yield SystemErrorEvent(
+            group=EventGroup.SYSTEM,
+            name="system.error",
+            session_id=session_info.id,
+            code=ErrorCode.INSUFFICIENT_CREDITS,
+            message="Insufficient credits",
+        )
+        return
+
+    # [4] Run task
+    task = await _create_run_task(session_info, inp)
+    if task is None:
+        yield SystemErrorEvent(
+            group=EventGroup.SYSTEM,
+            name="system.error",
+            session_id=session_info.id,
+            code=ErrorCode.CONCURRENT_OPERATION,
+            message="Another task is already running",
+        )
+        return
+
+    run_id_str = str(task.id)
+
+    # [5] Create agent
+    agent = await _create_agent(inp, session_id_str, llm_config)
+
+    # [6] Files
+    images, files = await _process_files(inp, session_id_str)
+
+    # [7] Run + stream events
+    final_status = RunStatus.FAILED
+    try:
+        event_stream = await agent.arun(
+            inp.text,
+            stream=True,
+            stream_events=True,
+            run_id=run_id_str,
+            images=images or None,
+            files=files or None,
+            yield_run_output=False,
+        )
+
+        async for event in event_stream:
+            realtime_event = convert_agent_event_to_realtime(
+                event=event,
+                run_id=uuid.UUID(run_id_str),
+                session_id=session_info.id,
+            )
+            if realtime_event:
+                yield realtime_event
+
+            if isinstance(event, RunCompletedEvent):
+                final_status = event.status or RunStatus.COMPLETED
+            if isinstance(event, RunOutput):
+                if final_status == RunStatus.FAILED:
+                    final_status = RunStatus.COMPLETED
+
+    except Exception as e:
+        logger.error(f"call_agent_stream error: {e}", exc_info=True)
+        yield SystemErrorEvent(
+            group=EventGroup.SYSTEM,
+            name="system.error",
+            session_id=session_info.id,
+            run_id=uuid.UUID(run_id_str),
+            code=ErrorCode.UNEXPECTED_ERROR,
+            message=str(e),
+        )
+
+    # [8] Update task status
+    await _update_task_status(task.id, final_status)
diff --git a/src/ii_agent/ii_claw/custom_agent/__init__.py b/src/ii_agent/ii_claw/custom_agent/__init__.py
new file mode 100644
index 000000000..4ade0fa80
--- /dev/null
+++ b/src/ii_agent/ii_claw/custom_agent/__init__.py
@@ -0,0 +1,20 @@
+"""Custom agent factories for skill_creator, connector_tool, and system_prompt."""
+
+from ii_agent.ii_claw.custom_agent.factory import (
+    resolve_skill_creator,
+    resolve_connector_tool,
+    resolve_system_prompt,
+)
+from ii_agent.ii_claw.custom_agent.loader import (
+    CustomAgentOverrides,
+    process_custom_agent,
+)
+
+__all__ = [
+    "resolve_skill_creator",
+    "resolve_connector_tool",
+    "resolve_system_prompt",
+    "CustomAgentOverrides",
+    "process_custom_agent",
+]
+
diff --git a/src/ii_agent/ii_claw/custom_agent/factory.py b/src/ii_agent/ii_claw/custom_agent/factory.py
new file mode 100644
index 000000000..cfb758310
--- /dev/null
+++ b/src/ii_agent/ii_claw/custom_agent/factory.py
@@ -0,0 +1,166 @@
+"""
+Factory functions for resolving skill_creator, connector_tool, and system_prompt
+based on CallAgentInput configuration.
+
+Modes (controlled via CallAgentInput fields):
+  - None       → skip (pass None to agent_factory.create_agent)
+  - "default"  → use production defaults (DbSkillCreator / ConnectorTool)
+  - "custom_skill" / "custom_connector" → custom loading (currently same as default, placeholder for future)
+"""
+
+from __future__ import annotations
+
+import platform as _platform
+from datetime import datetime as _dt
+from typing import TYPE_CHECKING, Literal, Optional
+
+from ii_agent.core.logger import logger
+from ii_agent.agents.prompts.agent_prompts import get_custom_agent_base_prompt
+
+if TYPE_CHECKING:
+    from ii_agent.ii_claw.call_agent import CallAgentInput
+    from ii_agent.agents.connector.base import BaseConnectorTool
+    from ii_agent.agents.skills.base import SkillCreator
+
+# ---------------------------------------------------------------------------
+# Type aliases for mode literals
+# ---------------------------------------------------------------------------
+SkillMode = Optional[Literal["default", "custom_skill", "default_and_custom_skill"]]
+ConnectorMode = Optional[Literal["default", "custom_connector", "default_and_custom_connector"]]
+
+
+# ---------------------------------------------------------------------------
+# skill_creator
+# ---------------------------------------------------------------------------
+
+def resolve_skill_creator(
+    inp: "CallAgentInput",
+    mode: SkillMode = "default",
+) -> Optional["SkillCreator"]:
+    """Return a SkillCreator instance based on *mode*.
+
+    Args:
+        inp: The call-agent input (provides user_id, etc.).
+        mode:
+            - None                      → no skill creator (return None)
+            - "default"                 → DbSkillCreator with production storage
+            - "custom_skill"            → placeholder, currently same as "default"
+            - "default_and_custom_skill" → both default + custom combined
+
+    Returns:
+        A SkillCreator or None.
+    """
+    if mode is None:
+        return None
+
+    from ii_agent.core.container import get_app_container
+    from ii_agent.agents.skills.db_creator import DbSkillCreator
+
+    container = get_app_container()
+    storage = container.storage_service
+
+    if mode == "default":
+        return DbSkillCreator(user_id=inp.user_id, storage=storage)
+
+    if mode == "custom_skill":
+        # TODO: implement custom skill loading logic
+        logger.info(f"custom_skill mode requested for user={inp.user_id}, falling back to default")
+        return DbSkillCreator(user_id=inp.user_id, storage=storage)
+
+    if mode == "default_and_custom_skill":
+        # TODO: merge default DbSkillCreator + custom skill loading
+        # Currently falls back to default until custom logic is implemented
+        logger.info(f"default_and_custom_skill mode requested for user={inp.user_id}, falling back to default")
+        return DbSkillCreator(user_id=inp.user_id, storage=storage)
+
+    logger.warning(f"Unknown skill_mode={mode!r}, returning None")
+    return None
+
+
+# ---------------------------------------------------------------------------
+# connector_tool
+# ---------------------------------------------------------------------------
+
+def resolve_connector_tool(
+    inp: "CallAgentInput",
+    mode: ConnectorMode = "default",
+) -> Optional["BaseConnectorTool"]:
+    """Return a BaseConnectorTool instance based on *mode*.
+
+    Args:
+        inp: The call-agent input (provides user_id, github_repository, etc.).
+        mode:
+            - None                          → no connector (return None)
+            - "default"                     → ConnectorTool with production defaults
+            - "custom_connector"            → placeholder, currently same as "default"
+            - "default_and_custom_connector" → both default + custom combined
+
+    Returns:
+        A BaseConnectorTool or None.
+    """
+    if mode is None:
+        return None
+
+    from ii_agent.agents.connector.connector_tool import ConnectorTool
+
+    if mode == "default":
+        return ConnectorTool(
+            user_id=inp.user_id,
+            default_repository=inp.github_repository,
+        )
+
+    if mode == "custom_connector":
+        # TODO: implement custom connector loading logic
+        logger.info(f"custom_connector mode requested for user={inp.user_id}, falling back to default")
+        return ConnectorTool(
+            user_id=inp.user_id,
+            default_repository=inp.github_repository,
+        )
+
+    if mode == "default_and_custom_connector":
+        # TODO: merge default ConnectorTool + custom connector loading
+        # Currently falls back to default until custom logic is implemented
+        logger.info(f"default_and_custom_connector mode requested for user={inp.user_id}, falling back to default")
+        return ConnectorTool(
+            user_id=inp.user_id,
+            default_repository=inp.github_repository,
+        )
+
+    logger.warning(f"Unknown connector_mode={mode!r}, returning None")
+    return None
+
+
+# ---------------------------------------------------------------------------
+# system_prompt
+# ---------------------------------------------------------------------------
+
+def resolve_system_prompt(
+    inp: "CallAgentInput",
+) -> Optional[str]:
+    """Build a custom system prompt if agent_type is CUSTOM, else return None.
+
+    When agent_type is CUSTOM, returns the simplified base prompt with the
+    user's custom_system_prompt injected as specialized instructions.
+    For all other agent types returns None so agent_factory falls back to
+    its default prompt generation via get_system_prompt_for_agent_type().
+    """
+    from ii_agent.agents.types import AgentType
+
+    if inp.agent_type != AgentType.CUSTOM:
+        return None
+
+    base = get_custom_agent_base_prompt()
+    specialized = ""
+    if inp.custom_system_prompt:
+        specialized = (
+            "\n# CUSTOM INSTRUCTIONS\n"
+            "<custom_instructions>\n"
+            f"{inp.custom_system_prompt}\n"
+            "</custom_instructions>\n"
+        )
+
+    return base.format(
+        platform=_platform.system(),
+        today=_dt.now().strftime("%Y-%m-%d"),
+        specialized_instructions=specialized,
+    )
diff --git a/src/ii_agent/ii_claw/custom_agent/loader.py b/src/ii_agent/ii_claw/custom_agent/loader.py
new file mode 100644
index 000000000..6832f6032
--- /dev/null
+++ b/src/ii_agent/ii_claw/custom_agent/loader.py
@@ -0,0 +1,64 @@
+"""Load custom agent config from DB and return overrides for CallAgentInput."""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+from typing import Any, Dict, Optional
+
+from sqlalchemy import select
+
+from ii_agent.core.logger import logger
+from ii_agent.core.db import get_db_session_local
+from ii_agent.users.models import UserAgent
+
+
+@dataclass
+class CustomAgentOverrides:
+    """Fields extracted from UserAgent DB row to inject into CallAgentInput."""
+
+    agent_type_value: str = "custom"  # always "custom"
+    model_id: Optional[str] = None
+    custom_system_prompt: Optional[str] = None
+    tool_args: Optional[Dict[str, Any]] = None
+    skill_mode: Optional[str] = "default"
+    connector_mode: Optional[str] = "default"
+
+
+async def process_custom_agent(
+    agent_id: str,
+    user_id: str,
+) -> Optional[CustomAgentOverrides]:
+    """Load a UserAgent row by *agent_id* + *user_id* and return overrides.
+
+    Returns None if no matching active agent is found.
+    """
+    try:
+        async with get_db_session_local() as db:
+            result = await db.execute(
+                select(UserAgent).where(
+                    UserAgent.id == agent_id,
+                    UserAgent.user_id == user_id,
+                    UserAgent.is_active == True,
+                )
+            )
+            agent_row = result.scalars().first()
+
+            if agent_row is None:
+                logger.warning(
+                    "No active UserAgent found: agent_id=%s user_id=%s",
+                    agent_id,
+                    user_id,
+                )
+                return None
+
+            return CustomAgentOverrides(
+                model_id=agent_row.model_id,
+                custom_system_prompt=agent_row.system_prompt,
+                tool_args=agent_row.tool_args,
+                skill_mode=agent_row.skill_mode,
+                connector_mode=agent_row.connector_mode,
+            )
+
+    except Exception as e:
+        logger.error("Failed to load custom agent: %s", e, exc_info=True)
+        return None
diff --git a/src/ii_agent/ii_claw/custom_agent/models.py b/src/ii_agent/ii_claw/custom_agent/models.py
new file mode 100644
index 000000000..4c92e6761
--- /dev/null
+++ b/src/ii_agent/ii_claw/custom_agent/models.py
@@ -0,0 +1,94 @@
+"""User agents settings Pydantic models."""
+
+from datetime import datetime
+from typing import Any, Dict, List, Optional
+
+from pydantic import BaseModel, ConfigDict, Field
+
+
+class UserAgentCreate(BaseModel):
+    """Request to create a custom agent."""
+
+    agent_name: str = Field(
+        ...,
+        max_length=128,
+        description="Display name for the agent (unique per user)",
+    )
+    tag: Optional[str] = Field(None, max_length=64, description="Short tag/label for the agent")
+    model_id: Optional[str] = Field(
+        None,
+        description="Model override (e.g. 'claude-sonnet-4-20250514'). NULL uses session default",
+    )
+    system_prompt: Optional[str] = Field(None, description="Custom system prompt")
+    tool_args: Optional[Dict[str, Any]] = Field(
+        None,
+        description="Tool toggles, e.g. {'media_generation': false, 'browser': true}",
+    )
+    skill_mode: Optional[str] = Field(
+        "default",
+        description="Skill mode: 'default', 'custom_skill', 'default_and_custom_skill', or null",
+    )
+    connector_mode: Optional[str] = Field(
+        "default",
+        description="Connector mode: 'default', 'custom_connector', 'default_and_custom_connector', or null",
+    )
+    skill_config: Optional[Dict[str, Any]] = Field(
+        None, description="Custom skill config (e.g. skill IDs, params)"
+    )
+    connector_config: Optional[Dict[str, Any]] = Field(
+        None, description="Custom connector config (e.g. connector IDs, params)"
+    )
+    metadata: Optional[Dict[str, Any]] = Field(
+        None, description="Arbitrary metadata"
+    )
+
+
+class UserAgentUpdate(BaseModel):
+    """Request to update a custom agent. All fields optional for partial update."""
+
+    agent_name: Optional[str] = Field(None, max_length=128, description="New display name")
+    tag: Optional[str] = Field(None, max_length=64, description="Short tag/label for the agent")
+    model_id: Optional[str] = Field(None, description="Model override")
+    system_prompt: Optional[str] = Field(None, description="Custom system prompt")
+    tool_args: Optional[Dict[str, Any]] = Field(None, description="Tool toggles")
+    skill_mode: Optional[str] = Field(None, description="Skill mode")
+    connector_mode: Optional[str] = Field(None, description="Connector mode")
+    skill_config: Optional[Dict[str, Any]] = Field(None, description="Custom skill config")
+    connector_config: Optional[Dict[str, Any]] = Field(None, description="Custom connector config")
+    metadata: Optional[Dict[str, Any]] = Field(None, description="Arbitrary metadata")
+    is_active: Optional[bool] = Field(None, description="Enable/disable the agent")
+
+
+class UserAgentInfo(BaseModel):
+    """User agent response."""
+
+    id: str = Field(..., description="Unique agent ID")
+    agent_name: str = Field(..., description="Display name")
+    tag: Optional[str] = Field(None, max_length=64, description="Short tag/label for the agent")
+    model_id: Optional[str] = Field(None, description="Model override")
+    system_prompt: Optional[str] = Field(None, description="Custom system prompt")
+    tool_args: Optional[Dict[str, Any]] = Field(None, description="Tool toggles")
+    skill_mode: Optional[str] = Field(None, description="Skill mode")
+    connector_mode: Optional[str] = Field(None, description="Connector mode")
+    skill_config: Optional[Dict[str, Any]] = Field(None, description="Custom skill config")
+    connector_config: Optional[Dict[str, Any]] = Field(None, description="Custom connector config")
+    metadata: Optional[Dict[str, Any]] = Field(None, description="Arbitrary metadata")
+    is_active: bool = Field(..., description="Whether the agent is active")
+    created_at: datetime = Field(..., description="Creation timestamp")
+    updated_at: Optional[datetime] = Field(None, description="Last update timestamp")
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class UserAgentList(BaseModel):
+    """List of user agents response."""
+
+    agents: List[UserAgentInfo] = Field(..., description="List of agents")
+    total: int = Field(..., description="Total count")
+
+
+class UserAgentDeleteResponse(BaseModel):
+    """Response for agent deletion."""
+
+    success: bool = Field(..., description="Whether deletion was successful")
+    message: str = Field(..., description="Status message")
diff --git a/src/ii_agent/ii_claw/custom_agent/service.py b/src/ii_agent/ii_claw/custom_agent/service.py
new file mode 100644
index 000000000..56e949c79
--- /dev/null
+++ b/src/ii_agent/ii_claw/custom_agent/service.py
@@ -0,0 +1,210 @@
+"""User agents service layer.
+
+Business logic for managing user-defined custom agents.
+"""
+
+import uuid
+from datetime import datetime, timezone
+from typing import Optional
+
+from sqlalchemy import and_, select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from ii_agent.users.models import UserAgent
+from ii_agent.core.logger import logger
+
+from ii_agent.ii_claw.custom_agent.models import UserAgentCreate, UserAgentUpdate, UserAgentInfo, UserAgentList
+
+
+def _to_agent_info(agent: UserAgent) -> UserAgentInfo:
+    """Convert database UserAgent model to response model."""
+    return UserAgentInfo(
+        id=str(agent.id),
+        agent_name=agent.agent_name,
+        tag=agent.tag,
+        model_id=agent.model_id,
+        system_prompt=agent.system_prompt,
+        tool_args=agent.tool_args,
+        skill_mode=agent.skill_mode,
+        connector_mode=agent.connector_mode,
+        skill_config=agent.skill_config,
+        connector_config=agent.connector_config,
+        metadata=agent.agent_metadata,
+        is_active=agent.is_active,
+        created_at=agent.created_at,
+        updated_at=agent.updated_at,
+    )
+
+
+async def create_user_agent(
+    *,
+    db_session: AsyncSession,
+    user_id: str,
+    agent_in: UserAgentCreate,
+) -> UserAgentInfo:
+    """Create a new custom agent for a user.
+
+    Raises:
+        ValueError: If an agent with the same name already exists.
+    """
+    # Check for duplicate name
+    existing = await db_session.execute(
+        select(UserAgent).where(
+            and_(
+                UserAgent.user_id == user_id,
+                UserAgent.agent_name == agent_in.agent_name,
+            )
+        )
+    )
+    if existing.scalar_one_or_none():
+        raise ValueError(
+            f"Agent '{agent_in.agent_name}' already exists. "
+            f"Choose a different name or delete the existing one first."
+        )
+
+    agent = UserAgent(
+        user_id=uuid.UUID(user_id) if isinstance(user_id, str) else user_id,
+        agent_name=agent_in.agent_name,
+        tag=agent_in.tag,
+        model_id=agent_in.model_id,
+        system_prompt=agent_in.system_prompt,
+        tool_args=agent_in.tool_args or {},
+        skill_mode=agent_in.skill_mode,
+        connector_mode=agent_in.connector_mode,
+        skill_config=agent_in.skill_config,
+        connector_config=agent_in.connector_config,
+        agent_metadata=agent_in.metadata,
+        is_active=True,
+    )
+
+    db_session.add(agent)
+    await db_session.commit()
+    await db_session.refresh(agent)
+
+    logger.info(f"Created custom agent '{agent.agent_name}' (id={agent.id}) for user {user_id}")
+
+    return _to_agent_info(agent)
+
+
+async def list_user_agents(
+    *,
+    db_session: AsyncSession,
+    user_id: str,
+    active_only: bool = False,
+) -> UserAgentList:
+    """List all custom agents for a user."""
+    query = select(UserAgent).where(UserAgent.user_id == user_id)
+    if active_only:
+        query = query.where(UserAgent.is_active == True)
+    query = query.order_by(UserAgent.created_at.desc())
+
+    result = await db_session.execute(query)
+    agents = list(result.scalars().all())
+
+    return UserAgentList(
+        agents=[_to_agent_info(a) for a in agents],
+        total=len(agents),
+    )
+
+
+async def get_user_agent(
+    *,
+    db_session: AsyncSession,
+    agent_id: str,
+    user_id: str,
+) -> Optional[UserAgentInfo]:
+    """Get a single custom agent by ID (must belong to user)."""
+    result = await db_session.execute(
+        select(UserAgent).where(
+            and_(
+                UserAgent.id == agent_id,
+                UserAgent.user_id == user_id,
+            )
+        )
+    )
+    agent = result.scalar_one_or_none()
+    return _to_agent_info(agent) if agent else None
+
+
+async def update_user_agent(
+    *,
+    db_session: AsyncSession,
+    agent_id: str,
+    user_id: str,
+    agent_update: UserAgentUpdate,
+) -> Optional[UserAgentInfo]:
+    """Update a custom agent. Only provided (non-None) fields are changed.
+
+    Raises:
+        ValueError: If renaming to a name that already exists.
+    """
+    result = await db_session.execute(
+        select(UserAgent).where(
+            and_(
+                UserAgent.id == agent_id,
+                UserAgent.user_id == user_id,
+            )
+        )
+    )
+    agent = result.scalar_one_or_none()
+    if not agent:
+        return None
+
+    # If renaming, check for duplicate
+    if agent_update.agent_name is not None and agent_update.agent_name != agent.agent_name:
+        dup = await db_session.execute(
+            select(UserAgent).where(
+                and_(
+                    UserAgent.user_id == user_id,
+                    UserAgent.agent_name == agent_update.agent_name,
+                    UserAgent.id != agent_id,
+                )
+            )
+        )
+        if dup.scalar_one_or_none():
+            raise ValueError(f"Agent '{agent_update.agent_name}' already exists.")
+
+    # Apply only provided fields
+    update_data = agent_update.model_dump(exclude_unset=True)
+    for field, value in update_data.items():
+        if field == "metadata":
+            setattr(agent, "agent_metadata", value)
+        else:
+            setattr(agent, field, value)
+
+    agent.updated_at = datetime.now(timezone.utc)
+
+    await db_session.commit()
+    await db_session.refresh(agent)
+
+    logger.info(f"Updated custom agent '{agent.agent_name}' (id={agent.id})")
+
+    return _to_agent_info(agent)
+
+
+async def delete_user_agent(
+    *,
+    db_session: AsyncSession,
+    agent_id: str,
+    user_id: str,
+) -> bool:
+    """Delete a custom agent. Returns True if deleted, False if not found."""
+    result = await db_session.execute(
+        select(UserAgent).where(
+            and_(
+                UserAgent.id == agent_id,
+                UserAgent.user_id == user_id,
+            )
+        )
+    )
+    agent = result.scalar_one_or_none()
+    if not agent:
+        return False
+
+    agent_name = agent.agent_name
+    await db_session.delete(agent)
+    await db_session.commit()
+
+    logger.info(f"Deleted custom agent '{agent_name}' (id={agent_id}) for user {user_id}")
+
+    return True
diff --git a/src/ii_agent/ii_claw/models.py b/src/ii_agent/ii_claw/models.py
new file mode 100644
index 000000000..8544a1368
--- /dev/null
+++ b/src/ii_agent/ii_claw/models.py
@@ -0,0 +1,35 @@
+"""Shared Pydantic models for the AI Backend."""
+
+from pydantic import BaseModel
+
+
+class Sender(BaseModel):
+    platform_id: str
+    display_name: str
+    internal_user: str | None = None
+
+
+class ReplyTo(BaseModel):
+    channel: str
+    recipient: str
+    thread_id: str | None = None
+
+
+class InboundMessage(BaseModel):
+    """Payload schema matching II-Claw's forward_to_external_webhook output."""
+    user_id: str
+    agent_id: str | None = None
+    channel: str
+    instance_name: str
+    platform_message_id: str | None = None
+    sender: Sender | None = None
+    content_type: str
+    text: str | None = None
+    media_url: str | None = None
+    media_filename: str | None = None
+    media_duration_seconds: int | None = None
+    is_group: bool = False
+    thread_id: str | None = None
+    timestamp: str | None = None
+    metadata: dict | None = None
+    reply_to: ReplyTo | None = None
diff --git a/src/ii_agent/ii_claw/run.py b/src/ii_agent/ii_claw/run.py
new file mode 100644
index 000000000..4c5a3d047
--- /dev/null
+++ b/src/ii_agent/ii_claw/run.py
@@ -0,0 +1,187 @@
+"""
+FastAPI router for testing call_agent / call_agent_stream.
+
+Usage:
+    # Start server:
+    python -m ii_agent.ii_claw.run
+
+    # POST /ii_claw/run  (blocking, returns full result)
+    curl -X POST http://localhost:8686/ii_claw/run \
+      -H "Content-Type: application/json" \
+      -d '{"text": "What are AI agent trends?", "agent_type": "general"}'
+
+    # POST /ii_claw/stream  (SSE, streams events)
+    curl -N http://localhost:8686/ii_claw/stream \
+      -H "Content-Type: application/json" \
+      -d '{"text": "What are AI agent trends?", "agent_type": "fast_research"}'
+"""
+
+from __future__ import annotations
+
+import json
+from typing import Any, Dict, List, Optional
+
+import uvicorn
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel, Field
+from sse_starlette.sse import EventSourceResponse
+
+from ii_agent.agents.types import AgentType
+from ii_agent.ii_claw.call_agent import (
+    CallAgentInput,
+    CallAgentOutput,
+    call_agent,
+    call_agent_stream,
+)
+
+# ---------------------------------------------------------------------------
+# Pydantic request / response models
+# ---------------------------------------------------------------------------
+
+
+class AgentRequest(BaseModel):
+    """Request body for /ii_claw/run and /ii_claw/stream."""
+
+    text: str
+    user_id: str = "cli-user"
+    model_id: Optional[str] = None
+    source: str = "system"  # "user" | "system"
+    agent_type: str = "general"
+    tool_args: Dict[str, Any] = Field(default_factory=dict)
+    file_ids: List[str] = Field(default_factory=list)
+    session_id: Optional[str] = None
+    metadata: Optional[Dict[str, Any]] = None
+    github_repository: Optional[Dict[str, str]] = None
+
+    def to_call_input(self) -> CallAgentInput:
+        return CallAgentInput(
+            user_id=self.user_id,
+            text=self.text,
+            model_id=self.model_id,
+            source=self.source,
+            agent_type=AgentType(self.agent_type),
+            tool_args=self.tool_args,
+            file_ids=self.file_ids,
+            session_id=self.session_id,
+            metadata=self.metadata,
+            github_repository=self.github_repository,
+        )
+
+
+class FileAttachmentResponse(BaseModel):
+    """A file delivered to the user."""
+    name: str
+    url: str
+    file_type: str = "documents"
+
+
+class MediaResponse(BaseModel):
+    """All media/files produced by the agent."""
+    images: List[Dict[str, Any]] = Field(default_factory=list)
+    videos: List[Dict[str, Any]] = Field(default_factory=list)
+    audio: List[Dict[str, Any]] = Field(default_factory=list)
+    files: List[FileAttachmentResponse] = Field(default_factory=list)
+
+
+class AgentResponse(BaseModel):
+    """Response body for /ii_claw/run."""
+
+    session_id: str
+    run_id: str
+    status: str
+    content: Optional[str] = None
+    media: MediaResponse = Field(default_factory=MediaResponse)
+    events_count: int = 0
+    events: List[dict] = Field(default_factory=list)
+    error: Optional[str] = None
+
+
+# ---------------------------------------------------------------------------
+# FastAPI app + router
+# ---------------------------------------------------------------------------
+
+app = FastAPI(title="II-Claw Agent Test Server", version="0.1.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+def _output_to_response(output: CallAgentOutput) -> AgentResponse:
+    """Convert CallAgentOutput to JSON-serializable response."""
+    media = MediaResponse()
+    if output.media:
+        media = MediaResponse(
+            images=output.media.images,
+            videos=output.media.videos,
+            audio=output.media.audio,
+            files=[
+                FileAttachmentResponse(name=f.name, url=f.url, file_type=f.file_type)
+                for f in output.media.files
+            ],
+        )
+
+    return AgentResponse(
+        session_id=output.session_id,
+        run_id=output.run_id,
+        status=output.status.value if output.status else "unknown",
+        content=output.content,
+        media=media,
+        events_count=len(output.events),
+        events=[e.model_dump(mode="json") for e in output.events],
+        error=output.error,
+    )
+
+
+@app.post("/ii_claw/run", response_model=AgentResponse)
+async def run_agent(req: AgentRequest):
+    """Run agent (blocking), return full result with all events."""
+    inp = req.to_call_input()
+    output = await call_agent(inp)
+
+    if output.error:
+        return JSONResponse(
+            status_code=500,
+            content=_output_to_response(output).model_dump(mode="json"),
+        )
+
+    return _output_to_response(output)
+
+
+@app.post("/ii_claw/stream")
+async def stream_agent(req: AgentRequest):
+    """Run agent with SSE streaming. Each event is an AppEvent JSON."""
+    inp = req.to_call_input()
+
+    async def event_generator():
+        async for event in call_agent_stream(inp):
+            data = event.model_dump(mode="json")
+            yield {
+                "event": getattr(event, "name", "message"),
+                "data": json.dumps(data, default=str),
+            }
+
+    return EventSourceResponse(event_generator())
+
+
+@app.get("/health")
+async def health():
+    return {"status": "ok"}
+
+
+# ---------------------------------------------------------------------------
+# Entrypoint
+# ---------------------------------------------------------------------------
+
+if __name__ == "__main__":
+    uvicorn.run(
+        "ii_agent.ii_claw.run:app",
+        host="0.0.0.0",
+        port=8686,
+        reload=False,
+    )
diff --git a/src/ii_agent/ii_claw/run_args.py b/src/ii_agent/ii_claw/run_args.py
new file mode 100644
index 000000000..f7f082fc6
--- /dev/null
+++ b/src/ii_agent/ii_claw/run_args.py
@@ -0,0 +1,198 @@
+"""
+Simple runner for call_agent / call_agent_stream.
+
+Usage:
+    # Non-streaming (collect all, print final):
+    python -m ii_agent.ii_claw.run "Build a portfolio website" --agent-type website_build
+
+    # Streaming (print events as they arrive):
+    python -m ii_agent.ii_claw.run "What are AI agent trends?" --agent-type fast_research --stream
+
+    # With tool toggles:
+    python -m ii_agent.ii_claw.run "Create a todo app" --agent-type website_build --browser
+
+    # With specific model:
+    python -m ii_agent.ii_claw.run "Hello" --model-id claude-sonnet-4-20250514
+
+    # Multi-turn (reuse session):
+    python -m ii_agent.ii_claw.run "Add dark mode" --session-id <uuid-from-previous-run>
+"""
+
+import argparse
+import asyncio
+import json
+import sys
+
+from ii_agent.agents.types import AgentType
+from ii_agent.tasks.types import RunStatus
+from ii_agent.ii_claw.call_agent import CallAgentInput, CallAgentOutput, call_agent, call_agent_stream
+
+
+def parse_args() -> argparse.Namespace:
+    parser = argparse.ArgumentParser(description="Run II-Agent from command line")
+
+    parser.add_argument("message", help="User message to send to agent")
+    parser.add_argument("--user-id", default="cli-user", help="User ID (default: cli-user)")
+    parser.add_argument(
+        "--model-id", default=None,
+        help="Model ID (e.g. claude-sonnet-4-20250514). Uses system default if not set.",
+    )
+    parser.add_argument(
+        "--source", choices=["user", "system"], default="system",
+        help="LLM source: 'user' (user API key) or 'system' (platform key). Default: system",
+    )
+    parser.add_argument(
+        "--agent-type", default="general",
+        choices=[t.value for t in AgentType],
+        help="Agent mode (default: general)",
+    )
+    parser.add_argument("--session-id", default=None, help="Session ID for multi-turn")
+    parser.add_argument("--stream", action="store_true", help="Stream events as they arrive")
+
+    # Tool toggles
+    parser.add_argument("--browser", action="store_true", help="Enable browser tools")
+    parser.add_argument("--media", action="store_true", help="Enable media generation tools")
+    parser.add_argument("--task-agent", action="store_true", help="Enable task delegation sub-agent")
+    parser.add_argument("--deep-research", action="store_true", help="Enable deep research tools")
+
+    return parser.parse_args()
+
+
+def _format_event(event) -> str:
+    """Format an AppEvent for terminal display."""
+    from ii_agent.realtime.events.app_events import (
+        AgentProcessingEvent,
+        AgentResponseDeltaEvent,
+        AgentResponseEvent,
+        AgentToolCallEvent,
+        AgentToolResultEvent,
+        AgentReasoningDeltaEvent,
+        AgentCompleteEvent,
+        SystemErrorEvent,
+    )
+
+    if isinstance(event, AgentProcessingEvent):
+        return f"[processing] {getattr(event, 'message', '')}"
+
+    if isinstance(event, AgentResponseDeltaEvent):
+        return getattr(event, "text", "")
+
+    if isinstance(event, AgentResponseEvent):
+        content = event.content if hasattr(event, "content") and isinstance(event.content, dict) else {}
+        return f"\n{content.get('text', '')}"
+
+    if isinstance(event, AgentToolCallEvent):
+        return f"\n[tool_call] {getattr(event, 'tool_name', '?')}"
+
+    if isinstance(event, AgentToolResultEvent):
+        tool_name = getattr(event, "tool_name", "?")
+        is_error = getattr(event, "is_error", False)
+        tag = "tool_error" if is_error else "tool_result"
+        content = event.content if hasattr(event, "content") and isinstance(event.content, dict) else {}
+        result_preview = str(content.get("result", ""))[:200]
+        return f"\n[{tag}] {tool_name}: {result_preview}"
+
+    if isinstance(event, AgentReasoningDeltaEvent):
+        text = getattr(event, "text", "")
+        return f"[thinking] {text}" if text else ""
+
+    if isinstance(event, AgentCompleteEvent):
+        return "\n[complete] Done"
+
+    if isinstance(event, SystemErrorEvent):
+        return f"\n[error] {getattr(event, 'message', 'Unknown error')}"
+
+    # Default: show event name
+    name = getattr(event, "name", type(event).__name__)
+    return f"\n[{name}]"
+
+
+async def run_streaming(inp: CallAgentInput) -> None:
+    """Run agent in streaming mode, print events as they arrive."""
+    print(f"--- Streaming agent ({inp.agent_type}) ---\n")
+
+    from ii_agent.realtime.events.app_events import AgentResponseDeltaEvent
+
+    session_id = None
+    async for event in call_agent_stream(inp):
+        if session_id is None and hasattr(event, "session_id"):
+            session_id = str(event.session_id)
+
+        text = _format_event(event)
+        if text:
+            # AGENT_RESPONSE_DELTA should print without newline for smooth streaming
+            if isinstance(event, AgentResponseDeltaEvent):
+                print(text, end="", flush=True)
+            else:
+                print(text, flush=True)
+
+    print(f"\n\n--- Session: {session_id} ---")
+
+
+async def run_blocking(inp: CallAgentInput) -> None:
+    """Run agent, wait for completion, print result."""
+    print(f"--- Running agent ({inp.agent_type}) ... ---\n")
+
+    output: CallAgentOutput = await call_agent(inp)
+
+    if output.error:
+        print(f"[ERROR] {output.error}", file=sys.stderr)
+        sys.exit(1)
+
+    print(f"Status:  {output.status.value}")
+    print(f"Session: {output.session_id}")
+    print(f"Run ID:  {output.run_id}")
+    print(f"Events:  {len(output.events)}")
+    print(f"\n--- Response ---\n")
+    from ii_agent.realtime.events.app_events import AgentResponseEvent, AgentToolCallEvent
+
+    content = output.content
+    if not content:
+        # Fallback: extract from AgentResponseEvent events
+        response_parts = []
+        for e in output.events:
+            if isinstance(e, AgentResponseEvent):
+                c = e.content if hasattr(e, "content") and isinstance(e.content, dict) else {}
+                response_parts.append(c.get("text", ""))
+        content = "\n".join(response_parts) if response_parts else "(no content)"
+    print(content)
+
+    # Print tool calls summary
+    tool_events = [e for e in output.events if isinstance(e, AgentToolCallEvent)]
+    if tool_events:
+        print(f"\n--- Tools used ({len(tool_events)}) ---")
+        for e in tool_events:
+            print(f"  - {getattr(e, 'tool_name', '?')}")
+
+
+async def main() -> None:
+    args = parse_args()
+
+    tool_args: dict[str, bool] = {}
+    if args.browser:
+        tool_args["browser"] = True
+    if args.media:
+        tool_args["media_generation"] = True
+    if args.task_agent:
+        tool_args["task_agent"] = True
+    if args.deep_research:
+        tool_args["deep_research"] = True
+
+    inp = CallAgentInput(
+        user_id=args.user_id,
+        text=args.message,
+        model_id=args.model_id,
+        source=args.source,
+        agent_type=AgentType(args.agent_type),
+        tool_args=tool_args,
+        session_id=args.session_id,
+    )
+
+    if args.stream:
+        await run_streaming(inp)
+    else:
+        await run_blocking(inp)
+
+
+if __name__ == "__main__":
+    asyncio.run(main())
diff --git a/src/ii_agent/users/models.py b/src/ii_agent/users/models.py
index c752f8494..1dc482d0e 100644
--- a/src/ii_agent/users/models.py
+++ b/src/ii_agent/users/models.py
@@ -6,10 +6,10 @@
 """
 
 from sqlalchemy.orm import Mapped, mapped_column, relationship
-from sqlalchemy import String, Boolean, ForeignKey, Index
+from sqlalchemy import String, Boolean, Text, ForeignKey, Index, UniqueConstraint
 from sqlalchemy.dialects.postgresql import JSONB, UUID
 from datetime import datetime, timezone
-from typing import Optional, TYPE_CHECKING
+from typing import Any, Dict, Optional, TYPE_CHECKING
 import uuid
 
 from ii_agent.core.db.base import Base, TimestampColumn
@@ -99,6 +99,9 @@ class User(Base):
     skills: Mapped[list["Skill"]] = relationship(
         "Skill", back_populates="user", cascade="all, delete-orphan"
     )
+    user_agents = relationship(
+        "UserAgent", back_populates="user", cascade="all, delete-orphan"
+    )
 
     # Add index for email lookup
     __table_args__ = (Index("idx_users_email", "email"),)
@@ -143,3 +146,62 @@ class WaitlistEntry(Base):
         TimestampColumn,
         default=lambda: datetime.now(timezone.utc),
     )
+
+class UserAgent(Base):
+    """User-defined custom agents.
+
+    Stores per-user agent configurations including custom system prompts,
+    tool toggles, skill/connector modes, and model preferences.
+    Used by the CUSTOM agent type flow in ii_claw.
+    """
+
+    __tablename__ = "user_agents"
+
+    # id, created_at, updated_at inherited from Base
+
+    user_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True), ForeignKey("users.id", ondelete="CASCADE"), nullable=False
+    )
+
+    # Identity
+    agent_name: Mapped[str] = mapped_column(String(128), nullable=False)
+    tag: Mapped[Optional[str]] = mapped_column(String(64), nullable=True)
+
+    # Model preference (e.g. "claude-sonnet-4-20250514"); NULL = use session default
+    model_id: Mapped[Optional[str]] = mapped_column(String, nullable=True)
+
+    # System prompt (injected as custom_system_prompt)
+    system_prompt: Mapped[Optional[str]] = mapped_column(Text, nullable=True)
+
+    # Tool toggles (same shape as CallAgentInput.tool_args)
+    # e.g. {"media_generation": false, "browser": true}
+    tool_args: Mapped[Optional[Dict[str, Any]]] = mapped_column(JSONB, nullable=True, default=dict)
+
+    # Skill / connector modes
+    # e.g. "default" | "custom_skill" | "default_and_custom_skill" | null
+    skill_mode: Mapped[Optional[str]] = mapped_column(String, nullable=True, default="default")
+    connector_mode: Mapped[Optional[str]] = mapped_column(String, nullable=True, default="default")
+
+    # Flexible JSONB bags for future extension
+    skill_config: Mapped[Optional[Dict[str, Any]]] = mapped_column(JSONB, nullable=True)
+    connector_config: Mapped[Optional[Dict[str, Any]]] = mapped_column(JSONB, nullable=True)
+    agent_metadata: Mapped[Optional[Dict[str, Any]]] = mapped_column("metadata", JSONB, nullable=True)
+
+    # Status
+    is_active: Mapped[bool] = mapped_column(Boolean, default=True)
+
+    # Relationships
+    user: Mapped["User"] = relationship("User", back_populates="user_agents")
+
+    # Indexes & constraints
+    __table_args__ = (
+        UniqueConstraint("user_id", "agent_name", name="uq_user_agents_user_name"),
+        Index("idx_user_agents_user_id", "user_id"),
+        Index("idx_user_agents_active", "user_id", "is_active"),
+    )
+
+    __table_args__ = (
+        UniqueConstraint("user_id", "agent_name", name="uq_user_agents_user_name"),
+        Index("idx_user_agents_user_id", "user_id"),
+        Index("idx_user_agents_active", "user_id", "is_active"),
+    )
\ No newline at end of file