@hasna/hooks 0.0.1

package/src/cli/components/App.tsx

@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import { Box, Text, useApp, useInput } from "ink";
+import SelectInput from "ink-select-input";
+import { Header } from "./Header.js";
+import { CategorySelect } from "./CategorySelect.js";
+import { HookSelect } from "./HookSelect.js";
+import { SearchView } from "./SearchView.js";
+import { InstallProgress } from "./InstallProgress.js";
+import {
+  getHooksByCategory,
+  HookMeta,
+  Category,
+} from "../../lib/registry.js";
+import { InstallResult } from "../../lib/installer.js";
+
+type View = "main" | "browse" | "search" | "hooks" | "installing" | "done";
+
+interface AppProps {
+  initialHooks?: string[];
+  overwrite?: boolean;
+}
+
+export function App({ initialHooks, overwrite = false }: AppProps) {
+  const { exit } = useApp();
+  const [view, setView] = useState<View>(
+    initialHooks?.length ? "installing" : "main"
+  );
+  const [category, setCategory] = useState<Category | null>(null);
+  const [selected, setSelected] = useState<Set<string>>(
+    new Set(initialHooks || [])
+  );
+  const [results, setResults] = useState<InstallResult[]>([]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (view === "main") {
+        exit();
+      }
+    }
+    if (input === "q") {
+      exit();
+    }
+  });
+
+  const handleToggle = (name: string) => {
+    const newSelected = new Set(selected);
+    if (newSelected.has(name)) {
+      newSelected.delete(name);
+    } else {
+      newSelected.add(name);
+    }
+    setSelected(newSelected);
+  };
+
+  const handleConfirm = () => {
+    if (selected.size > 0) {
+      setView("installing");
+    }
+  };
+
+  const handleComplete = (installResults: InstallResult[]) => {
+    setResults(installResults);
+    setView("done");
+  };
+
+  const mainMenuItems = [
+    { label: "Browse by category", value: "browse" },
+    { label: "Search hooks", value: "search" },
+    { label: "Exit", value: "exit" },
+  ];
+
+  const handleMainSelect = (item: { value: string }) => {
+    if (item.value === "exit") {
+      exit();
+    } else {
+      setView(item.value as View);
+    }
+  };
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Header
+        title="Hooks"
+        subtitle="Install Claude Code hooks for your project"
+      />
+
+      {view === "main" && (
+        <Box flexDirection="column">
+          <Text marginBottom={1}>What would you like to do?</Text>
+          <SelectInput items={mainMenuItems} onSelect={handleMainSelect} />
+          <Box marginTop={1}>
+            <Text dimColor>Press q to quit</Text>
+          </Box>
+        </Box>
+      )}
+
+      {view === "browse" && !category && (
+        <CategorySelect
+          onSelect={(cat) => {
+            setCategory(cat as Category);
+            setView("hooks");
+          }}
+          onBack={() => setView("main")}
+        />
+      )}
+
+      {view === "hooks" && category && (
+        <HookSelect
+          hooks={getHooksByCategory(category)}
+          selected={selected}
+          onToggle={handleToggle}
+          onConfirm={handleConfirm}
+          onBack={() => {
+            setCategory(null);
+            setView("browse");
+          }}
+        />
+      )}
+
+      {view === "search" && (
+        <SearchView
+          selected={selected}
+          onToggle={handleToggle}
+          onConfirm={handleConfirm}
+          onBack={() => setView("main")}
+        />
+      )}
+
+      {view === "installing" && (
+        <InstallProgress
+          hooks={Array.from(selected)}
+          overwrite={overwrite}
+          onComplete={handleComplete}
+        />
+      )}
+
+      {view === "done" && (
+        <Box flexDirection="column">
+          <Text bold color="green" marginBottom={1}>
+            Installation complete!
+          </Text>
+
+          {results.filter((r) => r.success).length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text bold>Installed:</Text>
+              {results
+                .filter((r) => r.success)
+                .map((r) => (
+                  <Text key={r.hook} color="green">
+                    {"\u2713"} {r.hook}
+                  </Text>
+                ))}
+            </Box>
+          )}
+
+          {results.filter((r) => !r.success).length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text bold color="red">
+                Failed:
+              </Text>
+              {results
+                .filter((r) => !r.success)
+                .map((r) => (
+                  <Text key={r.hook} color="red">
+                    {"\u2717"} {r.hook}: {r.error}
+                  </Text>
+                ))}
+            </Box>
+          )}
+
+          <Box marginTop={1} flexDirection="column">
+            <Text bold>What happened:</Text>
+            <Text>1. Hook source copied to .hooks/</Text>
+            <Text>2. Hook registered in ~/.claude/settings.json</Text>
+            <Text>3. Ready to use in Claude Code sessions</Text>
+          </Box>
+
+          <Box marginTop={1} flexDirection="column">
+            <Text bold>Next steps:</Text>
+            <Text dimColor>  hooks list --registered  Check active hooks</Text>
+            <Text dimColor>  hooks info {"<name>"}       View hook details</Text>
+          </Box>
+
+          <Box marginTop={1}>
+            <Text dimColor>Press q to exit</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/CategorySelect.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Text } from "ink";
+import SelectInput from "ink-select-input";
+import { CATEGORIES, getHooksByCategory } from "../../lib/registry.js";
+
+interface CategorySelectProps {
+  onSelect: (category: string) => void;
+  onBack?: () => void;
+}
+
+export function CategorySelect({ onSelect, onBack }: CategorySelectProps) {
+  const items = CATEGORIES.map((cat) => ({
+    label: `${cat} (${getHooksByCategory(cat).length})`,
+    value: cat,
+  }));
+
+  if (onBack) {
+    items.unshift({ label: "\u2190 Back", value: "__back__" });
+  }
+
+  const handleSelect = (item: { value: string }) => {
+    if (item.value === "__back__" && onBack) {
+      onBack();
+    } else {
+      onSelect(item.value);
+    }
+  };
+
+  return (
+    <Box flexDirection="column">
+      <Text bold marginBottom={1}>
+        Select a category:
+      </Text>
+      <SelectInput items={items} onSelect={handleSelect} />
+    </Box>
+  );
+}

