feat: Add CodexLens Manager Page with tabbed interface for managing CodexLens features

feat: Implement ConflictTab component to display conflict resolution decisions in session detail

feat: Create ImplPlanTab component to show implementation plan with modal viewer in session detail

feat: Develop ReviewTab component to display review findings by dimension in session detail

test: Add end-to-end tests for CodexLens Manager functionality including navigation, tab switching, and settings validation

ccw/frontend/src/components/issue/hub/DiscoveryPanel.tsx

@@ -7,7 +7,7 @@ import { useIntl } from 'react-intl';
 import { Radar, AlertCircle, Loader2 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
-import { useIssueDiscovery } from '@/hooks/useIssues';
+import { useIssueDiscovery, useIssues } from '@/hooks/useIssues';
 import { DiscoveryCard } from '@/components/issue/discovery/DiscoveryCard';
 import { DiscoveryDetail } from '@/components/issue/discovery/DiscoveryDetail';
 
@@ -27,8 +27,16 @@ export function DiscoveryPanel() {
     setFilters,
     selectSession,
     exportFindings,
+    exportSelectedFindings,
+    isExporting,
   } = useIssueDiscovery({ refetchInterval: 3000 });
 
+  // Fetch issues to find related ones when clicking findings
+  const { issues } = useIssues({
+    // Don't apply filters to get all issues for matching
+    filter: undefined
+  });
+
   if (error) {
     return (
       <Card className="p-8 text-center">
@@ -144,6 +152,9 @@ export function DiscoveryPanel() {
               filters={filters}
               onFilterChange={setFilters}
               onExport={exportFindings}
+              onExportSelected={exportSelectedFindings}
+              isExporting={isExporting}
+              issues={issues}
             />
           )}
         </div>

ccw/frontend/src/components/issue/hub/IssueDrawer.tsx

@@ -0,0 +1,238 @@
+// ========================================
+// IssueDrawer Component
+// ========================================
+// Right-side issue detail drawer with Overview/Solutions/History tabs
+
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { X, FileText, CheckCircle, Circle, Loader2, Tag, History, Hash } from 'lucide-react';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
+import { cn } from '@/lib/utils';
+import type { Issue } from '@/lib/api';
+
+// ========== Types ==========
+export interface IssueDrawerProps {
+  issue: Issue | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type TabValue = 'overview' | 'solutions' | 'history' | 'json';
+
+// ========== Status Configuration ==========
+const statusConfig: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'; icon: React.ComponentType<{ className?: string }> }> = {
+  open: { label: 'issues.status.open', variant: 'info', icon: Circle },
+  in_progress: { label: 'issues.status.inProgress', variant: 'warning', icon: Loader2 },
+  resolved: { label: 'issues.status.resolved', variant: 'success', icon: CheckCircle },
+  closed: { label: 'issues.status.closed', variant: 'secondary', icon: Circle },
+  completed: { label: 'issues.status.completed', variant: 'success', icon: CheckCircle },
+};
+
+const priorityConfig: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info' }> = {
+  low: { label: 'issues.priority.low', variant: 'secondary' },
+  medium: { label: 'issues.priority.medium', variant: 'default' },
+  high: { label: 'issues.priority.high', variant: 'warning' },
+  critical: { label: 'issues.priority.critical', variant: 'destructive' },
+};
+
+// ========== Component ==========
+
+export function IssueDrawer({ issue, isOpen, onClose }: IssueDrawerProps) {
+  const { formatMessage } = useIntl();
+  const [activeTab, setActiveTab] = useState<TabValue>('overview');
+
+  // Reset to overview when issue changes
+  useState(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  });
+
+  if (!issue || !isOpen) {
+    return null;
+  }
+
+  const status = statusConfig[issue.status] || statusConfig.open;
+  const priority = priorityConfig[issue.priority] || priorityConfig.medium;
+
+  return (
+    <>
+      {/* Overlay */}
+      <div
+        className={cn(
+          'fixed inset-0 bg-black/40 transition-opacity z-40',
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Drawer */}
+      <div
+        className={cn(
+          'fixed top-0 right-0 h-full w-1/2 bg-background border-l border-border shadow-2xl z-50 flex flex-col transition-transform duration-300 ease-in-out',
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        )}
+        role="dialog"
+        aria-modal="true"
+        style={{ minWidth: '400px', maxWidth: '800px' }}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between p-6 border-b border-border bg-card">
+          <div className="flex-1 min-w-0 mr-4">
+            <div className="flex items-center gap-2 mb-2 flex-wrap">
+              <span className="text-xs font-mono text-muted-foreground">{issue.id}</span>
+              <Badge variant={status.variant} className="gap-1">
+                <status.icon className="h-3 w-3" />
+                {formatMessage({ id: status.label })}
+              </Badge>
+              <Badge variant={priority.variant}>
+                {formatMessage({ id: priority.label })}
+              </Badge>
+            </div>
+            <h2 className="text-lg font-semibold text-foreground">
+              {issue.title}
+            </h2>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose} className="flex-shrink-0 hover:bg-secondary">
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        {/* Tabs */}
+        <div className="px-6 pt-4 bg-card">
+          <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as TabValue)} className="w-full">
+            <TabsList className="w-full">
+              <TabsTrigger value="overview" className="flex-1">
+                <FileText className="h-4 w-4 mr-2" />
+                {formatMessage({ id: 'issues.detail.tabs.overview' })}
+              </TabsTrigger>
+              <TabsTrigger value="solutions" className="flex-1">
+                <CheckCircle className="h-4 w-4 mr-2" />
+                {formatMessage({ id: 'issues.detail.tabs.solutions' })}
+                {issue.solutions && issue.solutions.length > 0 && (
+                  <Badge variant="secondary" className="ml-1">
+                    {issue.solutions.length}
+                  </Badge>
+                )}
+              </TabsTrigger>
+              <TabsTrigger value="history" className="flex-1">
+                <History className="h-4 w-4 mr-2" />
+                {formatMessage({ id: 'issues.detail.tabs.history' })}
+              </TabsTrigger>
+              <TabsTrigger value="json" className="flex-1">
+                <Hash className="h-4 w-4 mr-2" />
+                JSON
+              </TabsTrigger>
+            </TabsList>
+
+            {/* Tab Content */}
+            <div className="overflow-y-auto pr-2" style={{ height: 'calc(100vh - 200px)' }}>
+              {/* Overview Tab */}
+              <TabsContent value="overview" className="mt-4 pb-6 focus-visible:outline-none">
+                <div className="space-y-6">
+                  {/* Context */}
+                  {issue.context && (
+                    <div>
+                      <h3 className="text-sm font-semibold text-foreground mb-2">
+                        {formatMessage({ id: 'issues.detail.overview.context' })}
+                      </h3>
+                      <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                        {issue.context}
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Labels */}
+                  {issue.labels && issue.labels.length > 0 && (
+                    <div>
+                      <h3 className="text-sm font-semibold text-foreground mb-2">
+                        {formatMessage({ id: 'issues.detail.overview.labels' })}
+                      </h3>
+                      <div className="flex flex-wrap gap-2">
+                        {issue.labels.map((label, index) => (
+                          <Badge key={index} variant="outline" className="gap-1">
+                            <Tag className="h-3 w-3" />
+                            {label}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Meta Info */}
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="p-3 bg-muted/50 rounded-md">
+                      <p className="text-xs text-muted-foreground">{formatMessage({ id: 'issues.detail.overview.createdAt' })}</p>
+                      <p className="text-sm">{new Date(issue.createdAt).toLocaleString()}</p>
+                    </div>
+                    {issue.updatedAt && (
+                      <div className="p-3 bg-muted/50 rounded-md">
+                        <p className="text-xs text-muted-foreground">{formatMessage({ id: 'issues.detail.overview.updatedAt' })}</p>
+                        <p className="text-sm">{new Date(issue.updatedAt).toLocaleString()}</p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </TabsContent>
+
+              {/* Solutions Tab */}
+              <TabsContent value="solutions" className="mt-4 pb-6 focus-visible:outline-none">
+                {!issue.solutions || issue.solutions.length === 0 ? (
+                  <div className="text-center py-12 text-muted-foreground">
+                    <CheckCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                    <p className="text-sm">{formatMessage({ id: 'issues.detail.solutions.empty' })}</p>
+                  </div>
+                ) : (
+                  <div className="space-y-4">
+                    {issue.solutions.map((solution, index) => (
+                      <div key={solution.id || index} className="p-4 bg-muted/50 rounded-md border border-border">
+                        <div className="flex items-center justify-between mb-2">
+                          <Badge variant={solution.status === 'completed' ? 'success' : 'secondary'}>
+                            {solution.status}
+                          </Badge>
+                          {solution.estimatedEffort && (
+                            <span className="text-xs text-muted-foreground">
+                              {solution.estimatedEffort}
+                            </span>
+                          )}
+                        </div>
+                        <p className="text-sm font-medium mb-1">{solution.description}</p>
+                        {solution.approach && (
+                          <p className="text-xs text-muted-foreground">{solution.approach}</p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </TabsContent>
+
+              {/* History Tab */}
+              <TabsContent value="history" className="mt-4 pb-6 focus-visible:outline-none">
+                <div className="text-center py-12 text-muted-foreground">
+                  <History className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p className="text-sm">{formatMessage({ id: 'issues.detail.history.empty' })}</p>
+                </div>
+              </TabsContent>
+
+              {/* JSON Tab */}
+              <TabsContent value="json" className="mt-4 pb-6 focus-visible:outline-none">
+                <pre className="p-4 bg-muted rounded-md overflow-x-auto text-xs">
+                  {JSON.stringify(issue, null, 2)}
+                </pre>
+              </TabsContent>
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default IssueDrawer;

ccw/frontend/src/components/issue/hub/IssuesPanel.tsx

@@ -6,115 +6,27 @@
 import { useState, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import {
-  Plus,
   Search,
-  RefreshCw,
-  Loader2,
-  Github,
   CheckCircle,
   Clock,
   AlertTriangle,
   AlertCircle,
 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { Badge } from '@/components/ui/Badge';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/Dialog';
+import { Button } from '@/components/ui/Button';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
 import { IssueCard } from '@/components/shared/IssueCard';
+import { IssueDrawer } from '@/components/issue/hub/IssueDrawer';
 import { useIssues, useIssueMutations } from '@/hooks';
 import type { Issue } from '@/lib/api';
-import { cn } from '@/lib/utils';
 
 type StatusFilter = 'all' | Issue['status'];
 type PriorityFilter = 'all' | Issue['priority'];
 
-interface NewIssueDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSubmit: (data: { title: string; context?: string; priority?: Issue['priority'] }) => void;
-  isCreating: boolean;
-}
-
-function NewIssueDialog({ open, onOpenChange, onSubmit, isCreating }: NewIssueDialogProps) {
-  const { formatMessage } = useIntl();
-  const [title, setTitle] = useState('');
-  const [context, setContext] = useState('');
-  const [priority, setPriority] = useState<Issue['priority']>('medium');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (title.trim()) {
-      onSubmit({ title: title.trim(), context: context.trim() || undefined, priority });
-      setTitle('');
-      setContext('');
-      setPriority('medium');
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{formatMessage({ id: 'issues.createDialog.title' })}</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
-          <div>
-            <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.createDialog.labels.title' })}</label>
-            <Input
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder={formatMessage({ id: 'issues.createDialog.placeholders.title' })}
-              className="mt-1"
-              required
-            />
-          </div>
-          <div>
-            <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.createDialog.labels.context' })}</label>
-            <textarea
-              value={context}
-              onChange={(e) => setContext(e.target.value)}
-              placeholder={formatMessage({ id: 'issues.createDialog.placeholders.context' })}
-              className="mt-1 w-full min-h-[100px] p-3 bg-background border border-input rounded-md text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary"
-            />
-          </div>
-          <div>
-            <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.createDialog.labels.priority' })}</label>
-            <Select value={priority} onValueChange={(v) => setPriority(v as Issue['priority'])}>
-              <SelectTrigger className="mt-1">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="low">{formatMessage({ id: 'issues.priority.low' })}</SelectItem>
-                <SelectItem value="medium">{formatMessage({ id: 'issues.priority.medium' })}</SelectItem>
-                <SelectItem value="high">{formatMessage({ id: 'issues.priority.high' })}</SelectItem>
-                <SelectItem value="critical">{formatMessage({ id: 'issues.priority.critical' })}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="flex justify-end gap-2">
-            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
-              {formatMessage({ id: 'issues.createDialog.buttons.cancel' })}
-            </Button>
-            <Button type="submit" disabled={isCreating || !title.trim()}>
-              {isCreating ? (
-                <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                  {formatMessage({ id: 'issues.createDialog.buttons.creating' })}
-                </>
-              ) : (
-                <>
-                  <Plus className="w-4 h-4 mr-2" />
-                  {formatMessage({ id: 'issues.createDialog.buttons.create' })}
-                </>
-              )}
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
+interface IssuesPanelProps {
+  onCreateIssue?: () => void;
 }
 
 interface IssueListProps {
@@ -165,14 +77,14 @@ function IssueList({ issues, isLoading, onIssueClick, onIssueEdit, onIssueDelete
   );
 }
 
-export function IssuesPanel() {
+export function IssuesPanel({ onCreateIssue: _onCreateIssue }: IssuesPanelProps) {
   const { formatMessage } = useIntl();
   const [searchQuery, setSearchQuery] = useState('');
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [priorityFilter, setPriorityFilter] = useState<PriorityFilter>('all');
-  const [isNewIssueOpen, setIsNewIssueOpen] = useState(false);
+  const [selectedIssue, setSelectedIssue] = useState<Issue | null>(null);
 
-  const { issues, issuesByStatus, openCount, criticalCount, isLoading, isFetching, refetch } = useIssues({
+  const { issues, issuesByStatus, openCount, criticalCount, isLoading } = useIssues({
     filter: {
       search: searchQuery || undefined,
       status: statusFilter !== 'all' ? [statusFilter] : undefined,
@@ -180,7 +92,7 @@ export function IssuesPanel() {
     },
   });
 
-  const { createIssue, updateIssue, deleteIssue, isCreating } = useIssueMutations();
+  const { updateIssue, deleteIssue } = useIssueMutations();
 
   const statusCounts = useMemo(() => ({
     all: issues.length,
@@ -191,11 +103,6 @@ export function IssuesPanel() {
     completed: issuesByStatus.completed?.length || 0,
   }), [issues, issuesByStatus]);
 
-  const handleCreateIssue = async (data: { title: string; context?: string; priority?: Issue['priority'] }) => {
-    await createIssue(data);
-    setIsNewIssueOpen(false);
-  };
-
   const handleEditIssue = (_issue: Issue) => {};
 
   const handleDeleteIssue = async (issue: Issue) => {
@@ -208,23 +115,16 @@ export function IssuesPanel() {
     await updateIssue(issue.id, { status });
   };
 
+  const handleIssueClick = (issue: Issue) => {
+    setSelectedIssue(issue);
+  };
+
+  const handleCloseDrawer = () => {
+    setSelectedIssue(null);
+  };
+
   return (
     <div className="space-y-4">
-      <div className="flex gap-2 justify-end">
-        <Button variant="outline" onClick={() => refetch()} disabled={isFetching}>
-          <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
-          {formatMessage({ id: 'common.actions.refresh' })}
-        </Button>
-        <Button variant="outline">
-          <Github className="w-4 h-4 mr-2" />
-          {formatMessage({ id: 'issues.actions.github' })}
-        </Button>
-        <Button onClick={() => setIsNewIssueOpen(true)}>
-          <Plus className="w-4 h-4 mr-2" />
-          {formatMessage({ id: 'issues.actions.create' })}
-        </Button>
-      </div>
-
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         <Card className="p-4">
           <div className="flex items-center gap-2">
@@ -312,9 +212,21 @@ export function IssuesPanel() {
         </Button>
       </div>
 
-      <IssueList issues={issues} isLoading={isLoading} onIssueClick={() => {}} onIssueEdit={handleEditIssue} onIssueDelete={handleDeleteIssue} onStatusChange={handleStatusChange} />
+      <IssueList
+        issues={issues}
+        isLoading={isLoading}
+        onIssueClick={handleIssueClick}
+        onIssueEdit={handleEditIssue}
+        onIssueDelete={handleDeleteIssue}
+        onStatusChange={handleStatusChange}
+      />
 
-      <NewIssueDialog open={isNewIssueOpen} onOpenChange={setIsNewIssueOpen} onSubmit={handleCreateIssue} isCreating={isCreating} />
+      {/* Issue Detail Drawer */}
+      <IssueDrawer
+        issue={selectedIssue}
+        isOpen={selectedIssue !== null}
+        onClose={handleCloseDrawer}
+      />
     </div>
   );
 }

ccw/frontend/src/components/issue/hub/QueuePanel.tsx

@@ -3,9 +3,9 @@
 // ========================================
 // Content panel for Queue tab in IssueHub
 
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
-  RefreshCw,
   AlertCircle,
   CheckCircle,
   Clock,
@@ -13,11 +13,11 @@ import {
   GitMerge,
 } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
 import { QueueCard } from '@/components/issue/queue/QueueCard';
+import { SolutionDrawer } from '@/components/issue/queue/SolutionDrawer';
 import { useIssueQueue, useQueueMutations } from '@/hooks';
-import { cn } from '@/lib/utils';
+import type { QueueItem } from '@/lib/api';
 
 // ========== Loading Skeleton ==========
 
@@ -70,17 +70,20 @@ function QueueEmptyState() {
 
 export function QueuePanel() {
   const { formatMessage } = useIntl();
+  const [selectedItem, setSelectedItem] = useState<QueueItem | null>(null);
 
-  const { data: queueData, isLoading, isFetching, refetch, error } = useIssueQueue();
+  const { data: queueData, isLoading, error } = useIssueQueue();
   const {
     activateQueue,
     deactivateQueue,
     deleteQueue,
     mergeQueues,
+    splitQueue,
     isActivating,
     isDeactivating,
     isDeleting,
     isMerging,
+    isSplitting,
   } = useQueueMutations();
 
   // Get queue data with proper type
@@ -123,6 +126,22 @@ export function QueuePanel() {
     }
   };
 
+  const handleSplit = async (sourceQueueId: string, itemIds: string[]) => {
+    try {
+      await splitQueue(sourceQueueId, itemIds);
+    } catch (err) {
+      console.error('Failed to split queue:', err);
+    }
+  };
+
+  const handleItemClick = (item: QueueItem) => {
+    setSelectedItem(item);
+  };
+
+  const handleCloseDrawer = () => {
+    setSelectedItem(null);
+  };
+
   if (isLoading) {
     return <QueuePanelSkeleton />;
   }
@@ -150,18 +169,6 @@ export function QueuePanel() {
 
   return (
     <div className="space-y-6">
-      {/* Header Actions */}
-      <div className="flex justify-end">
-        <Button
-          variant="outline"
-          onClick={() => refetch()}
-          disabled={isFetching}
-        >
-          <RefreshCw className={cn('w-4 h-4 mr-2', isFetching && 'animate-spin')} />
-          {formatMessage({ id: 'common.actions.refresh' })}
-        </Button>
-      </div>
-
       {/* Stats Cards */}
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         <Card className="p-4">
@@ -229,13 +236,23 @@ export function QueuePanel() {
           onDeactivate={handleDeactivate}
           onDelete={handleDelete}
           onMerge={handleMerge}
+          onSplit={handleSplit}
+          onItemClick={handleItemClick}
           isActivating={isActivating}
           isDeactivating={isDeactivating}
           isDeleting={isDeleting}
           isMerging={isMerging}
+          isSplitting={isSplitting}
         />
       </div>
 
+      {/* Solution Detail Drawer */}
+      <SolutionDrawer
+        item={selectedItem}
+        isOpen={selectedItem !== null}
+        onClose={handleCloseDrawer}
+      />
+
       {/* Status Footer */}
       <div className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
         <div className="flex items-center gap-2 text-sm text-muted-foreground">