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.
2026-02-10 02:24:35 +08:00 · 2026-02-07 22:50:36 +08:00
parent dc9a1a1efb
commit 13c4dd0032
13 changed files with 636 additions and 255 deletions
--- a/ccw/frontend/src/components/issue/queue/SolutionDrawer.tsx
+++ b/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) {
-        onClose();
-      }
+      if (e.key === 'Escape') 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">
-                  <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                  <p className="text-sm">{formatMessage({ id: 'solution.tasks.comingSoon' })}</p>
-                </div>
+                {tasksForSolution.length === 0 ? (
+                  <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: '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 */}
--- a/ccw/frontend/src/components/session-detail/context/ExplorationCollapsible.tsx
+++ b/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(
--- a/ccw/frontend/src/components/session-detail/context/ExplorationsSection.tsx
+++ b/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>
-        <CardTitle className="flex items-center gap-2">
-          <Search className="w-5 h-5" />
+      <CardContent className="p-6">
+        <h3 className="text-sm font-medium text-foreground mb-4 flex items-center gap-2">
+          <Search className="w-4 h-4" />
          {formatMessage({ id: 'sessionDetail.context.explorations.title' })}
-          <span className="text-sm font-normal text-muted-foreground">
-            ({data.manifest.exploration_count} {formatMessage({ id: 'sessionDetail.context.explorations.angles' })})
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
+          <Badge variant="secondary">
+            {data.manifest.exploration_count} {formatMessage({ id: 'sessionDetail.context.explorations.angles' })}
+          </Badge>
+        </h3>
        <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[];
-    relevant_files?: string[];
-    patterns?: string[];
-    dependencies?: string[];
-    integration_points?: string[];
-    testing?: string[];
+    project_structure?: unknown;
+    relevant_files?: unknown;
+    patterns?: unknown;
+    dependencies?: unknown;
+    integration_points?: unknown;
+    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">
-          <span className="text-muted-foreground mt-0.5">{section.icon}</span>
-          <div className="flex-1">
-            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1">
-              {section.label}
-            </p>
-            <FieldRenderer value={section.data} type="array" />
-          </div>
+        <div key={section.key}>
+          <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
+            <span className="text-muted-foreground">{section.icon}</span>
+            {section.label}
+          </h4>
+          {section.renderAs === 'paths' ? (
+            <div className="flex flex-wrap gap-1.5">
+              {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, ' ')
--- a/ccw/frontend/src/locales/en/issues.json
+++ b/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": {
--- a/ccw/frontend/src/locales/zh/issues.json
+++ b/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": {
--- a/ccw/frontend/src/pages/IssueManagerPage.tsx
+++ b/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) => {
-    // TODO: Open edit dialog
+  const handleEditIssue = (issue: Issue) => {
+    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>
  );
 }
--- a/ccw/frontend/src/pages/SettingsPage.tsx
+++ b/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">
--- a/ccw/frontend/src/pages/orchestrator/LeftSidebar.tsx
+++ b/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' ? (
-        <InlineTemplatePanel />
-      ) : (
-        <NodeLibrary />
-      )}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {leftPanelTab === 'templates' ? (
+          <InlineTemplatePanel />
+        ) : (
+          <NodeLibrary />
+        )}
+      </div>

      {/* Footer */}
      <div className="px-4 py-3 border-t border-border bg-muted/30">
--- a/ccw/frontend/src/pages/orchestrator/OrchestratorPage.tsx
+++ b/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.Content className="overflow-hidden data-[state=open]:animate-collapsible-slide-down data-[state=closed]:animate-collapsible-slide-up">
+        <Collapsible.Root open={isPaletteOpen} onOpenChange={setIsPaletteOpen} className="h-full">
+          <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 */}
-          {!isMonitorPanelOpen && (
+          {/* Property Panel as overlay - only shown when a node is selected */}
+          {!isMonitorPanelOpen && isPropertyPanelOpen && (
            <div className="absolute top-2 right-2 bottom-2 z-10">
-              {!isPropertyPanelOpen && (
-                <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>
+              <PropertyPanel className="h-full" />
            </div>
          )}
        </div>
--- a/ccw/frontend/src/stores/flowStore.ts
+++ b/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) => {