package/src/cli/components/DataTable.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { HookMeta } from "../../lib/registry.js";
+
+const COL_CHECK = 5;
+const COL_NAME = 18;
+const COL_VERSION = 9;
+const COL_EVENT = 14;
+const COL_DESC = 40;
+
+function truncate(str: string, max: number): string {
+  return str.length > max ? str.slice(0, max - 3) + "..." : str;
+}
+
+function pad(str: string, width: number): string {
+  return str.length >= width ? str.slice(0, width) : str + " ".repeat(width - str.length);
+}
+
+interface DataTableProps {
+  hooks: HookMeta[];
+  selected: Set<string>;
+  onToggle: (name: string) => void;
+  onConfirm: () => void;
+  onBack: () => void;
+}
+
+export function DataTable({
+  hooks,
+  selected,
+  onToggle,
+  onConfirm,
+  onBack,
+}: DataTableProps) {
+  const [cursor, setCursor] = useState(0);
+
+  useInput((input, key) => {
+    if (key.upArrow) {
+      setCursor((c) => Math.max(0, c - 1));
+    } else if (key.downArrow) {
+      setCursor((c) => Math.min(hooks.length - 1, c + 1));
+    } else if (key.return || input === " ") {
+      if (hooks[cursor]) {
+        onToggle(hooks[cursor].name);
+      }
+    } else if (input === "i" && selected.size > 0) {
+      onConfirm();
+    } else if (key.escape) {
+      onBack();
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold>
+          Select hooks (up/down to navigate, space/enter to toggle, esc to go back):
+        </Text>
+      </Box>
+
+      {/* Header */}
+      <Box>
+        <Text dimColor>
+          {pad("", COL_CHECK)}
+          {pad("Name", COL_NAME)}
+          {pad("Version", COL_VERSION)}
+          {pad("Event", COL_EVENT)}
+          {"Description"}
+        </Text>
+      </Box>
+      <Box marginBottom={0}>
+        <Text dimColor>
+          {pad("─".repeat(COL_CHECK - 1), COL_CHECK)}
+          {pad("─".repeat(COL_NAME - 1), COL_NAME)}
+          {pad("─".repeat(COL_VERSION - 1), COL_VERSION)}
+          {pad("─".repeat(COL_EVENT - 1), COL_EVENT)}
+          {"─".repeat(COL_DESC)}
+        </Text>
+      </Box>
+
+      {/* Rows */}
+      {hooks.map((hook, i) => {
+        const isHighlighted = i === cursor;
+        const isSelected = selected.has(hook.name);
+        const check = isSelected ? "[x]" : "[ ]";
+
+        return (
+          <Box key={hook.name}>
+            <Text
+              bold={isHighlighted}
+              inverse={isHighlighted}
+            >
+              {pad(` ${check}`, COL_CHECK)}
+              {pad(hook.displayName, COL_NAME)}
+              {pad(hook.version, COL_VERSION)}
+              {pad(hook.event, COL_EVENT)}
+              {truncate(hook.description, COL_DESC)}
+            </Text>
+          </Box>
+        );
+      })}
+
+      {/* Footer */}
+      <Box marginTop={1} flexDirection="row" gap={2}>
+        <Text dimColor>[esc] Back</Text>
+        {selected.size > 0 && (
+          <Text color="green" bold>
+            {selected.size} selected
+          </Text>
+        )}
+      </Box>
+
+      {selected.size > 0 && (
+        <Box marginTop={0}>
+          <Text dimColor>
+            Selected: {Array.from(selected).join(", ")}
+          </Text>
+        </Box>
+      )}
+
+      {selected.size > 0 && (
+        <Box marginTop={1}>
+          <Text>
+            Press{" "}
+            <Text bold color="cyan">
+              i
+            </Text>
+            {" "}to install selected ({selected.size})
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/Header.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+interface HeaderProps {
+  title?: string;
+  subtitle?: string;
+}
+
+export function Header({ title = "Hooks", subtitle }: HeaderProps) {
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="cyan">
+        {title}
+      </Text>
+      {subtitle && <Text dimColor>{subtitle}</Text>}
+    </Box>
+  );
+}

package/src/cli/components/HookSelect.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { HookMeta } from "../../lib/registry.js";
+import { DataTable } from "./DataTable.js";
+
+interface HookSelectProps {
+  hooks: HookMeta[];
+  selected: Set<string>;
+  onToggle: (name: string) => void;
+  onConfirm: () => void;
+  onBack: () => void;
+}
+
+export function HookSelect({
+  hooks,
+  selected,
+  onToggle,
+  onConfirm,
+  onBack,
+}: HookSelectProps) {
+  return (
+    <DataTable
+      hooks={hooks}
+      selected={selected}
+      onToggle={onToggle}
+      onConfirm={onConfirm}
+      onBack={onBack}
+    />
+  );
+}

package/src/cli/components/InstallProgress.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+import Spinner from "ink-spinner";
+import { installHook, InstallResult } from "../../lib/installer.js";
+import { getHook } from "../../lib/registry.js";
+
+interface InstallProgressProps {
+  hooks: string[];
+  overwrite?: boolean;
+  onComplete: (results: InstallResult[]) => void;
+}
+
+export function InstallProgress({
+  hooks,
+  overwrite = false,
+  onComplete,
+}: InstallProgressProps) {
+  const [results, setResults] = useState<InstallResult[]>([]);
+  const [current, setCurrent] = useState(0);
+  const [installing, setInstalling] = useState(true);
+
+  useEffect(() => {
+    const install = async () => {
+      const newResults: InstallResult[] = [];
+
+      for (let i = 0; i < hooks.length; i++) {
+        setCurrent(i);
+        await new Promise((r) => setTimeout(r, 100));
+
+        const result = installHook(hooks[i], { overwrite });
+        newResults.push(result);
+        setResults([...newResults]);
+      }
+
+      setInstalling(false);
+      onComplete(newResults);
+    };
+
+    install();
+  }, [hooks, overwrite]);
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold>
+          {installing
+            ? `Installing hooks (${current + 1}/${hooks.length})...`
+            : "Installation complete!"}
+        </Text>
+      </Box>
+
+      {hooks.map((name, i) => {
+        const result = results[i];
+        const isCurrent = i === current && installing;
+        const meta = getHook(name);
+
+        return (
+          <Box key={name} flexDirection="column">
+            {isCurrent && !result && (
+              <Text color="cyan">
+                <Spinner type="dots" /> {name}
+              </Text>
+            )}
+            {result?.success && (
+              <Box flexDirection="column">
+                <Text color="green">{"\u2713"} {name}</Text>
+                {meta && (
+                  <Text dimColor>
+                    {"  "}{meta.event}{meta.matcher ? ` [${meta.matcher}]` : ""}
+                  </Text>
+                )}
+              </Box>
+            )}
+            {result && !result.success && (
+              <Text color="red">
+                {"\u2717"} {name} - {result.error}
+              </Text>
+            )}
+            {!isCurrent && !result && (
+              <Text dimColor>{"\u25CB"} {name}</Text>
+            )}
+          </Box>
+        );
+      })}
+
+      {!installing && (
+        <Box marginTop={1} flexDirection="column">
+          <Text>
+            <Text color="green">
+              {results.filter((r) => r.success).length} installed
+            </Text>
+            {results.some((r) => !r.success) && (
+              <Text color="red">
+                , {results.filter((r) => !r.success).length} failed
+              </Text>
+            )}
+          </Text>
+          <Text dimColor>
+            Hooks installed to .hooks/ and registered in ~/.claude/settings.json
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/cli/components/SearchView.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { searchHooks, HookMeta } from "../../lib/registry.js";
+import { DataTable } from "./DataTable.js";
+
+interface SearchViewProps {
+  selected: Set<string>;
+  onToggle: (name: string) => void;
+  onConfirm: () => void;
+  onBack: () => void;
+}
+
+export function SearchView({
+  selected,
+  onToggle,
+  onConfirm,
+  onBack,
+}: SearchViewProps) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<HookMeta[]>([]);
+  const [mode, setMode] = useState<"search" | "select">("search");
+
+  useEffect(() => {
+    if (query.length >= 2) {
+      setResults(searchHooks(query));
+    } else {
+      setResults([]);
+    }
+  }, [query]);
+
+  useInput((input, key) => {
+    if (key.escape) {
+      if (mode === "select") {
+        setMode("search");
+      } else {
+        onBack();
+      }
+    }
+    if (key.downArrow && mode === "search" && results.length > 0) {
+      setMode("select");
+    }
+  });
+
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold>Search: </Text>
+        {mode === "search" && (
+          <TextInput
+            value={query}
+            onChange={setQuery}
+            placeholder="Type to search hooks..."
+          />
+        )}
+        {mode === "select" && (
+          <Text>{query}</Text>
+        )}
+      </Box>
+
+      {query.length < 2 && (
+        <Text dimColor>Type at least 2 characters to search</Text>
+      )}
+
+      {query.length >= 2 && results.length === 0 && (
+        <Text dimColor>No hooks found for "{query}"</Text>
+      )}
+
+      {results.length > 0 && mode === "search" && (
+        <Text dimColor>
+          Found {results.length} hook(s) — press down arrow to browse results
+        </Text>
+      )}
+
+      {results.length > 0 && mode === "select" && (
+        <DataTable
+          hooks={results}
+          selected={selected}
+          onToggle={onToggle}
+          onConfirm={onConfirm}
+          onBack={() => setMode("search")}
+        />
+      )}
+    </Box>
+  );
+}