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.

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>
   );
 }

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' ? (
-        <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">

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>