feat: add SpecContentDialog component for viewing and editing spec content

ccw/frontend/src/components/specs/SpecContentDialog.tsx

@@ -0,0 +1,287 @@
+// ========================================
+// SpecContentDialog Component
+// ========================================
+// Dialog for viewing and editing spec markdown content
+
+import * as React from 'react';
+import { useIntl } from 'react-intl';
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/Dialog';
+import { Button } from '@/components/ui/Button';
+import { Textarea } from '@/components/ui/Textarea';
+import { Badge } from '@/components/ui/Badge';
+import { Eye, Edit2, Save, FileText, Loader2 } from 'lucide-react';
+import type { Spec } from './SpecCard';
+
+// ========== Types ==========
+
+/**
+ * SpecContentDialog component props
+ */
+export interface SpecContentDialogProps {
+  /** Whether dialog is open */
+  open: boolean;
+  /** Called when dialog open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Spec being viewed/edited */
+  spec: Spec | null;
+  /** Initial content of the spec */
+  content?: string;
+  /** Called when content is saved */
+  onSave?: (specId: string, content: string) => Promise<void> | void;
+  /** Whether in read-only mode */
+  readOnly?: boolean;
+  /** Optional loading state */
+  isLoading?: boolean;
+}
+
+// ========== Helper Functions ==========
+
+/**
+ * Extract frontmatter from markdown content
+ */
+function parseFrontmatter(content: string): {
+  frontmatter: Record<string, unknown>;
+  body: string;
+} {
+  const frontmatterRegex = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/;
+  const match = content.match(frontmatterRegex);
+
+  if (!match) {
+    return { frontmatter: {}, body: content };
+  }
+
+  const frontmatterLines = match[1].split('\n');
+  const frontmatter: Record<string, unknown> = {};
+
+  for (const line of frontmatterLines) {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      const key = line.slice(0, colonIndex).trim();
+      const value = line.slice(colonIndex + 1).trim();
+
+      // Parse arrays (keywords: [a, b, c])
+      if (value.startsWith('[') && value.endsWith(']')) {
+        frontmatter[key] = value
+          .slice(1, -1)
+          .split(',')
+          .map(s => s.trim().replace(/^['"]|['"]$/g, ''))
+          .filter(Boolean);
+      } else {
+        frontmatter[key] = value.replace(/^['"]|['"]$/g, '');
+      }
+    }
+  }
+
+  return { frontmatter, body: match[2] };
+}
+
+// ========== Component ==========
+
+/**
+ * SpecContentDialog component for viewing and editing spec content
+ */
+export function SpecContentDialog({
+  open,
+  onOpenChange,
+  spec,
+  content: initialContent,
+  onSave,
+  readOnly = false,
+  isLoading = false,
+}: SpecContentDialogProps) {
+  const { formatMessage } = useIntl();
+  const [mode, setMode] = React.useState<'view' | 'edit'>('view');
+  const [content, setContent] = React.useState(initialContent || '');
+  const [editedContent, setEditedContent] = React.useState('');
+
+  // Parse frontmatter for display
+  const { body } = React.useMemo(() => {
+    return parseFrontmatter(content);
+  }, [content]);
+
+  // Reset when spec changes
+  React.useEffect(() => {
+    if (spec && open) {
+      // Fetch spec content
+      const fetchContent = async () => {
+        try {
+          const response = await fetch(`/api/specs/detail?file=${encodeURIComponent(spec.file)}`);
+          if (response.ok) {
+            const data = await response.json();
+            setContent(data.content || '');
+            setEditedContent(data.content || '');
+          }
+        } catch (error) {
+          console.error('Failed to fetch spec content:', error);
+        }
+      };
+      fetchContent();
+      setMode('view');
+    }
+  }, [spec, open]);
+
+  // Handle save
+  const handleSave = async () => {
+    if (!spec || !onSave) return;
+    await onSave(spec.id, editedContent);
+    setContent(editedContent);
+    setMode('view');
+  };
+
+  // Handle cancel edit
+  const handleCancelEdit = () => {
+    setEditedContent(content);
+    setMode('view');
+  };
+
+  if (!spec) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={cn('sm:max-w-[800px] max-h-[80vh]', mode === 'edit' && 'flex flex-col')}>
+        <DialogHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <DialogTitle className="flex items-center gap-2">
+                <FileText className="h-5 w-5" />
+                {spec.title}
+              </DialogTitle>
+              {!readOnly && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => mode === 'view' ? setMode('edit') : handleCancelEdit()}
+                  disabled={isLoading}
+                >
+                  {mode === 'view' ? (
+                    <>
+                      <Edit2 className="h-4 w-4 mr-1" />
+                      {formatMessage({ id: 'specs.content.edit', defaultMessage: 'Edit' })}
+                    </>
+                  ) : (
+                    <>
+                      <Eye className="h-4 w-4 mr-1" />
+                      {formatMessage({ id: 'specs.content.view', defaultMessage: 'View' })}
+                    </>
+                  )}
+                </Button>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant={spec.readMode === 'required' ? 'default' : 'secondary'}>
+                {formatMessage({ id: `specs.readMode.${spec.readMode}` })}
+              </Badge>
+              <Badge variant="outline">
+                {formatMessage({ id: `specs.priority.${spec.priority}` })}
+              </Badge>
+            </div>
+          </div>
+          <DialogDescription>
+            {spec.file}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto py-4">
+          {mode === 'view' ? (
+            <div className="space-y-4">
+              {/* Frontmatter Info */}
+              <div className="p-3 bg-muted/50 rounded-lg">
+                <div className="text-sm font-medium mb-2">
+                  {formatMessage({ id: 'specs.content.metadata', defaultMessage: 'Metadata' })}
+                </div>
+                <div className="grid grid-cols-2 gap-2 text-sm">
+                  <div>
+                    <span className="text-muted-foreground">
+                      {formatMessage({ id: 'specs.form.readMode', defaultMessage: 'Read Mode' })}:
+                    </span>{' '}
+                    <Badge variant="secondary" className="text-xs">
+                      {formatMessage({ id: `specs.readMode.${spec.readMode}` })}
+                    </Badge>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">
+                      {formatMessage({ id: 'specs.form.priority', defaultMessage: 'Priority' })}:
+                    </span>{' '}
+                    <Badge variant="outline" className="text-xs">
+                      {formatMessage({ id: `specs.priority.${spec.priority}` })}
+                    </Badge>
+                  </div>
+                </div>
+                {spec.keywords.length > 0 && (
+                  <div className="mt-2 text-sm">
+                    <span className="text-muted-foreground">
+                      {formatMessage({ id: 'specs.form.keywords', defaultMessage: 'Keywords' })}:
+                    </span>{' '}
+                    {spec.keywords.map(k => (
+                      <Badge key={k} variant="outline" className="text-xs mr-1">{k}</Badge>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              {/* Markdown Content */}
+              <div className="border rounded-lg">
+                <div className="bg-muted/30 px-3 py-2 border-b text-sm font-medium">
+                  {formatMessage({ id: 'specs.content.markdownContent', defaultMessage: 'Markdown Content' })}
+                </div>
+                <pre className="p-4 text-sm overflow-auto max-h-[400px] whitespace-pre-wrap break-words">
+                  {body || formatMessage({ id: 'specs.content.noContent', defaultMessage: 'No content available' })}
+                </pre>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <div className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'specs.content.editHint', defaultMessage: 'Edit the full markdown content including frontmatter. Changes to frontmatter will be reflected in the spec metadata.' })}
+              </div>
+              <Textarea
+                value={editedContent}
+                onChange={(e) => setEditedContent(e.target.value)}
+                className="font-mono text-sm min-h-[400px] resize-none"
+                placeholder={formatMessage({ id: 'specs.content.placeholder', defaultMessage: '# Spec Title\n\nContent here...' })}
+                disabled={isLoading}
+              />
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          {mode === 'edit' ? (
+            <>
+              <Button variant="outline" onClick={handleCancelEdit} disabled={isLoading}>
+                {formatMessage({ id: 'specs.common.cancel', defaultMessage: 'Cancel' })}
+              </Button>
+              <Button onClick={handleSave} disabled={isLoading}>
+                {isLoading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    {formatMessage({ id: 'specs.common.saving', defaultMessage: 'Saving...' })}
+                  </>
+                ) : (
+                  <>
+                    <Save className="h-4 w-4 mr-2" />
+                    {formatMessage({ id: 'specs.common.save', defaultMessage: 'Save' })}
+                  </>
+                )}
+              </Button>
+            </>
+          ) : (
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {formatMessage({ id: 'specs.common.close', defaultMessage: 'Close' })}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default SpecContentDialog;

ccw/frontend/src/components/specs/index.ts

@@ -25,6 +25,14 @@ export type {
   SpecDialogProps,
 } from './SpecDialog';
 
+export {
+  SpecContentDialog,
+} from './SpecContentDialog';
+
+export type {
+  SpecContentDialogProps,
+} from './SpecContentDialog';
+
 export {
   HookCard,
 } from './HookCard';

ccw/frontend/src/pages/SpecsSettingsPage.tsx

@@ -1,25 +1,24 @@
 /**
  * Specs Settings Page
  *
- * Main page for managing spec settings, hooks, injection control, and global settings.
- * Uses 5 tabs: Project Specs | Personal Specs | Hooks | Injection | Settings
+ * Main page for managing spec settings, injection control, and global settings.
+ * Uses 4 tabs: Project Specs | Personal Specs | Injection | Settings
  */
 import { useState, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/Tabs';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
+import { Card, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import { ScrollText, User, Plug, Gauge, Settings, RefreshCw, Search } from 'lucide-react';
-import { SpecCard, SpecDialog, type Spec, type SpecFormData } from '@/components/specs';
-import { HookCard, HookDialog, type HookConfig } from '@/components/specs';
+import { ScrollText, User, Gauge, Settings, RefreshCw, Search } from 'lucide-react';
+import { SpecCard, SpecDialog, SpecContentDialog, type Spec, type SpecFormData } from '@/components/specs';
 import { InjectionControlTab } from '@/components/specs/InjectionControlTab';
 import { GlobalSettingsTab } from '@/components/specs/GlobalSettingsTab';
-import { useSpecStats, useSpecsList, useSystemSettings, useRebuildSpecIndex } from '@/hooks/useSystemSettings';
+import { useSpecStats, useSpecsList, useRebuildSpecIndex } from '@/hooks/useSystemSettings';
 import { useWorkflowStore, selectProjectPath } from '@/stores/workflowStore';
 import type { SpecEntry } from '@/lib/api';
 
-type SettingsTab = 'project-specs' | 'personal-specs' | 'hooks' | 'injection' | 'settings';
+type SettingsTab = 'project-specs' | 'personal-specs' | 'injection' | 'settings';
 
 // Convert SpecEntry to Spec for display
 function specEntryToSpec(entry: SpecEntry, dimension: string): Spec {
@@ -31,7 +30,7 @@ function specEntryToSpec(entry: SpecEntry, dimension: string): Spec {
     readMode: entry.readMode as Spec['readMode'],
     priority: entry.priority as Spec['priority'],
     file: entry.file,
-    enabled: true, // Default to enabled
+    enabled: true,
   };
 }
 
@@ -41,14 +40,11 @@ export function SpecsSettingsPage() {
   const [activeTab, setActiveTab] = useState<SettingsTab>('project-specs');
   const [searchQuery, setSearchQuery] = useState('');
   const [editDialogOpen, setEditDialogOpen] = useState(false);
-  const [hookDialogOpen, setHookDialogOpen] = useState(false);
   const [editingSpec, setEditingSpec] = useState<Spec | null>(null);
-  const [editingHook, setEditingHook] = useState<HookConfig | null>(null);
 
   // Fetch real data
   const { data: specsListData, isLoading: specsLoading, refetch: refetchSpecs } = useSpecsList({ projectPath });
   const { data: statsData } = useSpecStats({ projectPath });
-  const { data: systemSettings } = useSystemSettings();
   const rebuildMutation = useRebuildSpecIndex();
 
   // Convert specs data to display format
@@ -74,22 +70,13 @@ export function SpecsSettingsPage() {
     return { projectSpecs: specs, personalSpecs: personal };
   }, [specsListData]);
 
-  // Get hooks from system settings
-  const hooks: HookConfig[] = useMemo(() => {
-    return systemSettings?.recommendedHooks?.map(h => ({
-      id: h.id,
-      name: h.name,
-      event: h.event as HookConfig['event'],
-      command: h.command,
-      description: h.description,
-      scope: h.scope as HookConfig['scope'],
-      enabled: h.autoInstall ?? false,
-      installed: h.autoInstall ?? false,
-    })) ?? [];
-  }, [systemSettings]);
-
   const isLoading = specsLoading;
 
+  const handleSpecView = (spec: Spec) => {
+    setViewingSpec(spec);
+    setContentDialogOpen(true);
+  };
+
   const handleSpecEdit = (spec: Spec) => {
     setEditingSpec(spec);
     setEditDialogOpen(true);
@@ -101,6 +88,11 @@ export function SpecsSettingsPage() {
     setEditDialogOpen(false);
   };
 
+  const handleContentSave = async (specId: string, content: string) => {
+    console.log('Saving spec content:', specId, content.length);
+    // TODO: Implement content save logic
+  };
+
   const handleSpecToggle = async (specId: string, enabled: boolean) => {
     console.log('Toggling spec:', specId, enabled);
     // TODO: Implement toggle logic
@@ -111,27 +103,6 @@ export function SpecsSettingsPage() {
     // TODO: Implement delete logic
   };
 
-  const handleHookEdit = (hook: HookConfig) => {
-    setEditingHook(hook);
-    setHookDialogOpen(true);
-  };
-
-  const handleHookSave = async (hookId: string | null, data: Partial<HookConfig>) => {
-    console.log('Saving hook:', hookId, data);
-    // TODO: Implement save logic
-    setHookDialogOpen(false);
-  };
-
-  const handleHookToggle = async (hookId: string, enabled: boolean) => {
-    console.log('Toggling hook:', hookId, enabled);
-    // TODO: Implement toggle logic
-  };
-
-  const handleHookDelete = async (hookId: string) => {
-    console.log('Deleting hook:', hookId);
-    // TODO: Implement delete logic
-  };
-
   const handleRebuildIndex = async () => {
     console.log('Rebuilding index...');
     rebuildMutation.mutate(undefined, {
@@ -167,8 +138,8 @@ export function SpecsSettingsPage() {
               className="pl-9"
             />
           </div>
-          <Button variant="outline" onClick={handleRebuildIndex}>
-            <RefreshCw className="h-4 w-4 mr-2" />
+          <Button variant="outline" onClick={handleRebuildIndex} disabled={rebuildMutation.isPending}>
+            <RefreshCw className={`h-4 w-4 mr-2 ${rebuildMutation.isPending ? 'animate-spin' : ''}`} />
             {formatMessage({ id: 'specs.rebuildIndex', defaultMessage: 'Rebuild Index' })}
           </Button>
         </div>
@@ -182,7 +153,7 @@ export function SpecsSettingsPage() {
                   <div className="text-sm text-muted-foreground capitalize">{dim}</div>
                   <div className="text-2xl font-bold">{(data as { count: number }).count}</div>
                   <div className="text-xs text-muted-foreground">
-                    {(data as { requiredCount: number }).requiredCount} required
+                    {(data as { requiredCount: number }).requiredCount} {formatMessage({ id: 'specs.required', defaultMessage: 'required' })}
                   </div>
                 </CardContent>
               </Card>
@@ -206,6 +177,7 @@ export function SpecsSettingsPage() {
               <SpecCard
                 key={spec.id}
                 spec={spec}
+                onView={handleSpecView}
                 onEdit={handleSpecEdit}
                 onToggle={handleSpecToggle}
                 onDelete={handleSpecDelete}
@@ -217,118 +189,6 @@ export function SpecsSettingsPage() {
     );
   };
 
-  const renderHooksTab = () => {
-    const filteredHooks = hooks.filter(hook => {
-      if (!searchQuery.trim()) return true;
-      const query = searchQuery.toLowerCase();
-      return hook.name.toLowerCase().includes(query) ||
-        hook.event.toLowerCase().includes(query);
-    });
-
-    // Recommended hooks
-    const recommendedHooks: HookConfig[] = [
-      {
-        id: 'spec-injection-session',
-        name: 'Spec Context Injection (Session)',
-        event: 'SessionStart',
-        command: 'ccw spec load --stdin',
-        scope: 'global',
-        enabled: true,
-        timeout: 5000,
-        failMode: 'continue'
-      },
-      {
-        id: 'spec-injection-prompt',
-        name: 'Spec Context Injection (Prompt)',
-        event: 'UserPromptSubmit',
-        command: 'ccw spec load --stdin',
-        scope: 'project',
-        enabled: true,
-        timeout: 5000,
-        failMode: 'continue'
-      }
-    ];
-
-    return (
-      <div className="space-y-6">
-        {/* Recommended Hooks Section */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Plug className="h-5 w-5" />
-              {formatMessage({ id: 'specs.recommendedHooks', defaultMessage: 'Recommended Hooks' })}
-            </CardTitle>
-            <CardDescription>
-              {formatMessage({ id: 'specs.recommendedHooksDesc', defaultMessage: 'One-click install system-preset spec injection hooks' })}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="flex gap-4 mb-4">
-              <Button onClick={() => console.log('Install all')}>
-                {formatMessage({ id: 'specs.installAll', defaultMessage: 'Install All Recommended Hooks' })}
-              </Button>
-              <div className="text-sm text-muted-foreground flex items-center">
-                {hooks.filter(h => recommendedHooks.some(r => r.command === h.command)).length} / {recommendedHooks.length} installed
-              </div>
-            </div>
-            <div className="grid gap-3">
-              {recommendedHooks.map(hook => (
-                <HookCard
-                  key={hook.id}
-                  hook={hook}
-                  isRecommendedCard={true}
-                  onInstall={() => console.log('Install:', hook.id)}
-                  onEdit={handleHookEdit}
-                  onToggle={handleHookToggle}
-                  onUninstall={handleHookDelete}
-                />
-              ))}
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Installed Hooks Section */}
-        <Card>
-          <CardHeader>
-            <CardTitle>{formatMessage({ id: 'specs.installedHooks', defaultMessage: 'Installed Hooks' })}</CardTitle>
-            <CardDescription>
-              {formatMessage({ id: 'specs.installedHooksDesc', defaultMessage: 'Manage your installed hooks configuration' })}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="relative mb-4">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder={formatMessage({ id: 'specs.searchHooks', defaultMessage: 'Search hooks...' })}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-9"
-              />
-            </div>
-
-            {filteredHooks.length === 0 ? (
-              <div className="py-8 text-center text-muted-foreground">
-                {formatMessage({ id: 'specs.noHooks', defaultMessage: 'No hooks installed. Install recommended hooks above.' })}
-              </div>
-            ) : (
-              <div className="grid gap-3">
-                {filteredHooks.map(hook => (
-                  <HookCard
-                    key={hook.id}
-                    hook={hook}
-                    onEdit={handleHookEdit}
-                    onToggle={handleHookToggle}
-                    onUninstall={handleHookDelete}
-                  />
-                ))}
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    );
-  };
-
   return (
     <div className="max-w-6xl mx-auto">
       {/* Page Header */}
@@ -338,13 +198,13 @@ export function SpecsSettingsPage() {
           {formatMessage({ id: 'specs.pageTitle', defaultMessage: 'Spec Settings' })}
         </h1>
         <p className="text-muted-foreground mt-1">
-          {formatMessage({ id: 'specs.pageDescription', defaultMessage: 'Manage specification injection, hooks, and system settings' })}
+          {formatMessage({ id: 'specs.pageDescription', defaultMessage: 'Manage specification injection and system settings' })}
         </p>
       </div>
 
       {/* Main Tabs */}
       <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as SettingsTab)}>
-        <TabsList className="grid grid-cols-5 mb-6">
+        <TabsList className="grid grid-cols-4 mb-6">
           <TabsTrigger value="project-specs" className="flex items-center gap-2">
             <ScrollText className="h-4 w-4" />
             <span className="hidden sm:inline">{formatMessage({ id: 'specs.tabProjectSpecs', defaultMessage: 'Project Specs' })}</span>
@@ -353,10 +213,6 @@ export function SpecsSettingsPage() {
             <User className="h-4 w-4" />
             <span className="hidden sm:inline">{formatMessage({ id: 'specs.tabPersonalSpecs', defaultMessage: 'Personal' })}</span>
           </TabsTrigger>
-          <TabsTrigger value="hooks" className="flex items-center gap-2">
-            <Plug className="h-4 w-4" />
-            <span className="hidden sm:inline">{formatMessage({ id: 'specs.tabHooks', defaultMessage: 'Hooks' })}</span>
-          </TabsTrigger>
           <TabsTrigger value="injection" className="flex items-center gap-2">
             <Gauge className="h-4 w-4" />
             <span className="hidden sm:inline">{formatMessage({ id: 'specs.tabInjection', defaultMessage: 'Injection' })}</span>
@@ -375,10 +231,6 @@ export function SpecsSettingsPage() {
           {renderSpecsTab('personal')}
         </TabsContent>
 
-        <TabsContent value="hooks">
-          {renderHooksTab()}
-        </TabsContent>
-
         <TabsContent value="injection">
           <InjectionControlTab />
         </TabsContent>
@@ -396,14 +248,12 @@ export function SpecsSettingsPage() {
         onSave={handleSpecSave}
       />
 
-      {/* Edit Hook Dialog */}
-      <HookDialog
-        open={hookDialogOpen}
-        onOpenChange={setHookDialogOpen}
-        hook={editingHook ?? undefined}
-        onSave={(hookData) => {
-          handleHookSave(editingHook?.id ?? null, hookData);
-        }}
+      {/* View/Edit Spec Content Dialog */}
+      <SpecContentDialog
+        open={contentDialogOpen}
+        onOpenChange={setContentDialogOpen}
+        spec={viewingSpec}
+        onSave={handleContentSave}
       />
     </div>
   );