feat(hooks): read-only Hooks page from settings.json

Adds a Hooks entry in the sidebar (lucide Webhook icon) and a page that
lists shell hooks configured under the `hooks` key in
`~/.claude/settings.json`. Groups by event (PostToolUse, PreToolUse,
UserPromptSubmit, SessionStart, …) and shows matcher + derived name +
command for each entry.

Backend: new `app_core::hooks::list` reads settings.json tolerantly and
returns `Vec<HookGroup>` (matcher + entries). Exposed via the
`hooks_list` Tauri command.

Author: cuonghx-dev

frontend/src/components/Sidebar.vue

@@ -10,6 +10,7 @@ import {
   Palette,
   Package,
   History,
+  Webhook,
   Settings,
 } from 'lucide-vue-next'
 import logoUrl from '@/assets/logo.png'
@@ -19,6 +20,7 @@ import { useSkillsList } from '@/composables/useSkills'
 import { usePlansList } from '@/composables/usePlans'
 import { useMcpList } from '@/composables/useMcp'
 import { useOutputStylesList } from '@/composables/useOutputStyles'
+import { useHooksList } from '@/composables/useHooks'
 import { usePluginsList } from '@/composables/usePlugins'
 import { useProjectsList } from '@/composables/useProjects'
 
@@ -28,6 +30,7 @@ const skills = useSkillsList()
 const plans = usePlansList()
 const mcp = useMcpList('global')
 const outputStyles = useOutputStylesList()
+const hooks = useHooksList()
 const plugins = usePluginsList()
 const projects = useProjectsList()
 
