From b22e66750c3967b7792bf39c021e004f9ab70561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Flor=C3=AAncio?= <carlosmflorencio@gmail.com>
Date: Tue, 3 Feb 2026 04:14:07 +0000
Subject: [PATCH] feat: improved file tree (#164)

feat: improved editor
---
 .../agent/handlers/workspace_file_handlers.go |  41 ++
 .../internal/agentctl/client/client.go        |  42 ++
 .../internal/agentctl/server/api/server.go    |   1 +
 .../internal/agentctl/server/api/workspace.go |  24 +
 .../server/process/workspace_tracker.go       |  51 ++
 .../internal/agentctl/types/streams/file.go   |  23 +
 apps/backend/pkg/websocket/actions.go         |   1 +
 apps/pnpm-lock.yaml                           |  40 +-
 apps/web/components/diff/diff-viewer.tsx      |   1 +
 .../task/chat/messages/tool-edit-message.tsx  |   2 +-
 .../components/task/comment-view-popover.tsx  | 123 ++++
 .../task/editor-comment-popover.tsx           | 159 +++++
 apps/web/components/task/file-browser.tsx     | 331 +++++++++-
 .../components/task/file-editor-content.tsx   | 594 ++++++++++++++++--
 .../components/task/file-viewer-content.tsx   |   2 +-
 apps/web/components/task/markdown-editor.tsx  |  59 ++
 .../task/mobile/session-mobile-layout.tsx     |   1 -
 .../task/plan-selection-popover.tsx           |  27 +-
 .../web/components/task/task-center-panel.tsx | 236 ++++++-
 apps/web/components/task/task-chat-panel.tsx  |   8 +-
 apps/web/components/task/task-files-panel.tsx | 119 +++-
 apps/web/components/task/task-layout.tsx      |  12 +-
 apps/web/components/task/task-plan-panel.tsx  |  56 +-
 apps/web/lib/local-storage.ts                 | 212 +++++++
 apps/web/lib/ws/workspace-files.ts            |  24 +
 apps/web/package.json                         |   1 +
 26 files changed, 2064 insertions(+), 126 deletions(-)
 create mode 100644 apps/web/components/task/comment-view-popover.tsx
 create mode 100644 apps/web/components/task/editor-comment-popover.tsx

diff --git a/apps/backend/internal/agent/handlers/workspace_file_handlers.go b/apps/backend/internal/agent/handlers/workspace_file_handlers.go
index 819a095b67..70758b6468 100644
--- a/apps/backend/internal/agent/handlers/workspace_file_handlers.go
+++ b/apps/backend/internal/agent/handlers/workspace_file_handlers.go
@@ -29,6 +29,7 @@ func (h *WorkspaceFileHandlers) RegisterHandlers(d *ws.Dispatcher) {
 	d.RegisterFunc(ws.ActionWorkspaceFileTreeGet, h.wsGetFileTree)
 	d.RegisterFunc(ws.ActionWorkspaceFileContentGet, h.wsGetFileContent)
 	d.RegisterFunc(ws.ActionWorkspaceFileContentUpdate, h.wsUpdateFileContent)
+	d.RegisterFunc(ws.ActionWorkspaceFileDelete, h.wsDeleteFile)
 	d.RegisterFunc(ws.ActionWorkspaceFilesSearch, h.wsSearchFiles)
 }
 
@@ -154,6 +155,46 @@ func (h *WorkspaceFileHandlers) wsUpdateFileContent(ctx context.Context, msg *ws
 	return ws.NewResponse(msg.ID, msg.Action, response)
 }
 
+// wsDeleteFile handles workspace.file.delete action
+func (h *WorkspaceFileHandlers) wsDeleteFile(ctx context.Context, msg *ws.Message) (*ws.Message, error) {
+	var req struct {
+		SessionID string `json:"session_id"`
+		Path      string `json:"path"`
+	}
+
+	if err := msg.ParsePayload(&req); err != nil {
+		return ws.NewError(msg.ID, msg.Action, ws.ErrorCodeBadRequest, "Invalid payload: "+err.Error(), nil)
+	}
+
+	if req.SessionID == "" {
+		return ws.NewError(msg.ID, msg.Action, ws.ErrorCodeValidation, "session_id is required", nil)
+	}
+	if req.Path == "" {
+		return ws.NewError(msg.ID, msg.Action, ws.ErrorCodeValidation, "path is required", nil)
+	}
+
+	// Get agent execution for this session
+	execution, found := h.lifecycle.GetExecutionBySessionID(req.SessionID)
+	if !found {
+		return ws.NewError(msg.ID, msg.Action, ws.ErrorCodeNotFound, "No agent found for session", nil)
+	}
+
+	// Get agentctl client
+	client := execution.GetAgentCtlClient()
+	if client == nil {
+		return ws.NewError(msg.ID, msg.Action, ws.ErrorCodeInternalError, "Agent client not available", nil)
+	}
+
+	// Delete file via agentctl
+	response, err := client.DeleteFile(ctx, req.Path)
+	if err != nil {
+		h.logger.Error("failed to delete file", zap.Error(err), zap.String("session_id", req.SessionID), zap.String("path", req.Path))
+		return ws.NewError(msg.ID, msg.Action, ws.ErrorCodeInternalError, fmt.Sprintf("Failed to delete file: %v", err), nil)
+	}
+
+	return ws.NewResponse(msg.ID, msg.Action, response)
+}
+
 // wsSearchFiles handles workspace.files.search action
 func (h *WorkspaceFileHandlers) wsSearchFiles(ctx context.Context, msg *ws.Message) (*ws.Message, error) {
 	var req struct {
diff --git a/apps/backend/internal/agentctl/client/client.go b/apps/backend/internal/agentctl/client/client.go
index 13d6572c1d..3c50af7a01 100644
--- a/apps/backend/internal/agentctl/client/client.go
+++ b/apps/backend/internal/agentctl/client/client.go
@@ -461,6 +461,48 @@ func (c *Client) ApplyFileDiff(ctx context.Context, path string, diff string, or
 	return &response, nil
 }
 
+// FileDeleteResponse represents a file delete response
+type FileDeleteResponse struct {
+	Path    string `json:"path"`
+	Success bool   `json:"success"`
+	Error   string `json:"error,omitempty"`
+}
+
+// DeleteFile deletes a file via HTTP DELETE
+func (c *Client) DeleteFile(ctx context.Context, path string) (*FileDeleteResponse, error) {
+	reqURL := fmt.Sprintf("%s/api/v1/workspace/file?path=%s", c.baseURL, path)
+
+	req, err := http.NewRequestWithContext(ctx, "DELETE", reqURL, nil)
+	if err != nil {
+		return nil, fmt.Errorf("failed to create request: %w", err)
+	}
+
+	resp, err := c.httpClient.Do(req)
+	if err != nil {
+		return nil, fmt.Errorf("failed to delete file: %w", err)
+	}
+	defer func() {
+		if err := resp.Body.Close(); err != nil {
+			c.logger.Debug("failed to close file delete response body", zap.Error(err))
+		}
+	}()
+
+	var response FileDeleteResponse
+	if err := json.NewDecoder(resp.Body).Decode(&response); err != nil {
+		return nil, fmt.Errorf("failed to parse response: %w", err)
+	}
+
+	if response.Error != "" {
+		return nil, fmt.Errorf("file delete error: %s", response.Error)
+	}
+
+	if !response.Success {
+		return nil, fmt.Errorf("file delete failed")
+	}
+
+	return &response, nil
+}
+
 // Close closes all connections
 func (c *Client) Close() {
 	c.CloseUpdatesStream()
diff --git a/apps/backend/internal/agentctl/server/api/server.go b/apps/backend/internal/agentctl/server/api/server.go
index 76fa49ffa7..3b123f6aa5 100644
--- a/apps/backend/internal/agentctl/server/api/server.go
+++ b/apps/backend/internal/agentctl/server/api/server.go
@@ -90,6 +90,7 @@ func (s *Server) setupRoutes() {
 		api.GET("/workspace/tree", s.handleFileTree)
 		api.GET("/workspace/file/content", s.handleFileContent)
 		api.POST("/workspace/file/content", s.handleFileUpdate)
+		api.DELETE("/workspace/file", s.handleFileDelete)
 		api.GET("/workspace/search", s.handleFileSearch)
 
 		// Shell access (HTTP endpoints only - streaming is via /workspace/stream)
diff --git a/apps/backend/internal/agentctl/server/api/workspace.go b/apps/backend/internal/agentctl/server/api/workspace.go
index 59d356cc13..9194acce0e 100644
--- a/apps/backend/internal/agentctl/server/api/workspace.go
+++ b/apps/backend/internal/agentctl/server/api/workspace.go
@@ -203,6 +203,30 @@ func (s *Server) handleFileSearch(c *gin.Context) {
 	c.JSON(200, types.FileSearchResponse{Files: files})
 }
 
+// handleFileDelete handles file delete requests via HTTP DELETE
+func (s *Server) handleFileDelete(c *gin.Context) {
+	path := c.Query("path")
+	if path == "" {
+		c.JSON(400, streams.FileDeleteResponse{Error: "path is required"})
+		return
+	}
+
+	err := s.procMgr.GetWorkspaceTracker().DeleteFile(path)
+	if err != nil {
+		c.JSON(400, streams.FileDeleteResponse{
+			Path:    path,
+			Success: false,
+			Error:   err.Error(),
+		})
+		return
+	}
+
+	c.JSON(200, streams.FileDeleteResponse{
+		Path:    path,
+		Success: true,
+	})
+}
+
 // mustParseInt parses a string to int, returns 0 on error
 func mustParseInt(s string) int {
 	var n int
diff --git a/apps/backend/internal/agentctl/server/process/workspace_tracker.go b/apps/backend/internal/agentctl/server/process/workspace_tracker.go
index a24bc80568..a3428df15c 100644
--- a/apps/backend/internal/agentctl/server/process/workspace_tracker.go
+++ b/apps/backend/internal/agentctl/server/process/workspace_tracker.go
@@ -1310,6 +1310,57 @@ func (wt *WorkspaceTracker) ApplyFileDiff(reqPath string, unifiedDiff string, or
 	return newHash, nil
 }
 
+// DeleteFile deletes a file from the workspace
+func (wt *WorkspaceTracker) DeleteFile(reqPath string) error {
+	cleanWorkDir := filepath.Clean(wt.workDir)
+	cleanReqPath := filepath.Clean(reqPath)
+
+	// Resolve the full path - if already absolute and within workDir, use directly
+	var fullPath string
+	if filepath.IsAbs(cleanReqPath) && strings.HasPrefix(cleanReqPath, cleanWorkDir+string(os.PathSeparator)) {
+		fullPath = cleanReqPath
+	} else {
+		fullPath = filepath.Join(wt.workDir, cleanReqPath)
+	}
+
+	// Path traversal protection
+	if !strings.HasPrefix(fullPath, cleanWorkDir+string(os.PathSeparator)) && fullPath != cleanWorkDir {
+		return fmt.Errorf("path traversal detected")
+	}
+
+	// Check if file exists
+	info, err := os.Stat(fullPath)
+	if err != nil {
+		if os.IsNotExist(err) {
+			return fmt.Errorf("file does not exist: %s", reqPath)
+		}
+		return fmt.Errorf("failed to stat file: %w", err)
+	}
+
+	// Don't allow deleting directories
+	if info.IsDir() {
+		return fmt.Errorf("cannot delete directory: %s", reqPath)
+	}
+
+	// Delete the file
+	if err := os.Remove(fullPath); err != nil {
+		return fmt.Errorf("failed to delete file: %w", err)
+	}
+
+	// Trigger filesystem change notification
+	select {
+	case wt.fsChangeTrigger <- struct{}{}:
+	default:
+		// Channel already has a pending trigger, skip
+	}
+
+	wt.logger.Debug("deleted file",
+		zap.String("path", reqPath),
+	)
+
+	return nil
+}
+
 // calculateSHA256 calculates the SHA256 hash of a string
 func calculateSHA256(content string) string {
 	hash := sha256.Sum256([]byte(content))
diff --git a/apps/backend/internal/agentctl/types/streams/file.go b/apps/backend/internal/agentctl/types/streams/file.go
index ac596562ee..abe3c41e54 100644
--- a/apps/backend/internal/agentctl/types/streams/file.go
+++ b/apps/backend/internal/agentctl/types/streams/file.go
@@ -180,3 +180,26 @@ type FileUpdateResponse struct {
 	// Error contains error message if the request failed.
 	Error string `json:"error,omitempty"`
 }
+
+// FileDeleteRequest represents a request to delete a file.
+//
+// HTTP endpoint: DELETE /api/v1/workspace/file
+type FileDeleteRequest struct {
+	// Path is the file path (relative to workspace root).
+	Path string `json:"path"`
+}
+
+// FileDeleteResponse represents a response to a file delete request.
+type FileDeleteResponse struct {
+	// RequestID identifies the request.
+	RequestID string `json:"request_id"`
+
+	// Path is the file path.
+	Path string `json:"path"`
+
+	// Success indicates if the deletion was successful.
+	Success bool `json:"success"`
+
+	// Error contains error message if the request failed.
+	Error string `json:"error,omitempty"`
+}
diff --git a/apps/backend/pkg/websocket/actions.go b/apps/backend/pkg/websocket/actions.go
index 0f2c34cf20..6ca31cbfb1 100644
--- a/apps/backend/pkg/websocket/actions.go
+++ b/apps/backend/pkg/websocket/actions.go
@@ -170,6 +170,7 @@ const (
 	ActionWorkspaceFileTreeGet       = "workspace.tree.get"
 	ActionWorkspaceFileContentGet    = "workspace.file.get"
 	ActionWorkspaceFileContentUpdate = "workspace.file.update"
+	ActionWorkspaceFileDelete        = "workspace.file.delete"
 	ActionWorkspaceFilesSearch       = "workspace.files.search"
 	ActionWorkspaceFileChanges       = "session.workspace.file.changes" // Notification
 
diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml
index 8fe0d3e78c..f88af4123c 100644
--- a/apps/pnpm-lock.yaml
+++ b/apps/pnpm-lock.yaml
@@ -269,6 +269,9 @@ importers:
       '@tanstack/react-virtual':
         specifier: ^3.13.18
         version: 3.13.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@uiw/codemirror-theme-github':
+        specifier: ^4.25.4
+        version: 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.10)
       '@uiw/codemirror-theme-vscode':
         specifier: ^4.25.4
         version: 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.10)
@@ -319,7 +322,7 @@ importers:
         version: 11.12.2
       next:
         specifier: 16.1.1
-        version: 16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 16.1.1(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -2813,6 +2816,9 @@ packages:
       '@codemirror/state': 6.5.3
       '@codemirror/view': 6.39.10
 
+  '@uiw/codemirror-theme-github@4.25.4':
+    resolution: {integrity: sha512-M5zRT2vIpNsuKN0Lz+DwLnmhHW8Eddp1M9zC0hm3V+bvffmaSn/pUDey1eqGIv5xNNmjhqvDAz0a90xLYCzvSw==}
+
   '@uiw/codemirror-theme-vscode@4.25.4':
     resolution: {integrity: sha512-9ob5EtLqrXBFl8uf4eFRkXjyjfyfBRVsJdt7xbc33f+2/I29/2v2nEdU/xw40+dhloxF/h1Ry281f8wAs97MWQ==}
 
@@ -8937,6 +8943,14 @@ snapshots:
       '@codemirror/state': 6.5.3
       '@codemirror/view': 6.39.10
 
+  '@uiw/codemirror-theme-github@4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.10)':
+    dependencies:
+      '@uiw/codemirror-themes': 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.10)
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
   '@uiw/codemirror-theme-vscode@4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.10)':
     dependencies:
       '@uiw/codemirror-themes': 4.25.4(@codemirror/language@6.12.1)(@codemirror/state@6.5.3)(@codemirror/view@6.39.10)
@@ -10002,8 +10016,8 @@ snapshots:
       '@next/eslint-plugin-next': 16.1.1
       eslint: 9.39.2(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-react-hooks: 7.0.1(eslint@9.39.2(jiti@2.6.1))
@@ -10025,7 +10039,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3
@@ -10036,22 +10050,22 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.2(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.2(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -10062,7 +10076,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.2(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1)))(eslint@9.39.2(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.53.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.2(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -11481,7 +11495,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  next@16.1.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  next@16.1.1(@babel/core@7.28.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@next/env': 16.1.1
       '@swc/helpers': 0.5.15
@@ -11490,7 +11504,7 @@ snapshots:
       postcss: 8.4.31
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
-      styled-jsx: 5.1.6(react@19.2.3)
+      styled-jsx: 5.1.6(@babel/core@7.28.6)(react@19.2.3)
     optionalDependencies:
       '@next/swc-darwin-arm64': 16.1.1
       '@next/swc-darwin-x64': 16.1.1
@@ -12578,10 +12592,12 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
-  styled-jsx@5.1.6(react@19.2.3):
+  styled-jsx@5.1.6(@babel/core@7.28.6)(react@19.2.3):
     dependencies:
       client-only: 0.0.1
       react: 19.2.3
+    optionalDependencies:
+      '@babel/core': 7.28.6
 
   stylis@4.3.6: {}
 
diff --git a/apps/web/components/diff/diff-viewer.tsx b/apps/web/components/diff/diff-viewer.tsx
index 6ff82c4d9f..194e2fd864 100644
--- a/apps/web/components/diff/diff-viewer.tsx
+++ b/apps/web/components/diff/diff-viewer.tsx
@@ -423,6 +423,7 @@ export const DiffViewer = memo(function DiffViewer({
         light: 'github-light',
       },
       enableLineSelection: enableComments,
+      hunkSeparators: 'simple',
       enableHoverUtility: enableComments,
       diffIndicators: 'none',
       onLineSelectionEnd: handleLineSelectionEnd,
diff --git a/apps/web/components/task/chat/messages/tool-edit-message.tsx b/apps/web/components/task/chat/messages/tool-edit-message.tsx
index d9dfdc692f..4de9d57ef6 100644
--- a/apps/web/components/task/chat/messages/tool-edit-message.tsx
+++ b/apps/web/components/task/chat/messages/tool-edit-message.tsx
@@ -101,7 +101,7 @@ export const ToolEditMessage = memo(function ToolEditMessage({ comment, worktree
             {!isSuccess && getStatusIcon()}
           </span>
           {filePath && (
-            <span className="min-w-0 flex-1">
+            <span className="min-w-0">
               <FilePathButton
                 filePath={filePath}
                 worktreePath={worktreePath}
diff --git a/apps/web/components/task/comment-view-popover.tsx b/apps/web/components/task/comment-view-popover.tsx
new file mode 100644
index 0000000000..981f37396d
--- /dev/null
+++ b/apps/web/components/task/comment-view-popover.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { IconTrash } from '@tabler/icons-react';
+import { Button } from '@kandev/ui/button';
+import { cn } from '@/lib/utils';
+import type { DiffComment } from '@/lib/diff/types';
+
+type CommentViewPopoverProps = {
+  comments: DiffComment[];
+  position: { x: number; y: number };
+  onDelete: (commentId: string) => void;
+  onClose: () => void;
+};
+
+export function CommentViewPopover({
+  comments,
+  position,
+  onDelete,
+  onClose,
+}: CommentViewPopoverProps) {
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    // Delay adding listener to avoid immediate close
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+    }, 100);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [onClose]);
+
+  // Calculate position
+  const popoverWidth = 350;
+  const popoverHeight = 200;
+  const gap = 8;
+
+  let left = position.x + gap;
+  let top = position.y + gap;
+
+  // If would overflow right, shift left
+  if (left + popoverWidth > window.innerWidth - 16) {
+    left = Math.max(16, window.innerWidth - popoverWidth - 16);
+  }
+
+  // If would overflow bottom, position above
+  if (top + popoverHeight > window.innerHeight - 16) {
+    top = Math.max(16, position.y - popoverHeight - gap);
+  }
+
+  // Format line range
+  const formatLineRange = (start: number, end: number) => {
+    return start === end ? `L${start}` : `L${start}-${end}`;
+  };
+
+  return (
+    <div
+      ref={popoverRef}
+      className={cn(
+        'fixed z-50 w-[350px] max-h-[350px] overflow-auto rounded-xl border border-border/50 bg-popover/95 backdrop-blur-sm shadow-xl',
+        'animate-in fade-in-0 zoom-in-95 duration-150'
+      )}
+      style={{
+        left,
+        top,
+      }}
+    >
+      {/* Comments list */}
+      <div className="divide-y divide-border/30">
+        {comments.map((comment) => (
+          <div key={comment.id} className="p-3">
+            {/* Line range and delete */}
+            <div className="flex items-center justify-between mb-2">
+              <span className="px-2 py-0.5 rounded-md bg-muted text-[10px] font-mono text-muted-foreground">
+                {formatLineRange(comment.startLine, comment.endLine)}
+              </span>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-6 w-6 p-0 cursor-pointer text-muted-foreground hover:text-destructive"
+                onClick={() => onDelete(comment.id)}
+              >
+                <IconTrash className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+
+            {/* Code snippet with scroll */}
+            {comment.codeContent && (
+              <pre className="mb-2 p-2 rounded-md bg-muted/50 text-[10px] text-muted-foreground font-mono max-h-[80px] overflow-auto whitespace-pre-wrap">
+                {comment.codeContent}
+              </pre>
+            )}
+
+            {/* Annotation */}
+            <p className="text-xs text-foreground leading-relaxed">
+              {comment.annotation}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/task/editor-comment-popover.tsx b/apps/web/components/task/editor-comment-popover.tsx
new file mode 100644
index 0000000000..4b4fdadb61
--- /dev/null
+++ b/apps/web/components/task/editor-comment-popover.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { IconPlus } from '@tabler/icons-react';
+import { Button } from '@kandev/ui/button';
+import { Textarea } from '@kandev/ui/textarea';
+import { cn } from '@/lib/utils';
+
+type EditorCommentPopoverProps = {
+  selectedText: string;
+  lineRange: { start: number; end: number };
+  position: { x: number; y: number };
+  onSubmit: (comment: string) => void;
+  onClose: () => void;
+};
+
+export function EditorCommentPopover({
+  selectedText,
+  lineRange,
+  position,
+  onSubmit,
+  onClose,
+}: EditorCommentPopoverProps) {
+  const [comment, setComment] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  // Focus textarea on mount
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    // Delay adding listener to avoid immediate close from selection click
+    const timer = setTimeout(() => {
+      document.addEventListener('mousedown', handleClickOutside);
+    }, 100);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [onClose]);
+
+  // Close on Escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => document.removeEventListener('keydown', handleKeyDown, true);
+  }, [onClose]);
+
+  const handleSubmit = useCallback(() => {
+    if (!comment.trim()) return;
+    onSubmit(comment.trim());
+  }, [comment, onSubmit]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const isDisabled = !comment.trim();
+
+  // Truncate code preview
+  const previewText = selectedText.length > 100
+    ? selectedText.slice(0, 100).trim() + '…'
+    : selectedText;
+
+  // Format line range
+  const lineRangeText = lineRange.start === lineRange.end
+    ? `Line ${lineRange.start}`
+    : `Lines ${lineRange.start}-${lineRange.end}`;
+
+  // Calculate position - anchor at bottom-right of selection, adjust if would overflow
+  const popoverWidth = 384; // w-96 = 24rem = 384px
+  const popoverHeight = 220; // approximate height of popover
+  const gap = 8;
+
+  // Start at bottom-right of selection
+  let left = position.x + gap;
+  let top = position.y + gap;
+
+  // If would overflow right, shift left
+  if (left + popoverWidth > window.innerWidth - 16) {
+    left = Math.max(16, window.innerWidth - popoverWidth - 16);
+  }
+
+  // If would overflow bottom, position above the selection instead
+  if (top + popoverHeight > window.innerHeight - 16) {
+    top = Math.max(16, position.y - popoverHeight - gap);
+  }
+
+  return (
+    <div
+      ref={popoverRef}
+      className={cn(
+        'fixed z-50 w-96 rounded-xl border border-border/50 bg-popover/95 backdrop-blur-sm p-4 shadow-xl',
+        'animate-in fade-in-0 zoom-in-95 duration-150'
+      )}
+      style={{
+        left,
+        top,
+      }}
+    >
+      {/* Line range badge */}
+      <div className="flex items-center gap-2 mb-2">
+        <span className="px-2 py-0.5 rounded-md bg-muted text-xs font-mono text-muted-foreground">
+          {lineRangeText}
+        </span>
+      </div>
+
+      {/* Code preview */}
+      <pre className="mb-3 p-2 rounded-md bg-muted/50 text-xs text-muted-foreground font-mono line-clamp-3 overflow-hidden whitespace-pre-wrap">
+        {previewText}
+      </pre>
+
+      {/* Comment input */}
+      <Textarea
+        ref={textareaRef}
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Add your comment or instruction..."
+        className="min-h-[72px] resize-none text-sm border-border/50 focus:border-primary/50"
+      />
+
+      {/* Actions */}
+      <div className="mt-3 flex items-center justify-between">
+        <span className="text-xs text-muted-foreground/70">
+          ⌘+Enter to add
+        </span>
+        <Button
+          size="sm"
+          onClick={handleSubmit}
+          disabled={isDisabled}
+          className="gap-1.5 cursor-pointer"
+        >
+          <IconPlus className="h-3.5 w-3.5" />
+          Add comment
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/task/file-browser.tsx b/apps/web/components/task/file-browser.tsx
index 0d68c12a49..82c9684057 100644
--- a/apps/web/components/task/file-browser.tsx
+++ b/apps/web/components/task/file-browser.tsx
@@ -1,29 +1,85 @@
 'use client';
 
-import React, { useEffect, useState, useCallback } from 'react';
-import { IconChevronRight, IconChevronDown, IconFile, IconFolder, IconFolderOpen } from '@tabler/icons-react';
+import React, { useEffect, useState, useCallback, useRef } from 'react';
+import { IconChevronRight, IconChevronDown, IconFile, IconFolder, IconFolderOpen, IconSearch, IconX, IconLoader2, IconTrash } from '@tabler/icons-react';
 import { ScrollArea } from '@kandev/ui/scroll-area';
+import { Input } from '@kandev/ui/input';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
 import { getWebSocketClient } from '@/lib/ws/connection';
-import { requestFileTree, requestFileContent } from '@/lib/ws/workspace-files';
+import { requestFileTree, requestFileContent, searchWorkspaceFiles } from '@/lib/ws/workspace-files';
 import type { FileTreeNode, FileContentResponse, OpenFileTab } from '@/lib/types/backend';
+import {
+  getFilesPanelExpandedPaths,
+  setFilesPanelExpandedPaths,
+  getFilesPanelScrollPosition,
+  setFilesPanelScrollPosition,
+} from '@/lib/local-storage';
 
 type FileBrowserProps = {
   sessionId: string;
   onOpenFile: (file: OpenFileTab) => void;
+  onDeleteFile?: (path: string) => void;
+  isSearchOpen?: boolean;
+  onCloseSearch?: () => void;
+  activeFilePath?: string | null;
 };
 
-export function FileBrowser({ sessionId, onOpenFile }: FileBrowserProps) {
+export function FileBrowser({ sessionId, onOpenFile, onDeleteFile, isSearchOpen = false, onCloseSearch, activeFilePath }: FileBrowserProps) {
   const [tree, setTree] = useState<FileTreeNode | null>(null);
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
   const [loadingPaths, setLoadingPaths] = useState<Set<string>>(new Set());
   const [isLoadingTree, setIsLoadingTree] = useState(true);
 
+  // Search state
+  const [localSearchQuery, setLocalSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<string[] | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  // Scroll persistence
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+  const scrollSaveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const hasRestoredScrollRef = useRef<string | null>(null);
+  const hasInitializedExpandedRef = useRef<string | null>(null);
+
+  // Focus search input when search opens
+  useEffect(() => {
+    if (isSearchOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchOpen]);
+
+  // Clear search when closing
+  useEffect(() => {
+    if (!isSearchOpen) {
+      setLocalSearchQuery('');
+      setSearchResults(null);
+      setIsSearching(false);
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    }
+  }, [isSearchOpen]);
+
   // Load initial tree - always try to load, don't wait for agentctl ready status
   useEffect(() => {
     setTree(null);
-    setExpandedPaths(new Set());
     setLoadingPaths(new Set());
     setIsLoadingTree(true);
+    // Reset the auto-expand ref so it will run for the new session
+    hasInitializedExpandedRef.current = null;
+
+    // Restore expanded paths from session storage or reset
+    const savedPaths = getFilesPanelExpandedPaths(sessionId);
+    if (savedPaths.length > 0) {
+      setExpandedPaths(new Set(savedPaths));
+      // Mark as initialized only if we have saved paths to restore
+      hasInitializedExpandedRef.current = sessionId;
+    } else {
+      setExpandedPaths(new Set());
+      // Leave hasInitializedExpandedRef.current as null so auto-expand will run
+    }
 
     const loadTree = async () => {
       try {
@@ -42,6 +98,51 @@ export function FileBrowser({ sessionId, onOpenFile }: FileBrowserProps) {
     loadTree();
   }, [sessionId]);
 
+  // Auto-expand first level folders and load their children
+  // Note: We intentionally use tree?.children?.length instead of tree to avoid re-running when tree updates
+  useEffect(() => {
+    if (!tree || isLoadingTree) {
+      return;
+    }
+
+    // Only auto-expand if we haven't initialized from saved state
+    if (hasInitializedExpandedRef.current === sessionId) {
+      return;
+    }
+    hasInitializedExpandedRef.current = sessionId;
+
+    // Only expand the root folder to show its immediate children
+    setExpandedPaths(new Set([tree.path]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tree?.children?.length, isLoadingTree, sessionId]);
+
+  // Save expanded paths when they change
+  useEffect(() => {
+    if (expandedPaths.size > 0 || hasInitializedExpandedRef.current === sessionId) {
+      setFilesPanelExpandedPaths(sessionId, Array.from(expandedPaths));
+    }
+  }, [expandedPaths, sessionId]);
+
+  // Track if tree is loaded (used for scroll restore timing)
+  const isTreeLoaded = !isLoadingTree && tree !== null;
+
+  // Restore scroll position after tree loads
+  useEffect(() => {
+    if (!isTreeLoaded || hasRestoredScrollRef.current === sessionId) return;
+
+    const savedScroll = getFilesPanelScrollPosition(sessionId);
+    if (savedScroll > 0 && scrollAreaRef.current) {
+      // Find the viewport element within ScrollArea
+      const viewport = scrollAreaRef.current.querySelector('[data-radix-scroll-area-viewport]');
+      if (viewport) {
+        viewport.scrollTop = savedScroll;
+        hasRestoredScrollRef.current = sessionId;
+      }
+    } else {
+      hasRestoredScrollRef.current = sessionId;
+    }
+  }, [isTreeLoaded, sessionId]);
+
   // Subscribe to file changes and refresh tree
   useEffect(() => {
     const client = getWebSocketClient();
@@ -60,6 +161,89 @@ export function FileBrowser({ sessionId, onOpenFile }: FileBrowserProps) {
     return unsubscribe;
   }, [sessionId]);
 
+  // Handle scroll events to save position
+  const handleScroll = useCallback((event: Event) => {
+    const target = event.target as HTMLElement;
+    const scrollTop = target.scrollTop;
+
+    // Debounce save
+    if (scrollSaveTimeoutRef.current) {
+      clearTimeout(scrollSaveTimeoutRef.current);
+    }
+    scrollSaveTimeoutRef.current = setTimeout(() => {
+      setFilesPanelScrollPosition(sessionId, scrollTop);
+    }, 150);
+  }, [sessionId]);
+
+  // Attach scroll listener to ScrollArea viewport
+  useEffect(() => {
+    const scrollArea = scrollAreaRef.current;
+    if (!scrollArea) return;
+
+    const viewport = scrollArea.querySelector('[data-radix-scroll-area-viewport]');
+    if (!viewport) return;
+
+    viewport.addEventListener('scroll', handleScroll);
+    return () => {
+      viewport.removeEventListener('scroll', handleScroll);
+      if (scrollSaveTimeoutRef.current) {
+        clearTimeout(scrollSaveTimeoutRef.current);
+      }
+    };
+  }, [handleScroll, tree]);
+
+  // Handle search input change with debounce
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setLocalSearchQuery(value);
+
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+
+    if (!value.trim()) {
+      setSearchResults(null);
+      setIsSearching(false);
+      return;
+    }
+
+    setIsSearching(true);
+    searchTimeoutRef.current = setTimeout(async () => {
+      try {
+        const client = getWebSocketClient();
+        if (!client) return;
+
+        const response = await searchWorkspaceFiles(client, sessionId, value, 50);
+        setSearchResults(response.files || []);
+      } catch (error) {
+        console.error('Failed to search files:', error);
+        setSearchResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 300);
+  }, [sessionId]);
+
+  // Close search (clears and notifies parent)
+  const handleCloseSearch = useCallback(() => {
+    setLocalSearchQuery('');
+    setSearchResults(null);
+    setIsSearching(false);
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    onCloseSearch?.();
+  }, [onCloseSearch]);
+
+  // Cleanup search timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
   const toggleExpand = useCallback(async (node: FileTreeNode) => {
     if (!node.is_dir) return;
 
@@ -134,42 +318,85 @@ export function FileBrowser({ sessionId, onOpenFile }: FileBrowserProps) {
     }
   }, [sessionId, onOpenFile]);
 
+  // Open file from search result (path only)
+  const openFileByPath = useCallback(async (path: string) => {
+    try {
+      const client = getWebSocketClient();
+      if (!client) return;
+
+      const response: FileContentResponse = await requestFileContent(client, sessionId, path);
+
+      // Calculate hash for the file content
+      const { calculateHash } = await import('@/lib/utils/file-diff');
+      const hash = await calculateHash(response.content);
+
+      // Extract filename from path
+      const name = path.split('/').pop() || path;
+
+      onOpenFile({
+        path,
+        name,
+        content: response.content,
+        originalContent: response.content,
+        originalHash: hash,
+        isDirty: false,
+      });
+    } catch (error) {
+      console.error('Failed to load file content:', error);
+    }
+  }, [sessionId, onOpenFile]);
+
   const renderTreeNode = (node: FileTreeNode, depth: number = 0): React.ReactNode => {
     const isExpanded = expandedPaths.has(node.path);
     const isLoading = loadingPaths.has(node.path);
+    const isActive = !node.is_dir && activeFilePath === node.path;
 
     return (
       <div key={node.path}>
         <div
-          className="flex items-center gap-1 py-1 px-2 hover:bg-accent cursor-pointer rounded text-sm"
-          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+          className={`group flex items-center gap-1 py-1 px-2 hover:bg-muted/50 cursor-pointer rounded text-sm ${isActive ? 'bg-muted/50' : ''}`}
+          style={{ paddingLeft: `${depth * 12 + 8 + (node.is_dir ? 0 : 20)}px` }}
           onClick={() => (node.is_dir ? toggleExpand(node) : openFile(node))}
         >
           {node.is_dir && (
             <span className="flex-shrink-0">
               {isLoading ? (
-                <span className="animate-spin">⏳</span>
+                <IconLoader2 className="h-4 w-4 animate-spin text-muted-foreground" />
               ) : isExpanded ? (
-                <IconChevronDown className="h-4 w-4" />
+                <IconChevronDown className="h-4 w-4 text-muted-foreground" />
               ) : (
-                <IconChevronRight className="h-4 w-4" />
+                <IconChevronRight className="h-4 w-4 text-muted-foreground" />
               )}
             </span>
           )}
           {node.is_dir ? (
             isExpanded ? (
-              <IconFolderOpen className="h-3 w-3 flex-shrink-0 text-blue-500" />
+              <IconFolderOpen className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
             ) : (
-              <IconFolder className="h-3 w-3 flex-shrink-0 text-blue-500" />
+              <IconFolder className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
             )
           ) : (
-            <IconFile className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+            <IconFile className={`h-3 w-3 flex-shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`} />
           )}
-          <span className="truncate">{node.name}</span>
-          {!node.is_dir && node.size && (
-            <span className="text-xs text-muted-foreground ml-auto">
-              {(node.size / 1024).toFixed(1)}KB
-            </span>
+          <span className={`flex-1 truncate ${isActive ? 'text-foreground' : 'text-muted-foreground'} group-hover:text-foreground ${node.is_dir ? 'font-medium' : ''}`}>{node.name}</span>
+          {!node.is_dir && onDeleteFile && (
+            <div className="flex items-center gap-1 ml-auto opacity-0 group-hover:opacity-100">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="text-muted-foreground hover:text-destructive cursor-pointer"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteFile(node.path);
+                    }}
+                  >
+                    <IconTrash className="h-3.5 w-3.5" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>Delete file</TooltipContent>
+              </Tooltip>
+            </div>
           )}
         </div>
         {node.is_dir && isExpanded && node.children && (
@@ -188,10 +415,74 @@ export function FileBrowser({ sessionId, onOpenFile }: FileBrowserProps) {
     );
   };
 
+  const renderSearchResults = () => {
+    if (!searchResults) return null;
+
+    if (searchResults.length === 0) {
+      return (
+        <div className="p-4 text-sm text-muted-foreground text-center">
+          No files found
+        </div>
+      );
+    }
+
+    return (
+      <div className="pb-2">
+        {searchResults.map((path) => {
+          const name = path.split('/').pop() || path;
+          const folder = path.includes('/') ? path.substring(0, path.lastIndexOf('/')) : '';
+          return (
+            <div
+              key={path}
+              className="group flex items-center gap-1 py-1 px-2 hover:bg-muted/50 cursor-pointer rounded text-sm"
+              onClick={() => openFileByPath(path)}
+            >
+              <IconFile className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+              <span className="truncate text-muted-foreground group-hover:text-foreground">
+                {folder && <span>{folder}/</span>}
+                <span>{name}</span>
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
   return (
     <div className="flex flex-col h-full">
-      <ScrollArea className="flex-1">
-        {isLoadingTree ? (
+      {/* Search input - only shown when search is open */}
+      {isSearchOpen && (
+        <div className="px-2 pb-2">
+          <div className="relative">
+            {isSearching ? (
+              <IconLoader2 className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground pointer-events-none animate-spin" />
+            ) : (
+              <IconSearch className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+            )}
+            <Input
+              ref={searchInputRef}
+              type="text"
+              value={localSearchQuery}
+              onChange={handleSearchChange}
+              placeholder="Search files..."
+              className="pl-7 pr-7 h-7 text-xs"
+            />
+            <button
+              type="button"
+              onClick={handleCloseSearch}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <IconX className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      <ScrollArea className="flex-1" ref={scrollAreaRef}>
+        {isSearchOpen && searchResults !== null ? (
+          renderSearchResults()
+        ) : isLoadingTree ? (
           <div className="p-4 text-sm text-muted-foreground">Loading files...</div>
         ) : tree ? (
           <div className="pb-2">{renderTreeNode(tree)}</div>
diff --git a/apps/web/components/task/file-editor-content.tsx b/apps/web/components/task/file-editor-content.tsx
index 21ba64548c..ed9635580b 100644
--- a/apps/web/components/task/file-editor-content.tsx
+++ b/apps/web/components/task/file-editor-content.tsx
@@ -1,14 +1,21 @@
 'use client';
 
-import { useCallback, useEffect, useMemo } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import { EditorView } from '@codemirror/view';
+import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
+import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { EditorView, gutter, GutterMarker, ViewPlugin, type ViewUpdate } from '@codemirror/view';
 import type { Extension } from '@codemirror/state';
+import { Decoration, type DecorationSet } from '@codemirror/view';
 import { getCodeMirrorExtensionFromPath } from '@/lib/languages';
 import { Button } from '@kandev/ui/button';
-import { IconDeviceFloppy, IconLoader2 } from '@tabler/icons-react';
+import { IconDeviceFloppy, IconLoader2, IconTrash, IconTextWrap, IconTextWrapDisabled, IconMessagePlus } from '@tabler/icons-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
 import { formatDiffStats } from '@/lib/utils/file-diff';
+import { vscodeDark } from '@uiw/codemirror-theme-vscode';
+import { useDiffCommentsStore, useFileComments } from '@/lib/state/slices/diff-comments/diff-comments-slice';
+import type { DiffComment } from '@/lib/diff/types';
+import { useToast } from '@/components/toast-provider';
+import { EditorCommentPopover } from './editor-comment-popover';
+import { CommentViewPopover } from './comment-view-popover';
 
 type FileEditorContentProps = {
   path: string;
@@ -16,60 +23,388 @@ type FileEditorContentProps = {
   originalContent: string;
   isDirty: boolean;
   isSaving: boolean;
+  sessionId?: string;
+  enableComments?: boolean;
   onChange: (newContent: string) => void;
   onSave: () => void;
+  onDelete?: () => void;
 };
 
+type TextSelection = {
+  text: string;
+  startLine: number;
+  endLine: number;
+  position: { x: number; y: number };
+} | null;
+
+type FloatingButtonPosition = {
+  x: number;
+  y: number;
+} | null;
+
+type CommentViewState = {
+  comments: DiffComment[];
+  position: { x: number; y: number };
+} | null;
+
+// Create comment line decorations
+function createCommentDecorations(
+  view: EditorView,
+  comments: DiffComment[]
+): DecorationSet {
+  if (comments.length === 0) {
+    return Decoration.none;
+  }
+
+  const decorations: Array<{ from: number; decoration: Decoration }> = [];
+
+  // Get all lines that have comments
+  const linesWithComments = new Set<number>();
+  for (const comment of comments) {
+    for (let line = comment.startLine; line <= comment.endLine; line++) {
+      linesWithComments.add(line);
+    }
+  }
+
+  // Create line decorations for commented lines
+  for (const lineNum of linesWithComments) {
+    if (lineNum > view.state.doc.lines) continue;
+    const line = view.state.doc.line(lineNum);
+    decorations.push({
+      from: line.from,
+      decoration: Decoration.line({
+        class: 'cm-comment-line',
+      }),
+    });
+  }
+
+  decorations.sort((a, b) => a.from - b.from);
+  return Decoration.set(decorations.map(d => d.decoration.range(d.from)));
+}
+
+// Gutter marker for lines with comments - defined outside component to avoid re-creation
+class CommentGutterMarker extends GutterMarker {
+  constructor(
+    readonly lineComments: DiffComment[],
+    readonly isFirstLine: boolean
+  ) {
+    super();
+  }
+
+  toDOM() {
+    const marker = document.createElement('div');
+    marker.className = 'cm-comment-gutter-marker';
+    marker.title = `${this.lineComments.length} comment${this.lineComments.length > 1 ? 's' : ''} - click to view`;
+
+    // Add icon only on the first line of a comment
+    if (this.isFirstLine) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('width', '12');
+      svg.setAttribute('height', '12');
+      svg.setAttribute('viewBox', '0 0 24 24');
+      svg.setAttribute('fill', 'none');
+      svg.setAttribute('stroke', 'rgba(99, 102, 241, 0.9)');
+      svg.setAttribute('stroke-width', '2');
+      svg.setAttribute('stroke-linecap', 'round');
+      svg.setAttribute('stroke-linejoin', 'round');
+
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z');
+      svg.appendChild(path);
+      marker.appendChild(svg);
+    }
+
+    return marker;
+  }
+
+  eq(other: CommentGutterMarker) {
+    return this.lineComments.length === other.lineComments.length && this.isFirstLine === other.isFirstLine;
+  }
+}
+
 export function FileEditorContent({
   path,
   content,
   originalContent,
   isDirty,
   isSaving,
+  sessionId,
+  enableComments = false,
   onChange,
   onSave,
+  onDelete,
 }: FileEditorContentProps) {
+  const [wrapEnabled, setWrapEnabled] = useState(true);
+  const [textSelection, setTextSelection] = useState<TextSelection>(null);
+  const [floatingButtonPos, setFloatingButtonPos] = useState<FloatingButtonPosition>(null);
+  const [currentSelection, setCurrentSelection] = useState<{ text: string; startLine: number; endLine: number } | null>(null);
+  const [commentView, setCommentView] = useState<CommentViewState>(null);
+  const editorRef = useRef<ReactCodeMirrorRef>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const mousePositionRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const { toast } = useToast();
+
+  // Comment store
+  const addComment = useDiffCommentsStore((state) => state.addComment);
+  const removeComment = useDiffCommentsStore((state) => state.removeComment);
+  const comments = useFileComments(sessionId ?? '', path);
+
   const langExt = getCodeMirrorExtensionFromPath(path);
-  const extensions: Extension[] = [
-    EditorView.lineWrapping,
-    EditorView.editable.of(true),
-  ];
-  if (langExt) {
-    extensions.push(langExt);
-  }
+
+  // Create the comment decoration plugin
+  const commentPlugin = useMemo(() => {
+    return ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.decorations = createCommentDecorations(view, comments);
+        }
+
+        update(update: ViewUpdate) {
+          if (update.docChanged || update.viewportChanged) {
+            this.decorations = createCommentDecorations(update.view, comments);
+          }
+        }
+      },
+      { decorations: (v) => v.decorations }
+    );
+  }, [comments]);
+
+  // Create comment gutter
+  const commentGutter = useMemo(() => {
+    // Build a map of line number to comments that include that line
+    const commentsByLine = new Map<number, DiffComment[]>();
+    // Track which lines are the first line of at least one comment
+    const firstLines = new Set<number>();
+
+    for (const comment of comments) {
+      firstLines.add(comment.startLine);
+      // Add to all lines in the range
+      for (let lineNum = comment.startLine; lineNum <= comment.endLine; lineNum++) {
+        const existing = commentsByLine.get(lineNum) || [];
+        existing.push(comment);
+        commentsByLine.set(lineNum, existing);
+      }
+    }
+
+    return gutter({
+      class: 'cm-comment-gutter',
+      lineMarker: (view, line) => {
+        const lineNum = view.state.doc.lineAt(line.from).number;
+        const lineComments = commentsByLine.get(lineNum);
+        if (lineComments && lineComments.length > 0) {
+          return new CommentGutterMarker(lineComments, firstLines.has(lineNum));
+        }
+        return null;
+      },
+      domEventHandlers: {
+        click: (view, line, event) => {
+          const lineNum = view.state.doc.lineAt(line.from).number;
+          const lineComments = commentsByLine.get(lineNum);
+          if (lineComments && lineComments.length > 0) {
+            event.preventDefault();
+            event.stopPropagation();
+            setCommentView({
+              comments: lineComments,
+              position: { x: (event as MouseEvent).clientX, y: (event as MouseEvent).clientY },
+            });
+            return true;
+          }
+          return false;
+        },
+      },
+    });
+  }, [comments]);
+
+  // Track mouse position
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+    };
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => document.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  // Show floating button after selection ends (on mouseup)
+  const handleSelectionEnd = useCallback(() => {
+    if (!enableComments || !sessionId) return;
+
+    const view = editorRef.current?.view;
+    if (!view) return;
+
+    const selection = view.state.selection.main;
+    if (selection.empty) {
+      setFloatingButtonPos(null);
+      setCurrentSelection(null);
+      return;
+    }
+
+    const selectedText = view.state.sliceDoc(selection.from, selection.to);
+    if (!selectedText.trim()) {
+      setFloatingButtonPos(null);
+      setCurrentSelection(null);
+      return;
+    }
+
+    // Get line numbers
+    const startLine = view.state.doc.lineAt(selection.from).number;
+    const endLine = view.state.doc.lineAt(selection.to).number;
+
+    // Use mouse position for the floating button (where cursor is)
+    setCurrentSelection({ text: selectedText, startLine, endLine });
+    setFloatingButtonPos({ x: mousePositionRef.current.x, y: mousePositionRef.current.y });
+  }, [enableComments, sessionId]);
+
+  // Listen for mouseup to show floating button after selection ends
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper || !enableComments || !sessionId) return;
+
+    const handleMouseUp = (e: MouseEvent) => {
+      // Don't show if clicking on the floating button itself
+      if ((e.target as HTMLElement).closest('.floating-comment-btn')) {
+        return;
+      }
+      // Small delay to let selection finalize
+      setTimeout(handleSelectionEnd, 10);
+    };
+
+    // Clear selection state when clicking (new selection starts)
+    const handleMouseDown = (e: MouseEvent) => {
+      // Don't clear if clicking on the floating button
+      if ((e.target as HTMLElement).closest('.floating-comment-btn')) {
+        return;
+      }
+      setFloatingButtonPos(null);
+    };
+
+    wrapper.addEventListener('mouseup', handleMouseUp);
+    wrapper.addEventListener('mousedown', handleMouseDown);
+    return () => {
+      wrapper.removeEventListener('mouseup', handleMouseUp);
+      wrapper.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, [enableComments, sessionId, handleSelectionEnd]);
+
+  // Clear floating button when selection is cleared via keyboard
+  const selectionUpdateExtension = useMemo(() => {
+    return EditorView.updateListener.of((update) => {
+      if (update.selectionSet) {
+        const selection = update.state.selection.main;
+        if (selection.empty) {
+          setFloatingButtonPos(null);
+          setCurrentSelection(null);
+        }
+      }
+    });
+  }, []);
+
+  const extensions: Extension[] = useMemo(() => {
+    const exts: Extension[] = [
+      EditorView.editable.of(true),
+      EditorView.theme({
+        '&': { backgroundColor: 'hsl(var(--background)) !important' },
+        '.cm-gutters': { backgroundColor: 'hsl(var(--background)) !important', borderRight: 'none' },
+        // Comment gutter
+        '.cm-comment-gutter': {
+          width: '22px',
+          cursor: 'pointer',
+        },
+        '.cm-comment-gutter .cm-gutterElement': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '0',
+        },
+        // Marker styles - background color on the marker itself (indigo)
+        '.cm-comment-gutter-marker': {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          cursor: 'pointer',
+          backgroundColor: 'rgba(99, 102, 241, 0.2)',
+        },
+        '.cm-comment-gutter-marker:hover': {
+          backgroundColor: 'rgba(99, 102, 241, 0.35)',
+        },
+        // Comment line highlight with left border (indigo)
+        '.cm-comment-line': {
+          backgroundColor: 'rgba(99, 102, 241, 0.15) !important',
+          borderLeft: '3px solid rgba(99, 102, 241, 0.6)',
+          marginLeft: '-3px',
+          paddingLeft: '3px',
+        },
+      }),
+      commentGutter,
+      commentPlugin,
+      selectionUpdateExtension,
+    ];
+    if (wrapEnabled) {
+      exts.push(EditorView.lineWrapping);
+    }
+    if (langExt) {
+      exts.push(langExt);
+    }
+    return exts;
+  }, [langExt, wrapEnabled, commentGutter, commentPlugin, selectionUpdateExtension]);
 
   // Calculate diff stats when dirty
   const diffStats = useMemo(() => {
     if (!isDirty) return null;
-    
-    // Simple line-based diff for stats
+
     const originalLines = originalContent.split('\n');
     const currentLines = content.split('\n');
-    
+
     let additions = 0;
     let deletions = 0;
-    
-    // Simple comparison - count different lines
+
     const maxLen = Math.max(originalLines.length, currentLines.length);
     for (let i = 0; i < maxLen; i++) {
       const origLine = originalLines[i];
       const currLine = currentLines[i];
-      
+
       if (origLine === undefined && currLine !== undefined) {
         additions++;
       } else if (origLine !== undefined && currLine === undefined) {
         deletions++;
       } else if (origLine !== currLine) {
-        // Line changed - count as both addition and deletion
         additions++;
         deletions++;
       }
     }
-    
+
     return { additions, deletions };
   }, [isDirty, content, originalContent]);
 
-  // Handle Cmd/Ctrl+S keyboard shortcut
+  // Handle Cmd+I to open comment popover
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper || !enableComments || !sessionId) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Check for Cmd+I (Mac) or Ctrl+I (Windows/Linux)
+      if ((e.metaKey || e.ctrlKey) && e.key === 'i') {
+        if (!currentSelection || !floatingButtonPos) return;
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        setTextSelection({
+          ...currentSelection,
+          position: floatingButtonPos,
+        });
+        setFloatingButtonPos(null);
+      }
+    };
+
+    wrapper.addEventListener('keydown', handleKeyDown, true);
+    return () => wrapper.removeEventListener('keydown', handleKeyDown, true);
+  }, [enableComments, sessionId, currentSelection, floatingButtonPos]);
+
+  // Handle Cmd/Ctrl+S keyboard shortcut and Escape
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if ((e.metaKey || e.ctrlKey) && e.key === 's') {
@@ -78,11 +413,16 @@ export function FileEditorContent({
           onSave();
         }
       }
+      // Escape to close popovers
+      if (e.key === 'Escape') {
+        if (textSelection) setTextSelection(null);
+        if (commentView) setCommentView(null);
+      }
     };
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isDirty, isSaving, onSave]);
+  }, [isDirty, isSaving, onSave, textSelection, commentView]);
 
   const handleChange = useCallback(
     (value: string) => {
@@ -91,11 +431,91 @@ export function FileEditorContent({
     [onChange]
   );
 
+  // Open comment popover from floating button
+  const handleFloatingButtonClick = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!currentSelection || !floatingButtonPos) return;
+
+    setTextSelection({
+      ...currentSelection,
+      position: floatingButtonPos,
+    });
+    setFloatingButtonPos(null);
+  }, [currentSelection, floatingButtonPos]);
+
+  // Submit comment
+  const handleCommentSubmit = useCallback((annotation: string) => {
+    if (!textSelection || !sessionId) return;
+
+    const { text, startLine, endLine } = textSelection;
+
+    const comment: DiffComment = {
+      id: `${path}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      sessionId,
+      filePath: path,
+      startLine,
+      endLine,
+      side: 'additions',
+      codeContent: text,
+      annotation,
+      createdAt: new Date().toISOString(),
+      status: 'pending',
+    };
+
+    addComment(comment);
+    setTextSelection(null);
+
+    // Clear selection in editor
+    const view = editorRef.current?.view;
+    if (view) {
+      view.dispatch({
+        selection: { anchor: view.state.selection.main.head },
+      });
+    }
+
+    toast({
+      title: 'Comment added',
+      description: 'Your comment will be sent with your next message.',
+    });
+  }, [textSelection, sessionId, path, addComment, toast]);
+
+  // Close popover
+  const handlePopoverClose = useCallback(() => {
+    setTextSelection(null);
+  }, []);
+
+  // Delete comment
+  const handleDeleteComment = useCallback((commentId: string) => {
+    if (!sessionId) return;
+    removeComment(sessionId, path, commentId);
+
+    // Close the view if no more comments
+    if (commentView && commentView.comments.length <= 1) {
+      setCommentView(null);
+    } else if (commentView) {
+      setCommentView({
+        ...commentView,
+        comments: commentView.comments.filter(c => c.id !== commentId),
+      });
+    }
+
+    toast({
+      title: 'Comment deleted',
+    });
+  }, [sessionId, path, removeComment, commentView, toast]);
+
+  // Close comment view
+  const handleCommentViewClose = useCallback(() => {
+    setCommentView(null);
+  }, []);
+
   return (
-    <div className="flex h-full flex-col">
+    <div ref={wrapperRef} className="flex h-full flex-col bg-background rounded-lg">
       {/* Editor header with save button */}
-      <div className="flex items-center justify-between border-b border-border bg-muted/30 px-4 py-2">
-        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <div className="flex items-center justify-between px-2 border-foreground/10 border-b">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
           <span className="font-mono">{path}</span>
           {isDirty && diffStats && (
             <span className="text-xs text-yellow-500">
@@ -103,33 +523,70 @@ export function FileEditorContent({
             </span>
           )}
         </div>
-        <Button
-          size="sm"
-          variant="default"
-          onClick={onSave}
-          disabled={!isDirty || isSaving}
-          className="cursor-pointer gap-2"
-        >
-          {isSaving ? (
-            <>
-              <IconLoader2 className="h-4 w-4 animate-spin" />
-              Saving...
-            </>
-          ) : (
-            <>
-              <IconDeviceFloppy className="h-4 w-4" />
-              Save
-              <span className="text-xs text-muted-foreground">
-                ({navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}+S)
-              </span>
-            </>
+        <div className="flex items-center gap-1">
+          {enableComments && sessionId && comments.length > 0 && (
+            <div className="flex items-center gap-1 px-2 py-1 text-xs text-primary">
+              <IconMessagePlus className="h-3.5 w-3.5" />
+              <span>{comments.length} comment{comments.length > 1 ? 's' : ''}</span>
+            </div>
           )}
-        </Button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => setWrapEnabled(!wrapEnabled)}
+                className={`h-8 w-8 p-0 cursor-pointer ${wrapEnabled ? 'text-foreground' : 'text-muted-foreground'}`}
+              >
+                {wrapEnabled ? <IconTextWrap className="h-4 w-4" /> : <IconTextWrapDisabled className="h-4 w-4" />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{wrapEnabled ? 'Disable word wrap' : 'Enable word wrap'}</TooltipContent>
+          </Tooltip>
+          {onDelete && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={onDelete}
+                  className="h-8 w-8 p-0 cursor-pointer text-muted-foreground hover:text-destructive"
+                >
+                  <IconTrash className="h-4 w-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Delete file</TooltipContent>
+            </Tooltip>
+          )}
+          <Button
+            size="sm"
+            variant="default"
+            onClick={onSave}
+            disabled={!isDirty || isSaving}
+            className="cursor-pointer gap-2"
+          >
+            {isSaving ? (
+              <>
+                <IconLoader2 className="h-4 w-4 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <IconDeviceFloppy className="h-4 w-4" />
+                Save
+                <span className="text-xs text-muted-foreground">
+                  ({navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}+S)
+                </span>
+              </>
+            )}
+          </Button>
+        </div>
       </div>
 
       {/* CodeMirror editor */}
-      <div className="flex-1 overflow-hidden">
+      <div className="flex-1 overflow-hidden relative">
         <CodeMirror
+          ref={editorRef}
           value={content}
           height="100%"
           theme={vscodeDark}
@@ -140,11 +597,50 @@ export function FileEditorContent({
             foldGutter: true,
             highlightActiveLine: true,
             highlightSelectionMatches: true,
+            searchKeymap: true,
           }}
-          className="h-full overflow-auto text-sm"
+          className="h-full overflow-auto text-xs"
         />
+
+        {/* Floating "Add comment" button when text is selected */}
+        {floatingButtonPos && !textSelection && (
+          <Button
+            size="sm"
+            variant="secondary"
+            className="floating-comment-btn fixed z-50 gap-1.5 shadow-lg animate-in fade-in-0 zoom-in-95 duration-100 cursor-pointer"
+            style={{
+              left: floatingButtonPos.x + 8,
+              top: floatingButtonPos.y + 8,
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={handleFloatingButtonClick}
+          >
+            <IconMessagePlus className="h-3.5 w-3.5" />
+            Comment
+          </Button>
+        )}
+
+        {/* Comment popover for adding new comment */}
+        {textSelection && (
+          <EditorCommentPopover
+            selectedText={textSelection.text}
+            lineRange={{ start: textSelection.startLine, end: textSelection.endLine }}
+            position={textSelection.position}
+            onSubmit={handleCommentSubmit}
+            onClose={handlePopoverClose}
+          />
+        )}
+
+        {/* Comment view popover for viewing/deleting existing comments */}
+        {commentView && (
+          <CommentViewPopover
+            comments={commentView.comments}
+            position={commentView.position}
+            onDelete={handleDeleteComment}
+            onClose={handleCommentViewClose}
+          />
+        )}
       </div>
     </div>
   );
 }
-
diff --git a/apps/web/components/task/file-viewer-content.tsx b/apps/web/components/task/file-viewer-content.tsx
index 5aa0a365cd..9c2e2469cd 100644
--- a/apps/web/components/task/file-viewer-content.tsx
+++ b/apps/web/components/task/file-viewer-content.tsx
@@ -34,7 +34,7 @@ export function FileViewerContent({ path, content }: FileViewerContentProps) {
         highlightActiveLine: false,
         highlightSelectionMatches: true,
       }}
-      className="h-full overflow-auto text-sm"
+      className="h-full overflow-auto text-xs"
     />
   );
 }
diff --git a/apps/web/components/task/markdown-editor.tsx b/apps/web/components/task/markdown-editor.tsx
index f8bffa04ef..c8e386b1e0 100644
--- a/apps/web/components/task/markdown-editor.tsx
+++ b/apps/web/components/task/markdown-editor.tsx
@@ -30,6 +30,8 @@ type MilkdownEditorProps = {
   onChange: (value: string) => void;
   placeholder?: string;
   onSelectionChange?: (selection: TextSelection | null) => void;
+  /** Called when selection ends (mouseup) with selected text - for showing floating button */
+  onSelectionEnd?: (selection: TextSelection | null) => void;
   comments?: CommentHighlight[];
   onCommentClick?: (id: string, position: { x: number; y: number }) => void;
 };
@@ -349,6 +351,7 @@ function MilkdownEditorInner({
   onChange,
   placeholder = 'Start typing...',
   onSelectionChange,
+  onSelectionEnd,
   comments = [],
   onCommentClick,
 }: MilkdownEditorProps) {
@@ -359,6 +362,7 @@ function MilkdownEditorInner({
   const placeholderRef = useRef(placeholder);
   const onChangeRef = useRef(onChange);
   const onSelectionChangeRef = useRef(onSelectionChange);
+  const onSelectionEndRef = useRef(onSelectionEnd);
   const commentsRef = useRef(comments);
   const onCommentClickRef = useRef(onCommentClick);
 
@@ -371,6 +375,10 @@ function MilkdownEditorInner({
     onSelectionChangeRef.current = onSelectionChange;
   }, [onSelectionChange]);
 
+  useEffect(() => {
+    onSelectionEndRef.current = onSelectionEnd;
+  }, [onSelectionEnd]);
+
   useEffect(() => {
     commentsRef.current = comments;
   }, [comments]);
@@ -399,6 +407,57 @@ function MilkdownEditorInner({
     return () => wrapper.removeEventListener('click', handleClick);
   }, []);
 
+  // Handle mouseup to show floating button when selection ends
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+
+    const handleMouseUp = (e: MouseEvent) => {
+      if (!onSelectionEndRef.current) return;
+
+      // Capture mouse position immediately
+      const mouseX = e.clientX;
+      const mouseY = e.clientY;
+
+      // Small delay to let selection finalize
+      setTimeout(() => {
+        const selection = window.getSelection();
+        if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+          onSelectionEndRef.current?.(null);
+          return;
+        }
+
+        const selectedText = selection.toString().trim();
+        if (selectedText.length < MIN_COMMENT_TEXT_LENGTH) {
+          onSelectionEndRef.current?.(null);
+          return;
+        }
+
+        // Use mouse position (where cursor is) instead of selection end
+        onSelectionEndRef.current?.({
+          text: selectedText,
+          position: { x: mouseX, y: mouseY },
+        });
+      }, 10);
+    };
+
+    const handleMouseDown = (e: MouseEvent) => {
+      // Don't clear if clicking on the floating button
+      if ((e.target as HTMLElement).closest('.floating-comment-btn')) {
+        return;
+      }
+      // Clear selection state when starting new selection
+      onSelectionEndRef.current?.(null);
+    };
+
+    wrapper.addEventListener('mouseup', handleMouseUp);
+    wrapper.addEventListener('mousedown', handleMouseDown);
+    return () => {
+      wrapper.removeEventListener('mouseup', handleMouseUp);
+      wrapper.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, []);
+
   // Handle Cmd+I to trigger selection popover (overrides italic formatting)
   useEffect(() => {
     const wrapper = wrapperRef.current;
diff --git a/apps/web/components/task/mobile/session-mobile-layout.tsx b/apps/web/components/task/mobile/session-mobile-layout.tsx
index ccdd073f27..fb49da4551 100644
--- a/apps/web/components/task/mobile/session-mobile-layout.tsx
+++ b/apps/web/components/task/mobile/session-mobile-layout.tsx
@@ -107,7 +107,6 @@ export const SessionMobileLayout = memo(function SessionMobileLayout({
                 <TaskChatPanel
                   sessionId={sessionId}
                   onOpenFile={handleOpenFileFromChat}
-                  onSelectDiff={handleSelectDiffAndSwitchPanel}
                 />
               )
             ) : (
diff --git a/apps/web/components/task/plan-selection-popover.tsx b/apps/web/components/task/plan-selection-popover.tsx
index 61ad34e22d..27f561572b 100644
--- a/apps/web/components/task/plan-selection-popover.tsx
+++ b/apps/web/components/task/plan-selection-popover.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useCallback, useRef, useEffect } from 'react';
-import { IconPlus } from '@tabler/icons-react';
+import { IconPlus, IconTrash } from '@tabler/icons-react';
 import { Button } from '@kandev/ui/button';
 import { Textarea } from '@kandev/ui/textarea';
 import { cn } from '@/lib/utils';
@@ -17,6 +17,7 @@ type PlanSelectionPopoverProps = {
   onAdd: (comment: string, selectedText: string) => void;
   onClose: () => void;
   editingComment?: string; // Pre-fill if editing existing comment
+  onDelete?: () => void; // Delete callback when editing existing comment
 };
 
 export function PlanSelectionPopover({
@@ -25,6 +26,7 @@ export function PlanSelectionPopover({
   onAdd,
   onClose,
   editingComment,
+  onDelete,
 }: PlanSelectionPopoverProps) {
   const [comment, setComment] = useState(editingComment || '');
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -134,14 +136,29 @@ export function PlanSelectionPopover({
 
       {/* Actions */}
       <div className="mt-3 flex items-center justify-between">
-        <span className="text-xs text-muted-foreground/70">
-          ⌘+Enter to add
-        </span>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground/70">
+            ⌘+Enter to {editingComment ? 'update' : 'add'}
+          </span>
+          {editingComment && onDelete && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => {
+                onDelete();
+                onClose();
+              }}
+              className="h-7 px-2 text-muted-foreground hover:text-destructive cursor-pointer"
+            >
+              <IconTrash className="h-3.5 w-3.5" />
+            </Button>
+          )}
+        </div>
         <Button
           size="sm"
           onClick={handleSubmit}
           disabled={isDisabled}
-          className="gap-1.5"
+          className="gap-1.5 cursor-pointer"
         >
           <IconPlus className="h-3.5 w-3.5" />
           {editingComment ? 'Update' : 'Add comment'}
diff --git a/apps/web/components/task/task-center-panel.tsx b/apps/web/components/task/task-center-panel.tsx
index 718ae83875..639c9c3bdd 100644
--- a/apps/web/components/task/task-center-panel.tsx
+++ b/apps/web/components/task/task-center-panel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { memo, useCallback, useState, useEffect, useMemo } from 'react';
+import { memo, useCallback, useState, useEffect, useMemo, useRef } from 'react';
 import { IconSparkles, IconCheck, IconChevronDown, IconX } from '@tabler/icons-react';
 import { TabsContent } from '@kandev/ui/tabs';
 import { Button } from '@kandev/ui/button';
@@ -18,13 +18,12 @@ import { TaskPlanPanel } from './task-plan-panel';
 import { FileEditorContent } from './file-editor-content';
 import { PassthroughTerminal } from './passthrough-terminal';
 import type { OpenFileTab, FileContentResponse } from '@/lib/types/backend';
-import { FILE_EXTENSION_COLORS } from '@/lib/types/backend';
 import { useAppStore } from '@/components/state-provider';
 import { SessionTabs, type SessionTab } from '@/components/session-tabs';
 import { approveSessionAction } from '@/app/actions/workspaces';
 import { getWebSocketClient } from '@/lib/ws/connection';
-import { requestFileContent, updateFileContent } from '@/lib/ws/workspace-files';
-import { getPlanLastSeen, setPlanLastSeen, getCenterPanelTab, setCenterPanelTab } from '@/lib/local-storage';
+import { requestFileContent, updateFileContent, deleteFile } from '@/lib/ws/workspace-files';
+import { getPlanLastSeen, setPlanLastSeen, getOpenFileTabs, setOpenFileTabs as saveOpenFileTabs, getActiveTabForSession, setActiveTabForSession } from '@/lib/local-storage';
 import { useSessionGitStatus } from '@/hooks/domains/session/use-session-git-status';
 import { useSessionCommits } from '@/hooks/domains/session/use-session-commits';
 import { generateUnifiedDiff, calculateHash } from '@/lib/utils/file-diff';
@@ -37,6 +36,7 @@ type TaskCenterPanelProps = {
   openFileRequest: OpenFileTab | null;
   onDiffHandled: () => void;
   onFileOpenHandled: () => void;
+  onActiveFileChange?: (filePath: string | null) => void;
   sessionId?: string | null;
 };
 
@@ -45,6 +45,7 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
   openFileRequest,
   onDiffHandled,
   onFileOpenHandled,
+  onActiveFileChange,
   sessionId = null,
 }: TaskCenterPanelProps) {
   const activeTaskId = useAppStore((state) => state.tasks.activeTaskId);
@@ -114,11 +115,17 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
     return hasUncommittedChanges || hasCommits;
   }, [gitStatus, commits]);
 
-  // Initialize tab from localStorage, defaulting to 'chat'
-  // If saved tab is 'changes' but there are no changes, fall back to 'chat'
+  // Initialize tab - restored from sessionStorage or default to 'chat'
   const [leftTab, setLeftTab] = useState(() => {
-    const savedTab = getCenterPanelTab('chat');
-    return savedTab;
+    // Try to restore from session-specific storage on initial render
+    if (typeof window !== 'undefined' && activeSessionId) {
+      const savedTab = getActiveTabForSession(activeSessionId, 'chat');
+      // Only return non-file tabs synchronously, file tabs need async content loading
+      if (savedTab === 'chat' || savedTab === 'plan' || savedTab === 'changes') {
+        return savedTab;
+      }
+    }
+    return 'chat';
   });
 
   // If current tab is 'changes' but there are no changes, switch to 'chat'
@@ -143,8 +150,171 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
   const [selectedDiff, setSelectedDiff] = useState<SelectedDiff | null>(null);
   const [openFileTabs, setOpenFileTabs] = useState<OpenFileTab[]>([]);
   const [savingFiles, setSavingFiles] = useState<Set<string>>(new Set());
+  const restoredTabsRef = useRef<string | null>(null);
+  const restorationInProgressRef = useRef<boolean>(false);
   const { toast } = useToast();
 
+  // Save current active tab for the current session before switching
+  const prevSessionRef = useRef<string | null>(null);
+  useEffect(() => {
+    // On unmount or before session change, save the current tab for the previous session
+    return () => {
+      if (prevSessionRef.current && leftTab) {
+        setActiveTabForSession(prevSessionRef.current, leftTab);
+      }
+    };
+  }, [leftTab]);
+
+  // Restore file tabs and active tab from sessionStorage on mount/session change
+  useEffect(() => {
+    if (!activeSessionId) return;
+
+    // When session changes, always clear existing tabs first and reset state
+    if (restoredTabsRef.current !== activeSessionId) {
+      // Save the active tab for the OLD session before switching
+      if (prevSessionRef.current && prevSessionRef.current !== activeSessionId) {
+        setActiveTabForSession(prevSessionRef.current, leftTab);
+      }
+
+      restoredTabsRef.current = activeSessionId;
+      prevSessionRef.current = activeSessionId;
+      restorationInProgressRef.current = false;
+
+      // Clear existing file tabs immediately when session changes
+      setOpenFileTabs([]);
+    } else if (restorationInProgressRef.current) {
+      // Already restoring for this session
+      return;
+    } else {
+      // Already restored for this session
+      return;
+    }
+
+    const savedTabs = getOpenFileTabs(activeSessionId);
+    const savedActiveTab = getActiveTabForSession(activeSessionId, 'chat');
+
+    // If no file tabs to load, just restore the active tab
+    if (savedTabs.length === 0) {
+      // Only set if it's a valid non-file tab
+      if (savedActiveTab === 'chat' || savedActiveTab === 'plan' || savedActiveTab === 'changes') {
+        setLeftTab(savedActiveTab);
+      } else {
+        setLeftTab('chat');
+      }
+      return;
+    }
+
+    // Mark restoration as in progress
+    restorationInProgressRef.current = true;
+
+    // Load content for each saved tab with retry for WebSocket client
+    const loadTabs = async (retryCount = 0): Promise<void> => {
+      const maxRetries = 5;
+      const retryDelay = 200;
+
+      const client = getWebSocketClient();
+      if (!client) {
+        if (retryCount < maxRetries) {
+          setTimeout(() => loadTabs(retryCount + 1), retryDelay);
+          return;
+        }
+        restorationInProgressRef.current = false;
+        return;
+      }
+
+      // Verify we're still restoring for the same session
+      if (restoredTabsRef.current !== activeSessionId) {
+        restorationInProgressRef.current = false;
+        return;
+      }
+
+      const loadedTabs: OpenFileTab[] = [];
+      for (const savedTab of savedTabs) {
+        try {
+          const response = await requestFileContent(client, activeSessionId, savedTab.path);
+          const hash = await calculateHash(response.content);
+          loadedTabs.push({
+            path: savedTab.path,
+            name: savedTab.name,
+            content: response.content,
+            originalContent: response.content,
+            originalHash: hash,
+            isDirty: false,
+          });
+        } catch {
+          // Failed to restore tab, skip it
+        }
+      }
+
+      // Verify session hasn't changed
+      if (restoredTabsRef.current !== activeSessionId) {
+        restorationInProgressRef.current = false;
+        return;
+      }
+
+      if (loadedTabs.length > 0) {
+        setOpenFileTabs(loadedTabs);
+
+        // Restore active tab - check if it's a file tab that was loaded
+        if (savedActiveTab.startsWith('file:')) {
+          const filePath = savedActiveTab.replace('file:', '');
+          const tabExists = loadedTabs.some(t => t.path === filePath);
+          if (tabExists) {
+            // Use setTimeout to ensure React has processed setOpenFileTabs
+            setTimeout(() => {
+              setLeftTab(savedActiveTab);
+              restorationInProgressRef.current = false;
+            }, 0);
+          } else {
+            setLeftTab('chat');
+            restorationInProgressRef.current = false;
+          }
+        } else {
+          setLeftTab(savedActiveTab);
+          restorationInProgressRef.current = false;
+        }
+      } else {
+        // No tabs could be loaded, fall back to non-file tab
+        if (savedActiveTab === 'chat' || savedActiveTab === 'plan' || savedActiveTab === 'changes') {
+          setLeftTab(savedActiveTab);
+        } else {
+          setLeftTab('chat');
+        }
+        restorationInProgressRef.current = false;
+      }
+    };
+
+    void loadTabs();
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- leftTab is intentionally excluded to prevent re-running on tab changes
+  }, [activeSessionId]);
+
+  // Persist open file tabs to sessionStorage when they change
+  useEffect(() => {
+    if (!activeSessionId) return;
+    const tabsToSave = openFileTabs.map(({ path, name }) => ({ path, name }));
+    saveOpenFileTabs(activeSessionId, tabsToSave);
+  }, [activeSessionId, openFileTabs]);
+
+  // Persist active tab whenever it changes (not just via handleTabChange)
+  useEffect(() => {
+    if (!activeSessionId) return;
+    // Skip during restoration to avoid overwriting with intermediate values
+    if (restorationInProgressRef.current) {
+      return;
+    }
+    setActiveTabForSession(activeSessionId, leftTab);
+  }, [activeSessionId, leftTab]);
+
+  // Notify parent when the active file changes
+  useEffect(() => {
+    if (leftTab.startsWith('file:')) {
+      const filePath = leftTab.replace('file:', '');
+      onActiveFileChange?.(filePath);
+    } else {
+      onActiveFileChange?.(null);
+    }
+  }, [leftTab, onActiveFileChange]);
+
   // Track plan updates for notification dot
   const plan = useAppStore((state) =>
     activeTaskId ? state.taskPlans.byTaskId[activeTaskId] : null
@@ -165,11 +335,11 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
       setPlanLastSeen(activeTaskId, plan.updated_at);
     }
     setLeftTab(tab);
-    // Persist tab selection (only for main tabs, not file tabs)
-    if (tab === 'plan' || tab === 'changes' || tab === 'chat') {
-      setCenterPanelTab(tab);
+    // Persist tab selection per-session (for all tabs including file tabs)
+    if (activeSessionId) {
+      setActiveTabForSession(activeSessionId, tab);
     }
-  }, [activeTaskId, plan]);
+  }, [activeTaskId, activeSessionId, plan]);
 
   // Handle external diff selection
   useEffect(() => {
@@ -314,6 +484,33 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
     }
   }, [openFileTabs, activeSessionId, toast]);
 
+  // Handler for deleting file from editor
+  const handleFileDelete = useCallback(async (path: string) => {
+    const client = getWebSocketClient();
+    if (!client || !activeSessionId) return;
+
+    try {
+      const response = await deleteFile(client, activeSessionId, path);
+      if (response.success) {
+        // Close the tab
+        handleCloseFileTab(path);
+      } else {
+        toast({
+          title: 'Delete failed',
+          description: response.error || 'Failed to delete file',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      console.error('Failed to delete file:', error);
+      toast({
+        title: 'Delete failed',
+        description: error instanceof Error ? error.message : 'An error occurred while deleting the file',
+        variant: 'error',
+      });
+    }
+  }, [activeSessionId, handleCloseFileTab, toast]);
+
   const tabs: SessionTab[] = useMemo(() => {
     const staticTabs: SessionTab[] = [
       {
@@ -332,12 +529,10 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
     ];
 
     const fileTabs: SessionTab[] = openFileTabs.map((tab) => {
-      const ext = tab.name.split('.').pop()?.toLowerCase() || '';
-      const dotColor = tab.isDirty ? 'bg-yellow-500' : (FILE_EXTENSION_COLORS[ext] || 'bg-muted-foreground');
       return {
         id: `file:${tab.path}`,
         label: tab.isDirty ? `${tab.name} *` : tab.name,
-        icon: <span className={`h-2 w-2 rounded-full ${dotColor}`} />,
+        icon: tab.isDirty ? <span className="h-2 w-2 rounded-full bg-yellow-500" /> : undefined,
         closable: true,
         onClose: (e) => {
           e.stopPropagation();
@@ -427,9 +622,9 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
                 onOpenFile={handleOpenFileFromChat}
                 showRequestChangesTooltip={showRequestChangesTooltip}
                 onRequestChangesTooltipDismiss={() => setShowRequestChangesTooltip(false)}
-                onSelectDiff={(path) => {
-                  setSelectedDiff({ path });
-                  setLeftTab('changes');
+                onOpenFileAtLine={(filePath) => {
+                  // Open the file in editor tab (or switch to it)
+                  handleOpenFileFromChat(filePath);
                 }}
               />
             )
@@ -441,15 +636,18 @@ export const TaskCenterPanel = memo(function TaskCenterPanel({
         </TabsContent>
 
         {openFileTabs.map((tab) => (
-          <TabsContent key={tab.path} value={`file:${tab.path}`} className="mt-3 flex-1 min-h-0">
+          <TabsContent key={tab.path} value={`file:${tab.path}`} className="flex-1 min-h-0">
             <FileEditorContent
               path={tab.path}
               content={tab.content}
               originalContent={tab.originalContent}
               isDirty={tab.isDirty}
               isSaving={savingFiles.has(tab.path)}
+              sessionId={activeSessionId || undefined}
+              enableComments={!!activeSessionId}
               onChange={(newContent) => handleFileChange(tab.path, newContent)}
               onSave={() => handleFileSave(tab.path)}
+              onDelete={() => handleFileDelete(tab.path)}
             />
           </TabsContent>
         ))}
diff --git a/apps/web/components/task/task-chat-panel.tsx b/apps/web/components/task/task-chat-panel.tsx
index 6db677f3e9..79f1d32791 100644
--- a/apps/web/components/task/task-chat-panel.tsx
+++ b/apps/web/components/task/task-chat-panel.tsx
@@ -24,8 +24,8 @@ type TaskChatPanelProps = {
   onOpenFile?: (path: string) => void;
   showRequestChangesTooltip?: boolean;
   onRequestChangesTooltipDismiss?: () => void;
-  /** Callback to select a file in the changes panel (for jump-to-line) */
-  onSelectDiff?: (path: string) => void;
+  /** Callback to open a file at a specific line (for comment clicks) */
+  onOpenFileAtLine?: (filePath: string) => void;
 };
 
 export const TaskChatPanel = memo(function TaskChatPanel({
@@ -34,7 +34,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
   onOpenFile,
   showRequestChangesTooltip = false,
   onRequestChangesTooltipDismiss,
-  onSelectDiff,
+  onOpenFileAtLine,
 }: TaskChatPanelProps) {
   const [planModeEnabled, setPlanModeEnabled] = useState(false);
   const [isSending, setIsSending] = useState(false);
@@ -211,7 +211,7 @@ export const TaskChatPanel = memo(function TaskChatPanel({
           pendingCommentsByFile={pendingCommentsByFile}
           onRemoveCommentFile={handleRemoveCommentFile}
           onRemoveComment={handleRemoveComment}
-          onCommentClick={onSelectDiff ? (comment) => onSelectDiff(comment.filePath) : undefined}
+          onCommentClick={onOpenFileAtLine ? (comment) => onOpenFileAtLine(comment.filePath) : undefined}
         />
       </div>
     </div>
diff --git a/apps/web/components/task/task-files-panel.tsx b/apps/web/components/task/task-files-panel.tsx
index 38ed15c733..0d4d23b1f8 100644
--- a/apps/web/components/task/task-files-panel.tsx
+++ b/apps/web/components/task/task-files-panel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { memo, useMemo, useState, useCallback } from 'react';
+import { memo, useMemo, useState, useCallback, useEffect, useRef } from 'react';
 import {
   IconArrowBackUp,
   IconExternalLink,
@@ -11,6 +11,7 @@ import {
   IconChevronRight,
   IconGitCommit,
   IconLoader2,
+  IconSearch,
 } from '@tabler/icons-react';
 
 import { TabsContent } from '@kandev/ui/tabs';
@@ -34,15 +35,23 @@ import { useSessionGitStatus } from '@/hooks/domains/session/use-session-git-sta
 import { useSessionCommits } from '@/hooks/domains/session/use-session-commits';
 import { useGitOperations } from '@/hooks/use-git-operations';
 import { getWebSocketClient } from '@/lib/ws/connection';
+import { deleteFile } from '@/lib/ws/workspace-files';
 import type { FileInfo } from '@/lib/state/store';
 import { FileBrowser } from '@/components/task/file-browser';
 import { SessionTabs, type SessionTab } from '@/components/session-tabs';
 import { useToast } from '@/components/toast-provider';
 import type { OpenFileTab } from '@/lib/types/backend';
+import {
+  getFilesPanelTab,
+  setFilesPanelTab,
+  hasUserSelectedFilesPanelTab,
+  setUserSelectedFilesPanelTab,
+} from '@/lib/local-storage';
 
 type TaskFilesPanelProps = {
   onSelectDiff: (path: string, content?: string) => void;
   onOpenFile: (file: OpenFileTab) => void;
+  activeFilePath?: string | null;
 };
 
 
@@ -92,10 +101,11 @@ const splitPath = (path: string) => {
   };
 };
 
-const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }: TaskFilesPanelProps) {
+const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile, activeFilePath }: TaskFilesPanelProps) {
   const [topTab, setTopTab] = useState<'diff' | 'files'>('diff');
   const [showDiscardDialog, setShowDiscardDialog] = useState(false);
   const [fileToDiscard, setFileToDiscard] = useState<string | null>(null);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const activeSessionId = useAppStore((state) => state.tasks.activeSessionId);
   const gitStatus = useSessionGitStatus(activeSessionId);
   const { commits } = useSessionCommits(activeSessionId ?? null);
@@ -103,6 +113,14 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }
   const gitOps = useGitOperations(activeSessionId ?? null);
   const { toast } = useToast();
 
+  // Track if we've initialized the tab for this session
+  const hasInitializedTabRef = useRef<string | null>(null);
+
+  // Close search when switching tabs
+  useEffect(() => {
+    setIsSearchOpen(false);
+  }, [topTab]);
+
   // State for commit diffs
   const [expandedCommit, setExpandedCommit] = useState<string | null>(null);
   const [commitDiffs, setCommitDiffs] = useState<Record<string, Record<string, FileInfo>>>({});
@@ -156,13 +174,7 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }
 
     try {
       const result = await gitOps.discard([fileToDiscard]);
-      if (result.success) {
-        toast({
-          title: 'Changes discarded',
-          description: `Successfully discarded changes to ${fileToDiscard}`,
-          variant: 'success',
-        });
-      } else {
+      if (!result.success) {
         toast({
           title: 'Failed to discard changes',
           description: result.error || 'An unknown error occurred',
@@ -181,6 +193,29 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }
     }
   }, [fileToDiscard, gitOps, toast]);
 
+  // Handle delete file
+  const handleDeleteFile = useCallback(async (path: string) => {
+    const client = getWebSocketClient();
+    if (!client || !activeSessionId) return;
+
+    try {
+      const response = await deleteFile(client, activeSessionId, path);
+      if (!response.success) {
+        toast({
+          title: 'Failed to delete file',
+          description: response.error || 'An unknown error occurred',
+          variant: 'error',
+        });
+      }
+    } catch (error) {
+      toast({
+        title: 'Failed to delete file',
+        description: error instanceof Error ? error.message : 'An unknown error occurred',
+        variant: 'error',
+      });
+    }
+  }, [activeSessionId, toast]);
+
   // Convert git status files to array for display
   const changedFiles = useMemo(() => {
     if (!gitStatus?.files || Object.keys(gitStatus.files).length === 0) {
@@ -196,6 +231,36 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }
     }));
   }, [gitStatus]);
 
+  // Smart tab selection: restore user preference or auto-select based on changes
+  useEffect(() => {
+    if (!activeSessionId) return;
+
+    // Only initialize once per session
+    if (hasInitializedTabRef.current === activeSessionId) return;
+    hasInitializedTabRef.current = activeSessionId;
+
+    // If user has previously selected a tab for this session, restore it
+    if (hasUserSelectedFilesPanelTab(activeSessionId)) {
+      const savedTab = getFilesPanelTab(activeSessionId, 'diff');
+      setTopTab(savedTab);
+      return;
+    }
+
+    // Auto-select based on whether there are changes
+    const hasChanges = changedFiles.length > 0 || commits.length > 0;
+    const defaultTab = hasChanges ? 'diff' : 'files';
+    setTopTab(defaultTab);
+  }, [activeSessionId, changedFiles.length, commits.length]);
+
+  // Handle tab change - save preference and mark as user-selected
+  const handleTabChange = useCallback((tab: 'diff' | 'files') => {
+    setTopTab(tab);
+    if (activeSessionId) {
+      setFilesPanelTab(activeSessionId, tab);
+      setUserSelectedFilesPanelTab(activeSessionId);
+    }
+  }, [activeSessionId]);
+
   const tabs: SessionTab[] = [
     {
       id: 'diff',
@@ -207,13 +272,36 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }
     },
   ];
 
+  // Contextual buttons based on active tab
+  const tabRightContent = useMemo(() => {
+    if (topTab === 'files') {
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              className="text-muted-foreground hover:text-foreground cursor-pointer"
+              onClick={() => setIsSearchOpen(true)}
+            >
+              <IconSearch className="h-3.5 w-3.5" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Search files</TooltipContent>
+        </Tooltip>
+      );
+    }
+    // No contextual buttons for diff tab (for now)
+    return null;
+  }, [topTab]);
+
   return (
     <SessionPanel borderSide="left">
       <SessionTabs
         tabs={tabs}
         activeTab={topTab}
-        onTabChange={(value) => setTopTab(value as 'diff' | 'files')}
+        onTabChange={(value) => handleTabChange(value as 'diff' | 'files')}
         className="flex-1 min-h-0"
+        rightContent={tabRightContent}
       >
         <TabsContent value="diff" className="flex-1 min-h-0">
           <SessionPanelContent>
@@ -401,10 +489,17 @@ const TaskFilesPanel = memo(function TaskFilesPanel({ onSelectDiff, onOpenFile }
             </div>
           </SessionPanelContent>
         </TabsContent>
-        <TabsContent value="files" className="mt-3 flex-1 min-h-0">
+        <TabsContent value="files" className="flex-1 min-h-0">
           <SessionPanelContent>
             {activeSessionId ? (
-              <FileBrowser sessionId={activeSessionId} onOpenFile={onOpenFile} />
+              <FileBrowser
+                sessionId={activeSessionId}
+                onOpenFile={onOpenFile}
+                onDeleteFile={handleDeleteFile}
+                isSearchOpen={isSearchOpen}
+                onCloseSearch={() => setIsSearchOpen(false)}
+                activeFilePath={activeFilePath}
+              />
             ) : (
               <div className="flex items-center justify-center h-full text-muted-foreground text-xs">
                 No task selected
diff --git a/apps/web/components/task/task-layout.tsx b/apps/web/components/task/task-layout.tsx
index 1ac02aed08..8e40d23163 100644
--- a/apps/web/components/task/task-layout.tsx
+++ b/apps/web/components/task/task-layout.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState, useCallback } from 'react';
 import { Group, Panel, type Layout } from 'react-resizable-panels';
 import { useDefaultLayout } from '@/lib/layout/use-default-layout';
 import { useResponsiveBreakpoint } from '@/hooks/use-responsive-breakpoint';
@@ -67,6 +67,13 @@ export const TaskLayout = memo(function TaskLayout({
     handleFileOpenHandled,
   } = useSessionLayoutState({ sessionId });
 
+  // Track active file path for highlighting in file tree
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
+
+  const handleActiveFileChange = useCallback((filePath: string | null) => {
+    setActiveFilePath(filePath);
+  }, []);
+
   const layoutBySession = useLayoutStore((state) => state.columnsBySessionId);
   const layoutState = useMemo(
     () => layoutBySession[sessionKey] ?? DEFAULT_LAYOUT_STATE,
@@ -134,6 +141,7 @@ export const TaskLayout = memo(function TaskLayout({
     <TaskFilesPanel
       onSelectDiff={handleSelectDiff}
       onOpenFile={handleOpenFile}
+      activeFilePath={activeFilePath}
     />
   );
 
@@ -172,6 +180,7 @@ export const TaskLayout = memo(function TaskLayout({
                   openFileRequest={openFileRequest}
                   onDiffHandled={handleClearSelectedDiff}
                   onFileOpenHandled={handleFileOpenHandled}
+                  onActiveFileChange={handleActiveFileChange}
                 />
               </Panel>
               <Panel id="preview" minSize="470px" className="min-h-0 min-w-0">
@@ -186,6 +195,7 @@ export const TaskLayout = memo(function TaskLayout({
               openFileRequest={openFileRequest}
               onDiffHandled={handleClearSelectedDiff}
               onFileOpenHandled={handleFileOpenHandled}
+              onActiveFileChange={handleActiveFileChange}
               sessionId={sessionId}
             />
           </Panel>
diff --git a/apps/web/components/task/task-plan-panel.tsx b/apps/web/components/task/task-plan-panel.tsx
index 23ae4eb8f8..848a84d717 100644
--- a/apps/web/components/task/task-plan-panel.tsx
+++ b/apps/web/components/task/task-plan-panel.tsx
@@ -2,8 +2,9 @@
 
 import { memo, useState, useCallback, useEffect, useRef } from 'react';
 import dynamic from 'next/dynamic';
-import { IconLoader2, IconFileText, IconRobot, IconMessage, IconClick } from '@tabler/icons-react';
+import { IconLoader2, IconFileText, IconRobot, IconMessage, IconClick, IconMessagePlus } from '@tabler/icons-react';
 import { cn } from '@/lib/utils';
+import { Button } from '@kandev/ui/button';
 import { useTaskPlan } from '@/hooks/domains/session/use-task-plan';
 import { useAppStore } from '@/components/state-provider';
 import { getWebSocketClient } from '@/lib/ws/connection';
@@ -42,6 +43,9 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
   const lastPlanContentRef = useRef<string | undefined>(undefined);
   // Text selection state for the selection popover
   const [textSelection, setTextSelection] = useState<TextSelection | null>(null);
+  // Floating button position (shown after selection ends)
+  const [floatingButtonPos, setFloatingButtonPos] = useState<{ x: number; y: number } | null>(null);
+  const [currentSelectionText, setCurrentSelectionText] = useState<string | null>(null);
   // Plan comments state
   const [comments, setComments] = useState<PlanComment[]>([]);
   const [editingCommentId, setEditingCommentId] = useState<string | null>(null);
@@ -172,10 +176,35 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
   const handleSelectionClose = useCallback(() => {
     setTextSelection(null);
     setEditingCommentId(null);
+    setFloatingButtonPos(null);
+    setCurrentSelectionText(null);
     // Clear the browser selection
     window.getSelection()?.removeAllRanges();
   }, []);
 
+  // Handle selection end (mouseup) - show floating button
+  const handleSelectionEnd = useCallback((selection: TextSelection | null) => {
+    if (!activeSessionId) return;
+    if (selection) {
+      setFloatingButtonPos(selection.position);
+      setCurrentSelectionText(selection.text);
+    } else {
+      setFloatingButtonPos(null);
+      setCurrentSelectionText(null);
+    }
+  }, [activeSessionId]);
+
+  // Handle floating button click - open the popover
+  const handleFloatingButtonClick = useCallback(() => {
+    if (!floatingButtonPos || !currentSelectionText) return;
+    setTextSelection({
+      text: currentSelectionText,
+      position: floatingButtonPos,
+    });
+    setFloatingButtonPos(null);
+    setCurrentSelectionText(null);
+  }, [floatingButtonPos, currentSelectionText]);
+
   // Handle clicking on a highlighted comment in the editor (opens edit popover)
   const handleCommentHighlightClick = useCallback(
     (id: string, position: { x: number; y: number }) => {
@@ -196,6 +225,11 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
     setComments([]);
   }, []);
 
+  // Handle deleting a single comment
+  const handleDeleteComment = useCallback((commentId: string) => {
+    setComments(prev => prev.filter(c => c.id !== commentId));
+  }, []);
+
   // Handle submitting all comments to the agent
   const handleSubmitComments = useCallback(async () => {
     if (!taskId || !activeSessionId || comments.length === 0) return;
@@ -292,9 +326,28 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
           onChange={setDraftContent}
           placeholder="Start typing your plan..."
           onSelectionChange={activeSessionId ? setTextSelection : undefined}
+          onSelectionEnd={activeSessionId ? handleSelectionEnd : undefined}
           comments={commentHighlights}
           onCommentClick={handleCommentHighlightClick}
         />
+
+        {/* Floating "Comment" button when text is selected */}
+        {floatingButtonPos && !textSelection && activeSessionId && (
+          <Button
+            size="sm"
+            variant="secondary"
+            className="floating-comment-btn fixed z-50 gap-1.5 shadow-lg animate-in fade-in-0 zoom-in-95 duration-100 cursor-pointer"
+            style={{
+              left: floatingButtonPos.x + 8,
+              top: floatingButtonPos.y + 8,
+            }}
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={handleFloatingButtonClick}
+          >
+            <IconMessagePlus className="h-3.5 w-3.5" />
+            Comment
+          </Button>
+        )}
         {/* Rich empty state - shows when no content and editor not focused */}
         {!isLoading && draftContent.trim() === '' && !isEditorFocused && (
           <div
@@ -379,6 +432,7 @@ export const TaskPlanPanel = memo(function TaskPlanPanel({ taskId, visible = tru
           onAdd={handleAddComment}
           onClose={handleSelectionClose}
           editingComment={editingCommentId ? comments.find(c => c.id === editingCommentId)?.comment : undefined}
+          onDelete={editingCommentId ? () => handleDeleteComment(editingCommentId) : undefined}
         />
       )}
     </div>
diff --git a/apps/web/lib/local-storage.ts b/apps/web/lib/local-storage.ts
index 7f9b0d2997..d67c00abf8 100644
--- a/apps/web/lib/local-storage.ts
+++ b/apps/web/lib/local-storage.ts
@@ -171,3 +171,215 @@ export function setCenterPanelTab(tab: string): void {
     // Ignore write failures
   }
 }
+
+// Internal storage keys for files panel (uses sessionStorage for per-tab persistence)
+const FILES_PANEL_KEYS = {
+  TAB: 'kandev.filesPanel.tab',
+  USER_SELECTED: 'kandev.filesPanel.userSelected',
+  EXPANDED: 'kandev.filesPanel.expanded',
+  SCROLL: 'kandev.filesPanel.scroll',
+} as const;
+
+/**
+ * Get the saved files panel tab for a session
+ * @param sessionId - The session ID
+ * @param fallback - Default tab if not found
+ * @returns The saved tab ('diff' or 'files')
+ */
+export function getFilesPanelTab(sessionId: string, fallback: 'diff' | 'files'): 'diff' | 'files' {
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const key = `${FILES_PANEL_KEYS.TAB}.${sessionId}`;
+    const raw = window.sessionStorage.getItem(key);
+    if (!raw) return fallback;
+    const value = JSON.parse(raw) as string;
+    return value === 'diff' || value === 'files' ? value : fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Save the files panel tab for a session
+ * @param sessionId - The session ID
+ * @param tab - The tab to save ('diff' or 'files')
+ */
+export function setFilesPanelTab(sessionId: string, tab: 'diff' | 'files'): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const key = `${FILES_PANEL_KEYS.TAB}.${sessionId}`;
+    window.sessionStorage.setItem(key, JSON.stringify(tab));
+  } catch {
+    // Ignore write failures
+  }
+}
+
+/**
+ * Check if user has explicitly selected a tab for this session
+ * @param sessionId - The session ID
+ * @returns true if user has made a selection
+ */
+export function hasUserSelectedFilesPanelTab(sessionId: string): boolean {
+  if (typeof window === 'undefined') return false;
+  try {
+    const key = `${FILES_PANEL_KEYS.USER_SELECTED}.${sessionId}`;
+    return window.sessionStorage.getItem(key) === 'true';
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Mark that user has explicitly selected a tab for this session
+ * @param sessionId - The session ID
+ */
+export function setUserSelectedFilesPanelTab(sessionId: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const key = `${FILES_PANEL_KEYS.USER_SELECTED}.${sessionId}`;
+    window.sessionStorage.setItem(key, 'true');
+  } catch {
+    // Ignore write failures
+  }
+}
+
+/**
+ * Get the saved expanded paths for file browser
+ * @param sessionId - The session ID
+ * @returns Array of expanded folder paths
+ */
+export function getFilesPanelExpandedPaths(sessionId: string): string[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const key = `${FILES_PANEL_KEYS.EXPANDED}.${sessionId}`;
+    const raw = window.sessionStorage.getItem(key);
+    if (!raw) return [];
+    return JSON.parse(raw) as string[];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Save the expanded paths for file browser
+ * @param sessionId - The session ID
+ * @param paths - Array of expanded folder paths
+ */
+export function setFilesPanelExpandedPaths(sessionId: string, paths: string[]): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const key = `${FILES_PANEL_KEYS.EXPANDED}.${sessionId}`;
+    window.sessionStorage.setItem(key, JSON.stringify(paths));
+  } catch {
+    // Ignore write failures
+  }
+}
+
+/**
+ * Get the saved scroll position for file browser
+ * @param sessionId - The session ID
+ * @returns The scroll position in pixels
+ */
+export function getFilesPanelScrollPosition(sessionId: string): number {
+  if (typeof window === 'undefined') return 0;
+  try {
+    const key = `${FILES_PANEL_KEYS.SCROLL}.${sessionId}`;
+    const raw = window.sessionStorage.getItem(key);
+    if (!raw) return 0;
+    return JSON.parse(raw) as number;
+  } catch {
+    return 0;
+  }
+}
+
+/**
+ * Save the scroll position for file browser
+ * @param sessionId - The session ID
+ * @param position - The scroll position in pixels
+ */
+export function setFilesPanelScrollPosition(sessionId: string, position: number): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const key = `${FILES_PANEL_KEYS.SCROLL}.${sessionId}`;
+    window.sessionStorage.setItem(key, JSON.stringify(position));
+  } catch {
+    // Ignore write failures
+  }
+}
+
+// Internal storage keys for open file tabs
+const OPEN_FILES_KEY = 'kandev.openFiles';
+const ACTIVE_TAB_KEY = 'kandev.activeTab';
+
+/**
+ * Minimal tab info stored in sessionStorage (no content - reloaded on restore)
+ */
+export interface StoredFileTab {
+  path: string;
+  name: string;
+}
+
+/**
+ * Get the saved open file tabs for a session
+ * @param sessionId - The session ID
+ * @returns Array of stored file tabs (path and name only)
+ */
+export function getOpenFileTabs(sessionId: string): StoredFileTab[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const key = `${OPEN_FILES_KEY}.${sessionId}`;
+    const raw = window.sessionStorage.getItem(key);
+    if (!raw) return [];
+    return JSON.parse(raw) as StoredFileTab[];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Save the open file tabs for a session
+ * @param sessionId - The session ID
+ * @param tabs - Array of tabs (only path and name are stored)
+ */
+export function setOpenFileTabs(sessionId: string, tabs: StoredFileTab[]): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const key = `${OPEN_FILES_KEY}.${sessionId}`;
+    window.sessionStorage.setItem(key, JSON.stringify(tabs));
+  } catch {
+    // Ignore write failures
+  }
+}
+
+/**
+ * Get the saved active tab for a session
+ * @param sessionId - The session ID
+ * @param fallback - Default tab if not found
+ * @returns The saved active tab id (e.g., 'chat', 'plan', 'file:/path/to/file')
+ */
+export function getActiveTabForSession(sessionId: string, fallback: string): string {
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const key = `${ACTIVE_TAB_KEY}.${sessionId}`;
+    const raw = window.sessionStorage.getItem(key);
+    if (!raw) return fallback;
+    return JSON.parse(raw) as string;
+  } catch {
+    return fallback;
+  }
+}
+
+/**
+ * Save the active tab for a session
+ * @param sessionId - The session ID
+ * @param tabId - The tab id to save
+ */
+export function setActiveTabForSession(sessionId: string, tabId: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const key = `${ACTIVE_TAB_KEY}.${sessionId}`;
+    window.sessionStorage.setItem(key, JSON.stringify(tabId));
+  } catch {
+    // Ignore write failures
+  }
+}
diff --git a/apps/web/lib/ws/workspace-files.ts b/apps/web/lib/ws/workspace-files.ts
index e0b1a64f7e..92bcd7fe38 100644
--- a/apps/web/lib/ws/workspace-files.ts
+++ b/apps/web/lib/ws/workspace-files.ts
@@ -74,3 +74,27 @@ export async function updateFileContent(
     original_hash: originalHash,
   });
 }
+
+/**
+ * File delete response from backend
+ */
+export type FileDeleteResponse = {
+  path: string;
+  success: boolean;
+  error?: string;
+};
+
+/**
+ * Delete a file from the workspace
+ */
+export async function deleteFile(
+  client: WebSocketClient,
+  sessionId: string,
+  path: string
+): Promise<FileDeleteResponse> {
+  return client.request<FileDeleteResponse>('workspace.file.delete', {
+    session_id: sessionId,
+    path,
+  });
+}
+
diff --git a/apps/web/package.json b/apps/web/package.json
index 78e230abac..ae3cdcd9b7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,6 +46,7 @@
     "@tabler/icons-react": "^3.36.1",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.18",
+    "@uiw/codemirror-theme-github": "^4.25.4",
     "@uiw/codemirror-theme-vscode": "^4.25.4",
     "@uiw/react-codemirror": "^4.25.4",
     "@xterm/addon-attach": "^0.12.0",