feat: enhance issue management with edit functionality and UI improvements

- Added Edit Issue dialog to allow users to modify existing issues with fields for title, context, priority, and status.
- Integrated form validation and state management for the edit dialog.
- Updated the IssueManagerPage to handle opening and closing of the edit dialog, as well as submitting updates.
- Improved UI components in SolutionDrawer and ExplorationSection for better user experience.
- Refactored file path input with a browse dialog for selecting files and directories in SettingsPage.
- Adjusted layout and styling in LeftSidebar and OrchestratorPage for better responsiveness and usability.
- Updated localization files to include new strings for the edit dialog and task management.

.codex/skills/workflow-lite-plan-execute/SKILL.md

@@ -1,149 +1,55 @@
 ---
 name: workflow-lite-plan-execute
-description: Lightweight planning and execution skill. Exploration → Clarification → Planning → Confirmation → Execution via lite-execute.
+description: Lightweight planning + execution workflow. Exploration -> Clarification -> Planning -> Confirmation -> Execution (via lite-execute).
 allowed-tools: spawn_agent, wait, send_input, close_agent, AskUserQuestion, Read, Write, Edit, Bash, Glob, Grep, mcp__ace-tool__search_context
 ---
 
 # Planning Workflow
 
-Lightweight planning skill: Lite Plan produces an implementation plan, then hands off to Lite Execute for task execution.
+Lite Plan produces an implementation plan and an `executionContext`, then hands off to Lite Execute for task execution.
-
-## Architecture Overview
-
-```
-┌──────────────────────────────────────────────────┐
-│  Planning Workflow Orchestrator (SKILL.md)         │
-│  → Parse args → Lite Plan → Lite Execute          │
-└────────────┬─────────────────────────────────────┘
-             │
-    ┌────────┴────────┐
-    ↓                 ↓
-┌────────┐     ┌────────────┐
-│Phase 1 │────→│  Phase 4   │
-│  Lite  │     │   Lite     │
-│  Plan  │     │  Execute   │
-└────────┘     └────────────┘
-```
 
 ## Key Design Principles
 
-1. **Shared Execution**: Lite Plan produces `executionContext` consumed by Phase 4 (lite-execute)
+1. **Shared Execution**: Lite Plan produces `executionContext` consumed by Phase 4 (Lite Execute)
 2. **Progressive Phase Loading**: Only load phase docs when about to execute
-3. **Auto-Continue**: Planning completes → automatically loads execution phase
+3. **Auto-Continue**: After the plan is confirmed ("Allow"), automatically load execution phase
-4. **Default Auto Mode**: When `--yes`, skip confirmations and auto-approve plan
+4. **Default Auto Mode**: When `--yes`, skip confirmations and auto-approve the plan
 
 ## Auto Mode
 
-When `--yes` or `-y`: Auto-approve plan, skip clarifications, use default execution settings.
+When `--yes` or `-y`:
+- Auto-approve plan and use default execution settings
+- Skip non-critical clarifications; still ask minimal clarifications if required for safety/correctness
 
-## Usage
+## Usage (Pseudo)
 
-```bash
+This section describes the skill input shape; actual invocation depends on the host runtime.
+
+```
 $workflow-lite-plan-execute <task description>
-$workflow-lite-plan-execute [FLAGS] "<task description>"
+$workflow-lite-plan-execute [FLAGS] "<task description or file path>"
 
 # Flags
--y, --yes                              Skip all confirmations (auto mode)
+-y, --yes                              Skip confirmations (auto mode)
 -e, --explore                          Force exploration phase
+```
 
-# Examples
+Examples:
+```
 $workflow-lite-plan-execute "Implement JWT authentication"
 $workflow-lite-plan-execute -y "Add user profile page"
 $workflow-lite-plan-execute -e "Refactor payment module"
