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/discovery/DiscoveryDetail.tsx

@@ -5,13 +5,15 @@
 
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Download, FileText, BarChart3, Info } from 'lucide-react';
+import { Download, FileText, BarChart3, Info, Upload } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/Tabs';
 import { Badge } from '@/components/ui/Badge';
 import { Progress } from '@/components/ui/Progress';
+import { IssueDrawer } from '@/components/issue/hub/IssueDrawer';
 import type { DiscoverySession, Finding } from '@/lib/api';
+import type { Issue } from '@/lib/api';
 import type { FindingFilters } from '@/hooks/useIssues';
 import { FindingList } from './FindingList';
 
@@ -22,6 +24,9 @@ interface DiscoveryDetailProps {
   filters: FindingFilters;
   onFilterChange: (filters: FindingFilters) => void;
   onExport: () => void;
+  onExportSelected?: (findingIds: string[]) => Promise<{ success: boolean; message?: string; exported?: number }>;
+  isExporting?: boolean;
+  issues?: Issue[]; // Optional: pass issues to find related ones
 }
 
 export function DiscoveryDetail({
@@ -31,9 +36,35 @@ export function DiscoveryDetail({
   filters,
   onFilterChange,
   onExport,
+  onExportSelected,
+  isExporting = false,
+  issues = [],
 }: DiscoveryDetailProps) {
   const { formatMessage } = useIntl();
   const [activeTab, setActiveTab] = useState('findings');
+  const [selectedIssue, setSelectedIssue] = useState<Issue | null>(null);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  const handleFindingClick = (finding: Finding) => {
+    // If finding has an associated issue_id, find and show that issue
+    if (finding.issue_id) {
+      const relatedIssue = issues.find(i => i.id === finding.issue_id);
+      if (relatedIssue) {
+        setSelectedIssue(relatedIssue);
+      }
+    }
+  };
+
+  const handleCloseDrawer = () => {
+    setSelectedIssue(null);
+  };
+
+  const handleExportSelected = async () => {
+    if (onExportSelected && selectedIds.length > 0) {
+      await onExportSelected(selectedIds);
+      setSelectedIds([]); // Clear selection after export
+    }
+  };
 
   if (!session) {
     return (
@@ -73,10 +104,25 @@ export function DiscoveryDetail({
             {formatMessage({ id: 'issues.discovery.sessionId' })}: {session.id}
           </p>
         </div>
-        <Button variant="outline" onClick={onExport} disabled={findings.length === 0}>
-          <Download className="w-4 h-4 mr-2" />
-          {formatMessage({ id: 'issues.discovery.export' })}
-        </Button>
+        <div className="flex items-center gap-2">
+          {selectedIds.length > 0 && onExportSelected && (
+            <Button
+              variant="default"
+              onClick={handleExportSelected}
+              disabled={isExporting || selectedIds.length === 0}
+            >
+              <Upload className="w-4 h-4 mr-2" />
+              {isExporting
+                ? formatMessage({ id: 'issues.discovery.exporting' })
+                : formatMessage({ id: 'issues.discovery.exportSelected' }, { count: selectedIds.length })
+              }
+            </Button>
+          )}
+          <Button variant="outline" onClick={onExport} disabled={findings.length === 0}>
+            <Download className="w-4 h-4 mr-2" />
+            {formatMessage({ id: 'issues.discovery.export' })}
+          </Button>
+        </div>
       </div>
 
       {/* Status Badge */}
@@ -125,7 +171,14 @@ export function DiscoveryDetail({
         </TabsList>
 
         <TabsContent value="findings" className="mt-4">
-          <FindingList findings={findings} filters={filters} onFilterChange={onFilterChange} />
+          <FindingList
+            findings={findings}
+            filters={filters}
+            onFilterChange={onFilterChange}
+            onFindingClick={handleFindingClick}
+            selectedIds={selectedIds}
+            onSelectionChange={onExportSelected ? setSelectedIds : undefined}
+          />
         </TabsContent>
 
         <TabsContent value="progress" className="mt-4 space-y-4">
@@ -219,6 +272,15 @@ export function DiscoveryDetail({
           </Card>
         </TabsContent>
       </Tabs>
+
+      {/* Issue Detail Drawer */}
+      <IssueDrawer
+        issue={selectedIssue}
+        isOpen={selectedIssue !== null}
+        onClose={handleCloseDrawer}
+      />
     </div>
   );
 }
+
+export default DiscoveryDetail;

ccw/frontend/src/components/issue/discovery/FindingList.tsx

@@ -3,12 +3,14 @@
 // ========================================
 // Displays findings with filters and severity badges
 
+import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Search, FileCode, AlertTriangle } from 'lucide-react';
+import { Search, FileCode, AlertTriangle, ExternalLink, Check } from 'lucide-react';
 import { Card } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { Input } from '@/components/ui/Input';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/Select';
+import { cn } from '@/lib/utils';
 import type { Finding } from '@/lib/api';
 import type { FindingFilters } from '@/hooks/useIssues';
 
@@ -16,17 +18,64 @@ interface FindingListProps {
   findings: Finding[];
   filters: FindingFilters;
   onFilterChange: (filters: FindingFilters) => void;
+  onFindingClick?: (finding: Finding) => void;
+  selectedIds?: string[];
+  onSelectionChange?: (selectedIds: string[]) => void;
 }
 
-const severityConfig = {
-  critical: { variant: 'destructive' as const, label: 'issues.discovery.severity.critical' },
-  high: { variant: 'destructive' as const, label: 'issues.discovery.severity.high' },
-  medium: { variant: 'warning' as const, label: 'issues.discovery.severity.medium' },
-  low: { variant: 'secondary' as const, label: 'issues.discovery.severity.low' },
+const severityConfig: Record<string, { variant: 'destructive' | 'warning' | 'secondary' | 'outline' | 'success' | 'info' | 'default'; label: string }> = {
+  critical: { variant: 'destructive', label: 'issues.discovery.severity.critical' },
+  high: { variant: 'destructive', label: 'issues.discovery.severity.high' },
+  medium: { variant: 'warning', label: 'issues.discovery.severity.medium' },
+  low: { variant: 'secondary', label: 'issues.discovery.severity.low' },
 };
 
-export function FindingList({ findings, filters, onFilterChange }: FindingListProps) {
+function getSeverityConfig(severity: string) {
+  return severityConfig[severity] || { variant: 'outline', label: 'issues.discovery.severity.unknown' };
+}
+
+export function FindingList({
+  findings,
+  filters,
+  onFilterChange,
+  onFindingClick,
+  selectedIds = [],
+  onSelectionChange,
+}: FindingListProps) {
   const { formatMessage } = useIntl();
+  const [internalSelection, setInternalSelection] = useState<Set<string>>(new Set());
+
+  // Use external selection if provided, otherwise use internal state
+  const selectionSet = onSelectionChange
+    ? new Set(selectedIds)
+    : internalSelection;
+
+  const handleToggleSelection = (findingId: string) => {
+    const newSet = new Set(selectionSet);
+    if (newSet.has(findingId)) {
+      newSet.delete(findingId);
+    } else {
+      newSet.add(findingId);
+    }
+    if (onSelectionChange) {
+      onSelectionChange(Array.from(newSet));
+    } else {
+      setInternalSelection(newSet);
+    }
+  };
+
+  const handleToggleAll = () => {
+    const allSelected = selectionSet.size === findings.length && findings.length > 0;
+    const newSet = allSelected ? new Set<string>() : new Set(findings.map(f => f.id));
+    if (onSelectionChange) {
+      onSelectionChange(Array.from(newSet));
+    } else {
+      setInternalSelection(newSet);
+    }
+  };
+
+  const isAllSelected = findings.length > 0 && selectionSet.size === findings.length;
+  const isSomeSelected = selectionSet.size > 0 && selectionSet.size < findings.length;
 
   // Extract unique types for filter
   const uniqueTypes = Array.from(new Set(findings.map(f => f.type))).sort();
@@ -36,10 +85,10 @@ export function FindingList({ findings, filters, onFilterChange }: FindingListPr
       <Card className="p-8 text-center">
         <AlertTriangle className="w-12 h-12 mx-auto text-muted-foreground/50" />
         <h3 className="mt-4 text-lg font-medium text-foreground">
-          {formatMessage({ id: 'issues.discovery.noFindings' })}
+          {formatMessage({ id: 'issues.discovery.findings.noFindings' })}
         </h3>
         <p className="mt-2 text-muted-foreground">
-          {formatMessage({ id: 'issues.discovery.noFindingsDescription' })}
+          {formatMessage({ id: 'issues.discovery.findings.noFindingsDescription' })}
         </p>
       </Card>
     );
@@ -52,7 +101,7 @@ export function FindingList({ findings, filters, onFilterChange }: FindingListPr
         <div className="relative flex-1">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
           <Input
-            placeholder={formatMessage({ id: 'issues.discovery.searchPlaceholder' })}
+            placeholder={formatMessage({ id: 'issues.discovery.findings.searchPlaceholder' })}
             value={filters.search || ''}
             onChange={(e) => onFilterChange({ ...filters, search: e.target.value || undefined })}
             className="pl-9"
@@ -63,10 +112,10 @@ export function FindingList({ findings, filters, onFilterChange }: FindingListPr
           onValueChange={(v) => onFilterChange({ ...filters, severity: v === 'all' ? undefined : v as Finding['severity'] })}
         >
           <SelectTrigger className="w-[140px]">
-            <SelectValue placeholder={formatMessage({ id: 'issues.discovery.filterBySeverity' })} />
+            <SelectValue placeholder={formatMessage({ id: 'issues.discovery.findings.filterBySeverity' })} />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="all">{formatMessage({ id: 'issues.discovery.allSeverities' })}</SelectItem>
+            <SelectItem value="all">{formatMessage({ id: 'issues.discovery.findings.severity.all' })}</SelectItem>
             <SelectItem value="critical">{formatMessage({ id: 'issues.discovery.severity.critical' })}</SelectItem>
             <SelectItem value="high">{formatMessage({ id: 'issues.discovery.severity.high' })}</SelectItem>
             <SelectItem value="medium">{formatMessage({ id: 'issues.discovery.severity.medium' })}</SelectItem>
@@ -79,50 +128,155 @@ export function FindingList({ findings, filters, onFilterChange }: FindingListPr
             onValueChange={(v) => onFilterChange({ ...filters, type: v === 'all' ? undefined : v })}
           >
             <SelectTrigger className="w-[140px]">
-              <SelectValue placeholder={formatMessage({ id: 'issues.discovery.filterByType' })} />
+              <SelectValue placeholder={formatMessage({ id: 'issues.discovery.findings.filterByType' })} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{formatMessage({ id: 'issues.discovery.allTypes' })}</SelectItem>
+              <SelectItem value="all">{formatMessage({ id: 'issues.discovery.findings.type.all' })}</SelectItem>
               {uniqueTypes.map(type => (
                 <SelectItem key={type} value={type}>{type}</SelectItem>
               ))}
             </SelectContent>
           </Select>
         )}
+        <Select
+          value={filters.exported === undefined ? 'all' : filters.exported ? 'exported' : 'notExported'}
+          onValueChange={(v) => {
+            if (v === 'all') {
+              onFilterChange({ ...filters, exported: undefined });
+            } else if (v === 'exported') {
+              onFilterChange({ ...filters, exported: true });
+            } else {
+              onFilterChange({ ...filters, exported: false });
+            }
+          }}
+        >
+          <SelectTrigger className="w-[140px]">
+            <SelectValue placeholder={formatMessage({ id: 'issues.discovery.findings.filterByExported' })} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{formatMessage({ id: 'issues.discovery.findings.exportedStatus.all' })}</SelectItem>
+            <SelectItem value="exported">{formatMessage({ id: 'issues.discovery.findings.exportedStatus.exported' })}</SelectItem>
+            <SelectItem value="notExported">{formatMessage({ id: 'issues.discovery.findings.exportedStatus.notExported' })}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select
+          value={filters.hasIssue === undefined ? 'all' : filters.hasIssue ? 'hasIssue' : 'noIssue'}
+          onValueChange={(v) => {
+            if (v === 'all') {
+              onFilterChange({ ...filters, hasIssue: undefined });
+            } else if (v === 'hasIssue') {
+              onFilterChange({ ...filters, hasIssue: true });
+            } else {
+              onFilterChange({ ...filters, hasIssue: false });
+            }
+          }}
+        >
+          <SelectTrigger className="w-[140px]">
+            <SelectValue placeholder={formatMessage({ id: 'issues.discovery.findings.filterByIssue' })} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">{formatMessage({ id: 'issues.discovery.findings.issueStatus.all' })}</SelectItem>
+            <SelectItem value="hasIssue">{formatMessage({ id: 'issues.discovery.findings.issueStatus.hasIssue' })}</SelectItem>
+            <SelectItem value="noIssue">{formatMessage({ id: 'issues.discovery.findings.issueStatus.noIssue' })}</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
 
+      {/* Select All */}
+      {onSelectionChange && (
+        <button
+          onClick={handleToggleAll}
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <div className="w-4 h-4 border rounded flex items-center justify-center">
+            {isAllSelected ? (
+              <Check className="w-3 h-3" />
+            ) : isSomeSelected ? (
+              <div className="w-2 h-2 bg-foreground rounded-sm" />
+            ) : null}
+          </div>
+          {isAllSelected
+            ? formatMessage({ id: 'issues.discovery.findings.deselectAll' })
+            : formatMessage({ id: 'issues.discovery.findings.selectAll' })}
+        </button>
+      )}
+
       {/* Findings List */}
       <div className="space-y-3">
         {findings.map((finding) => {
-          const config = severityConfig[finding.severity];
+          const config = getSeverityConfig(finding.severity);
+          const isSelected = selectionSet.has(finding.id);
           return (
-            <Card key={finding.id} className="p-4">
-              <div className="flex items-start justify-between gap-3 mb-2">
-                <div className="flex items-center gap-2 flex-wrap">
-                  <Badge variant={config.variant}>
-                    {formatMessage({ id: config.label })}
-                  </Badge>
-                  {finding.type && (
-                    <Badge variant="outline" className="text-xs">
-                      {finding.type}
-                    </Badge>
-                  )}
-                </div>
-                {finding.file && (
-                  <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                    <FileCode className="w-3 h-3" />
-                    <span>{finding.file}</span>
-                    {finding.line && <span>:{finding.line}</span>}
+            <Card
+              key={finding.id}
+              className={cn(
+                "p-4 transition-colors",
+                onFindingClick && "cursor-pointer hover:bg-muted/50"
+              )}
+              onClick={(e) => {
+                // Don't trigger finding click when clicking checkbox
+                if ((e.target as HTMLElement).closest('.selection-checkbox')) return;
+                onFindingClick?.(finding);
+              }}
+            >
+              <div className="flex items-start gap-3">
+                {/* Checkbox */}
+                {onSelectionChange && (
+                  <div
+                    className="selection-checkbox flex-shrink-0 mt-1"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleToggleSelection(finding.id);
+                    }}
+                  >
+                    <div className={cn(
+                      "w-4 h-4 border rounded flex items-center justify-center cursor-pointer transition-colors",
+                      isSelected ? "bg-primary border-primary" : "border-border hover:border-primary"
+                    )}>
+                      {isSelected && <Check className="w-3 h-3 text-primary-foreground" />}
+                    </div>
                   </div>
                 )}
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-start justify-between gap-3 mb-2">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Badge variant={config.variant}>
+                        {formatMessage({ id: config.label })}
+                      </Badge>
+                      {finding.type && (
+                        <Badge variant="outline" className="text-xs">
+                          {finding.type}
+                        </Badge>
+                      )}
+                      {finding.exported && (
+                        <Badge variant="success" className="text-xs gap-1">
+                          <ExternalLink className="w-3 h-3" />
+                          {formatMessage({ id: 'issues.discovery.findings.exported' })}
+                        </Badge>
+                      )}
+                      {finding.issue_id && (
+                        <Badge variant="info" className="text-xs">
+                          {formatMessage({ id: 'issues.discovery.findings.hasIssue' })}: {finding.issue_id}
+                        </Badge>
+                      )}
+                    </div>
+                    {finding.file && (
+                      <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                        <FileCode className="w-3 h-3" />
+                        <span>{finding.file}</span>
+                        {finding.line && <span>:{finding.line}</span>}
+                      </div>
+                    )}
+                  </div>
+                  <h4 className="font-medium text-foreground mb-1">{finding.title}</h4>
+                  <p className="text-sm text-muted-foreground line-clamp-2">{finding.description}</p>
+                  {finding.code_snippet && (
+                    <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-x-auto">
+                      <code>{finding.code_snippet}</code>
+                    </pre>
+                  )}
+                </div>
               </div>
-              <h4 className="font-medium text-foreground mb-1">{finding.title}</h4>
-              <p className="text-sm text-muted-foreground line-clamp-2">{finding.description}</p>
-              {finding.code_snippet && (
-                <pre className="mt-2 p-2 bg-muted rounded text-xs overflow-x-auto">
-                  <code>{finding.code_snippet}</code>
-                </pre>
-              )}
             </Card>
           );
         })}
@@ -130,8 +284,10 @@ export function FindingList({ findings, filters, onFilterChange }: FindingListPr
 
       {/* Count */}
       <div className="text-center text-sm text-muted-foreground">
-        {formatMessage({ id: 'issues.discovery.showingCount' }, { count: findings.length })}
+        {formatMessage({ id: 'issues.discovery.findings.showingCount' }, { count: findings.length })}
       </div>
     </div>
   );
 }
+
+export default FindingList;

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">

ccw/frontend/src/components/issue/queue/ExecutionGroup.tsx

@@ -9,20 +9,22 @@ import { ChevronDown, ChevronRight, GitMerge, ArrowRight } from 'lucide-react';
 import { Card, CardHeader } from '@/components/ui/Card';
 import { Badge } from '@/components/ui/Badge';
 import { cn } from '@/lib/utils';
+import type { QueueItem } from '@/lib/api';
 
 // ========== Types ==========
 
 export interface ExecutionGroupProps {
   group: string;
-  items: string[];
+  items: QueueItem[];
   type?: 'parallel' | 'sequential';
+  onItemClick?: (item: QueueItem) => void;
 }
 
 // ========== Component ==========
 
-export function ExecutionGroup({ group, items, type = 'sequential' }: ExecutionGroupProps) {
+export function ExecutionGroup({ group, items, type = 'sequential', onItemClick }: ExecutionGroupProps) {
   const { formatMessage } = useIntl();
-  const [isExpanded, setIsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
   const isParallel = type === 'parallel';
 
   return (
@@ -56,7 +58,7 @@ export function ExecutionGroup({ group, items, type = 'sequential' }: ExecutionG
             </span>
           </div>
           <Badge variant="outline" className="text-xs">
-            {items.length} {items.length === 1 ? 'item' : 'items'}
+            {formatMessage({ id: 'issues.queue.itemCount' }, { count: items.length })}
           </Badge>
         </div>
       </CardHeader>
@@ -67,22 +69,38 @@ export function ExecutionGroup({ group, items, type = 'sequential' }: ExecutionG
             "space-y-1 mt-2",
             isParallel ? "grid grid-cols-1 sm:grid-cols-2 gap-2" : "space-y-1"
           )}>
-            {items.map((item, index) => (
-              <div
-                key={item}
-                className={cn(
-                  "flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm",
-                  "hover:bg-muted transition-colors"
-                )}
-              >
-                <span className="text-muted-foreground text-xs w-6">
-                  {isParallel ? '' : `${index + 1}.`}
-                </span>
-                <span className="font-mono text-xs truncate flex-1">
-                  {item}
-                </span>
-              </div>
-            ))}
+            {items.map((item, index) => {
+              // Parse item_id to extract type and ID
+              const [itemType, ...idParts] = item.item_id.split('-');
+              const displayId = idParts.join('-');
+              const typeLabel = itemType === 'issue' ? formatMessage({ id: 'issues.solution.shortIssue' })
+                : itemType === 'solution' ? formatMessage({ id: 'issues.solution.shortSolution' })
+                : itemType;
+
+              return (
+                <div
+                  key={item.item_id}
+                  onClick={() => onItemClick?.(item)}
+                  className={cn(
+                    "flex items-center gap-2 p-2 rounded-md bg-muted/50 text-sm",
+                    "hover:bg-muted transition-colors cursor-pointer"
+                  )}
+                >
+                  <span className="text-muted-foreground text-xs w-6">
+                    {isParallel ? '' : `${index + 1}.`}
+                  </span>
+                  <span className="text-xs text-muted-foreground shrink-0">
+                    {typeLabel}
+                  </span>
+                  <span className="font-mono text-xs truncate flex-1">
+                    {displayId}
+                  </span>
+                  <Badge variant="outline" className="text-xs shrink-0">
+                    {formatMessage({ id: `issues.queue.status.${item.status}` })}
+                  </Badge>
+                </div>
+              );
+            })}
           </div>
         </div>
       )}

ccw/frontend/src/components/issue/queue/QueueActions.tsx

@@ -1,18 +1,11 @@
 // ========================================
 // QueueActions Component
 // ========================================
-// Queue operations menu component with delete confirmation and merge dialog
+// Queue operations with direct action buttons (no dropdown menu)
 
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
-import { Play, Pause, Trash2, Merge, Loader2 } from 'lucide-react';
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-} from '@/components/ui/Dropdown';
+import { Play, Pause, Trash2, Merge, GitBranch, Loader2 } from 'lucide-react';
 import {
   AlertDialog,
   AlertDialogContent,
@@ -32,7 +25,9 @@ import {
 } from '@/components/ui/Dialog';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
-import type { IssueQueue } from '@/lib/api';
+import { Checkbox } from '@/components/ui/Checkbox';
+import { cn } from '@/lib/utils';
+import type { IssueQueue, QueueItem } from '@/lib/api';
 
 // ========== Types ==========
 
@@ -43,10 +38,12 @@ export interface QueueActionsProps {
   onDeactivate?: () => void;
   onDelete?: (queueId: string) => void;
   onMerge?: (sourceId: string, targetId: string) => void;
+  onSplit?: (sourceQueueId: string, itemIds: string[]) => void;
   isActivating?: boolean;
   isDeactivating?: boolean;
   isDeleting?: boolean;
   isMerging?: boolean;
+  isSplitting?: boolean;
 }
 
 // ========== Component ==========
@@ -58,18 +55,25 @@ export function QueueActions({
   onDeactivate,
   onDelete,
   onMerge,
+  onSplit,
   isActivating = false,
   isDeactivating = false,
   isDeleting = false,
   isMerging = false,
+  isSplitting = false,
 }: QueueActionsProps) {
   const { formatMessage } = useIntl();
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isMergeOpen, setIsMergeOpen] = useState(false);
+  const [isSplitOpen, setIsSplitOpen] = useState(false);
   const [mergeTargetId, setMergeTargetId] = useState('');
+  const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);
 
   // Get queue ID - IssueQueue interface doesn't have an id field, using tasks array as key
-  const queueId = queue.tasks.join(',') || queue.solutions.join(',');
+  const queueId = (queue.tasks?.join(',') || queue.solutions?.join(',') || 'default');
+
+  // Get all items from grouped_items for split dialog
+  const allItems: QueueItem[] = Object.values(queue.grouped_items || {}).flat();
 
   const handleDelete = () => {
     onDelete?.(queueId);
@@ -84,68 +88,122 @@ export function QueueActions({
     }
   };
 
+  const handleSplit = () => {
+    if (selectedItemIds.length > 0 && selectedItemIds.length < allItems.length) {
+      onSplit?.(queueId, selectedItemIds);
+      setIsSplitOpen(false);
+      setSelectedItemIds([]);
+    }
+  };
+
+  const toggleItemSelection = (itemId: string) => {
+    setSelectedItemIds(prev =>
+      prev.includes(itemId)
+        ? prev.filter(id => id !== itemId)
+        : [...prev, itemId]
+    );
+  };
+
+  const selectAll = () => {
+    setSelectedItemIds(allItems.map(item => item.item_id));
+  };
+
+  const clearAll = () => {
+    setSelectedItemIds([]);
+  };
+
+  // Calculate item count
+  const totalItems = (queue.tasks?.length || 0) + (queue.solutions?.length || 0);
+  const canSplit = totalItems > 1;
+
   return (
     <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-            <span className="sr-only">{formatMessage({ id: 'common.actions.openMenu' })}</span>
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <circle cx="12" cy="12" r="1" />
-              <circle cx="12" cy="5" r="1" />
-              <circle cx="12" cy="19" r="1" />
-            </svg>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          {!isActive && onActivate && (
-            <DropdownMenuItem onClick={() => onActivate(queueId)} disabled={isActivating}>
-              {isActivating ? (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-              ) : (
-                <Play className="w-4 h-4 mr-2" />
-              )}
-              {formatMessage({ id: 'issues.queue.actions.activate' })}
-            </DropdownMenuItem>
-          )}
-          {isActive && onDeactivate && (
-            <DropdownMenuItem onClick={() => onDeactivate()} disabled={isDeactivating}>
-              {isDeactivating ? (
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-              ) : (
-                <Pause className="w-4 h-4 mr-2" />
-              )}
-              {formatMessage({ id: 'issues.queue.actions.deactivate' })}
-            </DropdownMenuItem>
-          )}
-          <DropdownMenuItem onClick={() => setIsMergeOpen(true)} disabled={isMerging}>
-            {isMerging ? (
-              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-            ) : (
-              <Merge className="w-4 h-4 mr-2" />
-            )}
-            {formatMessage({ id: 'issues.queue.actions.merge' })}
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem
-            onClick={() => setIsDeleteOpen(true)}
-            disabled={isDeleting}
-            className="text-destructive"
+      {/* Direct action buttons */}
+      <div className="flex items-center gap-1">
+        {/* Activate/Deactivate button */}
+        {!isActive && onActivate && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => onActivate(queueId)}
+            disabled={isActivating}
+            title={formatMessage({ id: 'issues.queue.actions.activate' })}
           >
-            {isDeleting ? (
-              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            {isActivating ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
             ) : (
-              <Trash2 className="w-4 h-4 mr-2" />
+              <Play className="w-4 h-4 text-success" />
             )}
-            {formatMessage({ id: 'issues.queue.actions.delete' })}
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+          </Button>
+        )}
+        {isActive && onDeactivate && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => onDeactivate()}
+            disabled={isDeactivating}
+            title={formatMessage({ id: 'issues.queue.actions.deactivate' })}
+          >
+            {isDeactivating ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Pause className="w-4 h-4 text-warning" />
+            )}
+          </Button>
+        )}
+
+        {/* Merge button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={() => setIsMergeOpen(true)}
+          disabled={isMerging}
+          title={formatMessage({ id: 'issues.queue.actions.merge' })}
+        >
+          {isMerging ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <Merge className="w-4 h-4 text-info" />
+          )}
+        </Button>
+
+        {/* Split button - only show if more than 1 item */}
+        {canSplit && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0"
+            onClick={() => setIsSplitOpen(true)}
+            disabled={isSplitting}
+            title={formatMessage({ id: 'issues.queue.actions.split' })}
+          >
+            {isSplitting ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <GitBranch className="w-4 h-4 text-muted-foreground" />
+            )}
+          </Button>
+        )}
+
+        {/* Delete button */}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={() => setIsDeleteOpen(true)}
+          disabled={isDeleting}
+          title={formatMessage({ id: 'issues.queue.actions.delete' })}
+        >
+          {isDeleting ? (
+            <Loader2 className="w-4 h-4 animate-spin text-destructive" />
+          ) : (
+            <Trash2 className="w-4 h-4 text-destructive" />
+          )}
+        </Button>
+      </div>
 
       {/* Delete Confirmation Dialog */}
       <AlertDialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
@@ -227,6 +285,100 @@ export function QueueActions({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Split Dialog */}
+      <Dialog open={isSplitOpen} onOpenChange={setIsSplitOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>
+              {formatMessage({ id: 'issues.queue.splitDialog.title' })}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-hidden flex flex-col py-4">
+            {/* Selection info */}
+            <div className="flex items-center justify-between mb-4 pb-4 border-b">
+              <span className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'issues.queue.splitDialog.selected' }, { count: selectedItemIds.length, total: allItems.length })}
+              </span>
+              <div className="flex gap-2">
+                <Button variant="outline" size="sm" onClick={selectAll}>
+                  {formatMessage({ id: 'issues.queue.splitDialog.selectAll' })}
+                </Button>
+                <Button variant="outline" size="sm" onClick={clearAll}>
+                  {formatMessage({ id: 'issues.queue.splitDialog.clearAll' })}
+                </Button>
+              </div>
+            </div>
+
+            {/* Items list with checkboxes */}
+            <div className="flex-1 overflow-y-auto space-y-2 pr-2">
+              {allItems.map((item) => {
+                const isSelected = selectedItemIds.includes(item.item_id);
+                return (
+                  <div
+                    key={item.item_id}
+                    className={cn(
+                      "flex items-center gap-3 p-3 rounded-md border transition-colors cursor-pointer",
+                      isSelected ? "bg-primary/10 border-primary" : "bg-card hover:bg-muted/50"
+                    )}
+                    onClick={() => toggleItemSelection(item.item_id)}
+                  >
+                    <Checkbox
+                      checked={isSelected}
+                      onChange={() => toggleItemSelection(item.item_id)}
+                    />
+                    <span className="font-mono text-xs flex-1 truncate">
+                      {item.item_id}
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                      {formatMessage({ id: `issues.queue.status.${item.status}` })}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Validation message */}
+            {selectedItemIds.length === 0 && (
+              <p className="text-sm text-muted-foreground text-center py-2">
+                {formatMessage({ id: 'issues.queue.splitDialog.noSelection' })}
+              </p>
+            )}
+            {selectedItemIds.length >= allItems.length && (
+              <p className="text-sm text-destructive text-center py-2">
+                {formatMessage({ id: 'issues.queue.splitDialog.cannotSplitAll' })}
+              </p>
+            )}
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsSplitOpen(false);
+                setSelectedItemIds([]);
+              }}
+            >
+              {formatMessage({ id: 'common.actions.cancel' })}
+            </Button>
+            <Button
+              onClick={handleSplit}
+              disabled={selectedItemIds.length === 0 || selectedItemIds.length >= allItems.length || isSplitting}
+            >
+              {isSplitting ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  {formatMessage({ id: 'common.actions.splitting' })}
+                </>
+              ) : (
+                <>
+                  <GitBranch className="w-4 h-4 mr-2" />
+                  {formatMessage({ id: 'issues.queue.actions.split' })}
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </>
   );
 }

ccw/frontend/src/components/issue/queue/QueueCard.tsx

@@ -21,10 +21,13 @@ export interface QueueCardProps {
   onDeactivate?: () => void;
   onDelete?: (queueId: string) => void;
   onMerge?: (sourceId: string, targetId: string) => void;
+  onSplit?: (sourceQueueId: string, itemIds: string[]) => void;
+  onItemClick?: (item: import('@/lib/api').QueueItem) => void;
   isActivating?: boolean;
   isDeactivating?: boolean;
   isDeleting?: boolean;
   isMerging?: boolean;
+  isSplitting?: boolean;
   className?: string;
 }
 
@@ -37,10 +40,13 @@ export function QueueCard({
   onDeactivate,
   onDelete,
   onMerge,
+  onSplit,
+  onItemClick,
   isActivating = false,
   isDeactivating = false,
   isDeleting = false,
   isMerging = false,
+  isSplitting = false,
   className,
 }: QueueCardProps) {
   const { formatMessage } = useIntl();
@@ -101,10 +107,12 @@ export function QueueCard({
           onDeactivate={onDeactivate}
           onDelete={onDelete}
           onMerge={onMerge}
+          onSplit={onSplit}
           isActivating={isActivating}
           isDeactivating={isDeactivating}
           isDeleting={isDeleting}
           isMerging={isMerging}
+          isSplitting={isSplitting}
         />
       </div>
 
@@ -143,6 +151,7 @@ export function QueueCard({
                 group={group.id}
                 items={group.items}
                 type={group.type}
+                onItemClick={onItemClick}
               />
             ))}
           </div>

ccw/frontend/src/components/issue/queue/SolutionDrawer.tsx

@@ -0,0 +1,212 @@
+// ========================================
+// SolutionDrawer Component
+// ========================================
+// Right-side solution detail drawer
+
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { X, FileText, CheckCircle, Circle, Loader2, XCircle, Clock, AlertTriangle } 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 { QueueItem } from '@/lib/api';
+
+// ========== Types ==========
+export interface SolutionDrawerProps {
+  item: QueueItem | null;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type TabValue = 'overview' | 'tasks' | 'json';
+
+// ========== Status Configuration ==========
+const statusConfig: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'; icon: React.ComponentType<{ className?: string }> }> = {
+  pending: { label: 'issues.queue.status.pending', variant: 'secondary', icon: Circle },
+  ready: { label: 'issues.queue.status.ready', variant: 'info', icon: Clock },
+  executing: { label: 'issues.queue.status.executing', variant: 'warning', icon: Loader2 },
+  completed: { label: 'issues.queue.status.completed', variant: 'success', icon: CheckCircle },
+  failed: { label: 'issues.queue.status.failed', variant: 'destructive', icon: XCircle },
+  blocked: { label: 'issues.queue.status.blocked', variant: 'destructive', icon: AlertTriangle },
+};
+
+// ========== Component ==========
+
+export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
+  const { formatMessage } = useIntl();
+  const [activeTab, setActiveTab] = useState<TabValue>('overview');
+
+  // ESC key to close
+  useState(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  });
+
+  if (!item || !isOpen) {
+    return null;
+  }
+
+  const status = statusConfig[item.status] || statusConfig.pending;
+  const StatusIcon = status.icon;
+
+  // Get solution details (would need to fetch full solution data)
+  const solutionId = item.solution_id;
+  const issueId = item.issue_id;
+
+  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">
+              <span className="text-xs font-mono text-muted-foreground">{item.item_id}</span>
+              <Badge variant={status.variant} className="gap-1">
+                <StatusIcon className="h-3 w-3" />
+                {formatMessage({ id: status.label })}
+              </Badge>
+            </div>
+            <div className="space-y-1">
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'solution.issue' })}: <span className="font-mono">{issueId}</span>
+              </p>
+              <p className="text-sm text-muted-foreground">
+                {formatMessage({ id: 'solution.solution' })}: <span className="font-mono">{solutionId}</span>
+              </p>
+            </div>
+          </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: 'solution.tabs.overview' })}
+              </TabsTrigger>
+              <TabsTrigger value="tasks" className="flex-1">
+                <CheckCircle className="h-4 w-4 mr-2" />
+                {formatMessage({ id: 'solution.tabs.tasks' })}
+              </TabsTrigger>
+              <TabsTrigger value="json" className="flex-1">
+                <FileText className="h-4 w-4 mr-2" />
+                {formatMessage({ id: 'solution.tabs.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">
+                  {/* Execution Info */}
+                  <div>
+                    <h3 className="text-sm font-semibold text-foreground mb-3">
+                      {formatMessage({ id: 'solution.overview.executionInfo' })}
+                    </h3>
+                    <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: 'solution.overview.executionOrder' })}</p>
+                        <p className="text-lg font-semibold">{item.execution_order}</p>
+                      </div>
+                      <div className="p-3 bg-muted/50 rounded-md">
+                        <p className="text-xs text-muted-foreground">{formatMessage({ id: 'solution.overview.semanticPriority' })}</p>
+                        <p className="text-lg font-semibold">{item.semantic_priority}</p>
+                      </div>
+                      <div className="p-3 bg-muted/50 rounded-md">
+                        <p className="text-xs text-muted-foreground">{formatMessage({ id: 'solution.overview.group' })}</p>
+                        <p className="text-sm font-mono truncate">{item.execution_group}</p>
+                      </div>
+                      <div className="p-3 bg-muted/50 rounded-md">
+                        <p className="text-xs text-muted-foreground">{formatMessage({ id: 'solution.overview.taskCount' })}</p>
+                        <p className="text-lg font-semibold">{item.task_count || '-'}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Dependencies */}
+                  {item.depends_on && item.depends_on.length > 0 && (
+                    <div>
+                      <h3 className="text-sm font-semibold text-foreground mb-2">
+                        {formatMessage({ id: 'solution.overview.dependencies' })}
+                      </h3>
+                      <div className="flex flex-wrap gap-2">
+                        {item.depends_on.map((dep, index) => (
+                          <Badge key={index} variant="outline" className="font-mono text-xs">
+                            {dep}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Files Touched */}
+                  {item.files_touched && item.files_touched.length > 0 && (
+                    <div>
+                      <h3 className="text-sm font-semibold text-foreground mb-2">
+                        {formatMessage({ id: 'solution.overview.filesTouched' })}
+                      </h3>
+                      <div className="space-y-1">
+                        {item.files_touched.map((file, index) => (
+                          <div key={index} className="p-2 bg-muted/50 rounded-md">
+                            <span className="text-sm font-mono">{file}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </TabsContent>
+
+              {/* Tasks Tab */}
+              <TabsContent value="tasks" className="mt-4 pb-6 focus-visible:outline-none">
+                <div className="text-center py-12 text-muted-foreground">
+                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p className="text-sm">{formatMessage({ id: 'solution.tasks.comingSoon' })}</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(item, null, 2)}
+                </pre>
+              </TabsContent>
+            </div>
+          </Tabs>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SolutionDrawer;