@@ -45,6 +48,7 @@ const items = computed<NavItem[]>(() => [
   { to: '/plans',         label: 'Plans',         icon: Map,      count: () => plans.data.value?.length },
   { to: '/mcp',           label: 'MCP',           icon: Server,   count: () => mcp.data.value?.length },
   { to: '/output-styles', label: 'Output styles', icon: Palette,  count: () => outputStyles.data.value?.length },
+  { to: '/hooks',         label: 'Hooks',         icon: Webhook,  count: () => hooks.data.value?.length },
   { to: '/plugins',       label: 'Plugins',       icon: Package,  count: () => plugins.data.value?.length },
   { to: '/sessions',      label: 'Sessions',      icon: History,  count: () => projects.data.value?.length },
   { to: '/settings',      label: 'Settings',      icon: Settings, count: () => undefined },

frontend/src/composables/useHooks.ts

@@ -0,0 +1,6 @@
+import { useQuery } from '@tanstack/vue-query'
+import { qk } from '@/lib/queryKeys'
+import { hooksList } from '@/utils/ipc'
+
+export const useHooksList = (workingDir?: string) =>
+  useQuery({ queryKey: qk.hooks.list(workingDir), queryFn: () => hooksList(workingDir) })

frontend/src/lib/queryKeys.ts

@@ -30,6 +30,10 @@ export const qk = {
     all: ['outputStyles'] as const,
     list: () => ['outputStyles', 'list'] as const,
   },
+  hooks: {
+    all: ['hooks'] as const,
+    list: (wd?: string) => ['hooks', 'list', wd ?? ''] as const,
+  },
   plugins: {
     all: ['plugins'] as const,
     list: () => ['plugins', 'list'] as const,

frontend/src/pages/hooks/index.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Webhook, Terminal, FileCode } from 'lucide-vue-next'
+import PageHeader from '@/components/PageHeader.vue'
+import QueryStateBoundary from '@/components/QueryStateBoundary.vue'
+import EmptyState from '@/components/EmptyState.vue'
+import { useHooksList } from '@/composables/useHooks'
+import type { HookGroup } from '@/types/ipc'
+
+const { isPending, isError, error, data } = useHooksList()
+
+const eventLabels: Record<string, string> = {
+  PreToolUse: 'Before Claude uses a tool',
+  PostToolUse: 'After Claude uses a tool',
+  UserPromptSubmit: 'UserPromptSubmit',
+  SessionStart: 'SessionStart',
+  SessionEnd: 'SessionEnd',
+  Notification: 'Notification',
+  Stop: 'Stop',
+  SubagentStop: 'SubagentStop',
+  PreCompact: 'PreCompact',
+}
+
+interface GroupedEvent {
+  event: string
+  label: string
+  groups: HookGroup[]
+}
+
+const grouped = computed<GroupedEvent[]>(() => {
+  const out = new Map<string, HookGroup[]>()
+  for (const g of data.value ?? []) {
+    if (!out.has(g.event)) out.set(g.event, [])
+    out.get(g.event)!.push(g)
+  }
+  return Array.from(out.entries()).map(([event, groups]) => ({
+    event,
+    label: eventLabels[event] ?? event,
+    groups,
+  }))
+})
+
+function deriveName(command: string | null): string {
+  if (!command) return ''
+  const dirMatch = command.match(/\/\.claude\/hooks\/([^/]+)\//)
+  if (dirMatch) return dirMatch[1]
+  const quoted = command.match(/["']([^"']+)["']/)
+  if (quoted) {
+    const base = quoted[1].split('/').pop() ?? ''
+    return base.replace(/\.(c?js|mjs|ts|sh|py)$/, '')
+  }
+  const first = command.split(/\s+/)[0] ?? command
+  return first.split('/').pop() ?? first
+}
+
+function isScript(command: string | null): boolean {
+  return !!command && /\.(c?js|mjs|ts|sh|py)/.test(command)
+}
+</script>
+
+<template>
+  <PageHeader
+    title="Hooks"
+    subtitle="Run shell commands automatically when certain events happen in Claude Code."
+  />
+
+  <QueryStateBoundary :is-pending="isPending" :is-error="isError" :error="error" :data="data">
+    <template #default="{ data: items }">
+      <section class="p-6">
+        <EmptyState v-if="!items?.length" title="No hooks" />
+        <div v-else class="space-y-8">
+          <div v-for="bucket in grouped" :key="bucket.event">
+            <div class="mb-3 flex items-center gap-2">
+              <Webhook class="h-4 w-4 text-neutral-500 dark:text-neutral-400" />
+              <span class="text-sm font-semibold text-neutral-900 dark:text-neutral-100">{{ bucket.label }}</span>
+              <span class="text-xs text-neutral-500 dark:text-neutral-400">{{ bucket.groups.length }}</span>
+            </div>
+            <div class="space-y-3">
+              <div
+                v-for="(g, gi) in bucket.groups"
+                :key="`${bucket.event}:${gi}`"
+                class="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900"
+              >
+                <div
+                  v-for="(entry, ei) in g.entries"
+                  :key="ei"
+                  :class="ei > 0 ? 'mt-4 border-t border-neutral-100 pt-4 dark:border-neutral-800' : ''"
+                >
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span class="inline-flex items-center gap-1 rounded bg-neutral-100 px-2 py-0.5 text-xs font-mono text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200">
+                      <FileCode v-if="isScript(entry.command)" class="h-3 w-3" />
+                      <Terminal v-else class="h-3 w-3" />
+                      {{ deriveName(entry.command) }}
+                    </span>
+                    <span
+                      v-if="g.matcher"
+                      class="rounded bg-neutral-100 px-2 py-0.5 text-xs font-mono text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200"
+                    >
+                      {{ g.matcher }}
+                    </span>
+                    <span
+                      v-if="entry.timeout != null"
+                      class="text-[11px] text-neutral-500 dark:text-neutral-400"
+                    >
+                      timeout {{ entry.timeout }}s
+                    </span>
+                  </div>
+                  <p
+                    v-if="entry.statusMessage"
+                    class="mt-2 text-xs text-neutral-500 dark:text-neutral-400"
+                  >
+                    {{ entry.statusMessage }}
+                  </p>
+                  <pre
+                    v-if="entry.command"
+                    class="mt-2 overflow-auto whitespace-pre-wrap break-all rounded bg-neutral-50 p-3 font-mono text-xs text-neutral-700 dark:bg-neutral-950 dark:text-neutral-300"
+                  >▸ {{ entry.command }}</pre>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </template>
+  </QueryStateBoundary>
+</template>

frontend/src/typed-router.d.ts

@@ -25,6 +25,7 @@ declare module 'vue-router/auto-routes' {
     '/commands/': RouteRecordInfo<'/commands/', '/commands', Record<never, never>, Record<never, never>>,
     '/commands/[slug]': RouteRecordInfo<'/commands/[slug]', '/commands/:slug', { slug: ParamValue<true> }, { slug: ParamValue<false> }>,
     '/commands/new': RouteRecordInfo<'/commands/new', '/commands/new', Record<never, never>, Record<never, never>>,
+    '/hooks/': RouteRecordInfo<'/hooks/', '/hooks', Record<never, never>, Record<never, never>>,
     '/mcp/': RouteRecordInfo<'/mcp/', '/mcp', Record<never, never>, Record<never, never>>,
     '/mcp/[name]': RouteRecordInfo<'/mcp/[name]', '/mcp/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
     '/mcp/new': RouteRecordInfo<'/mcp/new', '/mcp/new', Record<never, never>, Record<never, never>>,

frontend/src/types/ipc/HookEntry.ts

@@ -11,6 +11,7 @@ import type {
   DirEntry,
   FileNode,
   GitStatus,
+  HookGroup,
   ImproveRequest,
   MarketplaceSource,
   MarketplaceSourceInput,
@@ -87,6 +88,10 @@ export const plansUpdate = (slug: string, input: PlanInput) =>
   invoke<Plan>('plans_update', { slug, input })
 export const plansDelete = (slug: string) => invoke<void>('plans_delete', { slug })
 
+// Hooks
+export const hooksList = (workingDir?: string) =>
+  invoke<HookGroup[]>('hooks_list', { workingDir })
+
 // Output styles
 export const outputStylesList = (workingDir?: string) =>
   invoke<OutputStyle[]>('output_styles_list', { workingDir })

frontend/src/types/ipc/HookGroup.ts

@@ -0,0 +1,144 @@
+//! Read-only listing of hooks configured in `~/.claude/settings.json`
+//! (and optionally `<wd>/.claude/settings.json`).
+//!
+//! settings.json shape (events keyed top-level under `hooks`):
+//!
+//! ```jsonc
+//! {
+//!   "hooks": {
+//!     "PostToolUse": [
+//!       { "matcher": "Bash", "hooks": [{ "type": "command", "command": "..." }] }
+//!     ],
+//!     "SessionStart": [
+//!       { "hooks": [...] }
+//!     ]
+//!   }
+//! }
+//! ```
+
+use std::path::Path;
+
+use serde_json::Value;
+
+use crate::types::{HookEntry, HookGroup};
+use crate::AppError;
+
+pub fn list(claude_dir: &Path, working_dir: Option<&Path>) -> Result<Vec<HookGroup>, AppError> {
+    let mut out = Vec::new();
+    extend_from(&claude_dir.join("settings.json"), &mut out);
+    if let Some(wd) = working_dir {
+        extend_from(&wd.join(".claude").join("settings.json"), &mut out);
+    }
+    out.sort_by(|a, b| event_order(&a.event).cmp(&event_order(&b.event)).then(a.event.cmp(&b.event)));
+    Ok(out)
+}
+
+fn extend_from(path: &Path, out: &mut Vec<HookGroup>) {
+    let Ok(raw) = std::fs::read_to_string(path) else {
+        return;
+    };
+    let Ok(v) = serde_json::from_str::<Value>(&raw) else {
+        return;
+    };
+    let Some(hooks_obj) = v.get("hooks").and_then(|h| h.as_object()) else {
+        return;
+    };
+    for (event, value) in hooks_obj {
+        let Some(arr) = value.as_array() else {
+            continue;
+        };
+        for group in arr {
+            let matcher = group
+                .get("matcher")
+                .and_then(|m| m.as_str())
+                .map(|s| s.to_string());
+            let entries = group
+                .get("hooks")
+                .and_then(|h| h.as_array())
+                .map(|arr| {
+                    arr.iter()
+                        .filter_map(|e| serde_json::from_value::<HookEntry>(e.clone()).ok())
+                        .collect::<Vec<_>>()
+                })
+                .unwrap_or_default();
+            if entries.is_empty() {
+                continue;
+            }
+            out.push(HookGroup {
+                event: event.clone(),
+                matcher,
+                entries,
+            });
+        }
+    }
+}
+
+/// Stable display order. Unknown events sort to the end alphabetically.
+fn event_order(event: &str) -> u8 {
+    match event {
+        "PostToolUse" => 0,
+        "PreToolUse" => 1,
+        "UserPromptSubmit" => 2,
+        "SessionStart" => 3,
+        "SessionEnd" => 4,
+        "Notification" => 5,
+        "Stop" => 6,
+        "SubagentStop" => 7,
+        "PreCompact" => 8,
+        _ => 255,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn parses_global_hooks() {
+        let td = tempfile::tempdir().unwrap();
+        std::fs::write(
+            td.path().join("settings.json"),
+            r#"{
+              "hooks": {
+                "PostToolUse": [
+                  {"matcher":"Bash","hooks":[{"type":"command","command":"echo hi","timeout":5}]}
+                ],
+                "SessionStart": [
+                  {"hooks":[{"type":"command","command":"echo start","statusMessage":"loading"}]}
+                ]
+              }
+            }"#,
+        )
+        .unwrap();
+        let groups = list(td.path(), None).unwrap();
+        assert_eq!(groups.len(), 2);
+        assert_eq!(groups[0].event, "PostToolUse");
+        assert_eq!(groups[0].matcher.as_deref(), Some("Bash"));
+        assert_eq!(groups[0].entries[0].command.as_deref(), Some("echo hi"));
+        assert_eq!(groups[0].entries[0].timeout, Some(5));
+        assert_eq!(groups[1].event, "SessionStart");
+        assert!(groups[1].matcher.is_none());
+        assert_eq!(
+            groups[1].entries[0].status_message.as_deref(),
+            Some("loading"),
+        );
+    }
+
+    #[test]
+    fn missing_settings_returns_empty() {
+        let td = tempfile::tempdir().unwrap();
+        let groups = list(td.path(), None).unwrap();
+        assert!(groups.is_empty());
+    }
+
+    #[test]
+    fn empty_entries_dropped() {
+        let td = tempfile::tempdir().unwrap();
+        std::fs::write(
+            td.path().join("settings.json"),
+            r#"{"hooks":{"PreToolUse":[{"matcher":"X","hooks":[]}]}}"#,
+        )
+        .unwrap();
+        assert!(list(td.path(), None).unwrap().is_empty());
+    }
+}