+$workflow-lite-plan-execute "docs/todo.md"
 ```
 
 > **Implementation sketch**: 编排器内部使用 `Skill(skill="workflow-lite-plan-execute", args="...")` 接口调用，此为伪代码示意，非命令行语法。
 
-## Subagent API Reference
+## Phase Reference Documents (Read On Demand)
-
-### spawn_agent
-
-Create a new subagent with task assignment.
-
-```javascript
-const agentId = spawn_agent({
-  message: `
-## TASK ASSIGNMENT
-
-### MANDATORY FIRST STEPS (Agent Execute)
-1. **Read role definition**: ~/.codex/agents/{agent-type}.md (MUST read first)
-2. Read: .workflow/project-tech.json
-3. Read: .workflow/project-guidelines.json
-
-## TASK CONTEXT
-${taskContext}
-
-## DELIVERABLES
-${deliverables}
-`
-})
-```
-
-### wait
-
-Get results from subagent (only way to retrieve results).
-
-```javascript
-const result = wait({
-  ids: [agentId],
-  timeout_ms: 600000  // 10 minutes
-})
-
-if (result.timed_out) {
-  // Handle timeout - can continue waiting or send_input to prompt completion
-}
-```
-
-### send_input
-
-Continue interaction with active subagent (for clarification or follow-up).
-
-```javascript
-send_input({
-  id: agentId,
-  message: `
-## CLARIFICATION ANSWERS
-${answers}
-
-## NEXT STEP
-Continue with plan generation.
-`
-})
-```
-
-### close_agent
-
-Clean up subagent resources (irreversible).
-
-```javascript
-close_agent({ id: agentId })
-```
-
-## Execution Flow
-
-```
-Input Parsing:
-   ├─ Extract flags: --yes, --explore
-   └─ Extract task description (string or file path)
-
-Planning Phase:
-   └─ Phase 1: Lite Plan
-       └─ Ref: phases/01-lite-plan.md
-          └─ Output: executionContext (plan.json + explorations + selections)
-
-Execution Phase:
-   └─ Phase 4: Lite Execute
-       └─ Ref: phases/04-lite-execute.md
-          └─ Input: executionContext from planning phase
-          └─ Output: Executed tasks + optional code review
-```
-
-**Phase Reference Documents** (read on-demand when phase executes):
 
 | Phase | Document | Purpose |
 |-------|----------|---------|
-| 1 | [phases/01-lite-plan.md](phases/01-lite-plan.md) | Lightweight planning with exploration, clarification, and plan generation |
+| 1 | `phases/01-lite-plan.md` | Lightweight planning with exploration, clarification, plan generation, and confirmation |
-| 4 | [phases/04-lite-execute.md](phases/04-lite-execute.md) | Shared execution engine: task grouping, batch execution, code review |
+| 4 | `phases/04-lite-execute.md` | Shared execution engine: task grouping, batch execution, optional code review |
 
 ## Orchestrator Logic
 
@@ -151,44 +57,56 @@ Execution Phase:
 // Flag parsing
 const autoYes = $ARGUMENTS.includes('--yes') || $ARGUMENTS.includes('-y')
 const forceExplore = $ARGUMENTS.includes('--explore') || $ARGUMENTS.includes('-e')
+
+// Task extraction rule:
+// - Strip known flags: -y/--yes, -e/--explore
+// - Remaining args are joined as the task description
+// - Treat it as a file path ONLY if (a) exactly one arg remains AND (b) the path exists
+function extractTaskDescription(args) {
+  const knownFlags = new Set(['--yes', '-y', '--explore', '-e'])
+  const rest = args.filter(a => !knownFlags.has(a))
+  if (rest.length === 1 && file_exists(rest[0])) return rest[0]
+  return rest.join(' ').trim()
+}
+
 const taskDescription = extractTaskDescription($ARGUMENTS)
 
 // Phase 1: Lite Plan
 Read('phases/01-lite-plan.md')
 // Execute planning phase...
 
-// After planning completes:
+// Gate: only continue when confirmed (or --yes)
+if (executionContext?.userSelection?.confirmation !== 'Allow' && !autoYes) {
+  // Stop: user cancelled or requested modifications
+  return
+}
+
+// Phase 4: Lite Execute
 Read('phases/04-lite-execute.md')
 // Execute execution phase with executionContext from Phase 1
 ```
 
-## Data Flow
+## executionContext Contract (High Level)
 
+`executionContext` is the only contract between Phase 1 and Phase 4.
+
+Required (minimum) fields:
+```javascript
+{
+  planObject: { summary, approach, tasks, complexity, estimated_time, recommended_execution },
+  originalUserInput: string,
+  executionMethod: "Agent" | "Codex" | "Auto",
+  codeReviewTool: "Skip" | "Gemini Review" | "Codex Review" | "Agent Review" | string,
+  userSelection: { confirmation: "Allow" | "Modify" | "Cancel" }
+}
 ```
-Phase 1: Lite Plan
+
-   │
+Recommended fields:
-   ├─ Produces: executionContext = {
+- `explorationsContext`, `clarificationContext`, `executorAssignments`, and `session` (artifacts folder + paths)
-   │     planObject: plan.json,
-   │     explorationsContext,
-   │     clarificationContext,
-   │     executionMethod: "Agent" | "Codex" | "Auto",
-   │     codeReviewTool: "Skip" | "Gemini Review" | ...,
-   │     originalUserInput: string,
-   │     session: { id, folder, artifacts }
-   │   }
-   │
-   ↓
-Phase 4: Lite Execute
-   │
-   ├─ Consumes: executionContext
-   ├─ Task grouping → Batch creation → Parallel/sequential execution
-   ├─ Optional code review
-   └─ Development index update
-```
 
 ## TodoWrite Pattern
 
-**Initialization**:
+Initialization:
 ```json
 [
   {"content": "Lite Plan - Planning", "status": "in_progress", "activeForm": "Planning"},
@@ -196,7 +114,7 @@ Phase 4: Lite Execute
 ]
 ```
 
-**After planning completes**:
+After planning completes:
 ```json
 [
   {"content": "Lite Plan - Planning", "status": "completed", "activeForm": "Planning"},
@@ -204,15 +122,14 @@ Phase 4: Lite Execute
 ]
 ```
 
-Phase-internal sub-tasks are managed by each phase document (attach/collapse pattern).
-
 ## Core Rules
 
-1. **Planning phase NEVER executes code** - all execution delegated to Phase 4
+1. **Planning phase NEVER modifies project code** - it may write planning artifacts, but all implementation is delegated to Phase 4
-2. **Phase 4 ALWAYS runs** after planning completes
+2. **Phase 4 runs only after confirmation** - execute only when confirmation is "Allow" (or `--yes` auto mode)
 3. **executionContext is the contract** between planning and execution phases
-4. **Progressive loading**: Read phase doc ONLY when about to execute
+4. **Progressive loading**: Read phase doc only when about to execute
-5. **Explicit Lifecycle**: Always close_agent after wait completes to free resources
+5. **File-path detection**: Treat input as a file path only if the path exists; do not infer from file extensions
+6. **Explicit lifecycle**: Always `close_agent` after `wait` completes
 
 ## Error Handling
 
@@ -224,5 +141,5 @@ Phase-internal sub-tasks are managed by each phase document (attach/collapse pat
 
 ## Related Skills
 
-- Full planning workflow: [workflow-plan-execute/SKILL.md](../workflow-plan-execute/SKILL.md)
+- Full planning workflow: `../workflow-plan-execute/SKILL.md`
-- Brainstorming: [workflow-brainstorm-auto-parallel/SKILL.md](../workflow-brainstorm-auto-parallel/SKILL.md)
+- Brainstorming: `../workflow-brainstorm-auto-parallel/SKILL.md`

.codex/skills/workflow-lite-plan-execute/phases/01-lite-plan.md

@@ -971,13 +971,12 @@ if (autoYes) {
 
   userSelection = {
     confirmation: "Allow",
-    execution_method: "Auto",
+    executionMethod: "Auto",
-    code_review_tool: "Skip"
+    codeReviewTool: "Skip"
   }
 } else {
   // Interactive mode: Ask user
-  // Note: Execution "Other" option allows specifying CLI tools from ~/.claude/cli-tools.json
+  const rawSelection = ASK_USER([
-  userSelection = ASK_USER([
     {
       id: "confirm",
       type: "select",
@@ -1013,6 +1012,12 @@ if (autoYes) {
       default: "Skip"
     }
   ])  // BLOCKS (wait for user response)
+
+  userSelection = {
+    confirmation: rawSelection.confirm,
+    executionMethod: rawSelection.execution,
+    codeReviewTool: rawSelection.review
+  }
 }
 ```
 
