支持渠道、指令（自定义前缀）和事件（启用/禁用）管理

src/components/settings/channel-commands-tab.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { Loader2, Save } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { getChatCommandPrefix, setChatCommandPrefix } from "@/lib/api"
+
+const BUILT_IN_COMMANDS = [
+  { name: "recent", descKey: "recentDesc" },
+  { name: "search <keyword>", descKey: "searchDesc" },
+  { name: "detail <id>", descKey: "detailDesc" },
+  { name: "today", descKey: "todayDesc" },
+  { name: "status", descKey: "statusDesc" },
+  { name: "help", descKey: "helpDesc" },
+] as const
+
+export function ChannelCommandsTab() {
+  const t = useTranslations("ChatChannelSettings.commands")
+  const [prefix, setPrefix] = useState("/")
+  const [inputPrefix, setInputPrefix] = useState("/")
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    getChatCommandPrefix()
+      .then((p) => {
+        setPrefix(p)
+        setInputPrefix(p)
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  const handleSavePrefix = useCallback(async () => {
+    const trimmed = inputPrefix.trim()
+    if (
+      trimmed.length === 0 ||
+      trimmed.length > 3 ||
+      /[a-zA-Z0-9]/.test(trimmed)
+    ) {
+      toast.error(t("prefixInvalid"))
+      return
+    }
+    setSaving(true)
+    try {
+      await setChatCommandPrefix(trimmed)
+      setPrefix(trimmed)
+      toast.success(t("prefixSaved"))
+    } catch {
+      toast.error(t("prefixSaveFailed"))
+    } finally {
+      setSaving(false)
+    }
+  }, [inputPrefix, t])
+
+  const dirty = inputPrefix !== prefix
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-muted-foreground gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">{t("prefixLabel")}</h3>
+        <p className="text-xs text-muted-foreground">
+          {t("prefixDescription")}
+        </p>
+        <div className="flex items-center gap-2">
+          <Input
+            value={inputPrefix}
+            onChange={(e) => setInputPrefix(e.target.value)}
+            className="w-20 text-center font-mono"
+            maxLength={3}
+          />
+          <Button
+            size="sm"
+            disabled={!dirty || saving}
+            onClick={handleSavePrefix}
+          >
+            {saving ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Save className="h-3.5 w-3.5 mr-1" />
+            )}
+            {t("save")}
+          </Button>
+        </div>
+      </section>
+
+      <section className="space-y-2">
+        <h3 className="text-sm font-medium">{t("title")}</h3>
+        <p className="text-xs text-muted-foreground">{t("description")}</p>
+        <div className="space-y-1">
+          {BUILT_IN_COMMANDS.map((cmd) => (
+            <div
+              key={cmd.name}
+              className="flex items-center justify-between rounded-lg border bg-card px-4 py-3"
+            >
+              <code className="text-sm font-mono">
+                {prefix}
+                {cmd.name}
+              </code>
+              <span className="text-xs text-muted-foreground">
+                {t(cmd.descKey)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  )
+}

src/components/settings/channel-events-tab.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { Loader2 } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+
+import { Switch } from "@/components/ui/switch"
+import { getChatEventFilter, setChatEventFilter } from "@/lib/api"
+
+const ALL_EVENT_TYPES = [
+  {
+    id: "session_started",
+    labelKey: "sessionStarted",
+    descKey: "sessionStartedDesc",
+  },
+  {
+    id: "turn_complete",
+    labelKey: "turnComplete",
+    descKey: "turnCompleteDesc",
+  },
+  { id: "error", labelKey: "error", descKey: "errorDesc" },
+  {
+    id: "status_disconnected",
+    labelKey: "statusDisconnected",
+    descKey: "statusDisconnectedDesc",
+  },
+  { id: "git_push", labelKey: "gitPush", descKey: "gitPushDesc" },
+  { id: "git_commit", labelKey: "gitCommit", descKey: "gitCommitDesc" },
+] as const
+
+const ALL_IDS = ALL_EVENT_TYPES.map((e) => e.id)
+
+function parseFilter(arr: string[] | null): Set<string> {
+  if (!arr) return new Set(ALL_IDS)
+  return new Set(arr)
+}
+
+export function ChannelEventsTab() {
+  const t = useTranslations("ChatChannelSettings.events")
+  const [enabledEvents, setEnabledEvents] = useState<Set<string>>(
+    new Set(ALL_IDS)
+  )
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    getChatEventFilter()
+      .then((arr) => setEnabledEvents(parseFilter(arr)))
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  const allEnabled = enabledEvents.size === ALL_EVENT_TYPES.length
+
+  const handleToggle = useCallback(
+    async (eventId: string, checked: boolean) => {
+      setSaving(true)
+      try {
+        const next = new Set(enabledEvents)
+        if (checked) {
+          next.add(eventId)
+        } else {
+          next.delete(eventId)
+        }
+        const isAll = next.size === ALL_EVENT_TYPES.length
+        await setChatEventFilter(isAll ? null : [...next])
+        setEnabledEvents(next)
+        toast.success(t("saved"))
+      } catch {
+        toast.error(t("saveFailed"))
+      } finally {
+        setSaving(false)
+      }
+    },
+    [enabledEvents, t]
+  )
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-muted-foreground gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {allEnabled && (
+        <p className="text-xs text-muted-foreground">{t("allEnabled")}</p>
+      )}
+
+      <section className="space-y-1">
+        {ALL_EVENT_TYPES.map((evt) => (
+          <div
+            key={evt.id}
+            className="flex items-center justify-between rounded-lg border bg-card px-4 py-3"
+          >
+            <div className="min-w-0">
+              <div className="text-sm font-medium">{t(evt.labelKey)}</div>
+              <div className="text-xs text-muted-foreground">
+                {t(evt.descKey)}
+              </div>
+            </div>
+            <Switch
+              checked={enabledEvents.has(evt.id)}
+              disabled={saving}
+              onCheckedChange={(checked) => handleToggle(evt.id, checked)}
+            />
+          </div>
+        ))}
+      </section>
+    </div>
+  )
+}

src/components/settings/channel-list-tab.tsx

@@ -0,0 +1,323 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import {
+  Loader2,
+  MessageCircle,
+  Pencil,
+  Plus,
+  Power,
+  PowerOff,
+  Trash2,
+  Zap,
+} from "lucide-react"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+  listChatChannels,
+  deleteChatChannel,
+  connectChatChannel,
+  disconnectChatChannel,
+  testChatChannel,
+  updateChatChannel,
+  getChatChannelStatus,
+} from "@/lib/api"
+import type { ChatChannelInfo, ChannelStatusInfo } from "@/lib/types"
+import { AddChatChannelDialog } from "./add-chat-channel-dialog"
+import { EditChatChannelDialog } from "./edit-chat-channel-dialog"
+
+export function ChannelListTab() {
+  const t = useTranslations("ChatChannelSettings")
+  const [channels, setChannels] = useState<ChatChannelInfo[]>([])
+  const [statuses, setStatuses] = useState<ChannelStatusInfo[]>([])
+  const [loading, setLoading] = useState(true)
+  const [addDialogOpen, setAddDialogOpen] = useState(false)
+  const [editTarget, setEditTarget] = useState<ChatChannelInfo | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<ChatChannelInfo | null>(null)
+  const [actionLoading, setActionLoading] = useState<number | null>(null)
+
+  const loadChannels = useCallback(async () => {
+    try {
+      const [chs, sts] = await Promise.all([
+        listChatChannels(),
+        getChatChannelStatus().catch(() => []),
+      ])
+      setChannels(chs)
+      setStatuses(sts)
+    } catch {
+      toast.error(t("loadFailed"))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    loadChannels().catch(console.error)
+  }, [loadChannels])
+
+  const handleToggleEnabled = useCallback(
+    async (ch: ChatChannelInfo, connected: boolean) => {
+      try {
+        const disabling = ch.enabled
+        if (disabling && connected) {
+          await disconnectChatChannel(ch.id)
+        }
+        await updateChatChannel({ id: ch.id, enabled: !ch.enabled })
+        await loadChannels()
+      } catch {
+        toast.error(t("saveFailed"))
+      }
+    },
+    [loadChannels, t]
+  )
+
+  const handleConnect = useCallback(
+    async (id: number) => {
+      setActionLoading(id)
+      try {
+        await connectChatChannel(id)
+        toast.success(t("connectSuccess"))
+        await loadChannels()
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        toast.error(t("connectFailed") + ": " + msg)
+      } finally {
+        setActionLoading(null)
+      }
+    },
+    [loadChannels, t]
+  )
+
+  const handleDisconnect = useCallback(
+    async (id: number) => {
+      setActionLoading(id)
+      try {
+        await disconnectChatChannel(id)
+        toast.success(t("disconnectSuccess"))
+        await loadChannels()
+      } catch {
+        toast.error(t("disconnectFailed"))
+      } finally {
+        setActionLoading(null)
+      }
+    },
+    [loadChannels, t]
+  )
+
+  const handleTest = useCallback(
+    async (id: number) => {
+      setActionLoading(id)
+      try {
+        await testChatChannel(id)
+        toast.success(t("testSuccess"))
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err)
+        toast.error(t("testFailed") + ": " + msg)
+      } finally {
+        setActionLoading(null)
+      }
+    },
+    [t]
+  )
+
+  const handleDelete = useCallback(async () => {
+    if (!deleteTarget) return
+    try {
+      await deleteChatChannel(deleteTarget.id)
+      toast.success(t("deleteSuccess"))
+      setDeleteTarget(null)
+      await loadChannels()
+    } catch {
+      toast.error(t("deleteFailed"))
+    }
+  }, [deleteTarget, loadChannels, t])
+
+  const getChannelStatus = (id: number) =>
+    statuses.find((s) => s.channel_id === id)?.status ?? "disconnected"
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center text-sm text-muted-foreground gap-2">
+        <Loader2 className="h-4 w-4 animate-spin" />
+        {t("loading")}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-sm font-medium">{t("channelListTitle")}</h3>
+          <p className="text-xs text-muted-foreground">
+            {t("channelListDescription")}
+          </p>
+        </div>
+        <Button size="sm" onClick={() => setAddDialogOpen(true)}>
+          <Plus className="h-3.5 w-3.5 mr-1" />
+          {t("addChannel")}
+        </Button>
+      </div>
+
+      {channels.length === 0 ? (
+        <section className="rounded-xl border bg-card p-8 text-center">
+          <MessageCircle className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+          <p className="text-sm text-muted-foreground">{t("noChannels")}</p>
+        </section>
+      ) : (
+        <section className="space-y-2">
+          {channels.map((ch) => {
+            const status = getChannelStatus(ch.id)
+            const isConnected = status === "connected"
+            const isLoading = actionLoading === ch.id
+
+            return (
+              <div
+                key={ch.id}
+                className="rounded-xl border bg-card p-4 flex items-center gap-4"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium">{ch.name}</span>
+                    <Badge variant="outline" className="text-xs">
+                      {ch.channel_type}
+                    </Badge>
+                    <span
+                      className={`inline-block h-2 w-2 rounded-full ${
+                        isConnected
+                          ? "bg-green-500"
+                          : status === "connecting"
+                            ? "bg-yellow-500 animate-pulse"
+                            : status === "error"
+                              ? "bg-red-500"
+                              : "bg-gray-400"
+                      }`}
+                    />
+                  </div>
+                  <div className="flex items-center gap-3 mt-1">
+                    {ch.daily_report_enabled && (
+                      <span className="text-xs text-muted-foreground">
+                        {t("dailyReport")}: {ch.daily_report_time || "18:00"}
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <Switch
+                    checked={ch.enabled}
+                    onCheckedChange={() => handleToggleEnabled(ch, isConnected)}
+                  />
+                  {isConnected ? (
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      title={t("disconnect")}
+                      disabled={isLoading}
+                      onClick={() => handleDisconnect(ch.id)}
+                    >
+                      {isLoading ? (
+                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                      ) : (
+                        <PowerOff className="h-3.5 w-3.5" />
+                      )}
+                    </Button>
+                  ) : (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      title={t("connect")}
+                      disabled={isLoading || !ch.enabled}
+                      onClick={() => handleConnect(ch.id)}
+                    >
+                      {isLoading ? (
+                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                      ) : (
+                        <Power className="h-3.5 w-3.5" />
+                      )}
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    title={t("test")}
+                    disabled={isLoading}
+                    onClick={() => handleTest(ch.id)}
+                  >
+                    <Zap className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    title={t("editChannel")}
+                    disabled={isConnected || isLoading}
+                    onClick={() => setEditTarget(ch)}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    title={t("delete")}
+                    onClick={() => setDeleteTarget(ch)}
+                  >
+                    <Trash2 className="h-3.5 w-3.5 text-destructive" />
+                  </Button>
+                </div>
+              </div>
+            )
+          })}
+        </section>
+      )}
+
+      <AddChatChannelDialog
+        open={addDialogOpen}
+        onOpenChange={setAddDialogOpen}
+        onChannelAdded={loadChannels}
+      />
+
+      {editTarget && (
+        <EditChatChannelDialog
+          open={!!editTarget}
+          channel={editTarget}
+          onOpenChange={(open) => !open && setEditTarget(null)}
+          onChannelUpdated={loadChannels}
+        />
+      )}
+
+      <AlertDialog
+        open={!!deleteTarget}
+        onOpenChange={(open) => !open && setDeleteTarget(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("deleteConfirmTitle")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deleteConfirmMessage")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete}>
+              {t("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

src/components/settings/chat-channel-settings.tsx

@@ -1,300 +1,42 @@
 "use client"
 
-import { useCallback, useEffect, useState } from "react"
-import {
-  Loader2,
-  MessageCircle,
-  Plus,
-  Power,
-  PowerOff,
-  TestTube,
-  Trash2,
-} from "lucide-react"
 import { useTranslations } from "next-intl"
-import { toast } from "sonner"
 
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Switch } from "@/components/ui/switch"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import {
-  listChatChannels,
-  deleteChatChannel,
-  connectChatChannel,
-  disconnectChatChannel,
-  testChatChannel,
-  updateChatChannel,
-  getChatChannelStatus,
-} from "@/lib/api"
-import type { ChatChannelInfo, ChannelStatusInfo } from "@/lib/types"
-import { AddChatChannelDialog } from "./add-chat-channel-dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ChannelListTab } from "./channel-list-tab"
+import { ChannelCommandsTab } from "./channel-commands-tab"
+import { ChannelEventsTab } from "./channel-events-tab"
 
 export function ChatChannelSettings() {
   const t = useTranslations("ChatChannelSettings")
-  const [channels, setChannels] = useState<ChatChannelInfo[]>([])
-  const [statuses, setStatuses] = useState<ChannelStatusInfo[]>([])
-  const [loading, setLoading] = useState(true)
-  const [addDialogOpen, setAddDialogOpen] = useState(false)
-  const [deleteTarget, setDeleteTarget] = useState<ChatChannelInfo | null>(null)
-  const [actionLoading, setActionLoading] = useState<number | null>(null)
-
-  const loadChannels = useCallback(async () => {
-    try {
-      const [chs, sts] = await Promise.all([
-        listChatChannels(),
-        getChatChannelStatus().catch(() => []),
-      ])
-      setChannels(chs)
-      setStatuses(sts)
-    } catch (err) {
-      toast.error(t("loadFailed"))
-    } finally {
-      setLoading(false)
-    }
-  }, [t])
-
-  useEffect(() => {
-    loadChannels().catch(console.error)
-  }, [loadChannels])
-
-  const handleToggleEnabled = useCallback(
-    async (ch: ChatChannelInfo) => {
-      try {
-        await updateChatChannel({ id: ch.id, enabled: !ch.enabled })
-        await loadChannels()
-      } catch (err) {
-        toast.error(t("saveFailed"))
-      }
-    },
-    [loadChannels, t],
-  )
-
-  const handleConnect = useCallback(
-    async (id: number) => {
-      setActionLoading(id)
-      try {
-        await connectChatChannel(id)
-        toast.success(t("connectSuccess"))
-        await loadChannels()
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : String(err)
-        toast.error(t("connectFailed") + ": " + msg)
-      } finally {
-        setActionLoading(null)
-      }
-    },
-    [loadChannels, t],
-  )
-
-  const handleDisconnect = useCallback(
-    async (id: number) => {
-      setActionLoading(id)
-      try {
-        await disconnectChatChannel(id)
-        toast.success(t("disconnectSuccess"))
-        await loadChannels()
-      } catch (err) {
-        toast.error(t("disconnectFailed"))
-      } finally {
-        setActionLoading(null)
-      }
-    },
-    [loadChannels, t],
-  )
-
-  const handleTest = useCallback(
-    async (id: number) => {
-      setActionLoading(id)
-      try {
-        await testChatChannel(id)
-        toast.success(t("testSuccess"))
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : String(err)
-        toast.error(t("testFailed") + ": " + msg)
-      } finally {
-        setActionLoading(null)
-      }
-    },
-    [t],
-  )
-
-  const handleDelete = useCallback(async () => {
-    if (!deleteTarget) return
-    try {
-      await deleteChatChannel(deleteTarget.id)
-      toast.success(t("deleteSuccess"))
-      setDeleteTarget(null)
-      await loadChannels()
-    } catch (err) {
-      toast.error(t("deleteFailed"))
-    }
-  }, [deleteTarget, loadChannels, t])
-
-  const getChannelStatus = (id: number) =>
-    statuses.find((s) => s.channel_id === id)?.status ?? "disconnected"
-
-  if (loading) {
-    return (
-      <div className="h-full flex items-center justify-center text-sm text-muted-foreground gap-2">
-        <Loader2 className="h-4 w-4 animate-spin" />
-        {t("loading")}
-      </div>
-    )
-  }
 
   return (
     <div className="h-full overflow-auto">
-      <div className="w-full space-y-4">
-        <section className="space-y-1">
-          <div className="flex items-center justify-between">
-            <div>
-              <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>
-              <p className="text-sm text-muted-foreground">
-                {t("sectionDescription")}
-              </p>
-            </div>
-            <Button size="sm" onClick={() => setAddDialogOpen(true)}>
-              <Plus className="h-3.5 w-3.5 mr-1" />
-              {t("addChannel")}
-            </Button>
+      <Tabs defaultValue="channels" className="w-full space-y-4">
+        <section className="space-y-3">
+          <div>
+            <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>
+            <p className="text-sm text-muted-foreground">
+              {t("sectionDescription")}
+            </p>
           </div>
+          <TabsList>
+            <TabsTrigger value="channels">{t("tabs.channels")}</TabsTrigger>
+            <TabsTrigger value="commands">{t("tabs.commands")}</TabsTrigger>
+            <TabsTrigger value="events">{t("tabs.events")}</TabsTrigger>
+          </TabsList>
         </section>
 
-        {channels.length === 0 ? (
-          <section className="rounded-xl border bg-card p-8 text-center">
-            <MessageCircle className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
-            <p className="text-sm text-muted-foreground">
-              {t("noChannels")}
-            </p>
-          </section>
-        ) : (
-          <section className="space-y-2">
-            {channels.map((ch) => {
-              const status = getChannelStatus(ch.id)
-              const isConnected = status === "connected"
-              const isLoading = actionLoading === ch.id
-
-              return (
-                <div
-                  key={ch.id}
-                  className="rounded-xl border bg-card p-4 flex items-center gap-4"
-                >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium">{ch.name}</span>
-                      <Badge variant="outline" className="text-xs">
-                        {ch.channel_type}
-                      </Badge>
-                      <span
-                        className={`inline-block h-2 w-2 rounded-full ${
-                          isConnected
-                            ? "bg-green-500"
-                            : status === "connecting"
-                              ? "bg-yellow-500 animate-pulse"
-                              : status === "error"
-                                ? "bg-red-500"
-                                : "bg-gray-400"
-                        }`}
-                      />
-                    </div>
-                    <div className="flex items-center gap-3 mt-1">
-                      {ch.daily_report_enabled && (
-                        <span className="text-xs text-muted-foreground">
-                          {t("dailyReport")}: {ch.daily_report_time || "18:00"}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <Switch
-                      checked={ch.enabled}
-                      onCheckedChange={() => handleToggleEnabled(ch)}
-                    />
-                    {isConnected ? (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        disabled={isLoading}
-                        onClick={() => handleDisconnect(ch.id)}
-                      >
-                        {isLoading ? (
-                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                        ) : (
-                          <PowerOff className="h-3.5 w-3.5" />
-                        )}
-                      </Button>
-                    ) : (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        disabled={isLoading || !ch.enabled}
-                        onClick={() => handleConnect(ch.id)}
-                      >
-                        {isLoading ? (
-                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
-                        ) : (
-                          <Power className="h-3.5 w-3.5" />
-                        )}
-                      </Button>
-                    )}
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      disabled={isLoading}
-                      onClick={() => handleTest(ch.id)}
-                    >
-                      <TestTube className="h-3.5 w-3.5" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setDeleteTarget(ch)}
-                    >
-                      <Trash2 className="h-3.5 w-3.5 text-destructive" />
-                    </Button>
-                  </div>
-                </div>
-              )
-            })}
-          </section>
-        )}
-      </div>
-
-      <AddChatChannelDialog
-        open={addDialogOpen}
-        onOpenChange={setAddDialogOpen}
-        onChannelAdded={loadChannels}
-      />
-
-      <AlertDialog
-        open={!!deleteTarget}
-        onOpenChange={(open) => !open && setDeleteTarget(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{t("deleteConfirmTitle")}</AlertDialogTitle>
-            <AlertDialogDescription>
-              {t("deleteConfirmMessage")}
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDelete}>
-              {t("delete")}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        <TabsContent value="channels" className="mt-0">
+          <ChannelListTab />
+        </TabsContent>
+        <TabsContent value="commands" className="mt-0">
+          <ChannelCommandsTab />
+        </TabsContent>
+        <TabsContent value="events" className="mt-0">
+          <ChannelEventsTab />
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }

src/components/settings/edit-chat-channel-dialog.tsx

@@ -0,0 +1,214 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { Loader2 } from "lucide-react"
+import { useTranslations } from "next-intl"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Switch } from "@/components/ui/switch"
+import {
+  updateChatChannel,
+  saveChatChannelToken,
+  getChatChannelHasToken,
+} from "@/lib/api"
+import type { ChatChannelInfo } from "@/lib/types"
+
+interface EditChatChannelDialogProps {
+  open: boolean
+  channel: ChatChannelInfo
+  onOpenChange: (open: boolean) => void
+  onChannelUpdated: () => void
+}
+
+export function EditChatChannelDialog({
+  open,
+  channel,
+  onOpenChange,
+  onChannelUpdated,
+}: EditChatChannelDialogProps) {
+  const t = useTranslations("ChatChannelSettings")
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const config = JSON.parse(channel.config_json || "{}")
+  const [name, setName] = useState(channel.name)
+  const [token, setToken] = useState("")
+  const [chatId, setChatId] = useState(config.chat_id ?? "")
+  const [appId, setAppId] = useState(config.app_id ?? "")
+  const [dailyReportEnabled, setDailyReportEnabled] = useState(
+    channel.daily_report_enabled
+  )
+  const [dailyReportTime, setDailyReportTime] = useState(
+    channel.daily_report_time || "18:00"
+  )
+  const [hasToken, setHasToken] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      getChatChannelHasToken(channel.id)
+        .then(setHasToken)
+        .catch(() => {})
+    }
+  }, [open, channel.id])
+
+  const handleSubmit = useCallback(async () => {
+    if (!name.trim()) {
+      setError(t("nameRequired"))
+      return
+    }
+    if (!chatId.trim()) {
+      setError(t("chatIdRequired"))
+      return
+    }
+
+    setLoading(true)
+    setError(null)
+    try {
+      const configJson =
+        channel.channel_type === "lark"
+          ? JSON.stringify({ app_id: appId, chat_id: chatId })
+          : JSON.stringify({ chat_id: chatId })
+
+      await updateChatChannel({
+        id: channel.id,
+        name: name.trim(),
+        configJson,
+        dailyReportEnabled,
+        dailyReportTime: dailyReportEnabled ? dailyReportTime : null,
+      })
+
+      if (token.trim()) {
+        await saveChatChannelToken(channel.id, token.trim())
+      }
+
+      onOpenChange(false)
+      onChannelUpdated()
+      toast.success(t("editSuccess"))
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : String(err)
+      setError(msg)
+    } finally {
+      setLoading(false)
+    }
+  }, [
+    name,
+    token,
+    chatId,
+    channel,
+    appId,
+    dailyReportEnabled,
+    dailyReportTime,
+    onOpenChange,
+    onChannelUpdated,
+    t,
+  ])
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("editChannel")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium">{t("channelName")}</label>
+            <Input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t("channelNamePlaceholder")}
+            />
+          </div>
+
+          {channel.channel_type === "lark" && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">App ID</label>
+              <Input
+                value={appId}
+                onChange={(e) => setAppId(e.target.value)}
+                placeholder="cli_xxxxx"
+              />
+            </div>
+          )}
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium">
+              {channel.channel_type === "telegram" ? "Bot Token" : "App Secret"}
+            </label>
+            <Input
+              type="password"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              placeholder={
+                hasToken ? t("tokenPlaceholderKeep") : t("tokenRequired")
+              }
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium">Chat ID</label>
+            <Input
+              value={chatId}
+              onChange={(e) => setChatId(e.target.value)}
+              placeholder={
+                channel.channel_type === "telegram"
+                  ? "-100123456789"
+                  : "oc_xxxxx"
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <label className="text-xs font-medium">{t("dailyReport")}</label>
+            <Switch
+              checked={dailyReportEnabled}
+              onCheckedChange={setDailyReportEnabled}
+            />
+          </div>
+
+          {dailyReportEnabled && (
+            <div className="space-y-1.5">
+              <label className="text-xs font-medium">
+                {t("dailyReportTime")}
+              </label>
+              <Input
+                type="time"
+                value={dailyReportTime}
+                onChange={(e) => setDailyReportTime(e.target.value)}
+              />
+            </div>
+          )}
+
+          {error && (
+            <div className="rounded-md border border-red-500/30 bg-red-500/5 px-3 py-2 text-xs text-red-400">
+              {error}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            {t("cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading}>
+            {loading && <Loader2 className="h-3.5 w-3.5 animate-spin mr-1" />}
+            {t("save")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/settings/settings-shell.tsx

@@ -12,7 +12,7 @@ import {
   GitBranch,
   Globe,
   Keyboard,
-  MessageCircle,
+  BotMessageSquare,
   Palette,
   PlugZap,
   Settings,
@@ -74,7 +74,7 @@ const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
   {
     href: "/settings/chat-channels",
     labelKey: "chat_channels",
-    icon: MessageCircle,
+    icon: BotMessageSquare,
   },
   {
     href: "/settings/web-service",