diff --git a/apps/backend/internal/agent/runtime/agentctl/client_workspace_preview.go b/apps/backend/internal/agent/runtime/agentctl/client_workspace_preview.go
new file mode 100644
index 0000000000..04b998812f
--- /dev/null
+++ b/apps/backend/internal/agent/runtime/agentctl/client_workspace_preview.go
@@ -0,0 +1,63 @@
+package client
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"strings"
+
+	agentctltypes "github.com/kandev/kandev/internal/agentctl/types"
+)
+
+const MaxWorkspacePreviewContentBytes = agentctltypes.MaxWorkspacePreviewContentBytes
+
+// WorkspacePreviewRequest is the current editor buffer to publish through
+// agentctl.
+type WorkspacePreviewRequest = agentctltypes.WorkspacePreviewRequest
+
+// WorkspacePreviewResponse identifies the live agentctl preview server and
+// the published entry document.
+type WorkspacePreviewResponse = agentctltypes.WorkspacePreviewResponse
+
+// WorkspacePreviewHTTPError is returned when agentctl rejects a publish.
+type WorkspacePreviewHTTPError = agentctltypes.WorkspacePreviewHTTPError
+
+// PublishWorkspacePreview publishes one current HTML editor buffer.
+func (c *Client) PublishWorkspacePreview(ctx context.Context, payload WorkspacePreviewRequest) (WorkspacePreviewResponse, error) {
+	if len([]byte(payload.Content)) > MaxWorkspacePreviewContentBytes {
+		return WorkspacePreviewResponse{}, fmt.Errorf("workspace preview content exceeds 5 MiB")
+	}
+	body, err := json.Marshal(payload)
+	if err != nil {
+		return WorkspacePreviewResponse{}, fmt.Errorf("marshal workspace preview request: %w", err)
+	}
+	req, err := http.NewRequestWithContext(ctx, http.MethodPost, c.baseURL+"/api/v1/workspace/html-previews", bytes.NewReader(body))
+	if err != nil {
+		return WorkspacePreviewResponse{}, fmt.Errorf("create workspace preview request: %w", err)
+	}
+	req.Header.Set("Content-Type", "application/json")
+	resp, err := c.httpClient.Do(req)
+	if err != nil {
+		return WorkspacePreviewResponse{}, err
+	}
+	defer func() { _ = resp.Body.Close() }()
+	if resp.StatusCode < 200 || resp.StatusCode >= 300 {
+		_, _ = io.Copy(io.Discard, resp.Body)
+		return WorkspacePreviewResponse{}, &WorkspacePreviewHTTPError{Status: resp.StatusCode}
+	}
+	responseBody, err := readResponseBody(resp)
+	if err != nil {
+		return WorkspacePreviewResponse{}, fmt.Errorf("read workspace preview response: %w", err)
+	}
+	var result WorkspacePreviewResponse
+	if err := json.Unmarshal(responseBody, &result); err != nil {
+		return WorkspacePreviewResponse{}, fmt.Errorf("parse workspace preview response: %w", err)
+	}
+	if result.Port < 1024 || result.Port > 65535 || result.Version == 0 || !strings.HasPrefix(result.Path, "/") {
+		return WorkspacePreviewResponse{}, fmt.Errorf("invalid workspace preview response")
+	}
+	return result, nil
+}
diff --git a/apps/backend/internal/agent/runtime/agentctl/client_workspace_preview_test.go b/apps/backend/internal/agent/runtime/agentctl/client_workspace_preview_test.go
new file mode 100644
index 0000000000..b105b7e5d5
--- /dev/null
+++ b/apps/backend/internal/agent/runtime/agentctl/client_workspace_preview_test.go
@@ -0,0 +1,120 @@
+package client
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+)
+
+func TestPublishWorkspacePreviewForwardsCurrentBufferAndValidatesResponse(t *testing.T) {
+	var got WorkspacePreviewRequest
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodPost || r.URL.Path != "/api/v1/workspace/html-previews" {
+			t.Errorf("request = %s %s, want POST /api/v1/workspace/html-previews", r.Method, r.URL.Path)
+		}
+		if err := json.NewDecoder(r.Body).Decode(&got); err != nil {
+			t.Fatalf("decode request: %v", err)
+		}
+		w.Header().Set("Content-Type", "application/json")
+		_, _ = w.Write([]byte(`{"port":43127,"path":"/site/index.html","version":4}`))
+	}))
+	t.Cleanup(srv.Close)
+	host, port := splitTestServerHostPort(t, srv)
+	client := NewClient(host, port, newTestLogger())
+
+	response, err := client.PublishWorkspacePreview(context.Background(), WorkspacePreviewRequest{
+		Repo:    "frontend",
+		Path:    "site/index.html",
+		Content: "<script>document.body.dataset.ready = 'yes'</script>",
+	})
+	if err != nil {
+		t.Fatalf("PublishWorkspacePreview: %v", err)
+	}
+	if got.Repo != "frontend" || got.Path != "site/index.html" || !strings.Contains(got.Content, "dataset.ready") {
+		t.Fatalf("request = %+v, want repository, path, and current buffer", got)
+	}
+	if response.Port != 43127 || response.Path != "/site/index.html" || response.Version != 4 {
+		t.Fatalf("response = %+v, want validated server response", response)
+	}
+}
+
+func TestPublishWorkspacePreviewRejectsOversizedContentBeforeNetwork(t *testing.T) {
+	called := false
+	srv := httptest.NewServer(http.HandlerFunc(func(http.ResponseWriter, *http.Request) {
+		called = true
+	}))
+	t.Cleanup(srv.Close)
+	host, port := splitTestServerHostPort(t, srv)
+	client := NewClient(host, port, newTestLogger())
+
+	_, err := client.PublishWorkspacePreview(context.Background(), WorkspacePreviewRequest{
+		Path:    "index.html",
+		Content: strings.Repeat("x", MaxWorkspacePreviewContentBytes+1),
+	})
+	if err == nil {
+		t.Fatal("PublishWorkspacePreview accepted oversized content")
+	}
+	if called {
+		t.Fatal("PublishWorkspacePreview sent oversized content to agentctl")
+	}
+}
+
+func TestPublishWorkspacePreviewPreservesRemoteStatusWithoutResponseBody(t *testing.T) {
+	for _, status := range []int{http.StatusBadRequest, http.StatusRequestEntityTooLarge, http.StatusServiceUnavailable} {
+		t.Run(http.StatusText(status), func(t *testing.T) {
+			srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
+				w.WriteHeader(status)
+				_, _ = w.Write([]byte("source content must not escape the client error"))
+			}))
+			t.Cleanup(srv.Close)
+			host, port := splitTestServerHostPort(t, srv)
+			client := NewClient(host, port, newTestLogger())
+
+			_, err := client.PublishWorkspacePreview(context.Background(), WorkspacePreviewRequest{
+				Path:    "index.html",
+				Content: "<body>current</body>",
+			})
+			if err == nil {
+				t.Fatal("PublishWorkspacePreview returned nil error")
+			}
+			var statusErr interface {
+				error
+				StatusCode() int
+			}
+			if !errors.As(err, &statusErr) {
+				t.Fatalf("error = %v, want typed status error", err)
+			}
+			if statusErr.StatusCode() != status {
+				t.Fatalf("status = %d, want %d", statusErr.StatusCode(), status)
+			}
+			if strings.Contains(err.Error(), "source content must not escape") {
+				t.Fatalf("error exposed upstream response body: %v", err)
+			}
+		})
+	}
+}
+
+func TestPublishWorkspacePreviewRejectsMalformedSuccessResponse(t *testing.T) {
+	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, _ *http.Request) {
+		w.WriteHeader(http.StatusOK)
+		_, _ = w.Write([]byte("not-json"))
+	}))
+	t.Cleanup(srv.Close)
+	host, port := splitTestServerHostPort(t, srv)
+	client := NewClient(host, port, newTestLogger())
+
+	_, err := client.PublishWorkspacePreview(context.Background(), WorkspacePreviewRequest{
+		Path:    "index.html",
+		Content: "<body>current</body>",
+	})
+	if err == nil {
+		t.Fatal("PublishWorkspacePreview accepted malformed success response")
+	}
+	if strings.Contains(err.Error(), "not-json") {
+		t.Fatalf("error exposed malformed response body: %v", err)
+	}
+}
diff --git a/apps/backend/internal/agentctl/server/api/server.go b/apps/backend/internal/agentctl/server/api/server.go
index 3fb15132b5..db78a0bb20 100644
--- a/apps/backend/internal/agentctl/server/api/server.go
+++ b/apps/backend/internal/agentctl/server/api/server.go
@@ -141,6 +141,7 @@ func (s *Server) setupRoutes() {
 		api.GET("/workspace/file/content", s.handleFileContent)
 		api.GET("/workspace/file/content-at-ref", s.handleFileContentAtRef)
 		api.POST("/workspace/file/content", s.handleFileUpdate)
+		api.POST("/workspace/html-previews", s.handleWorkspacePreviewPublish)
 		api.POST("/workspace/file/create", s.handleFileCreate)
 		api.POST("/workspace/file/upload", s.handleFileUpload)
 		api.POST("/workspace/file/upload-preflight", s.handleUploadPreflight)
diff --git a/apps/backend/internal/agentctl/server/api/workspace_preview.go b/apps/backend/internal/agentctl/server/api/workspace_preview.go
new file mode 100644
index 0000000000..d7311cbc8b
--- /dev/null
+++ b/apps/backend/internal/agentctl/server/api/workspace_preview.go
@@ -0,0 +1,70 @@
+package api
+
+import (
+	"encoding/json"
+	"errors"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/kandev/kandev/internal/agentctl/server/process"
+	"go.uber.org/zap"
+)
+
+const maxWorkspacePreviewRequestBytes = 32 * 1024 * 1024
+
+type workspacePreviewPublishRequest struct {
+	Repo    string `json:"repo,omitempty"`
+	Path    string `json:"path"`
+	Content string `json:"content"`
+}
+
+type workspacePreviewPublishResponse struct {
+	Port    int    `json:"port"`
+	Path    string `json:"path"`
+	Version uint64 `json:"version"`
+}
+
+func (s *Server) handleWorkspacePreviewPublish(c *gin.Context) {
+	if c.Request.ContentLength > maxWorkspacePreviewRequestBytes {
+		c.JSON(http.StatusRequestEntityTooLarge, gin.H{"error": "workspace preview request is too large"})
+		return
+	}
+	c.Request.Body = http.MaxBytesReader(c.Writer, c.Request.Body, maxWorkspacePreviewRequestBytes)
+	var req workspacePreviewPublishRequest
+	if err := json.NewDecoder(c.Request.Body).Decode(&req); err != nil {
+		var maxBytesError *http.MaxBytesError
+		if errors.As(err, &maxBytesError) {
+			c.JSON(http.StatusRequestEntityTooLarge, gin.H{"error": "workspace preview request is too large"})
+			return
+		}
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid workspace preview request"})
+		return
+	}
+
+	response, err := s.procMgr.PublishWorkspacePreview(process.WorkspacePreviewRequest{
+		Repo:    req.Repo,
+		Path:    req.Path,
+		Content: req.Content,
+	})
+	if err != nil {
+		switch {
+		case errors.Is(err, process.ErrWorkspacePreviewContentTooLarge):
+			c.JSON(http.StatusRequestEntityTooLarge, gin.H{"error": err.Error()})
+		case errors.Is(err, process.ErrWorkspacePreviewPathInvalid),
+			errors.Is(err, process.ErrWorkspacePreviewTypeUnsupported):
+			c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
+		case errors.Is(err, process.ErrWorkspacePreviewUnavailable):
+			c.JSON(http.StatusServiceUnavailable, gin.H{"error": err.Error()})
+		default:
+			s.logger.Warn("workspace preview publish failed", zap.Error(err))
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "workspace preview server unavailable"})
+		}
+		return
+	}
+
+	c.JSON(http.StatusOK, workspacePreviewPublishResponse{
+		Port:    response.Port,
+		Path:    response.Path,
+		Version: response.Version,
+	})
+}
diff --git a/apps/backend/internal/agentctl/server/api/workspace_preview_test.go b/apps/backend/internal/agentctl/server/api/workspace_preview_test.go
new file mode 100644
index 0000000000..7e3fddd71e
--- /dev/null
+++ b/apps/backend/internal/agentctl/server/api/workspace_preview_test.go
@@ -0,0 +1,347 @@
+package api
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"strings"
+	"sync"
+	"testing"
+
+	"github.com/kandev/kandev/internal/agentctl/server/config"
+	"github.com/kandev/kandev/internal/agentctl/server/process"
+	"github.com/kandev/kandev/internal/common/logger"
+)
+
+func newWorkspacePreviewServer(t *testing.T) (*Server, *process.Manager, string) {
+	t.Helper()
+	workDir := t.TempDir()
+	log, _ := logger.NewLogger(logger.LoggingConfig{Level: "error"})
+	cfg := &config.InstanceConfig{WorkDir: workDir}
+	mgr := process.NewManager(cfg, log)
+	t.Cleanup(func() { _ = mgr.CloseWorkspacePreview(context.Background()) })
+	return NewServer(cfg, mgr, nil, nil, log), mgr, workDir
+}
+
+func publishWorkspacePreview(t *testing.T, srv *Server, repo, path, content string) workspacePreviewPublishResponse {
+	t.Helper()
+	body, err := json.Marshal(map[string]string{
+		"repo":    repo,
+		"path":    path,
+		"content": content,
+	})
+	if err != nil {
+		t.Fatalf("marshal preview request: %v", err)
+	}
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/workspace/html-previews", bytes.NewReader(body))
+	req.Header.Set("Content-Type", "application/json")
+	rec := httptest.NewRecorder()
+	srv.Router().ServeHTTP(rec, req)
+	var response workspacePreviewPublishResponse
+	if err := json.Unmarshal(rec.Body.Bytes(), &response); err != nil {
+		t.Fatalf("decode preview response (%d): %v; body=%s", rec.Code, err, rec.Body.String())
+	}
+	if rec.Code != http.StatusOK {
+		t.Fatalf("publish status = %d, response = %+v", rec.Code, response)
+	}
+	return response
+}
+
+func getWorkspacePreview(t *testing.T, response workspacePreviewPublishResponse, path string) (*http.Response, string) {
+	t.Helper()
+	url := fmt.Sprintf("http://127.0.0.1:%d%s", response.Port, path)
+	req, err := http.NewRequest(http.MethodGet, url, nil)
+	if err != nil {
+		t.Fatalf("build GET %s: %v", path, err)
+	}
+	client := &http.Client{}
+	resp, err := client.Do(req)
+	if err != nil {
+		t.Fatalf("GET %s: %v", path, err)
+	}
+	t.Cleanup(func() { _ = resp.Body.Close() })
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.Fatalf("read GET %s: %v", path, err)
+	}
+	return resp, string(body)
+}
+
+func TestWorkspacePreviewPublishesOverlayAndServesWorkspaceAssets(t *testing.T) {
+	srv, mgr, workDir := newWorkspacePreviewServer(t)
+	if err := os.MkdirAll(filepath.Join(workDir, "site", "styles"), 0o755); err != nil {
+		t.Fatal(err)
+	}
+	if err := os.WriteFile(filepath.Join(workDir, "site", "styles", "app.css"), []byte("body { color: red; }"), 0o644); err != nil {
+		t.Fatal(err)
+	}
+
+	first := publishWorkspacePreview(t, srv, "", "site/index.html", "<html><link rel=\"stylesheet\" href=\"styles/app.css\"><body>first</body></html>")
+	if first.Port == 0 || first.Path != "/site/index.html" || first.Version != 1 {
+		t.Fatalf("first publish = %+v, want port, /site/index.html, version 1", first)
+	}
+
+	entry, entryBody := getWorkspacePreview(t, first, first.Path)
+	if entry.StatusCode != http.StatusOK {
+		t.Fatalf("entry status = %d, want 200", entry.StatusCode)
+	}
+	if !strings.Contains(entry.Header.Get("Content-Type"), "text/html") {
+		t.Errorf("entry content type = %q, want text/html", entry.Header.Get("Content-Type"))
+	}
+	if entry.Header.Get("Cache-Control") != "no-store" {
+		t.Errorf("entry cache control = %q, want no-store", entry.Header.Get("Cache-Control"))
+	}
+	if !strings.Contains(entryBody, "first") {
+		t.Errorf("entry body = %q, want current overlay", entryBody)
+	}
+
+	asset, assetBody := getWorkspacePreview(t, first, "/site/styles/app.css")
+	if asset.StatusCode != http.StatusOK || assetBody != "body { color: red; }" {
+		t.Fatalf("asset = %d %q, want workspace file", asset.StatusCode, assetBody)
+	}
+	if !strings.Contains(asset.Header.Get("Content-Type"), "text/css") {
+		t.Errorf("asset content type = %q, want text/css", asset.Header.Get("Content-Type"))
+	}
+
+	second := publishWorkspacePreview(t, srv, "", "site/index.html", "<html><body>second</body></html>")
+	if second.Port != first.Port || second.Path != first.Path || second.Version <= first.Version {
+		t.Fatalf("replacement = %+v, want same port/path and increasing version after %+v", second, first)
+	}
+	updated, updatedBody := getWorkspacePreview(t, second, second.Path)
+	if updated.StatusCode != http.StatusOK || !strings.Contains(updatedBody, "second") {
+		t.Fatalf("updated entry = %d %q, want replacement overlay", updated.StatusCode, updatedBody)
+	}
+
+	if err := mgr.StopForTeardown(t.Context()); err != nil {
+		t.Fatalf("stop manager: %v", err)
+	}
+	request, err := http.NewRequest(http.MethodGet, fmt.Sprintf("http://127.0.0.1:%d%s", first.Port, first.Path), nil)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if _, err := (&http.Client{}).Do(request); err == nil {
+		t.Fatal("preview server still accepted requests after manager teardown")
+	}
+}
+
+func TestWorkspacePreviewRejectsEscapingPathsAndSymlinkTargets(t *testing.T) {
+	srv, _, workDir := newWorkspacePreviewServer(t)
+	outside := t.TempDir()
+	outsideFile := filepath.Join(outside, "secret.txt")
+	if err := os.WriteFile(outsideFile, []byte("secret"), 0o644); err != nil {
+		t.Fatal(err)
+	}
+	if err := os.Symlink(outsideFile, filepath.Join(workDir, "linked.txt")); err != nil {
+		t.Fatal(err)
+	}
+
+	for _, path := range []string{"../secret.html", "site/../../secret.html", `%2e%2e/secret.html`} {
+		body, err := json.Marshal(map[string]string{"path": path, "content": "<p>blocked</p>"})
+		if err != nil {
+			t.Fatal(err)
+		}
+		req := httptest.NewRequest(http.MethodPost, "/api/v1/workspace/html-previews", bytes.NewReader(body))
+		req.Header.Set("Content-Type", "application/json")
+		rec := httptest.NewRecorder()
+		srv.Router().ServeHTTP(rec, req)
+		if rec.Code != http.StatusBadRequest {
+			t.Errorf("path %q status = %d, want 400", path, rec.Code)
+		}
+	}
+
+	preview := publishWorkspacePreview(t, srv, "", "index.html", "<script src=\"linked.txt\"></script>")
+	linked, linkedBody := getWorkspacePreview(t, preview, "/linked.txt")
+	if linked.StatusCode == http.StatusOK || linkedBody == "secret" {
+		t.Fatalf("symlink target escaped workspace: status=%d body=%q", linked.StatusCode, linkedBody)
+	}
+}
+
+func TestWorkspacePreviewEvictsLeastRecentlyPublishedOverlay(t *testing.T) {
+	srv, _, _ := newWorkspacePreviewServer(t)
+	responses := make([]workspacePreviewPublishResponse, 0, 33)
+	for i := 0; i < 33; i++ {
+		responses = append(responses, publishWorkspacePreview(
+			t,
+			srv,
+			"",
+			fmt.Sprintf("overlay-%02d.html", i),
+			fmt.Sprintf("<p>%02d</p>", i),
+		))
+	}
+
+	oldest, _ := getWorkspacePreview(t, responses[0], responses[0].Path)
+	if oldest.StatusCode != http.StatusNotFound {
+		t.Fatalf("oldest overlay status = %d, want 404 after 33 publishes", oldest.StatusCode)
+	}
+	newest, newestBody := getWorkspacePreview(t, responses[32], responses[32].Path)
+	if newest.StatusCode != http.StatusOK || !strings.Contains(newestBody, "32") {
+		t.Fatalf("newest overlay = %d %q, want retained content", newest.StatusCode, newestBody)
+	}
+}
+
+func TestWorkspacePreviewRejectsOversizedEntryDocument(t *testing.T) {
+	srv, _, _ := newWorkspacePreviewServer(t)
+	content := strings.Repeat("x", 5*1024*1024+1)
+	body, err := json.Marshal(map[string]string{"path": "index.html", "content": content})
+	if err != nil {
+		t.Fatal(err)
+	}
+	req := httptest.NewRequest(http.MethodPost, "/api/v1/workspace/html-previews", bytes.NewReader(body))
+	req.Header.Set("Content-Type", "application/json")
+	rec := httptest.NewRecorder()
+	srv.Router().ServeHTTP(rec, req)
+	if rec.Code != http.StatusRequestEntityTooLarge && rec.Code != http.StatusBadRequest {
+		t.Fatalf("oversized publish status = %d, want 413 or 400", rec.Code)
+	}
+}
+
+// Reviewer coverage: the manager's lock must protect replacement publishes
+// while static handlers read the currently published immutable buffer.
+func TestWorkspacePreviewSupportsConcurrentPublishAndRead(t *testing.T) {
+	srv, _, _ := newWorkspacePreviewServer(t)
+	initial := publishWorkspacePreview(t, srv, "", "index.html", "<p>initial</p>")
+	control := httptest.NewServer(srv.Router())
+	t.Cleanup(control.Close)
+
+	const publishers = 12
+	const readers = 12
+	start := make(chan struct{})
+	results := make(chan error, publishers+readers)
+	var wg sync.WaitGroup
+	for i := 0; i < publishers; i++ {
+		wg.Add(1)
+		go func(index int) {
+			defer wg.Done()
+			<-start
+			_, err := postWorkspacePreview(control.URL, "", "index.html", fmt.Sprintf("<p>publish-%02d</p>", index))
+			results <- err
+		}(i)
+	}
+	for i := 0; i < readers; i++ {
+		wg.Add(1)
+		go func() {
+			defer wg.Done()
+			<-start
+			resp, err := http.Get(fmt.Sprintf("http://127.0.0.1:%d%s", initial.Port, initial.Path))
+			if err != nil {
+				results <- err
+				return
+			}
+			defer func() { _ = resp.Body.Close() }()
+			body, readErr := io.ReadAll(resp.Body)
+			if readErr != nil {
+				results <- readErr
+				return
+			}
+			if resp.StatusCode != http.StatusOK || !strings.Contains(string(body), "<p>") {
+				results <- fmt.Errorf("concurrent read = %d %q", resp.StatusCode, string(body))
+				return
+			}
+			results <- nil
+		}()
+	}
+	close(start)
+	wg.Wait()
+	close(results)
+	for err := range results {
+		if err != nil {
+			t.Fatal(err)
+		}
+	}
+
+	final, finalBody := getWorkspacePreview(t, initial, initial.Path)
+	if final.StatusCode != http.StatusOK || !strings.Contains(finalBody, "publish-") {
+		t.Fatalf("final preview = %d %q, want one concurrent replacement", final.StatusCode, finalBody)
+	}
+}
+
+func TestWorkspacePreviewSupportsHeadMethodAndSeparateRepositoryRoots(t *testing.T) {
+	srv, _, workDir := newWorkspacePreviewServer(t)
+	for _, repo := range []string{"repo-a", "repo-b"} {
+		if err := os.Mkdir(filepath.Join(workDir, repo), 0o755); err != nil {
+			t.Fatal(err)
+		}
+	}
+	first := publishWorkspacePreview(t, srv, "repo-a", "index.html", "<p>repo-a</p>")
+	second := publishWorkspacePreview(t, srv, "repo-b", "index.html", "<p>repo-b</p>")
+	if first.Port == second.Port {
+		t.Fatalf("repository roots share port %d", first.Port)
+	}
+	for _, test := range []struct {
+		name     string
+		response workspacePreviewPublishResponse
+		content  string
+	}{
+		{name: "repo-a", response: first, content: "repo-a"},
+		{name: "repo-b", response: second, content: "repo-b"},
+	} {
+		t.Run(test.name, func(t *testing.T) {
+			response, body := getWorkspacePreview(t, test.response, test.response.Path)
+			if response.StatusCode != http.StatusOK || !strings.Contains(body, test.content) {
+				t.Fatalf("GET = %d %q, want %s root content", response.StatusCode, body, test.content)
+			}
+		})
+	}
+
+	headURL := fmt.Sprintf("http://127.0.0.1:%d%s", first.Port, first.Path)
+	headRequest, err := http.NewRequest(http.MethodHead, headURL, nil)
+	if err != nil {
+		t.Fatal(err)
+	}
+	headResponse, err := (&http.Client{}).Do(headRequest)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer func() { _ = headResponse.Body.Close() }()
+	headBody, err := io.ReadAll(headResponse.Body)
+	if err != nil {
+		t.Fatal(err)
+	}
+	if headResponse.StatusCode != http.StatusOK || len(headBody) != 0 || headResponse.ContentLength <= 0 {
+		t.Fatalf("HEAD = %d length=%d body=%q, want 200 with empty body", headResponse.StatusCode, headResponse.ContentLength, headBody)
+	}
+
+	methodRequest, err := http.NewRequest(http.MethodPost, headURL, strings.NewReader("ignored"))
+	if err != nil {
+		t.Fatal(err)
+	}
+	methodResponse, err := (&http.Client{}).Do(methodRequest)
+	if err != nil {
+		t.Fatal(err)
+	}
+	defer func() { _ = methodResponse.Body.Close() }()
+	if methodResponse.StatusCode != http.StatusMethodNotAllowed || methodResponse.Header.Get("Allow") != "GET, HEAD" {
+		t.Fatalf("POST = %d allow=%q, want 405 and GET, HEAD", methodResponse.StatusCode, methodResponse.Header.Get("Allow"))
+	}
+}
+
+func postWorkspacePreview(baseURL, repo, path, content string) (workspacePreviewPublishResponse, error) {
+	body, err := json.Marshal(map[string]string{"repo": repo, "path": path, "content": content})
+	if err != nil {
+		return workspacePreviewPublishResponse{}, err
+	}
+	request, err := http.NewRequest(http.MethodPost, baseURL+"/api/v1/workspace/html-previews", bytes.NewReader(body))
+	if err != nil {
+		return workspacePreviewPublishResponse{}, err
+	}
+	request.Header.Set("Content-Type", "application/json")
+	response, err := http.DefaultClient.Do(request)
+	if err != nil {
+		return workspacePreviewPublishResponse{}, err
+	}
+	defer func() { _ = response.Body.Close() }()
+	if response.StatusCode != http.StatusOK {
+		return workspacePreviewPublishResponse{}, fmt.Errorf("publish status = %d", response.StatusCode)
+	}
+	var result workspacePreviewPublishResponse
+	if err := json.NewDecoder(response.Body).Decode(&result); err != nil {
+		return workspacePreviewPublishResponse{}, err
+	}
+	return result, nil
+}
diff --git a/apps/backend/internal/agentctl/server/process/manager.go b/apps/backend/internal/agentctl/server/process/manager.go
index 2c5ec5bae1..a64cde64dd 100644
--- a/apps/backend/internal/agentctl/server/process/manager.go
+++ b/apps/backend/internal/agentctl/server/process/manager.go
@@ -206,6 +206,10 @@ type Manager struct {
 	// Script/process runner (dev server, setup, cleanup, custom)
 	processRunner *ProcessRunner
 
+	// workspacePreview owns ephemeral loopback static servers for current
+	// editor-buffer HTML previews. It is closed with the agentctl instance.
+	workspacePreview *WorkspacePreviewManager
+
 	// Embedded shell session (auto-created when agent starts)
 	shell *shell.Session
 
@@ -389,6 +393,7 @@ func NewManager(cfg *config.InstanceConfig, log *logger.Logger) *Manager {
 		false,
 	)
 	m.processRunner = NewProcessRunner(m.workspaceTracker, log, cfg.ProcessBufferMaxBytes)
+	m.workspacePreview = NewWorkspacePreviewManager(log)
 	m.shellMgr = shell.NewManager(cfg.WorkDir, log)
 	m.status.Store(StatusStopped)
 	m.exitCode.Store(-1)
@@ -1167,6 +1172,53 @@ func (m *Manager) ResolveRepoSubdir(subpath string) (string, error) {
 	return full, err
 }
 
+// PublishWorkspacePreview publishes a current HTML editor buffer under the
+// selected workspace or repository root.
+func (m *Manager) PublishWorkspacePreview(req WorkspacePreviewRequest) (WorkspacePreviewResponse, error) {
+	if m.workspacePreview == nil {
+		return WorkspacePreviewResponse{}, ErrWorkspacePreviewUnavailable
+	}
+	root, err := m.resolveWorkspacePreviewRoot(req.Repo)
+	if err != nil {
+		return WorkspacePreviewResponse{}, err
+	}
+	return m.workspacePreview.Publish(root, req)
+}
+
+// CloseWorkspacePreview stops all ephemeral preview servers owned by this
+// agentctl process.
+func (m *Manager) CloseWorkspacePreview(ctx context.Context) error {
+	if m.workspacePreview == nil {
+		return nil
+	}
+	return m.workspacePreview.Close(ctx)
+}
+
+func (m *Manager) resolveWorkspacePreviewRoot(repo string) (string, error) {
+	_, root, err := m.resolveSubpath(repo)
+	if err != nil {
+		return "", err
+	}
+	canonicalRoot, err := canonicalPreviewDirectory(root)
+	if err != nil {
+		return "", fmt.Errorf("resolve preview root: %w", err)
+	}
+	canonicalWorkDir, err := canonicalPreviewDirectory(m.cfg.WorkDir)
+	if err != nil {
+		return "", fmt.Errorf("resolve workspace root: %w", err)
+	}
+	if previewPathWithinRoot(canonicalWorkDir, canonicalRoot) {
+		return canonicalRoot, nil
+	}
+	for _, sourceRoot := range m.currentWorkspaceSourceRoots() {
+		canonicalSourceRoot, sourceErr := canonicalPreviewDirectory(sourceRoot)
+		if sourceErr == nil && previewPathWithinRoot(canonicalSourceRoot, canonicalRoot) {
+			return canonicalRoot, nil
+		}
+	}
+	return "", fmt.Errorf("%w: preview root escapes workspace", ErrWorkspacePreviewPathInvalid)
+}
+
 // JoinRepoPath validates a repo subpath and returns the workspace-relative
 // path obtained by joining `subpath` and `path`. Empty `subpath` returns
 // `path` unchanged (single-repo workspaces). Used by file content / update
@@ -1865,10 +1917,11 @@ func (m *Manager) Stop(ctx context.Context) error {
 // before stopping every process owned by the manager.
 func (m *Manager) StopForTeardown(ctx context.Context) error {
 	m.CloseAdmission()
+	previewErr := m.CloseWorkspacePreview(ctx)
 	if err := m.WaitForAdmission(ctx); err != nil {
-		return fmt.Errorf("wait for process admission to drain: %w", err)
+		return errors.Join(previewErr, fmt.Errorf("wait for process admission to drain: %w", err))
 	}
-	return m.stop(ctx)
+	return errors.Join(previewErr, m.stop(ctx))
 }
 
 func (m *Manager) stop(ctx context.Context) error {
diff --git a/apps/backend/internal/agentctl/server/process/workspace_preview.go b/apps/backend/internal/agentctl/server/process/workspace_preview.go
new file mode 100644
index 0000000000..3c8b1b973a
--- /dev/null
+++ b/apps/backend/internal/agentctl/server/process/workspace_preview.go
@@ -0,0 +1,340 @@
+package process
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"mime"
+	"net"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	"strings"
+	"sync"
+
+	agentctltypes "github.com/kandev/kandev/internal/agentctl/types"
+	"github.com/kandev/kandev/internal/common/logger"
+	"go.uber.org/zap"
+)
+
+const (
+	// MaxWorkspacePreviewContentBytes bounds one current-buffer overlay. The
+	// shared agentctl type is the source of truth for every layer.
+	MaxWorkspacePreviewContentBytes = agentctltypes.MaxWorkspacePreviewContentBytes
+	maxWorkspacePreviewOverlays     = 32
+)
+
+var (
+	ErrWorkspacePreviewContentTooLarge = errors.New("workspace preview content exceeds 5 MiB")
+	ErrWorkspacePreviewPathInvalid     = errors.New("workspace preview path is invalid")
+	ErrWorkspacePreviewTypeUnsupported = errors.New("workspace preview only supports HTML files")
+	ErrWorkspacePreviewUnavailable     = errors.New("workspace preview server is unavailable")
+)
+
+// WorkspacePreviewRequest is the current editor buffer to publish for a
+// workspace preview. Repo is an optional repository-relative scope.
+type WorkspacePreviewRequest struct {
+	Repo    string
+	Path    string
+	Content string
+}
+
+// WorkspacePreviewResponse identifies the ephemeral static server and the
+// published entry document.
+type WorkspacePreviewResponse struct {
+	Port    int
+	Path    string
+	Version uint64
+}
+
+type workspacePreviewOverlay struct {
+	content   string
+	version   uint64
+	published uint64
+}
+
+type workspacePreviewRoot struct {
+	path     string
+	port     int
+	server   *http.Server
+	overlays map[string]workspacePreviewOverlay
+}
+
+// WorkspacePreviewManager owns loopback static servers and in-memory entry
+// overlays for one agentctl instance.
+type WorkspacePreviewManager struct {
+	mu       sync.Mutex
+	logger   *logger.Logger
+	roots    map[string]*workspacePreviewRoot
+	sequence uint64
+	closed   bool
+}
+
+// NewWorkspacePreviewManager creates a manager for one agentctl instance.
+func NewWorkspacePreviewManager(log *logger.Logger) *WorkspacePreviewManager {
+	return &WorkspacePreviewManager{
+		logger: log.WithFields(zap.String("component", "workspace-preview")),
+		roots:  make(map[string]*workspacePreviewRoot),
+	}
+}
+
+// Publish stores an entry-document overlay and starts or reuses the static
+// server for its selected workspace root.
+func (m *WorkspacePreviewManager) Publish(root string, req WorkspacePreviewRequest) (WorkspacePreviewResponse, error) {
+	if len([]byte(req.Content)) > MaxWorkspacePreviewContentBytes {
+		return WorkspacePreviewResponse{}, ErrWorkspacePreviewContentTooLarge
+	}
+	relPath, err := validateWorkspacePreviewEntryPath(req.Path)
+	if err != nil {
+		return WorkspacePreviewResponse{}, err
+	}
+	canonicalRoot, err := canonicalPreviewDirectory(root)
+	if err != nil {
+		return WorkspacePreviewResponse{}, fmt.Errorf("resolve workspace preview root: %w", err)
+	}
+
+	m.mu.Lock()
+	defer m.mu.Unlock()
+	if m.closed {
+		return WorkspacePreviewResponse{}, ErrWorkspacePreviewUnavailable
+	}
+	previewRoot := m.roots[canonicalRoot]
+	if previewRoot == nil {
+		previewRoot, err = m.startRootLocked(canonicalRoot)
+		if err != nil {
+			return WorkspacePreviewResponse{}, err
+		}
+		m.roots[canonicalRoot] = previewRoot
+	}
+
+	previous := previewRoot.overlays[relPath]
+	version := previous.version + 1
+	m.sequence++
+	previewRoot.overlays[relPath] = workspacePreviewOverlay{
+		content:   req.Content,
+		version:   version,
+		published: m.sequence,
+	}
+	m.evictOldestOverlayLocked()
+	m.logger.Info("workspace preview published",
+		zap.String("root", canonicalRoot),
+		zap.String("path", relPath),
+		zap.Int("bytes", len([]byte(req.Content))),
+		zap.Uint64("version", version),
+	)
+	return WorkspacePreviewResponse{Port: previewRoot.port, Path: "/" + relPath, Version: version}, nil
+}
+
+func (m *WorkspacePreviewManager) startRootLocked(root string) (*workspacePreviewRoot, error) {
+	listener, err := net.Listen("tcp", "127.0.0.1:0")
+	if err != nil {
+		return nil, fmt.Errorf("start workspace preview listener: %w", err)
+	}
+	previewRoot := &workspacePreviewRoot{
+		path:     root,
+		port:     listener.Addr().(*net.TCPAddr).Port,
+		overlays: make(map[string]workspacePreviewOverlay),
+	}
+	previewRoot.server = &http.Server{
+		Handler: http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			m.serveRootRequest(previewRoot, w, r)
+		}),
+	}
+	go func() {
+		if serveErr := previewRoot.server.Serve(listener); serveErr != nil && !errors.Is(serveErr, http.ErrServerClosed) {
+			m.logger.Warn("workspace preview server stopped unexpectedly",
+				zap.String("root", root), zap.Int("port", previewRoot.port), zap.Error(serveErr))
+		}
+	}()
+	m.logger.Info("workspace preview server started",
+		zap.String("root", root), zap.Int("port", previewRoot.port))
+	return previewRoot, nil
+}
+
+func (m *WorkspacePreviewManager) evictOldestOverlayLocked() {
+	count := 0
+	var oldestRoot *workspacePreviewRoot
+	var oldestPath string
+	var oldestSequence uint64
+	for _, root := range m.roots {
+		for path, overlay := range root.overlays {
+			count++
+			if oldestRoot == nil || overlay.published < oldestSequence {
+				oldestRoot = root
+				oldestPath = path
+				oldestSequence = overlay.published
+			}
+		}
+	}
+	if count <= maxWorkspacePreviewOverlays || oldestRoot == nil {
+		return
+	}
+	delete(oldestRoot.overlays, oldestPath)
+	m.logger.Debug("workspace preview overlay evicted",
+		zap.String("root", oldestRoot.path), zap.String("path", oldestPath))
+}
+
+func (m *WorkspacePreviewManager) serveRootRequest(root *workspacePreviewRoot, w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Cache-Control", "no-store")
+	if r.Method != http.MethodGet && r.Method != http.MethodHead {
+		w.Header().Set("Allow", "GET, HEAD")
+		http.Error(w, http.StatusText(http.StatusMethodNotAllowed), http.StatusMethodNotAllowed)
+		return
+	}
+	relPath, err := workspacePreviewRequestPath(r.URL)
+	if err != nil {
+		http.NotFound(w, r)
+		return
+	}
+
+	m.mu.Lock()
+	overlay, hasOverlay := root.overlays[relPath]
+	m.mu.Unlock()
+	if hasOverlay {
+		serveWorkspacePreviewBytes(w, r, relPath, []byte(overlay.content))
+		return
+	}
+
+	filePath, err := resolveWorkspacePreviewFile(root.path, relPath)
+	if err != nil {
+		http.NotFound(w, r)
+		return
+	}
+	file, err := os.Open(filePath)
+	if err != nil {
+		http.NotFound(w, r)
+		return
+	}
+	defer func() { _ = file.Close() }()
+	info, err := file.Stat()
+	if err != nil || !info.Mode().IsRegular() {
+		http.NotFound(w, r)
+		return
+	}
+	setWorkspacePreviewContentType(w, relPath)
+	http.ServeContent(w, r, filepath.Base(filePath), info.ModTime(), file)
+}
+
+func serveWorkspacePreviewBytes(w http.ResponseWriter, r *http.Request, path string, content []byte) {
+	setWorkspacePreviewContentType(w, path)
+	w.Header().Set("Content-Length", fmt.Sprintf("%d", len(content)))
+	if r.Method == http.MethodHead {
+		return
+	}
+	_, _ = w.Write(content)
+}
+
+func setWorkspacePreviewContentType(w http.ResponseWriter, path string) {
+	if contentType := mime.TypeByExtension(filepath.Ext(path)); contentType != "" {
+		w.Header().Set("Content-Type", contentType)
+		return
+	}
+	w.Header().Set("Content-Type", "application/octet-stream")
+}
+
+func resolveWorkspacePreviewFile(canonicalRoot, relPath string) (string, error) {
+	candidate := filepath.Join(canonicalRoot, filepath.FromSlash(relPath))
+	resolved, err := filepath.EvalSymlinks(candidate)
+	if err != nil {
+		return "", err
+	}
+	if !previewPathWithinRoot(canonicalRoot, resolved) {
+		return "", ErrWorkspacePreviewPathInvalid
+	}
+	info, err := os.Stat(resolved)
+	if err != nil || !info.Mode().IsRegular() {
+		return "", os.ErrNotExist
+	}
+	return resolved, nil
+}
+
+func workspacePreviewRequestPath(parsed *url.URL) (string, error) {
+	escaped := parsed.EscapedPath()
+	decoded, err := url.PathUnescape(escaped)
+	if err != nil || !strings.HasPrefix(decoded, "/") {
+		return "", ErrWorkspacePreviewPathInvalid
+	}
+	relPath := strings.TrimPrefix(decoded, "/")
+	if !validWorkspacePreviewRelativePath(relPath) {
+		return "", ErrWorkspacePreviewPathInvalid
+	}
+	return relPath, nil
+}
+
+func validateWorkspacePreviewEntryPath(path string) (string, error) {
+	decodedPath, err := url.PathUnescape(path)
+	if err != nil {
+		return "", ErrWorkspacePreviewPathInvalid
+	}
+	path = decodedPath
+	if !validWorkspacePreviewRelativePath(path) {
+		return "", ErrWorkspacePreviewPathInvalid
+	}
+	ext := strings.ToLower(filepath.Ext(filepath.FromSlash(path)))
+	if ext != ".html" && ext != ".htm" {
+		return "", ErrWorkspacePreviewTypeUnsupported
+	}
+	return filepath.ToSlash(path), nil
+}
+
+func validWorkspacePreviewRelativePath(path string) bool {
+	if path == "" || strings.ContainsRune(path, '\x00') || filepath.IsAbs(filepath.FromSlash(path)) {
+		return false
+	}
+	for _, segment := range strings.Split(filepath.ToSlash(path), "/") {
+		if segment == "" || segment == "." || segment == ".." {
+			return false
+		}
+	}
+	return true
+}
+
+func canonicalPreviewDirectory(path string) (string, error) {
+	clean := filepath.Clean(path)
+	resolved, err := filepath.EvalSymlinks(clean)
+	if err != nil {
+		return "", err
+	}
+	info, err := os.Stat(resolved)
+	if err != nil {
+		return "", err
+	}
+	if !info.IsDir() {
+		return "", fmt.Errorf("preview root is not a directory")
+	}
+	return filepath.Clean(resolved), nil
+}
+
+func previewPathWithinRoot(root, candidate string) bool {
+	rel, err := filepath.Rel(root, candidate)
+	return err == nil && rel != ".." && !strings.HasPrefix(rel, ".."+string(filepath.Separator)) && !filepath.IsAbs(rel)
+}
+
+// Close stops every preview server and releases its loopback listener.
+func (m *WorkspacePreviewManager) Close(ctx context.Context) error {
+	m.mu.Lock()
+	if m.closed {
+		m.mu.Unlock()
+		return nil
+	}
+	m.closed = true
+	servers := make([]*http.Server, 0, len(m.roots))
+	for _, root := range m.roots {
+		servers = append(servers, root.server)
+	}
+	m.roots = make(map[string]*workspacePreviewRoot)
+	m.mu.Unlock()
+
+	var errs []error
+	for _, server := range servers {
+		if err := server.Shutdown(ctx); err != nil && !errors.Is(err, http.ErrServerClosed) {
+			errs = append(errs, err)
+			_ = server.Close()
+		}
+	}
+	if len(errs) > 0 {
+		return errors.Join(errs...)
+	}
+	return nil
+}
diff --git a/apps/backend/internal/agentctl/types/workspace_preview.go b/apps/backend/internal/agentctl/types/workspace_preview.go
new file mode 100644
index 0000000000..c96b247a2b
--- /dev/null
+++ b/apps/backend/internal/agentctl/types/workspace_preview.go
@@ -0,0 +1,36 @@
+package types
+
+import "fmt"
+
+const MaxWorkspacePreviewContentBytes = 5 * 1024 * 1024
+
+// WorkspacePreviewRequest is the current editor buffer to publish through
+// agentctl. The content is ephemeral and is not persisted by the client.
+type WorkspacePreviewRequest struct {
+	Repo    string `json:"repo,omitempty"`
+	Path    string `json:"path"`
+	Content string `json:"content"`
+}
+
+// WorkspacePreviewResponse identifies the live agentctl preview server and
+// the published entry document.
+type WorkspacePreviewResponse struct {
+	Port    int    `json:"port"`
+	Path    string `json:"path"`
+	Version uint64 `json:"version"`
+}
+
+// WorkspacePreviewHTTPError preserves an agentctl response status without
+// retaining response content supplied by the workspace.
+type WorkspacePreviewHTTPError struct {
+	Status int
+}
+
+// StatusCode returns the upstream HTTP status for stable handler mapping.
+func (e *WorkspacePreviewHTTPError) StatusCode() int {
+	return e.Status
+}
+
+func (e *WorkspacePreviewHTTPError) Error() string {
+	return fmt.Sprintf("workspace preview publish failed with status %d", e.Status)
+}
diff --git a/apps/backend/internal/task/handlers/process_handlers.go b/apps/backend/internal/task/handlers/process_handlers.go
index a6bf25de42..8b49537e95 100644
--- a/apps/backend/internal/task/handlers/process_handlers.go
+++ b/apps/backend/internal/task/handlers/process_handlers.go
@@ -68,6 +68,7 @@ func RegisterProcessRoutes(
 	session.POST("/set-model", handlers.httpSetSessionModel)
 	session.POST("/set-config-option", handlers.httpSetSessionConfigOption)
 	session.POST("/authenticate", handlers.httpAuthenticate)
+	session.POST("/html-previews", handlers.httpPublishWorkspacePreview)
 	return handlers
 }
 
diff --git a/apps/backend/internal/task/handlers/session_scope_http_test.go b/apps/backend/internal/task/handlers/session_scope_http_test.go
index 4aa0359101..f6a345bd33 100644
--- a/apps/backend/internal/task/handlers/session_scope_http_test.go
+++ b/apps/backend/internal/task/handlers/session_scope_http_test.go
@@ -108,6 +108,7 @@ func TestProcessRoutesDenyForeignSession(t *testing.T) {
 		"set-model":         h.httpSetSessionModel,
 		"set-config-option": h.httpSetSessionConfigOption,
 		"authenticate":      h.httpAuthenticate,
+		"publish-preview":   h.httpPublishWorkspacePreview,
 		"stop-process":      h.httpStopProcessByID,
 	}
 	for name, handler := range routes {
diff --git a/apps/backend/internal/task/handlers/workspace_preview_handlers.go b/apps/backend/internal/task/handlers/workspace_preview_handlers.go
new file mode 100644
index 0000000000..74e8686575
--- /dev/null
+++ b/apps/backend/internal/task/handlers/workspace_preview_handlers.go
@@ -0,0 +1,119 @@
+package handlers
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+
+	agentctltypes "github.com/kandev/kandev/internal/agentctl/types"
+	"go.uber.org/zap"
+)
+
+const maxWorkspacePreviewRequestBytes = 32 * 1024 * 1024
+
+type httpWorkspacePreviewRequest struct {
+	Repo    string `json:"repo,omitempty"`
+	Path    string `json:"path"`
+	Content string `json:"content"`
+}
+
+type workspacePreviewClient interface {
+	PublishWorkspacePreview(
+		context.Context, agentctltypes.WorkspacePreviewRequest,
+	) (agentctltypes.WorkspacePreviewResponse, error)
+}
+
+func (h *ProcessHandlers) httpPublishWorkspacePreview(c *gin.Context) {
+	sessionID := c.Param("id")
+	if sessionID == "" {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "session_id is required"})
+		return
+	}
+	if h.denySessionAccess(c, sessionID) {
+		return
+	}
+	if c.Request.ContentLength > maxWorkspacePreviewRequestBytes {
+		c.JSON(http.StatusRequestEntityTooLarge, gin.H{"error": "workspace preview request is too large"})
+		return
+	}
+	c.Request.Body = http.MaxBytesReader(c.Writer, c.Request.Body, maxWorkspacePreviewRequestBytes)
+	var req httpWorkspacePreviewRequest
+	if err := json.NewDecoder(c.Request.Body).Decode(&req); err != nil {
+		var maxBytesError *http.MaxBytesError
+		if errors.As(err, &maxBytesError) {
+			c.JSON(http.StatusRequestEntityTooLarge, gin.H{"error": "workspace preview request is too large"})
+			return
+		}
+		c.JSON(http.StatusBadRequest, gin.H{"error": "invalid workspace preview request"})
+		return
+	}
+	if len([]byte(req.Content)) > agentctltypes.MaxWorkspacePreviewContentBytes {
+		c.JSON(http.StatusRequestEntityTooLarge, gin.H{"error": "workspace preview content exceeds 5 MiB"})
+		return
+	}
+
+	session, err := h.service.GetTaskSession(c.Request.Context(), sessionID)
+	if err != nil {
+		handleNotFound(c, h.logger, err, "task session not found")
+		return
+	}
+	if !h.ensureAgentctlReady(c, session, sessionID) {
+		return
+	}
+
+	client, release, ok := h.workspacePreviewClient(c, sessionID)
+	if !ok {
+		return
+	}
+	defer release()
+	response, err := client.PublishWorkspacePreview(c.Request.Context(), agentctltypes.WorkspacePreviewRequest{
+		Repo:    req.Repo,
+		Path:    req.Path,
+		Content: req.Content,
+	})
+	if err != nil {
+		h.respondWorkspacePreviewPublishError(c, sessionID, err)
+		return
+	}
+	c.JSON(http.StatusOK, response)
+}
+
+func (h *ProcessHandlers) respondWorkspacePreviewPublishError(c *gin.Context, sessionID string, err error) {
+	status := http.StatusBadGateway
+	message := "workspace preview publish failed"
+	var statusErr *agentctltypes.WorkspacePreviewHTTPError
+	if errors.As(err, &statusErr) {
+		switch statusErr.StatusCode() {
+		case http.StatusBadRequest:
+			status = http.StatusBadRequest
+			message = "invalid workspace preview request"
+		case http.StatusRequestEntityTooLarge:
+			status = http.StatusRequestEntityTooLarge
+			message = "workspace preview content exceeds 5 MiB"
+		case http.StatusServiceUnavailable:
+			status = http.StatusServiceUnavailable
+			message = "workspace preview unavailable"
+		}
+	}
+	h.logger.Warn("failed to publish workspace preview", zap.Error(err), zap.String("session_id", sessionID))
+	c.JSON(status, gin.H{"error": message})
+}
+
+// workspacePreviewClient resolves the session's agentctl client, responding
+// with 503 when the session has no live execution to publish into.
+func (h *ProcessHandlers) workspacePreviewClient(c *gin.Context, sessionID string) (workspacePreviewClient, func(), bool) {
+	execution, err := h.lifecycleMgr.GetOrEnsureExecution(c.Request.Context(), sessionID)
+	if err != nil || execution == nil {
+		c.JSON(http.StatusServiceUnavailable, gin.H{"error": "agentctl not ready"})
+		return nil, func() {}, false
+	}
+	client, release := execution.AcquireAgentCtlClient()
+	if client == nil {
+		c.JSON(http.StatusServiceUnavailable, gin.H{"error": "agentctl not ready"})
+		return nil, func() {}, false
+	}
+	return client, release, true
+}
diff --git a/apps/backend/internal/task/handlers/workspace_preview_test.go b/apps/backend/internal/task/handlers/workspace_preview_test.go
new file mode 100644
index 0000000000..67150fff79
--- /dev/null
+++ b/apps/backend/internal/task/handlers/workspace_preview_test.go
@@ -0,0 +1,212 @@
+package handlers
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"net/http"
+	"net/http/httptest"
+	"strings"
+	"testing"
+
+	"github.com/gin-gonic/gin"
+
+	"github.com/kandev/kandev/internal/agent/registry"
+	agentctlclient "github.com/kandev/kandev/internal/agent/runtime/agentctl"
+	"github.com/kandev/kandev/internal/agent/runtime/lifecycle"
+	"github.com/kandev/kandev/internal/common/logger"
+	"github.com/kandev/kandev/internal/task/models"
+	"github.com/kandev/kandev/internal/task/service"
+)
+
+func TestHTTPPublishWorkspacePreviewAuthorizesReadySessionAndForwardsBuffer(t *testing.T) {
+	var received agentctlclient.WorkspacePreviewRequest
+	agentctlServer := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch r.URL.Path {
+		case "/health":
+			w.WriteHeader(http.StatusOK)
+		case "/api/v1/workspace/html-previews":
+			if err := json.NewDecoder(r.Body).Decode(&received); err != nil {
+				t.Errorf("decode forwarded preview request: %v", err)
+				w.WriteHeader(http.StatusBadRequest)
+				return
+			}
+			_ = json.NewEncoder(w).Encode(agentctlclient.WorkspacePreviewResponse{
+				Port: 43127, Path: "/site/index.html", Version: 3,
+			})
+		default:
+			w.WriteHeader(http.StatusNotFound)
+		}
+	}))
+	t.Cleanup(agentctlServer.Close)
+
+	log, err := logger.NewLogger(logger.LoggingConfig{Level: "error"})
+	if err != nil {
+		t.Fatal(err)
+	}
+	lifecycleMgr := lifecycle.NewManager(
+		registry.NewRegistry(log), nil, nil, nil, nil, nil,
+		lifecycle.ExecutorFallbackWarn, "", log,
+	)
+	execution := &lifecycle.AgentExecution{ID: "exec-1", TaskID: "task-1", SessionID: "session-1"}
+	parsedClient := newAgentctlClient(t, agentctlServer.URL, log)
+	execution.SetAgentCtlClientForTesting(parsedClient)
+	if err := lifecycleMgr.ExecutionStoreForTesting().Add(execution); err != nil {
+		t.Fatal(err)
+	}
+
+	repo := &mockRepository{sessions: map[string]*models.TaskSession{
+		"session-1": {ID: "session-1", TaskID: "task-1"},
+	}}
+	svc := service.NewService(service.Repos{
+		Workspaces: repo, Tasks: repo, TaskRepos: repo,
+		Workflows: repo, Messages: repo, Turns: repo,
+		Sessions: repo, GitSnapshots: repo, RepoEntities: repo,
+		Executors: repo, Environments: repo, TaskEnvironments: repo,
+		Reviews: repo,
+	}, nil, log, service.RepositoryDiscoveryConfig{})
+	h := &ProcessHandlers{service: svc, lifecycleMgr: lifecycleMgr, logger: log}
+
+	body, err := json.Marshal(map[string]string{
+		"repo":    "frontend",
+		"path":    "site/index.html",
+		"content": "<body>unsaved</body>",
+	})
+	if err != nil {
+		t.Fatal(err)
+	}
+	rec := httptest.NewRecorder()
+	c, _ := gin.CreateTestContext(rec)
+	c.Request = httptest.NewRequest(http.MethodPost, "/api/v1/task-sessions/session-1/html-previews", bytes.NewReader(body))
+	c.Request = c.Request.WithContext(context.Background())
+	c.Params = gin.Params{{Key: "id", Value: "session-1"}}
+
+	h.httpPublishWorkspacePreview(c)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, body = %s", rec.Code, rec.Body.String())
+	}
+	var response agentctlclient.WorkspacePreviewResponse
+	if err := json.Unmarshal(rec.Body.Bytes(), &response); err != nil {
+		t.Fatalf("decode response: %v", err)
+	}
+	if response.Port != 43127 || response.Path != "/site/index.html" || response.Version != 3 {
+		t.Fatalf("response = %+v, want forwarded response", response)
+	}
+	if received.Repo != "frontend" || received.Path != "site/index.html" || received.Content != "<body>unsaved</body>" {
+		t.Fatalf("forwarded request = %+v, want current buffer", received)
+	}
+}
+
+func TestHTTPPublishWorkspacePreviewPropagatesAgentctlValidationStatuses(t *testing.T) {
+	for _, status := range []int{http.StatusBadRequest, http.StatusRequestEntityTooLarge, http.StatusServiceUnavailable} {
+		t.Run(http.StatusText(status), func(t *testing.T) {
+			h := newWorkspacePreviewHandlers(t, func(w http.ResponseWriter, _ *http.Request) {
+				w.WriteHeader(status)
+				_, _ = w.Write([]byte("source content must not escape the handler error"))
+			}, true)
+			rec := callWorkspacePreviewHandler(t, h, strings.NewReader(`{"path":"index.html","content":"<p>current</p>"}`))
+			if rec.Code != status {
+				t.Fatalf("status = %d, want agentctl status %d; body=%s", rec.Code, status, rec.Body.String())
+			}
+			if strings.Contains(rec.Body.String(), "source content must not escape") {
+				t.Fatalf("handler exposed agentctl response body: %s", rec.Body.String())
+			}
+		})
+	}
+}
+
+func TestHTTPPublishWorkspacePreviewMapsMalformedAgentctlResponseToBadGateway(t *testing.T) {
+	h := newWorkspacePreviewHandlers(t, func(w http.ResponseWriter, _ *http.Request) {
+		w.WriteHeader(http.StatusOK)
+		_, _ = w.Write([]byte("not-json"))
+	}, true)
+
+	rec := callWorkspacePreviewHandler(t, h, strings.NewReader(`{"path":"index.html","content":"<p>current</p>"}`))
+	if rec.Code != http.StatusBadGateway {
+		t.Fatalf("status = %d, want 502; body=%s", rec.Code, rec.Body.String())
+	}
+}
+
+func TestHTTPPublishWorkspacePreviewRejectsMalformedAndOversizedRequests(t *testing.T) {
+	h := newWorkspacePreviewHandlers(t, func(w http.ResponseWriter, _ *http.Request) {
+		t.Error("agentctl should not receive invalid requests")
+		w.WriteHeader(http.StatusOK)
+	}, true)
+
+	malformed := callWorkspacePreviewHandler(t, h, strings.NewReader(`{"path":`))
+	if malformed.Code != http.StatusBadRequest {
+		t.Fatalf("malformed status = %d, want 400", malformed.Code)
+	}
+
+	oversized := httptest.NewRecorder()
+	c, _ := gin.CreateTestContext(oversized)
+	c.Request = httptest.NewRequest(http.MethodPost, "/api/v1/task-sessions/session-1/html-previews", strings.NewReader(`{}`))
+	c.Request.ContentLength = maxWorkspacePreviewRequestBytes + 1
+	c.Params = gin.Params{{Key: "id", Value: "session-1"}}
+	h.httpPublishWorkspacePreview(c)
+	if oversized.Code != http.StatusRequestEntityTooLarge {
+		t.Fatalf("oversized status = %d, want 413", oversized.Code)
+	}
+}
+
+func TestHTTPPublishWorkspacePreviewReportsUnavailableAgentctl(t *testing.T) {
+	h := newWorkspacePreviewHandlers(t, nil, false)
+	rec := callWorkspacePreviewHandler(t, h, strings.NewReader(`{"path":"index.html","content":"<p>current</p>"}`))
+	if rec.Code != http.StatusServiceUnavailable {
+		t.Fatalf("status = %d, want 503; body=%s", rec.Code, rec.Body.String())
+	}
+}
+
+func callWorkspacePreviewHandler(t *testing.T, h *ProcessHandlers, body *strings.Reader) *httptest.ResponseRecorder {
+	t.Helper()
+	rec := httptest.NewRecorder()
+	c, _ := gin.CreateTestContext(rec)
+	c.Request = httptest.NewRequest(http.MethodPost, "/api/v1/task-sessions/session-1/html-previews", body)
+	c.Request = c.Request.WithContext(context.Background())
+	c.Request.Header.Set("Content-Type", "application/json")
+	c.Params = gin.Params{{Key: "id", Value: "session-1"}}
+	h.httpPublishWorkspacePreview(c)
+	return rec
+}
+
+func newWorkspacePreviewHandlers(t *testing.T, previewHandler http.HandlerFunc, attachClient bool) *ProcessHandlers {
+	t.Helper()
+	agentctlServer := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		switch r.URL.Path {
+		case "/health":
+			w.WriteHeader(http.StatusOK)
+		case "/api/v1/workspace/html-previews":
+			if previewHandler == nil {
+				w.WriteHeader(http.StatusServiceUnavailable)
+				return
+			}
+			previewHandler(w, r)
+		default:
+			w.WriteHeader(http.StatusNotFound)
+		}
+	}))
+	t.Cleanup(agentctlServer.Close)
+
+	log := newTestLogger(t)
+	lifecycleMgr := newLifecycleManager(t, log)
+	execution := &lifecycle.AgentExecution{ID: "exec-1", TaskID: "task-1", SessionID: "session-1"}
+	if attachClient {
+		execution.SetAgentCtlClientForTesting(newAgentctlClient(t, agentctlServer.URL, log))
+	}
+	if err := lifecycleMgr.ExecutionStoreForTesting().Add(execution); err != nil {
+		t.Fatal(err)
+	}
+
+	repo := &mockRepository{sessions: map[string]*models.TaskSession{
+		"session-1": {ID: "session-1", TaskID: "task-1"},
+	}}
+	svc := service.NewService(service.Repos{
+		Workspaces: repo, Tasks: repo, TaskRepos: repo,
+		Workflows: repo, Messages: repo, Turns: repo,
+		Sessions: repo, GitSnapshots: repo, RepoEntities: repo,
+		Executors: repo, Environments: repo, TaskEnvironments: repo,
+		Reviews: repo,
+	}, nil, log, service.RepositoryDiscoveryConfig{})
+	return &ProcessHandlers{service: svc, lifecycleMgr: lifecycleMgr, logger: log}
+}
diff --git a/apps/web/components/editors/codemirror/codemirror-code-editor.preview.test.tsx b/apps/web/components/editors/codemirror/codemirror-code-editor.preview.test.tsx
new file mode 100644
index 0000000000..d5faa33299
--- /dev/null
+++ b/apps/web/components/editors/codemirror/codemirror-code-editor.preview.test.tsx
@@ -0,0 +1,58 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { TooltipProvider } from "@kandev/ui/tooltip";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@uiw/react-codemirror", () => ({
+  default: () => <div data-testid="codemirror" />,
+}));
+
+vi.mock("./use-codemirror-editor-state", () => ({
+  useCodeMirrorEditorState: () => ({
+    comments: [],
+    diffStats: null,
+    extensions: [],
+    floatingButtonPos: null,
+    textSelection: null,
+    commentView: null,
+    wrapEnabled: false,
+    setWrapEnabled: vi.fn(),
+    handleChange: vi.fn(),
+  }),
+}));
+
+vi.mock("./use-codemirror-walkthrough-range", () => ({
+  useCodeMirrorWalkthroughRange: () => null,
+}));
+
+vi.mock("@/components/editors/external-vcs-file-link", () => ({
+  ExternalVcsFileLink: () => null,
+  useExternalVcsFileStatus: () => null,
+}));
+
+import { CodeMirrorCodeEditor } from "./codemirror-code-editor";
+
+afterEach(cleanup);
+
+describe("CodeMirrorCodeEditor preview action", () => {
+  it("labels and invokes HTML preview", () => {
+    const onPreviewHtml = vi.fn();
+    render(
+      <TooltipProvider>
+        <CodeMirrorCodeEditor
+          path="reports/index.html"
+          content="<h1>Report</h1>"
+          originalContent=""
+          isDirty={false}
+          isSaving={false}
+          previewKind="html"
+          onPreviewHtml={onPreviewHtml}
+          onChange={vi.fn()}
+          onSave={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+
+    screen.getByRole("button", { name: "Preview HTML" }).click();
+    expect(onPreviewHtml).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/web/components/editors/codemirror/codemirror-code-editor.tsx b/apps/web/components/editors/codemirror/codemirror-code-editor.tsx
index c6804e5dac..60851f5d14 100644
--- a/apps/web/components/editors/codemirror/codemirror-code-editor.tsx
+++ b/apps/web/components/editors/codemirror/codemirror-code-editor.tsx
@@ -30,6 +30,7 @@ import {
 import { registerCodeMirrorCursorRevealer } from "@/hooks/file-editor-cursor";
 import { useCodeMirrorEditorState } from "./use-codemirror-editor-state";
 import { useCodeMirrorWalkthroughRange } from "./use-codemirror-walkthrough-range";
+import type { FilePreviewKind } from "@/lib/utils/file-types";
 import {
   clearCodeMirrorCursorFlash,
   codeMirrorCursorFlashExtension,
@@ -55,7 +56,10 @@ type FileEditorContentProps = {
   worktreePath?: string;
   repo?: string;
   enableComments?: boolean;
-  onToggleMarkdownPreview?: () => void;
+  previewKind?: FilePreviewKind;
+  onTogglePreview?: () => void;
+  onPreviewHtml?: () => void;
+  isPublishingHtmlPreview?: boolean;
   onChange: (newContent: string) => void;
   onSave: () => void;
   onReloadFromAgent?: () => void;
@@ -219,22 +223,49 @@ function CodeMirrorSaveButton({
   );
 }
 
-function CodeMirrorMarkdownPreviewButton({ onToggle }: { onToggle: () => void }) {
+function CodeMirrorPreviewButton({
+  previewKind,
+  onToggle,
+  onPreviewHtml,
+  isPublishingHtmlPreview,
+}: {
+  previewKind: FilePreviewKind;
+  onToggle?: () => void;
+  onPreviewHtml?: () => void;
+  isPublishingHtmlPreview?: boolean;
+}) {
   const { t } = useTranslation();
+  if (previewKind === "none") return null;
+  const isHtml = previewKind === "html";
+  const action = isHtml ? onPreviewHtml : onToggle;
+  if (!action) return null;
+  const label = isHtml ? t("editors:previewHtml") : t("editors:previewMarkdown");
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
           size="sm"
           variant="ghost"
-          onClick={onToggle}
+          onClick={action}
+          disabled={isHtml && isPublishingHtmlPreview}
+          aria-label={label}
+          title={isHtml ? t("task:htmlPreviewTrustedCode") : undefined}
           className="h-8 w-8 p-0 cursor-pointer"
-          data-testid="markdown-preview-toggle"
+          data-testid={isHtml ? "html-preview-toggle" : "markdown-preview-toggle"}
         >
-          <IconEye className="h-4 w-4" />
+          {isHtml && isPublishingHtmlPreview ? (
+            <IconLoader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <IconEye className="h-4 w-4" />
+          )}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>{t("editors:previewMarkdown")}</TooltipContent>
+      <TooltipContent>
+        <p>{label}</p>
+        {isHtml && (
+          <p className="mt-1 max-w-xs text-muted-foreground">{t("task:htmlPreviewTrustedCode")}</p>
+        )}
+      </TooltipContent>
     </Tooltip>
   );
 }
@@ -259,7 +290,10 @@ function CodeMirrorToolbar({
   onReloadFromAgent,
   onDelete,
   onDownload,
-  onToggleMarkdownPreview,
+  previewKind = "none",
+  onTogglePreview,
+  onPreviewHtml,
+  isPublishingHtmlPreview,
 }: {
   path: string;
   worktreePath?: string;
@@ -279,7 +313,10 @@ function CodeMirrorToolbar({
   onReloadFromAgent?: () => void;
   onDelete?: () => void;
   onDownload?: () => void;
-  onToggleMarkdownPreview?: () => void;
+  previewKind?: FilePreviewKind;
+  onTogglePreview?: () => void;
+  onPreviewHtml?: () => void;
+  isPublishingHtmlPreview?: boolean;
 }) {
   const fileStatus = useExternalVcsFileStatus(path, sessionId, repositoryName);
   return (
@@ -303,8 +340,13 @@ function CodeMirrorToolbar({
             sessionId={sessionId}
             commentCount={commentCount}
           />
-          {onToggleMarkdownPreview && (
-            <CodeMirrorMarkdownPreviewButton onToggle={onToggleMarkdownPreview} />
+          {(onTogglePreview || onPreviewHtml) && (
+            <CodeMirrorPreviewButton
+              previewKind={previewKind}
+              onToggle={onTogglePreview}
+              onPreviewHtml={onPreviewHtml}
+              isPublishingHtmlPreview={isPublishingHtmlPreview}
+            />
           )}
           <CodeMirrorWrapButton wrapEnabled={wrapEnabled} onToggleWrap={onToggleWrap} />
           <CodeMirrorReloadButton
@@ -431,7 +473,10 @@ export function CodeMirrorCodeEditor(props: FileEditorContentProps) {
     worktreePath,
     repo,
     enableComments = false,
-    onToggleMarkdownPreview,
+    previewKind,
+    onTogglePreview,
+    onPreviewHtml,
+    isPublishingHtmlPreview,
     onSave,
     onReloadFromAgent,
     onDelete,
@@ -461,7 +506,10 @@ export function CodeMirrorCodeEditor(props: FileEditorContentProps) {
         onReloadFromAgent={onReloadFromAgent}
         onDelete={onDelete}
         onDownload={onDownload}
-        onToggleMarkdownPreview={onToggleMarkdownPreview}
+        previewKind={previewKind}
+        onTogglePreview={onTogglePreview}
+        onPreviewHtml={onPreviewHtml}
+        isPublishingHtmlPreview={isPublishingHtmlPreview}
       />
       <div ref={editorAreaRef} className="flex-1 overflow-hidden relative">
         <CodeMirror
diff --git a/apps/web/components/editors/monaco/monaco-code-editor.tsx b/apps/web/components/editors/monaco/monaco-code-editor.tsx
index b1caa083c3..3166e9ad4f 100644
--- a/apps/web/components/editors/monaco/monaco-code-editor.tsx
+++ b/apps/web/components/editors/monaco/monaco-code-editor.tsx
@@ -18,6 +18,7 @@ import { useMonacoWalkthroughRange } from "./use-monaco-walkthrough-range";
 import { useMonacoCursorNavigation } from "./use-monaco-cursor-navigation";
 import { initMonacoThemes } from "./monaco-init";
 import { useTranslation } from "react-i18next";
+import type { FilePreviewKind } from "@/lib/utils/file-types";
 
 initMonacoThemes();
 
@@ -33,7 +34,10 @@ type MonacoCodeEditorProps = {
   worktreePath?: string;
   repo?: string;
   enableComments?: boolean;
-  onToggleMarkdownPreview?: () => void;
+  previewKind?: FilePreviewKind;
+  onTogglePreview?: () => void;
+  onPreviewHtml?: () => void;
+  isPublishingHtmlPreview?: boolean;
   onChange: (newContent: string) => void;
   onSave: () => void;
   onReloadFromAgent?: () => void;
@@ -191,8 +195,51 @@ function EditorLoading() {
   );
 }
 
-export function MonacoCodeEditor(props: MonacoCodeEditorProps) {
+function MonacoFloatingCommentButton({ state }: { state: EditorState }) {
   const { t } = useTranslation();
+  if (!state.floatingButtonPos || state.formZoneRange) return null;
+  return (
+    <Button
+      size="sm"
+      variant="secondary"
+      className="floating-comment-btn absolute z-50 gap-1.5 shadow-lg animate-in fade-in-0 zoom-in-95 duration-100 cursor-pointer"
+      style={{ left: state.floatingButtonPos.x + 4, top: state.floatingButtonPos.y + 2 }}
+      onMouseDown={(e) => e.stopPropagation()}
+      onClick={state.handleFloatingButtonClick}
+    >
+      <IconMessagePlus className="h-3.5 w-3.5" />
+      {t("editors:comment")}
+    </Button>
+  );
+}
+
+type MonacoEditorViewProps = {
+  props: MonacoCodeEditorProps;
+  wrapperRef: React.RefObject<HTMLDivElement | null>;
+  editorAreaRef: React.RefObject<HTMLDivElement | null>;
+  language: string;
+  state: EditorState;
+  lsp: ReturnType<typeof useMonacoEditorLsp>;
+  diffStats: { additions: number; deletions: number } | null;
+  options: typeof EDITOR_OPTIONS & { wordWrap: "on" | "off" };
+  resolvedTheme: string | undefined;
+  showLspStatus: boolean;
+  walkthroughRange: ReturnType<typeof useMonacoWalkthroughRange>;
+};
+
+function MonacoEditorView({
+  props,
+  wrapperRef,
+  editorAreaRef,
+  language,
+  state,
+  lsp,
+  diffStats,
+  options,
+  resolvedTheme,
+  showLspStatus,
+  walkthroughRange,
+}: MonacoEditorViewProps) {
   const {
     path,
     content,
@@ -205,16 +252,6 @@ export function MonacoCodeEditor(props: MonacoCodeEditorProps) {
     repo,
     enableComments = false,
   } = props;
-  const { resolvedTheme } = useTheme();
-  const lspStatusPlacement = useLspStatusPlacement();
-  const { wrapperRef, language, state, lsp, diffStats, options } = useMonacoCodeEditorSetup(props);
-  const editorAreaRef = useRef<HTMLDivElement>(null);
-  const walkthroughRange = useMonacoWalkthroughRange({
-    editor: state.editorInstance,
-    editorAreaRef,
-    path,
-    repo,
-  });
 
   return (
     <div ref={wrapperRef} className="flex h-full flex-col rounded-lg">
@@ -235,7 +272,7 @@ export function MonacoCodeEditor(props: MonacoCodeEditorProps) {
         lspStatus={lsp.lspStatus}
         lspProgress={lsp.lspProgress}
         lspLanguage={lsp.lspLanguage}
-        showLspStatus={lspStatusPlacement === "toolbar"}
+        showLspStatus={showLspStatus}
         onToggleLsp={lsp.toggleLsp}
         onToggleWrap={() => state.setWrapEnabled(!state.wrapEnabled)}
         onToggleDiffIndicators={() => state.setShowDiffIndicators(!state.showDiffIndicators)}
@@ -243,7 +280,10 @@ export function MonacoCodeEditor(props: MonacoCodeEditorProps) {
         onReloadFromAgent={props.onReloadFromAgent}
         onDelete={props.onDelete}
         onDownload={props.onDownload}
-        onToggleMarkdownPreview={props.onToggleMarkdownPreview}
+        previewKind={props.previewKind}
+        onTogglePreview={props.onTogglePreview}
+        onPreviewHtml={props.onPreviewHtml}
+        isPublishingHtmlPreview={props.isPublishingHtmlPreview}
       />
       <div className="flex-1 overflow-hidden relative" ref={editorAreaRef}>
         <Editor
@@ -273,20 +313,38 @@ export function MonacoCodeEditor(props: MonacoCodeEditorProps) {
             }}
           />
         ) : null}
-        {state.floatingButtonPos && !state.formZoneRange && (
-          <Button
-            size="sm"
-            variant="secondary"
-            className="floating-comment-btn absolute z-50 gap-1.5 shadow-lg animate-in fade-in-0 zoom-in-95 duration-100 cursor-pointer"
-            style={{ left: state.floatingButtonPos.x + 4, top: state.floatingButtonPos.y + 2 }}
-            onMouseDown={(e) => e.stopPropagation()}
-            onClick={state.handleFloatingButtonClick}
-          >
-            <IconMessagePlus className="h-3.5 w-3.5" />
-            {t("editors:comment")}
-          </Button>
-        )}
+        <MonacoFloatingCommentButton state={state} />
       </div>
     </div>
   );
 }
+
+export function MonacoCodeEditor(props: MonacoCodeEditorProps) {
+  const { path, repo } = props;
+  const { wrapperRef, language, state, lsp, diffStats, options } = useMonacoCodeEditorSetup(props);
+  const { resolvedTheme } = useTheme();
+  const lspStatusPlacement = useLspStatusPlacement();
+  const editorAreaRef = useRef<HTMLDivElement>(null);
+  const walkthroughRange = useMonacoWalkthroughRange({
+    editor: state.editorInstance,
+    editorAreaRef,
+    path,
+    repo,
+  });
+
+  return (
+    <MonacoEditorView
+      props={props}
+      wrapperRef={wrapperRef}
+      editorAreaRef={editorAreaRef}
+      language={language}
+      state={state}
+      lsp={lsp}
+      diffStats={diffStats}
+      options={options}
+      resolvedTheme={resolvedTheme}
+      showLspStatus={lspStatusPlacement === "toolbar"}
+      walkthroughRange={walkthroughRange}
+    />
+  );
+}
diff --git a/apps/web/components/editors/monaco/monaco-editor-toolbar.test.tsx b/apps/web/components/editors/monaco/monaco-editor-toolbar.test.tsx
index a770b13aa7..5a39942ae2 100644
--- a/apps/web/components/editors/monaco/monaco-editor-toolbar.test.tsx
+++ b/apps/web/components/editors/monaco/monaco-editor-toolbar.test.tsx
@@ -100,6 +100,44 @@ describe("MonacoEditorToolbar external file action", () => {
   });
 });
 
+describe("MonacoEditorToolbar preview action", () => {
+  const baseProps = {
+    path: "reports/index.html",
+    isDirty: false,
+    isSaving: false,
+    diffStats: null,
+    wrapEnabled: false,
+    showDiffIndicators: false,
+    enableComments: false,
+    sessionId: "session-1",
+    commentCount: 0,
+    lspStatus: { state: "disabled" } as const,
+    lspProgress: {
+      initializingSince: null,
+      active: [],
+      completed: null,
+      hasReportedProgress: false,
+    },
+    lspLanguage: null,
+    onToggleLsp: vi.fn(),
+    onToggleWrap: vi.fn(),
+    onToggleDiffIndicators: vi.fn(),
+    onSave: vi.fn(),
+  };
+
+  it("labels and invokes HTML preview", () => {
+    const onPreviewHtml = vi.fn();
+    render(
+      <TooltipProvider>
+        <MonacoEditorToolbar {...baseProps} previewKind="html" onPreviewHtml={onPreviewHtml} />
+      </TooltipProvider>,
+    );
+
+    screen.getByRole("button", { name: "Preview HTML" }).click();
+    expect(onPreviewHtml).toHaveBeenCalledOnce();
+  });
+});
+
 describe("MonacoEditorToolbar download action", () => {
   const baseProps = {
     path: "assets/report.pdf",
diff --git a/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx b/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx
index bbc9a1db7f..d70d810a79 100644
--- a/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx
+++ b/apps/web/components/editors/monaco/monaco-editor-toolbar.tsx
@@ -24,6 +24,7 @@ import {
 } from "@/components/editors/external-vcs-file-link";
 import { PanelHeaderBarSplit } from "@/components/task/panel-primitives";
 import { LspStatusButton } from "@/components/editors/lsp-status-button";
+import type { FilePreviewKind } from "@/lib/utils/file-types";
 import type { LspStatus } from "@/lib/lsp/lsp-client-manager";
 import type { LspProgressSnapshot } from "@/lib/lsp/lsp-progress";
 import { useTranslation } from "react-i18next";
@@ -232,22 +233,49 @@ function DownloadButton({ onDownload }: { onDownload?: () => void }) {
   );
 }
 
-function MarkdownPreviewButton({ onTogglePreview }: { onTogglePreview: () => void }) {
+function PreviewButton({
+  previewKind,
+  onTogglePreview,
+  onPreviewHtml,
+  isPublishingHtmlPreview,
+}: {
+  previewKind: FilePreviewKind;
+  onTogglePreview?: () => void;
+  onPreviewHtml?: () => void;
+  isPublishingHtmlPreview?: boolean;
+}) {
   const { t } = useTranslation();
+  if (previewKind === "none") return null;
+  const isHtml = previewKind === "html";
+  const action = isHtml ? onPreviewHtml : onTogglePreview;
+  if (!action) return null;
+  const label = isHtml ? t("editors:previewHtml") : t("editors:previewMarkdown");
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
           size="sm"
           variant="ghost"
-          onClick={onTogglePreview}
+          onClick={action}
+          disabled={isHtml && isPublishingHtmlPreview}
+          aria-label={label}
+          title={isHtml ? t("task:htmlPreviewTrustedCode") : undefined}
           className="h-8 w-8 p-0 cursor-pointer"
-          data-testid="markdown-preview-toggle"
+          data-testid={isHtml ? "html-preview-toggle" : "markdown-preview-toggle"}
         >
-          <IconEye className="h-4 w-4" />
+          {isHtml && isPublishingHtmlPreview ? (
+            <IconLoader2 className="h-4 w-4 animate-spin" />
+          ) : (
+            <IconEye className="h-4 w-4" />
+          )}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>{t("editors:previewMarkdown")}</TooltipContent>
+      <TooltipContent>
+        <p>{label}</p>
+        {isHtml && (
+          <p className="mt-1 max-w-xs text-muted-foreground">{t("task:htmlPreviewTrustedCode")}</p>
+        )}
+      </TooltipContent>
     </Tooltip>
   );
 }
@@ -277,7 +305,10 @@ interface MonacoEditorToolbarProps {
   onReloadFromAgent?: () => void;
   onDelete?: () => void;
   onDownload?: () => void;
-  onToggleMarkdownPreview?: () => void;
+  previewKind?: FilePreviewKind;
+  onTogglePreview?: () => void;
+  onPreviewHtml?: () => void;
+  isPublishingHtmlPreview?: boolean;
 }
 
 export function MonacoEditorToolbar({
@@ -305,7 +336,10 @@ export function MonacoEditorToolbar({
   onReloadFromAgent,
   onDelete,
   onDownload,
-  onToggleMarkdownPreview,
+  previewKind = "none",
+  onTogglePreview,
+  onPreviewHtml,
+  isPublishingHtmlPreview,
 }: MonacoEditorToolbarProps) {
   const fileStatus = useExternalVcsFileStatus(path, sessionId, repositoryName);
   return (
@@ -339,8 +373,13 @@ export function MonacoEditorToolbar({
               onToggle={onToggleDiffIndicators}
             />
           )}
-          {onToggleMarkdownPreview && (
-            <MarkdownPreviewButton onTogglePreview={onToggleMarkdownPreview} />
+          {(onTogglePreview || onPreviewHtml) && (
+            <PreviewButton
+              previewKind={previewKind}
+              onTogglePreview={onTogglePreview}
+              onPreviewHtml={onPreviewHtml}
+              isPublishingHtmlPreview={isPublishingHtmlPreview}
+            />
           )}
           <WrapButton wrapEnabled={wrapEnabled} onToggleWrap={onToggleWrap} />
           <ReloadFromAgentButton
diff --git a/apps/web/components/task/add-workspace-sources/add-workspace-sources-dialog.test.tsx b/apps/web/components/task/add-workspace-sources/add-workspace-sources-dialog.test.tsx
index 4117a7986d..b58c65eaa8 100644
--- a/apps/web/components/task/add-workspace-sources/add-workspace-sources-dialog.test.tsx
+++ b/apps/web/components/task/add-workspace-sources/add-workspace-sources-dialog.test.tsx
@@ -67,6 +67,11 @@ function openRepositoryMenu() {
   return trigger;
 }
 
+async function selectRepositoryMenuItem(label: string) {
+  fireEvent.click(await screen.findByRole("menuitem", { name: label }));
+  await waitFor(() => expect(screen.queryByRole("menuitem", { name: label })).toBeNull());
+}
+
 function Harness(props: { makeTurnActive?: boolean; executorType?: string | null }) {
   const makeTurnActive = props.makeTurnActive ?? false;
   const executorType = Object.hasOwn(props, "executorType") ? props.executorType : "worktree";
@@ -194,7 +199,7 @@ describe("AddWorkspaceSourcesDialog repository discovery", () => {
     fireEvent.click(screen.getByRole("button", { name: ADD_SOURCES_LABEL }));
     expect(screen.queryByTestId("repository-discovery-controls")).toBeNull();
     openRepositoryMenu();
-    fireEvent.click(await screen.findByRole("menuitem", { name: "Workspace repository" }));
+    await selectRepositoryMenuItem("Workspace repository");
     fireEvent.click(screen.getByTestId("repo-chip-trigger"));
 
     expect(screen.getByTestId("repository-discovery-controls")).toBeTruthy();
@@ -336,12 +341,12 @@ describe("AddWorkspaceSourcesDialog saved repository picker", () => {
     fireEvent.click(screen.getByRole("button", { name: ADD_SOURCES_LABEL }));
     await waitFor(() => expect(discoverRepositoriesAction).toHaveBeenCalledWith("workspace-1"));
     openRepositoryMenu();
-    fireEvent.click(await screen.findByRole("menuitem", { name: "Workspace repository" }));
+    await selectRepositoryMenuItem("Workspace repository");
     fireEvent.click(screen.getByTestId("repo-chip-trigger"));
 
     expect(await screen.findByText("discovered-project")).toBeTruthy();
-    expect(screen.getByText("on disk")).toBeTruthy();
-    expect(screen.getByTestId("create-local-repository-button")).toBeTruthy();
+    expect(await screen.findByText("on disk")).toBeTruthy();
+    expect(await screen.findByTestId("create-local-repository-button")).toBeTruthy();
     fireEvent.click(screen.getByTestId("repo-refresh-button"));
     await waitFor(() => expect(refreshRepositories).toHaveBeenCalledOnce());
   });
diff --git a/apps/web/components/task/file-editor-content.test.tsx b/apps/web/components/task/file-editor-content.test.tsx
new file mode 100644
index 0000000000..8d06286adc
--- /dev/null
+++ b/apps/web/components/task/file-editor-content.test.tsx
@@ -0,0 +1,214 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { FileEditorContentProps } from "./file-editor-content";
+import { FileEditorContent } from "./file-editor-content";
+
+const htmlPreview = vi.hoisted(() => ({
+  status: "ready" as const,
+  url: "http://api.test/port-proxy/session-1/43127/reports/index.html?v=4",
+  error: null,
+  isPublishing: false,
+  publish: vi
+    .fn()
+    .mockResolvedValue("http://api.test/port-proxy/session-1/43127/reports/index.html?v=4"),
+  reset: vi.fn(),
+}));
+
+const openBrowserPanel = vi.hoisted(() => vi.fn());
+const HTML_CONTENT = "<h1>Report</h1>";
+const HTML_PREVIEW_TEST_ID = "html-preview";
+const HTML_PATH = "reports/index.html";
+const MONACO_EDITOR_TEST_ID = "monaco-editor";
+const PREVIEW_HTML_LABEL = "Preview HTML";
+const SESSION_ID = "session-1";
+
+vi.mock("@/hooks/use-editor-resolver", () => ({
+  useEditorProvider: () => "monaco",
+}));
+
+vi.mock("@/components/editors/monaco/monaco-code-editor", () => ({
+  MonacoCodeEditor: (props: { path: string; content: string; onPreviewHtml?: () => void }) => (
+    <div data-testid="monaco-editor" data-path={props.path} data-content={props.content}>
+      {props.onPreviewHtml && (
+        <button type="button" onClick={props.onPreviewHtml}>
+          Preview HTML
+        </button>
+      )}
+    </div>
+  ),
+}));
+
+vi.mock("@/components/editors/codemirror/codemirror-code-editor", () => ({
+  CodeMirrorCodeEditor: () => <div data-testid="codemirror-editor" />,
+}));
+
+vi.mock("@/hooks/use-html-preview-publisher", () => ({
+  useHtmlPreviewPublisher: () => htmlPreview,
+}));
+
+vi.mock("@/lib/state/dockview-store", () => ({
+  useDockviewStore: (selector: (state: { openBrowserPanel: typeof openBrowserPanel }) => unknown) =>
+    selector({ openBrowserPanel }),
+}));
+
+vi.mock("./html-preview-content", () => ({
+  HtmlPreviewContent: ({
+    previewUrl,
+    onTogglePreview,
+    onRefresh,
+    onOpenInBrowser,
+  }: {
+    previewUrl?: string | null;
+    onTogglePreview: () => void;
+    onRefresh?: () => void;
+    onOpenInBrowser?: () => void;
+  }) => (
+    <div data-testid="html-preview" data-url={previewUrl}>
+      <button type="button" onClick={onTogglePreview}>
+        Show code
+      </button>
+      <button type="button" onClick={onRefresh}>
+        Refresh HTML preview
+      </button>
+      <button type="button" onClick={onOpenInBrowser}>
+        Open in Browser panel
+      </button>
+    </div>
+  ),
+}));
+
+vi.mock("./markdown-preview-content", () => ({
+  MarkdownPreviewContent: (props: { content: string }) => (
+    <div data-testid="markdown-preview" data-content={props.content} />
+  ),
+}));
+
+afterEach(cleanup);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+const baseProps: FileEditorContentProps = {
+  path: HTML_PATH,
+  content: HTML_CONTENT,
+  originalContent: "<h1>Old report</h1>",
+  isDirty: true,
+  isSaving: false,
+  onChange: vi.fn(),
+  onSave: vi.fn(),
+};
+
+describe("FileEditorContent preview selection", () => {
+  it("replaces HTML source with the published iframe and restores the unchanged buffer", () => {
+    render(<FileEditorContent {...baseProps} sessionId={SESSION_ID} previewKind="html" />);
+
+    expect(screen.getByTestId(MONACO_EDITOR_TEST_ID).getAttribute("data-content")).toBe(
+      HTML_CONTENT,
+    );
+    fireEvent.click(screen.getByRole("button", { name: PREVIEW_HTML_LABEL }));
+
+    expect(htmlPreview.publish).toHaveBeenCalledWith({
+      path: HTML_PATH,
+      content: HTML_CONTENT,
+    });
+    expect(screen.queryByTestId(MONACO_EDITOR_TEST_ID)).toBeNull();
+    expect(screen.getByTestId(HTML_PREVIEW_TEST_ID).getAttribute("data-url")).toBe(htmlPreview.url);
+
+    fireEvent.click(screen.getByRole("button", { name: "Show code" }));
+    expect(screen.getByTestId(MONACO_EDITOR_TEST_ID).getAttribute("data-content")).toBe(
+      HTML_CONTENT,
+    );
+    expect(baseProps.onChange).not.toHaveBeenCalled();
+  });
+
+  it("opens a Browser panel only from the explicit preview action", () => {
+    render(<FileEditorContent {...baseProps} sessionId={SESSION_ID} previewKind="html" />);
+
+    fireEvent.click(screen.getByRole("button", { name: PREVIEW_HTML_LABEL }));
+    expect(openBrowserPanel).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByRole("button", { name: "Open in Browser panel" }));
+    expect(openBrowserPanel).toHaveBeenCalledWith(htmlPreview.url);
+  });
+
+  it("refreshes from the latest unsaved buffer", () => {
+    const { rerender } = render(
+      <FileEditorContent {...baseProps} sessionId={SESSION_ID} previewKind="html" />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: PREVIEW_HTML_LABEL }));
+
+    rerender(
+      <FileEditorContent
+        {...baseProps}
+        content="<h1>Updated report</h1>"
+        sessionId={SESSION_ID}
+        previewKind="html"
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Refresh HTML preview" }));
+
+    expect(htmlPreview.publish).toHaveBeenLastCalledWith({
+      path: HTML_PATH,
+      content: "<h1>Updated report</h1>",
+    });
+  });
+
+  it("restores source and invalidates the published URL when file identity changes", () => {
+    const { rerender } = render(
+      <FileEditorContent {...baseProps} sessionId={SESSION_ID} previewKind="html" />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: PREVIEW_HTML_LABEL }));
+    expect(screen.getByTestId(HTML_PREVIEW_TEST_ID)).toBeTruthy();
+
+    rerender(
+      <FileEditorContent
+        {...baseProps}
+        path="reports/next.html"
+        sessionId="session-2"
+        previewKind="html"
+      />,
+    );
+
+    expect(screen.getByTestId(MONACO_EDITOR_TEST_ID).getAttribute("data-path")).toBe(
+      "reports/next.html",
+    );
+    expect(screen.queryByTestId(HTML_PREVIEW_TEST_ID)).toBeNull();
+    expect(htmlPreview.reset).toHaveBeenCalled();
+
+    rerender(<FileEditorContent {...baseProps} sessionId={SESSION_ID} previewKind="html" />);
+    expect(screen.getByTestId(MONACO_EDITOR_TEST_ID).getAttribute("data-path")).toBe(HTML_PATH);
+    expect(screen.queryByTestId(HTML_PREVIEW_TEST_ID)).toBeNull();
+  });
+
+  it("keeps Markdown preview selection separate from HTML preview", () => {
+    render(
+      <FileEditorContent
+        {...baseProps}
+        path="README.md"
+        previewKind="markdown"
+        renderedPreview
+        onTogglePreview={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId("markdown-preview").getAttribute("data-content")).toBe(
+      "<h1>Report</h1>",
+    );
+    expect(screen.queryByTestId(HTML_PREVIEW_TEST_ID)).toBeNull();
+  });
+
+  it("returns to the configured source editor when preview is inactive", () => {
+    render(
+      <FileEditorContent
+        {...baseProps}
+        previewKind="html"
+        renderedPreview={false}
+        onTogglePreview={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId(MONACO_EDITOR_TEST_ID)).toBeTruthy();
+    expect(screen.queryByTestId(HTML_PREVIEW_TEST_ID)).toBeNull();
+  });
+});
diff --git a/apps/web/components/task/file-editor-content.tsx b/apps/web/components/task/file-editor-content.tsx
index a9c7427574..6f2d8b0bc5 100644
--- a/apps/web/components/task/file-editor-content.tsx
+++ b/apps/web/components/task/file-editor-content.tsx
@@ -1,9 +1,13 @@
 "use client";
 
-import { memo } from "react";
+import { memo, useCallback, useEffect, useState } from "react";
 import { useEditorProvider } from "@/hooks/use-editor-resolver";
+import { useHtmlPreviewPublisher } from "@/hooks/use-html-preview-publisher";
 import { MonacoCodeEditor } from "@/components/editors/monaco/monaco-code-editor";
 import { CodeMirrorCodeEditor } from "@/components/editors/codemirror/codemirror-code-editor";
+import { useDockviewStore } from "@/lib/state/dockview-store";
+import type { FilePreviewKind } from "@/lib/utils/file-types";
+import { HtmlPreviewContent } from "./html-preview-content";
 import { MarkdownPreviewContent } from "./markdown-preview-content";
 
 export type FileEditorContentProps = {
@@ -20,8 +24,9 @@ export type FileEditorContentProps = {
   worktreePath?: string;
   repo?: string;
   enableComments?: boolean;
-  markdownPreview?: boolean;
-  onToggleMarkdownPreview?: () => void;
+  previewKind?: FilePreviewKind;
+  renderedPreview?: boolean;
+  onTogglePreview?: () => void;
   onChange: (newContent: string) => void;
   onSave: () => void;
   onReloadFromAgent?: () => void;
@@ -31,8 +36,35 @@ export type FileEditorContentProps = {
 
 export const FileEditorContent = memo(function FileEditorContent(props: FileEditorContentProps) {
   const provider = useEditorProvider("code-editor");
+  const [htmlPreviewIdentity, setHtmlPreviewIdentity] = useState<string | null>(null);
+  const htmlPreview = useHtmlPreviewPublisher(props.sessionId ?? null);
+  const openBrowserPanel = useDockviewStore((state) => state.openBrowserPanel);
+  const fileIdentity = `${props.sessionId ?? ""}\u0000${props.repo ?? ""}\u0000${props.path}`;
 
-  if (props.markdownPreview && props.onToggleMarkdownPreview) {
+  useEffect(() => {
+    setHtmlPreviewIdentity(null);
+    htmlPreview.reset();
+  }, [fileIdentity, htmlPreview.reset]);
+
+  const publishCurrentHtmlPreview = useCallback(() => {
+    setHtmlPreviewIdentity(fileIdentity);
+    void htmlPreview.publish({
+      path: props.path,
+      content: props.content,
+      ...(props.repo ? { repo: props.repo } : {}),
+    });
+  }, [fileIdentity, htmlPreview.publish, props.content, props.path, props.repo]);
+
+  const showHtmlSource = useCallback(() => {
+    setHtmlPreviewIdentity(null);
+    htmlPreview.reset();
+  }, [htmlPreview.reset]);
+
+  const openHtmlPreviewInBrowserPanel = useCallback(() => {
+    if (htmlPreview.url) openBrowserPanel(htmlPreview.url);
+  }, [htmlPreview.url, openBrowserPanel]);
+
+  if (props.renderedPreview && props.previewKind === "markdown" && props.onTogglePreview) {
     return (
       <MarkdownPreviewContent
         path={props.path}
@@ -44,14 +76,43 @@ export const FileEditorContent = memo(function FileEditorContent(props: FileEdit
         repositoryName={props.repo}
         enableComments={props.enableComments}
         onDownload={props.onDownload}
-        onTogglePreview={props.onToggleMarkdownPreview}
+        onTogglePreview={props.onTogglePreview}
+      />
+    );
+  }
+
+  if (htmlPreviewIdentity === fileIdentity && props.previewKind === "html") {
+    return (
+      <HtmlPreviewContent
+        path={props.path}
+        previewUrl={htmlPreview.url}
+        isLoading={htmlPreview.isPublishing}
+        error={htmlPreview.error}
+        worktreePath={props.worktreePath}
+        sessionId={props.sessionId}
+        taskId={props.taskId}
+        repositoryId={props.repositoryId}
+        repositoryName={props.repo}
+        onDownload={props.onDownload}
+        onRefresh={publishCurrentHtmlPreview}
+        onOpenInBrowser={htmlPreview.url ? openHtmlPreviewInBrowserPanel : undefined}
+        onRetry={publishCurrentHtmlPreview}
+        onTogglePreview={showHtmlSource}
       />
     );
   }
 
   return provider === "monaco" ? (
-    <MonacoCodeEditor {...props} />
+    <MonacoCodeEditor
+      {...props}
+      onPreviewHtml={props.previewKind === "html" ? publishCurrentHtmlPreview : undefined}
+      isPublishingHtmlPreview={htmlPreview.isPublishing}
+    />
   ) : (
-    <CodeMirrorCodeEditor {...props} />
+    <CodeMirrorCodeEditor
+      {...props}
+      onPreviewHtml={props.previewKind === "html" ? publishCurrentHtmlPreview : undefined}
+      isPublishingHtmlPreview={htmlPreview.isPublishing}
+    />
   );
 });
diff --git a/apps/web/components/task/file-editor-panel.tsx b/apps/web/components/task/file-editor-panel.tsx
index 82b49bc7b0..24998887b8 100644
--- a/apps/web/components/task/file-editor-panel.tsx
+++ b/apps/web/components/task/file-editor-panel.tsx
@@ -9,7 +9,7 @@ import { useAppStore } from "@/components/state-provider";
 import { useDockviewStore, type FileEditorState } from "@/lib/state/dockview-store";
 import { useFileEditors } from "@/hooks/use-file-editors";
 import { useSessionGitStatus } from "@/hooks/domains/session/use-session-git-status";
-import { getFileCategory, isMarkdownFile } from "@/lib/utils/file-types";
+import { getFileCategory, getFilePreviewKind } from "@/lib/utils/file-types";
 import { getWebSocketClient } from "@/lib/ws/connection";
 import { requestFileContent } from "@/lib/ws/workspace-files";
 import { calculateHash } from "@/lib/utils/file-diff";
@@ -99,6 +99,16 @@ function useLoadedFileDownload(
   );
 }
 
+function useLoadedFileDownloadForBuffer(
+  file: Pick<
+    ReturnType<typeof useFileEditorBuffer>,
+    "hasFile" | "originalHash" | "content" | "isBinary"
+  >,
+  path: string,
+) {
+  return useLoadedFileDownload(file.hasFile, file.originalHash, path, file.content, file.isBinary);
+}
+
 type FileEditorPanelActions = Pick<
   ReturnType<typeof useFileEditors>,
   "handleFileChange" | "saveFile" | "deleteFile" | "applyRemoteUpdate"
@@ -108,14 +118,14 @@ function useFileEditorPanelActions({
   path,
   repo,
   fileKey,
-  markdownPreview,
+  renderedPreview,
   updateFileState,
   actions,
 }: {
   path: string;
   repo: string | undefined;
   fileKey: string;
-  markdownPreview: boolean;
+  renderedPreview: boolean;
   updateFileState: (path: string, updates: Partial<FileEditorState>) => void;
   actions: FileEditorPanelActions;
 }) {
@@ -130,11 +140,11 @@ function useFileEditorPanelActions({
     [applyRemoteUpdate, path, repo],
   );
   const onDelete = useCallback(() => deleteFile(path, repo), [deleteFile, path, repo]);
-  const onToggleMarkdownPreview = useCallback(
-    () => updateFileState(fileKey, { markdownPreview: !markdownPreview }),
-    [updateFileState, fileKey, markdownPreview],
+  const onTogglePreview = useCallback(
+    () => updateFileState(fileKey, { renderedPreview: !renderedPreview }),
+    [updateFileState, fileKey, renderedPreview],
   );
-  return { onChange, onSave, onReloadFromAgent, onDelete, onToggleMarkdownPreview };
+  return { onChange, onSave, onReloadFromAgent, onDelete, onTogglePreview };
 }
 
 function StaticFilePanel({
@@ -327,8 +337,8 @@ function useFileEditorBuffer(fileKey: string) {
   const isBinary = useDockviewStore((s) => s.openFiles.get(fileKey)?.isBinary ?? false);
   const originalContent = useDockviewStore((s) => s.openFiles.get(fileKey)?.originalContent ?? "");
   const originalHash = useDockviewStore((s) => s.openFiles.get(fileKey)?.originalHash ?? "");
-  const markdownPreview = useDockviewStore(
-    (s) => s.openFiles.get(fileKey)?.markdownPreview ?? false,
+  const renderedPreview = useDockviewStore(
+    (s) => s.openFiles.get(fileKey)?.renderedPreview ?? false,
   );
   return {
     hasFile,
@@ -338,7 +348,7 @@ function useFileEditorBuffer(fileKey: string) {
     isBinary,
     originalContent,
     originalHash,
-    markdownPreview,
+    renderedPreview,
   };
 }
 
@@ -403,6 +413,87 @@ function LoadedFilePanel({
   );
 }
 
+function resolveFileEditorPanelState({
+  path,
+  repo,
+  isBinary,
+  activeSession,
+  activeSessionId,
+  activeTaskId,
+}: {
+  path: string;
+  repo: string | undefined;
+  isBinary: boolean;
+  activeSession: {
+    workspace_path?: string | null;
+    worktree_path?: string | null;
+    repository_id?: string | null;
+  } | null;
+  activeSessionId: string | null;
+  activeTaskId: string | null;
+}) {
+  return {
+    category: resolveFileCategory(isBinary, path),
+    previewKind: getFilePreviewKind(path, isBinary),
+    panelProps: {
+      worktreePath: getSessionWorkspacePath(activeSession),
+      sessionId: activeSessionId,
+      taskId: activeTaskId,
+      repositoryId: activeSession?.repository_id ?? undefined,
+      repositoryName: repo,
+    },
+  };
+}
+
+type LoadedFileEditorPanelProps = {
+  category: FileCategory;
+  fileKey: string;
+  panelProps: Pick<
+    LoadedFilePanelProps,
+    "worktreePath" | "sessionId" | "taskId" | "repositoryId" | "repositoryName"
+  >;
+  buffer: Pick<
+    FileEditorContentProps,
+    "path" | "content" | "originalContent" | "isDirty" | "hasRemoteUpdate" | "vcsDiff"
+  >;
+  options: Pick<
+    FileEditorContentProps,
+    | "isSaving"
+    | "sessionId"
+    | "taskId"
+    | "repositoryId"
+    | "worktreePath"
+    | "repo"
+    | "enableComments"
+    | "previewKind"
+    | "renderedPreview"
+    | "onTogglePreview"
+  >;
+  actions: Pick<
+    FileEditorContentProps,
+    "onChange" | "onSave" | "onReloadFromAgent" | "onDelete" | "onDownload"
+  >;
+};
+
+function LoadedFileEditorPanel({
+  category,
+  fileKey,
+  panelProps,
+  buffer,
+  options,
+  actions,
+}: LoadedFileEditorPanelProps) {
+  return (
+    <LoadedFilePanel
+      category={category}
+      fileKey={fileKey}
+      path={buffer.path}
+      {...panelProps}
+      editorProps={{ ...buffer, ...options, ...actions }}
+    />
+  );
+}
+
 export const FileEditorPanel = memo(function FileEditorPanel({
   panelId,
   params,
@@ -411,16 +502,7 @@ export const FileEditorPanel = memo(function FileEditorPanel({
   const repo = params.repo as string | undefined;
   const fileKey = buildRepoScopedItemId(path, repo);
 
-  const {
-    hasFile,
-    content,
-    isDirty,
-    hasRemoteUpdate,
-    isBinary,
-    originalContent,
-    originalHash,
-    markdownPreview,
-  } = useFileEditorBuffer(fileKey);
+  const file = useFileEditorBuffer(fileKey);
   const setFileState = useDockviewStore((s) => s.setFileState);
   const updateFileState = useDockviewStore((s) => s.updateFileState);
 
@@ -433,10 +515,10 @@ export const FileEditorPanel = memo(function FileEditorPanel({
   const vcsDiff = gitStatus?.files?.[path]?.diff;
   const { savingFiles, handleFileChange, saveFile, deleteFile, applyRemoteUpdate } =
     useFileEditors();
-  useFileLoader({ hasFile, activeSessionId, fileKey, path, setFileState, repo });
+  useFileLoader({ hasFile: file.hasFile, activeSessionId, fileKey, path, setFileState, repo });
   useResyncOnTabActivate({
     panelId,
-    hasFile,
+    hasFile: file.hasFile,
     activeSessionId,
     fileKey,
     path,
@@ -444,12 +526,12 @@ export const FileEditorPanel = memo(function FileEditorPanel({
     updateFileState,
   });
 
-  const { onChange, onSave, onReloadFromAgent, onDelete, onToggleMarkdownPreview } =
+  const { onChange, onSave, onReloadFromAgent, onDelete, onTogglePreview } =
     useFileEditorPanelActions({
       path,
       repo,
       fileKey,
-      markdownPreview,
+      renderedPreview: file.renderedPreview,
       updateFileState,
       actions: {
         handleFileChange,
@@ -458,43 +540,47 @@ export const FileEditorPanel = memo(function FileEditorPanel({
         applyRemoteUpdate,
       },
     });
-  const onDownload = useLoadedFileDownload(hasFile, originalHash, path, content, isBinary);
+  const onDownload = useLoadedFileDownloadForBuffer(file, path);
 
-  if (!hasFile || !originalHash) {
+  if (!file.hasFile || !file.originalHash) {
     return <LoadingFilePanel />;
   }
 
-  const worktreePath = getSessionWorkspacePath(activeSession);
-  const repositoryId = activeSession?.repository_id ?? undefined;
-  const category = resolveFileCategory(isBinary, path);
-  const isMarkdown = isMarkdownFile(path);
+  const { category, previewKind, panelProps } = resolveFileEditorPanelState({
+    path,
+    repo,
+    isBinary: file.isBinary,
+    activeSession,
+    activeSessionId,
+    activeTaskId,
+  });
 
   return (
-    <LoadedFilePanel
+    <LoadedFileEditorPanel
       category={category}
       fileKey={fileKey}
-      path={path}
-      worktreePath={worktreePath}
-      sessionId={activeSessionId}
-      taskId={activeTaskId}
-      repositoryId={repositoryId}
-      repositoryName={repo}
-      editorProps={{
+      panelProps={panelProps}
+      buffer={{
         path,
-        content,
-        originalContent,
-        isDirty,
-        hasRemoteUpdate,
+        content: file.content,
+        originalContent: file.originalContent,
+        isDirty: file.isDirty,
+        hasRemoteUpdate: file.hasRemoteUpdate,
         vcsDiff,
+      }}
+      options={{
         isSaving: savingFiles.has(fileKey),
         sessionId: activeSessionId || undefined,
         taskId: activeTaskId,
-        repositoryId,
-        worktreePath,
+        repositoryId: panelProps.repositoryId,
+        worktreePath: panelProps.worktreePath,
         repo,
         enableComments: !!activeSessionId,
-        markdownPreview: isMarkdown ? markdownPreview : false,
-        onToggleMarkdownPreview: isMarkdown ? onToggleMarkdownPreview : undefined,
+        previewKind,
+        renderedPreview: previewKind !== "none" && file.renderedPreview,
+        onTogglePreview: previewKind === "markdown" ? onTogglePreview : undefined,
+      }}
+      actions={{
         onChange,
         onSave,
         onReloadFromAgent,
diff --git a/apps/web/components/task/file-tab-content.test.tsx b/apps/web/components/task/file-tab-content.test.tsx
index 6995145613..8c8b248f56 100644
--- a/apps/web/components/task/file-tab-content.test.tsx
+++ b/apps/web/components/task/file-tab-content.test.tsx
@@ -4,22 +4,27 @@ import type { ReactNode } from "react";
 import type { OpenFileTab } from "@/lib/types/backend";
 import { FileTabContent } from "./file-tab-content";
 
+const FILE_EDITOR_CONTENT_TEST_ID = "file-editor-content";
+
 vi.mock("./file-editor-content", () => ({
   FileEditorContent: ({
-    markdownPreview,
+    previewKind,
+    renderedPreview,
     worktreePath,
-    onToggleMarkdownPreview,
+    onTogglePreview,
   }: {
-    markdownPreview?: boolean;
+    previewKind?: string;
+    renderedPreview?: boolean;
     worktreePath?: string;
-    onToggleMarkdownPreview?: () => void;
+    onTogglePreview?: () => void;
   }) => (
     <div
       data-testid="file-editor-content"
-      data-markdown-preview={String(markdownPreview)}
+      data-preview-kind={previewKind}
+      data-rendered-preview={String(renderedPreview)}
       data-worktree-path={worktreePath}
     >
-      <button type="button" onClick={onToggleMarkdownPreview}>
+      <button type="button" onClick={onTogglePreview}>
         Toggle preview
       </button>
     </div>
@@ -44,14 +49,14 @@ const file: OpenFileTab = {
   originalContent: "# README",
   originalHash: "hash",
   isDirty: false,
-  markdownPreview: true,
+  renderedPreview: true,
 };
 
 afterEach(cleanup);
 
 describe("FileTabContent Markdown preview", () => {
   it("renders a Markdown tab in preview mode and forwards the toggle", () => {
-    const onToggleMarkdownPreview = vi.fn();
+    const onTogglePreview = vi.fn();
 
     render(
       <FileTabContent
@@ -63,15 +68,18 @@ describe("FileTabContent Markdown preview", () => {
         onFileChange={vi.fn()}
         onFileSave={vi.fn()}
         onFileDelete={vi.fn()}
-        onToggleMarkdownPreview={onToggleMarkdownPreview}
+        onTogglePreview={onTogglePreview}
       />,
     );
 
-    expect(screen.getByTestId("file-editor-content").getAttribute("data-markdown-preview")).toBe(
-      "true",
+    expect(screen.getByTestId(FILE_EDITOR_CONTENT_TEST_ID).getAttribute("data-preview-kind")).toBe(
+      "markdown",
     );
+    expect(
+      screen.getByTestId(FILE_EDITOR_CONTENT_TEST_ID).getAttribute("data-rendered-preview"),
+    ).toBe("true");
     fireEvent.click(screen.getByRole("button", { name: "Toggle preview" }));
-    expect(onToggleMarkdownPreview).toHaveBeenCalledOnce();
+    expect(onTogglePreview).toHaveBeenCalledOnce();
   });
 
   it("uses the effective workspace path for desktop file viewers", () => {
@@ -91,8 +99,35 @@ describe("FileTabContent Markdown preview", () => {
       />,
     );
 
-    expect(screen.getByTestId("file-editor-content").getAttribute("data-worktree-path")).toBe(
+    expect(screen.getByTestId(FILE_EDITOR_CONTENT_TEST_ID).getAttribute("data-worktree-path")).toBe(
       "/tmp/task-root",
     );
   });
 });
+
+describe("FileTabContent HTML preview", () => {
+  it("delegates HTML preview ownership to the file editor content", () => {
+    render(
+      <FileTabContent
+        tab={{
+          ...file,
+          path: "reports/index.html",
+          name: "index.html",
+          content: "<h1>Report</h1>",
+          renderedPreview: false,
+        }}
+        activeSession={null}
+        activeSessionId="session-1"
+        taskId="task-1"
+        isSaving={false}
+        onFileChange={vi.fn()}
+        onFileSave={vi.fn()}
+        onFileDelete={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId(FILE_EDITOR_CONTENT_TEST_ID).getAttribute("data-preview-kind")).toBe(
+      "html",
+    );
+  });
+});
diff --git a/apps/web/components/task/file-tab-content.tsx b/apps/web/components/task/file-tab-content.tsx
index 90e2f349fd..05c7c0b8b2 100644
--- a/apps/web/components/task/file-tab-content.tsx
+++ b/apps/web/components/task/file-tab-content.tsx
@@ -5,7 +5,7 @@ import { FileEditorContent } from "./file-editor-content";
 import { FileImageViewer } from "./file-image-viewer";
 import { FileBinaryViewer } from "./file-binary-viewer";
 import type { OpenFileTab } from "@/lib/types/backend";
-import { getFileCategory, isMarkdownFile } from "@/lib/utils/file-types";
+import { getFileCategory, getFilePreviewKind } from "@/lib/utils/file-types";
 import { getSessionWorkspacePath } from "@/lib/session-workspace-path";
 import { FileViewerExternalLink } from "./file-viewer-header";
 import { getFileTabKey } from "./task-center-panel-file-tabs";
@@ -24,7 +24,7 @@ export function FileTabContent({
   onFileChange,
   onFileSave,
   onFileDelete,
-  onToggleMarkdownPreview,
+  onTogglePreview,
 }: {
   tab: OpenFileTab;
   activeSession: {
@@ -38,9 +38,10 @@ export function FileTabContent({
   onFileChange: (path: string, content: string, repo?: string) => void;
   onFileSave: (path: string, repo?: string) => void;
   onFileDelete: (path: string, repo?: string) => void;
-  onToggleMarkdownPreview?: () => void;
+  onTogglePreview?: () => void;
 }) {
   const category = resolveTabCategory(tab);
+  const previewKind = getFilePreviewKind(tab.path, !!tab.isBinary);
   const workspacePath = getSessionWorkspacePath(activeSession);
   const externalLink = (
     <FileViewerExternalLink
@@ -82,8 +83,9 @@ export function FileTabContent({
           worktreePath={workspacePath}
           repo={tab.repo}
           enableComments={!!activeSessionId}
-          markdownPreview={isMarkdownFile(tab.path) ? tab.markdownPreview : false}
-          onToggleMarkdownPreview={onToggleMarkdownPreview}
+          previewKind={previewKind}
+          renderedPreview={previewKind === "markdown" && !!tab.renderedPreview}
+          onTogglePreview={previewKind === "markdown" ? onTogglePreview : undefined}
           onChange={(newContent) => onFileChange(tab.path, newContent, tab.repo)}
           onSave={() => onFileSave(tab.path, tab.repo)}
           onDelete={() => onFileDelete(tab.path, tab.repo)}
diff --git a/apps/web/components/task/html-preview-content.test.tsx b/apps/web/components/task/html-preview-content.test.tsx
new file mode 100644
index 0000000000..3f9d28913a
--- /dev/null
+++ b/apps/web/components/task/html-preview-content.test.tsx
@@ -0,0 +1,83 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { TooltipProvider } from "@kandev/ui/tooltip";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { HtmlPreviewContent } from "./html-preview-content";
+
+vi.mock("@/components/editors/external-vcs-file-link", () => ({
+  ExternalVcsFileLink: () => null,
+  useExternalVcsFileStatus: () => null,
+}));
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderPreview(onTogglePreview = vi.fn(), overrides: Record<string, unknown> = {}) {
+  return {
+    onTogglePreview,
+    ...render(
+      <TooltipProvider>
+        <HtmlPreviewContent
+          path="reports/index.html"
+          previewUrl="http://api.test/port-proxy/session-1/43127/reports/index.html?v=4"
+          showExternalVcsLink={false}
+          onTogglePreview={onTogglePreview}
+          {...overrides}
+        />
+      </TooltipProvider>,
+    ),
+  };
+}
+
+describe("HtmlPreviewContent", () => {
+  it("renders a native iframe for the published preview URL", () => {
+    const { onTogglePreview } = renderPreview();
+
+    const frame = screen.getByTestId("html-preview-frame");
+    expect(frame.getAttribute("src")).toBe(
+      "http://api.test/port-proxy/session-1/43127/reports/index.html?v=4",
+    );
+    expect(frame.getAttribute("sandbox")).toContain("allow-scripts");
+    expect(frame.getAttribute("sandbox")).toContain("allow-same-origin");
+    expect(screen.getByTestId("html-preview-trust-warning")).toBeTruthy();
+
+    screen.getByRole("button", { name: "Show code" }).click();
+    expect(onTogglePreview).toHaveBeenCalledOnce();
+  });
+
+  it("shows loading state while publishing", () => {
+    renderPreview(vi.fn(), { previewUrl: undefined, isLoading: true });
+
+    expect(screen.getByTestId("html-preview-loading")).toBeTruthy();
+    expect(screen.queryByTestId("html-preview-frame")).toBeNull();
+  });
+
+  it("shows localized recovery copy and retries without leaving the preview surface", () => {
+    const onRetry = vi.fn();
+    const { onTogglePreview } = renderPreview(vi.fn(), {
+      previewUrl: undefined,
+      error: "session-unavailable",
+      onRetry,
+    });
+
+    expect(screen.getByTestId("html-preview-error").textContent).toContain(
+      "HTML preview session is not available",
+    );
+    screen.getByRole("button", { name: "Retry HTML preview" }).click();
+    expect(onRetry).toHaveBeenCalledOnce();
+    screen.getByRole("button", { name: "Show code" }).click();
+    expect(onTogglePreview).toHaveBeenCalledOnce();
+  });
+
+  it("offers refresh and an explicit Browser-panel action", () => {
+    const onRefresh = vi.fn();
+    const onOpenInBrowser = vi.fn();
+    renderPreview(vi.fn(), { onRefresh, onOpenInBrowser });
+
+    screen.getByRole("button", { name: "Refresh HTML preview" }).click();
+    expect(onRefresh).toHaveBeenCalledOnce();
+
+    screen.getByRole("button", { name: /Open in browser panel/i }).click();
+    expect(onOpenInBrowser).toHaveBeenCalledOnce();
+  });
+});
diff --git a/apps/web/components/task/html-preview-content.tsx b/apps/web/components/task/html-preview-content.tsx
new file mode 100644
index 0000000000..c382e9c1bd
--- /dev/null
+++ b/apps/web/components/task/html-preview-content.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import { memo } from "react";
+import { IconBrowser, IconCode, IconRefresh } from "@tabler/icons-react";
+import { Button } from "@kandev/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
+import { PanelHeaderBarSplit } from "@/components/task/panel-primitives";
+import { FileViewerDownloadButton } from "@/components/task/file-viewer-header";
+import {
+  ExternalVcsFileLink,
+  useExternalVcsFileStatus,
+} from "@/components/editors/external-vcs-file-link";
+import {
+  getHtmlPreviewPublishErrorKey,
+  type HtmlPreviewPublishErrorCode,
+} from "@/hooks/use-html-preview-publisher";
+import { toRelativePath } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+type HtmlPreviewContentProps = {
+  path: string;
+  previewUrl?: string | null;
+  isLoading?: boolean;
+  error?: HtmlPreviewPublishErrorCode | null;
+  worktreePath?: string;
+  sessionId?: string;
+  taskId?: string | null;
+  repositoryId?: string | null;
+  repositoryName?: string;
+  showExternalVcsLink?: boolean;
+  onDownload?: () => void;
+  onRefresh?: () => void;
+  onOpenInBrowser?: () => void;
+  onRetry?: () => void;
+  onTogglePreview: () => void;
+};
+
+function HtmlPreviewContentToolbar({
+  path,
+  worktreePath,
+  sessionId,
+  taskId,
+  repositoryId,
+  repositoryName,
+  showExternalVcsLink,
+  isLoading,
+  onDownload,
+  onRefresh,
+  onOpenInBrowser,
+  onTogglePreview,
+}: Omit<HtmlPreviewContentProps, "previewUrl" | "error" | "onRetry">) {
+  const { t } = useTranslation();
+  const fileStatus = useExternalVcsFileStatus(path, sessionId, repositoryName);
+  const trustWarning = t("task:htmlPreviewTrustedCode");
+
+  return (
+    <PanelHeaderBarSplit
+      left={
+        <div className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
+          <span className="truncate font-mono">{toRelativePath(path, worktreePath)}</span>
+          <span className="shrink-0 text-xs text-muted-foreground/60">{t("task:htmlPreview")}</span>
+        </div>
+      }
+      right={
+        <div className="flex items-center gap-1">
+          {showExternalVcsLink && (
+            <ExternalVcsFileLink
+              filePath={path}
+              previousPath={fileStatus?.old_path}
+              status={fileStatus?.status}
+              taskId={taskId}
+              sessionId={sessionId}
+              repositoryId={repositoryName ? undefined : repositoryId}
+              repositoryName={repositoryName}
+              size="sm"
+            />
+          )}
+          <FileViewerDownloadButton onDownload={onDownload} />
+          {onRefresh && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onRefresh}
+              disabled={isLoading}
+              aria-label={t("task:refreshHtmlPreview")}
+              className="h-11 w-11 cursor-pointer p-0 text-foreground sm:h-8 sm:w-8"
+            >
+              <IconRefresh className="h-4 w-4" />
+            </Button>
+          )}
+          {onOpenInBrowser && (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={onOpenInBrowser}
+              aria-label={t("task:openInBrowserPanel")}
+              className="h-11 w-11 cursor-pointer p-0 text-foreground sm:h-8 sm:w-8"
+            >
+              <IconBrowser className="h-4 w-4" />
+            </Button>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={onTogglePreview}
+                aria-label={t("task:showCode")}
+                title={trustWarning}
+                className="h-11 w-11 cursor-pointer p-0 text-foreground sm:h-8 sm:w-8"
+                data-testid="html-preview-code-toggle"
+              >
+                <IconCode className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{t("task:showCode")}</p>
+              <p className="mt-1 max-w-xs text-muted-foreground">{trustWarning}</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      }
+    />
+  );
+}
+
+export const HtmlPreviewContent = memo(function HtmlPreviewContent({
+  path,
+  previewUrl,
+  isLoading = false,
+  error = null,
+  worktreePath,
+  sessionId,
+  taskId,
+  repositoryId,
+  repositoryName,
+  showExternalVcsLink = true,
+  onDownload,
+  onRefresh,
+  onOpenInBrowser,
+  onRetry,
+  onTogglePreview,
+}: HtmlPreviewContentProps) {
+  const { t } = useTranslation();
+  const errorKey = error ? getHtmlPreviewPublishErrorKey(error) : null;
+
+  return (
+    <div className="relative flex h-full min-h-0 flex-col" data-testid="html-preview">
+      <HtmlPreviewContentToolbar
+        path={path}
+        worktreePath={worktreePath}
+        sessionId={sessionId}
+        taskId={taskId}
+        repositoryId={repositoryId}
+        repositoryName={repositoryName}
+        showExternalVcsLink={showExternalVcsLink}
+        isLoading={isLoading}
+        onDownload={onDownload}
+        onRefresh={onRefresh}
+        onOpenInBrowser={onOpenInBrowser}
+        onTogglePreview={onTogglePreview}
+      />
+      <p
+        data-testid="html-preview-trust-warning"
+        className="shrink-0 border-b border-border/70 bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground"
+      >
+        {t("task:htmlPreviewTrustedCode")}
+      </p>
+      <div className="min-h-0 flex-1 overflow-hidden">
+        {isLoading && (
+          <div
+            data-testid="html-preview-loading"
+            className="flex h-full items-center justify-center p-6 text-sm text-muted-foreground"
+          >
+            {t("task:htmlPreviewLoading")}
+          </div>
+        )}
+        {!isLoading && errorKey && (
+          <div
+            data-testid="html-preview-error"
+            role="alert"
+            className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center text-sm text-muted-foreground"
+          >
+            <p>{t(errorKey)}</p>
+            {onRetry && (
+              <Button type="button" variant="outline" onClick={onRetry}>
+                {t("task:retryHtmlPreview")}
+              </Button>
+            )}
+          </div>
+        )}
+        {!isLoading && !errorKey && previewUrl && (
+          <iframe
+            data-testid="html-preview-frame"
+            src={previewUrl}
+            title={t("task:browserPreview")}
+            className="h-full w-full border-0"
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
+            referrerPolicy="no-referrer"
+          />
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/components/task/mobile/mobile-file-viewer-panel.test.tsx b/apps/web/components/task/mobile/mobile-file-viewer-panel.test.tsx
index 060f479b6f..d0a9ff9fee 100644
--- a/apps/web/components/task/mobile/mobile-file-viewer-panel.test.tsx
+++ b/apps/web/components/task/mobile/mobile-file-viewer-panel.test.tsx
@@ -2,6 +2,16 @@ import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { TooltipProvider } from "@kandev/ui/tooltip";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+const htmlPreview = vi.hoisted(() => ({
+  isPublishing: false,
+  url: "http://api.test/port-proxy/session-1/43127/reports/index.html?v=1" as string | null,
+  error: null,
+  publish: vi
+    .fn()
+    .mockResolvedValue("http://api.test/port-proxy/session-1/43127/reports/index.html?v=1"),
+  reset: vi.fn(),
+}));
+
 const state = {
   taskSessions: {
     items: {
@@ -16,6 +26,11 @@ const state = {
   },
   tasks: { activeTaskId: "task-1" },
 };
+const README_CONTENT = "# README";
+const REPORT_CONTENT = "<h1>Report</h1>";
+const README_PATH = "README.md";
+const REPORT_PATH = "reports/index.html";
+const FILE_CONTENT_TEST_ID = "file-content";
 
 vi.mock("@/components/state-provider", () => ({
   useAppStore: (selector: (value: typeof state) => unknown) => selector(state),
@@ -29,10 +44,20 @@ vi.mock("@/components/editors/external-vcs-file-link", () => ({
 }));
 
 vi.mock("../file-viewer-content", () => ({
-  FileViewerContent: () => <span data-testid="file-content" />,
+  FileViewerContent: () => <span data-testid={FILE_CONTENT_TEST_ID} />,
 }));
 vi.mock("../markdown-preview-content", () => ({
-  MarkdownPreviewContent: () => <span data-testid="markdown-preview" />,
+  MarkdownPreviewContent: ({ onTogglePreview }: { onTogglePreview: () => void }) => (
+    <div data-testid="markdown-preview">
+      <button type="button" onClick={onTogglePreview}>
+        Show code
+      </button>
+    </div>
+  ),
+}));
+vi.mock("@/hooks/use-html-preview-publisher", () => ({
+  useHtmlPreviewPublisher: () => htmlPreview,
+  getHtmlPreviewPublishErrorKey: () => "task:htmlPreviewPublishFailed",
 }));
 vi.mock("../file-image-viewer", () => ({ FileImageViewer: () => null }));
 vi.mock("../file-binary-viewer", () => ({
@@ -103,28 +128,30 @@ describe("MobileFileViewerPanel external file action", () => {
       size: "touch",
     });
   });
+});
 
+describe("MobileFileViewerPanel Markdown preview mode", () => {
   it("opens a Markdown file directly in preview mode when requested", () => {
     render(
       <TooltipProvider>
         <MobileFileViewerPanel
           file={{
-            path: "README.md",
-            name: "README.md",
-            content: "# README",
-            originalContent: "# README",
+            path: README_PATH,
+            name: README_PATH,
+            content: README_CONTENT,
+            originalContent: README_CONTENT,
             originalHash: "hash",
             isDirty: false,
           }}
           sessionId="session-1"
           onClose={vi.fn()}
-          initialMarkdownPreview
+          initialRenderedPreview
         />
       </TooltipProvider>,
     );
 
     expect(screen.getByTestId("markdown-preview")).toBeTruthy();
-    expect(screen.queryByTestId("file-content")).toBeNull();
+    expect(screen.queryByTestId(FILE_CONTENT_TEST_ID)).toBeNull();
   });
 
   it("resets preview mode when the same path is opened from another repository", () => {
@@ -132,11 +159,11 @@ describe("MobileFileViewerPanel external file action", () => {
       <TooltipProvider>
         <MobileFileViewerPanel
           file={{
-            path: "README.md",
-            name: "README.md",
+            path: README_PATH,
+            name: README_PATH,
             repo: "frontend",
-            content: "# README",
-            originalContent: "# README",
+            content: README_CONTENT,
+            originalContent: README_CONTENT,
             originalHash: "hash",
             isDirty: false,
           }}
@@ -153,11 +180,11 @@ describe("MobileFileViewerPanel external file action", () => {
       <TooltipProvider>
         <MobileFileViewerPanel
           file={{
-            path: "README.md",
-            name: "README.md",
+            path: README_PATH,
+            name: README_PATH,
             repo: "backend",
-            content: "# README",
-            originalContent: "# README",
+            content: README_CONTENT,
+            originalContent: README_CONTENT,
             originalHash: "hash",
             isDirty: false,
           }}
@@ -167,7 +194,64 @@ describe("MobileFileViewerPanel external file action", () => {
       </TooltipProvider>,
     );
 
-    expect(screen.getByTestId("file-content")).toBeTruthy();
+    expect(screen.getByTestId(FILE_CONTENT_TEST_ID)).toBeTruthy();
     expect(screen.queryByTestId("markdown-preview")).toBeNull();
   });
 });
+
+describe("MobileFileViewerPanel HTML preview mode", () => {
+  it("previews an HTML file and returns to the source viewer", () => {
+    render(
+      <TooltipProvider>
+        <MobileFileViewerPanel
+          file={{
+            path: REPORT_PATH,
+            name: "index.html",
+            content: REPORT_CONTENT,
+            originalContent: REPORT_CONTENT,
+            originalHash: "hash",
+            isDirty: false,
+          }}
+          sessionId="session-1"
+          onClose={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+
+    const toggle = screen.getByTestId("html-preview-toggle");
+    expect(toggle.className).toContain("h-11");
+    expect(toggle.className).toContain("w-11");
+    fireEvent.click(toggle);
+    expect(htmlPreview.publish).toHaveBeenCalledWith({
+      path: REPORT_PATH,
+      repo: undefined,
+      content: REPORT_CONTENT,
+    });
+    expect(screen.getByTestId("html-preview-frame")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Show code" }));
+    expect(screen.getByTestId(FILE_CONTENT_TEST_ID)).toBeTruthy();
+  });
+
+  it("does not restore persisted in-place preview state for HTML", () => {
+    render(
+      <TooltipProvider>
+        <MobileFileViewerPanel
+          file={{
+            path: REPORT_PATH,
+            name: "index.html",
+            content: REPORT_CONTENT,
+            originalContent: REPORT_CONTENT,
+            originalHash: "hash",
+            isDirty: false,
+          }}
+          sessionId="session-1"
+          onClose={vi.fn()}
+          initialRenderedPreview
+        />
+      </TooltipProvider>,
+    );
+
+    expect(screen.getByTestId(FILE_CONTENT_TEST_ID)).toBeTruthy();
+    expect(screen.queryByTestId("html-preview-frame")).toBeNull();
+  });
+});
diff --git a/apps/web/components/task/mobile/mobile-file-viewer-panel.tsx b/apps/web/components/task/mobile/mobile-file-viewer-panel.tsx
index 562817cead..ecbc3ec4ce 100644
--- a/apps/web/components/task/mobile/mobile-file-viewer-panel.tsx
+++ b/apps/web/components/task/mobile/mobile-file-viewer-panel.tsx
@@ -1,19 +1,24 @@
 "use client";
 
-import { useMemo, useState } from "react";
-import { IconEye } from "@tabler/icons-react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
+import { IconEye, IconLoader2 } from "@tabler/icons-react";
 import { Button } from "@kandev/ui/button";
 import { PanelBody, PanelHeaderBarSplit, PanelRoot } from "../panel-primitives";
 import { FileViewerContent } from "../file-viewer-content";
+import { HtmlPreviewContent } from "../html-preview-content";
 import { MarkdownPreviewContent } from "../markdown-preview-content";
 import { FileImageViewer } from "../file-image-viewer";
 import { FileBinaryViewer } from "../file-binary-viewer";
 import { FileViewerDownloadButton } from "../file-viewer-header";
-import { getFileCategory, isMarkdownFile } from "@/lib/utils/file-types";
+import { getFileCategory, getFilePreviewKind, type FilePreviewKind } from "@/lib/utils/file-types";
 import { triggerFileDownload } from "@/lib/utils/file-download";
 import { useAppStore } from "@/components/state-provider";
 import type { OpenFileTab } from "@/lib/types/backend";
 import { getSessionWorkspacePath } from "@/lib/session-workspace-path";
+import {
+  useHtmlPreviewPublisher,
+  type HtmlPreviewPublishState,
+} from "@/hooks/use-html-preview-publisher";
 import {
   ExternalVcsFileLink,
   useExternalVcsFileStatus,
@@ -24,7 +29,7 @@ type MobileFileViewerPanelProps = {
   file: OpenFileTab;
   sessionId: string | null;
   onClose: () => void;
-  initialMarkdownPreview?: boolean;
+  initialRenderedPreview?: boolean;
 };
 
 function resolveViewerKind(file: OpenFileTab): "image" | "binary" | "text" {
@@ -35,63 +40,173 @@ function resolveViewerKind(file: OpenFileTab): "image" | "binary" | "text" {
 function MobileViewerBody({
   file,
   viewerKind,
-  markdownFile,
-  markdownPreview,
+  previewKind,
+  renderedPreview,
   worktreePath,
   sessionId,
   taskId,
   repositoryId,
-  onToggleMarkdownPreview,
+  onTogglePreview,
+  onRetryHtmlPreview,
+  htmlPreview,
 }: {
   file: OpenFileTab;
   viewerKind: "image" | "binary" | "text";
-  markdownFile: boolean;
-  markdownPreview: boolean;
+  previewKind: FilePreviewKind;
+  renderedPreview: boolean;
   worktreePath?: string;
   sessionId: string | null;
   taskId: string | null;
   repositoryId?: string;
-  onToggleMarkdownPreview: () => void;
+  onTogglePreview: () => void;
+  onRetryHtmlPreview: () => void;
+  htmlPreview: Pick<HtmlPreviewPublishState, "status" | "url" | "error"> & {
+    isPublishing: boolean;
+  };
 }) {
+  let viewerContent: ReactNode;
+  if (viewerKind === "image") {
+    viewerContent = (
+      <FileImageViewer path={file.path} content={file.content} worktreePath={worktreePath} />
+    );
+  } else if (viewerKind === "binary") {
+    viewerContent = <FileBinaryViewer path={file.path} worktreePath={worktreePath} />;
+  } else if (renderedPreview && previewKind === "html") {
+    viewerContent = (
+      <HtmlPreviewContent
+        path={file.path}
+        worktreePath={worktreePath}
+        sessionId={sessionId ?? undefined}
+        taskId={taskId}
+        repositoryId={repositoryId}
+        repositoryName={file.repo}
+        showExternalVcsLink={false}
+        previewUrl={htmlPreview.url}
+        isLoading={htmlPreview.isPublishing}
+        error={htmlPreview.error}
+        onRetry={onRetryHtmlPreview}
+        onTogglePreview={onTogglePreview}
+      />
+    );
+  } else if (renderedPreview && previewKind === "markdown") {
+    viewerContent = (
+      <MarkdownPreviewContent
+        path={file.path}
+        content={file.content}
+        worktreePath={worktreePath}
+        sessionId={sessionId ?? undefined}
+        taskId={taskId}
+        repositoryId={repositoryId}
+        repositoryName={file.repo}
+        enableComments={!!sessionId}
+        showExternalVcsLink={false}
+        onTogglePreview={onTogglePreview}
+      />
+    );
+  } else {
+    viewerContent = (
+      <FileViewerContent
+        path={file.path}
+        repo={file.repo}
+        content={file.content}
+        sessionId={sessionId ?? undefined}
+      />
+    );
+  }
+
   return (
     <div className="flex h-full min-h-0 flex-col" data-testid="mobile-file-viewer-content">
-      {viewerKind === "image" && (
-        <FileImageViewer path={file.path} content={file.content} worktreePath={worktreePath} />
-      )}
-      {viewerKind === "binary" && <FileBinaryViewer path={file.path} worktreePath={worktreePath} />}
-      {viewerKind === "text" &&
-        (markdownFile && markdownPreview ? (
-          <MarkdownPreviewContent
-            path={file.path}
-            content={file.content}
-            worktreePath={worktreePath}
-            sessionId={sessionId ?? undefined}
-            taskId={taskId}
-            repositoryId={repositoryId}
-            repositoryName={file.repo}
-            enableComments={!!sessionId}
-            showExternalVcsLink={false}
-            onTogglePreview={onToggleMarkdownPreview}
-          />
-        ) : (
-          <FileViewerContent
-            path={file.path}
-            repo={file.repo}
-            content={file.content}
-            sessionId={sessionId ?? undefined}
-          />
-        ))}
+      {viewerContent}
     </div>
   );
 }
 
+type MobileFileViewerHeaderProps = {
+  file: OpenFileTab;
+  sessionId: string | null;
+  activeTaskId: string | null;
+  repositoryId?: string;
+  fileStatus: ReturnType<typeof useExternalVcsFileStatus>;
+  viewerKind: "image" | "binary" | "text";
+  previewKind: FilePreviewKind;
+  renderedPreview: boolean;
+  htmlPreview: { isPublishing: boolean };
+  onDownload?: () => void;
+  onPreviewHtml: () => void;
+  onPreviewMarkdown: () => void;
+  onClose: () => void;
+};
+
+function MobileFileViewerHeader({
+  file,
+  sessionId,
+  activeTaskId,
+  repositoryId,
+  fileStatus,
+  viewerKind,
+  previewKind,
+  renderedPreview,
+  htmlPreview,
+  onDownload,
+  onPreviewHtml,
+  onPreviewMarkdown,
+  onClose,
+}: MobileFileViewerHeaderProps) {
+  const { t } = useTranslation();
+  const canPreview = viewerKind === "text" && previewKind !== "none" && !renderedPreview;
+  const isHtml = previewKind === "html";
+  const handlePreview = isHtml ? onPreviewHtml : onPreviewMarkdown;
+
+  return (
+    <PanelHeaderBarSplit
+      className="h-11 px-2"
+      left={<span className="truncate font-mono text-xs">{file.path}</span>}
+      right={
+        <div className="flex items-center gap-1">
+          <ExternalVcsFileLink
+            filePath={file.path}
+            previousPath={fileStatus?.old_path}
+            status={fileStatus?.status}
+            taskId={activeTaskId}
+            sessionId={sessionId}
+            repositoryId={file.repo ? undefined : repositoryId}
+            repositoryName={file.repo}
+            size="touch"
+          />
+          <FileViewerDownloadButton onDownload={onDownload} />
+          {canPreview && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-11 w-11 cursor-pointer p-0"
+              onClick={handlePreview}
+              disabled={isHtml && htmlPreview.isPublishing}
+              data-testid={isHtml ? "html-preview-toggle" : "markdown-preview-toggle"}
+              aria-label={isHtml ? t("task:openHtmlPreview") : t("task:openMarkdownPreview")}
+              title={isHtml ? t("task:htmlPreviewTrustedCode") : undefined}
+            >
+              {isHtml && htmlPreview.isPublishing ? (
+                <IconLoader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <IconEye className="h-4 w-4" />
+              )}
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" className="cursor-pointer px-2" onClick={onClose}>
+            {t("task:close")}
+          </Button>
+        </div>
+      }
+    />
+  );
+}
+
 export function MobileFileViewerPanel({
   file,
   sessionId,
   onClose,
-  initialMarkdownPreview = false,
+  initialRenderedPreview = false,
 }: MobileFileViewerPanelProps) {
-  const { t } = useTranslation();
   const activeSession = useAppStore((state) =>
     sessionId ? (state.taskSessions.items[sessionId] ?? null) : null,
   );
@@ -100,7 +215,8 @@ export function MobileFileViewerPanel({
   const repositoryId = activeSession?.repository_id ?? undefined;
   const fileStatus = useExternalVcsFileStatus(file.path, sessionId, file.repo);
   const viewerKind = useMemo(() => resolveViewerKind(file), [file]);
-  const markdownFile = isMarkdownFile(file.path);
+  const previewKind = getFilePreviewKind(file.path, !!file.isBinary);
+  const htmlPreview = useHtmlPreviewPublisher(sessionId);
   const onDownload = useMemo(
     () => () =>
       triggerFileDownload({
@@ -111,65 +227,58 @@ export function MobileFileViewerPanel({
     [file.path, file.content, file.isBinary],
   );
 
-  const [markdownPreview, setMarkdownPreview] = useState(initialMarkdownPreview);
+  const initialMarkdownPreview = initialRenderedPreview && previewKind === "markdown";
+  const [renderedPreview, setRenderedPreview] = useState(initialMarkdownPreview);
   const fileIdentity = `${file.repo ?? ""}\u0000${file.path}`;
   const [lastFileIdentity, setLastFileIdentity] = useState(fileIdentity);
 
-  // Reset preview mode when the file changes so reopening a markdown file
+  // Reset preview mode when the file changes so reopening a previewable file
   // always starts in editor view, not the previous preview state.
   // Adjust state during render per React docs recommendation.
   if (lastFileIdentity !== fileIdentity) {
     setLastFileIdentity(fileIdentity);
-    setMarkdownPreview(initialMarkdownPreview);
+    setRenderedPreview(initialMarkdownPreview);
   }
 
+  useEffect(() => {
+    htmlPreview.reset();
+  }, [fileIdentity, htmlPreview.reset]);
+
+  const publishCurrentHtmlPreview = useCallback(() => {
+    setRenderedPreview(true);
+    void htmlPreview.publish({ path: file.path, repo: file.repo, content: file.content });
+  }, [file.content, file.path, file.repo, htmlPreview.publish]);
+
   return (
     <PanelRoot data-testid="mobile-file-viewer-panel">
-      <PanelHeaderBarSplit
-        className="h-11 px-2"
-        left={<span className="truncate font-mono text-xs">{file.path}</span>}
-        right={
-          <div className="flex items-center gap-1">
-            <ExternalVcsFileLink
-              filePath={file.path}
-              previousPath={fileStatus?.old_path}
-              status={fileStatus?.status}
-              taskId={activeTaskId}
-              sessionId={sessionId}
-              repositoryId={file.repo ? undefined : repositoryId}
-              repositoryName={file.repo}
-              size="touch"
-            />
-            <FileViewerDownloadButton onDownload={onDownload} />
-            {markdownFile && !markdownPreview && (
-              <Button
-                variant="ghost"
-                size="sm"
-                className="cursor-pointer px-2"
-                onClick={() => setMarkdownPreview(true)}
-                data-testid="markdown-preview-toggle"
-                aria-label={t("task:openMarkdownPreview")}
-              >
-                <IconEye className="h-4 w-4" />
-              </Button>
-            )}
-            <Button variant="ghost" size="sm" className="cursor-pointer px-2" onClick={onClose}>
-              {t("task:close")}
-            </Button>
-          </div>
-        }
+      <MobileFileViewerHeader
+        file={file}
+        sessionId={sessionId}
+        activeTaskId={activeTaskId}
+        repositoryId={repositoryId}
+        fileStatus={fileStatus}
+        viewerKind={viewerKind}
+        previewKind={previewKind}
+        renderedPreview={renderedPreview}
+        htmlPreview={htmlPreview}
+        onDownload={onDownload}
+        onPreviewHtml={publishCurrentHtmlPreview}
+        onPreviewMarkdown={() => setRenderedPreview(true)}
+        onClose={onClose}
       />
       <PanelBody padding={false} scroll={false} className="overflow-hidden">
         <MobileViewerBody
           file={file}
           viewerKind={viewerKind}
-          markdownFile={markdownFile}
-          markdownPreview={markdownPreview}
+          previewKind={previewKind}
+          renderedPreview={renderedPreview}
           worktreePath={worktreePath}
           sessionId={sessionId}
           taskId={activeTaskId}
           repositoryId={repositoryId}
-          onToggleMarkdownPreview={() => setMarkdownPreview((current) => !current)}
+          onTogglePreview={() => setRenderedPreview((current) => !current)}
+          onRetryHtmlPreview={publishCurrentHtmlPreview}
+          htmlPreview={htmlPreview}
         />
       </PanelBody>
     </PanelRoot>
diff --git a/apps/web/components/task/mobile/session-mobile-layout.tsx b/apps/web/components/task/mobile/session-mobile-layout.tsx
index 7198f5d8c8..3a5c85d774 100644
--- a/apps/web/components/task/mobile/session-mobile-layout.tsx
+++ b/apps/web/components/task/mobile/session-mobile-layout.tsx
@@ -252,7 +252,7 @@ export function MobilePanelArea({
               key={`${selectedFile.repo ?? ""}\u0000${selectedFile.path}`}
               file={selectedFile}
               sessionId={effectiveSessionId}
-              initialMarkdownPreview={selectedFilePreview}
+              initialRenderedPreview={selectedFilePreview}
               onClose={() => handlePanelChangeAndClearSheet("files")}
             />
           ) : (
diff --git a/apps/web/components/task/task-center-panel-file-tabs.test.ts b/apps/web/components/task/task-center-panel-file-tabs.test.ts
index 62ef5890ba..fbb6a84d84 100644
--- a/apps/web/components/task/task-center-panel-file-tabs.test.ts
+++ b/apps/web/components/task/task-center-panel-file-tabs.test.ts
@@ -12,15 +12,15 @@ const file: OpenFileTab = {
 };
 
 describe("upsertOpenFileTab", () => {
-  it("enables Markdown preview on an already-open tab", () => {
-    const result = upsertOpenFileTab([file], { ...file, markdownPreview: true });
+  it("enables rendered preview on an already-open tab", () => {
+    const result = upsertOpenFileTab([file], { ...file, renderedPreview: true });
 
-    expect(result).toEqual([{ ...file, markdownPreview: true }]);
+    expect(result).toEqual([{ ...file, renderedPreview: true }]);
   });
 
   it("keeps same-path tabs from different repositories separate", () => {
     const frontend = { ...file, repo: "frontend" };
-    const backend = { ...file, repo: "backend", markdownPreview: true };
+    const backend = { ...file, repo: "backend", renderedPreview: true };
 
     expect(upsertOpenFileTab([frontend], backend)).toEqual([frontend, backend]);
   });
diff --git a/apps/web/components/task/task-center-panel-file-tabs.ts b/apps/web/components/task/task-center-panel-file-tabs.ts
index 501b054bcd..1c46e37885 100644
--- a/apps/web/components/task/task-center-panel-file-tabs.ts
+++ b/apps/web/components/task/task-center-panel-file-tabs.ts
@@ -8,9 +8,9 @@ export function upsertOpenFileTab(prev: OpenFileTab[], fileTab: OpenFileTab): Op
   const fileKey = getFileTabKey(fileTab);
   const existingIndex = prev.findIndex((tab) => getFileTabKey(tab) === fileKey);
   if (existingIndex >= 0) {
-    if (fileTab.markdownPreview === undefined) return prev;
+    if (fileTab.renderedPreview === undefined) return prev;
     return prev.map((tab, index) =>
-      index === existingIndex ? { ...tab, markdownPreview: fileTab.markdownPreview } : tab,
+      index === existingIndex ? { ...tab, renderedPreview: fileTab.renderedPreview } : tab,
     );
   }
   const maxTabs = 4;
diff --git a/apps/web/components/task/task-center-panel-restoration.test.ts b/apps/web/components/task/task-center-panel-restoration.test.ts
index 0477e6176d..82117a8640 100644
--- a/apps/web/components/task/task-center-panel-restoration.test.ts
+++ b/apps/web/components/task/task-center-panel-restoration.test.ts
@@ -4,11 +4,12 @@ import type { OpenFileTab } from "@/lib/types/backend";
 
 const mockUpdateFileContent = vi.fn();
 const mockGetWebSocketClient = vi.fn();
+const mockRequestFileContent = vi.fn();
 const mockSaveDocument = vi.fn();
 const mockToast = vi.fn();
 
 vi.mock("@/lib/ws/workspace-files", () => ({
-  requestFileContent: vi.fn(),
+  requestFileContent: (...args: unknown[]) => mockRequestFileContent(...args),
   updateFileContent: (...args: unknown[]) => mockUpdateFileContent(...args),
   deleteFile: vi.fn(),
 }));
@@ -28,11 +29,11 @@ vi.mock("@/components/toast-provider", () => ({
 }));
 
 vi.mock("@/lib/utils/file-diff", () => ({
-  calculateHash: vi.fn(),
+  calculateHash: async (content: string) => `hash:${content.length}`,
   generateUnifiedDiff: () => "@@ -1 +1 @@\n-before\n+after",
 }));
 
-import { useFileSaveDelete } from "./task-center-panel-restoration";
+import { loadSavedFileTabs, useFileSaveDelete } from "./task-center-panel-restoration";
 
 const SESSION_ID = "session";
 const PATH = "src/Main.kt";
@@ -126,3 +127,47 @@ describe("task center file saves", () => {
     expect(mockSaveDocument).not.toHaveBeenCalled();
   });
 });
+
+describe("task center file restoration", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockGetWebSocketClient.mockReturnValue(CLIENT);
+  });
+
+  it("restores generic rendered preview state for center-panel tabs", async () => {
+    mockRequestFileContent.mockResolvedValueOnce({
+      path: "README.md",
+      content: "# README",
+      is_binary: false,
+    });
+
+    const tabs = await loadSavedFileTabs("session", [
+      { path: "README.md", name: "README.md", renderedPreview: true, pinned: true },
+    ]);
+
+    expect(tabs?.[0]).toEqual({
+      path: "README.md",
+      name: "README.md",
+      content: "# README",
+      originalContent: "# README",
+      originalHash: "hash:8",
+      isDirty: false,
+      isBinary: false,
+      renderedPreview: true,
+    });
+  });
+
+  it("does not restore obsolete in-place preview state for HTML tabs", async () => {
+    mockRequestFileContent.mockResolvedValueOnce({
+      path: "reports/index.html",
+      content: "<h1>Report</h1>",
+      is_binary: false,
+    });
+
+    const tabs = await loadSavedFileTabs("session", [
+      { path: "reports/index.html", name: "index.html", renderedPreview: true, pinned: true },
+    ]);
+
+    expect(tabs?.[0]?.renderedPreview).toBeUndefined();
+  });
+});
diff --git a/apps/web/components/task/task-center-panel-restoration.ts b/apps/web/components/task/task-center-panel-restoration.ts
index 8759d04356..989f7e2b07 100644
--- a/apps/web/components/task/task-center-panel-restoration.ts
+++ b/apps/web/components/task/task-center-panel-restoration.ts
@@ -15,6 +15,7 @@ import { useToast } from "@/components/toast-provider";
 import { t } from "@/lib/i18n";
 import { getFileTabKey } from "./task-center-panel-file-tabs";
 import { lspClientManager } from "@/lib/lsp/lsp-client-manager";
+import { getFilePreviewKind } from "@/lib/utils/file-types";
 
 export type FileTabRestorationOptions = {
   activeSessionId: string | null;
@@ -52,7 +53,10 @@ export async function loadSavedFileTabs(sessionId: string, savedTabs: StoredFile
         isDirty: false,
         isBinary: response.is_binary,
         repo: savedTab.repo,
-        markdownPreview: savedTab.markdownPreview,
+        renderedPreview:
+          getFilePreviewKind(savedTab.path, response.is_binary) === "markdown"
+            ? savedTab.renderedPreview
+            : undefined,
       });
     } catch {
       /* skip failed tabs */
diff --git a/apps/web/components/task/task-center-panel.tsx b/apps/web/components/task/task-center-panel.tsx
index 8a958c2be0..a6584d8c8c 100644
--- a/apps/web/components/task/task-center-panel.tsx
+++ b/apps/web/components/task/task-center-panel.tsx
@@ -16,12 +16,10 @@ import { TaskChatPanel } from "./task-chat-panel";
 import { TaskChangesPanel } from "./task-changes-panel";
 import { FileTabContent } from "./file-tab-content";
 import { PassthroughToolbar } from "./passthrough-toolbar";
-import type { OpenFileTab, FileContentResponse } from "@/lib/types/backend";
+import type { OpenFileTab } from "@/lib/types/backend";
 import { useAppStore } from "@/components/state-provider";
 import { SessionTabs, type SessionTab } from "@/components/session-tabs";
-import { getWebSocketClient } from "@/lib/ws/connection";
 import { executeApprove } from "@/lib/services/session-approve";
-import { requestFileContent } from "@/lib/ws/workspace-files";
 import {
   setOpenFileTabs as saveOpenFileTabs,
   getActiveTabForSession,
@@ -37,6 +35,8 @@ import { useNormalizedTaskReviews } from "./review-panel-provider";
 import { useReviewItemSelection } from "./review-selection";
 import { getFileTabKey, upsertOpenFileTab } from "./task-center-panel-file-tabs";
 import { TaskCenterReviewContent } from "./task-center-review-content";
+import { useTaskCenterFileOpen } from "@/hooks/use-task-center-file-open";
+import { getFilePreviewKind } from "@/lib/utils/file-types";
 
 import type { SelectedDiff } from "./task-layout";
 import { useTranslation } from "react-i18next";
@@ -140,7 +140,6 @@ function useFileTabOperations({
   handleTabChange,
   leftTab,
 }: FileTabOperationsOptions) {
-  const { t } = useTranslation();
   const { toast } = useToast();
 
   const addFileTab = useCallback(
@@ -151,39 +150,11 @@ function useFileTabOperations({
     [setOpenFileTabs, setLeftTab],
   );
 
-  const handleOpenFileFromChat = useCallback(
-    async (filePath: string, repo?: string) => {
-      const client = getWebSocketClient();
-      if (!client || !activeSessionId) return;
-      try {
-        const response: FileContentResponse = await requestFileContent(
-          client,
-          activeSessionId,
-          filePath,
-          repo,
-        );
-        const fileName = filePath.split("/").pop() || filePath;
-        const hash = await calculateHash(response.content);
-        addFileTab({
-          path: filePath,
-          repo,
-          name: fileName,
-          content: response.content,
-          originalContent: response.content,
-          originalHash: hash,
-          isDirty: false,
-          isBinary: response.is_binary,
-        });
-      } catch (error) {
-        toast({
-          title: t("task:failedToOpenFile"),
-          description: error instanceof Error ? error.message : t("task:unknownError"),
-          variant: "error",
-        });
-      }
-    },
-    [activeSessionId, toast, addFileTab],
-  );
+  const handleOpenFileFromChat = useTaskCenterFileOpen({
+    activeSessionId,
+    addFileTab,
+    toast,
+  });
 
   const handleCloseFileTab = useCallback(
     (fileKey: string) => {
@@ -207,11 +178,11 @@ function useFileTabOperations({
     [setOpenFileTabs],
   );
 
-  const handleMarkdownPreviewToggle = useCallback(
+  const handleRenderedPreviewToggle = useCallback(
     (fileKey: string) => {
       setOpenFileTabs((prev) =>
         prev.map((tab) =>
-          getFileTabKey(tab) === fileKey ? { ...tab, markdownPreview: !tab.markdownPreview } : tab,
+          getFileTabKey(tab) === fileKey ? { ...tab, renderedPreview: !tab.renderedPreview } : tab,
         ),
       );
     },
@@ -230,7 +201,7 @@ function useFileTabOperations({
     handleOpenFileFromChat,
     handleCloseFileTab,
     handleFileChange,
-    handleMarkdownPreviewToggle,
+    handleRenderedPreviewToggle,
     handleFileSave,
     handleFileDelete,
     addFileTab,
@@ -300,11 +271,11 @@ function usePersistOpenFileTabs(activeSessionId: string | null, openFileTabs: Op
     if (!activeSessionId) return;
     saveOpenFileTabs(
       activeSessionId,
-      openFileTabs.map(({ path, name, repo, markdownPreview }) => ({
+      openFileTabs.map(({ path, name, repo, renderedPreview }) => ({
         path,
         name,
         repo,
-        markdownPreview,
+        ...(getFilePreviewKind(path) === "markdown" && renderedPreview ? { renderedPreview } : {}),
       })),
     );
   }, [activeSessionId, openFileTabs]);
@@ -438,7 +409,7 @@ export const TaskCenterPanel = memo(function TaskCenterPanel(props: TaskCenterPa
   const {
     handleOpenFileFromChat,
     handleFileChange,
-    handleMarkdownPreviewToggle,
+    handleRenderedPreviewToggle,
     handleFileSave,
     handleFileDelete,
   } = fileTabOps;
@@ -491,7 +462,7 @@ export const TaskCenterPanel = memo(function TaskCenterPanel(props: TaskCenterPa
             onFileChange={handleFileChange}
             onFileSave={handleFileSave}
             onFileDelete={handleFileDelete}
-            onToggleMarkdownPreview={() => handleMarkdownPreviewToggle(getFileTabKey(tab))}
+            onTogglePreview={() => handleRenderedPreviewToggle(getFileTabKey(tab))}
           />
         ))}
       </SessionTabs>
diff --git a/apps/web/e2e/fixtures/backend.ts b/apps/web/e2e/fixtures/backend.ts
index 7aaef75272..ebeda5e067 100644
--- a/apps/web/e2e/fixtures/backend.ts
+++ b/apps/web/e2e/fixtures/backend.ts
@@ -1,11 +1,12 @@
 import { test as base } from "@playwright/test";
-import { type ChildProcess, execFile, spawn } from "node:child_process";
+import { type ChildProcess, spawn } from "node:child_process";
 import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
 import { BackendFixtureEnvOverrides, createScopedEnvUse } from "./backend-env";
 import { E2E_DOCKER_SCOPE } from "./docker-probe";
 import { dwell } from "../helpers/causal-waits";
+import { killProcessGroup } from "./process-group";
 
 const BACKEND_DIR = path.resolve(__dirname, "../../../../apps/backend");
 const WEB_DIR = path.resolve(__dirname, "../..");
@@ -172,76 +173,6 @@ async function waitForPortFree(port: number, timeoutMs = 10_000): Promise<void>
   // port is still held and waitForHealth will surface the error.
 }
 
-type WindowsTreeKiller = (pid: number, done: (error?: Error) => void) => void;
-type ProcessAliveProbe = (pid: number) => boolean;
-
-const taskkillProcessTree: WindowsTreeKiller = (pid, done) => {
-  execFile("taskkill", ["/PID", String(pid), "/T", "/F"], (error) => done(error ?? undefined));
-};
-
-const isProcessAlive: ProcessAliveProbe = (pid) => {
-  try {
-    process.kill(pid, 0);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-/**
- * Kills the backend and every child process it owns. POSIX uses the detached
- * process group; Windows needs taskkill because negative-PID signals are not
- * supported there.
- */
-export function killProcessGroup(
-  proc: ChildProcess,
-  platform: NodeJS.Platform = process.platform,
-  killWindowsTree: WindowsTreeKiller = taskkillProcessTree,
-  processIsAlive: ProcessAliveProbe = isProcessAlive,
-): Promise<void> {
-  return new Promise<void>((resolve, reject) => {
-    if (!proc.pid) {
-      resolve();
-      return;
-    }
-
-    const pid = proc.pid;
-
-    if (platform === "win32") {
-      killWindowsTree(pid, (error) => {
-        if (error && processIsAlive(pid)) {
-          reject(error);
-          return;
-        }
-        resolve();
-      });
-      return;
-    }
-
-    try {
-      process.kill(-pid, "SIGTERM");
-    } catch {
-      // Process group may already be gone
-      resolve();
-      return;
-    }
-
-    const timeout = setTimeout(() => {
-      try {
-        process.kill(-pid, "SIGKILL");
-      } catch {
-        // Already dead
-      }
-      resolve();
-    }, 7_000);
-
-    proc.on("exit", () => {
-      clearTimeout(timeout);
-      resolve();
-    });
-  });
-}
-
 type BackendFixtureLifecycle = {
   stopProcess?: (proc: ChildProcess) => Promise<void>;
   removeTempRoot?: (tmpDir: string) => void;
diff --git a/apps/web/e2e/fixtures/process-group.ts b/apps/web/e2e/fixtures/process-group.ts
new file mode 100644
index 0000000000..2e550dd252
--- /dev/null
+++ b/apps/web/e2e/fixtures/process-group.ts
@@ -0,0 +1,72 @@
+import { execFile } from "node:child_process";
+import type { ChildProcess } from "node:child_process";
+
+type WindowsTreeKiller = (pid: number, done: (error?: Error) => void) => void;
+type ProcessAliveProbe = (pid: number) => boolean;
+
+const taskkillProcessTree: WindowsTreeKiller = (pid, done) => {
+  execFile("taskkill", ["/PID", String(pid), "/T", "/F"], (error) => done(error ?? undefined));
+};
+
+const isProcessAlive: ProcessAliveProbe = (pid) => {
+  try {
+    process.kill(pid, 0);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Kills the backend and every child process it owns. POSIX uses the detached
+ * process group; Windows needs taskkill because negative-PID signals are not
+ * supported there.
+ */
+export function killProcessGroup(
+  proc: ChildProcess,
+  platform: NodeJS.Platform = process.platform,
+  killWindowsTree: WindowsTreeKiller = taskkillProcessTree,
+  processIsAlive: ProcessAliveProbe = isProcessAlive,
+): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    if (!proc.pid) {
+      resolve();
+      return;
+    }
+
+    const pid = proc.pid;
+
+    if (platform === "win32") {
+      killWindowsTree(pid, (error) => {
+        if (error && processIsAlive(pid)) {
+          reject(error);
+          return;
+        }
+        resolve();
+      });
+      return;
+    }
+
+    try {
+      process.kill(-pid, "SIGTERM");
+    } catch {
+      // Process group may already be gone
+      resolve();
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      try {
+        process.kill(-pid, "SIGKILL");
+      } catch {
+        // Already dead
+      }
+      resolve();
+    }, 7_000);
+
+    proc.on("exit", () => {
+      clearTimeout(timeout);
+      resolve();
+    });
+  });
+}
diff --git a/apps/web/e2e/helpers/kubernetes.ts b/apps/web/e2e/helpers/kubernetes.ts
index 76177490df..285fd71749 100644
--- a/apps/web/e2e/helpers/kubernetes.ts
+++ b/apps/web/e2e/helpers/kubernetes.ts
@@ -1,10 +1,10 @@
-import { expect } from "@playwright/test";
 import { spawnSync } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
 import type { KubernetesCluster, KubernetesPod, KubernetesPVC } from "../fixtures/kubernetes-tools";
 import type { ApiClient } from "./api-client";
 import { DatabaseSync } from "./node-sqlite";
+import { pollUntil } from "./poll-until";
 
 type KubernetesList<T> = { items: T[] };
 
@@ -62,30 +62,30 @@ export async function waitForKubernetesPod(
   sessionId: string,
   timeout = 120_000,
 ): Promise<KubernetesPod> {
-  let found: KubernetesPod | undefined;
-  await expect
-    .poll(
-      () => {
-        const pods = cluster.json<KubernetesList<KubernetesPod>>([
-          "-n",
-          cluster.namespace,
-          "get",
-          "pods",
-          "-l",
-          `kandev.ai/task-id=${taskId},kandev.ai/session-id=${sessionId}`,
-        ]).items;
-        found = selectExactKubernetesResource(pods, { taskId, sessionId }, "Pod");
-        const main = found?.status?.containerStatuses?.find(
-          (container) => container.name === "kandev-agent",
-        );
-        return found?.status?.phase === "Running" && main?.ready === true && main.state?.running
-          ? found.metadata.uid
-          : "";
-      },
-      { timeout, message: `Waiting for Kubernetes Pod for task ${taskId}, session ${sessionId}` },
-    )
-    .not.toBe("");
-  return found!;
+  const result = await pollUntil(
+    () => {
+      const pods = cluster.json<KubernetesList<KubernetesPod>>([
+        "-n",
+        cluster.namespace,
+        "get",
+        "pods",
+        "-l",
+        `kandev.ai/task-id=${taskId},kandev.ai/session-id=${sessionId}`,
+      ]).items;
+      const found = selectExactKubernetesResource(pods, { taskId, sessionId }, "Pod");
+      const main = found?.status?.containerStatuses?.find(
+        (container) => container.name === "kandev-agent",
+      );
+      return {
+        found,
+        ready: found?.status?.phase === "Running" && main?.ready === true && main.state?.running,
+      };
+    },
+    (value) => Boolean(value.ready),
+    timeout,
+    `Waiting for Kubernetes Pod for task ${taskId}, session ${sessionId}`,
+  );
+  return result.found!;
 }
 
 export async function waitForKubernetesPVC(
@@ -94,25 +94,24 @@ export async function waitForKubernetesPVC(
   sessionId: string,
   timeout = 120_000,
 ): Promise<KubernetesPVC> {
-  let found: KubernetesPVC | undefined;
-  await expect
-    .poll(
-      () => {
-        const claims = cluster.json<KubernetesList<KubernetesPVC>>([
-          "-n",
-          cluster.namespace,
-          "get",
-          "persistentvolumeclaims",
-          "-l",
-          `kandev.ai/task-id=${taskId},kandev.ai/session-id=${sessionId}`,
-        ]).items;
-        found = selectExactKubernetesResource(claims, { taskId, sessionId }, "PVC");
-        return found?.metadata.uid ?? "";
-      },
-      { timeout, message: `Waiting for Kubernetes PVC for task ${taskId}, session ${sessionId}` },
-    )
-    .not.toBe("");
-  return found!;
+  const result = await pollUntil(
+    () => {
+      const claims = cluster.json<KubernetesList<KubernetesPVC>>([
+        "-n",
+        cluster.namespace,
+        "get",
+        "persistentvolumeclaims",
+        "-l",
+        `kandev.ai/task-id=${taskId},kandev.ai/session-id=${sessionId}`,
+      ]).items;
+      const found = selectExactKubernetesResource(claims, { taskId, sessionId }, "PVC");
+      return { found, ready: Boolean(found?.metadata.uid) };
+    },
+    (value) => value.ready,
+    timeout,
+    `Waiting for Kubernetes PVC for task ${taskId}, session ${sessionId}`,
+  );
+  return result.found!;
 }
 
 export async function waitForKubernetesResourceAbsent(
@@ -121,16 +120,16 @@ export async function waitForKubernetesResourceAbsent(
   name: string,
   timeout = 120_000,
 ): Promise<void> {
-  await expect
-    .poll(
-      () =>
-        cluster.kubectl(
-          ["-n", cluster.namespace, "get", kind, name, "--ignore-not-found", "-o", "name"],
-          { quiet: true },
-        ) === "",
-      { timeout, message: `Waiting for ${kind}/${name} deletion` },
-    )
-    .toBe(true);
+  await pollUntil(
+    () =>
+      cluster.kubectl(
+        ["-n", cluster.namespace, "get", kind, name, "--ignore-not-found", "-o", "name"],
+        { quiet: true },
+      ) === "",
+    (absent) => absent,
+    timeout,
+    `Waiting for ${kind}/${name} deletion`,
+  );
 }
 
 export async function waitForKubernetesRestart(
@@ -139,18 +138,19 @@ export async function waitForKubernetesRestart(
   previousRestarts: number,
   timeout = 120_000,
 ): Promise<KubernetesPod> {
-  let pod: KubernetesPod | undefined;
-  await expect
-    .poll(
-      () => {
-        pod = cluster.json<KubernetesPod>(["-n", cluster.namespace, "get", "pod", podName]);
-        return pod.status?.containerStatuses?.find((row) => row.name === "kandev-agent")
-          ?.restartCount;
-      },
-      { timeout, message: `Waiting for main-container restart in ${podName}` },
-    )
-    .toBeGreaterThan(previousRestarts);
-  return pod!;
+  const result = await pollUntil(
+    () => {
+      const pod = cluster.json<KubernetesPod>(["-n", cluster.namespace, "get", "pod", podName]);
+      const restarts = pod.status?.containerStatuses?.find(
+        (row) => row.name === "kandev-agent",
+      )?.restartCount;
+      return { pod, ready: restarts !== undefined && restarts > previousRestarts };
+    },
+    (value) => value.ready,
+    timeout,
+    `Waiting for main-container restart in ${podName}`,
+  );
+  return result.pod;
 }
 
 export async function waitForFailedSession(
@@ -159,19 +159,18 @@ export async function waitForFailedSession(
   expected: RegExp,
   timeout = 120_000,
 ): Promise<string> {
-  let error = "";
-  await expect
-    .poll(
-      async () => {
-        const { sessions } = await apiClient.listTaskSessions(taskId);
-        const failed = sessions.find((session) => session.state === "FAILED");
-        error = failed?.error_message ?? "";
-        return error;
-      },
-      { timeout, message: `Waiting for causal Kubernetes failure matching ${expected}` },
-    )
-    .toMatch(expected);
-  return error;
+  const result = await pollUntil(
+    async () => {
+      const { sessions } = await apiClient.listTaskSessions(taskId);
+      const failed = sessions.find((session) => session.state === "FAILED");
+      const error = failed?.error_message ?? "";
+      return { error, ready: expected.test(error) };
+    },
+    (value) => value.ready,
+    timeout,
+    `Waiting for causal Kubernetes failure matching ${expected}`,
+  );
+  return result.error;
 }
 
 export async function waitForTaskSessionState(
@@ -181,15 +180,15 @@ export async function waitForTaskSessionState(
   expectedState: string,
   timeout = 120_000,
 ): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const { sessions } = await apiClient.listTaskSessions(taskId);
-        return sessions.find((session) => session.id === sessionId)?.state ?? "";
-      },
-      { timeout, message: `Waiting for session ${sessionId} to reach ${expectedState}` },
-    )
-    .toBe(expectedState);
+  await pollUntil(
+    async () => {
+      const { sessions } = await apiClient.listTaskSessions(taskId);
+      return sessions.find((session) => session.id === sessionId)?.state ?? "";
+    },
+    (state) => state === expectedState,
+    timeout,
+    `Waiting for session ${sessionId} to reach ${expectedState}`,
+  );
 }
 
 export async function waitForTaskResourceCleanupAttempt(
@@ -199,34 +198,38 @@ export async function waitForTaskResourceCleanupAttempt(
   timeout = 60_000,
 ): Promise<{ attempts: number; last_error: string; state: string }> {
   const database = path.join(backendTmpDir, "kandev.db");
-  let result = { attempts: 0, last_error: "", state: "" };
-  await expect
-    .poll(
-      () => {
-        const sqlite = new DatabaseSync(database, { readOnly: true });
-        try {
-          result =
-            (sqlite
-              .prepare(
-                `SELECT state, attempts, last_error
-                   FROM task_resource_cleanup_jobs
-                  WHERE task_id = ?
-                    AND trigger IN ('archive', 'cascade_archive')
-                  ORDER BY created_at DESC
-                  LIMIT 1`,
-              )
-              .get(taskId) as typeof result | undefined) ?? result;
-        } finally {
-          sqlite.close();
-        }
-        return result.attempts > 0 && ["retry_wait", "failed"].includes(result.state)
-          ? result.last_error
-          : "";
-      },
-      { timeout, message: `Waiting for archive cleanup attempt for task ${taskId}` },
-    )
-    .toMatch(expectedError);
-  return result;
+  const result = await pollUntil(
+    () => {
+      const sqlite = new DatabaseSync(database, { readOnly: true });
+      let result = { attempts: 0, last_error: "", state: "" };
+      try {
+        result =
+          (sqlite
+            .prepare(
+              `SELECT state, attempts, last_error
+                 FROM task_resource_cleanup_jobs
+                WHERE task_id = ?
+                  AND trigger IN ('archive', 'cascade_archive')
+                ORDER BY created_at DESC
+                LIMIT 1`,
+            )
+            .get(taskId) as typeof result | undefined) ?? result;
+      } finally {
+        sqlite.close();
+      }
+      return {
+        result,
+        ready:
+          result.attempts > 0 &&
+          ["retry_wait", "failed"].includes(result.state) &&
+          expectedError.test(result.last_error),
+      };
+    },
+    (value) => value.ready,
+    timeout,
+    `Waiting for archive cleanup attempt for task ${taskId}`,
+  );
+  return result.result;
 }
 
 export function execInKubernetesPod(
diff --git a/apps/web/e2e/helpers/multi-pr-review.ts b/apps/web/e2e/helpers/multi-pr-review.ts
index ed53168f07..848153fc79 100644
--- a/apps/web/e2e/helpers/multi-pr-review.ts
+++ b/apps/web/e2e/helpers/multi-pr-review.ts
@@ -1,6 +1,6 @@
 import type { SeedData } from "../fixtures/test-base";
-import { expect } from "@playwright/test";
 import type { ApiClient } from "./api-client";
+import { pollUntil } from "./poll-until";
 
 export const REVIEW_OWNER = "testorg";
 export const REVIEW_SHARED_FILE = "shared-pr.ts";
@@ -103,16 +103,15 @@ export async function seedMultiPRReviewTask(
   // it, a cold worker could open the changes panel after only the first row
   // was visible to the frontend.
   const expectedNumbers = REVIEW_PRS.map((pr) => pr.number).sort((a, b) => a - b);
-  await expect
-    .poll(
-      async () =>
-        (await apiClient.listTaskPRs(task.id)).map((pr) => pr.pr_number).sort((a, b) => a - b),
-      {
-        timeout: 15_000,
-        message: "waiting for both seeded review PR associations",
-      },
-    )
-    .toEqual(expectedNumbers);
+  await pollUntil(
+    async () =>
+      (await apiClient.listTaskPRs(task.id)).map((pr) => pr.pr_number).sort((a, b) => a - b),
+    (numbers) =>
+      numbers.length === expectedNumbers.length &&
+      numbers.every((number, index) => number === expectedNumbers[index]),
+    15_000,
+    "waiting for both seeded review PR associations",
+  );
 
   return task;
 }
diff --git a/apps/web/e2e/helpers/poll-until.ts b/apps/web/e2e/helpers/poll-until.ts
new file mode 100644
index 0000000000..ee9074a4d8
--- /dev/null
+++ b/apps/web/e2e/helpers/poll-until.ts
@@ -0,0 +1,35 @@
+import { dwell } from "./causal-waits";
+
+const POLL_INTERVAL_MS = 250;
+
+export async function pollUntil<T>(
+  read: () => T | Promise<T>,
+  isReady: (value: T) => boolean,
+  timeout: number,
+  message: string,
+): Promise<T> {
+  const deadline = Date.now() + timeout;
+  let lastError: unknown;
+
+  while (true) {
+    try {
+      const value = await read();
+      if (isReady(value)) return value;
+      lastError = undefined;
+    } catch (error) {
+      lastError = error;
+    }
+
+    const remaining = deadline - Date.now();
+    if (remaining <= 0) {
+      throw new Error(`${message} within ${timeout}ms`, {
+        cause: lastError,
+      });
+    }
+    await dwell(
+      Math.min(POLL_INTERVAL_MS, remaining),
+      "poll-interval",
+      `${message}; the service has not reported the required state`,
+    );
+  }
+}
diff --git a/apps/web/e2e/helpers/session.ts b/apps/web/e2e/helpers/session.ts
index 355f8de1b1..bd536d23ca 100644
--- a/apps/web/e2e/helpers/session.ts
+++ b/apps/web/e2e/helpers/session.ts
@@ -1,7 +1,8 @@
-import { expect, type Page } from "@playwright/test";
+import type { Page } from "@playwright/test";
 import type { SeedData } from "../fixtures/test-base";
 import type { ApiClient } from "./api-client";
-import { SessionPage } from "../pages/session-page";
+import type { SessionPage } from "../pages/session-page";
+import { pollUntil } from "./poll-until";
 
 const DONE_STATES = ["COMPLETED", "WAITING_FOR_INPUT"];
 const FAILED_STATES = ["FAILED", "CANCELLED"];
@@ -23,18 +24,18 @@ export async function waitForLatestSessionDone(
   message: string,
   timeout = 120_000,
 ): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const { sessions } = await apiClient.listTaskSessions(taskId);
-        if (sessions.length < expectedCount) return false;
-        // API returns sessions newest-first.
-        const latest = sessions[0];
-        return sessionDoneOrThrow(latest);
-      },
-      { timeout, message },
-    )
-    .toBe(true);
+  await pollUntil(
+    async () => {
+      const { sessions } = await apiClient.listTaskSessions(taskId);
+      if (sessions.length < expectedCount) return false;
+      // API returns sessions newest-first.
+      const latest = sessions[0];
+      return sessionDoneOrThrow(latest);
+    },
+    (done) => done,
+    timeout,
+    message,
+  );
 }
 
 export async function waitForSessionDone(
@@ -44,16 +45,16 @@ export async function waitForSessionDone(
   message: string,
   timeout = 120_000,
 ): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const { sessions } = await apiClient.listTaskSessions(taskId);
-        const session = sessions.find((s) => s.id === sessionId);
-        return sessionDoneOrThrow(session);
-      },
-      { timeout, message },
-    )
-    .toBe(true);
+  await pollUntil(
+    async () => {
+      const { sessions } = await apiClient.listTaskSessions(taskId);
+      const session = sessions.find((s) => s.id === sessionId);
+      return sessionDoneOrThrow(session);
+    },
+    (done) => done,
+    timeout,
+    message,
+  );
 }
 
 export async function waitForAgentMessage(
@@ -62,17 +63,17 @@ export async function waitForAgentMessage(
   content: string,
   timeout = 60_000,
 ): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const { messages } = await apiClient.listSessionMessages(sessionId);
-        return messages.some(
-          (message) => message.author_type === "agent" && message.content.includes(content),
-        );
-      },
-      { timeout, message: `Waiting for agent message containing ${JSON.stringify(content)}` },
-    )
-    .toBe(true);
+  await pollUntil(
+    async () => {
+      const { messages } = await apiClient.listSessionMessages(sessionId);
+      return messages.some(
+        (message) => message.author_type === "agent" && message.content.includes(content),
+      );
+    },
+    (found) => found,
+    timeout,
+    `Waiting for agent message containing ${JSON.stringify(content)}`,
+  );
 }
 
 export async function waitForSessionState(
@@ -85,15 +86,15 @@ export async function waitForSessionState(
     timeout?: number;
   },
 ): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const { sessions } = await apiClient.listTaskSessions(options.taskId);
-        return sessions.find((session) => session.id === options.sessionId)?.state ?? null;
-      },
-      { timeout: options.timeout ?? 120_000, message: options.message },
-    )
-    .toBe(options.expectedState);
+  await pollUntil(
+    async () => {
+      const { sessions } = await apiClient.listTaskSessions(options.taskId);
+      return sessions.find((session) => session.id === options.sessionId)?.state ?? null;
+    },
+    (state) => state === options.expectedState,
+    options.timeout ?? 120_000,
+    options.message,
+  );
 }
 
 export async function waitForSessionEnvironment(
@@ -106,21 +107,22 @@ export async function waitForSessionEnvironment(
     timeout?: number;
   },
 ): Promise<void> {
-  await expect
-    .poll(
-      async () => {
-        const { sessions } = await apiClient.listTaskSessions(options.taskId);
-        const session = sessions.find((s) => s.id === options.sessionId);
-        return session?.task_environment_id ?? "";
-      },
-      { timeout: options.timeout ?? 60_000, message: options.message },
-    )
-    .toBe(options.expectedEnvironmentId);
+  await pollUntil(
+    async () => {
+      const { sessions } = await apiClient.listTaskSessions(options.taskId);
+      const session = sessions.find((s) => s.id === options.sessionId);
+      return session?.task_environment_id ?? "";
+    },
+    (environmentId) => environmentId === options.expectedEnvironmentId,
+    options.timeout ?? 60_000,
+    options.message,
+  );
 }
 
 export async function openTaskSession(page: Page, taskId: string): Promise<SessionPage> {
+  const { SessionPage: SessionPageClass } = await import("../pages/session-page");
   await page.goto(`/t/${taskId}`);
-  const session = new SessionPage(page);
+  const session = new SessionPageClass(page);
   await session.waitForLoad();
   return session;
 }
diff --git a/apps/web/e2e/helpers/submodule-review-helpers.test.ts b/apps/web/e2e/helpers/submodule-review-helpers.test.ts
index dd91592813..626d47b8dc 100644
--- a/apps/web/e2e/helpers/submodule-review-helpers.test.ts
+++ b/apps/web/e2e/helpers/submodule-review-helpers.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from "vitest";
-import { retryGitIndexLock } from "../tests/review/submodule-review-helpers";
+import { retryGitIndexLock } from "../tests/review/git-retry";
 
 describe("retryGitIndexLock", () => {
   it("retries a transient Git index lock before returning the operation result", async () => {
diff --git a/apps/web/e2e/helpers/terminal-close-pause.test.ts b/apps/web/e2e/helpers/terminal-close-pause.test.ts
index abb31edd71..5ad97bac20 100644
--- a/apps/web/e2e/helpers/terminal-close-pause.test.ts
+++ b/apps/web/e2e/helpers/terminal-close-pause.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { partitionTerminalDestroyRequest } from "../tests/terminal/terminal-close-pause";
+import { partitionTerminalDestroyRequest } from "../tests/terminal/terminal-close-pause-parser";
 
 describe("partitionTerminalDestroyRequest", () => {
   it("pauses only the destroy frame in a newline-delimited batch", () => {
diff --git a/apps/web/e2e/scripts/kubernetes-helpers.test.ts b/apps/web/e2e/scripts/kubernetes-helpers.test.ts
index 215786ead3..0b1569adea 100644
--- a/apps/web/e2e/scripts/kubernetes-helpers.test.ts
+++ b/apps/web/e2e/scripts/kubernetes-helpers.test.ts
@@ -61,6 +61,22 @@ describe("Kubernetes E2E causal helpers", () => {
     ).toBe(true);
   });
 
+  it("retries a transient Kubernetes API read before accepting the ready state", async () => {
+    let reads = 0;
+    const cluster = {
+      namespace: "kandev-e2e-workloads",
+      json: () => {
+        if (reads++ === 0) throw new Error("kubectl unavailable");
+        return { items: [podSnapshot(true, true)] };
+      },
+    } as unknown as KubernetesCluster;
+
+    const pod = await waitForKubernetesPod(cluster, "task-1", "session-1", 2_000);
+
+    expect(reads).toBe(2);
+    expect(pod.metadata.uid).toBe("pod-uid-1");
+  });
+
   it("observes the newest archive-family cleanup retry with its durable aggregate error", async () => {
     const backendTmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "kandev-cleanup-helper-"));
     tempRoots.push(backendTmpDir);
diff --git a/apps/web/e2e/tests/chat/html-preview.spec.ts b/apps/web/e2e/tests/chat/html-preview.spec.ts
new file mode 100644
index 0000000000..17cdcf020a
--- /dev/null
+++ b/apps/web/e2e/tests/chat/html-preview.spec.ts
@@ -0,0 +1,245 @@
+import path from "node:path";
+import { type Page } from "@playwright/test";
+import { test, expect } from "../../fixtures/test-base";
+import type { SeedData } from "../../fixtures/test-base";
+import type { ApiClient } from "../../helpers/api-client";
+import type { BackendContext } from "../../fixtures/backend";
+import { GitHelper, makeGitEnv } from "../../helpers/git-helper";
+import { SessionPage } from "../../pages/session-page";
+
+const SAVED_HTML = "<!doctype html><html><body><p>Saved source</p></body></html>";
+const SVG_ASSET =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" fill="#4ade80"/></svg>';
+
+function nativePreviewHtml(assetDirectory: string, entryName: string, heading: string): string {
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./${assetDirectory}/preview.css">
+  </head>
+  <body>
+    <h1>${heading}</h1>
+    <p id="css-status">CSS asset pending</p>
+    <img id="asset-image" src="./${assetDirectory}/logo.svg" alt="asset">
+    <p id="native-status">Browser script pending</p>
+    <button id="increment">Increment</button>
+    <output id="value">0</output>
+    <script src="./${assetDirectory}/preview.js"></script>
+  </body>
+</html>`;
+}
+
+function nativePreviewScript(entryName: string): string {
+  return `(() => {
+  const image = document.querySelector("#asset-image");
+  const status = document.querySelector("#native-status");
+  const value = document.querySelector("#value");
+  const button = document.querySelector("#increment");
+  const render = () => {
+    status.textContent = [
+      typeof ResizeObserver === "function" ? "api:available" : "api:missing",
+      image.complete && image.naturalWidth > 0 ? "image:loaded" : "image:pending",
+      location.pathname.endsWith("/${entryName}") ? "path:entry" : "path:wrong",
+    ].join(" | ");
+  };
+  let count = 0;
+  image.addEventListener("load", render);
+  button.addEventListener("click", () => {
+    count += 1;
+    value.textContent = String(count);
+  });
+  render();
+})();`;
+}
+
+async function setupDesktopHtmlPreviewTest({
+  testPage,
+  apiClient,
+  seedData,
+  backend,
+  title,
+}: {
+  testPage: Page;
+  apiClient: ApiClient;
+  seedData: SeedData;
+  backend: BackendContext;
+  title: string;
+}): Promise<{ session: SessionPage; fileName: string; assetDirectory: string }> {
+  const suffix = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  const fileName = `preview-${suffix}.html`;
+  const assetDirectory = `preview-assets-${suffix}`;
+  const currentHtml = nativePreviewHtml(assetDirectory, fileName, "Unsaved native preview");
+  const git = new GitHelper(
+    path.join(backend.tmpDir, "repos", "e2e-repo"),
+    makeGitEnv(backend.tmpDir),
+  );
+  git.createFile(fileName, SAVED_HTML);
+  git.createFile(`${assetDirectory}/preview.css`, "#css-status { font-weight: 700; }");
+  git.createFile(`${assetDirectory}/preview.js`, nativePreviewScript(fileName));
+  git.createFile(`${assetDirectory}/logo.svg`, SVG_ASSET);
+  git.stageAll();
+  git.commit(`add ${fileName}`);
+
+  const task = await apiClient.createTaskWithAgent(
+    seedData.workspaceId,
+    title,
+    seedData.agentProfileId,
+    {
+      description: "/e2e:simple-message",
+      workflow_id: seedData.workflowId,
+      workflow_step_id: seedData.startStepId,
+      repository_ids: [seedData.repositoryId],
+    },
+  );
+  await testPage.goto(`/t/${task.id}`);
+  const session = new SessionPage(testPage);
+  await session.waitForLoad();
+  await session.waitForChatIdle({ timeout: 45_000 });
+
+  await session.clickTab("Files");
+  await expect(session.files.getByText(fileName)).toBeVisible({ timeout: 15_000 });
+  await session.files.getByText(fileName).click();
+  await expect(testPage.locator(`.dv-default-tab:has-text('${fileName}')`)).toBeVisible({
+    timeout: 10_000,
+  });
+
+  const editor = testPage.locator(".monaco-editor:visible").first();
+  await expect(editor).toBeVisible({ timeout: 15_000 });
+  await editor.locator(".view-lines").click();
+  await testPage.keyboard.press("ControlOrMeta+A");
+  await testPage.keyboard.insertText(currentHtml);
+
+  return { session, fileName, assetDirectory };
+}
+
+test.describe("HTML preview", () => {
+  test.describe.configure({ retries: 1, timeout: 120_000 });
+
+  test("replaces the editor with a native iframe and resolves relative assets", async ({
+    testPage,
+    apiClient,
+    seedData,
+    backend,
+    prCapture,
+  }) => {
+    const assetRequests: string[] = [];
+    testPage.on("request", (request) => {
+      const requestPath = new URL(request.url()).pathname;
+      if (requestPath.includes("/port-proxy/") && /\.(css|js|svg)$/.test(requestPath)) {
+        assetRequests.push(requestPath);
+      }
+    });
+
+    const { session, fileName, assetDirectory } = await setupDesktopHtmlPreviewTest({
+      testPage,
+      apiClient,
+      seedData,
+      backend,
+      title: "HTML Native Browser Preview",
+    });
+
+    const sourceTab = testPage.locator(".dv-default-tab:visible").filter({ hasText: fileName });
+
+    await testPage.getByTestId("html-preview-toggle").first().click();
+
+    const preview = testPage.getByTestId("html-preview").first();
+    await expect(preview).toBeVisible({ timeout: 10_000 });
+    await expect(session.browserPanel).toHaveCount(0);
+    const previewIframe = preview.locator("iframe");
+    await expect(previewIframe).toHaveAttribute("src", /\/port-proxy\/.*\/\d+\//);
+    const frame = preview.frameLocator("iframe");
+    await expect(frame.locator("h1")).toHaveText("Unsaved native preview", { timeout: 15_000 });
+    await expect(frame.locator("#native-status")).toHaveText(
+      "api:available | image:loaded | path:entry",
+    );
+    await expect(frame.locator("#css-status")).toHaveCSS("font-weight", "700");
+    await expect(frame.locator("#asset-image")).toBeVisible();
+    await expect
+      .poll(() => assetRequests.some((requestPath) => requestPath.endsWith("/preview.js")))
+      .toBe(true);
+    await expect
+      .poll(() => assetRequests.some((requestPath) => requestPath.endsWith("/preview.css")))
+      .toBe(true);
+    await expect
+      .poll(() => assetRequests.some((requestPath) => requestPath.endsWith("/logo.svg")))
+      .toBe(true);
+
+    await expect(frame.locator("#value")).toHaveText("0");
+    await frame.locator("#increment").click();
+    await expect(frame.locator("#value")).toHaveText("1");
+
+    const firstSrc = await previewIframe.getAttribute("src");
+    await preview.getByRole("button", { name: "Refresh HTML preview" }).click();
+    await expect(frame.locator("#native-status")).toHaveText(
+      "api:available | image:loaded | path:entry",
+      { timeout: 15_000 },
+    );
+    const refreshedSrc = await previewIframe.getAttribute("src");
+    expect(refreshedSrc).not.toBe(firstSrc);
+    expect(refreshedSrc).toContain("v=2");
+
+    const secondHtml = nativePreviewHtml(assetDirectory, fileName, "Republished native preview");
+    await preview.getByRole("button", { name: "Show code" }).click();
+    const editor = testPage.locator(".monaco-editor:visible").first();
+    await expect(editor).toBeVisible();
+    await editor.locator(".view-lines").click();
+    await testPage.keyboard.press("ControlOrMeta+A");
+    await testPage.keyboard.insertText(secondHtml);
+    await testPage.getByTestId("html-preview-toggle").first().click();
+
+    await expect(session.browserPanel).toHaveCount(0);
+    await expect(frame.locator("h1")).toHaveText("Republished native preview", { timeout: 15_000 });
+    await expect(previewIframe).toHaveAttribute("src", /[?&]v=3(?:&|$)/);
+
+    await prCapture.screenshot("html-preview-desktop", {
+      caption: "Unsaved HTML rendered in place of the desktop editor",
+    });
+
+    await preview.getByRole("button", { name: /Open in browser panel/i }).click();
+    await expect(session.browserPanel).toBeVisible({ timeout: 10_000 });
+    await sourceTab.click();
+    await preview.getByRole("button", { name: "Show code" }).click();
+    await expect(
+      testPage.locator(".monaco-editor:visible").first().locator(".view-lines"),
+    ).toContainText("Republished native preview");
+  });
+
+  test("shows a retryable error when the session publish endpoint fails", async ({
+    testPage,
+    apiClient,
+    seedData,
+    backend,
+  }) => {
+    const { session } = await setupDesktopHtmlPreviewTest({
+      testPage,
+      apiClient,
+      seedData,
+      backend,
+      title: "HTML Native Browser Preview Error",
+    });
+
+    await testPage.route("**/api/v1/task-sessions/*/html-previews", async (route) => {
+      await route.fulfill({
+        status: 503,
+        contentType: "application/json",
+        body: JSON.stringify({ error: "agentctl unavailable" }),
+      });
+    });
+    await testPage.getByTestId("html-preview-toggle").first().click();
+    const preview = testPage.getByTestId("html-preview").first();
+    await expect(preview.getByTestId("html-preview-error")).toContainText(
+      "HTML preview session is not available",
+    );
+    await expect(session.browserPanel).toHaveCount(0);
+    await testPage.unroute("**/api/v1/task-sessions/*/html-previews");
+
+    await preview.getByRole("button", { name: "Retry HTML preview" }).click();
+    await expect(preview.frameLocator("iframe").locator("h1")).toHaveText(
+      "Unsaved native preview",
+      { timeout: 15_000 },
+    );
+    await preview.getByRole("button", { name: "Show code" }).click();
+    await expect(testPage.locator(".monaco-editor:visible").first()).toBeVisible();
+  });
+});
diff --git a/apps/web/e2e/tests/chat/markdown-preview.spec.ts b/apps/web/e2e/tests/chat/markdown-preview.spec.ts
index 98c3ae6f63..6a93f934f1 100644
--- a/apps/web/e2e/tests/chat/markdown-preview.spec.ts
+++ b/apps/web/e2e/tests/chat/markdown-preview.spec.ts
@@ -296,7 +296,7 @@ test.describe("Markdown preview", () => {
       "Persist Test",
     );
 
-    // Verify the markdownPreview flag is in sessionStorage
+    // Verify the renderedPreview flag is in sessionStorage
     const storedTabs = await testPage.evaluate((sid) => {
       const raw = window.sessionStorage.getItem(`kandev.openFiles.${sid}`);
       return raw ? JSON.parse(raw) : null;
@@ -304,7 +304,7 @@ test.describe("Markdown preview", () => {
     expect(storedTabs).not.toBeNull();
     const mdTab = storedTabs.find((t: { path: string }) => t.path.endsWith("persist-test.md"));
     expect(mdTab).toBeTruthy();
-    expect(mdTab.markdownPreview).toBe(true);
+    expect(mdTab.renderedPreview).toBe(true);
 
     // No settle needed before the reload: the assertions above already read
     // the flag back out of sessionStorage, so the write has demonstrably
diff --git a/apps/web/e2e/tests/review/git-retry.ts b/apps/web/e2e/tests/review/git-retry.ts
new file mode 100644
index 0000000000..119720d163
--- /dev/null
+++ b/apps/web/e2e/tests/review/git-retry.ts
@@ -0,0 +1,24 @@
+import { dwell } from "../../helpers/causal-waits";
+
+const GIT_INDEX_LOCK_ATTEMPTS = 3;
+const GIT_INDEX_LOCK_RETRY_MS = 300;
+
+/** Retries the short-lived index lock taken by the backend's Git status refresh. */
+export async function retryGitIndexLock<T>(operation: () => T): Promise<T> {
+  for (let attempt = 0; attempt < GIT_INDEX_LOCK_ATTEMPTS; attempt++) {
+    try {
+      return operation();
+    } catch (error) {
+      const isLastAttempt = attempt === GIT_INDEX_LOCK_ATTEMPTS - 1;
+      if (!(error instanceof Error) || !error.message.includes("index.lock") || isLastAttempt) {
+        throw error;
+      }
+      await dwell(
+        GIT_INDEX_LOCK_RETRY_MS,
+        "poll-interval",
+        "the backend's periodic Git status refresh can briefly hold the submodule index lock without publishing a completion event",
+      );
+    }
+  }
+  throw new Error("Git index lock retry exhausted");
+}
diff --git a/apps/web/e2e/tests/review/submodule-review-helpers.ts b/apps/web/e2e/tests/review/submodule-review-helpers.ts
index 39f639268a..08702e8b72 100644
--- a/apps/web/e2e/tests/review/submodule-review-helpers.ts
+++ b/apps/web/e2e/tests/review/submodule-review-helpers.ts
@@ -8,10 +8,11 @@ import { waitForFiniteAnimations } from "../../helpers/animations";
 import { dwell } from "../../helpers/causal-waits";
 import type { SeedData } from "../../fixtures/test-base";
 import { makeGitEnv } from "../../helpers/git-helper";
+import { retryGitIndexLock } from "./git-retry";
 
 const GIT_PROTOCOL_ARGS = ["-c", "protocol.file.allow=always"];
-const GIT_INDEX_LOCK_ATTEMPTS = 3;
-const GIT_INDEX_LOCK_RETRY_MS = 300;
+
+export { retryGitIndexLock };
 
 export async function expectStickyReviewHeaderClearance(
   review: Locator,
@@ -91,26 +92,6 @@ function runGit(repoPath: string, args: string[], env: NodeJS.ProcessEnv): strin
   });
 }
 
-/** Retries the short-lived index lock taken by the backend's Git status refresh. */
-export async function retryGitIndexLock<T>(operation: () => T): Promise<T> {
-  for (let attempt = 0; attempt < GIT_INDEX_LOCK_ATTEMPTS; attempt++) {
-    try {
-      return operation();
-    } catch (error) {
-      const isLastAttempt = attempt === GIT_INDEX_LOCK_ATTEMPTS - 1;
-      if (!(error instanceof Error) || !error.message.includes("index.lock") || isLastAttempt) {
-        throw error;
-      }
-      await dwell(
-        GIT_INDEX_LOCK_RETRY_MS,
-        "poll-interval",
-        "the backend's periodic Git status refresh can briefly hold the submodule index lock without publishing a completion event",
-      );
-    }
-  }
-  throw new Error("Git index lock retry exhausted");
-}
-
 function initializeRepository(
   repoPath: string,
   env: NodeJS.ProcessEnv,
diff --git a/apps/web/e2e/tests/task/mobile-html-preview.spec.ts b/apps/web/e2e/tests/task/mobile-html-preview.spec.ts
new file mode 100644
index 0000000000..724aa10a7c
--- /dev/null
+++ b/apps/web/e2e/tests/task/mobile-html-preview.spec.ts
@@ -0,0 +1,189 @@
+import { type Page } from "@playwright/test";
+import path from "node:path";
+import { test, expect } from "../../fixtures/test-base";
+import type { SeedData } from "../../fixtures/test-base";
+import type { ApiClient } from "../../helpers/api-client";
+import type { BackendContext } from "../../fixtures/backend";
+import { assertNoDocumentHorizontalOverflow } from "../../helpers/layout-assertions";
+import { GitHelper, makeGitEnv, createStandardProfile } from "../../helpers/git-helper";
+import { SessionPage } from "../../pages/session-page";
+
+const SVG_ASSET =
+  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" fill="#60a5fa"/></svg>';
+
+function mobilePreviewHtml(assetDirectory: string): string {
+  return `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./${assetDirectory}/preview.css">
+  </head>
+  <body>
+    <h1>Mobile native preview</h1>
+    <p id="css-status">CSS asset pending</p>
+    <img id="asset-image" src="./${assetDirectory}/logo.svg" alt="asset">
+    <p id="native-status">Browser script pending</p>
+    <script src="./${assetDirectory}/preview.js"></script>
+  </body>
+</html>`;
+}
+
+function mobilePreviewScript(entryName: string): string {
+  return `(() => {
+  const image = document.querySelector("#asset-image");
+  const status = document.querySelector("#native-status");
+  const render = () => {
+    status.textContent = [
+      typeof ResizeObserver === "function" ? "api:available" : "api:missing",
+      image.complete && image.naturalWidth > 0 ? "image:loaded" : "image:pending",
+      location.pathname.endsWith("/${entryName}") ? "path:entry" : "path:wrong",
+    ].join(" | ");
+  };
+  image.addEventListener("load", render);
+  render();
+})();`;
+}
+
+async function setupMobileHtmlPreviewTest({
+  testPage,
+  apiClient,
+  seedData,
+  backend,
+}: {
+  testPage: Page;
+  apiClient: ApiClient;
+  seedData: SeedData;
+  backend: BackendContext;
+}): Promise<{ session: SessionPage; filePath: string }> {
+  const suffix = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  const filePath = `mobile-preview-${suffix}.html`;
+  const assetDirectory = `mobile-preview-assets-${suffix}`;
+  const git = new GitHelper(
+    path.join(backend.tmpDir, "repos", "e2e-repo"),
+    makeGitEnv(backend.tmpDir),
+  );
+  git.createFile(filePath, mobilePreviewHtml(assetDirectory));
+  git.createFile(`${assetDirectory}/preview.css`, "#css-status { font-weight: 700; }");
+  git.createFile(`${assetDirectory}/preview.js`, mobilePreviewScript(filePath));
+  git.createFile(`${assetDirectory}/logo.svg`, SVG_ASSET);
+  git.stageAll();
+  git.commit(`add ${filePath}`);
+
+  const profile = await createStandardProfile(apiClient, `mobile-html-${Date.now()}`);
+  const task = await apiClient.createTaskWithAgent(
+    seedData.workspaceId,
+    "Mobile HTML Preview",
+    profile.id,
+    {
+      description: "/e2e:simple-message",
+      workflow_id: seedData.workflowId,
+      workflow_step_id: seedData.startStepId,
+      repository_ids: [seedData.repositoryId],
+    },
+  );
+
+  await testPage.goto(`/t/${task.id}`);
+  const session = new SessionPage(testPage);
+  await session.waitForLoad();
+  await session.waitForChatIdle({ timeout: 45_000 });
+  return { session, filePath };
+}
+
+test.describe("Mobile HTML preview", () => {
+  test.describe.configure({ retries: 1, timeout: 120_000 });
+
+  test("renders native scripts and relative assets in the focused viewer", async ({
+    testPage,
+    apiClient,
+    seedData,
+    backend,
+    prCapture,
+  }) => {
+    const { filePath } = await setupMobileHtmlPreviewTest({
+      testPage,
+      apiClient,
+      seedData,
+      backend,
+    });
+
+    await testPage.getByRole("button", { name: "Files" }).tap();
+    const fileNode = testPage.locator(`[data-testid="file-tree-node"][data-path="${filePath}"]`);
+    await expect(fileNode).toBeVisible({ timeout: 15_000 });
+    await fileNode.tap();
+
+    const viewer = testPage.getByTestId("mobile-file-viewer-panel");
+    await expect(viewer).toBeVisible({ timeout: 5_000 });
+    const previewToggle = viewer.getByTestId("html-preview-toggle");
+    await expect(previewToggle).toBeVisible();
+    const toggleBox = await previewToggle.boundingBox();
+    expect(toggleBox?.width).toBeGreaterThanOrEqual(44);
+    expect(toggleBox?.height).toBeGreaterThanOrEqual(44);
+    await expect(previewToggle).toHaveAttribute("title", /Previewing runs workspace code/);
+
+    await previewToggle.tap();
+    const preview = viewer.getByTestId("html-preview");
+    await expect(preview).toBeVisible();
+    await expect(preview.getByTestId("html-preview-trust-warning")).toBeVisible();
+    const frame = preview.frameLocator("iframe");
+    await expect(preview.locator("iframe")).toHaveAttribute("src", /\/port-proxy\/.*\/\d+\//);
+    await expect(frame.locator("h1")).toHaveText("Mobile native preview", { timeout: 15_000 });
+    await expect(frame.locator("#native-status")).toHaveText(
+      "api:available | image:loaded | path:entry",
+    );
+    await expect(frame.locator("#css-status")).toHaveCSS("font-weight", "700");
+    await expect(frame.locator("#asset-image")).toBeVisible();
+    await assertNoDocumentHorizontalOverflow(testPage, "mobile HTML preview");
+
+    await prCapture.screenshot("html-preview-mobile", {
+      caption: "Native HTML preview in the focused mobile viewer",
+    });
+
+    await preview.getByRole("button", { name: "Show code" }).tap();
+    await expect(viewer.locator(".cm-editor:visible")).toBeVisible();
+    await expect(viewer.locator(".cm-content")).toContainText("Mobile native preview");
+    await expect(preview).toBeHidden();
+  });
+
+  test("recovers from a failed publish without losing the source viewer", async ({
+    testPage,
+    apiClient,
+    seedData,
+    backend,
+  }) => {
+    const { filePath } = await setupMobileHtmlPreviewTest({
+      testPage,
+      apiClient,
+      seedData,
+      backend,
+    });
+
+    await testPage.getByRole("button", { name: "Files" }).tap();
+    const fileNode = testPage.locator(`[data-testid="file-tree-node"][data-path="${filePath}"]`);
+    await expect(fileNode).toBeVisible({ timeout: 15_000 });
+    await fileNode.tap();
+    const viewer = testPage.getByTestId("mobile-file-viewer-panel");
+    await expect(viewer).toBeVisible({ timeout: 5_000 });
+
+    await testPage.route("**/api/v1/task-sessions/*/html-previews", async (route) => {
+      await route.fulfill({
+        status: 503,
+        contentType: "application/json",
+        body: JSON.stringify({ error: "agentctl unavailable" }),
+      });
+    });
+    await viewer.getByTestId("html-preview-toggle").tap();
+    const preview = viewer.getByTestId("html-preview");
+    await expect(preview.getByTestId("html-preview-error")).toBeVisible({ timeout: 10_000 });
+    await expect(preview.getByTestId("html-preview-error")).toContainText(
+      "HTML preview session is not available",
+    );
+    await testPage.unroute("**/api/v1/task-sessions/*/html-previews");
+
+    await preview.getByRole("button", { name: "Retry HTML preview" }).tap();
+    await expect(preview.frameLocator("iframe").locator("h1")).toHaveText("Mobile native preview", {
+      timeout: 15_000,
+    });
+    await preview.getByRole("button", { name: "Show code" }).tap();
+    await expect(viewer.locator(".cm-content")).toContainText("Mobile native preview");
+  });
+});
diff --git a/apps/web/e2e/tests/terminal/terminal-close-pause-parser.ts b/apps/web/e2e/tests/terminal/terminal-close-pause-parser.ts
new file mode 100644
index 0000000000..0bd94c74fe
--- /dev/null
+++ b/apps/web/e2e/tests/terminal/terminal-close-pause-parser.ts
@@ -0,0 +1,23 @@
+function isTerminalDestroyFrame(part: string): boolean {
+  if (!part.trim()) return false;
+  try {
+    const frame = JSON.parse(part) as { type?: unknown; action?: unknown };
+    return frame.type === "request" && frame.action === "user_shell.destroy";
+  } catch {
+    return false;
+  }
+}
+
+export function partitionTerminalDestroyRequest(
+  message: string | Buffer,
+): { destroyFrame: string; passthrough: string | null } | null {
+  if (typeof message !== "string") return null;
+  const frames = message.split("\n");
+  const destroyIndex = frames.findIndex(isTerminalDestroyFrame);
+  if (destroyIndex === -1) return null;
+  const passthrough = frames.filter((_, index) => index !== destroyIndex).join("\n");
+  return {
+    destroyFrame: frames[destroyIndex]!,
+    passthrough: passthrough.trim() ? passthrough : null,
+  };
+}
diff --git a/apps/web/e2e/tests/terminal/terminal-close-pause.ts b/apps/web/e2e/tests/terminal/terminal-close-pause.ts
index 0d20b60a3a..c61e0161d7 100644
--- a/apps/web/e2e/tests/terminal/terminal-close-pause.ts
+++ b/apps/web/e2e/tests/terminal/terminal-close-pause.ts
@@ -1,33 +1,12 @@
 import { expect, type Page, type WebSocketRoute } from "@playwright/test";
+import { partitionTerminalDestroyRequest } from "./terminal-close-pause-parser";
 
 type PausedRequest = {
   message: string;
   server: WebSocketRoute;
 };
 
-function isTerminalDestroyFrame(part: string): boolean {
-  if (!part.trim()) return false;
-  try {
-    const frame = JSON.parse(part) as { type?: unknown; action?: unknown };
-    return frame.type === "request" && frame.action === "user_shell.destroy";
-  } catch {
-    return false;
-  }
-}
-
-export function partitionTerminalDestroyRequest(
-  message: string | Buffer,
-): { destroyFrame: string; passthrough: string | null } | null {
-  if (typeof message !== "string") return null;
-  const frames = message.split("\n");
-  const destroyIndex = frames.findIndex(isTerminalDestroyFrame);
-  if (destroyIndex === -1) return null;
-  const passthrough = frames.filter((_, index) => index !== destroyIndex).join("\n");
-  return {
-    destroyFrame: frames[destroyIndex]!,
-    passthrough: passthrough.trim() ? passthrough : null,
-  };
-}
+export { partitionTerminalDestroyRequest } from "./terminal-close-pause-parser";
 
 export async function pauseNextTerminalDestroy(page: Page) {
   let armed = false;
diff --git a/apps/web/hooks/use-file-editors.open-action.test.tsx b/apps/web/hooks/use-file-editors.open-action.test.tsx
index 5cc1c17674..bd4591fea4 100644
--- a/apps/web/hooks/use-file-editors.open-action.test.tsx
+++ b/apps/web/hooks/use-file-editors.open-action.test.tsx
@@ -19,7 +19,7 @@ const mocks = vi.hoisted(() => {
     originalHash: string;
     isDirty: boolean;
     isBinary?: boolean;
-    markdownPreview?: boolean;
+    renderedPreview?: boolean;
   };
 
   type DockState = {
@@ -203,7 +203,7 @@ describe("useFileEditors open actions", () => {
 
     expect(mocks.getDockState().openFiles.get(FIRST_PATH)).toMatchObject({
       content: "first",
-      markdownPreview: true,
+      renderedPreview: true,
     });
     expect(mocks.addFileEditorPanel).toHaveBeenCalledWith(FIRST_PATH, "first.ts", {
       repo: undefined,
diff --git a/apps/web/hooks/use-file-editors.ts b/apps/web/hooks/use-file-editors.ts
index 52cf2e4796..c131226fd4 100644
--- a/apps/web/hooks/use-file-editors.ts
+++ b/apps/web/hooks/use-file-editors.ts
@@ -12,6 +12,7 @@ import {
   setActiveTabForSession,
 } from "@/lib/local-storage";
 import { calculateHash } from "@/lib/utils/file-diff";
+import { getFilePreviewKind } from "@/lib/utils/file-types";
 import { useToast } from "@/components/toast-provider";
 import { useSessionGitStatus } from "@/hooks/domains/session/use-session-git-status";
 import { useSaveDeleteActions } from "./use-file-save-delete";
@@ -96,7 +97,7 @@ function buildPersistedTabs(
   const previewParams = preview?.params as Record<string, unknown> | undefined;
   const previewItemId = (previewParams?.previewItemId ?? null) as string | null;
   const isPromoted = previewParams?.promoted === true;
-  return Array.from(openFiles.values()).flatMap(({ path, name, repo, markdownPreview }) => {
+  return Array.from(openFiles.values()).flatMap(({ path, name, repo, renderedPreview }) => {
     const itemId = buildRepoScopedItemId(path, repo);
     const isPinned = !!api?.getPanel(`file:${itemId}`);
     const isPreview = !isPinned && itemId === previewItemId;
@@ -108,7 +109,7 @@ function buildPersistedTabs(
         path,
         name,
         ...(repo ? { repo } : {}),
-        ...(markdownPreview ? { markdownPreview } : {}),
+        ...(getFilePreviewKind(path) === "markdown" && renderedPreview ? { renderedPreview } : {}),
         pinned: persistAsPinned,
       },
     ];
@@ -122,7 +123,7 @@ type RestoreTabsParams = {
     path: string;
     name: string;
     repo?: string;
-    markdownPreview?: boolean;
+    renderedPreview?: boolean;
     pinned?: boolean;
   }>;
   savedActiveTab: string;
@@ -169,11 +170,11 @@ async function loadAndRestoreTabs(params: RestoreTabsParams, retryCount = 0): Pr
       repo: savedTab.repo,
     });
     // Seed a placeholder file state synchronously, carrying the restored
-    // `markdownPreview` flag. This makes `openFiles.has(path)` true the moment
+    // `renderedPreview` flag. This makes `openFiles.has(path)` true the moment
     // FileEditorPanel mounts, which suppresses its own `useFileLoader` fetch.
     // Without this seed, useFileLoader races the per-tab fetch below: both call
     // setFileState (a wholesale replace), and useFileLoader's state has no
-    // markdownPreview — so when it wins the race (common under CPU load) the
+    // renderedPreview, so when it wins the race (common under CPU load) the
     // restored preview flag is clobbered and the tab reopens in code view.
     setFileState(itemId, {
       path: savedTab.path,
@@ -183,7 +184,8 @@ async function loadAndRestoreTabs(params: RestoreTabsParams, retryCount = 0): Pr
       originalContent: "",
       originalHash: "",
       isDirty: false,
-      markdownPreview: savedTab.markdownPreview,
+      renderedPreview:
+        getFilePreviewKind(savedTab.path) === "markdown" ? savedTab.renderedPreview : undefined,
     });
   }
   for (const savedTab of savedTabs) {
@@ -209,7 +211,10 @@ async function loadAndRestoreTabs(params: RestoreTabsParams, retryCount = 0): Pr
         originalHash: hash,
         isDirty: false,
         isBinary: response.is_binary,
-        markdownPreview: savedTab.markdownPreview,
+        renderedPreview:
+          getFilePreviewKind(savedTab.path, response.is_binary) === "markdown"
+            ? savedTab.renderedPreview
+            : undefined,
       });
     } catch {
       /* useFileLoader will retry when executor is ready */
@@ -457,7 +462,7 @@ function useMarkdownPreviewAction({
       const fileKey = buildRepoScopedItemId(filePath, repo);
       const files = getOpenFiles();
       if (files.has(fileKey)) {
-        updateFileState(fileKey, { markdownPreview: true });
+        updateFileState(fileKey, { renderedPreview: true });
         const name = filePath.split("/").pop() || filePath;
         addFileEditorPanelWithPreviewCleanup(
           filePath,
@@ -487,7 +492,7 @@ function useMarkdownPreviewAction({
           addFileEditorPanel,
           removeFileState,
         );
-        setFileState(fileKey, { ...state, markdownPreview: true });
+        setFileState(fileKey, { ...state, renderedPreview: true });
       } catch (error) {
         toast({
           title: t("task:failedToOpenFile"),
diff --git a/apps/web/hooks/use-html-preview-publisher.test.ts b/apps/web/hooks/use-html-preview-publisher.test.ts
new file mode 100644
index 0000000000..144d669d39
--- /dev/null
+++ b/apps/web/hooks/use-html-preview-publisher.test.ts
@@ -0,0 +1,91 @@
+import { act, renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ApiError } from "@/lib/api/client";
+
+const mocks = vi.hoisted(() => ({
+  publishHtmlPreview: vi.fn(),
+  buildHtmlPreviewProxyUrl: vi.fn(),
+}));
+
+vi.mock("@/lib/api/domains/process-api", () => ({
+  publishHtmlPreview: (...args: unknown[]) => mocks.publishHtmlPreview(...args),
+  buildHtmlPreviewProxyUrl: (...args: unknown[]) => mocks.buildHtmlPreviewProxyUrl(...args),
+}));
+
+import {
+  getHtmlPreviewPublishErrorCode,
+  getHtmlPreviewPublishErrorKey,
+  useHtmlPreviewPublisher,
+} from "./use-html-preview-publisher";
+
+describe("useHtmlPreviewPublisher", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.publishHtmlPreview.mockResolvedValue({ port: 43127, path: "/index.html", version: 1 });
+    mocks.buildHtmlPreviewProxyUrl.mockReturnValue("http://api.test/preview/index.html?v=1");
+  });
+
+  it("publishes a buffer and exposes the versioned URL", async () => {
+    const { result } = renderHook(() => useHtmlPreviewPublisher("session-1"));
+    const payload = { path: "index.html", repo: undefined, content: "<h1>current</h1>" };
+
+    await act(async () => {
+      await expect(result.current.publish(payload)).resolves.toBe(
+        "http://api.test/preview/index.html?v=1",
+      );
+    });
+
+    expect(mocks.publishHtmlPreview).toHaveBeenCalledWith("session-1", payload);
+    expect(result.current.status).toBe("ready");
+    expect(result.current.url).toBe("http://api.test/preview/index.html?v=1");
+  });
+
+  it("reports a missing session without making a request", async () => {
+    const { result } = renderHook(() => useHtmlPreviewPublisher(null));
+
+    await act(async () => {
+      await expect(
+        result.current.publish({ path: "index.html", content: "<h1>current</h1>" }),
+      ).resolves.toBeNull();
+    });
+
+    expect(mocks.publishHtmlPreview).not.toHaveBeenCalled();
+    expect(result.current.error).toBe("session-unavailable");
+  });
+
+  it("discards a stale publish that completes after reset", async () => {
+    let resolveFirst!: (value: { port: number; path: string; version: number }) => void;
+    mocks.publishHtmlPreview.mockReturnValueOnce(
+      new Promise((resolve) => {
+        resolveFirst = resolve;
+      }),
+    );
+
+    const { result } = renderHook(() => useHtmlPreviewPublisher("session-1"));
+    const firstPublish = result.current.publish({
+      path: "index.html",
+      content: "<h1>v1</h1>",
+    });
+
+    act(() => result.current.reset());
+    resolveFirst({ port: 43127, path: "/index.html", version: 1 });
+
+    await act(async () => {
+      await expect(firstPublish).resolves.toBeNull();
+    });
+
+    expect(result.current.status).toBe("idle");
+    expect(result.current.url).toBeNull();
+    expect(result.current.error).toBeNull();
+  });
+});
+
+describe("HTML preview publish error mapping", () => {
+  it("maps API limits and availability failures to localized keys", () => {
+    expect(getHtmlPreviewPublishErrorCode(new ApiError("too large", 413, null))).toBe("too-large");
+    expect(getHtmlPreviewPublishErrorCode(new ApiError("gone", 503, null))).toBe(
+      "session-unavailable",
+    );
+    expect(getHtmlPreviewPublishErrorKey("publish-failed")).toBe("task:htmlPreviewPublishFailed");
+  });
+});
diff --git a/apps/web/hooks/use-html-preview-publisher.ts b/apps/web/hooks/use-html-preview-publisher.ts
new file mode 100644
index 0000000000..955547262b
--- /dev/null
+++ b/apps/web/hooks/use-html-preview-publisher.ts
@@ -0,0 +1,97 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ApiError } from "@/lib/api/client";
+import {
+  buildHtmlPreviewProxyUrl,
+  publishHtmlPreview,
+  type HtmlPreviewPublishRequest,
+} from "@/lib/api/domains/process-api";
+
+export type HtmlPreviewPublishErrorCode = "session-unavailable" | "too-large" | "publish-failed";
+
+export type HtmlPreviewPublishState = {
+  status: "idle" | "publishing" | "ready" | "error";
+  url: string | null;
+  error: HtmlPreviewPublishErrorCode | null;
+};
+
+const IDLE_STATE: HtmlPreviewPublishState = {
+  status: "idle",
+  url: null,
+  error: null,
+};
+
+export function getHtmlPreviewPublishErrorCode(error: unknown): HtmlPreviewPublishErrorCode {
+  if (error instanceof ApiError && error.status === 413) return "too-large";
+  if (error instanceof ApiError && [404, 409, 503].includes(error.status)) {
+    return "session-unavailable";
+  }
+  return "publish-failed";
+}
+
+export function getHtmlPreviewPublishErrorKey(
+  error: HtmlPreviewPublishErrorCode,
+): "task:htmlPreviewTooLarge" | "task:htmlPreviewUnavailable" | "task:htmlPreviewPublishFailed" {
+  if (error === "too-large") return "task:htmlPreviewTooLarge";
+  if (error === "session-unavailable") return "task:htmlPreviewUnavailable";
+  return "task:htmlPreviewPublishFailed";
+}
+
+export async function publishHtmlPreviewUrl(
+  sessionId: string,
+  payload: HtmlPreviewPublishRequest,
+): Promise<string> {
+  const response = await publishHtmlPreview(sessionId, payload);
+  return buildHtmlPreviewProxyUrl(sessionId, response);
+}
+
+export function useHtmlPreviewPublisher(sessionId: string | null) {
+  const [state, setState] = useState<HtmlPreviewPublishState>(IDLE_STATE);
+  const requestIdRef = useRef(0);
+
+  useEffect(() => {
+    requestIdRef.current += 1;
+    setState(IDLE_STATE);
+  }, [sessionId]);
+
+  const reset = useCallback(() => {
+    requestIdRef.current += 1;
+    setState(IDLE_STATE);
+  }, []);
+
+  const publish = useCallback(
+    async (payload: HtmlPreviewPublishRequest): Promise<string | null> => {
+      const requestId = requestIdRef.current + 1;
+      requestIdRef.current = requestId;
+      if (!sessionId) {
+        setState({ status: "error", url: null, error: "session-unavailable" });
+        return null;
+      }
+
+      setState({ status: "publishing", url: null, error: null });
+      try {
+        const url = await publishHtmlPreviewUrl(sessionId, payload);
+        if (requestIdRef.current !== requestId) return null;
+        setState({ status: "ready", url, error: null });
+        return url;
+      } catch (error) {
+        if (requestIdRef.current !== requestId) return null;
+        setState({
+          status: "error",
+          url: null,
+          error: getHtmlPreviewPublishErrorCode(error),
+        });
+        return null;
+      }
+    },
+    [sessionId],
+  );
+
+  return {
+    ...state,
+    isPublishing: state.status === "publishing",
+    publish,
+    reset,
+  };
+}
diff --git a/apps/web/hooks/use-task-center-file-open.ts b/apps/web/hooks/use-task-center-file-open.ts
new file mode 100644
index 0000000000..78202936c5
--- /dev/null
+++ b/apps/web/hooks/use-task-center-file-open.ts
@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback } from "react";
+import type { OpenFileTab, FileContentResponse } from "@/lib/types/backend";
+import { getWebSocketClient } from "@/lib/ws/connection";
+import { requestFileContent } from "@/lib/ws/workspace-files";
+import { calculateHash } from "@/lib/utils/file-diff";
+import { t } from "@/lib/i18n";
+
+type UseTaskCenterFileOpenOptions = {
+  activeSessionId: string | null;
+  addFileTab: (fileTab: OpenFileTab) => void;
+  toast: (options: { title: string; description: string; variant: "error" }) => void;
+};
+
+export function useTaskCenterFileOpen({
+  activeSessionId,
+  addFileTab,
+  toast,
+}: UseTaskCenterFileOpenOptions) {
+  return useCallback(
+    async (filePath: string, repo?: string) => {
+      const client = getWebSocketClient();
+      if (!client || !activeSessionId) return;
+      try {
+        const response: FileContentResponse = await requestFileContent(
+          client,
+          activeSessionId,
+          filePath,
+          repo,
+        );
+        const fileName = filePath.split("/").pop() || filePath;
+        const hash = await calculateHash(response.content);
+        addFileTab({
+          path: filePath,
+          repo,
+          name: fileName,
+          content: response.content,
+          originalContent: response.content,
+          originalHash: hash,
+          isDirty: false,
+          isBinary: response.is_binary,
+        });
+      } catch (error) {
+        toast({
+          title: t("task:failedToOpenFile"),
+          description: error instanceof Error ? error.message : t("task:unknownError"),
+          variant: "error",
+        });
+      }
+    },
+    [activeSessionId, addFileTab, toast],
+  );
+}
diff --git a/apps/web/lib/api/domains/process-api.test.ts b/apps/web/lib/api/domains/process-api.test.ts
new file mode 100644
index 0000000000..d27a8d520a
--- /dev/null
+++ b/apps/web/lib/api/domains/process-api.test.ts
@@ -0,0 +1,72 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const fetchJsonMock = vi.hoisted(() => vi.fn());
+
+vi.mock("../client", () => ({
+  fetchJson: fetchJsonMock,
+}));
+
+vi.mock("@/lib/config", () => ({
+  getBackendConfig: () => ({ apiBaseUrl: "http://api.test" }),
+}));
+
+import {
+  buildHtmlPreviewProxyUrl,
+  publishHtmlPreview,
+  type HtmlPreviewPublishResponse,
+} from "./process-api";
+
+describe("HTML preview process API", () => {
+  beforeEach(() => fetchJsonMock.mockReset());
+
+  it("publishes the current buffer through the session endpoint", async () => {
+    const response: HtmlPreviewPublishResponse = {
+      port: 43127,
+      path: "/site/index.html",
+      version: 4,
+    };
+    fetchJsonMock.mockResolvedValueOnce(response);
+
+    await expect(
+      publishHtmlPreview("session-1", {
+        repo: "frontend",
+        path: "site/index.html",
+        content: "<body>unsaved</body>",
+      }),
+    ).resolves.toEqual(response);
+
+    expect(fetchJsonMock).toHaveBeenCalledWith(
+      "/api/v1/task-sessions/session-1/html-previews",
+      expect.objectContaining({
+        init: {
+          method: "POST",
+          body: JSON.stringify({
+            repo: "frontend",
+            path: "site/index.html",
+            content: "<body>unsaved</body>",
+          }),
+        },
+      }),
+    );
+  });
+
+  it("builds a versioned session port-proxy URL", () => {
+    expect(
+      buildHtmlPreviewProxyUrl("session/1", {
+        port: 43127,
+        path: "/site/index.html",
+        version: 4,
+      }),
+    ).toBe("http://api.test/port-proxy/session%2F1/43127/site/index.html?v=4");
+  });
+
+  it("encodes reserved characters in each preview path segment", () => {
+    expect(
+      buildHtmlPreviewProxyUrl("session-1", {
+        port: 43127,
+        path: "/site/report#1.html",
+        version: 5,
+      }),
+    ).toBe("http://api.test/port-proxy/session-1/43127/site/report%231.html?v=5");
+  });
+});
diff --git a/apps/web/lib/api/domains/process-api.ts b/apps/web/lib/api/domains/process-api.ts
index d00b380bc4..2d38a410d9 100644
--- a/apps/web/lib/api/domains/process-api.ts
+++ b/apps/web/lib/api/domains/process-api.ts
@@ -2,6 +2,50 @@ import { fetchJson, type ApiRequestOptions } from "../client";
 import { getBackendConfig } from "@/lib/config";
 import type { ProcessInfo } from "@/lib/types/http";
 
+export type HtmlPreviewPublishResponse = {
+  port: number;
+  path: string;
+  version: number;
+};
+
+export type HtmlPreviewPublishRequest = {
+  repo?: string;
+  path: string;
+  content: string;
+};
+
+export async function publishHtmlPreview(
+  sessionId: string,
+  payload: HtmlPreviewPublishRequest,
+  options?: ApiRequestOptions,
+) {
+  return fetchJson<HtmlPreviewPublishResponse>(
+    `/api/v1/task-sessions/${encodeURIComponent(sessionId)}/html-previews`,
+    {
+      ...options,
+      init: { method: "POST", body: JSON.stringify(payload), ...(options?.init ?? {}) },
+    },
+  );
+}
+
+export function buildHtmlPreviewProxyUrl(
+  sessionId: string,
+  response: HtmlPreviewPublishResponse,
+  options?: ApiRequestOptions,
+): string {
+  const baseUrl = (options?.baseUrl ?? getBackendConfig().apiBaseUrl).replace(/\/+$/, "");
+  const rawPath = response.path.startsWith("/") ? response.path : `/${response.path}`;
+  const path = rawPath
+    .split("/")
+    .map((segment) => (segment ? encodeURIComponent(segment) : segment))
+    .join("/");
+  const url = new URL(
+    `${baseUrl}/port-proxy/${encodeURIComponent(sessionId)}/${response.port}${path}`,
+  );
+  url.searchParams.set("v", String(response.version));
+  return url.toString();
+}
+
 // Process operations
 export async function startProcess(
   sessionId: string,
diff --git a/apps/web/lib/e2e/backend-process.test.ts b/apps/web/lib/e2e/backend-process.test.ts
index 25b5b635a9..20e0fad868 100644
--- a/apps/web/lib/e2e/backend-process.test.ts
+++ b/apps/web/lib/e2e/backend-process.test.ts
@@ -1,6 +1,6 @@
 import type { ChildProcess } from "node:child_process";
 import { describe, expect, test, vi } from "vitest";
-import { killProcessGroup } from "../../e2e/fixtures/backend";
+import { killProcessGroup } from "../../e2e/fixtures/process-group";
 
 function childProcessWithPid(pid: number): ChildProcess {
   return { pid } as ChildProcess;
diff --git a/apps/web/lib/local-storage-file-tabs.ts b/apps/web/lib/local-storage-file-tabs.ts
new file mode 100644
index 0000000000..d755ed68de
--- /dev/null
+++ b/apps/web/lib/local-storage-file-tabs.ts
@@ -0,0 +1,8 @@
+import type { StoredFileTab } from "./local-storage";
+import { isMarkdownFile } from "./utils/file-types";
+
+export function normalizeStoredFileTab(tab: StoredFileTab): StoredFileTab {
+  const { markdownPreview, renderedPreview, ...current } = tab;
+  const preview = isMarkdownFile(tab.path) ? (renderedPreview ?? markdownPreview) : undefined;
+  return Object.assign(current, preview === undefined ? {} : { renderedPreview: preview });
+}
diff --git a/apps/web/lib/local-storage.test.ts b/apps/web/lib/local-storage.test.ts
index fe6145ea8d..ef366812ad 100644
--- a/apps/web/lib/local-storage.test.ts
+++ b/apps/web/lib/local-storage.test.ts
@@ -257,36 +257,82 @@ describe("task-scoped artifact notification storage", () => {
 });
 
 describe("open file tabs storage", () => {
+  const sourcePath = "README.md";
+
   beforeEach(() => {
     window.sessionStorage.clear();
   });
 
-  it("round-trips the multi-repo repo subpath so a restored tab refetches under the right repo", () => {
+  it("round-trips generic rendered preview state with the multi-repo repo subpath", () => {
     setOpenFileTabs("sess-1", [
       {
-        path: "src/foo.ts",
-        name: "foo.ts",
+        path: sourcePath,
+        name: "README.md",
         repo: "enrichment-commons",
-        markdownPreview: true,
+        renderedPreview: true,
         pinned: true,
       },
     ]);
 
+    expect(JSON.parse(window.sessionStorage.getItem("kandev.openFiles.sess-1") ?? "null")).toEqual([
+      {
+        path: sourcePath,
+        name: "README.md",
+        repo: "enrichment-commons",
+        renderedPreview: true,
+        pinned: true,
+      },
+    ]);
     const tabs = getOpenFileTabs("sess-1");
     expect(tabs).toHaveLength(1);
     expect(tabs[0]).toEqual({
-      path: "src/foo.ts",
-      name: "foo.ts",
+      path: sourcePath,
+      name: "README.md",
       repo: "enrichment-commons",
-      markdownPreview: true,
+      renderedPreview: true,
       pinned: true,
     });
   });
 
+  it("normalizes legacy Markdown preview state when reading session storage", () => {
+    window.sessionStorage.setItem(
+      "kandev.openFiles.sess-1",
+      JSON.stringify([
+        {
+          path: "README.md",
+          name: "README.md",
+          markdownPreview: true,
+          pinned: true,
+        },
+      ]),
+    );
+
+    expect(getOpenFileTabs("sess-1")).toEqual([
+      {
+        path: "README.md",
+        name: "README.md",
+        renderedPreview: true,
+        pinned: true,
+      },
+    ]);
+  });
+
   it("leaves repo undefined for single-repo tabs", () => {
-    setOpenFileTabs("sess-1", [{ path: "src/foo.ts", name: "foo.ts", pinned: true }]);
+    setOpenFileTabs("sess-1", [{ path: sourcePath, name: "foo.ts", pinned: true }]);
     expect(getOpenFileTabs("sess-1")[0].repo).toBeUndefined();
   });
+
+  it("drops obsolete in-place preview state for HTML tabs", () => {
+    setOpenFileTabs("sess-1", [
+      { path: "reports/index.html", name: "index.html", renderedPreview: true, pinned: true },
+    ]);
+
+    expect(getOpenFileTabs("sess-1")[0]).toEqual({
+      path: "reports/index.html",
+      name: "index.html",
+      pinned: true,
+    });
+  });
 });
 
 describe("chat draft attachment storage", () => {
diff --git a/apps/web/lib/local-storage.ts b/apps/web/lib/local-storage.ts
index e1b71c7bde..ce4b9ec9b5 100644
--- a/apps/web/lib/local-storage.ts
+++ b/apps/web/lib/local-storage.ts
@@ -1,6 +1,7 @@
 import { setWalkthroughLastSeen } from "@/lib/walkthrough-notification-storage";
 import { attachmentContentUrl } from "@/lib/api/domains/attachment-api";
 import type { LayoutProfileIdentity } from "@/lib/layout/layout-profiles";
+import { normalizeStoredFileTab } from "./local-storage-file-tabs";
 
 type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
 
@@ -529,6 +530,8 @@ export interface StoredFileTab {
   /** Multi-repo subpath (repository_name) so a restored tab re-fetches its
    *  content under the right repository after a refresh. */
   repo?: string;
+  renderedPreview?: boolean;
+  /** Legacy Markdown-only preview field accepted during one-way migration. */
   markdownPreview?: boolean;
   pinned?: boolean;
 }
@@ -554,14 +557,15 @@ export function getOpenFileTabs(sessionId: string): StoredFileTab[] {
     let previewSeen = false;
     const normalized: StoredFileTab[] = [];
     for (let i = parsed.length - 1; i >= 0; i--) {
-      const t = parsed[i];
-      if (!t) continue;
-      const isPinned = t.pinned === true || t.pinned === undefined;
+      const tab = parsed[i];
+      if (!tab) continue;
+      const normalizedTab = normalizeStoredFileTab(tab);
+      const isPinned = normalizedTab.pinned === true || normalizedTab.pinned === undefined;
       if (isPinned) {
-        normalized.unshift({ ...t, pinned: true });
+        normalized.unshift({ ...normalizedTab, pinned: true });
       } else if (!previewSeen) {
         previewSeen = true;
-        normalized.unshift({ ...t, pinned: false });
+        normalized.unshift({ ...normalizedTab, pinned: false });
       }
     }
     return normalized;
@@ -575,7 +579,7 @@ 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));
+    window.sessionStorage.setItem(key, JSON.stringify(tabs.map(normalizeStoredFileTab)));
   } catch {
     // Ignore write failures
   }
diff --git a/apps/web/lib/state/dockview-store.ts b/apps/web/lib/state/dockview-store.ts
index e8f717225d..0cc7bd321a 100644
--- a/apps/web/lib/state/dockview-store.ts
+++ b/apps/web/lib/state/dockview-store.ts
@@ -152,7 +152,7 @@ export type FileEditorState = {
   hasRemoteUpdate?: boolean;
   remoteContent?: string;
   remoteOriginalHash?: string;
-  markdownPreview?: boolean;
+  renderedPreview?: boolean;
 };
 
 /** Direction relative to a reference panel or group. */
diff --git a/apps/web/lib/test-support/happy-dom-network.test.ts b/apps/web/lib/test-support/happy-dom-network.test.ts
index 735e841491..e27093714e 100644
--- a/apps/web/lib/test-support/happy-dom-network.test.ts
+++ b/apps/web/lib/test-support/happy-dom-network.test.ts
@@ -7,3 +7,9 @@ it("disables external stylesheet loads without dispatching an error", () => {
   expect(settings.disableCSSFileLoading).toBe(true);
   expect(settings.handleDisabledFileLoadingAsSuccess).toBe(true);
 });
+
+it("does not navigate main-frame test fixtures over the network", () => {
+  const settings = (window as unknown as HappyDOMWindow).happyDOM.settings;
+
+  expect(settings.navigation.disableMainFrameNavigation).toBe(true);
+});
diff --git a/apps/web/lib/types/workspace-files.ts b/apps/web/lib/types/workspace-files.ts
index e83913828f..c3edfd9bd1 100644
--- a/apps/web/lib/types/workspace-files.ts
+++ b/apps/web/lib/types/workspace-files.ts
@@ -82,7 +82,7 @@ export type OpenFileTab = {
   originalHash: string;
   isDirty: boolean;
   isBinary?: boolean;
-  markdownPreview?: boolean;
+  renderedPreview?: boolean;
 };
 
 export const FILE_EXTENSION_COLORS: Record<string, string> = {
diff --git a/apps/web/lib/utils/file-types.test.ts b/apps/web/lib/utils/file-types.test.ts
index 2b1d72a6db..476267f851 100644
--- a/apps/web/lib/utils/file-types.test.ts
+++ b/apps/web/lib/utils/file-types.test.ts
@@ -1,5 +1,19 @@
 import { describe, expect, it } from "vitest";
-import { isMarkdownFile } from "./file-types";
+import { getFilePreviewKind, isMarkdownFile } from "./file-types";
+
+describe("getFilePreviewKind", () => {
+  it("recognizes Markdown and HTML preview extensions case-insensitively", () => {
+    expect(getFilePreviewKind("docs/README.md")).toBe("markdown");
+    expect(getFilePreviewKind("docs/README.MDX")).toBe("markdown");
+    expect(getFilePreviewKind("examples/index.html")).toBe("html");
+    expect(getFilePreviewKind("examples/index.HTM")).toBe("html");
+  });
+
+  it("rejects unsupported and binary files", () => {
+    expect(getFilePreviewKind("src/index.ts")).toBe("none");
+    expect(getFilePreviewKind("examples/index.html", true)).toBe("none");
+  });
+});
 
 describe("isMarkdownFile", () => {
   it("recognizes Markdown extensions case-insensitively", () => {
diff --git a/apps/web/lib/utils/file-types.ts b/apps/web/lib/utils/file-types.ts
index 5190ecd1ab..b1c07ac34a 100644
--- a/apps/web/lib/utils/file-types.ts
+++ b/apps/web/lib/utils/file-types.ts
@@ -1,4 +1,5 @@
 export type FileCategory = "text" | "image" | "binary";
+export type FilePreviewKind = "markdown" | "html" | "none";
 
 const IMAGE_EXTENSIONS = new Set([
   "png",
@@ -97,8 +98,15 @@ export function getFileCategory(path: string): FileCategory {
 }
 
 export function isMarkdownFile(path: string): boolean {
+  return getFilePreviewKind(path) === "markdown";
+}
+
+export function getFilePreviewKind(path: string, isBinary = false): FilePreviewKind {
+  if (isBinary) return "none";
   const ext = getExtension(path);
-  return ext === "md" || ext === "mdx";
+  if (ext === "md" || ext === "mdx") return "markdown";
+  if (ext === "html" || ext === "htm") return "html";
+  return "none";
 }
 
 /** Return the MIME type for a known image extension, or a fallback. */
diff --git a/apps/web/src/locales/en/editors.json b/apps/web/src/locales/en/editors.json
index 67a760e1f9..ee659b3019 100644
--- a/apps/web/src/locales/en/editors.json
+++ b/apps/web/src/locales/en/editors.json
@@ -47,6 +47,7 @@
   "pasteLink": "Paste link...",
   "planFormattingToolbar": "Plan formatting toolbar",
   "pleaseTryAgain": "Please try again.",
+  "previewHtml": "Preview HTML",
   "previewMarkdown": "Preview markdown",
   "queuedForTheAgent": "Queued for the agent.",
   "reload": "Reload",
diff --git a/apps/web/src/locales/en/task.json b/apps/web/src/locales/en/task.json
index 05a324b62b..7f0867cb06 100644
--- a/apps/web/src/locales/en/task.json
+++ b/apps/web/src/locales/en/task.json
@@ -555,6 +555,14 @@
   "failedToLoadDependencies": "Failed to load dependencies.",
   "failedToLoadDependencyCandidates": "Failed to load dependency candidates.",
   "failedToLoadPreview": "Failed to load preview.",
+  "htmlPreview": "HTML preview",
+  "htmlPreviewError": "Unable to render HTML preview.",
+  "htmlPreviewLoading": "Loading HTML preview...",
+  "htmlPreviewPublishFailed": "HTML preview could not be opened. Try again.",
+  "htmlPreviewTooLarge": "This HTML buffer is too large to preview. Show code and try again with a smaller file.",
+  "htmlPreviewTrustedCode": "Previewing runs workspace code with Browser-panel capabilities. Only preview files you trust.",
+  "htmlPreviewUnavailable": "The HTML preview session is not available. Check the task session and try again.",
+  "refreshHtmlPreview": "Refresh HTML preview",
   "failedToLoadRevision": "Failed to load revision",
   "failedToLoadRevisionContent": "Failed to load revision content",
   "failedToOpenFile": "Failed to open file",
@@ -1029,6 +1037,7 @@
   "openInEditorNamed": "Open in {{name}}",
   "openInNewTab": "Open in new tab",
   "openInOfficeView": "Open in office view",
+  "openHtmlPreview": "Open HTML preview",
   "openInOtherEditor": "Open in other editor",
   "openMarkdownPreview": "Open markdown preview",
   "openPlanDetails": "Open plan details",
@@ -1445,6 +1454,7 @@
   "shortcutTogglesChatInput": "Shortcut: <1>{{shortcut}}</1> toggles this chat input.",
   "showBranchAndGitCredentialDetails": "Show branch and Git credential details",
   "showCode": "Show code",
+  "retryHtmlPreview": "Retry HTML preview",
   "showCommandOutput": "Show command output",
   "showDebugInfo": "Show Debug Info",
   "showDetails": "Show details",
diff --git a/apps/web/src/locales/pseudo/editors.json b/apps/web/src/locales/pseudo/editors.json
index eff48a56c5..4dfefecf95 100644
--- a/apps/web/src/locales/pseudo/editors.json
+++ b/apps/web/src/locales/pseudo/editors.json
@@ -47,6 +47,7 @@
   "pasteLink": "Ƥàśţē ĺĩńķ...",
   "planFormattingToolbar": "Ƥĺàń ƒōŕḿàţţĩńĝ ţōōĺƀàŕ",
   "pleaseTryAgain": "Ƥĺēàśē ţŕŷ àĝàĩń.",
+  "previewHtml": "Ƥŕēvĩēŵ ĤŢḾĹ",
   "previewMarkdown": "Ƥŕēvĩēŵ ḿàŕķďōŵń",
   "queuedForTheAgent": "Qũēũēď ƒōŕ ţĥē àĝēńţ.",
   "reload": "Ŕēĺōàď",
diff --git a/apps/web/src/locales/pseudo/task.json b/apps/web/src/locales/pseudo/task.json
index 898f35874e..fab258d25f 100644
--- a/apps/web/src/locales/pseudo/task.json
+++ b/apps/web/src/locales/pseudo/task.json
@@ -555,6 +555,14 @@
   "failedToLoadDependencies": "Ƒàĩĺēď ţō ĺōàď ďēƥēńďēńćĩēś.",
   "failedToLoadDependencyCandidates": "Ƒàĩĺēď ţō ĺōàď ďēƥēńďēńćŷ ćàńďĩďàţēś.",
   "failedToLoadPreview": "Ƒàĩĺēď ţō ĺōàď ƥŕēvĩēŵ.",
+  "htmlPreview": "ĤŢḾĹ ƥŕēvĩēŵ",
+  "htmlPreviewError": "Ũńàƀĺē ţō ŕēńďēŕ ĤŢḾĹ ƥŕēvĩēŵ.",
+  "htmlPreviewLoading": "Ĺōàďĩńĝ ĤŢḾĹ ƥŕēvĩēŵ...",
+  "htmlPreviewPublishFailed": "ĤŢḾĹ ƥŕēvĩēŵ ćōũĺď ńōţ ƀē ōƥēńēď. Ţŕŷ àĝàĩń.",
+  "htmlPreviewTooLarge": "Ţĥĩś ĤŢḾĹ ƀũƒƒēŕ ĩś ţōō ĺàŕĝē ţō ƥŕēvĩēŵ. Śĥōŵ ćōďē àńď ţŕŷ àĝàĩń ŵĩţĥ à śḿàĺĺēŕ ƒĩĺē.",
+  "htmlPreviewTrustedCode": "Ƥŕēvĩēŵĩńĝ ŕũńś ŵōŕķśƥàćē ćōďē ŵĩţĥ ƀŕōŵśēŕ-ƥàńēĺ ćàƥàƀĩĺĩţĩēś. Ōńĺŷ ƥŕēvĩēŵ ƒĩĺēś ŷōũ ţŕũśţ.",
+  "htmlPreviewUnavailable": "Ţĥē ĤŢḾĹ ƥŕēvĩēŵ śēśśĩōń ĩś ńōţ àvàĩĺàƀĺē. Ćĥēćķ ţĥē ţàśķ śēśśĩōń àńď ţŕŷ àĝàĩń.",
+  "refreshHtmlPreview": "Ŕēƒŕēśĥ ĤŢḾĹ ƥŕēvĩēŵ",
   "failedToLoadRevision": "Ƒàĩĺēď ţō ĺōàď ŕēvĩśĩōń",
   "failedToLoadRevisionContent": "Ƒàĩĺēď ţō ĺōàď ŕēvĩśĩōń ćōńţēńţ",
   "failedToOpenFile": "Ƒàĩĺēď ţō ōƥēń ƒĩĺē",
@@ -1029,6 +1037,7 @@
   "openInEditorNamed": "Ōƥēń ĩń {{name}}",
   "openInNewTab": "Ōƥēń ĩń ńēŵ ţàƀ",
   "openInOfficeView": "Ōƥēń ĩń ōƒƒĩćē vĩēŵ",
+  "openHtmlPreview": "Ōƥēń ĤŢḾĹ ƥŕēvĩēŵ",
   "openInOtherEditor": "Ōƥēń ĩń ōţĥēŕ ēďĩţōŕ",
   "openMarkdownPreview": "Ōƥēń ḿàŕķďōŵń ƥŕēvĩēŵ",
   "openPlanDetails": "Ōƥēń ƥĺàń ďēţàĩĺś",
@@ -1445,6 +1454,7 @@
   "shortcutTogglesChatInput": "Śĥōŕţćũţ: <1>{{shortcut}}</1> ţōĝĝĺēś ţĥĩś ćĥàţ ĩńƥũţ.",
   "showBranchAndGitCredentialDetails": "Śĥōŵ ƀŕàńćĥ àńď Ĝĩţ ćŕēďēńţĩàĺ ďēţàĩĺś",
   "showCode": "Śĥōŵ ćōďē",
+  "retryHtmlPreview": "Řēţŕŷ ĤŢḾĹ ƥŕēvĩēŵ",
   "showCommandOutput": "Śĥōŵ ćōḿḿàńď ōũţƥũţ",
   "showDebugInfo": "Śĥōŵ Ďēƀũĝ Ĩńƒō",
   "showDetails": "Śĥōŵ ďēţàĩĺś",
diff --git a/apps/web/src/locales/pt-pt/editors.json b/apps/web/src/locales/pt-pt/editors.json
index fd8e6504b7..168e65cb1e 100644
--- a/apps/web/src/locales/pt-pt/editors.json
+++ b/apps/web/src/locales/pt-pt/editors.json
@@ -47,6 +47,7 @@
   "pasteLink": "Colar a ligação...",
   "planFormattingToolbar": "Barra de formatação do plano",
   "pleaseTryAgain": "Tente novamente.",
+  "previewHtml": "Pré-visualizar HTML",
   "previewMarkdown": "Pré-visualizar o markdown",
   "queuedForTheAgent": "Em fila para o agente.",
   "reload": "Recarregar",
diff --git a/apps/web/src/locales/pt-pt/task.json b/apps/web/src/locales/pt-pt/task.json
index 116417299f..8ca3b3fe1b 100644
--- a/apps/web/src/locales/pt-pt/task.json
+++ b/apps/web/src/locales/pt-pt/task.json
@@ -536,6 +536,14 @@
   "failedToLoadDependencies": "Não foi possível carregar as dependências.",
   "failedToLoadDependencyCandidates": "Não foi possível carregar as tarefas disponíveis como dependências.",
   "failedToLoadPreview": "Não foi possível carregar a pré-visualização.",
+  "htmlPreview": "Pré-visualização HTML",
+  "htmlPreviewError": "Não foi possível apresentar a pré-visualização HTML.",
+  "htmlPreviewLoading": "A carregar a pré-visualização HTML...",
+  "htmlPreviewPublishFailed": "Não foi possível abrir a pré-visualização HTML. Tente novamente.",
+  "htmlPreviewTooLarge": "Este buffer HTML é demasiado grande para pré-visualizar. Mostre o código e tente novamente com um ficheiro mais pequeno.",
+  "htmlPreviewTrustedCode": "A pré-visualização executa código da área de trabalho com as capacidades do painel do navegador. Pré-visualize apenas ficheiros em que confia.",
+  "htmlPreviewUnavailable": "A sessão de pré-visualização HTML não está disponível. Verifique a sessão da tarefa e tente novamente.",
+  "refreshHtmlPreview": "Atualizar pré-visualização HTML",
   "failedToLoadRevision": "Não foi possível carregar a revisão",
   "failedToLoadRevisionContent": "Não foi possível carregar o conteúdo da revisão",
   "failedToOpenFile": "Não foi possível abrir o ficheiro",
@@ -982,6 +990,7 @@
   "openInEditorNamed": "Abrir no {{name}}",
   "openInNewTab": "Abrir num novo separador",
   "openInOfficeView": "Abrir na vista de escritório",
+  "openHtmlPreview": "Abrir a pré-visualização HTML",
   "openInOtherEditor": "Abrir noutro editor",
   "openMarkdownPreview": "Abrir a pré-visualização de markdown",
   "openPlanDetails": "Abrir os detalhes do plano",
@@ -1389,6 +1398,7 @@
   "shortcutTogglesChatInput": "Atalho: <1>{{shortcut}}</1> alterna esta caixa de chat.",
   "showBranchAndGitCredentialDetails": "Mostrar os detalhes do branch e das credenciais Git",
   "showCode": "Mostrar o código",
+  "retryHtmlPreview": "Tentar novamente a pré-visualização HTML",
   "showCommandOutput": "Mostrar a saída do comando",
   "showDebugInfo": "Mostrar a informação de depuração",
   "showDetails": "Mostrar detalhes",
diff --git a/apps/web/src/locales/zh-cn/editors.json b/apps/web/src/locales/zh-cn/editors.json
index bedae4686c..cb346fb76b 100644
--- a/apps/web/src/locales/zh-cn/editors.json
+++ b/apps/web/src/locales/zh-cn/editors.json
@@ -47,6 +47,7 @@
   "pasteLink": "粘贴链接…",
   "planFormattingToolbar": "计划格式工具栏",
   "pleaseTryAgain": "请重试。",
+  "previewHtml": "预览 HTML",
   "previewMarkdown": "预览 Markdown",
   "queuedForTheAgent": "已排队等待智能体。",
   "reload": "重新加载",
diff --git a/apps/web/src/locales/zh-cn/task.json b/apps/web/src/locales/zh-cn/task.json
index 4993aad5a2..470de8f186 100644
--- a/apps/web/src/locales/zh-cn/task.json
+++ b/apps/web/src/locales/zh-cn/task.json
@@ -536,6 +536,14 @@
   "failedToLoadDependencies": "加载依赖关系失败。",
   "failedToLoadDependencyCandidates": "加载依赖任务失败。",
   "failedToLoadPreview": "加载预览失败。",
+  "htmlPreview": "HTML 预览",
+  "htmlPreviewError": "无法呈现 HTML 预览。",
+  "htmlPreviewLoading": "正在加载 HTML 预览...",
+  "htmlPreviewPublishFailed": "无法打开 HTML 预览。请重试。",
+  "htmlPreviewTooLarge": "此 HTML 缓冲区太大，无法预览。请显示代码并使用较小的文件重试。",
+  "htmlPreviewTrustedCode": "预览会使用浏览器面板的功能执行工作区代码。请只预览你信任的文件。",
+  "htmlPreviewUnavailable": "HTML 预览会话不可用。请检查任务会话并重试。",
+  "refreshHtmlPreview": "刷新 HTML 预览",
   "failedToLoadRevision": "加载修订失败",
   "failedToLoadRevisionContent": "加载修订内容失败",
   "failedToOpenFile": "打开文件失败",
@@ -981,6 +989,7 @@
   "openInEditorNamed": "在 {{name}} 中打开",
   "openInNewTab": "在新标签页中打开",
   "openInOfficeView": "在办公室视图中打开",
+  "openHtmlPreview": "打开 HTML 预览",
   "openInOtherEditor": "在其他编辑器中打开",
   "openMarkdownPreview": "打开 Markdown 预览",
   "openPlanDetails": "打开计划详情",
@@ -1388,6 +1397,7 @@
   "shortcutTogglesChatInput": "快捷键：<1>{{shortcut}}</1> 切换此聊天输入。",
   "showBranchAndGitCredentialDetails": "显示分支与 Git 凭据详情",
   "showCode": "显示代码",
+  "retryHtmlPreview": "重试 HTML 预览",
   "showCommandOutput": "显示命令输出",
   "showDebugInfo": "显示调试信息",
   "showDetails": "显示详情",
diff --git a/apps/web/src/locales/zh-hk/editors.json b/apps/web/src/locales/zh-hk/editors.json
index 902375d085..410d07ea80 100644
--- a/apps/web/src/locales/zh-hk/editors.json
+++ b/apps/web/src/locales/zh-hk/editors.json
@@ -47,6 +47,7 @@
   "pasteLink": "貼上連結…",
   "planFormattingToolbar": "計劃格式工具欄",
   "pleaseTryAgain": "請重試。",
+  "previewHtml": "預覽 HTML",
   "previewMarkdown": "預覽 Markdown",
   "queuedForTheAgent": "已排隊等待代理程式。",
   "reload": "重新載入",
diff --git a/apps/web/src/locales/zh-hk/task.json b/apps/web/src/locales/zh-hk/task.json
index 9743b07bb9..e930a2d85f 100644
--- a/apps/web/src/locales/zh-hk/task.json
+++ b/apps/web/src/locales/zh-hk/task.json
@@ -536,6 +536,14 @@
   "failedToLoadDependencies": "載入依賴關係失敗。",
   "failedToLoadDependencyCandidates": "載入依賴任務失敗。",
   "failedToLoadPreview": "載入預覽失敗。",
+  "htmlPreview": "HTML 預覽",
+  "htmlPreviewError": "無法呈現 HTML 預覽。",
+  "htmlPreviewLoading": "正在載入 HTML 預覽...",
+  "htmlPreviewPublishFailed": "無法開啟 HTML 預覽。請重試。",
+  "htmlPreviewTooLarge": "此 HTML 緩衝區太大，無法預覽。請顯示程式碼，並使用較小的檔案重試。",
+  "htmlPreviewTrustedCode": "預覽會使用瀏覽器面板的功能執行工作區程式碼。請只預覽你信任的檔案。",
+  "htmlPreviewUnavailable": "HTML 預覽工作階段不可用。請檢查工作項工作階段並重試。",
+  "refreshHtmlPreview": "刷新 HTML 預覽",
   "failedToLoadRevision": "載入修訂失敗",
   "failedToLoadRevisionContent": "載入修訂內容失敗",
   "failedToOpenFile": "開啟檔案失敗",
@@ -981,6 +989,7 @@
   "openInEditorNamed": "在 {{name}} 中開啟",
   "openInNewTab": "在新標籤頁中開啟",
   "openInOfficeView": "在辦公室視圖中開啟",
+  "openHtmlPreview": "開啟 HTML 預覽",
   "openInOtherEditor": "在其他編輯器中開啟",
   "openMarkdownPreview": "開啟 Markdown 預覽",
   "openPlanDetails": "開啟計劃詳情",
@@ -1388,6 +1397,7 @@
   "shortcutTogglesChatInput": "快捷鍵：<1>{{shortcut}}</1> 切換此聊天輸入。",
   "showBranchAndGitCredentialDetails": "顯示分支與 Git 認證資料詳情",
   "showCode": "顯示程式碼",
+  "retryHtmlPreview": "重試 HTML 預覽",
   "showCommandOutput": "顯示命令輸出",
   "showDebugInfo": "顯示調試資訊",
   "showDetails": "顯示詳情",
diff --git a/apps/web/src/locales/zh-tw/editors.json b/apps/web/src/locales/zh-tw/editors.json
index d1444959de..2154a51675 100644
--- a/apps/web/src/locales/zh-tw/editors.json
+++ b/apps/web/src/locales/zh-tw/editors.json
@@ -47,6 +47,7 @@
   "pasteLink": "貼上連結…",
   "planFormattingToolbar": "計劃格式工具欄",
   "pleaseTryAgain": "請重試。",
+  "previewHtml": "預覽 HTML",
   "previewMarkdown": "預覽 Markdown",
   "queuedForTheAgent": "已排隊等待代理程式。",
   "reload": "重新載入",
diff --git a/apps/web/src/locales/zh-tw/task.json b/apps/web/src/locales/zh-tw/task.json
index 6815ee81cd..b470d4b130 100644
--- a/apps/web/src/locales/zh-tw/task.json
+++ b/apps/web/src/locales/zh-tw/task.json
@@ -536,6 +536,14 @@
   "failedToLoadDependencies": "載入依賴關係失敗。",
   "failedToLoadDependencyCandidates": "載入依賴任務失敗。",
   "failedToLoadPreview": "載入預覽失敗。",
+  "htmlPreview": "HTML 預覽",
+  "htmlPreviewError": "無法呈現 HTML 預覽。",
+  "htmlPreviewLoading": "正在載入 HTML 預覽...",
+  "htmlPreviewPublishFailed": "無法開啟 HTML 預覽。請重試。",
+  "htmlPreviewTooLarge": "此 HTML 緩衝區太大，無法預覽。請顯示程式碼，並使用較小的檔案重試。",
+  "htmlPreviewTrustedCode": "預覽會使用瀏覽器面板的功能執行工作區程式碼。請只預覽你信任的檔案。",
+  "htmlPreviewUnavailable": "HTML 預覽工作階段無法使用。請檢查工作項工作階段並重試。",
+  "refreshHtmlPreview": "重新整理 HTML 預覽",
   "failedToLoadRevision": "載入修訂失敗",
   "failedToLoadRevisionContent": "載入修訂內容失敗",
   "failedToOpenFile": "開啟檔案失敗",
@@ -981,6 +989,7 @@
   "openInEditorNamed": "在 {{name}} 中開啟",
   "openInNewTab": "在新標籤頁中開啟",
   "openInOfficeView": "在辦公室檢視中開啟",
+  "openHtmlPreview": "開啟 HTML 預覽",
   "openInOtherEditor": "在其他編輯器中開啟",
   "openMarkdownPreview": "開啟 Markdown 預覽",
   "openPlanDetails": "開啟計劃詳情",
@@ -1388,6 +1397,7 @@
   "shortcutTogglesChatInput": "快捷鍵：<1>{{shortcut}}</1> 切換此聊天輸入。",
   "showBranchAndGitCredentialDetails": "顯示分支與 Git 認證資訊詳情",
   "showCode": "顯示程式碼",
+  "retryHtmlPreview": "重試 HTML 預覽",
   "showCommandOutput": "顯示命令輸出",
   "showDebugInfo": "顯示除錯資訊",
   "showDetails": "顯示詳情",
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
index 9e39ce6806..d24be2080e 100644
--- a/apps/web/vitest.config.ts
+++ b/apps/web/vitest.config.ts
@@ -34,6 +34,7 @@ export default mergeConfig(
         happyDOM: {
           settings: {
             navigation: {
+              disableMainFrameNavigation: true,
               disableChildFrameNavigation: true,
             },
           },
diff --git a/docs/decisions/2026-09-05-trusted-browser-html-preview.md b/docs/decisions/2026-09-05-trusted-browser-html-preview.md
new file mode 100644
index 0000000000..4a49b74900
--- /dev/null
+++ b/docs/decisions/2026-09-05-trusted-browser-html-preview.md
@@ -0,0 +1,102 @@
+# ADR-2026-09-05-trusted-browser-html-preview: Treat HTML Preview as Trusted Workspace Code
+
+**Status:** accepted
+**Date:** 2026-09-05
+**Area:** frontend, backend, agentctl, security
+**Amended:** 2026-09-06 to make in-editor preview the primary desktop surface
+
+## Context
+
+Kandev needs a one-click preview for `.html` and `.htm` files. The desired
+product behavior is normal browser fidelity: relative assets, native DOM and
+browser APIs, links, forms, media, modules, and network behavior. The preview
+must also use the current unsaved editor buffer.
+
+The first design treated every workspace document as hostile. It used QuickJS
+in a Web Worker, a virtual DOM, a controlled renderer, resource filtering, and
+execution budgets. That design reduced ambient authority but did not provide a
+normal browser. It also duplicated a large and permanently incomplete browser
+compatibility surface.
+
+Kandev already routes executor-local HTTP ports through a session-authorized
+proxy and renders trusted workspace pages in iframes that permit scripts and
+same-origin behavior. Reusing this path gives static HTML the same fidelity and
+executor coverage as an explicitly started development server.
+
+[ADR-2026-07-24-operator-owned-agent-launcher-settings](2026-07-24-operator-owned-agent-launcher-settings.md)
+requires workspace-controlled web content to use a separate origin when it is
+treated as untrusted. The product owner explicitly selected the existing
+trusted native-browser model for HTML preview instead of a dedicated preview
+origin.
+
+## Decision
+
+Treat native HTML preview as execution of trusted workspace code. Use the
+existing Browser-panel iframe sandbox, origin behavior, and session port proxy.
+Do not claim that preview isolates users from hostile HTML or JavaScript.
+
+Agentctl will lazily start an ephemeral loopback static server for each selected
+workspace or repository root. The current editor buffer is stored as a bounded
+in-memory overlay for its workspace path. The server reads other relative assets
+from that root. The backend authorizes the task session and forwards publish
+requests to agentctl. Desktop and mobile replace the active file viewer body
+with the returned session proxy URL. Desktop can open the same URL in the
+Browser panel only through an explicit secondary action.
+
+This decision narrows the untrusted-content rule in the 2026-07-24 ADR: native
+HTML preview is an explicit trusted-content exception. That ADR continues to
+govern operator-owned launcher settings and any future feature that promises to
+render workspace-controlled content as untrusted. If Kandev later offers an
+untrusted HTML preview mode, that mode must use a dedicated origin or a stronger
+independently reviewed boundary.
+
+The static server must contain filesystem reads to the selected root and listen
+only on loopback. It must use the existing authenticated proxy and stop with
+agentctl. Logs must not contain source content. These requirements control the
+host and routing. They are not a browser-script sandbox.
+
+## Consequences
+
+- HTML, CSS, JavaScript, relative assets, and browser APIs behave like they do
+  in the existing Browser-panel iframe.
+- Unsaved HTML can be previewed without writing it to the workspace.
+- Local, Docker, SSH, and Kubernetes task sessions reuse one routing mechanism.
+- Users must trust previewed documents. The UI and public documentation must
+  state that previewing executes workspace code with Browser-panel authority.
+- Same-origin deployments can expose Kandev/browser authority to previewed code.
+  This risk is accepted for this feature and must not be described as isolated.
+- Kandev owns a small static-server and in-memory-overlay lifecycle instead of
+  an ECMAScript engine, virtual DOM, browser emulation layer, and safe renderer.
+- Applications that need builds, backend routes, HMR, or framework-specific
+  behavior continue to use their configured development server.
+
+## Alternatives considered
+
+### QuickJS with a virtual DOM and controlled renderer
+
+Rejected because it is a browser reimplementation with limited compatibility.
+Its complexity is not justified when browser fidelity is the product goal.
+
+### Dedicated preview origin
+
+Rejected for the current feature because it adds deployment, DNS, cookie,
+desktop, and remote-executor routing work. It remains the preferred direction
+if Kandev needs to claim hostile-content isolation later.
+
+### Scriptless `srcDoc` iframe
+
+Rejected because it does not support the required scripts, relative assets, or
+normal browser APIs.
+
+### Require users to configure a development-server command
+
+Rejected as the only workflow because a static HTML document needs one action,
+not project-specific command configuration. The explicit development server
+remains available for non-static applications.
+
+### Open a Browser panel as the primary desktop result
+
+Rejected because a file-preview action should preserve the user's active file
+context and match the existing source/preview mental model. The Browser panel
+remains available as an explicit secondary action for broader browsing and
+inspection workflows.
diff --git a/docs/decisions/INDEX.md b/docs/decisions/INDEX.md
index 940785c790..dd42edbea2 100644
--- a/docs/decisions/INDEX.md
+++ b/docs/decisions/INDEX.md
@@ -250,3 +250,5 @@ Read individual ADRs for full context. Create new ones via `/record decision` or
 | 2026-09-06-opt-in-external-e2e-runners | [Opt in selected Linux CI jobs to external runners](2026-09-06-opt-in-external-e2e-runners.md) | accepted | infra, workflow, security | 2026-09-06 |
 | 2026-09-06-explicit-pr-auto-fix-outcomes | [Require Explicit Outcomes for PR Auto-Fix Attempts](2026-09-06-explicit-pr-auto-fix-outcomes.md) | proposed | backend, frontend, protocol, workflow, GitHub | 2026-09-06 |
 | 2026-09-05-bounded-progressive-storage-analysis | [Use bounded progressive storage analysis](2026-09-05-bounded-progressive-storage-analysis.md) | accepted | backend, frontend, protocol | 2026-09-05 |
+| 2026-09-05-script-capable-html-preview-isolation | [Capability-Free Runtime for Script-Capable HTML Preview](2026-09-05-script-capable-html-preview-isolation.md) | proposed | frontend, desktop, security | 2026-09-05 |
+| 2026-09-05-trusted-browser-html-preview | [Treat HTML Preview as Trusted Workspace Code](2026-09-05-trusted-browser-html-preview.md) | accepted | frontend, backend, agentctl, security | 2026-09-05 |
diff --git a/docs/plans/native-html-preview/plan.md b/docs/plans/native-html-preview/plan.md
new file mode 100644
index 0000000000..b6be69ae1e
--- /dev/null
+++ b/docs/plans/native-html-preview/plan.md
@@ -0,0 +1,215 @@
+---
+created: 2026-09-05
+status: complete
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+legacy_specs: []
+---
+
+# Implementation Plan: Trusted Browser HTML File Preview
+
+## Overview
+
+Replace the QuickJS and virtual-DOM implementation with a one-click static
+preview server in agentctl. Publish the current editor buffer as an in-memory
+entry document. Serve relative workspace assets from disk. Desktop and mobile
+replace the active file editor body with the focused iframe. The Browser panel
+remains an explicit secondary desktop action.
+
+The product owner selected the trusted native-browser model. Implementation and
+documentation must state that previewing executes trusted workspace code and
+must not claim hostile-content isolation.
+
+## Scope
+
+### In scope
+
+- An ephemeral loopback static server owned by each agentctl instance.
+- Bounded in-memory overlays for current, unsaved HTML buffers.
+- Workspace-rooted relative asset serving with traversal and symlink-escape
+  protection.
+- A session-authorized backend publish endpoint and agentctl client contract.
+- Existing session port-proxy routing for every supported executor.
+- Desktop in-editor iframe, `Show code`, refresh, and optional Browser-panel
+  behavior.
+- A full-height mobile iframe with the same recovery and preserved editor state.
+- Localized trusted-code, progress, error, and retry copy in all locales.
+- Removal of the preview-specific QuickJS and direct parse5 dependencies, the
+  virtual DOM, worker code, and obsolete tests.
+- Public documentation and focused backend, frontend, E2E, and desktop checks.
+
+### Out of scope
+
+- An untrusted-content security boundary or dedicated preview origin.
+- Framework builds, HMR, server-side routes, or package installation.
+- Review-diff previews, source mapping, and new Browser-panel inspector features.
+- Replacing explicit development-server commands for non-static applications.
+
+## Technical approach
+
+### Workspace preview server
+
+Add a concurrency-safe manager to agentctl. It binds one loopback ephemeral port
+per selected workspace or repository root. The manager publishes up to 32
+current-buffer overlays of at most 5 MiB each. It stops all servers with the
+agentctl instance. Exact overlay paths win over disk content. All responses use
+`Cache-Control: no-store`.
+
+The server resolves request paths with the existing repository path helpers and
+rejects traversal, encoded traversal, and symlink targets outside the selected
+root. It does not rewrite document content or emulate browser behavior.
+
+### Session publish contract
+
+Add a task-session endpoint that authenticates the session, ensures agentctl is
+ready, bounds the request, and forwards `{repo, path, content}`. Agentctl repeats
+validation and returns `{port, path, version}`. The frontend builds the existing
+session port-proxy URL and appends the version as a cache buster.
+
+### Responsive UI
+
+Desktop and mobile keep the file tab identity and replace the source body with
+`HtmlPreviewContent` after publication. Kandev-owned chrome provides `Show
+code`, refresh, errors, retry, and an optional desktop Browser-panel action.
+Preview state is scoped to the active session and file identity and is not
+restored across reloads.
+
+Before execution, user-facing copy identifies the action as trusted workspace
+code. The iframe uses the existing Browser-panel sandbox policy. The feature
+does not add an isolation claim or browser capability filter.
+
+### Migration and documentation
+
+Delete the worker runtime, virtual DOM, Shadow DOM renderer, navigation
+normalizer, and preview-only QuickJS/direct parse5 dependencies. Keep Markdown
+behavior and explicit development-server controls unchanged. Update public
+guidance to distinguish the zero-configuration static preview from application
+development servers and to state the trust consequence.
+
+## Acceptance evidence
+
+| Acceptance criteria                       | Evidence                                                                                                                                                                        |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.1`, `.2`, `.3`, `.7`, `.8`, `.9`, `.10` | Frontend API/component tests plus desktop and mobile E2E for current buffers, in-editor toggling, explicit Browser-panel opening, trust copy, source preservation, and recovery |
+| `.4`, `.5`, `.11`                         | Agentctl server tests and browser E2E for native scripts, browser APIs, relative assets, bounds, path containment, eviction, and shutdown                                       |
+| `.6`                                      | Backend handler/client tests plus existing session port-proxy regression coverage                                                                                               |
+
+## Work orders
+
+### Trusted Browser delivery
+
+- [done] [Task 10: Build the agentctl workspace preview server](task-10-agentctl-workspace-preview-server.md)
+- [done] [Task 11: Add the session publish contract](task-11-session-preview-publish-contract.md)
+- [done] [Task 12: Replace the virtual runtime with Browser-panel UI](task-12-browser-panel-preview-ui.md)
+- [done] [Task 13: Document and prove browser-fidelity preview](task-13-browser-fidelity-docs-and-e2e.md)
+
+### In-editor preview revision
+
+- [done] [Task 14: Move desktop HTML preview into the file editor](task-14-in-editor-html-preview.md)
+- [done] [Task 15: Revise preview guidance and browser E2E](task-15-in-editor-preview-docs-e2e.md)
+
+### Superseded implementation work
+
+Tasks 01 through 04 describe the original scriptless prototype. Tasks 05
+through 09 describe the QuickJS and virtual-DOM implementation. They are
+retained for traceability but cancelled because the selected product contract
+is native browser fidelity:
+
+- [cancelled] [Task 01: Establish preview state and sandbox contract](task-01-preview-state-and-sandbox.md)
+- [cancelled] [Task 02: Add responsive HTML preview surfaces](task-02-responsive-html-preview.md)
+- [cancelled] [Task 03: Publish HTML preview guidance](task-03-public-html-preview-guidance.md)
+- [cancelled] [Task 04: Prove responsive HTML preview flows](task-04-responsive-html-preview-e2e.md)
+- [cancelled] [Task 05: Build the capability-free preview runtime](task-05-script-capable-preview-runtime.md)
+- [cancelled] [Task 06: Integrate the runtime with preview state and renderer](task-06-preview-state-and-renderer.md)
+- [cancelled] [Task 07: Wire responsive preview surfaces](task-07-responsive-preview-surfaces.md)
+- [cancelled] [Task 08: Publish script-capable preview guidance](task-08-script-capable-preview-guidance.md)
+- [cancelled] [Task 09: Prove script execution and isolation](task-09-script-capable-preview-e2e.md)
+
+## Dependency order
+
+```text
+Task 10 agentctl server
+        |
+        v
+Task 11 session contract
+        |
+        v
+Task 12 responsive UI and runtime removal
+        |
+        v
+Task 13 docs, E2E, and final verification
+        |
+        v
+Task 14 in-editor desktop preview
+        |
+        v
+Task 15 revised docs and E2E
+```
+
+Tasks 10 and 11 establish the serving and authorization boundary before any UI
+depends on it. Task 12 removes the old runtime only after the end-to-end URL can
+be produced. Task 13 verified the first shipped flow. Tasks 14 and 15 revise the
+desktop presentation without changing the serving boundary, then update its
+documentation and browser evidence.
+
+## Risks
+
+- Same-origin Browser-panel content can exercise Kandev/browser authority. This
+  is an accepted product tradeoff and must remain visible to users.
+- Agentctl server teardown and overlay locking must cover stop, restart, and
+  executor failure paths without leaking listeners or data.
+- Proxy rewriting and capability cookies must preserve relative, root-relative,
+  redirect, module, and fetch requests.
+- Multi-repository roots and symlinks can accidentally widen filesystem access
+  unless existing canonical path helpers are used consistently.
+- In-editor preview state must not outlive its session or file identity, and
+  stale publish completions must not replace another file's source body.
+- Removing runtime packages changes the shared lockfile and generated license
+  catalog. The Markdown renderer still owns transitive parse5 licenses, so the
+  verification must distinguish those from the removed preview dependency.
+
+## Completion gate
+
+The package is ready to merge after all required checks pass. These checks cover
+the backend, frontend, documentation, localization, E2E, desktop, dependencies,
+licenses, and PR CI. Every review thread must have a disposition before merge.
+
+## Verification results
+
+- Agentctl API tests and race tests passed, including deterministic concurrent
+  publish/read, per-root ports, and HEAD/405 method coverage.
+- Full backend tests passed with the task-host internal config overrides cleared.
+- Focused frontend tests passed: 13 files and 69 tests, including stale
+  session completion guards.
+- Agentctl client and task-handler tests passed for typed 400/413/503
+  propagation, malformed responses, oversized requests, and unavailable
+  sessions. The unused lifecycle forwarding layer was removed.
+- Web typecheck, lint, i18n checks, i18n ratchet, license generation, and Vite
+  E2E build passed.
+- Public-doc validation passed: 61 tests and 43 published pages.
+- Raw desktop Chromium and mobile Chrome preview suites passed: 2 tests each.
+- Desktop shell E2E passed.
+- Fresh desktop and mobile screenshots were captured, inspected, and compressed
+  for the pull request.
+- Reproduced and fixed the CI-only frontend failure in the saved-repository
+  picker by synchronizing the Radix menu dismissal and asynchronous discovery
+  assertions.
+- Disabled Happy DOM main-frame and child-frame fixture navigation, and isolated
+  Vitest-importable E2E utilities from Playwright runtime imports to remove the
+  unhandled loopback `ECONNREFUSED` failures.
+- The full frontend suite passed after the fix: 1,871 test files, 15,869
+  passed, and 4 skipped, with no unhandled network errors.
+- Re-ran desktop and mobile native preview E2E locally: 2 tests passed in each
+  project. Web lint, direct web typecheck, i18n checks, and formatting checks
+  also passed.
+- Revised the desktop presentation so `Preview HTML` replaces the active editor
+  body instead of automatically opening a Browser panel. Focused frontend
+  coverage passed 6 files and 22 tests, including source recovery, latest-buffer
+  refresh, explicit Browser-panel opening, and file/session identity resets.
+- Revised desktop and mobile preview E2E passed 2 tests in each project on the
+  first attempt. Specification validation passed all 30 tests, public-doc
+  validation passed 61 tests across 46 pages, and desktop shell E2E passed.
+- The final full frontend suite passed 1,872 test files and 15,902 tests, with
+  four intentional skips and no failures.
diff --git a/docs/plans/native-html-preview/task-01-preview-state-and-sandbox.md b/docs/plans/native-html-preview/task-01-preview-state-and-sandbox.md
new file mode 100644
index 0000000000..990e75474e
--- /dev/null
+++ b/docs/plans/native-html-preview/task-01-preview-state-and-sandbox.md
@@ -0,0 +1,79 @@
+---
+id: "01-preview-state-and-sandbox"
+title: "Establish preview state and sandbox contract"
+status: cancelled
+wave: 1
+depends_on: []
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 01: Establish preview state and sandbox contract
+
+## Summary
+
+This work order described the first static-only prototype. Its empty iframe
+and inert-script contract was superseded when the owner reaffirmed the
+inline-JavaScript requirement. It is retained as history and is not evidence
+for the current plan.
+
+## In scope
+
+- The previously implemented format-neutral preview state and legacy Markdown
+  restoration are reusable inputs for the revised work.
+- The previous static document builder and navigation normalizer are reusable
+  only as defense in depth.
+
+## Out of scope
+
+- Treating an empty sandbox or `script-src 'none'` as the final preview
+  execution boundary.
+- Shipping the static-only HTML preview contract.
+
+## Acceptance
+
+- Cancelled. The original acceptance conditions required scripts to remain
+  inert and therefore conflict with the approved script-capable contract.
+
+## Verification
+
+Not applicable. Use [Task 05](task-05-script-capable-preview-runtime.md) and
+[Task 06](task-06-preview-state-and-renderer.md) for the replacement work.
+
+## Files likely touched
+
+- `apps/web/lib/utils/file-types.ts`
+- `apps/web/lib/html-preview/`
+- `apps/web/hooks/use-file-editors.ts`
+
+## Dependencies
+
+Replaced by Tasks 05 and 06.
+
+## Risks
+
+Treating the old static tests as final evidence can conceal the missing inline
+JavaScript capability.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- The superseded static prototype commit and its test results.
+- The revised requirements and system design.
+
+## Results
+
+Cancelled after review. No production contract is accepted from this work
+order.
diff --git a/docs/plans/native-html-preview/task-02-responsive-html-preview.md b/docs/plans/native-html-preview/task-02-responsive-html-preview.md
new file mode 100644
index 0000000000..e0f6816d05
--- /dev/null
+++ b/docs/plans/native-html-preview/task-02-responsive-html-preview.md
@@ -0,0 +1,79 @@
+---
+id: "02-responsive-html-preview"
+title: "Add responsive HTML preview surfaces"
+status: cancelled
+wave: 2
+depends_on:
+  - "01-preview-state-and-sandbox"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 02: Add responsive HTML preview surfaces
+
+## Summary
+
+This work order wired the HTML preview to a static `srcDoc` iframe. The owner
+selected script-capable execution, so the implementation is superseded by the
+runtime-backed renderer work in Tasks 06 and 07.
+
+## In scope
+
+- Existing toolbar, file-state, localization, desktop, and mobile wiring may be
+  reused after the runtime-backed renderer contract is implemented.
+
+## Out of scope
+
+- Shipping `HtmlPreviewContent` with `sandbox=""` and inert scripts as the
+  final behavior.
+- Treating component tests for iframe attributes as proof of script isolation.
+
+## Acceptance
+
+- Cancelled. The original acceptance conditions describe the static-only
+  renderer and do not satisfy inline JavaScript execution.
+
+## Verification
+
+Not applicable. Use [Task 06](task-06-preview-state-and-renderer.md) and
+[Task 07](task-07-responsive-preview-surfaces.md) for the replacement work.
+
+## Files likely touched
+
+- `apps/web/components/task/html-preview-content.tsx`
+- `apps/web/components/task/file-editor-content.tsx`
+- `apps/web/components/task/mobile/mobile-file-viewer-panel.tsx`
+
+## Dependencies
+
+Replaced by Tasks 06 and 07.
+
+## Risks
+
+Keeping the old iframe contract in a passing component test can hide a missing
+runtime boundary.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- The superseded static prototype and existing Markdown preview surfaces.
+- The revised runtime and renderer system design.
+
+## Results
+
+Cancelled after review. Existing UI changes remain non-ready until the
+script-capable renderer is implemented.
diff --git a/docs/plans/native-html-preview/task-03-public-html-preview-guidance.md b/docs/plans/native-html-preview/task-03-public-html-preview-guidance.md
new file mode 100644
index 0000000000..44d8c4320e
--- /dev/null
+++ b/docs/plans/native-html-preview/task-03-public-html-preview-guidance.md
@@ -0,0 +1,71 @@
+---
+id: "03-public-html-preview-guidance"
+title: "Publish HTML preview guidance"
+status: cancelled
+wave: 3
+depends_on:
+  - "02-responsive-html-preview"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 03: Publish HTML preview guidance
+
+## Summary
+
+This work order documented the static-only preview prototype. Its public text
+must not be treated as the final contract because the approved behavior now
+includes isolated inline JavaScript.
+
+## In scope
+
+- The existing Files and editor guidance is an input to Task 08.
+
+## Out of scope
+
+- Publishing claims that scripts are inert as the final product behavior.
+- Describing the current `srcDoc` iframe as a complete security boundary.
+
+## Acceptance
+
+- Cancelled. Public guidance will be rewritten after the runtime-backed
+  behavior and its browser evidence are complete.
+
+## Verification
+
+Not applicable. Use [Task 08](task-08-script-capable-preview-guidance.md).
+
+## Files likely touched
+
+- `docs/public/developer-tools.md`
+
+## Dependencies
+
+Replaced by Task 08, after the runtime and user-facing surfaces are complete.
+
+## Risks
+
+Premature public guidance can promise either unsupported script execution or a
+static-only behavior that the owner rejected.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- The revised requirements and system design.
+- The existing Files and editor integrations guide.
+
+## Results
+
+Cancelled after review. No public documentation result from this work order is
+accepted for the revised contract.
diff --git a/docs/plans/native-html-preview/task-04-responsive-html-preview-e2e.md b/docs/plans/native-html-preview/task-04-responsive-html-preview-e2e.md
new file mode 100644
index 0000000000..66fc97fce3
--- /dev/null
+++ b/docs/plans/native-html-preview/task-04-responsive-html-preview-e2e.md
@@ -0,0 +1,74 @@
+---
+id: "04-responsive-html-preview-e2e"
+title: "Prove responsive HTML preview flows"
+status: cancelled
+wave: 3
+depends_on:
+  - "02-responsive-html-preview"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 04: Prove responsive HTML preview flows
+
+## Summary
+
+This work order proved the static-only browser flow and asserted that scripts
+did not execute. Those assertions contradict the approved script-capable
+contract and are superseded by Task 09.
+
+## In scope
+
+- Existing desktop and mobile fixtures may be reused after the runtime-backed
+  flow is implemented.
+
+## Out of scope
+
+- Treating a passing static-only browser test as evidence for script execution
+  or network isolation.
+
+## Acceptance
+
+- Cancelled. The old test proves the wrong behavior.
+
+## Verification
+
+Not applicable. Use [Task 09](task-09-script-capable-preview-e2e.md).
+
+## Files likely touched
+
+- `apps/web/e2e/tests/chat/html-preview.spec.ts`
+- `apps/web/e2e/tests/task/mobile-html-preview.spec.ts`
+
+## Dependencies
+
+Replaced by Task 09 after Tasks 06 and 07.
+
+## Risks
+
+Negative-only tests can pass while the required inline script capability is
+missing.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- The superseded static browser scenarios.
+- The runtime-backed verification strategy in the system design.
+
+## Results
+
+Cancelled after review. Its previous results remain historical only.
diff --git a/docs/plans/native-html-preview/task-05-script-capable-preview-runtime.md b/docs/plans/native-html-preview/task-05-script-capable-preview-runtime.md
new file mode 100644
index 0000000000..9031d55a9c
--- /dev/null
+++ b/docs/plans/native-html-preview/task-05-script-capable-preview-runtime.md
@@ -0,0 +1,118 @@
+---
+id: "05-script-capable-preview-runtime"
+title: "Build the capability-free preview runtime"
+status: cancelled
+wave: 1
+depends_on: []
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 05: Build the capability-free preview runtime
+
+## Summary
+
+Implement the isolated script execution boundary selected by the revised HTML
+preview design. Inline source JavaScript runs in a dedicated worker-hosted
+ECMAScript VM with a virtual DOM and no host imports. The worker emits only
+data-only snapshots and diagnostics through a structured-clone protocol.
+
+## In scope
+
+- Select, pin, and license-check the ECMAScript engine and virtual-DOM support
+  needed for the first supported capability set.
+- Implement worker lifecycle, load, event-dispatch, snapshot, diagnostics, and
+  disposal messages.
+- Implement virtual DOM mutation, inline script order, virtual event handlers,
+  bounded timers, console diagnostics, and runtime-owned blob tokens.
+- Deny browser globals, Kandev data, credentials, storage, filesystem,
+  network, navigation, downloads, and window-opening APIs.
+- Enforce instruction, wall-clock, virtual-heap, timer, event-queue, and
+  snapshot limits with fail-closed termination.
+- Add unit tests for capability absence, script execution, event dispatch,
+  dynamic resource filtering, navigation no-ops, and budget failure.
+
+## Out of scope
+
+- File-tab state or toolbar changes.
+- Responsive surface composition and localization.
+- Public documentation.
+- Full browser API compatibility, remote resources, or multi-file sites.
+
+## Acceptance
+
+- A representative inline script mutates the virtual document and responds to
+  a sanitized user event without executing in the native browser context.
+- Attempts to use fetch, XHR, WebSocket, EventSource, location, history,
+  parent/top, forms, downloads, or window APIs fail closed and cannot produce a
+  browser request or navigation.
+- Infinite loops, oversized output, unsupported APIs, malformed messages, and
+  runtime exceptions terminate or reject the generation without falling back to
+  native script execution.
+
+## Verification
+
+```bash
+cd apps/web
+pnpm exec vitest run lib/html-preview/preview-runtime.test.ts lib/html-preview/preview-resource-policy.test.ts
+pnpm run typecheck
+```
+
+## Files likely touched
+
+- `apps/web/lib/html-preview/preview-runtime.ts`
+- `apps/web/lib/html-preview/preview-runtime.worker.ts`
+- `apps/web/lib/html-preview/preview-runtime-types.ts`
+- `apps/web/lib/html-preview/preview-resource-policy.ts`
+- `apps/web/lib/html-preview/preview-runtime.test.ts`
+- `apps/web/lib/html-preview/preview-resource-policy.test.ts`
+- `apps/web/package.json`
+- `apps/pnpm-lock.yaml`
+
+## Dependencies
+
+None. This boundary must exist before UI integration can claim script support.
+
+## Risks
+
+- The engine may not support the required ECMAScript or virtual-DOM behavior in
+  all supported browsers and WebViews.
+- A host import, native function escape, or unbounded callback can invalidate
+  the security boundary.
+- Runtime limits that are too strict can break ordinary interactive documents.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- `REQ-UI-NATIVE-HTML-PREVIEW-001.3` through `.6` and `.9`.
+- The runtime boundary, message contract, execution limits, and security
+  invariants in the system design.
+- The capability-free preview isolation design that this cancelled work order
+  originally implemented.
+
+## Results
+
+Implemented the worker-hosted QuickJS runtime with a virtual document, bounded
+event and timer execution, deny-by-default resource policy, runtime-owned blob
+tokens, structured-clone snapshots, and fail-closed lifecycle errors.
+Load and interaction execution each receive an independent wall-clock and
+interrupt budget, so an idle preview cannot consume the next user interaction's
+runtime allowance.
+
+Verification completed:
+
+```text
+pnpm exec vitest run lib/html-preview/preview-runtime.test.ts lib/html-preview/preview-runtime-client.test.ts lib/html-preview/preview-resource-policy.test.ts
+pnpm exec tsc --noEmit --pretty false
+```
diff --git a/docs/plans/native-html-preview/task-06-preview-state-and-renderer.md b/docs/plans/native-html-preview/task-06-preview-state-and-renderer.md
new file mode 100644
index 0000000000..2fb791992a
--- /dev/null
+++ b/docs/plans/native-html-preview/task-06-preview-state-and-renderer.md
@@ -0,0 +1,117 @@
+---
+id: "06-preview-state-and-renderer"
+title: "Integrate the runtime with preview state and renderer"
+status: cancelled
+wave: 2
+depends_on:
+  - "05-script-capable-preview-runtime"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 06: Integrate the runtime with preview state and renderer
+
+## Summary
+
+Replace the static `srcDoc` execution path with the worker-backed runtime and a
+scriptless snapshot renderer. Preserve the existing format-neutral file state,
+legacy Markdown restoration, source buffer, and preview identity behavior.
+
+## In scope
+
+- Reuse or complete generic HTML preview eligibility and session-state
+  migration.
+- Replace source-controlled HTML sinks and iframe execution assumptions with
+  the controlled snapshot renderer and event bridge.
+- Apply static and dynamic resource, navigation, meta-refresh, form, and SVG
+  link policies.
+- Keep the current navigation-neutralization work as defense in depth.
+- Add component and renderer tests for snapshots, events, failures, generation
+  disposal, source restoration, and Markdown preservation.
+
+## Out of scope
+
+- Toolbar placement changes beyond the renderer contract.
+- Public documentation.
+- Desktop WebView smoke and broad browser suites.
+
+## Acceptance
+
+- HTML preview displays runtime snapshots and supports script-driven DOM
+  updates without placing source scripts or inline event handlers in the native
+  browser DOM.
+- Static and dynamically-created URLs cannot cause a browser request,
+  navigation, popup, download, form submission, or access to Kandev content.
+- Runtime errors, budget failures, file identity changes, and source toggles
+  dispose the generation safely and preserve the existing source/editor state.
+
+## Verification
+
+```bash
+cd apps/web
+pnpm exec vitest run lib/html-preview/html-preview-document.test.ts lib/html-preview/preview-surface.test.ts components/task/html-preview-content.test.tsx components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/mobile/mobile-file-viewer-panel.test.tsx
+pnpm run typecheck
+pnpm run i18n:check
+pnpm run i18n:ratchet
+```
+
+## Files likely touched
+
+- `apps/web/lib/html-preview/html-preview-document.ts`
+- `apps/web/lib/html-preview/html-preview-document.test.ts`
+- `apps/web/lib/html-preview/preview-surface.ts`
+- `apps/web/lib/html-preview/preview-surface.test.ts`
+- `apps/web/components/task/html-preview-content.tsx`
+- `apps/web/components/task/html-preview-content.test.tsx`
+- `apps/web/components/task/file-editor-content.tsx`
+- `apps/web/components/task/file-tab-content.tsx`
+- `apps/web/components/task/mobile/mobile-file-viewer-panel.tsx`
+- Existing file-state and storage files from the superseded prototype.
+
+## Dependencies
+
+Task 05 supplies the runtime message contract and capability policy.
+
+## Risks
+
+- A renderer that uses `innerHTML`, `dangerouslySetInnerHTML`, or native event
+  attributes can turn a safe VM into an unsafe browser execution path.
+- CSS URL, `srcset`, SVG, or mutation paths can bypass a policy that checks
+  only initial HTML attributes.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- All requirement criteria in the revised system design.
+- Existing Markdown renderer, generic preview state, and mobile viewer patterns.
+- The current local navigation-neutralization change.
+
+## Results
+
+Replaced the iframe `srcDoc` path with the worker-backed runtime client and a
+scriptless Shadow DOM snapshot renderer. The component keeps the current
+buffer, generation-safe disposal, source recovery, localized runtime failures,
+and the existing generic file preview state.
+
+Verification completed:
+
+```text
+pnpm exec vitest run lib/html-preview/html-preview-document.test.ts lib/html-preview/preview-surface.test.ts components/task/html-preview-content.test.tsx components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/mobile/mobile-file-viewer-panel.test.tsx
+pnpm exec tsc --noEmit --pretty false
+pnpm run i18n:check
+pnpm run i18n:ratchet
+```
diff --git a/docs/plans/native-html-preview/task-07-responsive-preview-surfaces.md b/docs/plans/native-html-preview/task-07-responsive-preview-surfaces.md
new file mode 100644
index 0000000000..b0ddd4ff43
--- /dev/null
+++ b/docs/plans/native-html-preview/task-07-responsive-preview-surfaces.md
@@ -0,0 +1,109 @@
+---
+id: "07-responsive-preview-surfaces"
+title: "Wire responsive preview surfaces"
+status: cancelled
+wave: 3
+depends_on:
+  - "06-preview-state-and-renderer"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 07: Wire responsive preview surfaces
+
+## Summary
+
+Connect the runtime-backed renderer to every existing HTML preview entry point.
+Reuse the Markdown toolbar and focused mobile viewer composition without
+creating a second execution path or changing unrelated file actions.
+
+## In scope
+
+- Monaco, CodeMirror, Dockview, center-panel, and mobile file-viewer preview
+  entry points.
+- Localized preview, source, runtime-failure, and unsupported-capability copy
+  in all shipped locales.
+- Mobile touch sizing, full-height layout, identity reset, and overflow
+  containment.
+- Component coverage for source restoration, dirty buffers, Markdown parity,
+  and runtime failure recovery.
+
+## Out of scope
+
+- Runtime engine or virtual-DOM implementation.
+- Public documentation.
+- Review-diff preview and Browser-panel behavior.
+
+## Acceptance
+
+- Every eligible text-file surface uses the same runtime-backed HTML preview,
+  and returning to source preserves buffer and dirty state.
+- Mobile exposes a touch-sized action and the scriptless preview surface does
+  not add page-level horizontal overflow.
+- Markdown, binary, unsupported-file, download, delete, comment, and external
+  editor behavior remains unchanged.
+
+## Verification
+
+```bash
+cd apps/web
+pnpm exec vitest run components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/mobile/mobile-file-viewer-panel.test.tsx components/editors/monaco/monaco-editor-toolbar.test.tsx components/editors/codemirror/codemirror-code-editor.preview.test.tsx
+pnpm run typecheck
+pnpm run i18n:check
+pnpm run i18n:ratchet
+```
+
+## Files likely touched
+
+- `apps/web/components/task/file-editor-content.tsx`
+- `apps/web/components/task/file-editor-panel.tsx`
+- `apps/web/components/task/file-tab-content.tsx`
+- `apps/web/components/task/task-center-panel.tsx`
+- `apps/web/components/task/mobile/mobile-file-viewer-panel.tsx`
+- Monaco and CodeMirror toolbar files and tests.
+- Five shipped locale files and generated pseudo-locale data.
+
+## Dependencies
+
+Task 06 supplies the runtime-backed renderer and stable failure contract.
+
+## Risks
+
+- Multiple desktop file-editor paths can accidentally create independent worker
+  generations or omit disposal on unmount.
+- Mobile and Dockview may mount duplicate preview controls, so selectors and
+  lifecycle ownership must remain scoped to the active surface.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- The responsive contract in the system design.
+- Existing Markdown preview toolbar and mobile file-viewer tests.
+- `/mobile-parity` guidance for native mobile interaction patterns.
+
+## Results
+
+Verified that Monaco, CodeMirror, Dockview, center-panel tabs, and the
+focused mobile file viewer all select the same runtime-backed HTML component.
+Touch controls retain 44-pixel targets, preview state resets on file identity
+changes, and the existing Markdown and file action paths remain separate.
+
+Verification completed:
+
+```text
+pnpm exec vitest run components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/mobile/mobile-file-viewer-panel.test.tsx components/editors/monaco/monaco-editor-toolbar.test.tsx components/editors/codemirror/codemirror-code-editor.preview.test.tsx
+pnpm exec tsc --noEmit --pretty false
+pnpm run i18n:check
+pnpm run i18n:ratchet
+```
diff --git a/docs/plans/native-html-preview/task-08-script-capable-preview-guidance.md b/docs/plans/native-html-preview/task-08-script-capable-preview-guidance.md
new file mode 100644
index 0000000000..b263b6e052
--- /dev/null
+++ b/docs/plans/native-html-preview/task-08-script-capable-preview-guidance.md
@@ -0,0 +1,96 @@
+---
+id: "08-script-capable-preview-guidance"
+title: "Publish script-capable preview guidance"
+status: cancelled
+wave: 4
+depends_on:
+  - "07-responsive-preview-surfaces"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 08: Publish script-capable preview guidance
+
+## Summary
+
+Update the Files and editor guide after the runtime-backed behavior is shipped.
+Explain how inline scripts work inside the restricted preview runtime and make
+the resource, browser-API, navigation, and multi-file limitations explicit.
+
+## In scope
+
+- Replace the static-only preview description in
+  `docs/public/developer-tools.md`.
+- Explain current-buffer rendering, unsaved edits, `Show code`, embedded
+  resources, isolated inline scripts, and blocked remote/workspace resources.
+- Explain when a development server and Browser panel are required.
+- Run public-doc validators and the docs diff check.
+
+## Out of scope
+
+- Architecture rationale, VM package details, or internal message shapes.
+- Public claims before the browser and WebView evidence is complete.
+- New navigation entries or a separate public page.
+
+## Acceptance
+
+- A user can preview an eligible file and understands that inline scripts run
+  in a restricted runtime without Kandev credentials or network access.
+- The guide does not describe the preview as a general site server or promise
+  unsupported browser APIs and external resources.
+
+## Verification
+
+```bash
+node --test scripts/validate-public-docs.test.mjs
+node scripts/validate-public-docs.mjs
+git diff --check -- docs/public
+```
+
+## Files likely touched
+
+- `docs/public/developer-tools.md`
+
+## Dependencies
+
+Task 07 supplies final user-facing labels and runtime behavior.
+
+## Risks
+
+Publishing a security claim before browser and WebView tests pass can create a
+false guarantee for users.
+
+## Parallelism
+
+`parallel-safe` with Task 09 after Task 07.
+
+## Inputs
+
+- The final requirements and public behavior from the system design.
+- The existing Files and editor integrations guide.
+- `/docs-maintainer` validation rules.
+
+## Results
+
+Updated `docs/public/developer-tools.md` with the restricted runtime contract,
+current-buffer and unsaved-edit behavior, embedded-resource policy, blocked
+browser capabilities, navigation behavior, source recovery, and Browser-panel
+guidance for multi-file applications.
+
+Verification completed:
+
+```text
+node --test scripts/validate-public-docs.test.mjs: 61 passed
+node scripts/validate-public-docs.mjs: Validated 43 published docs pages.
+git diff --check -- docs/public: passed
+```
diff --git a/docs/plans/native-html-preview/task-09-script-capable-preview-e2e.md b/docs/plans/native-html-preview/task-09-script-capable-preview-e2e.md
new file mode 100644
index 0000000000..acb29c007f
--- /dev/null
+++ b/docs/plans/native-html-preview/task-09-script-capable-preview-e2e.md
@@ -0,0 +1,112 @@
+---
+id: "09-script-capable-preview-e2e"
+title: "Prove script execution and isolation in browsers"
+status: cancelled
+wave: 4
+depends_on:
+  - "07-responsive-preview-surfaces"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 09: Prove script execution and isolation in browsers
+
+## Summary
+
+Replace the static-only browser assertions with causal evidence that inline
+JavaScript executes in the preview runtime while network, credential, and
+navigation capabilities remain unavailable. Repeat the user flow on desktop
+and mobile, then add the required desktop WebView smoke evidence.
+
+## In scope
+
+- Chromium desktop coverage for inline script output, event-driven mutation,
+  runtime failure, source recovery, and same-session restoration.
+- Negative request and navigation assertions for fetch, XHR, WebSocket,
+  dynamic links, meta refresh, forms, location, history, downloads, and
+  window opening.
+- Mobile Chrome coverage for runtime output, touch target, source recovery, and
+  containment.
+- Desktop WebView smoke coverage for the same request and navigation policy.
+
+## Out of scope
+
+- Broad E2E suite execution.
+- Other browser engines and executor types.
+- Review-diff, multi-file, remote-resource, or Browser-panel tests.
+
+## Acceptance
+
+- Desktop Chromium proves a script changes visible output and a user event
+  reaches the virtual runtime.
+- Causal request and frame-state assertions prove blocked network and
+  navigation attempts do not leave the preview or contact an external origin.
+- Mobile Chrome and desktop WebView prove the same safe entry, recovery, and
+  responsive behavior.
+
+## Verification
+
+```bash
+make build-web
+cd apps/web
+pnpm e2e:raw --project=chromium tests/chat/html-preview.spec.ts
+pnpm e2e:raw --project=mobile-chrome tests/task/mobile-html-preview.spec.ts
+cd ../desktop
+pnpm e2e
+```
+
+## Files likely touched
+
+- `apps/web/e2e/tests/chat/html-preview.spec.ts`
+- `apps/web/e2e/tests/task/mobile-html-preview.spec.ts`
+- `apps/web/e2e/pages/session-page.ts`
+- `apps/desktop/e2e/desktop-launch-smoke.mjs` or a focused WebView test.
+
+## Dependencies
+
+Task 07 supplies the runtime-backed responsive surface and stable selectors.
+
+## Risks
+
+- A test that only observes the final DOM can miss a request made before the
+  runtime snapshot arrives. Request listeners and frame-state assertions must
+  be causal and installed before preview activation.
+- Chromium and WebView may differ in worker, blob, and resource behavior.
+
+## Parallelism
+
+`parallel-safe` with Task 08 after Task 07.
+
+## Inputs
+
+- The revised acceptance criteria `.3` through `.9`.
+- The browser verification strategy and security invariants in the system
+  design.
+- Existing desktop and mobile HTML preview fixtures from the superseded work.
+
+## Results
+
+Replaced the static iframe assertions with runtime-backed Chromium and mobile
+coverage. The tests prove inline script output, event-driven mutation, inert
+links and forms, blocked dynamic resources and navigation, source recovery,
+same-session saved-source restoration, touch sizing, and page containment.
+
+Verification completed:
+
+```text
+pnpm e2e:raw --project=chromium tests/chat/html-preview.spec.ts: 1 passed
+pnpm e2e:raw --project=mobile-chrome tests/task/mobile-html-preview.spec.ts: 1 passed
+pnpm e2e (desktop): build and WebView launch smoke passed
+```
diff --git a/docs/plans/native-html-preview/task-10-agentctl-workspace-preview-server.md b/docs/plans/native-html-preview/task-10-agentctl-workspace-preview-server.md
new file mode 100644
index 0000000000..a06a223887
--- /dev/null
+++ b/docs/plans/native-html-preview/task-10-agentctl-workspace-preview-server.md
@@ -0,0 +1,109 @@
+---
+id: "10-agentctl-workspace-preview-server"
+title: "Build the agentctl workspace preview server"
+status: done
+wave: 1
+depends_on: []
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.11
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 10: Build the agentctl workspace preview server
+
+## Summary
+
+Add the ephemeral static server and bounded current-buffer overlay to agentctl.
+It must serve browser-ready HTML and relative workspace assets without exposing
+paths outside the selected repository root.
+
+## In scope
+
+- Lazy per-root loopback listener creation, reuse, shutdown, and structured
+  lifecycle logging.
+- A concurrency-safe 32-entry overlay with 5 MiB per-document bounds,
+  replacement versions, and least-recently-published eviction.
+- Exact overlay serving, disk fallback, MIME types, no-store headers, normal
+  404 responses, and method handling.
+- Repository-aware canonical paths and traversal, encoded-traversal, and
+  symlink-escape rejection.
+- Agentctl publish route, request/response types, and unit tests.
+
+## Out of scope
+
+- Backend task-session routing.
+- Frontend Browser-panel behavior.
+- Browser-script isolation or content rewriting.
+
+## Acceptance
+
+- Publishing an unsaved entry document returns a stable live port for its
+  workspace or repository root, a canonical path, and an increasing version.
+  A request for that path returns the overlay.
+- Relative and root-relative requests serve the correct workspace files with
+  browser-appropriate content types.
+- No request path or symlink can read outside the selected root.
+- Bounds, eviction, concurrent publish/read, and shutdown behavior are tested.
+
+## Verification
+
+```bash
+cd apps/backend
+go test ./internal/agentctl/server/api
+go test -race ./internal/agentctl/server/api
+```
+
+## Files likely touched
+
+- `apps/backend/internal/agentctl/server/api/server.go`
+- `apps/backend/internal/agentctl/server/api/workspace_preview.go`
+- `apps/backend/internal/agentctl/server/api/workspace_preview_test.go`
+- Agentctl instance lifecycle files that own API server shutdown.
+
+## Dependencies
+
+None.
+
+## Risks
+
+- URL and filesystem canonicalization can disagree after escaping or symlink
+  resolution.
+- A listener or overlay can outlive the agentctl instance if teardown ownership
+  is incomplete.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- Acceptance criteria `.4`, `.5`, and `.11`.
+- Workspace preview manager, overlay bounds, trust, and lifecycle sections in
+  the system design.
+
+## Results
+
+Implemented the agentctl-owned workspace preview server.
+
+- Added one loopback static server per canonical workspace or repository root.
+- Added bounded current-buffer overlays with replacement versions and oldest
+  eviction across roots.
+- Added MIME handling, no-store responses, GET and HEAD support, containment
+  checks, traversal rejection, symlink escape protection, and teardown cleanup.
+- Added focused tests for publishing, disk assets, replacement, bounds,
+  eviction, traversal, symlinks, shutdown, concurrent publish/read,
+  per-repository roots and ports, and HEAD/405 method handling.
+
+Verification:
+
+- `go test ./internal/agentctl/server/api` passed.
+- `go test -race ./internal/agentctl/server/api` passed.
+- The API package passed 462 tests under the race detector, including the
+  deterministic concurrent publish/read and per-root method coverage.
+- `rtk make -C apps/backend test` passed with task-host internal config
+  overrides cleared.
diff --git a/docs/plans/native-html-preview/task-11-session-preview-publish-contract.md b/docs/plans/native-html-preview/task-11-session-preview-publish-contract.md
new file mode 100644
index 0000000000..fd2a669daf
--- /dev/null
+++ b/docs/plans/native-html-preview/task-11-session-preview-publish-contract.md
@@ -0,0 +1,108 @@
+---
+id: "11-session-preview-publish-contract"
+title: "Add the session preview publish contract"
+status: done
+wave: 2
+depends_on:
+  - "10-agentctl-workspace-preview-server"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 11: Add the session preview publish contract
+
+## Summary
+
+Expose the agentctl publish operation through an authorized task-session API.
+Add the frontend client that obtains a session port-proxy URL.
+
+## In scope
+
+- Agentctl client request and response methods.
+- Session-scoped backend route, authorization, readiness checks, 5 MiB body
+  bound, validation, forwarding, and error mapping.
+- Frontend domain API types, request helper, and proxy URL construction.
+- Backend and frontend tests for success, authorization, limits, invalid agentctl
+  responses, unavailable sessions, and retryable failures.
+
+## Out of scope
+
+- Toolbar, Browser panel, and mobile rendering changes.
+- A new gateway route or direct browser-to-agentctl access.
+
+## Acceptance
+
+- An authorized live session can publish `{repo, path, content}` and receive a
+  validated `{port, path, version}` result.
+- Unauthorized, stopped, malformed, and oversized requests fail without storing
+  source content in the backend.
+- The frontend produces the same session proxy URL shape as existing
+  development-server Browser panels.
+
+## Verification
+
+```bash
+cd apps/backend
+go test ./internal/agent/runtime/agentctl ./internal/task/handlers
+cd ../web
+pnpm exec vitest run lib/api/domains/process-api.test.ts
+pnpm run typecheck
+```
+
+## Files likely touched
+
+- `apps/backend/internal/agent/runtime/agentctl/client.go`
+- `apps/backend/internal/task/handlers/process_handlers.go`
+- Focused backend handler and client tests.
+- `apps/web/lib/api/domains/process-api.ts`
+- `apps/web/lib/api/domains/process-api.test.ts`
+
+## Dependencies
+
+Task 10 defines the agentctl route and response contract.
+
+## Risks
+
+- Generic error translation can hide whether retry requires restarting agentctl
+  or only republishing.
+- Duplicating existing proxy URL logic can produce inconsistent remote-executor
+  behavior.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- Acceptance criteria `.2`, `.5`, `.6`, and `.10`.
+- Browser-to-backend and backend-to-agentctl contracts in the system design.
+
+## Results
+
+Implemented the authorized session publish path and stable upstream status
+mapping.
+
+- Added the agentctl client for current HTML buffers. Non-success agentctl
+  responses now use a typed status error without retaining response content.
+- Added session authorization, readiness, body bounds, validation, and stable
+  400/413/503 error mapping in the task-session handler. Unexpected upstream
+  failures and malformed success responses remain 502.
+- Added the frontend process API and versioned session port-proxy URL builder.
+- Removed the unused lifecycle forwarding layer so the handler has one client
+  acquisition path.
+- Added backend and frontend success, authorization, malformed/oversized,
+  unavailable, invalid-response, status-propagation, limit, and failure tests.
+
+Verification:
+
+- `go test ./internal/agent/runtime/agentctl ./internal/agent/runtime/lifecycle ./internal/task/handlers` passed.
+- Focused agentctl and task-handler race coverage passed: 15 tests.
+- `pnpm exec vitest run lib/api/domains/process-api.test.ts` passed.
+- `pnpm run typecheck` passed.
diff --git a/docs/plans/native-html-preview/task-12-browser-panel-preview-ui.md b/docs/plans/native-html-preview/task-12-browser-panel-preview-ui.md
new file mode 100644
index 0000000000..196222b8c4
--- /dev/null
+++ b/docs/plans/native-html-preview/task-12-browser-panel-preview-ui.md
@@ -0,0 +1,128 @@
+---
+id: "12-browser-panel-preview-ui"
+title: "Replace the virtual runtime with Browser-panel UI"
+status: done
+wave: 3
+depends_on:
+  - "11-session-preview-publish-contract"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 12: Replace the virtual runtime with Browser-panel UI
+
+## Summary
+
+Wire `Preview HTML` to publish the current buffer. Desktop opens the resulting
+URL in the existing Browser panel. Mobile opens it in the focused iframe. Remove
+the QuickJS and virtual-DOM path after the server flow works.
+
+## In scope
+
+- Desktop toolbar activation, progress/error state, trusted-code affordance,
+  Browser-panel focus/reuse, cache-busted refresh, and dirty-buffer preservation.
+- Mobile publication, full-height iframe, 44-pixel target, `Show code`, retry,
+  and repository-plus-path identity reset.
+- Shared localized copy in English, Portuguese, Simplified Chinese, and
+  Traditional Chinese catalogs.
+- Unit/component tests across Monaco, CodeMirror, Dockview, center-panel, and
+  mobile paths as applicable.
+- Removal of the QuickJS worker, virtual DOM, renderer, navigation normalizer,
+  obsolete state, preview-only packages, and obsolete tests.
+- Regeneration of the lock and license artifacts.
+- No behavior changes to Markdown or explicit development-server controls.
+
+## Out of scope
+
+- Public documentation and browser E2E.
+- New Browser-panel inspector or console features.
+
+## Acceptance
+
+- Desktop publishes the unsaved buffer, keeps source open and dirty, and reuses
+  the existing Browser panel on repeated activation.
+- Mobile renders the same proxy URL in a contained focused viewer and reliably
+  returns to unchanged source.
+- Trust and recovery copy is localized and available outside preview content.
+- QuickJS and the preview-only direct parse5 dependency no longer ship. The
+  Markdown renderer may retain parse5 as a transitive license entry.
+
+## Verification
+
+```bash
+cd apps/web
+pnpm exec vitest run components/task/dev-server-preview-button.test.tsx components/task/html-preview-content.test.tsx
+pnpm run typecheck
+pnpm run lint
+pnpm run i18n:check
+pnpm run i18n:ratchet
+cd ..
+pnpm --filter @kandev/web licenses:gen
+```
+
+## Files likely touched
+
+- `apps/web/components/task/html-preview-content.tsx`
+- HTML preview entry points in Monaco, CodeMirror, Dockview, and mobile files.
+- `apps/web/lib/state/dockview-panel-actions.ts`
+- `apps/web/src/locales/**`
+- `apps/web/lib/html-preview/**` (removed)
+- `apps/web/package.json`
+- `apps/pnpm-lock.yaml`
+- Generated dependency/license artifacts.
+
+## Dependencies
+
+Task 11 supplies the publish API and proxy URL.
+
+## Risks
+
+- Generic Browser-panel reuse can replace unrelated content.
+- Async publish completion can target a file that changed identity while the
+  request was in flight.
+- Removing generic preview state can regress Markdown restoration.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- Acceptance criteria `.1` through `.3` and `.7` through `.10`.
+- Desktop/mobile control flow and responsive contract in the system design.
+- Existing development-server button and mobile Markdown preview as exemplars.
+
+## Results
+
+Replaced the preview-specific QuickJS and virtual-DOM path with the native
+Browser-panel and mobile focused-viewer flows.
+
+- Desktop publishes the current buffer, preserves the source tab, and reuses
+  the shared Browser panel with versioned refresh URLs.
+- Mobile publishes the current buffer into a full-height iframe with a
+  touch-sized control, trust warning, Show code, retry, and identity reset.
+- Desktop task-center and file-editor publication now invalidate requests on
+  session replacement and unmount, so stale success, error, and cleanup
+  callbacks cannot affect the replacement session.
+- Markdown preview and explicit development-server behavior remain unchanged.
+- Removed the preview-specific runtime, worker, direct QuickJS dependency, and
+  direct parse5 dependency. Markdown keeps its transitive parse5 dependency.
+- Added localized trust, loading, retry, and unavailable copy in all catalogs.
+
+Verification:
+
+- Focused Vitest suite passed: 13 files and 69 tests, including deferred
+  stale-session success/error coverage for task-center and file-editor hooks.
+- `pnpm run typecheck`, `pnpm run lint`, `pnpm run i18n:check`, and
+  `pnpm run i18n:ratchet` passed.
+- `pnpm --filter @kandev/web licenses:gen` completed successfully.
diff --git a/docs/plans/native-html-preview/task-13-browser-fidelity-docs-and-e2e.md b/docs/plans/native-html-preview/task-13-browser-fidelity-docs-and-e2e.md
new file mode 100644
index 0000000000..03f80f6d25
--- /dev/null
+++ b/docs/plans/native-html-preview/task-13-browser-fidelity-docs-and-e2e.md
@@ -0,0 +1,129 @@
+---
+id: "13-browser-fidelity-docs-and-e2e"
+title: "Document and prove browser-fidelity preview"
+status: done
+wave: 4
+depends_on:
+  - "12-browser-panel-preview-ui"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.5
+  - AC-UI-NATIVE-HTML-PREVIEW-001.6
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+  - AC-UI-NATIVE-HTML-PREVIEW-001.11
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+# Task 13: Document and prove browser-fidelity preview
+
+## Summary
+
+Update public guidance for the trusted static preview. Replace isolation E2E
+assertions with browser-fidelity, relative-asset, lifecycle, and responsive
+evidence.
+
+## In scope
+
+- Public documentation for the one-click action, current-buffer behavior,
+  relative assets, browser APIs, and trusted-code warning.
+- Public documentation for static-server limits, recovery, and the explicit
+  development-server alternative.
+- Desktop Chromium E2E for native scripts, a browser API absent from the old
+  virtual runtime, relative CSS/JavaScript/image assets, unsaved republish,
+  Browser-panel reuse, errors, and source preservation.
+- Mobile Chrome E2E for the shared proxied page, touch size, containment, retry,
+  `Show code`, and unchanged source.
+- Desktop build/WebView smoke and final targeted regression verification.
+
+## Out of scope
+
+- Claiming hostile-content isolation.
+- Broad executor-matrix E2E beyond existing port-proxy coverage.
+
+## Acceptance
+
+- Documentation accurately distinguishes trusted static preview from configured
+  application development servers.
+- Desktop and mobile tests causally prove native browser execution, relative
+  asset loading, current-buffer refresh, responsive behavior, and recovery.
+- Specification, documentation, dependency, backend, frontend, and desktop
+  validation commands pass.
+
+## Verification
+
+```bash
+python3 scripts/lint-spec-files.py --all
+node --test scripts/validate-public-docs.test.mjs
+node scripts/validate-public-docs.mjs
+make -C apps/backend test
+cd apps/web
+pnpm e2e:raw --project=chromium tests/chat/html-preview.spec.ts
+pnpm e2e:raw --project=mobile-chrome tests/task/mobile-html-preview.spec.ts
+cd ../desktop
+pnpm e2e
+```
+
+## Files likely touched
+
+- `docs/public/developer-tools.md`
+- `apps/web/e2e/tests/chat/html-preview.spec.ts`
+- `apps/web/e2e/tests/task/mobile-html-preview.spec.ts`
+- Focused E2E fixtures and page objects.
+
+## Dependencies
+
+Task 12 supplies the complete user flow and removes the old runtime.
+
+## Risks
+
+- E2E fixtures can accidentally prove saved disk content instead of the current
+  unsaved overlay.
+- Relative asset assertions can pass through cached data unless request paths and
+  version changes are observed.
+- Documentation can overstate safety unless the trusted-code language stays
+  explicit.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- All acceptance criteria and the final verification strategy.
+- The accepted trusted Browser HTML preview ADR.
+
+## Results
+
+Updated the public developer-tools guidance to document current-buffer static
+preview, relative assets, native browser behavior, trusted workspace code,
+bounded server behavior, recovery, and the explicit development-server
+alternative. Replaced the old isolation-oriented E2E assertions with native
+browser fidelity coverage on desktop and mobile.
+
+Verification:
+
+- `python3 scripts/lint-spec-files.py --all` passed.
+- `node --test scripts/validate-public-docs.test.mjs` passed: 61 tests.
+- `node scripts/validate-public-docs.mjs` validated 43 published pages.
+- `make -C apps/backend test` passed with task-host internal config overrides
+  cleared.
+- Desktop Chromium preview E2E passed: 2 tests.
+- Mobile Chrome preview E2E passed: 2 tests.
+- Desktop shell E2E passed.
+- Fresh desktop and mobile PR screenshots were captured and compressed.
+- Reproduced and fixed the frontend CI failure caused by a synchronous
+  assertion racing Radix repository-menu dismissal, and removed unhandled
+  Happy DOM loopback requests caused by Playwright runtime imports in Vitest
+  helper tests.
+- Full frontend Vitest verification passed after the fix: 1,871 test files,
+  15,869 passed, and 4 skipped, with no unhandled network errors. Direct web
+  typecheck, lint, i18n, and formatting checks passed as well.
diff --git a/docs/plans/native-html-preview/task-14-in-editor-html-preview.md b/docs/plans/native-html-preview/task-14-in-editor-html-preview.md
new file mode 100644
index 0000000000..7ffd1a72dc
--- /dev/null
+++ b/docs/plans/native-html-preview/task-14-in-editor-html-preview.md
@@ -0,0 +1,110 @@
+---
+id: "14-in-editor-html-preview"
+title: "Move desktop HTML preview into the file editor"
+status: done
+wave: 5
+depends_on:
+  - "13-browser-fidelity-docs-and-e2e"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.9
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+
+# Task 14: Move desktop HTML preview into the file editor
+
+## Summary
+
+Replace automatic Browser-panel opening with the same focused iframe used by
+the mobile file viewer. Preserve the file tab, unsaved buffer, dirty state,
+source recovery, and explicit access to the Browser panel.
+
+## In scope
+
+- Shared desktop publication state scoped to session, repository, and path.
+- In-editor loading, iframe, failure, retry, refresh, and `Show code` states.
+- An explicit secondary action that opens the published URL in a Browser panel.
+- Monaco, CodeMirror, Dockview file-panel, and task-center file-tab wiring.
+- Removal of obsolete desktop publish hooks and shared global busy state.
+- Focused component and controller tests, including stale completion guards.
+
+## Out of scope
+
+- Agentctl server or task-session API changes.
+- Markdown preview behavior.
+- Automatic shutdown of the session-scoped shared preview server.
+
+## Acceptance
+
+- Activating `Preview HTML` replaces the active editor body without creating a
+  Browser panel and publishes the current unsaved buffer.
+- `Show code` restores the same file buffer and dirty state; refresh republishes
+  the latest buffer and retry recovers from publication failure.
+- Preview state resets on file or session identity change, and only the explicit
+  secondary action opens the Browser panel.
+
+## Verification
+
+```bash
+cd apps/web
+pnpm exec vitest run components/task/file-editor-content.test.tsx components/task/file-tab-content.test.tsx components/task/html-preview-content.test.tsx hooks/use-html-preview-publisher.test.ts components/editors/monaco/monaco-editor-toolbar.test.tsx components/editors/codemirror/codemirror-code-editor.preview.test.tsx
+pnpm run typecheck
+pnpm run lint
+pnpm run i18n:check
+pnpm run i18n:ratchet
+```
+
+## Files likely touched
+
+- `apps/web/components/task/file-editor-content.tsx`
+- `apps/web/components/task/html-preview-content.tsx`
+- `apps/web/components/task/file-editor-panel.tsx`
+- `apps/web/components/task/file-tab-content.tsx`
+- `apps/web/components/task/task-center-panel.tsx`
+- `apps/web/hooks/use-html-preview-publisher.ts`
+- Obsolete desktop HTML-preview hooks and tests.
+- `apps/web/src/locales/**`
+
+## Dependencies
+
+Task 13 supplies the trusted static server, publish API, iframe surface, and
+browser-fidelity coverage.
+
+## Risks
+
+- A stale response can reveal preview for a previous file or session.
+- Replacing the editor body can accidentally discard unsaved parent state.
+- Shared toolbar changes can regress Markdown preview controls.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- Acceptance criteria `.1`, `.2`, `.3`, and `.7` through `.10`.
+- Desktop control flow and responsive contract in the system design.
+- Existing Markdown toggle and mobile HTML preview as shipped exemplars.
+
+## Results
+
+- Desktop `Preview HTML` now replaces the active editor body with the shared
+  native-browser iframe while preserving the current unsaved buffer and dirty
+  state. `Show code` restores the same editor state, and refresh republishes the
+  latest buffer.
+- Preview identity is scoped to session, repository, and path. File or session
+  changes immediately hide stale previews, reset the request generation, and
+  prevent late responses from opening or mutating the new file.
+- Browser-panel opening is now an explicit secondary action. The obsolete
+  automatic-open hooks and global publish-busy plumbing were removed.
+- Focused Vitest coverage passed: 6 files and 22 tests. Web typecheck, lint,
+  i18n checks, and the changed-line i18n ratchet also passed.
diff --git a/docs/plans/native-html-preview/task-15-in-editor-preview-docs-e2e.md b/docs/plans/native-html-preview/task-15-in-editor-preview-docs-e2e.md
new file mode 100644
index 0000000000..429c482e2c
--- /dev/null
+++ b/docs/plans/native-html-preview/task-15-in-editor-preview-docs-e2e.md
@@ -0,0 +1,107 @@
+---
+id: "15-in-editor-preview-docs-e2e"
+title: "Revise preview guidance and browser E2E"
+status: done
+wave: 6
+depends_on:
+  - "14-in-editor-html-preview"
+plan: "plan.md"
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+acceptance_criteria:
+  - AC-UI-NATIVE-HTML-PREVIEW-001.1
+  - AC-UI-NATIVE-HTML-PREVIEW-001.2
+  - AC-UI-NATIVE-HTML-PREVIEW-001.3
+  - AC-UI-NATIVE-HTML-PREVIEW-001.4
+  - AC-UI-NATIVE-HTML-PREVIEW-001.7
+  - AC-UI-NATIVE-HTML-PREVIEW-001.8
+  - AC-UI-NATIVE-HTML-PREVIEW-001.10
+system_design:
+  - ../../specs/ui/system-design/native-html-preview.md
+---
+
+# Task 15: Revise preview guidance and browser E2E
+
+## Summary
+
+Update public guidance and browser tests so they describe and prove the
+in-editor source/preview workflow while retaining native browser fidelity and
+the focused mobile composition.
+
+## In scope
+
+- Public documentation for in-editor preview, source recovery, refresh, and the
+  optional Browser-panel action.
+- Desktop Chromium E2E proving no automatic Browser panel, iframe replacement,
+  unsaved republish, native scripts and assets, `Show code`, and dirty state.
+- Mobile Chrome regression coverage for the shared focused iframe behavior.
+- Final specification, documentation, frontend, E2E, and desktop verification.
+
+## Out of scope
+
+- Changes to the trusted-code boundary or server lifecycle.
+- New executor-matrix E2E beyond existing port-proxy coverage.
+
+## Acceptance
+
+- Documentation describes the in-editor workflow without claiming automatic
+  Browser-panel behavior.
+- Desktop and mobile tests prove the same current-buffer browser value with
+  viewport-appropriate controls and source recovery.
+- Task-defined validation passes without retries or flakes.
+
+## Verification
+
+```bash
+python3 scripts/lint-spec-files.py --all
+node --test scripts/validate-public-docs.test.mjs
+node scripts/validate-public-docs.mjs
+cd apps/web
+pnpm e2e:run tests/chat/html-preview.spec.ts
+pnpm e2e:run --project mobile-chrome tests/task/mobile-html-preview.spec.ts
+cd ../desktop
+pnpm e2e
+```
+
+## Files likely touched
+
+- `docs/public/developer-tools.md`
+- `apps/web/e2e/tests/chat/html-preview.spec.ts`
+- `apps/web/e2e/tests/task/mobile-html-preview.spec.ts`
+- Focused E2E page objects or helpers.
+
+## Dependencies
+
+Task 14 supplies the revised in-editor implementation.
+
+## Risks
+
+- An E2E test can accidentally assert the old Browser-panel iframe.
+- Production-build E2E can exercise stale assets unless the managed runner
+  rebuilds after frontend changes.
+
+## Parallelism
+
+`sequential`
+
+## Inputs
+
+- All applicable acceptance criteria and the revised responsive contract.
+- The amended trusted native-browser HTML preview ADR.
+
+## Results
+
+- Public guidance now documents the in-editor desktop and focused mobile
+  workflow, explicit Browser-panel access, and the session-scoped server
+  lifecycle. Closing any preview view unmounts that view; agentctl teardown
+  stops the bounded shared server.
+- Desktop Chromium E2E passed 2 of 2 tests on the first attempt. It proves no
+  automatic Browser panel, native scripts and browser APIs, relative assets,
+  current-buffer refresh, explicit Browser-panel opening, source recovery, and
+  retry after publication failure.
+- Mobile Chrome E2E passed 2 of 2 tests on the first attempt, preserving the
+  focused-viewer interaction and source recovery at phone width.
+- Specification validation passed all 30 tests. Public-documentation validation
+  passed 61 tests across 46 published pages. Desktop shell E2E passed.
+- The full frontend suite passed 1,872 test files and 15,902 tests, with four
+  intentional skips and no failures.
diff --git a/docs/public/developer-tools.md b/docs/public/developer-tools.md
index 574177d388..0e9ed8a4da 100644
--- a/docs/public/developer-tools.md
+++ b/docs/public/developer-tools.md
@@ -138,10 +138,10 @@ at your cursor; Kandev's own composer still owns the draft and the send.
 
 The plugin offers three engines, chosen per user under **Settings > Plugins > Voice Mode**:
 
-| Engine | Where recognition happens | Requirements and data flow |
-| --- | --- | --- |
-| **Browser speech** | The browser's own recognizer | No audio reaches your Kandev server. Chromium only, and the browser vendor's own handling applies. |
-| **In-browser Whisper** | On the device | Downloads and caches an ONNX model from Hugging Face (about 40 MB, 75 MB or 240 MB), then runs locally in a worker. No audio leaves the device. |
+| Engine                   | Where recognition happens              | Requirements and data flow                                                                                                                      |
+| ------------------------ | -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Browser speech**       | The browser's own recognizer           | No audio reaches your Kandev server. Chromium only, and the browser vendor's own handling applies.                                              |
+| **In-browser Whisper**   | On the device                          | Downloads and caches an ONNX model from Hugging Face (about 40 MB, 75 MB or 240 MB), then runs locally in a worker. No audio leaves the device. |
 | **Server transcription** | Your Kandev server, relaying to OpenAI | Requires an operator to save an OpenAI key in the plugin's settings. The key stays on the server; the request requires a signed-in Kandev user. |
 
 `Automatic` picks the first engine the browser can run, in that order. Engine choice is capability
@@ -169,6 +169,16 @@ For an idle, non-archived repository-backed task, **Files → Workspace actions
 
 The task **Files** panel browses, searches, opens, and edits task-worktree files. Kandev rejects file paths that escape the resolved worktree. A session with one worktree opens that worktree directly in a host editor. When a session has several worktrees, the editor button asks which repository or worktree to open, and each configured editor in the adjacent menu expands to the same repository-and-branch picker. Check that selection before launching an editor from a multi-repository task. Older API clients that omit `worktree_id` retain the first-worktree fallback.
 
+### Preview an HTML file
+
+Open an `.html` or `.htm` file in **Files**, then select **Preview HTML**. Kandev publishes the current editor buffer to an ephemeral static server, so the preview includes unsaved changes while the source file stays dirty and unchanged on disk. On desktop, the preview replaces the editor body. On mobile, it replaces the source in the focused full-height viewer. Select **Show code** to return to the same source buffer. Select **Refresh HTML preview** to publish the latest buffer again, or use the Browser button to open the published page in a separate **Browser** panel.
+
+The preview uses the native browser engine. HTML, CSS, JavaScript, inline event handlers, browser APIs, forms, popups, and normal browser navigation behave as they do in a regular page. A visible warning identifies the preview as trusted workspace code. Preview only HTML you trust because this feature does not claim to isolate hostile content from the browser or task environment.
+
+Relative and root-relative URLs resolve from the selected task repository or workspace root. Static files use their normal browser content types, and the current entry document is held in memory. The static server does not persist the overlay, run a build, provide HMR, or proxy an application backend. It bounds one entry document to 5 MiB and keeps at most 32 recently published overlays per agentctl instance.
+
+Closing the preview, file tab, focused viewer, or optional Browser panel removes that view but does not stop the shared static server. One bounded server is reused for the agentctl session and stops when that task runtime is torn down. If the page needs a build pipeline, HMR, backend routes, or project services, start a development server and open it in the **Browser** panel instead. If the task session stops, publish the file again or select **Retry** after the session becomes available. Preview URLs and in-editor preview state are not restored as durable file state.
+
 Open the context menu on any file or folder in the Files tree: right-click on desktop or long-press on touch to see **Open in \<editor\>**, which launches your default editor at that path instead of at the worktree root. When more than one editor is configured, **Open in other editor** lists the rest. When the tree is rooted above the worktrees (a multi-worktree task or any task that has had sources attached), Kandev resolves the clicked path back to its own worktree, so no picker is needed. The action is hidden for entries that belong to no worktree, such as an attached plain folder, because the editor launch is resolved against a worktree. It is also hidden while several files are selected, because it applies to a single path.
 
 **VS Code (Embedded)** runs code-server inside the active task environment and displays it in a workbench panel. Opening it starts code-server independently of the agent process. It launches with `--auth none` and binds `0.0.0.0` on a random port inside that runtime; network/firewall isolation is therefore important, especially for Local, Kubernetes, and SSH environments. If the binary is absent, agentctl attempts to download it into `~/.kandev/tools/code-server`; first use needs a supported execution platform and access to the [code-server release](https://github.com/coder/code-server/releases/tag/v4.130.0). Native Windows Local and Worktree sessions do not support this integration. Linux-backed Local Docker, Kubernetes, Sprites, and supported SSH sessions can offer it even when the Kandev app runs on Windows. The task-detail topbar follows the active session's executor capability, never the visitor's browser platform; other configured editors remain available. Use the panel error and task-environment logs when installation, startup, or proxying fails.
diff --git a/docs/specs/ui/README.md b/docs/specs/ui/README.md
index 483c46a715..60512a63f7 100644
--- a/docs/specs/ui/README.md
+++ b/docs/specs/ui/README.md
@@ -54,6 +54,7 @@ UI owns responsive behavior; other systems own behavior/state.
 - [GitHub PR Review Actions](requirements/github-pr-review-actions.md)
 - [GitHub Saved-Query Default Views](requirements/github-saved-query-defaults.md)
 - [Kandev MCP Tool Results](requirements/kandev-mcp-tool-results.md)
+- [Native HTML File Preview](requirements/native-html-preview.md)
 - [Auto-hide empty workflow steps](requirements/kanban-auto-hide-empty-columns.md)
 - [Repair last-prompt transcript pinning](requirements/last-prompt-pinning-regressions.md)
 - [Repair merge commit details](requirements/merge-commit-details.md)
@@ -162,6 +163,7 @@ UI owns responsive behavior; other systems own behavior/state.
 - [File Tree Chat](system-design/file-tree-chat-context.md)
 - [MCP results](system-design/kandev-mcp-tool-results.md)
 - [Message queue row controls](system-design/message-queue-row-controls.md)
+- [Native HTML File Preview](system-design/native-html-preview.md)
 - [Mobile Task Chrome](system-design/mobile-task-chrome.md)
 - [Persistent status motion](system-design/persistent-status-motion.md)
 - [Repository Groups](system-design/sidebar-repository-grouping.md)
diff --git a/docs/specs/ui/requirements/native-html-preview.md b/docs/specs/ui/requirements/native-html-preview.md
new file mode 100644
index 0000000000..ef60851808
--- /dev/null
+++ b/docs/specs/ui/requirements/native-html-preview.md
@@ -0,0 +1,103 @@
+---
+status: active
+system: ui
+created: 2026-09-04
+owners:
+  - kandev
+---
+
+# Native HTML File Preview Requirements
+
+## Overview
+
+Kandev shall open an `.html` or `.htm` file in a real browser runtime. The user
+does not need to start a development server. The preview shall use the current
+editor buffer as its entry document and shall resolve relative assets from the
+task workspace. Desktop and phone surfaces replace the active file editor body
+with the same proxied page while preserving a direct return to source.
+
+HTML preview is a trusted-workspace-code feature. Previewed scripts have native
+browser behavior and the authority already granted to Browser-panel content.
+Kandev does not claim that this feature safely executes untrusted HTML. Users
+must trust a document before they preview it.
+
+The UI system owns the reusable file-viewer interaction. Agentctl owns the
+ephemeral static server that makes current-buffer HTML and workspace files
+available to the browser. The existing session port proxy owns routing and
+session authorization across local and remote executors.
+
+## Terminology
+
+- **Entry document:** The current, possibly unsaved, editor buffer selected for
+  preview.
+- **Workspace preview server:** A loopback HTTP server inside agentctl that
+  serves the entry document from memory and relative assets from the workspace.
+- **Preview URL:** The session-scoped port-proxy URL used by the in-editor
+  preview iframe or an explicitly opened Browser panel.
+- **Trusted workspace code:** Content the user permits to run with the existing
+  Browser-panel sandbox and origin policy. It is not isolated as hostile code.
+
+## Requirements
+
+### REQ-UI-NATIVE-HTML-PREVIEW-001: Preview HTML with browser fidelity
+
+**Intent:** Let users inspect a generated or edited HTML document with normal
+browser rendering, relative assets, and browser APIs. A configured
+development-server command is not necessary.
+
+#### Acceptance criteria
+
+- **AC-UI-NATIVE-HTML-PREVIEW-001.1:** When an editable text file ends in
+  `.html` or `.htm`, each file editor shall expose an accessible `Preview HTML`
+  action. The action shall use each location that has the Markdown preview
+  action.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.2:** Activating `Preview HTML` shall publish
+  the current editor buffer without saving it. The source file shall remain
+  open and retain its content and dirty state.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.3:** On desktop, activation shall replace the
+  active file editor body with an iframe at the preview URL without opening a
+  Browser panel. The preview shall provide `Show code`, refresh the current
+  unsaved buffer on request, and offer an explicit secondary action to open the
+  same URL in a Browser panel.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.4:** The preview shall use the native browser
+  engine for markup, CSS, JavaScript, DOM events, and relative workspace assets.
+  Existing Browser-panel iframe, browser, and deployment policies shall control
+  links, forms, media, modules, and network APIs.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.5:** Relative URLs shall resolve from the
+  entry document's workspace directory. The server shall not expose paths
+  outside the selected task workspace or repository scope, including through
+  traversal or symlink escape.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.6:** The preview shall use the existing
+  session-authorized port-proxy path. This path shall support local, Docker,
+  SSH, and Kubernetes task sessions without a second public routing mechanism.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.7:** Before activation, the UI shall make the
+  trusted-code consequence clear. Preview source shall execute only in the
+  Kandev-owned preview iframe or an explicitly opened Browser panel and shall
+  never be inserted directly into the Kandev parent document.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.8:** On phone and coarse-pointer surfaces, the
+  focused file viewer shall expose the preview action. The active touch
+  dimension shall be at least 44 pixels. Preview shall occupy the full-height
+  viewer, provide `Show code`, and avoid document-level horizontal overflow.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.9:** Adding HTML preview shall not change
+  Markdown sanitization, source editing, saving, downloading, deleting,
+  commenting, external-editor actions, or explicit development-server flows.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.10:** If the task session or agentctl is not
+  available, the buffer is too large, or the server cannot start, Kandev shall
+  show localized recovery copy. The UI shall preserve source access and permit
+  retry. It shall not silently use another execution model.
+- **AC-UI-NATIVE-HTML-PREVIEW-001.11:** Preview overlays and their server shall
+  be bounded and ephemeral. They shall end with the agentctl instance and shall
+  not persist file contents to Kandev storage. A stale preview URL after an
+  executor restart shall be recoverable by activating `Preview HTML` again.
+
+## Out of scope
+
+- Safely executing hostile or untrusted HTML.
+- A dedicated untrusted-content origin, network egress filtering, or browser
+  capability emulation.
+- Framework build pipelines, hot-module replacement, package installation, or
+  replacing an application's configured development-server command.
+- Rendering HTML reconstructed from a Review diff.
+- Mapping rendered elements to source lines, inspector annotations, or console
+  forwarding beyond existing Browser-panel behavior.
+- Publishing the preview server as a production website or a durable URL.
diff --git a/docs/specs/ui/system-design/native-html-preview.md b/docs/specs/ui/system-design/native-html-preview.md
new file mode 100644
index 0000000000..8863e6e8d4
--- /dev/null
+++ b/docs/specs/ui/system-design/native-html-preview.md
@@ -0,0 +1,328 @@
+---
+status: current
+system: ui
+requirements:
+  - REQ-UI-NATIVE-HTML-PREVIEW-001
+---
+
+# Native HTML File Preview System Design
+
+## Purpose and boundaries
+
+Native HTML preview is a one-click static-server workflow built on Kandev's
+existing browser iframe policy and session port proxy. It favors browser
+fidelity over hostile-content isolation. Agentctl serves the current editor
+buffer as an in-memory entry document and serves relative assets from the
+selected task workspace. The active file viewer replaces its source body with
+an iframe that renders the page with normal HTML, CSS, and JavaScript behavior.
+
+The feature does not create a virtual browser, transform user scripts, or
+introduce a second executor-routing protocol. It also does not make a security
+claim for arbitrary workspace HTML. The user-selected trust model is recorded
+in [ADR-2026-09-05-trusted-browser-html-preview](../../../decisions/2026-09-05-trusted-browser-html-preview.md).
+
+## Requirement mapping
+
+| Requirement                      | Design sections                                                                                                                                                                                                                                                               |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `REQ-UI-NATIVE-HTML-PREVIEW-001` | [Architecture](#architecture), [Contracts](#contracts), [Control flow](#control-flow), [Trust and security](#trust-and-security), [Responsive contract](#responsive-contract), [Failure and recovery](#failure-and-recovery), [Verification strategy](#verification-strategy) |
+
+## Architecture
+
+```text
+File editor current buffer
+        |
+        | POST session-scoped preview request
+        v
+Kandev backend task handler
+        |
+        | authenticated agentctl request
+        v
+Agentctl workspace preview manager
+        |-- in-memory entry-document overlay
+        |-- workspace-rooted static files
+        `-- loopback ephemeral HTTP port
+                     |
+                     | existing session port proxy
+                     v
+          Desktop or mobile file-preview iframe
+```
+
+The existing gateway port proxy remains responsible for session authorization,
+executor reachability, capability cookies for iframe subresources, response
+rewriting, and Browser-panel compatibility. The preview feature adds no public
+listener and no direct browser-to-agentctl connection.
+
+## Components and responsibilities
+
+### Agentctl
+
+- A workspace preview manager starts one loopback HTTP server per selected root
+  when it receives the first request. The manager closes every server during
+  agentctl instance teardown. A port identifies one static root, including for
+  multi-repository tasks.
+- The manager stores entry-document overlays by canonical repository-relative
+  path. Publishing the same path replaces its previous buffer and increments a
+  version token.
+- The static handler serves an overlay for an exact entry-document match and
+  otherwise serves files from the selected workspace or repository root.
+- Existing repository path resolution remains authoritative. Request paths are
+  URL-decoded once, cleaned, joined through the workspace path helper, and
+  rejected if the resolved path or symlink target escapes the selected root.
+- Responses use standard MIME detection and `Cache-Control: no-store` so a
+  republished current buffer and edited assets are visible on refresh.
+
+### Backend
+
+- A task-session handler authorizes the requested session and validates the
+  request. It also makes sure that agentctl is ready. Then it forwards the
+  request through the existing agentctl client.
+- The agentctl client preserves non-success status codes in a typed error
+  without retaining the response body. The task-session handler maps agentctl
+  validation, size, and availability responses to 400, 413, and 503; other
+  upstream failures and malformed success responses become 502.
+- The backend does not store HTML or proxy asset bytes itself.
+- The response contains the agentctl port, scoped entry path, and version needed
+  to construct a session port-proxy URL.
+
+### Frontend
+
+- Preview eligibility remains derived from editable `.html` and `.htm` file
+  paths after binary-file classification.
+- The frontend API publishes the current editor buffer and converts the result
+  into the same port-proxy URL form used by development servers.
+- Desktop renders the URL through `HtmlPreviewContent` in place of the active
+  source editor. `Show code` restores the source body, refresh republishes the
+  latest buffer, and an explicit secondary action can call
+  `openBrowserPanel(url)` without making that panel the primary outcome.
+- Mobile renders the same URL in the focused file viewer and uses the same
+  source-recovery, refresh, trust, loading, and error semantics.
+- Markdown keeps its sanitized in-place renderer and existing preview state.
+
+## Contracts
+
+### Browser-to-backend request
+
+```http
+POST /api/v1/task-sessions/{sessionID}/html-previews
+Content-Type: application/json
+
+{
+  "repo": "optional repository identity",
+  "path": "relative/path/index.html",
+  "content": "current editor buffer"
+}
+```
+
+The request body is capped at 5 MiB. `path` must be an editable `.html` or
+`.htm` file within the task workspace. `repo` uses the same optional multi-repo
+identity accepted by existing workspace-file operations.
+
+The successful response is:
+
+```json
+{
+  "port": 43127,
+  "path": "/relative/path/index.html",
+  "version": 4
+}
+```
+
+The frontend appends the version as a cache-busting query value when opening
+the session port-proxy URL. The port is an implementation detail scoped to the
+live task session, not a durable public identifier.
+
+### Backend-to-agentctl request
+
+```http
+POST /api/v1/workspace/html-previews
+Content-Type: application/json
+```
+
+The body and response use the same fields. Agentctl repeats size, extension,
+and path validation because the backend is not its trust boundary. Existing
+agentctl authentication applies.
+
+### Overlay bounds
+
+Each document is limited to 5 MiB. An agentctl instance retains at most 32
+entry-document overlays across its root servers. Replacing an existing path
+does not consume another slot. When the limit is reached, the least recently
+published overlay is evicted. The number of loopback servers is bounded by the
+task's configured workspace and repository roots. Overlay bytes, versions, and
+access metadata live only in memory.
+
+These limits constrain accidental memory growth. They are not a hostile-code
+sandbox and do not constrain resources consumed by browser scripts.
+
+## Control flow
+
+### Desktop
+
+1. The file editor derives HTML preview eligibility from the current path.
+2. The user activates `Preview HTML` after seeing the trusted-code affordance.
+3. The frontend sends the current buffer, path, and repository identity to the
+   task-session endpoint without saving the file.
+4. The backend authorizes the session and publishes the entry document through
+   agentctl.
+5. Agentctl starts or reuses its workspace preview server and returns its port,
+   path, and new version.
+6. The frontend constructs the existing session port-proxy URL and replaces the
+   source editor body with `HtmlPreviewContent` at that URL.
+7. The iframe loads the page. Relative subresources traverse the same proxy and
+   are read from the workspace by agentctl.
+8. `Refresh` republishes the latest unsaved buffer and loads the new versioned
+   URL. `Show code` restores source, while `Open in Browser panel` explicitly
+   opens the same URL as a secondary workflow.
+
+The file tab, current buffer, and dirty state remain owned by the source editor
+flow while the iframe is visible.
+
+### Mobile
+
+1. The focused file viewer exposes the same `Preview HTML` action.
+2. Publishing follows the desktop flow.
+3. The focused viewer replaces its code body with a full-height iframe at the
+   returned proxy URL and keeps a `Show code` action outside the iframe.
+4. `Show code` or file identity change restores source without changing its
+   buffer. A preview failure keeps source recovery and retry actions available.
+
+## Relative assets and browser fidelity
+
+For an entry document at `site/pages/index.html`, `../styles/site.css` resolves
+to `site/styles/site.css` and `/images/logo.svg` resolves from the selected
+workspace or repository root. Query strings and fragments do not participate
+in filesystem path resolution.
+
+The static server does not rewrite HTML, CSS, JavaScript, or import maps.
+Standard browser behavior covers scripts, modules, DOM APIs, fetch, media,
+forms, canvas, WebGL, and available Browser-panel APIs. An application that requires a build
+step, custom fallback routing, server-side endpoints, or HMR must continue to
+use the configured development-server workflow.
+
+## Trust and security
+
+HTML preview uses the existing Browser-panel iframe policy, including scripts
+and same-origin behavior. It is intentionally a trusted-code workflow.
+
+The following remain required:
+
+1. Preview HTML is never inserted into the Kandev parent DOM.
+2. Browser access always traverses the session-authorized port proxy.
+3. Static file reads stay within the selected workspace or repository root,
+   including after symlink evaluation.
+4. Agentctl listens only on loopback and stops the preview server with the
+   instance.
+5. The UI tells the user that previewing runs workspace code with Browser-panel
+   capabilities.
+6. Logs and errors do not include the HTML buffer.
+
+These controls protect routing and host filesystem scope. They do not isolate
+the user from malicious JavaScript. In deployments where Browser-panel content
+shares an origin with Kandev, previewed code can exercise the authority that
+origin and the Browser panel expose. Operators who cannot trust workspace HTML
+must not enable or use this action until a dedicated-origin mode exists.
+
+## Lifecycle and persistence
+
+- A root's preview server starts on first publish and is reused for the
+  agentctl instance lifetime.
+- Entry overlays are in-memory only and do not save or modify workspace files.
+- Leaving preview or closing the file tab unmounts the iframe but does not stop
+  the shared server. Agentctl teardown stops the server.
+- In-editor preview state and URLs are not persisted. Activating `Preview HTML`
+  after reload or executor restart publishes the current buffer to the live
+  instance and obtains a valid URL.
+- Preview state is scoped to the active session plus repository-and-path
+  identity and resets when that identity changes.
+
+## Responsive contract
+
+- **Desktop entry and outcome:** The existing file toolbar exposes `Preview
+HTML`. The action replaces the source body inside the same file tab with an
+  iframe and keeps `Show code`, refresh, and optional Browser-panel actions in
+  Kandev-owned chrome.
+- **Phone entry and outcome:** `MobileFileViewerPanel` exposes a minimum
+  44-pixel action target. It shows a focused full-height iframe and puts `Show
+code` in Kandev-owned chrome.
+- **Nearest shipped exemplars:** Markdown preview supplies the in-place source
+  toggle and file identity behavior. The mobile HTML focused viewer supplies
+  the iframe toolbar, source recovery, and full-height composition. The
+  development-server preview keeps ownership of automatic Browser-panel use.
+- **Scroll ownership:** Browser content owns iframe scrolling. Kandev's focused
+  viewer owns its header and must not add page-level horizontal overflow.
+- **Shared behavior:** Eligibility, publication, errors, trust copy, proxy URL,
+  refresh, source recovery, and retry semantics are shared. Only toolbar
+  density and viewport composition differ.
+
+## Failure and recovery
+
+- Invalid paths, unsupported extensions, oversized buffers, and workspace-root
+  escapes return validation errors and do not start or update a preview.
+- A missing or stopped task session returns the existing session-unavailable
+  response. The UI preserves source and shows localized retry guidance.
+- An agentctl start or publish failure keeps the in-editor preview surface open
+  with localized retry and `Show code` actions. Retry republishes the latest
+  buffer.
+- A missing relative asset receives a normal HTTP 404 inside the preview so the
+  browser's native diagnostics remain meaningful.
+- A stale URL after agentctl restart is not restored as active preview state.
+  Republishing obtains the current ephemeral port and version.
+- The UI never falls back to `srcDoc`, QuickJS, a virtual DOM, or direct file
+  URLs when the server path fails.
+
+## Compatibility and migration
+
+Remove the QuickJS worker, virtual-DOM renderer, source-navigation normalizer,
+and their dependencies. Existing persisted `markdownPreview` compatibility only
+applies to Markdown. HTML in-place preview starts from source after reload and
+publishes only after the user activates it.
+
+The explicit development-server action remains unchanged. Native HTML preview
+is the zero-configuration static case, while the development-server path
+remains the correct choice for applications with build or backend behavior.
+
+## Observability
+
+Agentctl emits structured lifecycle logs for preview-server start, stop, and
+publish failures. Logs can include the canonical relative path, response status,
+and byte count, but not source content. Existing port-proxy logs and metrics
+continue to cover browser routing.
+
+## Verification strategy
+
+- Agentctl unit tests cover server start, reuse, shutdown, concurrent
+  publish/read, per-root ports, GET/HEAD/405 method handling, overlays, disk
+  assets, MIME types, no-store headers, path traversal, symlink escape, and
+  missing files.
+- Backend handler and client tests cover session authorization, agentctl
+  readiness, payload bounds, forwarding, typed 400/413/503 propagation,
+  malformed requests, unavailable sessions, malformed responses, and response
+  validation.
+- Frontend API and component tests cover unsaved-buffer publication, in-editor
+  source/preview toggling, explicit Browser-panel opening, versioned URLs,
+  trusted-code copy, errors, retry, refresh, source-state preservation, identity
+  reset, and stale publish completion guards.
+- Desktop Chromium E2E proves that an unsaved document runs native JavaScript
+  and loads relative CSS, JavaScript, and images. It also proves use of a native
+  browser API and refresh after a second publish.
+- Mobile Chrome E2E proves the same proxied content, 44-pixel action, full-height
+  containment, `Show code`, and source preservation.
+- Existing development-server and Browser-panel tests guard against regressions
+  in explicit server workflows and generic port-proxy behavior.
+
+## Open implementation risks
+
+- Every executor lifecycle path must own the agentctl preview server. This
+  ownership prevents ephemeral port leaks after stop or restart.
+- Root-relative and module subresource requests must retain the session proxy
+  capability cookie through redirects and rewritten URLs.
+- Multi-repository tasks must use the same repository identity and path helper
+  as existing workspace-file APIs.
+- Preview publication completion must remain scoped to the file and session
+  that initiated it so a stale response cannot replace another editor's body.
+
+## Related decisions
+
+- [ADR-2026-07-24-operator-owned-agent-launcher-settings](../../../decisions/2026-07-24-operator-owned-agent-launcher-settings.md)
+- [ADR-2026-09-05-trusted-browser-html-preview](../../../decisions/2026-09-05-trusted-browser-html-preview.md)