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/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;