@@ -1043,11 +1048,12 @@ executionContext = {
   explorationAngles: manifest.explorations.map(e => e.angle),
   explorationManifest: manifest,
   clarificationContext: clarificationContext || null,
-  executionMethod: userSelection.execution_method,  // 全局默认，可被 executorAssignments 覆盖
+  userSelection: userSelection,
-  codeReviewTool: userSelection.code_review_tool,
+  executionMethod: userSelection.executionMethod,  // Global default; may be overridden by executorAssignments
+  codeReviewTool: userSelection.codeReviewTool,
   originalUserInput: task_description,
 
-  // 任务级 executor 分配（优先于全局 executionMethod）
+  // Task-level executor assignments (priority over global executionMethod)
   executorAssignments: executorAssignments,  // { taskId: { executor, reason } }
 
   session: {

.codex/skills/workflow-lite-plan-execute/phases/04-lite-execute.md

@@ -146,10 +146,10 @@ If `isPlanJson === false`:
 Input Parsing:
    └─ Decision (mode detection):
       ├─ --in-memory flag → Mode 1: Load executionContext → Skip user selection
-      ├─ Ends with .md/.json/.txt → Mode 3: Read file → Detect format
+      ├─ Existing file path (path exists) → Mode 3: Read file → Detect format
       │   ├─ Valid plan.json → Use planObject → User selects method + review
       │   └─ Not plan.json → Treat as prompt → User selects method + review
-      └─ Other → Mode 2: Prompt description → User selects method + review
+      └─ Otherwise → Mode 2: Prompt description → User selects method + review
 
 Execution:
    ├─ Step 1: Initialize result tracking (previousExecutionResults = [])

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

@@ -3,12 +3,13 @@
 // ========================================
 // Right-side solution detail drawer
 
-import { useState } from 'react';
+import { useEffect, useMemo, 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 { useIssueQueue } from '@/hooks';
 import { cn } from '@/lib/utils';
 import type { QueueItem } from '@/lib/api';
 
@@ -36,17 +37,34 @@ const statusConfig: Record<string, { label: string; variant: 'default' | 'second
 export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
   const { formatMessage } = useIntl();
   const [activeTab, setActiveTab] = useState<TabValue>('overview');
+  const { data: queue } = useIssueQueue();
+  const itemId = item?.item_id;
+  const solutionId = item?.solution_id;
 
   // ESC key to close
-  useState(() => {
+  useEffect(() => {
+    if (!isOpen) return;
     const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpen) {
+      if (e.key === 'Escape') onClose();
-        onClose();
-      }
     };
     window.addEventListener('keydown', handleEsc);
     return () => window.removeEventListener('keydown', handleEsc);
-  });
+  }, [isOpen, onClose]);
+
+  // Reset tab when switching items
+  useEffect(() => {
+    if (!isOpen || !itemId) return;
+    setActiveTab('overview');
+  }, [itemId, isOpen]);
+
+  const tasksForSolution = useMemo(() => {
+    if (!solutionId) return [];
+    const allItems = Object.values(queue?.grouped_items || {}).flat();
+    const isTaskItem = (qi: QueueItem) => Boolean(qi.task_id) || qi.item_id.startsWith('task-');
+    return allItems
+      .filter((qi) => qi.solution_id === solutionId && isTaskItem(qi))
+      .sort((a, b) => a.execution_order - b.execution_order);
+  }, [queue?.grouped_items, solutionId]);
 
   if (!item || !isOpen) {
     return null;
@@ -56,7 +74,6 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
   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 (
@@ -93,10 +110,10 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
             </div>
             <div className="space-y-1">
               <p className="text-sm text-muted-foreground">
-                {formatMessage({ id: 'solution.issue' })}: <span className="font-mono">{issueId}</span>
+                {formatMessage({ id: 'issues.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>
+                {formatMessage({ id: 'issues.solution.solution' })}: <span className="font-mono">{solutionId}</span>
               </p>
             </div>
           </div>
@@ -111,15 +128,15 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
             <TabsList className="w-full">
               <TabsTrigger value="overview" className="flex-1">
                 <FileText className="h-4 w-4 mr-2" />
-                {formatMessage({ id: 'solution.tabs.overview' })}
+                {formatMessage({ id: 'issues.solution.tabs.overview' })}
               </TabsTrigger>
               <TabsTrigger value="tasks" className="flex-1">
                 <CheckCircle className="h-4 w-4 mr-2" />
-                {formatMessage({ id: 'solution.tabs.tasks' })}
+                {formatMessage({ id: 'issues.solution.tabs.tasks' })}
               </TabsTrigger>
               <TabsTrigger value="json" className="flex-1">
                 <FileText className="h-4 w-4 mr-2" />
-                {formatMessage({ id: 'solution.tabs.json' })}
+                {formatMessage({ id: 'issues.solution.tabs.json' })}
               </TabsTrigger>
             </TabsList>
 
@@ -131,23 +148,23 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
                   {/* Execution Info */}
                   <div>
                     <h3 className="text-sm font-semibold text-foreground mb-3">
-                      {formatMessage({ id: 'solution.overview.executionInfo' })}
+                      {formatMessage({ id: 'issues.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-xs text-muted-foreground">{formatMessage({ id: 'issues.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-xs text-muted-foreground">{formatMessage({ id: 'issues.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-xs text-muted-foreground">{formatMessage({ id: 'issues.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-xs text-muted-foreground">{formatMessage({ id: 'issues.solution.overview.taskCount' })}</p>
                         <p className="text-lg font-semibold">{item.task_count || '-'}</p>
                       </div>
                     </div>
@@ -157,7 +174,7 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
                   {item.depends_on && item.depends_on.length > 0 && (
                     <div>
                       <h3 className="text-sm font-semibold text-foreground mb-2">
-                        {formatMessage({ id: 'solution.overview.dependencies' })}
+                        {formatMessage({ id: 'issues.solution.overview.dependencies' })}
                       </h3>
                       <div className="flex flex-wrap gap-2">
                         {item.depends_on.map((dep, index) => (
@@ -173,7 +190,7 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
                   {item.files_touched && item.files_touched.length > 0 && (
                     <div>
                       <h3 className="text-sm font-semibold text-foreground mb-2">
-                        {formatMessage({ id: 'solution.overview.filesTouched' })}
+                        {formatMessage({ id: 'issues.solution.overview.filesTouched' })}
                       </h3>
                       <div className="space-y-1">
                         {item.files_touched.map((file, index) => (
@@ -189,10 +206,42 @@ export function SolutionDrawer({ item, isOpen, onClose }: SolutionDrawerProps) {
 
               {/* Tasks Tab */}
               <TabsContent value="tasks" className="mt-4 pb-6 focus-visible:outline-none">
-                <div className="text-center py-12 text-muted-foreground">
+                {tasksForSolution.length === 0 ? (
-                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <div className="text-center py-12 text-muted-foreground">
-                  <p className="text-sm">{formatMessage({ id: 'solution.tasks.comingSoon' })}</p>
+                    <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                </div>
+                    <p className="text-sm">{formatMessage({ id: 'issues.solution.tasks.empty' })}</p>
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {tasksForSolution.map((task) => {
+                      const taskStatus = statusConfig[task.status] || statusConfig.pending;
+                      const TaskStatusIcon = taskStatus.icon;
+                      const taskId = task.task_id || task.item_id;
+
+                      return (
+                        <div
+                          key={task.item_id}
+                          className="flex items-center justify-between gap-3 p-3 bg-muted/50 rounded-md"
+                        >
+                          <div className="min-w-0">
+                            <p className="text-sm font-mono truncate">{taskId}</p>
+                            <p className="text-xs text-muted-foreground mt-0.5">
+                              {formatMessage({ id: 'issues.solution.overview.executionOrder' })}: {task.execution_order}
+                              {' · '}
+                              {formatMessage({ id: 'issues.solution.overview.group' })}: {task.execution_group}
+                            </p>
+                          </div>
+                          <Badge variant={taskStatus.variant} className="gap-1 shrink-0">
+                            <TaskStatusIcon
+                              className={cn('h-3 w-3', task.status === 'executing' && 'animate-spin')}
+                            />
+                            {formatMessage({ id: taskStatus.label })}
+                          </Badge>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
               </TabsContent>
 
               {/* JSON Tab */}

ccw/frontend/src/components/session-detail/context/ExplorationCollapsible.tsx

@@ -37,7 +37,7 @@ export function ExplorationCollapsible({
       <CollapsibleTrigger className="flex items-center justify-between w-full p-3 hover:bg-muted/50 transition-colors">
         <div className="flex items-center gap-2">
           {icon}
-          <span className="font-medium text-foreground">{title}</span>
+          <span className="text-sm font-medium text-foreground">{title}</span>
         </div>
         <ChevronDown
           className={cn(

ccw/frontend/src/components/session-detail/context/ExplorationsSection.tsx

@@ -13,9 +13,9 @@ import {
   FileText,
   Layers
 } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card';
+import { Card, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
 import { ExplorationCollapsible } from './ExplorationCollapsible';
-import { FieldRenderer } from './FieldRenderer';
 
 export interface ExplorationsData {
   manifest: {
@@ -51,16 +51,14 @@ export function ExplorationsSection({ data }: ExplorationsSectionProps) {
 
   return (
     <Card>
-      <CardHeader>
+      <CardContent className="p-6">
-        <CardTitle className="flex items-center gap-2">
+        <h3 className="text-sm font-medium text-foreground mb-4 flex items-center gap-2">
-          <Search className="w-5 h-5" />
+          <Search className="w-4 h-4" />
           {formatMessage({ id: 'sessionDetail.context.explorations.title' })}
-          <span className="text-sm font-normal text-muted-foreground">
+          <Badge variant="secondary">
-            ({data.manifest.exploration_count} {formatMessage({ id: 'sessionDetail.context.explorations.angles' })})
+            {data.manifest.exploration_count} {formatMessage({ id: 'sessionDetail.context.explorations.angles' })}
-          </span>
+          </Badge>
-        </CardTitle>
+        </h3>
-      </CardHeader>
-      <CardContent>
         <div className="space-y-3">
           {explorationEntries.map(([angle, angleData]) => (
             <ExplorationCollapsible
@@ -79,15 +77,28 @@ export function ExplorationsSection({ data }: ExplorationsSectionProps) {
 
 interface AngleContentProps {
   data: {
-    project_structure?: string[];
+    project_structure?: unknown;
-    relevant_files?: string[];
+    relevant_files?: unknown;
-    patterns?: string[];
+    patterns?: unknown;
-    dependencies?: string[];
+    dependencies?: unknown;
-    integration_points?: string[];
+    integration_points?: unknown;
-    testing?: string[];
+    testing?: unknown;
+    [key: string]: unknown;
   };
 }
 
+/** Check if a string looks like a file/directory path */
+function isPathLike(s: string): boolean {
+  return /^[\w@.~\-/\\]+(\/[\w@.\-]+)+(\.\w+)?$/.test(s.trim());
+}
+
+/** Safely coerce a field to string[] – handles string, array-of-non-strings, etc. */
+function toStringArray(val: unknown): string[] {
+  if (Array.isArray(val)) return val.map(String);
+  if (typeof val === 'string' && val.length > 0) return [val];
+  return [];
+}
+
 function AngleContent({ data }: AngleContentProps) {
   const { formatMessage } = useIntl();
 
@@ -95,60 +106,73 @@ function AngleContent({ data }: AngleContentProps) {
     key: string;
     icon: JSX.Element;
     label: string;
-    data: unknown;
+    items: string[];
+    renderAs: 'paths' | 'text';
   }> = [];
 
-  if (data.project_structure && data.project_structure.length > 0) {
+  const projectStructure = toStringArray(data.project_structure);
+  if (projectStructure.length > 0) {
     sections.push({
       key: 'project_structure',
       icon: <FolderOpen className="w-4 h-4" />,
       label: formatMessage({ id: 'sessionDetail.context.explorations.projectStructure' }),
-      data: data.project_structure,
+      items: projectStructure,
+      renderAs: 'paths',
     });
   }
 
-  if (data.relevant_files && data.relevant_files.length > 0) {
+  const relevantFiles = toStringArray(data.relevant_files);
+  if (relevantFiles.length > 0) {
     sections.push({
       key: 'relevant_files',
       icon: <FileText className="w-4 h-4" />,
       label: formatMessage({ id: 'sessionDetail.context.explorations.relevantFiles' }),
-      data: data.relevant_files,
+      items: relevantFiles,
+      renderAs: 'paths',
     });
   }
 
-  if (data.patterns && data.patterns.length > 0) {
+  const patterns = toStringArray(data.patterns);
+  if (patterns.length > 0) {
     sections.push({
       key: 'patterns',
       icon: <Layers className="w-4 h-4" />,
       label: formatMessage({ id: 'sessionDetail.context.explorations.patterns' }),
-      data: data.patterns,
+      items: patterns,
+      renderAs: 'text',
     });
   }
 
-  if (data.dependencies && data.dependencies.length > 0) {
+  const dependencies = toStringArray(data.dependencies);
+  if (dependencies.length > 0) {
     sections.push({
       key: 'dependencies',
       icon: <GitBranch className="w-4 h-4" />,
       label: formatMessage({ id: 'sessionDetail.context.explorations.dependencies' }),
-      data: data.dependencies,
+      items: dependencies,
+      renderAs: 'text',
     });
   }
 
-  if (data.integration_points && data.integration_points.length > 0) {
+  const integrationPoints = toStringArray(data.integration_points);
+  if (integrationPoints.length > 0) {
     sections.push({
       key: 'integration_points',
       icon: <Link className="w-4 h-4" />,
       label: formatMessage({ id: 'sessionDetail.context.explorations.integrationPoints' }),
-      data: data.integration_points,
+      items: integrationPoints,
+      renderAs: 'text',
     });
   }
 
-  if (data.testing && data.testing.length > 0) {
+  const testing = toStringArray(data.testing);
+  if (testing.length > 0) {
     sections.push({
       key: 'testing',
       icon: <TestTube className="w-4 h-4" />,
       label: formatMessage({ id: 'sessionDetail.context.explorations.testing' }),
-      data: data.testing,
+      items: testing,
+      renderAs: 'text',
     });
   }
 
@@ -157,22 +181,78 @@ function AngleContent({ data }: AngleContentProps) {
   }
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-4">
       {sections.map((section) => (
-        <div key={section.key} className="flex items-start gap-2">
+        <div key={section.key}>
-          <span className="text-muted-foreground mt-0.5">{section.icon}</span>
+          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
-          <div className="flex-1">
+            <span className="text-muted-foreground">{section.icon}</span>
-            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
+            {section.label}
-              {section.label}
+          </h4>
-            </p>
+          {section.renderAs === 'paths' ? (
-            <FieldRenderer value={section.data} type="array" />
+            <div className="flex flex-wrap gap-1.5">
-          </div>
+              {section.items.map((item, i) => (
+                <div
+                  key={i}
+                  className="flex items-center gap-1 px-2 py-1 bg-muted rounded border text-[11px] font-mono text-foreground"
+                >
+                  <FileText className="w-3 h-3 text-muted-foreground flex-shrink-0" />
+                  {item}
+                </div>
+              ))}
+            </div>
+          ) : (
+            <ul className="space-y-1">
+              {section.items.map((item, i) => (
+                <li key={i} className="flex items-start gap-1.5 text-xs text-foreground">
+                  <span className="text-muted-foreground mt-0.5">•</span>
+                  <span className="flex-1">
+                    <FormattedTextItem text={item} />
+                  </span>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
       ))}
     </div>
   );
 }
 
+/** Render text with inline code/path highlighting */
+function FormattedTextItem({ text }: { text: string }) {
+  // Split on backtick-wrapped or path-like segments
+  const parts = text.split(/(`[^`]+`)/g);
+  if (parts.length === 1) {
+    // No backtick segments, check for embedded paths
+    const pathParts = text.split(/(\S+\/\S+\.\w+)/g);
+    if (pathParts.length === 1) return <>{text}</>;
+    return (
+      <>
+        {pathParts.map((part, i) =>
+          isPathLike(part) ? (
+            <code key={i} className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">{part}</code>
+          ) : (
+            <span key={i}>{part}</span>
+          )
+        )}
+      </>
+    );
+  }
+  return (
+    <>
+      {parts.map((part, i) =>
+        part.startsWith('`') && part.endsWith('`') ? (
+          <code key={i} className="px-1 py-0.5 bg-muted rounded text-[10px] font-mono">
+            {part.slice(1, -1)}
+          </code>
+        ) : (
+          <span key={i}>{part}</span>
+        )
+      )}
+    </>
+  );
+}
+
 function formatAngleTitle(angle: string): string {
   return angle
     .replace(/_/g, ' ')

ccw/frontend/src/locales/en/issues.json

@@ -55,6 +55,24 @@
       "creating": "Creating..."
     }
   },
+  "editDialog": {
+    "title": "Edit Issue",
+    "labels": {
+      "title": "Title",
+      "context": "Context",
+      "priority": "Priority",
+      "status": "Status"
+    },
+    "placeholders": {
+      "title": "Enter issue title...",
+      "context": "Describe the issue context..."
+    },
+    "buttons": {
+      "cancel": "Cancel",
+      "save": "Save",
+      "saving": "Saving..."
+    }
+  },
   "card": {
     "id": "ID",
     "createdAt": "Created",
@@ -179,7 +197,8 @@
       "filesTouched": "Files Touched"
     },
     "tasks": {
-      "comingSoon": "Task list coming soon"
+      "comingSoon": "Task list coming soon",
+      "empty": "No tasks found for this solution"
     }
   },
   "discovery": {

ccw/frontend/src/locales/zh/issues.json

@@ -55,6 +55,24 @@
       "creating": "创建中..."
     }
   },
+  "editDialog": {
+    "title": "编辑问题",
+    "labels": {
+      "title": "标题",
+      "context": "上下文",
+      "priority": "优先级",
+      "status": "状态"
+    },
+    "placeholders": {
+      "title": "输入问题标题...",
+      "context": "描述问题上下文..."
+    },
+    "buttons": {
+      "cancel": "取消",
+      "save": "保存",
+      "saving": "保存中..."
+    }
+  },
   "card": {
     "id": "ID",
     "createdAt": "创建时间",
@@ -183,7 +201,8 @@
       "filesTouched": "涉及文件"
     },
     "tasks": {
-      "comingSoon": "任务列表即将推出"
+      "comingSoon": "任务列表即将推出",
+      "empty": "该解决方案下暂无任务"
     }
   },
   "discovery": {

ccw/frontend/src/pages/IssueManagerPage.tsx

@@ -3,7 +3,7 @@
 // ========================================
 // Track and manage project issues with drag-drop queue
 
-import { useState, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import {
   AlertCircle,
@@ -121,6 +121,132 @@ function NewIssueDialog({ open, onOpenChange, onSubmit, isCreating }: NewIssueDi
   );
 }
 
+// ========== Edit Issue Dialog ==========
+
+interface EditIssueDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  issue: Issue | null;
+  onSubmit: (issueId: string, data: { title: string; context?: string; priority: Issue['priority']; status: Issue['status'] }) => void;
+  isUpdating: boolean;
+}
+
+function EditIssueDialog({ open, onOpenChange, issue, onSubmit, isUpdating }: EditIssueDialogProps) {
+  const { formatMessage } = useIntl();
+  const [title, setTitle] = useState('');
+  const [context, setContext] = useState('');
+  const [priority, setPriority] = useState<Issue['priority']>('medium');
+  const [status, setStatus] = useState<Issue['status']>('open');
+
+  // Reset form when dialog opens or issue changes
+  useEffect(() => {
+    if (open && issue) {
+      setTitle(issue.title ?? '');
+      setContext(issue.context ?? '');
+      setPriority(issue.priority ?? 'medium');
+      setStatus(issue.status ?? 'open');
+    } else if (!open) {
+      setTitle('');
+      setContext('');
+      setPriority('medium');
+      setStatus('open');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, issue?.id]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!issue) return;
+    if (!title.trim()) return;
+
+    onSubmit(issue.id, {
+      title: title.trim(),
+      context: context.trim() || undefined,
+      priority,
+      status,
+    });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{formatMessage({ id: 'issues.editDialog.title' })}</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4 mt-4">
+          <div>
+            <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.editDialog.labels.title' })}</label>
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder={formatMessage({ id: 'issues.editDialog.placeholders.title' })}
+              className="mt-1"
+              required
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.editDialog.labels.context' })}</label>
+            <textarea
+              value={context}
+              onChange={(e) => setContext(e.target.value)}
+              placeholder={formatMessage({ id: 'issues.editDialog.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 className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.editDialog.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>
+              <label className="text-sm font-medium text-foreground">{formatMessage({ id: 'issues.editDialog.labels.status' })}</label>
+              <Select value={status} onValueChange={(v) => setStatus(v as Issue['status'])}>
+                <SelectTrigger className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="open">{formatMessage({ id: 'issues.status.open' })}</SelectItem>
+                  <SelectItem value="in_progress">{formatMessage({ id: 'issues.status.inProgress' })}</SelectItem>
+                  <SelectItem value="resolved">{formatMessage({ id: 'issues.status.resolved' })}</SelectItem>
+                  <SelectItem value="closed">{formatMessage({ id: 'issues.status.closed' })}</SelectItem>
+                  <SelectItem value="completed">{formatMessage({ id: 'issues.status.completed' })}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              {formatMessage({ id: 'issues.editDialog.buttons.cancel' })}
+            </Button>
+            <Button type="submit" disabled={isUpdating || !issue || !title.trim()}>
+              {isUpdating ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  {formatMessage({ id: 'issues.editDialog.buttons.saving' })}
+                </>
+              ) : (
+                <>
+                  {formatMessage({ id: 'issues.editDialog.buttons.save' })}
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
 // ========== Issue List Component ==========
 
 interface IssueListProps {
@@ -188,6 +314,8 @@ export function IssueManagerPage() {
   const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
   const [priorityFilter, setPriorityFilter] = useState<PriorityFilter>('all');
   const [isNewIssueOpen, setIsNewIssueOpen] = useState(false);
+  const [isEditIssueOpen, setIsEditIssueOpen] = useState(false);
+  const [editingIssue, setEditingIssue] = useState<Issue | null>(null);
 
   const {
     issues,
@@ -205,7 +333,7 @@ export function IssueManagerPage() {
     },
   });
 
-  const { createIssue, updateIssue, deleteIssue, isCreating } = useIssueMutations();
+  const { createIssue, updateIssue, deleteIssue, isCreating, isUpdating } = useIssueMutations();
 
   // Filter counts
   const statusCounts = useMemo(() => ({
@@ -222,8 +350,22 @@ export function IssueManagerPage() {
     setIsNewIssueOpen(false);
   };
 
-  const handleEditIssue = (_issue: Issue) => {
+  const handleEditIssue = (issue: Issue) => {
-    // TODO: Open edit dialog
+    setEditingIssue(issue);
+    setIsEditIssueOpen(true);
+  };
+
+  const handleCloseEditDialog = (open: boolean) => {
+    setIsEditIssueOpen(open);
+    if (!open) {
+      setEditingIssue(null);
+    }
+  };
+
+  const handleUpdateIssue = async (issueId: string, data: { title: string; context?: string; priority: Issue['priority']; status: Issue['status'] }) => {
+    await updateIssue(issueId, data);
+    setIsEditIssueOpen(false);
+    setEditingIssue(null);
   };
 
   const handleDeleteIssue = async (issue: Issue) => {
@@ -391,6 +533,15 @@ export function IssueManagerPage() {
         onSubmit={handleCreateIssue}
         isCreating={isCreating}
       />
+
+      {/* Edit Issue Dialog */}
+      <EditIssueDialog
+        open={isEditIssueOpen}
+        onOpenChange={handleCloseEditDialog}
+        issue={editingIssue}
+        onSubmit={handleUpdateIssue}
+        isUpdating={isUpdating}
+      />
     </div>
   );
 }

ccw/frontend/src/pages/SettingsPage.tsx

@@ -35,6 +35,13 @@ 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,
+  DialogDescription,
+} from '@/components/ui/Dialog';
 import { ThemeSelector } from '@/components/shared/ThemeSelector';
 import { useTheme } from '@/hooks';
 import { toast } from 'sonner';
@@ -56,6 +63,149 @@ import {
   useUpgradeCcwInstallation,
 } from '@/hooks/useSystemSettings';
 
+// ========== File Path Input with Browse Dialog ==========
+
+interface BrowseItem {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  isFile: boolean;
+}
+
+interface FilePathInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  showHidden?: boolean;
+}
+
+function FilePathInput({ value, onChange, placeholder, showHidden = true }: FilePathInputProps) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [browseItems, setBrowseItems] = useState<BrowseItem[]>([]);
+  const [currentBrowsePath, setCurrentBrowsePath] = useState('');
+  const [parentPath, setParentPath] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const browseDirectory = async (dirPath?: string) => {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/dialog/browse', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: dirPath || '~', showHidden }),
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      setBrowseItems(data.items || []);
+      setCurrentBrowsePath(data.currentPath || '');
+      setParentPath(data.parentPath || '');
+    } catch {
+      // silently fail
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleOpen = () => {
+    setDialogOpen(true);
+    // If value is set, browse its parent directory; otherwise browse home
+    const startPath = value ? value.replace(/[/\\][^/\\]*$/, '') : undefined;
+    browseDirectory(startPath);
+  };
+
+  const handleSelectFile = (filePath: string) => {
+    onChange(filePath);
+    setDialogOpen(false);
+  };
+
+  return (
+    <>
+      <div className="flex gap-2">
+        <Input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="flex-1"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="shrink-0 h-9"
+          onClick={handleOpen}
+          title="Browse"
+        >
+          <FolderOpen className="w-4 h-4" />
+        </Button>
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <FolderOpen className="w-5 h-5" />
+              Browse Files
+            </DialogTitle>
+            <DialogDescription className="font-mono text-xs truncate" title={currentBrowsePath}>
+              {currentBrowsePath}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="border border-border rounded-lg overflow-hidden">
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <RefreshCw className="w-4 h-4 animate-spin text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="overflow-y-auto max-h-[350px]">
+                {/* Parent directory */}
+                {parentPath && parentPath !== currentBrowsePath && (
+                  <button
+                    type="button"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted/50 transition-colors text-left border-b border-border"
+                    onClick={() => browseDirectory(parentPath)}
+                  >
+                    <Folder className="w-4 h-4 text-primary shrink-0" />
+                    <span className="text-muted-foreground font-medium">..</span>
+                  </button>
+                )}
+                {browseItems.map((item) => (
+                  <button
+                    key={item.path}
+                    type="button"
+                    className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted/50 transition-colors text-left"
+                    onClick={() => {
+                      if (item.isDirectory) {
+                        browseDirectory(item.path);
+                      } else {
+                        handleSelectFile(item.path);
+                      }
+                    }}
+                  >
+                    {item.isDirectory ? (
+                      <Folder className="w-4 h-4 text-primary shrink-0" />
+                    ) : (
+                      <File className="w-4 h-4 text-muted-foreground shrink-0" />
+                    )}
+                    <span className={cn('truncate', item.isFile && 'text-foreground font-medium')}>
+                      {item.name}
+                    </span>
+                  </button>
+                ))}
+                {browseItems.length === 0 && (
+                  <div className="px-3 py-8 text-sm text-muted-foreground text-center">
+                    Empty directory
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
+
 // ========== Tool Config File Helpers ==========
 
 /** Tools that use .env file for environment variables */
@@ -379,9 +529,9 @@ function CliToolCard({
               <label className="text-sm font-medium text-foreground">
                 {formatMessage({ id: 'settings.cliTools.envFile' })}
               </label>
-              <Input
+              <FilePathInput
                 value={config.envFile || ''}
-                onChange={(e) => onUpdateEnvFile(e.target.value || undefined)}
+                onChange={(v) => onUpdateEnvFile(v || undefined)}
                 placeholder={formatMessage({ id: 'settings.cliTools.envFilePlaceholder' })}
               />
               <p className="text-xs text-muted-foreground">
@@ -396,9 +546,9 @@ function CliToolCard({
               <label className="text-sm font-medium text-foreground">
                 {formatMessage({ id: 'apiSettings.cliSettings.settingsFile' })}
               </label>
-              <Input
+              <FilePathInput
                 value={config.settingsFile || ''}
-                onChange={(e) => onUpdateSettingsFile(e.target.value || undefined)}
+                onChange={(v) => onUpdateSettingsFile(v || undefined)}
                 placeholder={formatMessage({ id: 'apiSettings.cliSettings.settingsFilePlaceholder' })}
               />
               <p className="text-xs text-muted-foreground">

ccw/frontend/src/pages/orchestrator/LeftSidebar.tsx

@@ -47,7 +47,7 @@ export function LeftSidebar({ className }: LeftSidebarProps) {
   return (
     <div
       className={cn(
-        'bg-card border-r border-border flex flex-col relative',
+        'h-full bg-card border-r border-border flex flex-col relative',
         isResizing && 'select-none',
         className
       )}
@@ -87,11 +87,13 @@ export function LeftSidebar({ className }: LeftSidebarProps) {
       </div>
 
       {/* Content */}
-      {leftPanelTab === 'templates' ? (
+      <div className="flex-1 min-h-0 overflow-y-auto">
-        <InlineTemplatePanel />
+        {leftPanelTab === 'templates' ? (
-      ) : (
+          <InlineTemplatePanel />
-        <NodeLibrary />
+        ) : (
-      )}
+          <NodeLibrary />
+        )}
+      </div>
 
       {/* Footer */}
       <div className="px-4 py-3 border-t border-border bg-muted/30">

ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx

@@ -5,7 +5,7 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import * as Collapsible from '@radix-ui/react-collapsible';
-import { ChevronRight, Settings } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 import { useFlowStore } from '@/stores';
 import { useExecutionStore } from '@/stores/executionStore';
 import { Button } from '@/components/ui/Button';
@@ -21,7 +21,6 @@ export function OrchestratorPage() {
   const isPaletteOpen = useFlowStore((state) => state.isPaletteOpen);
   const setIsPaletteOpen = useFlowStore((state) => state.setIsPaletteOpen);
   const isPropertyPanelOpen = useFlowStore((state) => state.isPropertyPanelOpen);
-  const setIsPropertyPanelOpen = useFlowStore((state) => state.setIsPropertyPanelOpen);
   const isMonitorPanelOpen = useExecutionStore((state) => state.isMonitorPanelOpen);
   const [isTemplateLibraryOpen, setIsTemplateLibraryOpen] = useState(false);
 
@@ -50,8 +49,8 @@ export function OrchestratorPage() {
             </Button>
           </div>
         )}
-        <Collapsible.Root open={isPaletteOpen} onOpenChange={setIsPaletteOpen}>
+        <Collapsible.Root open={isPaletteOpen} onOpenChange={setIsPaletteOpen} className="h-full">
-          <Collapsible.Content className="overflow-hidden data-[state=open]:animate-collapsible-slide-down data-[state=closed]:animate-collapsible-slide-up">
+          <Collapsible.Content className="h-full overflow-hidden data-[state=open]:animate-collapsible-slide-down data-[state=closed]:animate-collapsible-slide-up">
             <LeftSidebar />
           </Collapsible.Content>
         </Collapsible.Root>
@@ -60,21 +59,10 @@ export function OrchestratorPage() {
         <div className="flex-1 relative">
           <FlowCanvas className="absolute inset-0" />
 
-          {/* Property Panel as overlay - hidden when monitor is open */}
+          {/* Property Panel as overlay - only shown when a node is selected */}
-          {!isMonitorPanelOpen && (
+          {!isMonitorPanelOpen && isPropertyPanelOpen && (
             <div className="absolute top-2 right-2 bottom-2 z-10">
-              {!isPropertyPanelOpen && (
+              <PropertyPanel className="h-full" />
-                <div className="w-10 h-full bg-card/90 backdrop-blur-sm border border-border rounded-lg flex flex-col items-center py-4 shadow-lg">
-                  <Button variant="ghost" size="icon" onClick={() => setIsPropertyPanelOpen(true)} title="Open">
-                    <Settings className="w-4 h-4" />
-                  </Button>
-                </div>
-              )}
-              <Collapsible.Root open={isPropertyPanelOpen} onOpenChange={setIsPropertyPanelOpen}>
-                <Collapsible.Content className="overflow-hidden h-full data-[state=open]:animate-collapsible-slide-down data-[state=closed]:animate-collapsible-slide-up">
-                  <PropertyPanel className="h-full" />
-                </Collapsible.Content>
-              </Collapsible.Root>
             </div>
           )}
         </div>

ccw/frontend/src/stores/flowStore.ts

@@ -102,7 +102,7 @@ const initialState = {
 
   // UI state
   isPaletteOpen: true,
-  isPropertyPanelOpen: true,
+  isPropertyPanelOpen: false,
   leftPanelTab: 'nodes' as const,
 
   // Custom templates (loaded from localStorage)
@@ -465,7 +465,7 @@ export const useFlowStore = create<FlowStore>()(
       // ========== Selection ==========
 
       setSelectedNodeId: (id: string | null) => {
-        set({ selectedNodeId: id, selectedEdgeId: null }, false, 'setSelectedNodeId');
+        set({ selectedNodeId: id, selectedEdgeId: null, isPropertyPanelOpen: id !== null }, false, 'setSelectedNodeId');
       },
 
       setSelectedEdgeId: (id: string | null) => {