diff --git a/internal/client/client.go b/internal/client/client.go
index 4f13138..ca7232a 100644
--- a/internal/client/client.go
+++ b/internal/client/client.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"context"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"net/http"
@@ -139,6 +140,31 @@ type httpResponse struct {
 	body       []byte
 }
 
+// HTTPError is returned by RawGet/RawPost/RawPatch/RawDelete when the server
+// responds with a 4xx/5xx status. Its Error() text matches the plain
+// "HTTP <code>: <message>" format these methods have always returned; the
+// StatusCode field lets callers detect specific codes (e.g. 404) via
+// errors.As instead of parsing the message.
+type HTTPError struct {
+	StatusCode int
+	Body       []byte
+}
+
+func (e *HTTPError) Error() string {
+	return fmt.Sprintf("HTTP %d: %s", e.StatusCode, formatHTTPErrorBody(e.Body))
+}
+
+// IsNotFound reports whether err is an HTTPError with a 404 status.
+func IsNotFound(err error) bool {
+	var httpErr *HTTPError
+	return errors.As(err, &httpErr) && httpErr.StatusCode == http.StatusNotFound
+}
+
+func IsConflict(err error) bool {
+	var httpErr *HTTPError
+	return errors.As(err, &httpErr) && httpErr.StatusCode == http.StatusConflict
+}
+
 type httpErrorBody struct {
 	Error            string `json:"error"`
 	Message          string `json:"message"`
@@ -146,6 +172,32 @@ type httpErrorBody struct {
 	Detail           any    `json:"detail"`
 }
 
+// rejectMethodChangingRedirect is the Client's http.Client.CheckRedirect.
+// Go's default redirect policy silently downgrades POST/PATCH/PUT/DELETE to a
+// bodyless GET on a 301/302/303 (per RFC 7231 — the POST/Redirect/GET
+// pattern some servers use intentionally). LangSmith's API is a plain JSON
+// REST surface with no such intentional redirects, so the only time this
+// client would ever see one is a misconfigured endpoint scheme (http instead
+// of https, redirected to https by the server). Following it silently turns
+// a write into a no-op GET — sometimes still 2xx, if a same-path GET happens
+// to exist — which is far worse than a clear error. Same-method redirects
+// (a GET following an http->https upgrade, say) are harmless and still
+// followed.
+func rejectMethodChangingRedirect(req *http.Request, via []*http.Request) error {
+	if len(via) >= 10 {
+		return errors.New("stopped after 10 redirects")
+	}
+	prev := via[len(via)-1]
+	if req.Method != prev.Method {
+		return fmt.Errorf(
+			"refusing to follow redirect that would change %s %s into %s %s"+
+				" (check LANGSMITH_ENDPOINT is using https, not http)",
+			prev.Method, prev.URL, req.Method, req.URL,
+		)
+	}
+	return nil
+}
+
 // doHTTP is the shared low-level helper used by RawDo and rawRequest.
 func (c *Client) doHTTP(ctx context.Context, method, path string, body io.Reader, extraHeaders http.Header) (*httpResponse, error) {
 	url := c.apiURL + path
@@ -169,7 +221,10 @@ func (c *Client) doHTTP(ctx context.Context, method, path string, body io.Reader
 		req.Header[k] = vals
 	}
 
-	httpClient := &http.Client{Timeout: 30 * time.Second}
+	httpClient := &http.Client{
+		Timeout:       30 * time.Second,
+		CheckRedirect: rejectMethodChangingRedirect,
+	}
 	resp, err := httpClient.Do(req)
 	if err != nil {
 		return nil, fmt.Errorf("HTTP %s %s: %w", method, path, err)
@@ -226,7 +281,7 @@ func (c *Client) rawRequest(ctx context.Context, method, path string, body any,
 	}
 
 	if resp.statusCode >= 400 {
-		return fmt.Errorf("HTTP %d: %s", resp.statusCode, formatHTTPErrorBody(resp.body))
+		return &HTTPError{StatusCode: resp.statusCode, Body: resp.body}
 	}
 
 	if result != nil {
diff --git a/internal/client/client_test.go b/internal/client/client_test.go
index 41aeb26..274891e 100644
--- a/internal/client/client_test.go
+++ b/internal/client/client_test.go
@@ -632,3 +632,52 @@ func TestAPIURL(t *testing.T) {
 		t.Errorf("expected http://localhost:1234, got %q", c.APIURL())
 	}
 }
+
+// ---------- Redirect handling ----------
+
+func TestRawDo_RejectsMethodChangingRedirect(t *testing.T) {
+	ts := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path == "/feedback" {
+			http.Redirect(w, r, "/feedback-redirected", http.StatusFound) // 302
+			return
+		}
+		t.Errorf("redirect target should never be reached for a rejected redirect, got %s %s", r.Method, r.URL.Path)
+	}))
+	defer ts.Close()
+
+	c := New("key", ts.URL)
+	_, _, _, _, err := c.RawDo(context.Background(), "POST", "/feedback", strings.NewReader(`{"key":"note"}`), nil)
+	if err == nil {
+		t.Fatal("expected an error, got nil")
+	}
+	if !strings.Contains(err.Error(), "would change") {
+		t.Errorf("expected error to mention the method change, got: %v", err)
+	}
+}
+
+func TestRawDo_FollowsSameMethodRedirect(t *testing.T) {
+	ts := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path == "/runs" {
+			http.Redirect(w, r, "/runs-redirected", http.StatusFound) // 302
+			return
+		}
+		if r.Method != "GET" {
+			t.Errorf("expected GET on redirect target, got %s", r.Method)
+		}
+		w.WriteHeader(200)
+		_, _ = w.Write([]byte(`{"ok":true}`))
+	}))
+	defer ts.Close()
+
+	c := New("key", ts.URL)
+	status, _, _, body, err := c.RawDo(context.Background(), "GET", "/runs", nil, nil)
+	if err != nil {
+		t.Fatalf("unexpected error: %v", err)
+	}
+	if status != 200 {
+		t.Errorf("expected 200, got %d", status)
+	}
+	if string(body) != `{"ok":true}` {
+		t.Errorf("unexpected body: %s", body)
+	}
+}
diff --git a/internal/cmd/apps.go b/internal/cmd/apps.go
new file mode 100644
index 0000000..3725c81
--- /dev/null
+++ b/internal/cmd/apps.go
@@ -0,0 +1,210 @@
+package cmd
+
+import (
+	"bytes"
+	"encoding/json"
+	"fmt"
+	"io/fs"
+	"os"
+	"path/filepath"
+	"strings"
+
+	"github.com/spf13/cobra"
+)
+
+// appsLinkDir and appsLinkFile name the local file that records which
+// remote custom app a directory is linked to, mirroring how `vercel link`/
+// `netlify link` avoid needing a server-side unique name to upsert against.
+const (
+	appsLinkDir  = ".langsmith"
+	appsLinkFile = "app.json"
+)
+
+const (
+	appsMaxFileEntries   = 500
+	appsMaxFileSizeBytes = 1 << 20 // 1MB per file, matches hub push's limit.
+)
+
+// appLink is the contents of <dir>/.langsmith/app.json. It is the durable
+// record of "what this app is" that `apps push` reads on every run to decide
+// whether to create a new custom app or update the one it created last time.
+type appLink struct {
+	AppID string `json:"app_id"`
+	Name  string `json:"name"`
+}
+
+// customApp mirrors the JSON shape returned by smith-go's
+// /v1/platform/custom-apps endpoints (smith-go/customapps/types.go).
+type customApp struct {
+	ID          string            `json:"id"`
+	TenantID    string            `json:"tenant_id,omitempty"`
+	Name        string            `json:"name"`
+	Description *string           `json:"description,omitempty"`
+	Files       map[string]string `json:"files,omitempty"`
+	Entrypoint  string            `json:"entrypoint"`
+	IsEnabled   bool              `json:"is_enabled"`
+	CreatedAt   string            `json:"created_at,omitempty"`
+	UpdatedAt   string            `json:"updated_at,omitempty"`
+	CreatedBy   *string           `json:"created_by,omitempty"`
+}
+
+var appsExcludedDirs = map[string]bool{
+	".git":         true,
+	"node_modules": true,
+	".langsmith":   true,
+	".cache":       true,
+	".next":        true,
+}
+
+var appsExcludedFiles = map[string]bool{
+	".DS_Store": true,
+	"Thumbs.db": true,
+}
+
+func newAppsCmd() *cobra.Command {
+	cmd := &cobra.Command{
+		Use:   "apps",
+		Short: "Build, upload, and manage Custom Apps",
+		Long: `Build, upload, and manage Custom Apps — UIs you build locally against the
+LangSmith API and run inside LangSmith.
+
+A custom app is a small set of files rendered in a locked-down sandbox: no
+direct network access, no npm modules at runtime — only a postMessage
+bridge (window.langsmith.call/setData) proxied through the viewer's own
+LangSmith session. Use React/JSX or npm dependencies freely; the scaffolded
+starter bundles them locally (Vite) into the single dependency-free file the
+sandbox expects.
+
+Pick a starter with --template (blank, annotation-queue,
+annotation-queue-grid); they differ only in the UI they scaffold — every app
+is uploaded and rendered the same way.
+
+Examples:
+  langsmith apps init --name my-app
+  langsmith apps init --name my-queue-app --template annotation-queue
+  langsmith apps dev
+  langsmith apps push
+  langsmith apps list
+  langsmith apps delete <app-id> --yes
+
+All of the above (except list/delete, which take an app ID) act on the
+current directory — cd into your app's directory first.`,
+	}
+	cmd.AddCommand(newAppsInitCmd())
+	cmd.AddCommand(newAppsDevCmd())
+	cmd.AddCommand(newAppsPushCmd())
+	cmd.AddCommand(newAppsListCmd())
+	cmd.AddCommand(newAppsDeleteCmd())
+	return cmd
+}
+
+// readAppLink reads <dir>/.langsmith/app.json. It returns (nil, nil) if the
+// file does not exist — callers treat that as "not linked yet".
+func readAppLink(dir string) (*appLink, error) {
+	path := filepath.Join(dir, appsLinkDir, appsLinkFile)
+	data, err := os.ReadFile(path)
+	if err != nil {
+		if os.IsNotExist(err) {
+			return nil, nil
+		}
+		return nil, fmt.Errorf("reading %s: %w", path, err)
+	}
+	var link appLink
+	if err := json.Unmarshal(data, &link); err != nil {
+		return nil, fmt.Errorf("parsing %s: %w", path, err)
+	}
+	return &link, nil
+}
+
+// writeAppLink writes <dir>/.langsmith/app.json, creating the directory if
+// needed.
+func writeAppLink(dir string, link appLink) error {
+	linkDir := filepath.Join(dir, appsLinkDir)
+	if err := os.MkdirAll(linkDir, 0o755); err != nil {
+		return fmt.Errorf("creating %s: %w", linkDir, err)
+	}
+	data, err := json.MarshalIndent(link, "", "  ")
+	if err != nil {
+		return fmt.Errorf("marshaling app link: %w", err)
+	}
+	data = append(data, '\n')
+	path := filepath.Join(linkDir, appsLinkFile)
+	if err := os.WriteFile(path, data, 0o644); err != nil {
+		return fmt.Errorf("writing %s: %w", path, err)
+	}
+	return nil
+}
+
+// readDirectoryAsAppFiles walks root and returns a flat relative-path →
+// content map suitable for custom_apps.files. Unlike hub's equivalent
+// (readDirectoryAsFiles in hub_push.go), there is no {type, content}
+// wrapper — the custom-apps API takes a plain map[string]string — and
+// .langsmith/ itself is always excluded so the link file never gets
+// uploaded as an app file.
+func readDirectoryAsAppFiles(root string) (map[string]string, error) {
+	info, err := os.Stat(root)
+	if err != nil {
+		return nil, fmt.Errorf("opening %s: %w", root, err)
+	}
+	if !info.IsDir() {
+		return nil, fmt.Errorf("%s is not a directory", root)
+	}
+
+	files := make(map[string]string)
+	err = filepath.WalkDir(root, func(path string, d fs.DirEntry, walkErr error) error {
+		if walkErr != nil {
+			return walkErr
+		}
+		rel, err := filepath.Rel(root, path)
+		if err != nil {
+			return err
+		}
+		if rel == "." {
+			return nil
+		}
+		base := d.Name()
+		if d.IsDir() {
+			if appsExcludedDirs[base] {
+				return filepath.SkipDir
+			}
+			return nil
+		}
+		if d.Type()&fs.ModeSymlink != 0 {
+			return nil
+		}
+		if appsExcludedFiles[base] || strings.HasPrefix(base, ".env") {
+			return nil
+		}
+
+		rel = filepath.ToSlash(rel)
+
+		data, err := os.ReadFile(path)
+		if err != nil {
+			return fmt.Errorf("reading %s: %w", rel, err)
+		}
+		if len(data) > appsMaxFileSizeBytes {
+			return fmt.Errorf("file %s is %d bytes; exceeds %d-byte limit", rel, len(data), appsMaxFileSizeBytes)
+		}
+		if isAppFileBinary(data) {
+			return fmt.Errorf("file %s appears to be binary; custom apps do not support binary assets yet", rel)
+		}
+
+		files[rel] = string(data)
+		if len(files) > appsMaxFileEntries {
+			return fmt.Errorf("directory contains more than %d files; reduce before pushing", appsMaxFileEntries)
+		}
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+	return files, nil
+}
+
+func isAppFileBinary(data []byte) bool {
+	n := len(data)
+	if n > 512 {
+		n = 512
+	}
+	return bytes.IndexByte(data[:n], 0) != -1
+}
diff --git a/internal/cmd/apps_crud_test.go b/internal/cmd/apps_crud_test.go
new file mode 100644
index 0000000..2447eb2
--- /dev/null
+++ b/internal/cmd/apps_crud_test.go
@@ -0,0 +1,72 @@
+package cmd
+
+import (
+	"encoding/json"
+	"net/http"
+	"strings"
+	"testing"
+)
+
+// Apps are uniform now — list takes no context_type filter and hits the
+// endpoint with no query string.
+func TestAppsList_ListsAllApps(t *testing.T) {
+	var sawQuery string
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		sawQuery = r.URL.RawQuery
+		w.Header().Set("Content-Type", "application/json")
+		_ = json.NewEncoder(w).Encode([]customApp{
+			{ID: "a1", Name: "one"},
+		})
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	out := captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"list"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if sawQuery != "" {
+		t.Errorf("expected no query string (no context_type filter), got %q", sawQuery)
+	}
+	if !strings.Contains(out, `"id": "a1"`) {
+		t.Errorf("expected app in output:\n%s", out)
+	}
+
+	// The context_type filter flag must be gone.
+	listCmd, _, err := newAppsCmd().Find([]string{"list"})
+	if err != nil {
+		t.Fatalf("find list: %v", err)
+	}
+	if f := listCmd.Flags().Lookup("context-type"); f != nil {
+		t.Error("expected --context-type flag to be gone from apps list")
+	}
+}
+
+func TestAppsDelete_SkipsConfirmationWithYes(t *testing.T) {
+	var sawDelete bool
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != "DELETE" || r.URL.Path != "/v1/platform/custom-apps/a1" {
+			t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+		}
+		sawDelete = true
+		w.WriteHeader(http.StatusNoContent)
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	out := captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"delete", "a1", "--yes"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+	if !sawDelete {
+		t.Error("expected DELETE request")
+	}
+	if !strings.Contains(out, `"status": "deleted"`) {
+		t.Errorf("expected deleted status:\n%s", out)
+	}
+}
diff --git a/internal/cmd/apps_delete.go b/internal/cmd/apps_delete.go
new file mode 100644
index 0000000..adf763d
--- /dev/null
+++ b/internal/cmd/apps_delete.go
@@ -0,0 +1,48 @@
+package cmd
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"os"
+	"strings"
+
+	"github.com/langchain-ai/langsmith-cli/internal/output"
+	"github.com/spf13/cobra"
+)
+
+func newAppsDeleteCmd() *cobra.Command {
+	var yes bool
+
+	cmd := &cobra.Command{
+		Use:   "delete APP_ID",
+		Short: "Delete a custom app",
+		Args:  cobra.ExactArgs(1),
+		RunE: func(cmd *cobra.Command, args []string) error {
+			id := args[0]
+			if !yes {
+				fmt.Fprintf(os.Stderr, "Delete custom app '%s'? [y/N] ", id)
+				var confirm string
+				_, _ = fmt.Scanln(&confirm)
+				if strings.ToLower(confirm) != "y" {
+					return errors.New("aborted")
+				}
+			}
+
+			c := MustGetClient()
+			ctx := context.Background()
+
+			if err := c.RawDelete(ctx, "/v1/platform/custom-apps/"+id, nil); err != nil {
+				return fmt.Errorf("deleting custom app %s: %w", id, err)
+			}
+			output.OutputJSON(map[string]any{
+				"status": "deleted",
+				"app_id": id,
+			}, "")
+			return nil
+		},
+	}
+
+	cmd.Flags().BoolVar(&yes, "yes", false, "Skip confirmation prompt")
+	return cmd
+}
diff --git a/internal/cmd/apps_dev.go b/internal/cmd/apps_dev.go
new file mode 100644
index 0000000..295b953
--- /dev/null
+++ b/internal/cmd/apps_dev.go
@@ -0,0 +1,796 @@
+package cmd
+
+import (
+	"bytes"
+	"context"
+	"encoding/json"
+	"fmt"
+	"html"
+	"io"
+	"net"
+	"net/http"
+	"net/url"
+	"os"
+	"os/exec"
+	"os/signal"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"syscall"
+	"time"
+
+	"github.com/langchain-ai/langsmith-cli/internal/output"
+	"github.com/spf13/cobra"
+)
+
+func newAppsDevCmd() *cobra.Command {
+	var (
+		entrypoint string
+		noOpen     bool
+		noWatch    bool
+	)
+
+	cmd := &cobra.Command{
+		Use:   "dev",
+		Short: "Run the current directory's custom app locally in a real sandbox",
+		Long: `Serve the current directory's custom app inside a real sandboxed iframe
+(sandbox="allow-scripts", no allow-same-origin — identical restrictions to
+production) and open it in your browser. This is entirely self-contained:
+no LangSmith web app involved.
+
+The app's window.langsmith.call(operation, args) is proxied to the real
+LangSmith API using your local LANGSMITH_API_KEY — the same generic
+passthrough production uses (proxied through the injected platform token
+there instead). It is not a curated allowlist: operation is a
+"<METHOD> <path>" string (e.g. "GET /api/v1/annotation-queues/{id}/runs"),
+forwarded as-is.
+
+If the current directory has a package.json with a "watch" script (both
+starter templates do), this runs it for you automatically as a managed
+child process, so editing source files and saving is enough to see the
+change — no second terminal needed. The page itself polls for the
+entrypoint changing and reloads whenever the watcher rebuilds it. Pass
+--no-watch to skip this (e.g. you're already running your own build
+process, or want to use a different one).`,
+		RunE: func(cmd *cobra.Command, args []string) error {
+			dir, err := os.Getwd()
+			if err != nil {
+				return fmt.Errorf("getting current directory: %w", err)
+			}
+
+			if _, err := getClient(); err != nil {
+				return err
+			}
+
+			ctx, cancel := signal.NotifyContext(context.Background(), syscall.SIGINT, syscall.SIGTERM)
+			defer cancel()
+
+			return runAppsDev(ctx, dir, entrypoint, noOpen, noWatch)
+		},
+	}
+
+	cmd.Flags().StringVar(&entrypoint, "entrypoint", "dist/bundle.js", "Path (relative to the current directory) of the file to render")
+	cmd.Flags().BoolVar(&noOpen, "no-open", false, "Print the local URL instead of opening a browser")
+	cmd.Flags().BoolVar(&noWatch, "no-watch", false, "Don't automatically run the build's \"watch\" script (e.g. \"npm run watch\") — use this if you're already running your own build process")
+	return cmd
+}
+
+// runAppsDev starts the local sandboxed-preview server for dir, opens it in
+// a browser, and blocks until ctx is cancelled (e.g. by SIGINT) or the
+// server fails.
+func runAppsDev(ctx context.Context, dir, entrypoint string, noOpen, noWatch bool) error {
+	srv, ln, previewURL, err := prepareAppsDevServer(dir, entrypoint)
+	if err != nil {
+		return err
+	}
+
+	if !noWatch {
+		entrypointPath := filepath.Join(dir, filepath.FromSlash(entrypoint))
+		var prevBuildTime time.Time
+		if info, statErr := os.Stat(entrypointPath); statErr == nil {
+			prevBuildTime = info.ModTime()
+		}
+		if startWatchProcess(ctx, dir) {
+			// Most build tools (including both starter templates' "vite
+			// build --watch") empty their output directory before their
+			// first rebuild. Without this, that would make an entrypoint we
+			// already had (e.g. from "apps init"'s one-time build) briefly
+			// disappear right as the browser opens, flashing the "waiting
+			// for build" page for no reason. Wait for a fresh build before
+			// continuing — the served page's own poll+reload is still
+			// there as a fallback if this build is slow.
+			waitForFreshEntrypoint(ctx, entrypointPath, prevBuildTime, 10*time.Second)
+		}
+	}
+
+	serveErrCh := make(chan error, 1)
+	go func() { serveErrCh <- srv.Serve(ln) }()
+
+	if !noOpen {
+		_ = openBrowser(previewURL)
+	}
+	output.OutputJSON(map[string]any{
+		"status": "serving",
+		"url":    previewURL,
+	}, "")
+	fmt.Fprintf(os.Stderr, "Serving %s at %s (sandboxed) — press Ctrl+C to stop\n", dir, previewURL)
+
+	select {
+	case <-ctx.Done():
+	case serveErr := <-serveErrCh:
+		if serveErr != nil && serveErr != http.ErrServerClosed {
+			return fmt.Errorf("local server: %w", serveErr)
+		}
+	}
+
+	shutdownCtx, shutdownCancel := context.WithTimeout(context.Background(), 2*time.Second)
+	defer shutdownCancel()
+	if err := srv.Shutdown(shutdownCtx); err != nil && err != http.ErrServerClosed {
+		return fmt.Errorf("shutting down local server: %w", err)
+	}
+	return nil
+}
+
+// startWatchProcess runs dir/package.json's "watch" script (e.g.
+// "vite build --watch", aliased to "npm run watch" by both starter
+// templates) as a child process tied to ctx, so editing source files
+// rebuilds the entrypoint without a second terminal. It never fails
+// runAppsDev — if there's no package.json, no "watch" script, or no npm on
+// PATH, it just prints a note and returns false, leaving the existing
+// run-your-own-build workflow intact. Returns true only if the process was
+// actually started.
+func startWatchProcess(ctx context.Context, dir string) bool {
+	script, pkgJSONExists, err := packageJSONScript(dir, "watch")
+	if err != nil {
+		fmt.Fprintf(os.Stderr, "warning: couldn't read package.json to find a \"watch\" script: %v\n", err)
+		return false
+	}
+	if script == "" {
+		if pkgJSONExists {
+			fmt.Fprintln(os.Stderr, `note: no "watch" script in package.json — start your own build/watch process to see live updates`)
+		}
+		return false
+	}
+	if _, lookErr := exec.LookPath("npm"); lookErr != nil {
+		fmt.Fprintln(os.Stderr, `note: npm not found on PATH — run "npm run watch" yourself to see live updates`)
+		return false
+	}
+
+	fmt.Fprintln(os.Stderr, "Starting build watcher: npm run watch")
+	watchCmd := exec.CommandContext(ctx, "npm", "run", "watch")
+	watchCmd.Dir = dir
+	watchCmd.Stdout = os.Stderr
+	watchCmd.Stderr = os.Stderr
+	if startErr := watchCmd.Start(); startErr != nil {
+		fmt.Fprintf(os.Stderr, "warning: failed to start \"npm run watch\": %v\n", startErr)
+		return false
+	}
+	// Reap the process (and honor ctx cancellation, which exec.CommandContext
+	// enforces via Wait) without blocking runAppsDev on it.
+	go func() { _ = watchCmd.Wait() }()
+	return true
+}
+
+// waitForFreshEntrypoint blocks until path's mtime is newer than after
+// (meaning a build completed since we started watching), ctx is cancelled,
+// or timeout elapses — whichever comes first. A zero-value after matches
+// the first time path ever appears (no prior build to compare against).
+func waitForFreshEntrypoint(ctx context.Context, path string, after time.Time, timeout time.Duration) {
+	deadline := time.Now().Add(timeout)
+	for time.Now().Before(deadline) {
+		if info, err := os.Stat(path); err == nil && info.ModTime().After(after) {
+			return
+		}
+		select {
+		case <-ctx.Done():
+			return
+		case <-time.After(100 * time.Millisecond):
+		}
+	}
+}
+
+// packageJSONScript reads dir/package.json and returns the named script.
+// pkgJSONExists distinguishes "no package.json at all" (nothing to warn
+// about — this may not be an npm project) from "package.json exists but has
+// no such script" (worth telling the user about).
+func packageJSONScript(dir, name string) (script string, pkgJSONExists bool, err error) {
+	raw, readErr := os.ReadFile(filepath.Join(dir, "package.json"))
+	if readErr != nil {
+		if os.IsNotExist(readErr) {
+			return "", false, nil
+		}
+		return "", false, readErr
+	}
+	var pkg struct {
+		Scripts map[string]string `json:"scripts"`
+	}
+	if jsonErr := json.Unmarshal(raw, &pkg); jsonErr != nil {
+		return "", true, jsonErr
+	}
+	return pkg.Scripts[name], true, nil
+}
+
+// prepareAppsDevServer builds (but does not start) an HTTP server, bound to
+// an OS-assigned free port on 127.0.0.1, that serves:
+//
+//   - "/"                — a host page embedding the app in a real
+//     sandbox="allow-scripts" iframe (no allow-same-origin), re-read from
+//     disk on every request so a rebuild is reflected on the next reload.
+//   - "/__ls_dev/mtime"  — polled by the host page to detect a rebuild (or
+//     the entrypoint appearing for the first time) and trigger a reload.
+//   - "/__ls_dev/call"   — the generic window.langsmith.call(...) proxy,
+//     forwarding to the real LangSmith API via the authenticated CLI client.
+//
+// The directory is read the same way "apps push" reads it
+// (readDirectoryAsAppFiles), so local dev sees exactly what would be
+// uploaded — including the same .env/.git/node_modules exclusions.
+func prepareAppsDevServer(dir, entrypoint string) (srv *http.Server, ln net.Listener, previewURL string, err error) {
+	mux := http.NewServeMux()
+
+	mux.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		if r.URL.Path != "/" {
+			http.NotFound(w, r)
+			return
+		}
+		w.Header().Set("Cache-Control", "no-store")
+		w.Header().Set("Content-Type", "text/html; charset=utf-8")
+
+		files, readErr := readDirectoryAsAppFiles(dir)
+		if readErr != nil {
+			_, _ = w.Write([]byte(devWaitingHTML(fmt.Sprintf("reading %s: %s", dir, readErr))))
+			return
+		}
+		if _, ok := files[entrypoint]; !ok {
+			_, _ = w.Write([]byte(devWaitingHTML(fmt.Sprintf("entrypoint %q does not exist yet in %s — waiting for the initial build to finish", entrypoint, dir))))
+			return
+		}
+		_, _ = w.Write([]byte(renderDevHostHTML(files, entrypoint)))
+	})
+
+	mux.HandleFunc("/__ls_dev/mtime", func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Cache-Control", "no-store")
+		w.Header().Set("Content-Type", "application/json")
+		info, statErr := os.Stat(filepath.Join(dir, filepath.FromSlash(entrypoint)))
+		if statErr != nil {
+			_ = json.NewEncoder(w).Encode(map[string]any{"exists": false})
+			return
+		}
+		_ = json.NewEncoder(w).Encode(map[string]any{"exists": true, "mtime": info.ModTime().UnixNano()})
+	})
+
+	mux.HandleFunc("/__ls_dev/call", handleLsDevCall)
+
+	ln, err = net.Listen("tcp", "127.0.0.1:0")
+	if err != nil {
+		return nil, nil, "", fmt.Errorf("starting local server: %w", err)
+	}
+	return &http.Server{Handler: mux}, ln, "http://" + ln.Addr().String() + "/", nil
+}
+
+var allowedProxyMethods = map[string]bool{
+	"GET": true, "POST": true, "PATCH": true, "PUT": true, "DELETE": true,
+}
+
+type lsDevCallRequest struct {
+	Operation string        `json:"operation"`
+	Args      lsDevCallArgs `json:"args"`
+}
+
+type lsDevCallArgs struct {
+	Params map[string]any `json:"params,omitempty"`
+	Body   any            `json:"body,omitempty"`
+}
+
+// handleLsDevCall is the local-dev twin of smith-frontend's apiProxy.ts
+// createLangSmithApiProxy: a generic passthrough, not a curated allowlist.
+// It forwards operation ("<METHOD> <path>") to the real LangSmith API using
+// the CLI's authenticated client (the same one "langsmith api" uses), so an
+// app can exercise real endpoints while it's being developed.
+func handleLsDevCall(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	var req lsDevCallRequest
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+		http.Error(w, "invalid request body: "+err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	spaceIdx := strings.IndexByte(req.Operation, ' ')
+	if spaceIdx == -1 {
+		http.Error(w, fmt.Sprintf("invalid operation %q — expected \"<METHOD> <path>\"", req.Operation), http.StatusBadRequest)
+		return
+	}
+	method := strings.ToUpper(req.Operation[:spaceIdx])
+	path := req.Operation[spaceIdx+1:]
+
+	if !allowedProxyMethods[method] {
+		http.Error(w, fmt.Sprintf("method %q is not permitted", method), http.StatusBadRequest)
+		return
+	}
+	if !strings.HasPrefix(path, "/") || strings.HasPrefix(path, "//") || strings.Contains(path, "://") {
+		http.Error(w, fmt.Sprintf("path %q must be a relative path starting with \"/\"", path), http.StatusBadRequest)
+		return
+	}
+	if len(req.Args.Params) > 0 {
+		path += "?" + encodeProxyParams(req.Args.Params)
+	}
+
+	var bodyReader io.Reader
+	if req.Args.Body != nil {
+		b, marshalErr := json.Marshal(req.Args.Body)
+		if marshalErr != nil {
+			http.Error(w, "encoding body: "+marshalErr.Error(), http.StatusInternalServerError)
+			return
+		}
+		bodyReader = bytes.NewReader(b)
+	}
+
+	c, err := getClient()
+	if err != nil {
+		// Not MustGetClient: that exits the process, so one unauthenticated
+		// app call would kill the whole dev server. Return 502 instead.
+		http.Error(w, "not authenticated: "+err.Error(), http.StatusBadGateway)
+		return
+	}
+	status, _, respHeaders, respBody, err := c.RawDo(r.Context(), method, path, bodyReader, nil)
+	if err != nil {
+		http.Error(w, "request failed: "+err.Error(), http.StatusBadGateway)
+		return
+	}
+	if ct := respHeaders.Get("Content-Type"); ct != "" {
+		w.Header().Set("Content-Type", ct)
+	}
+	w.WriteHeader(status)
+	_, _ = w.Write(respBody)
+}
+
+func encodeProxyParams(params map[string]any) string {
+	values := url.Values{}
+	for k, v := range params {
+		switch val := v.(type) {
+		case []any:
+			for _, item := range val {
+				values.Add(k, fmt.Sprintf("%v", item))
+			}
+		default:
+			values.Set(k, fmt.Sprintf("%v", val))
+		}
+	}
+	return values.Encode()
+}
+
+var scriptCloseTagPattern = regexp.MustCompile(`(?i)</script>`)
+
+func escapeForScript(jsonBytes []byte) string {
+	return scriptCloseTagPattern.ReplaceAllString(string(jsonBytes), "<\\/script>")
+}
+
+// devWaitingHTML is served at "/" when the entrypoint doesn't exist yet (or
+// the directory can't be read) — it polls the same mtime endpoint the real
+// host page does, so it reloads itself into the real preview the moment a
+// build produces the entrypoint.
+func devWaitingHTML(message string) string {
+	return `<!doctype html>
+<html><head><meta charset="utf-8"><title>Waiting for build…</title></head>
+<body style="font-family:-apple-system,BlinkMacSystemFont,sans-serif;padding:24px;color:#334155;">
+<p>` + html.EscapeString(message) + `</p>
+<script>
+var seen = false, lastKey = null;
+setInterval(function() {
+  fetch('/__ls_dev/mtime', { cache: 'no-store' }).then(function(r){ return r.json(); }).then(function(j){
+    var key = j.exists ? String(j.mtime) : 'missing';
+    if (!seen) { seen = true; lastKey = key; return; }
+    if (key !== lastKey) { location.reload(); }
+  }).catch(function(){});
+}, 500);
+</script>
+</body></html>`
+}
+
+// renderDevHostHTML builds the top-level host page: it embeds the app in a
+// real sandboxed iframe (mirroring smith-frontend's sandbox.ts
+// buildSandboxSrcdoc as closely as possible, including the multi-file
+// require() loader, so local dev exercises the exact same module-loading
+// behavior as production) and implements the postMessage bridge from the
+// host side — LANGSMITH_READY/LANGSMITH_HEIGHT/LS_API/LS_MUTATION — with
+// LS_API forwarded to /__ls_dev/call, which is real network access the
+// iframe itself can never have.
+//
+// Every app gets a config toolbar, labeled so it reads clearly as the dev
+// tool's own chrome rather than part of the app below it; its first (and
+// only) control is a Light/Dark mode toggle (posting LANGSMITH_METADATA).
+func renderDevHostHTML(files map[string]string, entrypoint string) string {
+	filesJSON, _ := json.Marshal(files)
+	entrypointJSON, _ := json.Marshal(entrypoint)
+
+	inner := strings.NewReplacer(
+		"__FILES_JSON__", escapeForScript(filesJSON),
+		"__ENTRYPOINT_JSON__", escapeForScript(entrypointJSON),
+	).Replace(sandboxInnerHTMLTemplate)
+
+	return strings.NewReplacer(
+		"__SANDBOX_SRCDOC__", html.EscapeString(inner),
+	).Replace(devHostHTMLTemplate)
+}
+
+const devHostHTMLTemplate = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Local sandboxed preview</title>
+<style>
+  html, body { height: 100%; margin: 0; }
+  body { display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif; }
+
+  /* Toolbar renders for every app.
+     ls-dev-dark mirrors the sandbox's html.dark onto the host chrome. */
+  :root {
+    --ls-dev-bar-bg: #f5f8fb;
+    --ls-dev-bar-border: #e2e8f0;
+    --ls-dev-bar-label: #334155;
+    --ls-dev-control-bg: #ffffff;
+    --ls-dev-control-border: #cbd5e1;
+    --ls-dev-control-border-hover: #94a3b8;
+    --ls-dev-control-text: #0f172a;
+    --ls-dev-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+  html.ls-dev-dark {
+    --ls-dev-bar-bg: #111521;
+    --ls-dev-bar-border: #282e42;
+    --ls-dev-bar-label: #e2e8f0;
+    --ls-dev-control-bg: #1b2030;
+    --ls-dev-control-border: #393f55;
+    --ls-dev-control-border-hover: #555d78;
+    --ls-dev-control-text: #f5f8fb;
+    --ls-dev-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238790ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  }
+
+  #ls-dev-toolbar {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    background: var(--ls-dev-bar-bg);
+    border-bottom: 1px solid var(--ls-dev-bar-border);
+    padding: 8px 16px;
+    font-size: 13px;
+  }
+  #ls-dev-toolbar-title {
+    font-weight: 600;
+    color: var(--ls-dev-control-text);
+  }
+  .ls-dev-toolbar-controls { display: flex; align-items: center; gap: 20px; }
+
+  #ls-dev-mode-group {
+    display: inline-flex;
+    gap: 2px;
+    background: var(--ls-dev-bar-border);
+    border-radius: 7px;
+    padding: 2px;
+  }
+  .ls-dev-mode-btn {
+    font-family: inherit;
+    font-size: 13px;
+    color: var(--ls-dev-bar-label);
+    background-color: transparent;
+    border: none;
+    border-radius: 5px;
+    padding: 4px 12px;
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+  }
+  .ls-dev-mode-btn:hover { color: var(--ls-dev-control-text); }
+  .ls-dev-mode-btn[aria-pressed="true"] {
+    background-color: var(--ls-dev-control-bg);
+    color: var(--ls-dev-control-text);
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.16);
+  }
+  .ls-dev-mode-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px #006ddd;
+  }
+
+  iframe { display: block; width: 100%; border: none; flex: 1 1 auto; }
+</style>
+</head>
+<body>
+<div id="ls-dev-toolbar">
+  <span id="ls-dev-toolbar-title">LangSmith Custom Apps — local preview below</span>
+  <div class="ls-dev-toolbar-controls">
+    <div id="ls-dev-mode-group" role="group" aria-label="Appearance">
+      <button id="ls-dev-mode-light" type="button" class="ls-dev-mode-btn" aria-pressed="false">Light</button>
+      <button id="ls-dev-mode-dark" type="button" class="ls-dev-mode-btn" aria-pressed="false">Dark</button>
+    </div>
+  </div>
+</div>
+<iframe id="ls-app" sandbox="allow-scripts" srcdoc="__SANDBOX_SRCDOC__"></iframe>
+<script>
+(function() {
+  var iframe = document.getElementById('ls-app');
+  // Apps get no host context: the sandbox always receives {} as render data.
+  var data = {};
+
+  function post(msg) {
+    iframe.contentWindow.postMessage(msg, '*');
+  }
+
+  // First config control: two always-visible Light/Dark buttons, not a
+  // single toggle. mode ("dark"|"light") defaults from the OS, persists to
+  // localStorage, and drives the sandbox (LANGSMITH_METADATA) and host chrome.
+  var MODE_STORAGE_KEY = 'langsmith:apps-dev:mode';
+  var lightBtn = document.getElementById('ls-dev-mode-light');
+  var darkBtn = document.getElementById('ls-dev-mode-dark');
+
+  function initialMode() {
+    try {
+      var saved = localStorage.getItem(MODE_STORAGE_KEY);
+      if (saved === 'dark' || saved === 'light') return saved;
+    } catch (e) {}
+    return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
+  }
+  var mode = initialMode();
+
+  function applyModeToHost() {
+    document.documentElement.classList.toggle('ls-dev-dark', mode === 'dark');
+    if (lightBtn) lightBtn.setAttribute('aria-pressed', mode === 'light' ? 'true' : 'false');
+    if (darkBtn) darkBtn.setAttribute('aria-pressed', mode === 'dark' ? 'true' : 'false');
+  }
+
+  function postMetadata() {
+    post({ type: 'LANGSMITH_METADATA', metadata: { mode: mode } });
+  }
+
+  function setMode(next) {
+    if (next === mode) return;
+    mode = next;
+    try { localStorage.setItem(MODE_STORAGE_KEY, mode); } catch (e) {}
+    applyModeToHost();
+    postMetadata();
+  }
+
+  applyModeToHost();
+  if (lightBtn) lightBtn.addEventListener('click', function() { setMode('light'); });
+  if (darkBtn) darkBtn.addEventListener('click', function() { setMode('dark'); });
+
+  window.addEventListener('message', function(event) {
+    if (event.source !== iframe.contentWindow) return;
+    var msg = event.data;
+    if (!msg || typeof msg.type !== 'string') return;
+
+    if (msg.type === 'LANGSMITH_READY') {
+      post({ type: 'LANGSMITH_THEME', cssText: ':root {}' });
+      postMetadata();
+      post({ type: 'LANGSMITH_DATA', payload: data });
+    }
+
+    if (msg.type === 'LANGSMITH_HEIGHT') {
+      // Local preview always fills the viewport; no resize needed.
+    }
+
+    if (msg.type === 'LS_MUTATION') {
+      console.log('[langsmith apps dev] setData (not persisted locally):', msg.patch);
+    }
+
+    if (msg.type === 'LS_API') {
+      fetch('/__ls_dev/call', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ operation: msg.operation, args: msg.args || {} }),
+      })
+        .then(function(r) {
+          return r.text().then(function(text) {
+            var parsed;
+            try { parsed = text ? JSON.parse(text) : null; } catch (e) { parsed = text; }
+            if (!r.ok) throw new Error(typeof parsed === 'string' ? parsed : JSON.stringify(parsed));
+            return parsed;
+          });
+        })
+        .then(function(result) {
+          post({ type: 'LS_API_RESPONSE', callId: msg.callId, result: result });
+        })
+        .catch(function(err) {
+          post({ type: 'LS_API_RESPONSE', callId: msg.callId, error: String((err && err.message) || err) });
+        });
+    }
+  });
+
+  // Poll for the entrypoint changing (or appearing for the first time) and
+  // reload the whole page -- simplest reliable way to pick up a rebuild.
+  var seen = false, lastKey = null;
+  setInterval(function() {
+    fetch('/__ls_dev/mtime', { cache: 'no-store' })
+      .then(function(r) { return r.json(); })
+      .then(function(j) {
+        var key = j.exists ? String(j.mtime) : 'missing';
+        if (!seen) { seen = true; lastKey = key; return; }
+        if (key !== lastKey) { location.reload(); }
+      })
+      .catch(function() {});
+  }, 500);
+})();
+</script>
+</body>
+</html>`
+
+// sandboxInnerHTMLTemplate is a close Go port of smith-frontend's
+// sandbox.ts buildSandboxSrcdoc — same virtual filesystem + require()
+// loader, same render(data, root) contract, same window.langsmith bridge
+// (call/setData/feedback.create). Kept in sync by hand; there is no shared
+// source between the two repos.
+const sandboxInnerHTMLTemplate = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style id="ls-theme">/* theme injected via postMessage */</style>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
+  background: var(--bg-surface-level-1, #ffffff);
+  color: var(--text-primary, #0f172a);
+  font-size: 14px;
+  line-height: 1.5;
+}
+pre, code {
+  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
+}
+</style>
+</head>
+<body>
+<div id="root"></div>
+<script>
+(function() {
+  var themeReady = false;
+  var currentData = null;
+  var currentMetadata = null;
+
+  var FILES = __FILES_JSON__;
+
+  var moduleCache = {};
+
+  function makeRequire(fromPath) {
+    return function require(id) {
+      var resolved = id;
+      if (id.charAt(0) === '.') {
+        var parts = fromPath.split('/');
+        parts.pop();
+        id.split('/').forEach(function(seg) {
+          if (seg === '..') parts.pop();
+          else if (seg !== '.') parts.push(seg);
+        });
+        resolved = parts.join('/');
+      }
+      if (moduleCache[resolved]) return moduleCache[resolved].exports;
+      var src = FILES[resolved];
+      if (src === undefined) throw new Error('Module not found: ' + resolved);
+      var mod = { exports: {} };
+      moduleCache[resolved] = mod;
+      var fn = new Function('require', 'module', 'exports', src);
+      fn(makeRequire(resolved), mod, mod.exports);
+      return mod.exports;
+    };
+  }
+
+  var bootErrorMessage = null;
+
+  function bootRenderer() {
+    moduleCache = {};
+    bootErrorMessage = null;
+    var entrypoint = __ENTRYPOINT_JSON__;
+    try {
+      var main = makeRequire(entrypoint)(entrypoint);
+      window.__render = main.render || (main.default && main.default.render);
+    } catch (bootErr) {
+      window.__render = null;
+      bootErrorMessage = String((bootErr && bootErr.stack) || bootErr);
+    }
+  }
+
+  window.addEventListener('message', function(event) {
+    var msg = event.data;
+    if (!msg || typeof msg.type !== 'string') return;
+
+    if (msg.type === 'LANGSMITH_THEME') {
+      document.getElementById('ls-theme').textContent = msg.cssText;
+      themeReady = true;
+      maybeRender();
+    }
+    if (msg.type === 'LANGSMITH_METADATA') {
+      // Load-bearing: the host can't set html.dark on this no-same-origin
+      // sandbox, so we do it here from this message.
+      currentMetadata = msg.metadata;
+      document.documentElement.classList.toggle('dark', currentMetadata && currentMetadata.mode === 'dark');
+      maybeRender();
+    }
+    if (msg.type === 'LANGSMITH_DATA') {
+      if (JSON.stringify(msg.payload) !== JSON.stringify(currentData)) {
+        currentData = msg.payload;
+        maybeRender();
+      }
+    }
+  });
+
+  // First render needs theme, metadata, and data all present; after that,
+  // any of the three changing re-renders.
+  function maybeRender() {
+    if (themeReady && currentMetadata !== null && currentData !== null) renderApp();
+  }
+
+  function renderApp() {
+    var root = document.getElementById('root');
+    if (bootErrorMessage) {
+      root.innerHTML =
+        '<div style="background:#fef2f2;border:1px solid #fda29b;border-radius:8px;padding:12px;margin:16px;color:#b91c1c;font-size:13px;white-space:pre-wrap;">' +
+        '<strong>Boot error:</strong><br>' + escapeHtml(bootErrorMessage) + '</div>';
+      reportHeight();
+      return;
+    }
+    if (typeof window.__render !== 'function') {
+      root.innerHTML = '<div style="padding:16px;color:#94a3b8;font-style:italic;font-size:13px;">Renderer not ready.</div>';
+      reportHeight();
+      return;
+    }
+    try {
+      window.__render(currentData, root, currentMetadata);
+    } catch (err) {
+      root.innerHTML =
+        '<div style="background:#fef2f2;border:1px solid #fda29b;border-radius:8px;padding:12px;margin:16px;color:#b91c1c;font-size:13px;">' +
+        '<strong>Renderer error:</strong><br>' + escapeHtml(String(err.message ?? err)) + '</div>';
+    }
+    reportHeight();
+  }
+
+  function reportHeight() {
+    window.parent.postMessage({ type: 'LANGSMITH_HEIGHT', height: document.documentElement.scrollHeight }, '*');
+  }
+
+  function escapeHtml(str) {
+    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  if (window.ResizeObserver) {
+    new ResizeObserver(reportHeight).observe(document.body);
+  }
+
+  function call(operation, args) {
+    return new Promise(function(resolve, reject) {
+      var callId = 'ls_' + String(Date.now()) + '_' + String((Math.random() * 1e9) | 0);
+      function handler(e) {
+        if (!e.data || e.data.type !== 'LS_API_RESPONSE' || e.data.callId !== callId) return;
+        window.removeEventListener('message', handler);
+        clearTimeout(timer);
+        if (e.data.error) reject(new Error(e.data.error)); else resolve(e.data.result);
+      }
+      window.addEventListener('message', handler);
+      var timer = setTimeout(function() {
+        window.removeEventListener('message', handler);
+        reject(new Error('LangSmith API call timed out'));
+      }, 10000);
+      window.parent.postMessage({ type: 'LS_API', operation: operation, callId: callId, args: args || {} }, '*');
+    });
+  }
+
+  function setData(patch) {
+    window.parent.postMessage({ type: 'LS_MUTATION', patch: patch }, '*');
+    reportHeight();
+  }
+
+  window.langsmith = {
+    call: call,
+    setData: setData,
+    feedback: {
+      create: function(args) { return call('POST /api/v1/feedback', { body: args }); }
+    }
+  };
+
+  bootRenderer();
+  window.parent.postMessage({ type: 'LANGSMITH_READY' }, '*');
+})();
+</script>
+</body>
+</html>`
diff --git a/internal/cmd/apps_dev_test.go b/internal/cmd/apps_dev_test.go
new file mode 100644
index 0000000..54f6f83
--- /dev/null
+++ b/internal/cmd/apps_dev_test.go
@@ -0,0 +1,570 @@
+package cmd
+
+import (
+	"context"
+	"encoding/json"
+	"io"
+	"net/http"
+	"net/http/httptest"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+	"time"
+)
+
+func TestAppsDevCmd_Flags(t *testing.T) {
+	cmd := newAppsCmd()
+	dev, _, err := cmd.Find([]string{"dev"})
+	if err != nil {
+		t.Fatalf("find dev command: %v", err)
+	}
+	// --queue-id is gone: apps are uniform now and the sandbox always gets {}.
+	for _, gone := range []string{"url", "web-url", "data", "queue-id"} {
+		if f := dev.Flags().Lookup(gone); f != nil {
+			t.Errorf("expected --%s flag to be gone from apps dev", gone)
+		}
+	}
+	if f := dev.Flags().Lookup("entrypoint"); f == nil || f.DefValue != "dist/bundle.js" {
+		t.Errorf("expected --entrypoint flag defaulting to dist/bundle.js, got %+v", f)
+	}
+	if f := dev.Flags().Lookup("no-open"); f == nil {
+		t.Error("expected --no-open flag to exist")
+	}
+	if f := dev.Flags().Lookup("no-watch"); f == nil {
+		t.Error("expected --no-watch flag to exist")
+	}
+}
+
+func seedDevApp(t *testing.T, dir, entrypointContent string) string {
+	t.Helper()
+	if err := os.MkdirAll(filepath.Join(dir, "dist"), 0o755); err != nil {
+		t.Fatalf("mkdir dist: %v", err)
+	}
+	entrypointAbs := filepath.Join(dir, "dist", "bundle.js")
+	if err := os.WriteFile(entrypointAbs, []byte(entrypointContent), 0o644); err != nil {
+		t.Fatalf("seed bundle.js: %v", err)
+	}
+	return entrypointAbs
+}
+
+func TestPrepareAppsDevServer_ServesRealSandboxedIframe(t *testing.T) {
+	dir := t.TempDir()
+	entrypointAbs := seedDevApp(t, dir, "module.exports = { render: function(d, r) { r.textContent = 'v1'; } }")
+	if err := os.WriteFile(filepath.Join(dir, ".env"), []byte("SUPER_SECRET_VALUE"), 0o644); err != nil {
+		t.Fatalf("seed .env: %v", err)
+	}
+
+	srv, ln, previewURL, err := prepareAppsDevServer(dir, "dist/bundle.js")
+	if err != nil {
+		t.Fatalf("prepareAppsDevServer: %v", err)
+	}
+	go func() { _ = srv.Serve(ln) }()
+	defer func() { _ = srv.Close() }()
+
+	resp, err := http.Get(previewURL)
+	if err != nil {
+		t.Fatalf("GET %s: %v", previewURL, err)
+	}
+	defer func() { _ = resp.Body.Close() }()
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.Fatalf("read body: %v", err)
+	}
+	page := string(body)
+
+	if !strings.Contains(page, `sandbox="allow-scripts"`) {
+		t.Errorf("expected a real sandbox=\"allow-scripts\" iframe:\n%s", page)
+	}
+	if strings.Contains(page, `sandbox="allow-scripts allow-same-origin"`) ||
+		strings.Contains(page, `sandbox="allow-same-origin allow-scripts"`) {
+		t.Errorf("must never grant allow-same-origin — that defeats the sandbox:\n%s", page)
+	}
+	if !strings.Contains(page, "v1") {
+		t.Errorf("expected entrypoint content to be embedded in the sandboxed srcdoc:\n%s", page)
+	}
+	if strings.Contains(page, "SUPER_SECRET_VALUE") {
+		t.Errorf(".env content leaked into the served page:\n%s", page)
+	}
+
+	// Rewriting the entrypoint must be reflected on the next request.
+	if err := os.WriteFile(entrypointAbs, []byte("module.exports = { render: function(d, r) { r.textContent = 'v2'; } }"), 0o644); err != nil {
+		t.Fatalf("rewrite bundle.js: %v", err)
+	}
+	resp2, err := http.Get(previewURL)
+	if err != nil {
+		t.Fatalf("GET %s (2nd): %v", previewURL, err)
+	}
+	defer func() { _ = resp2.Body.Close() }()
+	body2, _ := io.ReadAll(resp2.Body)
+	if !strings.Contains(string(body2), "v2") {
+		t.Error("expected rewritten entrypoint content to be reflected on next request")
+	}
+}
+
+// A regression test for a real bug: renderApp() used to unconditionally do
+// `root.innerHTML = ”` before calling window.__render(currentData, root).
+// The entrypoint caches its React root across calls (`if (!root) root =
+// createRoot(rootEl)`) specifically so repeat renders (e.g. a theme toggle
+// re-posting LANGSMITH_METADATA) reconcile against the same tree. Wiping the
+// DOM out from under React between calls corrupts that reconciliation —
+// harmless on the very first render (the container starts empty anyway), but
+// the app renders blank on every render after that.
+func TestPrepareAppsDevServer_DoesNotClearRootBeforeSuccessfulRender(t *testing.T) {
+	dir := t.TempDir()
+	seedDevApp(t, dir, "module.exports = { render: function(d, r) { r.textContent = 'ok'; } }")
+
+	srv, ln, previewURL, err := prepareAppsDevServer(dir, "dist/bundle.js")
+	if err != nil {
+		t.Fatalf("prepareAppsDevServer: %v", err)
+	}
+	go func() { _ = srv.Serve(ln) }()
+	defer func() { _ = srv.Close() }()
+
+	resp, err := http.Get(previewURL)
+	if err != nil {
+		t.Fatalf("GET %s: %v", previewURL, err)
+	}
+	defer func() { _ = resp.Body.Close() }()
+	body, err := io.ReadAll(resp.Body)
+	if err != nil {
+		t.Fatalf("read body: %v", err)
+	}
+	page := string(body)
+
+	if strings.Contains(page, "root.innerHTML = '';") {
+		t.Errorf("renderApp() must not unconditionally clear #root before calling window.__render — it corrupts the entrypoint's cached React root on every render after the first:\n%s", page)
+	}
+}
+
+// The config toolbar (and its Light/Dark mode toggle) renders for every app.
+func TestPrepareAppsDevServer_ServesModeToggle(t *testing.T) {
+	dir := t.TempDir()
+	seedDevApp(t, dir, "module.exports = { render: function(){} }")
+
+	srv, ln, previewURL, err := prepareAppsDevServer(dir, "dist/bundle.js")
+	if err != nil {
+		t.Fatalf("prepareAppsDevServer: %v", err)
+	}
+	go func() { _ = srv.Serve(ln) }()
+	defer func() { _ = srv.Close() }()
+
+	resp, err := http.Get(previewURL)
+	if err != nil {
+		t.Fatalf("GET %s: %v", previewURL, err)
+	}
+	defer func() { _ = resp.Body.Close() }()
+	body, _ := io.ReadAll(resp.Body)
+	page := string(body)
+
+	if !strings.Contains(page, `id="ls-dev-mode-light"`) || !strings.Contains(page, `id="ls-dev-mode-dark"`) {
+		t.Errorf("every app should get always-visible Light/Dark buttons:\n%s", page)
+	}
+	// The queue selector is gone entirely now.
+	if strings.Contains(page, `id="ls-dev-queue-select"`) {
+		t.Errorf("the queue selector should no longer be served:\n%s", page)
+	}
+	// On READY the host posts LANGSMITH_METADATA, and the toggle re-posts it.
+	if !strings.Contains(page, "LANGSMITH_METADATA") {
+		t.Errorf("expected the host page to post LANGSMITH_METADATA:\n%s", page)
+	}
+	// The served page embeds the sandbox srcdoc; the 3-arg render call has no
+	// characters html.EscapeString would touch, so it appears verbatim.
+	if !strings.Contains(page, "window.__render(currentData, root, currentMetadata)") {
+		t.Errorf("expected the sandbox srcdoc to call render with (data, root, metadata):\n%s", page)
+	}
+}
+
+// The sandbox side must implement the pinned theme/metadata contract: handle
+// LANGSMITH_METADATA, set html.dark from mode, and pass metadata as render's
+// 3rd arg. Asserting on the template constant avoids fighting the HTML-escaping
+// the srcdoc goes through when embedded in the host page.
+func TestSandboxImplementsThemeMetadataContract(t *testing.T) {
+	for _, want := range []string{
+		"LANGSMITH_METADATA",
+		"currentMetadata = msg.metadata",
+		"classList.toggle('dark', currentMetadata && currentMetadata.mode === 'dark')",
+		"window.__render(currentData, root, currentMetadata)",
+		// First render gates on all three of theme, metadata, and data.
+		"themeReady && currentMetadata !== null && currentData !== null",
+	} {
+		if !strings.Contains(sandboxInnerHTMLTemplate, want) {
+			t.Errorf("sandboxInnerHTMLTemplate missing %q", want)
+		}
+	}
+}
+
+func TestPrepareAppsDevServer_ServesWaitingPageWhenEntrypointMissing(t *testing.T) {
+	dir := t.TempDir()
+	srv, ln, previewURL, err := prepareAppsDevServer(dir, "dist/bundle.js")
+	if err != nil {
+		t.Fatalf("prepareAppsDevServer: %v", err)
+	}
+	go func() { _ = srv.Serve(ln) }()
+	defer func() { _ = srv.Close() }()
+
+	resp, err := http.Get(previewURL)
+	if err != nil {
+		t.Fatalf("GET %s: %v", previewURL, err)
+	}
+	defer func() { _ = resp.Body.Close() }()
+	if resp.StatusCode != http.StatusOK {
+		t.Errorf("expected 200 (a friendly waiting page, not an error status), got %d", resp.StatusCode)
+	}
+	body, _ := io.ReadAll(resp.Body)
+	if !strings.Contains(string(body), "/__ls_dev/mtime") {
+		t.Error("expected the waiting page to poll for the entrypoint appearing")
+	}
+}
+
+func TestPrepareAppsDevServer_MtimeReflectsFileState(t *testing.T) {
+	dir := t.TempDir()
+	srv, ln, previewURL, err := prepareAppsDevServer(dir, "dist/bundle.js")
+	if err != nil {
+		t.Fatalf("prepareAppsDevServer: %v", err)
+	}
+	go func() { _ = srv.Serve(ln) }()
+	defer func() { _ = srv.Close() }()
+
+	mtimeURL := strings.TrimSuffix(previewURL, "/") + "/__ls_dev/mtime"
+	get := func() (bool, int64) {
+		resp, err := http.Get(mtimeURL)
+		if err != nil {
+			t.Fatalf("GET %s: %v", mtimeURL, err)
+		}
+		defer func() { _ = resp.Body.Close() }()
+		var body struct {
+			Exists bool  `json:"exists"`
+			MTime  int64 `json:"mtime"`
+		}
+		if err := json.NewDecoder(resp.Body).Decode(&body); err != nil {
+			t.Fatalf("decode: %v", err)
+		}
+		return body.Exists, body.MTime
+	}
+
+	if exists, _ := get(); exists {
+		t.Error("expected exists=false before the entrypoint is built")
+	}
+
+	seedDevApp(t, dir, "module.exports = { render: function(){} }")
+	exists, mtime := get()
+	if !exists || mtime == 0 {
+		t.Errorf("expected exists=true and nonzero mtime once built, got exists=%v mtime=%d", exists, mtime)
+	}
+}
+
+func TestHandleLsDevCall_ForwardsOperationToRealClient(t *testing.T) {
+	var sawMethod, sawPath, sawBody string
+	upstream := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		sawMethod = r.Method
+		sawPath = r.URL.Path + "?" + r.URL.RawQuery
+		b, _ := io.ReadAll(r.Body)
+		sawBody = string(b)
+		w.Header().Set("Content-Type", "application/json")
+		w.WriteHeader(http.StatusCreated)
+		_, _ = w.Write([]byte(`{"id": "fb_1"}`))
+	})
+	defer setupTestEnv(t, upstream.URL)()
+
+	reqBody := `{"operation":"POST /api/v1/feedback","args":{"body":{"key":"correctness","score":1}}}`
+	req := httptest.NewRequest(http.MethodPost, "/__ls_dev/call", strings.NewReader(reqBody))
+	rec := httptest.NewRecorder()
+	handleLsDevCall(rec, req)
+
+	if rec.Code != http.StatusCreated {
+		t.Fatalf("expected 201 passed through, got %d: %s", rec.Code, rec.Body.String())
+	}
+	if !strings.Contains(rec.Body.String(), `"fb_1"`) {
+		t.Errorf("expected upstream response body passed through, got %s", rec.Body.String())
+	}
+	if sawMethod != "POST" {
+		t.Errorf("expected upstream POST, got %s", sawMethod)
+	}
+	if !strings.HasPrefix(sawPath, "/api/v1/feedback") {
+		t.Errorf("expected upstream path /api/v1/feedback, got %s", sawPath)
+	}
+	if !strings.Contains(sawBody, `"correctness"`) {
+		t.Errorf("expected request body forwarded, got %s", sawBody)
+	}
+}
+
+func TestHandleLsDevCall_ForwardsParamsAsQueryString(t *testing.T) {
+	var sawQuery string
+	upstream := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		sawQuery = r.URL.RawQuery
+		w.Header().Set("Content-Type", "application/json")
+		_, _ = w.Write([]byte(`[]`))
+	})
+	defer setupTestEnv(t, upstream.URL)()
+
+	reqBody := `{"operation":"GET /api/v1/annotation-queues/q1/runs","args":{"params":{"status":"needs_my_review"}}}`
+	req := httptest.NewRequest(http.MethodPost, "/__ls_dev/call", strings.NewReader(reqBody))
+	rec := httptest.NewRecorder()
+	handleLsDevCall(rec, req)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", rec.Code, rec.Body.String())
+	}
+	if sawQuery != "status=needs_my_review" {
+		t.Errorf("expected query string forwarded, got %q", sawQuery)
+	}
+}
+
+func TestHandleLsDevCall_RejectsMalformedOperation(t *testing.T) {
+	req := httptest.NewRequest(http.MethodPost, "/__ls_dev/call", strings.NewReader(`{"operation":"nospacehere"}`))
+	rec := httptest.NewRecorder()
+	handleLsDevCall(rec, req)
+	if rec.Code != http.StatusBadRequest {
+		t.Errorf("expected 400 for malformed operation, got %d", rec.Code)
+	}
+}
+
+func TestHandleLsDevCall_RejectsDisallowedMethod(t *testing.T) {
+	req := httptest.NewRequest(http.MethodPost, "/__ls_dev/call", strings.NewReader(`{"operation":"TRACE /api/v1/runs"}`))
+	rec := httptest.NewRecorder()
+	handleLsDevCall(rec, req)
+	if rec.Code != http.StatusBadRequest {
+		t.Errorf("expected 400 for disallowed method, got %d", rec.Code)
+	}
+}
+
+func TestHandleLsDevCall_RejectsPathEscapingOrigin(t *testing.T) {
+	for _, op := range []string{
+		"GET https://evil.example.com/steal",
+		"GET //evil.example.com/steal",
+		"GET not-a-path",
+	} {
+		req := httptest.NewRequest(http.MethodPost, "/__ls_dev/call", strings.NewReader(`{"operation":"`+op+`"}`))
+		rec := httptest.NewRecorder()
+		handleLsDevCall(rec, req)
+		if rec.Code != http.StatusBadRequest {
+			t.Errorf("operation %q: expected 400, got %d", op, rec.Code)
+		}
+	}
+}
+
+func writeFile(t *testing.T, dir, name, content string) {
+	t.Helper()
+	if err := os.WriteFile(filepath.Join(dir, name), []byte(content), 0o644); err != nil {
+		t.Fatalf("write %s: %v", name, err)
+	}
+}
+
+func TestPackageJSONScript_NoPackageJSON(t *testing.T) {
+	dir := t.TempDir()
+	script, exists, err := packageJSONScript(dir, "watch")
+	if err != nil || exists || script != "" {
+		t.Errorf("got script=%q exists=%v err=%v, want \"\", false, nil", script, exists, err)
+	}
+}
+
+func TestPackageJSONScript_ExistsWithoutTheScript(t *testing.T) {
+	dir := t.TempDir()
+	writeFile(t, dir, "package.json", `{"scripts":{"build":"vite build"}}`)
+	script, exists, err := packageJSONScript(dir, "watch")
+	if err != nil || !exists || script != "" {
+		t.Errorf("got script=%q exists=%v err=%v, want \"\", true, nil", script, exists, err)
+	}
+}
+
+func TestPackageJSONScript_ReturnsTheScript(t *testing.T) {
+	dir := t.TempDir()
+	writeFile(t, dir, "package.json", `{"scripts":{"watch":"vite build --watch"}}`)
+	script, exists, err := packageJSONScript(dir, "watch")
+	if err != nil || !exists || script != "vite build --watch" {
+		t.Errorf("got script=%q exists=%v err=%v, want \"vite build --watch\", true, nil", script, exists, err)
+	}
+}
+
+func TestPackageJSONScript_MalformedJSON(t *testing.T) {
+	dir := t.TempDir()
+	writeFile(t, dir, "package.json", `{not json`)
+	if _, _, err := packageJSONScript(dir, "watch"); err == nil {
+		t.Error("expected an error for malformed package.json")
+	}
+}
+
+// fakeNpmOnPath puts a fake "npm" script on PATH (for the duration of the
+// test) that touches markerPath and then blocks, so tests can assert
+// startWatchProcess actually launched "npm run watch" without depending on
+// npm or a real bundler being installed in the test environment.
+func fakeNpmOnPath(t *testing.T, markerPath string) {
+	t.Helper()
+	fakeNpmDir := t.TempDir()
+	script := "#!/bin/sh\ntouch \"" + markerPath + "\"\nwhile true; do sleep 0.1; done\n"
+	if err := os.WriteFile(filepath.Join(fakeNpmDir, "npm"), []byte(script), 0o755); err != nil {
+		t.Fatalf("write fake npm: %v", err)
+	}
+	t.Setenv("PATH", fakeNpmDir+string(os.PathListSeparator)+os.Getenv("PATH"))
+}
+
+func TestStartWatchProcess_SpawnsWatchScriptAndIsKilledOnContextCancel(t *testing.T) {
+	dir := t.TempDir()
+	writeFile(t, dir, "package.json", `{"scripts":{"watch":"anything"}}`)
+	marker := filepath.Join(dir, "watch-ran.marker")
+	fakeNpmOnPath(t, marker)
+
+	ctx, cancel := context.WithCancel(context.Background())
+	if started := startWatchProcess(ctx, dir); !started {
+		t.Fatal("expected startWatchProcess to report started=true")
+	}
+
+	deadline := time.Now().Add(5 * time.Second)
+	for {
+		if _, err := os.Stat(marker); err == nil {
+			break
+		}
+		if time.Now().After(deadline) {
+			t.Fatal("watch script never ran (marker file not created)")
+		}
+		time.Sleep(20 * time.Millisecond)
+	}
+
+	// Cancelling ctx should kill the long-running fake npm process rather
+	// than leaving it (and the test process) hanging.
+	cancel()
+	time.Sleep(200 * time.Millisecond)
+}
+
+func TestStartWatchProcess_NoWatchScriptDoesNotSpawn(t *testing.T) {
+	dir := t.TempDir()
+	writeFile(t, dir, "package.json", `{"scripts":{"build":"vite build"}}`)
+	marker := filepath.Join(dir, "watch-ran.marker")
+	fakeNpmOnPath(t, marker)
+
+	if started := startWatchProcess(context.Background(), dir); started {
+		t.Error("expected started=false when package.json has no \"watch\" script")
+	}
+	time.Sleep(100 * time.Millisecond)
+
+	if _, err := os.Stat(marker); err == nil {
+		t.Error("expected no process to be spawned when package.json has no \"watch\" script")
+	}
+}
+
+func TestStartWatchProcess_NoPackageJSONDoesNotSpawn(t *testing.T) {
+	dir := t.TempDir()
+	marker := filepath.Join(dir, "watch-ran.marker")
+	fakeNpmOnPath(t, marker)
+
+	if started := startWatchProcess(context.Background(), dir); started {
+		t.Error("expected started=false when there's no package.json")
+	}
+	time.Sleep(100 * time.Millisecond)
+
+	if _, err := os.Stat(marker); err == nil {
+		t.Error("expected no process to be spawned when there's no package.json")
+	}
+}
+
+func TestWaitForFreshEntrypoint_ReturnsOnceFileFirstAppears(t *testing.T) {
+	dir := t.TempDir()
+	path := filepath.Join(dir, "dist", "bundle.js")
+	if err := os.MkdirAll(filepath.Dir(path), 0o755); err != nil {
+		t.Fatalf("mkdir: %v", err)
+	}
+
+	go func() {
+		time.Sleep(150 * time.Millisecond)
+		_ = os.WriteFile(path, []byte("v1"), 0o644)
+	}()
+
+	start := time.Now()
+	waitForFreshEntrypoint(context.Background(), path, time.Time{}, 5*time.Second)
+	if elapsed := time.Since(start); elapsed < 100*time.Millisecond {
+		t.Errorf("returned too early (%v) — should have waited for the file to appear", elapsed)
+	}
+	if _, err := os.Stat(path); err != nil {
+		t.Error("expected the file to exist once waitForFreshEntrypoint returns")
+	}
+}
+
+func TestWaitForFreshEntrypoint_WaitsForNewerMTimeThanPrevBuild(t *testing.T) {
+	dir := t.TempDir()
+	path := filepath.Join(dir, "dist", "bundle.js")
+	if err := os.MkdirAll(filepath.Dir(path), 0o755); err != nil {
+		t.Fatalf("mkdir: %v", err)
+	}
+	if err := os.WriteFile(path, []byte("stale"), 0o644); err != nil {
+		t.Fatalf("seed stale build: %v", err)
+	}
+	staleInfo, err := os.Stat(path)
+	if err != nil {
+		t.Fatalf("stat: %v", err)
+	}
+	prevBuildTime := staleInfo.ModTime()
+
+	// Simulate the watch tool's "empty outDir, then rebuild" sequence: the
+	// file briefly disappears, then reappears with a newer mtime.
+	go func() {
+		time.Sleep(50 * time.Millisecond)
+		_ = os.Remove(path)
+		time.Sleep(100 * time.Millisecond)
+		_ = os.WriteFile(path, []byte("fresh"), 0o644)
+	}()
+
+	done := make(chan struct{})
+	go func() {
+		waitForFreshEntrypoint(context.Background(), path, prevBuildTime, 5*time.Second)
+		close(done)
+	}()
+
+	select {
+	case <-done:
+	case <-time.After(3 * time.Second):
+		t.Fatal("waitForFreshEntrypoint did not return once a fresh build appeared")
+	}
+
+	info, err := os.Stat(path)
+	if err != nil || !info.ModTime().After(prevBuildTime) {
+		t.Error("expected the entrypoint's mtime to be newer than prevBuildTime once returned")
+	}
+}
+
+func TestWaitForFreshEntrypoint_GivesUpAfterTimeout(t *testing.T) {
+	dir := t.TempDir()
+	path := filepath.Join(dir, "dist", "bundle.js") // never created
+
+	start := time.Now()
+	waitForFreshEntrypoint(context.Background(), path, time.Time{}, 200*time.Millisecond)
+	if elapsed := time.Since(start); elapsed > 2*time.Second {
+		t.Errorf("expected to give up close to the timeout, took %v", elapsed)
+	}
+}
+
+func TestWaitForFreshEntrypoint_ReturnsOnContextCancel(t *testing.T) {
+	dir := t.TempDir()
+	path := filepath.Join(dir, "dist", "bundle.js") // never created
+	ctx, cancel := context.WithCancel(context.Background())
+	cancel()
+
+	start := time.Now()
+	waitForFreshEntrypoint(ctx, path, time.Time{}, 5*time.Second)
+	if elapsed := time.Since(start); elapsed > 1*time.Second {
+		t.Errorf("expected an already-cancelled context to return immediately, took %v", elapsed)
+	}
+}
+
+func TestRunAppsDev_ExitsOnContextCancel(t *testing.T) {
+	dir := t.TempDir()
+	seedDevApp(t, dir, "hi")
+
+	ctx, cancel := context.WithCancel(context.Background())
+	errCh := make(chan error, 1)
+	go func() {
+		errCh <- runAppsDev(ctx, dir, "dist/bundle.js", true, true)
+	}()
+
+	time.Sleep(100 * time.Millisecond)
+	cancel()
+
+	select {
+	case err := <-errCh:
+		if err != nil {
+			t.Errorf("runAppsDev returned error: %v", err)
+		}
+	case <-time.After(5 * time.Second):
+		t.Error("runAppsDev did not exit after context cancel")
+	}
+}
diff --git a/internal/cmd/apps_init.go b/internal/cmd/apps_init.go
new file mode 100644
index 0000000..a5e8f50
--- /dev/null
+++ b/internal/cmd/apps_init.go
@@ -0,0 +1,482 @@
+package cmd
+
+import (
+	"embed"
+	"fmt"
+	"io/fs"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"sort"
+	"strings"
+	"text/template"
+
+	"github.com/langchain-ai/langsmith-cli/internal/output"
+	"github.com/spf13/cobra"
+)
+
+// The all: prefix makes embed.FS include dotfiles (.gitignore) and _-prefixed
+// files; plain embed drops any path segment starting with "." or "_".
+//
+//go:embed all:templates/blank
+var blankStarterFS embed.FS
+
+//go:embed all:templates/annotation-queue
+var annotationQueueStarterFS embed.FS
+
+//go:embed all:templates/annotation-queue-grid
+var annotationQueueGridStarterFS embed.FS
+
+//go:embed all:templates/coding-agent-dashboard
+var codingAgentDashboardStarterFS embed.FS
+
+//go:embed all:templates/experiment-comparison
+var experimentComparisonStarterFS embed.FS
+
+//go:embed all:templates/agents-md
+var agentsMDFS embed.FS
+
+// Canonical copies of small files reused across templates (SearchableSelect,
+// Spinner, the cn() helper, ...). Templates don't carry their own copies —
+// scaffoldCustomAppStarter infers which ones a given template needs by
+// scanning its own source for the import statements that would reference
+// them (see sharedFilesUsedBy), so there's no per-template list to maintain.
+// This keeps the *source* single-copy while every scaffolded app still ends
+// up with its own real, standalone file — nothing in the generated output
+// depends on this repo or on other templates at runtime.
+//
+//go:embed all:templates/_shared
+var sharedFS embed.FS
+
+const sharedRoot = "templates/_shared"
+
+// appType is one --template choice: which starter to scaffold and which
+// AGENTS.md ships with it. Map key = the --template value.
+type appType struct {
+	templateFS   embed.FS
+	templateRoot string
+	agentsMD     string // template-specific AGENTS.md fragment; "" = none (generic base only)
+}
+
+var appTypes = map[string]appType{
+	"blank": {
+		templateFS:   blankStarterFS,
+		templateRoot: "templates/blank",
+		agentsMD:     "",
+	},
+	"annotation-queue": {
+		templateFS:   annotationQueueStarterFS,
+		templateRoot: "templates/annotation-queue",
+		agentsMD:     "annotation_queue",
+	},
+	"annotation-queue-grid": {
+		templateFS:   annotationQueueGridStarterFS,
+		templateRoot: "templates/annotation-queue-grid",
+		agentsMD:     "annotation_queue_grid",
+	},
+	"coding-agent-dashboard": {
+		templateFS:   codingAgentDashboardStarterFS,
+		templateRoot: "templates/coding-agent-dashboard",
+		agentsMD:     "coding_agent_dashboard",
+	},
+	"experiment-comparison": {
+		templateFS:   experimentComparisonStarterFS,
+		templateRoot: "templates/experiment-comparison",
+		agentsMD:     "experiment_comparison",
+	},
+}
+
+// appTypeNames returns the valid --template values, sorted, keeping error
+// text and help in sync with the map.
+func appTypeNames() []string {
+	names := make([]string, 0, len(appTypes))
+	for name := range appTypes {
+		if name == "blank" {
+			continue
+		}
+		names = append(names, name)
+	}
+	sort.Strings(names)
+	return names
+}
+
+type customAppStarterVars struct {
+	Name        string
+	Description string
+}
+
+func newAppsInitCmd() *cobra.Command {
+	var (
+		name         string
+		description  string
+		templateFlag string
+		force        bool
+		skipInstall  bool
+	)
+
+	cmd := &cobra.Command{
+		Use:   "init --name NAME [--template annotation-queue|annotation-queue-grid|coding-agent-dashboard|experiment-comparison]",
+		Short: "Scaffold a starter custom app in the current directory",
+		Long: `Scaffold a starter custom app in the current directory.
+
+--template picks which starter gets scaffolded; omit it for a blank
+single-file starter. Every app is uploaded and rendered the same way
+regardless of choice.
+
+  annotation-queue   A real, working queue-review UI (run list,
+                     inputs/outputs viewer, feedback rubric, reviewer
+                     notes). It picks a queue itself and fetches everything
+                     from the LangSmith API.
+  annotation-queue-grid
+                     Same queue-review workflow as annotation-queue, but
+                     rendered as a spreadsheet: rows are queue runs, columns
+                     are rubric keys, cells edited inline, Done per row.
+  coding-agent-dashboard
+                     A charts dashboard over coding-agent runs: pick a
+                     project (or scan all projects), see integration/model
+                     share, token/cost/cache economics, tool and subagent
+                     usage, errors, activity over time, and per-thread
+                     breakdowns.
+  experiment-comparison
+                     Compare evaluation experiments: pick a dataset, a
+                     baseline, and comparisons; see aggregates and a
+                     per-example table colored vs the baseline.
+
+This also writes an AGENTS.md describing the LangSmith API
+surface available to this app, and a README explaining the bridge contract.
+This only writes local files — it does not create anything remotely. Run
+"langsmith apps push" once you're ready to upload it.
+
+By default this also runs "npm install" and "npm run build" in the new
+directory, so "langsmith apps dev" has a dist/bundle.js to serve right away
+instead of 404ing until you build it yourself. Pass --skip-install to just
+write the files. A failed install/build doesn't fail the command — it's a
+convenience, not a requirement — but you'll need to build manually before
+"apps dev" or "apps push" will work.`,
+		RunE: func(cmd *cobra.Command, args []string) error {
+			templateName := templateFlag
+			if templateName == "" {
+				templateName = "blank"
+			} else if templateName == "blank" {
+				return fmt.Errorf("--template must be one of: %s", strings.Join(appTypeNames(), ", "))
+			}
+			at, ok := appTypes[templateName]
+			if !ok {
+				return fmt.Errorf("--template must be one of: %s", strings.Join(appTypeNames(), ", "))
+			}
+			dir, err := os.Getwd()
+			if err != nil {
+				return fmt.Errorf("getting current directory: %w", err)
+			}
+			written, err := scaffoldCustomAppStarter(dir, name, description, at, force)
+			if err != nil {
+				return err
+			}
+			sort.Strings(written)
+
+			built := false
+			if !skipInstall {
+				if buildErr := installAndBuildCustomAppStarter(dir); buildErr != nil {
+					fmt.Fprintf(os.Stderr, "warning: automatic \"npm install && npm run build\" failed: %v\n(run those yourself — or \"npm run watch\" — before \"langsmith apps dev\"/\"apps push\")\n", buildErr)
+				} else {
+					built = true
+				}
+			}
+
+			output.OutputJSON(map[string]any{
+				"status":   "scaffolded",
+				"dir":      dir,
+				"name":     name,
+				"template": templateName,
+				"files":    written,
+				"built":    built,
+			}, "")
+			return nil
+		},
+	}
+
+	cmd.Flags().StringVar(&name, "name", "", "Name for the app, written into package.json/README (required)")
+	cmd.Flags().StringVar(&description, "description", "", "One-line description written into README.md")
+	cmd.Flags().StringVar(&templateFlag, "template", "", "Starter template: "+strings.Join(appTypeNames(), ", ")+" (omit for a blank starter)")
+	cmd.Flags().BoolVar(&force, "force", false, "Write even if the current directory is non-empty")
+	cmd.Flags().BoolVar(&skipInstall, "skip-install", false, "Skip running \"npm install && npm run build\" after scaffolding")
+	_ = cmd.MarkFlagRequired("name")
+	return cmd
+}
+
+// installAndBuildCustomAppStarter runs "npm install" then "npm run build" in
+// dir, so a freshly scaffolded app has a dist/bundle.js immediately instead
+// of only after the user remembers to build it themselves.
+func installAndBuildCustomAppStarter(dir string) error {
+	if _, err := exec.LookPath("npm"); err != nil {
+		return fmt.Errorf("npm not found on PATH")
+	}
+	if err := runInDir(dir, "npm", "install"); err != nil {
+		return fmt.Errorf("npm install: %w", err)
+	}
+	if err := runInDir(dir, "npm", "run", "build"); err != nil {
+		return fmt.Errorf("npm run build: %w", err)
+	}
+	return nil
+}
+
+func runInDir(dir, name string, args ...string) error {
+	c := exec.Command(name, args...)
+	c.Dir = dir
+	c.Stdout = os.Stderr
+	c.Stderr = os.Stderr
+	return c.Run()
+}
+
+func scaffoldCustomAppStarter(dir, name, description string, at appType, force bool) ([]string, error) {
+	if name == "" {
+		return nil, fmt.Errorf("--name is required")
+	}
+	if at.templateRoot == "" {
+		return nil, fmt.Errorf("--template must be one of: %s", strings.Join(appTypeNames(), ", "))
+	}
+
+	if info, err := os.Stat(dir); err == nil {
+		if !info.IsDir() {
+			return nil, fmt.Errorf("%s exists and is not a directory", dir)
+		}
+		entries, err := os.ReadDir(dir)
+		if err != nil {
+			return nil, fmt.Errorf("reading %s: %w", dir, err)
+		}
+		if len(entries) > 0 && !force {
+			return nil, fmt.Errorf("%s is not empty; pass --force to write anyway", dir)
+		}
+	} else if !os.IsNotExist(err) {
+		return nil, fmt.Errorf("stat %s: %w", dir, err)
+	}
+
+	vars := customAppStarterVars{Name: name, Description: description}
+	if vars.Description == "" {
+		vars.Description = "TODO: one-sentence description of what this app does."
+	}
+
+	var written []string
+	err := fs.WalkDir(at.templateFS, at.templateRoot, func(path string, d fs.DirEntry, walkErr error) error {
+		if walkErr != nil {
+			return walkErr
+		}
+		rel := strings.TrimPrefix(path, at.templateRoot+"/")
+		if rel == at.templateRoot || d.IsDir() {
+			return nil
+		}
+
+		raw, err := at.templateFS.ReadFile(path)
+		if err != nil {
+			return fmt.Errorf("reading embedded template %s: %w", rel, err)
+		}
+
+		dest := filepath.Join(dir, rel)
+		if err := os.MkdirAll(filepath.Dir(dest), 0o755); err != nil {
+			return fmt.Errorf("creating directory for %s: %w", rel, err)
+		}
+
+		// Only README.md/package.json actually reference {{.Name}}/{{.Description}}.
+		// Running every file through text/template would also try to parse any
+		// literal "{{"/"}}" elsewhere as template actions — e.g. React's
+		// style={{...}} inline-style syntax — and fail. Copy everything else
+		// byte-for-byte.
+		if !templatedStarterFiles[rel] {
+			if err := os.WriteFile(dest, raw, 0o644); err != nil {
+				return fmt.Errorf("writing %s: %w", rel, err)
+			}
+			written = append(written, rel)
+			return nil
+		}
+
+		tmpl, err := template.New(rel).Parse(string(raw))
+		if err != nil {
+			return fmt.Errorf("parsing template %s: %w", rel, err)
+		}
+		f, err := os.Create(dest)
+		if err != nil {
+			return fmt.Errorf("creating %s: %w", rel, err)
+		}
+		defer f.Close()
+		if err := tmpl.Execute(f, vars); err != nil {
+			return fmt.Errorf("rendering %s: %w", rel, err)
+		}
+
+		written = append(written, rel)
+		return nil
+	})
+	if err != nil {
+		return nil, err
+	}
+
+	sharedWritten, err := writeUsedSharedFiles(dir, at)
+	if err != nil {
+		return nil, err
+	}
+	written = append(written, sharedWritten...)
+
+	agentsMD, err := assembleAgentsMD(at.agentsMD)
+	if err != nil {
+		return nil, err
+	}
+	if err := os.WriteFile(filepath.Join(dir, "AGENTS.md"), agentsMD, 0o644); err != nil {
+		return nil, fmt.Errorf("writing AGENTS.md: %w", err)
+	}
+	written = append(written, "AGENTS.md")
+
+	// Record the name now so a later push reuses it, not the directory basename.
+	if err := writeAppLink(dir, appLink{Name: name}); err != nil {
+		return nil, fmt.Errorf("writing .langsmith/app.json: %w", err)
+	}
+	written = append(written, filepath.Join(appsLinkDir, appsLinkFile))
+
+	return written, nil
+}
+
+// writeUsedSharedFiles copies whichever templates/_shared/ files this
+// template's own source actually imports into dir/src/, so the scaffolded
+// app ends up with a real, standalone file — the shared/ source stays the
+// only physical copy in this repo. "Actually imports" is determined by
+// scanning the template's own .ts/.tsx source for the relative-import
+// specifier a file at that shared path would be referenced by (see
+// sharedFileImportSpecifiers), not by a maintained per-template list.
+func writeUsedSharedFiles(dir string, at appType) ([]string, error) {
+	sharedPaths, err := allSharedFilePaths()
+	if err != nil {
+		return nil, err
+	}
+	if len(sharedPaths) == 0 {
+		return nil, nil
+	}
+
+	src, err := concatenatedTemplateSource(at)
+	if err != nil {
+		return nil, err
+	}
+
+	var written []string
+	for _, relPath := range sharedPaths {
+		used := false
+		for _, spec := range sharedFileImportSpecifiers(relPath) {
+			if strings.Contains(src, "'"+spec+"'") || strings.Contains(src, "\""+spec+"\"") {
+				used = true
+				break
+			}
+		}
+		if !used {
+			continue
+		}
+
+		raw, err := sharedFS.ReadFile(sharedRoot + "/" + relPath)
+		if err != nil {
+			return nil, fmt.Errorf("reading embedded shared file %s: %w", relPath, err)
+		}
+		destRel := filepath.Join("src", relPath)
+		dest := filepath.Join(dir, destRel)
+		if err := os.MkdirAll(filepath.Dir(dest), 0o755); err != nil {
+			return nil, fmt.Errorf("creating directory for %s: %w", destRel, err)
+		}
+		if err := os.WriteFile(dest, raw, 0o644); err != nil {
+			return nil, fmt.Errorf("writing %s: %w", destRel, err)
+		}
+		written = append(written, destRel)
+	}
+	return written, nil
+}
+
+// allSharedFilePaths lists every file under templates/_shared/, relative to
+// that root (e.g. "components/SearchableSelect.tsx", "lib/utils.ts").
+func allSharedFilePaths() ([]string, error) {
+	var paths []string
+	err := fs.WalkDir(sharedFS, sharedRoot, func(path string, d fs.DirEntry, walkErr error) error {
+		if walkErr != nil {
+			return walkErr
+		}
+		if d.IsDir() {
+			return nil
+		}
+		paths = append(paths, strings.TrimPrefix(path, sharedRoot+"/"))
+		return nil
+	})
+	if err != nil {
+		return nil, fmt.Errorf("walking embedded shared files: %w", err)
+	}
+	return paths, nil
+}
+
+// concatenatedTemplateSource returns every .ts/.tsx file in this template
+// concatenated together, for a simple substring scan — cheap and sufficient
+// at this repo's scale (a handful of small, flat template directories).
+func concatenatedTemplateSource(at appType) (string, error) {
+	var out strings.Builder
+	err := fs.WalkDir(at.templateFS, at.templateRoot, func(path string, d fs.DirEntry, walkErr error) error {
+		if walkErr != nil {
+			return walkErr
+		}
+		if d.IsDir() || !(strings.HasSuffix(path, ".ts") || strings.HasSuffix(path, ".tsx")) {
+			return nil
+		}
+		b, err := at.templateFS.ReadFile(path)
+		if err != nil {
+			return fmt.Errorf("reading %s: %w", path, err)
+		}
+		out.Write(b)
+		out.WriteByte('\n')
+		return nil
+	})
+	if err != nil {
+		return "", err
+	}
+	return out.String(), nil
+}
+
+// sharedFileImportSpecifiers returns the plausible relative-import
+// specifiers a template file could use to reference the shared file at
+// sharedRelPath (relative to templates/_shared/), depending on which
+// directory within the template's src/ the importing file lives in. Matches
+// this repo's template convention: everything lives directly under src/,
+// src/components/, or src/lib/, one level deep — e.g. a file at
+// "components/SearchableSelect.tsx" is imported as "./SearchableSelect" by
+// sibling files under src/components/, or "./components/SearchableSelect"
+// by a top-level file like src/App.tsx.
+func sharedFileImportSpecifiers(sharedRelPath string) []string {
+	base := strings.TrimSuffix(filepath.Base(sharedRelPath), filepath.Ext(sharedRelPath))
+	dir := filepath.Dir(sharedRelPath) // "components", "lib", or "." for a top-level shared file
+	specifiers := []string{"./" + base}
+	if dir != "." {
+		specifiers = append(specifiers,
+			"./"+dir+"/"+base, // top-level src/*.tsx importing src/<dir>/<base>
+			"../"+dir+"/"+base, // a different src/<other>/ file importing src/<dir>/<base>
+		)
+	}
+	return specifiers
+}
+
+var templatedStarterFiles = map[string]bool{
+	"README.md":    true,
+	"package.json": true,
+}
+
+// assembleAgentsMD builds an app's AGENTS.md from the generic base
+// (_common.md) with the template-specific fragment injected at the marker.
+// A blank template (agentsMD == "") yields the base alone.
+func assembleAgentsMD(agentsMD string) ([]byte, error) {
+	const marker = "<!-- TEMPLATE-SPECIFIC -->"
+	common, err := agentsMDFS.ReadFile("templates/agents-md/_common.md")
+	if err != nil {
+		return nil, fmt.Errorf("reading embedded _common.md: %w", err)
+	}
+	fragment := ""
+	if agentsMD != "" {
+		b, err := agentsMDFS.ReadFile("templates/agents-md/" + agentsMD + ".md")
+		if err != nil {
+			return nil, fmt.Errorf("reading embedded AGENTS.md fragment %q: %w", agentsMD, err)
+		}
+		fragment = strings.TrimSpace(string(b))
+	}
+	out := strings.Replace(string(common), marker, fragment, 1)
+	for strings.Contains(out, "\n\n\n") {
+		out = strings.ReplaceAll(out, "\n\n\n", "\n\n")
+	}
+	return []byte(strings.TrimSpace(out) + "\n"), nil
+}
diff --git a/internal/cmd/apps_init_test.go b/internal/cmd/apps_init_test.go
new file mode 100644
index 0000000..d71a9af
--- /dev/null
+++ b/internal/cmd/apps_init_test.go
@@ -0,0 +1,734 @@
+package cmd
+
+import (
+	"io/fs"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+)
+
+// "apps init" records the name in .langsmith/app.json so a later push reuses
+// it instead of the directory basename.
+func TestAppsInit_WritesPartialAppLinkForImmediateAppsDevUse(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	if _, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["annotation-queue"], false); err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	link, err := readAppLink(target)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil {
+		t.Fatal("expected apps init to write .langsmith/app.json immediately")
+	}
+	if link.AppID != "" {
+		t.Errorf("expected no app_id yet (app doesn't exist remotely until the first push), got %q", link.AppID)
+	}
+	if link.Name != "my-app" {
+		t.Errorf("expected --name to be recorded in the link file so a later \"apps push\" doesn't fall back to the directory basename, got %q", link.Name)
+	}
+}
+
+func TestAppsInit_BlankAlsoWritesPartialAppLink(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	if _, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["blank"], false); err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	link, err := readAppLink(target)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.Name != "my-app" || link.AppID != "" {
+		t.Errorf("expected a partial link recording the name with no app_id, got %+v", link)
+	}
+}
+
+// The grid variant scaffolds its own spreadsheet UI, not the 3-pane components.
+func TestAppsInit_ScaffoldsAnnotationQueueGridFiles(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["annotation-queue-grid"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, want := range []string{
+		"package.json",
+		"README.md",
+		"AGENTS.md",
+		".gitignore",
+		"vite.config.ts",
+		"tsconfig.json",
+		"src/entry.tsx",
+		"src/App.tsx",
+		"src/api.ts",
+		"src/types.ts",
+		"src/components/DataGrid.tsx",
+		"src/components/GridCell.tsx",
+	} {
+		if !writtenSet[want] {
+			t.Errorf("expected %q to be written, got %v", want, written)
+		}
+	}
+	// The grid variant must not carry the 3-pane app's components.
+	for _, unwanted := range []string{
+		"src/components/RunList.tsx",
+		"src/components/RunViewer.tsx",
+		"src/components/FeedbackPanel.tsx",
+	} {
+		if writtenSet[unwanted] {
+			t.Errorf("grid variant should not scaffold the 3-pane component %q", unwanted)
+		}
+	}
+
+	// A partial link is written recording the name (no app_id until push).
+	link, err := readAppLink(target)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.Name != "my-app" {
+		t.Errorf("expected a partial link recording the name, got %+v", link)
+	}
+}
+
+// The coding-agent dashboard is a standalone charts app; it scaffolds its own
+// components and gets its own AGENTS.md.
+func TestAppsInit_ScaffoldsCodingAgentDashboardFiles(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["coding-agent-dashboard"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, want := range []string{
+		"package.json",
+		"README.md",
+		"AGENTS.md",
+		".gitignore",
+		"vite.config.ts",
+		"tsconfig.json",
+		"src/entry.tsx",
+		"src/App.tsx",
+		"src/api.ts",
+		"src/types.ts",
+		"src/components/ProjectBar.tsx",
+		"src/components/OverviewPanel.tsx",
+		"src/components/RunsTable.tsx",
+	} {
+		if !writtenSet[want] {
+			t.Errorf("expected %q to be written, got %v", want, written)
+		}
+	}
+	// It must not carry the annotation-queue templates' components.
+	if writtenSet["src/components/QueueBar.tsx"] || writtenSet["src/components/DataGrid.tsx"] {
+		t.Error("coding-agent dashboard should not scaffold annotation-queue components")
+	}
+
+	agents, err := os.ReadFile(filepath.Join(target, "AGENTS.md"))
+	if err != nil {
+		t.Fatalf("read AGENTS.md: %v", err)
+	}
+	if !strings.Contains(string(agents), "ls_agent_purpose") || !strings.Contains(string(agents), "runs/query") {
+		t.Errorf("expected the coding-agent dashboard's AGENTS.md, got:\n%s", agents)
+	}
+}
+
+// The experiment-comparison dashboard is a standalone app with its own
+// components and AGENTS.md.
+func TestAppsInit_ScaffoldsExperimentComparisonFiles(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["experiment-comparison"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, want := range []string{
+		"package.json",
+		"README.md",
+		"AGENTS.md",
+		".gitignore",
+		"vite.config.ts",
+		"tsconfig.json",
+		"src/entry.tsx",
+		"src/App.tsx",
+		"src/api.ts",
+		"src/types.ts",
+		"src/lib/delta.ts",
+		"src/lib/metrics.ts",
+		"src/components/Pickers.tsx",
+		"src/components/SummaryPanel.tsx",
+		"src/components/ExampleTable.tsx",
+		"src/components/Scorecard.tsx",
+		"src/components/ScatterPlot.tsx",
+	} {
+		if !writtenSet[want] {
+			t.Errorf("expected %q to be written, got %v", want, written)
+		}
+	}
+	// It must not carry other templates' components.
+	if writtenSet["src/components/QueueBar.tsx"] || writtenSet["src/components/PieChart.tsx"] {
+		t.Error("experiment-comparison should not scaffold other templates' components")
+	}
+
+	agents, err := os.ReadFile(filepath.Join(target, "AGENTS.md"))
+	if err != nil {
+		t.Fatalf("read AGENTS.md: %v", err)
+	}
+	if !strings.Contains(string(agents), "datasets/{dataset_id}/runs") || !strings.Contains(string(agents), "delta.ts") {
+		t.Errorf("expected the experiment-comparison AGENTS.md, got:\n%s", agents)
+	}
+}
+
+// The two AQ templates must get distinct AGENTS.md files — guards the per-template agentsMD selection against regression.
+func TestAppsInit_GridGetsDistinctAgentsMD(t *testing.T) {
+	dir := t.TempDir()
+
+	gridTarget := filepath.Join(dir, "grid-app")
+	if _, err := scaffoldCustomAppStarter(gridTarget, "grid-app", "", appTypes["annotation-queue-grid"], false); err != nil {
+		t.Fatalf("scaffold grid: %v", err)
+	}
+	gridAgents, err := os.ReadFile(filepath.Join(gridTarget, "AGENTS.md"))
+	if err != nil {
+		t.Fatalf("read grid AGENTS.md: %v", err)
+	}
+	if !strings.Contains(string(gridAgents), "spreadsheet") || !strings.Contains(string(gridAgents), "DataGrid.tsx") {
+		t.Errorf("expected the grid-specific AGENTS.md, got:\n%s", gridAgents)
+	}
+
+	paneTarget := filepath.Join(dir, "pane-app")
+	if _, err := scaffoldCustomAppStarter(paneTarget, "pane-app", "", appTypes["annotation-queue"], false); err != nil {
+		t.Fatalf("scaffold 3-pane: %v", err)
+	}
+	paneAgents, err := os.ReadFile(filepath.Join(paneTarget, "AGENTS.md"))
+	if err != nil {
+		t.Fatalf("read 3-pane AGENTS.md: %v", err)
+	}
+	if string(gridAgents) == string(paneAgents) {
+		t.Error("expected the grid variant to get a different AGENTS.md than the 3-pane template")
+	}
+	if strings.Contains(string(paneAgents), "DataGrid.tsx") {
+		t.Error("the 3-pane AGENTS.md should not mention the grid's DataGrid component")
+	}
+}
+
+func TestAppsInit_ScaffoldsAnnotationQueueFiles(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "Does the thing", appTypes["annotation-queue"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, want := range []string{
+		"package.json",
+		"README.md",
+		"AGENTS.md",
+		".gitignore",
+		"vite.config.ts",
+		"tailwind.config.js",
+		"tsconfig.json",
+		"src/entry.tsx",
+		"src/App.tsx",
+		"src/api.ts",
+		"src/global.d.ts",
+	} {
+		if !writtenSet[want] {
+			t.Errorf("expected %q to be written, got %v", want, written)
+		}
+	}
+
+	pkg, err := os.ReadFile(filepath.Join(target, "package.json"))
+	if err != nil {
+		t.Fatalf("read package.json: %v", err)
+	}
+	if !strings.Contains(string(pkg), `"name": "my-app"`) {
+		t.Errorf("package.json missing templated name:\n%s", pkg)
+	}
+
+	readme, err := os.ReadFile(filepath.Join(target, "README.md"))
+	if err != nil {
+		t.Fatalf("read README.md: %v", err)
+	}
+	if !strings.Contains(string(readme), "Does the thing") {
+		t.Errorf("README.md missing templated description:\n%s", readme)
+	}
+}
+
+func TestAppsInit_ScaffoldsBlankFiles(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["blank"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, want := range []string{"package.json", "README.md", "AGENTS.md", ".gitignore", "src/App.tsx", "src/entry.tsx"} {
+		if !writtenSet[want] {
+			t.Errorf("expected %q to be written, got %v", want, written)
+		}
+	}
+	// The blank template must never scaffold the annotation-queue app's own
+	// components — it has its own (much simpler) App.tsx.
+	if writtenSet["src/components/RunList.tsx"] {
+		t.Error("blank template should not scaffold the annotation-queue app's components")
+	}
+
+	appTsx, err := os.ReadFile(filepath.Join(target, "src", "App.tsx"))
+	if err != nil {
+		t.Fatalf("read App.tsx: %v", err)
+	}
+	if strings.Contains(string(appTsx), "queueId") {
+		t.Errorf("expected the blank App.tsx to have no queue-specific code, got:\n%s", appTsx)
+	}
+}
+
+// Non-templated files (anything but README.md/package.json) must be copied
+// byte-for-byte — running them through text/template would choke on, or
+// silently mangle, any literal "{{"/"}}" they contain, e.g. React's
+// style={{...}} inline-style syntax.
+func TestAppsInit_CopiesNonTemplatedFilesVerbatim(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	if _, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["annotation-queue"], false); err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	got, err := os.ReadFile(filepath.Join(target, "src", "components", "FeedbackChip.tsx"))
+	if err != nil {
+		t.Fatalf("read FeedbackChip.tsx: %v", err)
+	}
+	if !strings.Contains(string(got), "style={{ backgroundColor: color") {
+		t.Errorf("expected literal style={{...}} to survive scaffolding unmodified, got:\n%s", got)
+	}
+}
+
+func TestAppsInit_DefaultsDescription(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	if _, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["annotation-queue"], false); err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+	readme, err := os.ReadFile(filepath.Join(target, "README.md"))
+	if err != nil {
+		t.Fatalf("read README.md: %v", err)
+	}
+	if !strings.Contains(string(readme), "TODO: one-sentence description") {
+		t.Errorf("expected default description placeholder:\n%s", readme)
+	}
+}
+
+func TestAppsInit_RejectsNonEmptyDirWithoutForce(t *testing.T) {
+	dir := t.TempDir()
+	if err := os.WriteFile(filepath.Join(dir, "existing.txt"), []byte("hi"), 0o644); err != nil {
+		t.Fatalf("seed: %v", err)
+	}
+	_, err := scaffoldCustomAppStarter(dir, "my-app", "", appTypes["annotation-queue"], false)
+	if err == nil || !strings.Contains(err.Error(), "not empty") {
+		t.Errorf("expected not-empty error, got %v", err)
+	}
+}
+
+func TestAppsInit_ForceWritesOverNonEmpty(t *testing.T) {
+	dir := t.TempDir()
+	if err := os.WriteFile(filepath.Join(dir, "existing.txt"), []byte("hi"), 0o644); err != nil {
+		t.Fatalf("seed: %v", err)
+	}
+	if _, err := scaffoldCustomAppStarter(dir, "my-app", "", appTypes["annotation-queue"], true); err != nil {
+		t.Fatalf("scaffold with force: %v", err)
+	}
+	if _, err := os.Stat(filepath.Join(dir, "package.json")); err != nil {
+		t.Errorf("package.json not written: %v", err)
+	}
+}
+
+func TestAppsInit_RequiresName(t *testing.T) {
+	dir := t.TempDir()
+	if _, err := scaffoldCustomAppStarter(filepath.Join(dir, "app"), "", "", appTypes["annotation-queue"], false); err == nil {
+		t.Fatal("expected error when --name is empty")
+	}
+}
+
+func TestAppsInit_RequiresValidType(t *testing.T) {
+	dir := t.TempDir()
+	if _, err := scaffoldCustomAppStarter(dir, "my-app", "", appType{}, false); err == nil {
+		t.Fatal("expected error for a zero-value (invalid) app type")
+	}
+}
+
+func TestAppsInit_WritesTemplateSpecificAgentsMD(t *testing.T) {
+	dir := t.TempDir()
+
+	blankTarget := filepath.Join(dir, "blank-app")
+	if _, err := scaffoldCustomAppStarter(blankTarget, "blank-app", "", appTypes["blank"], false); err != nil {
+		t.Fatalf("scaffold blank: %v", err)
+	}
+	blankAgents, err := os.ReadFile(filepath.Join(blankTarget, "AGENTS.md"))
+	if err != nil {
+		t.Fatalf("read AGENTS.md: %v", err)
+	}
+	if !strings.Contains(string(blankAgents), "window.langsmith.call") {
+		t.Errorf("expected the blank template's AGENTS.md, got:\n%s", blankAgents)
+	}
+
+	aqTarget := filepath.Join(dir, "aq-app")
+	if _, err := scaffoldCustomAppStarter(aqTarget, "aq-app", "", appTypes["annotation-queue"], false); err != nil {
+		t.Fatalf("scaffold annotation-queue: %v", err)
+	}
+	aqAgents, err := os.ReadFile(filepath.Join(aqTarget, "AGENTS.md"))
+	if err != nil {
+		t.Fatalf("read AGENTS.md: %v", err)
+	}
+	if !strings.Contains(string(aqAgents), "3-pane") {
+		t.Errorf("expected the annotation-queue template's AGENTS.md, got:\n%s", aqAgents)
+	}
+}
+
+func TestAppsInitCmd_TemplateFlagDefaultsEmpty(t *testing.T) {
+	cmd := newAppsCmd()
+	initCmd, _, err := cmd.Find([]string{"init"})
+	if err != nil {
+		t.Fatalf("find init command: %v", err)
+	}
+	f := initCmd.Flags().Lookup("template")
+	if f == nil {
+		t.Fatal("expected --template flag to exist")
+	}
+	if f.DefValue != "" {
+		t.Errorf("expected --template to default to \"\", got %q", f.DefValue)
+	}
+	// The old --type flag must be gone, not just aliased.
+	if got := initCmd.Flags().Lookup("type"); got != nil {
+		t.Error("expected --type to be gone from apps init (renamed to --template)")
+	}
+}
+
+func TestAppsInitCmd_RejectsExplicitTemplateBlank(t *testing.T) {
+	dir := t.TempDir()
+	t.Chdir(dir)
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"init", "--name", "my-app", "--template", "blank", "--skip-install"})
+	if err := cmd.Execute(); err == nil {
+		t.Error("expected --template blank to be rejected; omit --template instead")
+	}
+}
+
+func TestAppsInitCmd_DefaultsToBlankWhenTemplateOmitted(t *testing.T) {
+	dir := t.TempDir()
+	t.Chdir(dir)
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"init", "--name", "my-app", "--skip-install"})
+	if err := cmd.Execute(); err != nil {
+		t.Fatalf("expected init to succeed with --template omitted, got: %v", err)
+	}
+
+	// Omitting --template scaffolds the blank starter: a partial link and a
+	// queue-free App.tsx.
+	link, err := readAppLink(dir)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.Name != "my-app" {
+		t.Errorf("expected a partial link recording the name, got %+v", link)
+	}
+	appTsx, err := os.ReadFile(filepath.Join(dir, "src", "App.tsx"))
+	if err != nil {
+		t.Fatalf("read App.tsx: %v", err)
+	}
+	if strings.Contains(string(appTsx), "queueId") {
+		t.Errorf("expected the blank App.tsx (no queue code) when --template is omitted, got:\n%s", appTsx)
+	}
+}
+
+func TestAppsInitCmd_AcceptsAnnotationQueueGridTemplate(t *testing.T) {
+	dir := t.TempDir()
+	t.Chdir(dir)
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"init", "--name", "grid-app", "--template", "annotation-queue-grid", "--skip-install"})
+	if err := cmd.Execute(); err != nil {
+		t.Fatalf("expected init to succeed for --template annotation-queue-grid, got: %v", err)
+	}
+
+	// The grid variant's own component is scaffolded.
+	if _, err := os.Stat(filepath.Join(dir, "src", "components", "DataGrid.tsx")); err != nil {
+		t.Errorf("expected the grid template's DataGrid.tsx to be scaffolded: %v", err)
+	}
+	link, err := readAppLink(dir)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.Name != "grid-app" {
+		t.Errorf("expected a partial link recording the name, got %+v", link)
+	}
+}
+
+func TestAppsInitCmd_AcceptsCodingAgentDashboardTemplate(t *testing.T) {
+	dir := t.TempDir()
+	t.Chdir(dir)
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"init", "--name", "dash", "--template", "coding-agent-dashboard", "--skip-install"})
+	if err := cmd.Execute(); err != nil {
+		t.Fatalf("expected init to succeed for --template coding-agent-dashboard, got: %v", err)
+	}
+	if _, err := os.Stat(filepath.Join(dir, "src", "components", "OverviewPanel.tsx")); err != nil {
+		t.Errorf("expected the dashboard's OverviewPanel.tsx to be scaffolded: %v", err)
+	}
+}
+
+func TestAppsInitCmd_AcceptsExperimentComparisonTemplate(t *testing.T) {
+	dir := t.TempDir()
+	t.Chdir(dir)
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"init", "--name", "cmp", "--template", "experiment-comparison", "--skip-install"})
+	if err := cmd.Execute(); err != nil {
+		t.Fatalf("expected init to succeed for --template experiment-comparison, got: %v", err)
+	}
+	if _, err := os.Stat(filepath.Join(dir, "src", "components", "SummaryPanel.tsx")); err != nil {
+		t.Errorf("expected the SummaryPanel.tsx to be scaffolded: %v", err)
+	}
+}
+
+func TestAppsInitCmd_RejectsInvalidTemplate(t *testing.T) {
+	dir := t.TempDir()
+	t.Chdir(dir)
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"init", "--name", "my-app", "--template", "bogus", "--skip-install"})
+	if err := cmd.Execute(); err == nil {
+		t.Error("expected error for an invalid --template")
+	}
+}
+
+func TestAppsInitCmd_HasSkipInstallFlag(t *testing.T) {
+	cmd := newAppsCmd()
+	initCmd, _, err := cmd.Find([]string{"init"})
+	if err != nil {
+		t.Fatalf("find init command: %v", err)
+	}
+	if f := initCmd.Flags().Lookup("skip-install"); f == nil {
+		t.Error("expected --skip-install flag to exist")
+	}
+}
+
+func TestInstallAndBuildCustomAppStarter_ErrorsWhenNpmMissing(t *testing.T) {
+	t.Setenv("PATH", "")
+	dir := t.TempDir()
+	if err := installAndBuildCustomAppStarter(dir); err == nil {
+		t.Error("expected error when npm is not on PATH")
+	}
+}
+
+// fakeNpm writes an executable named "npm" into a fresh directory prepended
+// to PATH, standing in for a real npm install: no network access, no real
+// esbuild download. It only needs to satisfy the two invocations
+// installAndBuildCustomAppStarter makes: "install" and "run build".
+func fakeNpm(t *testing.T, onRunBuild string) {
+	t.Helper()
+	binDir := t.TempDir()
+	script := "#!/bin/sh\n" +
+		"if [ \"$1\" = \"install\" ]; then exit 0; fi\n" +
+		"if [ \"$1\" = \"run\" ] && [ \"$2\" = \"build\" ]; then\n" + onRunBuild + "\nexit 0\nfi\n" +
+		"exit 1\n"
+	npmPath := filepath.Join(binDir, "npm")
+	if err := os.WriteFile(npmPath, []byte(script), 0o755); err != nil {
+		t.Fatalf("write fake npm: %v", err)
+	}
+	t.Setenv("PATH", binDir+string(os.PathListSeparator)+os.Getenv("PATH"))
+}
+
+func TestInstallAndBuildCustomAppStarter_RunsInstallThenBuild(t *testing.T) {
+	dir := t.TempDir()
+	fakeNpm(t, `mkdir -p dist && printf 'module.exports={render:function(){}}' > dist/bundle.js`)
+
+	if err := installAndBuildCustomAppStarter(dir); err != nil {
+		t.Fatalf("installAndBuildCustomAppStarter: %v", err)
+	}
+	if _, err := os.Stat(filepath.Join(dir, "dist", "bundle.js")); err != nil {
+		t.Errorf("expected dist/bundle.js to be produced by the build step: %v", err)
+	}
+}
+
+func TestInstallAndBuildCustomAppStarter_ErrorsWhenBuildFails(t *testing.T) {
+	dir := t.TempDir()
+	fakeNpm(t, `exit 1`)
+
+	if err := installAndBuildCustomAppStarter(dir); err == nil {
+		t.Error("expected error when the build step fails")
+	}
+}
+
+// Shared files (templates/_shared/) aren't tracked per template — a
+// template gets one by actually importing it, discovered by scanning its
+// own source. These tests pin down that inference so it can't silently
+// regress into either a maintained list or a "copy everything" fallback.
+func TestSharedFileImportSpecifiers_MatchesTemplateConventions(t *testing.T) {
+	tests := []struct {
+		sharedRelPath string
+		want          []string
+	}{
+		{
+			sharedRelPath: "components/SearchableSelect.tsx",
+			want: []string{
+				"./SearchableSelect",
+				"./components/SearchableSelect",
+				"../components/SearchableSelect",
+			},
+		},
+		{
+			sharedRelPath: "lib/utils.ts",
+			want: []string{
+				"./utils",
+				"./lib/utils",
+				"../lib/utils",
+			},
+		},
+	}
+	for _, tt := range tests {
+		got := sharedFileImportSpecifiers(tt.sharedRelPath)
+		gotSet := map[string]bool{}
+		for _, g := range got {
+			gotSet[g] = true
+		}
+		for _, want := range tt.want {
+			if !gotSet[want] {
+				t.Errorf("sharedFileImportSpecifiers(%q) = %v, missing %q", tt.sharedRelPath, got, want)
+			}
+		}
+	}
+}
+
+// annotation-queue-grid imports SearchableSelect, Spinner, and the cn()
+// helper from lib/utils — all three should be pulled in, byte-identical to
+// the canonical _shared/ source.
+func TestAppsInit_PullsInEverySharedFileATemplateImports(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["annotation-queue-grid"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, sharedRelPath := range []string{
+		"src/components/SearchableSelect.tsx",
+		"src/components/Spinner.tsx",
+		"src/lib/utils.ts",
+	} {
+		if !writtenSet[sharedRelPath] {
+			t.Errorf("expected %q to be pulled in from _shared/, got %v", sharedRelPath, written)
+			continue
+		}
+		got, err := os.ReadFile(filepath.Join(target, sharedRelPath))
+		if err != nil {
+			t.Fatalf("reading scaffolded %s: %v", sharedRelPath, err)
+		}
+		want, err := sharedFS.ReadFile(sharedRoot + "/" + strings.TrimPrefix(sharedRelPath, "src/"))
+		if err != nil {
+			t.Fatalf("reading embedded shared %s: %v", sharedRelPath, err)
+		}
+		if string(got) != string(want) {
+			t.Errorf("scaffolded %s does not match the canonical _shared/ source", sharedRelPath)
+		}
+	}
+}
+
+// experiment-comparison only imports SearchableSelect — it has no Spinner
+// and never had a lib/utils.ts, so those must not appear even though
+// they're valid _shared/ files another template uses.
+func TestAppsInit_OnlyPullsInSharedFilesActuallyImported(t *testing.T) {
+	dir := t.TempDir()
+	target := filepath.Join(dir, "my-app")
+
+	written, err := scaffoldCustomAppStarter(target, "my-app", "", appTypes["experiment-comparison"], false)
+	if err != nil {
+		t.Fatalf("scaffold: %v", err)
+	}
+
+	writtenSet := map[string]bool{}
+	for _, w := range written {
+		writtenSet[w] = true
+	}
+	for _, wanted := range []string{"src/components/SearchableSelect.tsx", "src/components/Spinner.tsx", "src/lib/utils.ts"} {
+		if !writtenSet[wanted] {
+			t.Errorf("expected %q to be pulled in, got %v", wanted, written)
+		}
+	}
+}
+
+// go:embed has no concept of .gitignore — it embeds every file physically
+// present under a template's source directory at build time, node_modules
+// included. If a local `npm install`/`vite build` run in a template's source
+// tree isn't cleaned up before `go build`/`go install`, the *entire*
+// node_modules (and dist/) gets silently baked into the CLI binary and
+// scaffolded into every user's project — with a working package.json but no
+// working node_modules/.bin symlinks (embed can't preserve symlinks), so
+// "npm run watch" fails with "vite: command not found" despite the files
+// visibly being there. This walks the actual embedded FS content (not just
+// the source tree, which can look clean between commits) so a stray
+// node_modules/dist left behind before a build gets caught here instead of
+// shipping.
+func TestEmbeddedTemplates_CarryNoStrayBuildArtifacts(t *testing.T) {
+	check := func(name string, embedded fs.FS) {
+		t.Helper()
+		err := fs.WalkDir(embedded, ".", func(path string, d fs.DirEntry, walkErr error) error {
+			if walkErr != nil {
+				return walkErr
+			}
+			base := filepath.Base(path)
+			if d.IsDir() && (base == "node_modules" || base == "dist") {
+				t.Errorf("%s: embedded FS contains %q — a local build wasn't cleaned up before go build/go install", name, path)
+				return fs.SkipDir
+			}
+			if !d.IsDir() && (base == "package-lock.json" || base == "pnpm-lock.yaml") {
+				t.Errorf("%s: embedded FS contains %q — shouldn't be committed or embedded", name, path)
+			}
+			return nil
+		})
+		if err != nil {
+			t.Fatalf("%s: walking embedded FS: %v", name, err)
+		}
+	}
+
+	for name, at := range appTypes {
+		check(name, at.templateFS)
+	}
+	check("_shared", sharedFS)
+}
diff --git a/internal/cmd/apps_list.go b/internal/cmd/apps_list.go
new file mode 100644
index 0000000..00bc260
--- /dev/null
+++ b/internal/cmd/apps_list.go
@@ -0,0 +1,41 @@
+package cmd
+
+import (
+	"context"
+	"fmt"
+
+	"github.com/langchain-ai/langsmith-cli/internal/output"
+	"github.com/spf13/cobra"
+)
+
+func newAppsListCmd() *cobra.Command {
+	cmd := &cobra.Command{
+		Use:   "list",
+		Short: "List custom apps",
+		RunE: func(cmd *cobra.Command, args []string) error {
+			c := MustGetClient()
+			ctx := context.Background()
+
+			var apps []customApp
+			if err := c.RawGet(ctx, "/v1/platform/custom-apps", &apps); err != nil {
+				return fmt.Errorf("listing custom apps: %w", err)
+			}
+
+			data := make([]map[string]any, 0, len(apps))
+			for _, a := range apps {
+				data = append(data, map[string]any{
+					"id":          a.ID,
+					"name":        a.Name,
+					"description": a.Description,
+					"entrypoint":  a.Entrypoint,
+					"is_enabled":  a.IsEnabled,
+					"updated_at":  a.UpdatedAt,
+				})
+			}
+			output.OutputJSON(data, "")
+			return nil
+		},
+	}
+
+	return cmd
+}
diff --git a/internal/cmd/apps_push.go b/internal/cmd/apps_push.go
new file mode 100644
index 0000000..cd3081b
--- /dev/null
+++ b/internal/cmd/apps_push.go
@@ -0,0 +1,200 @@
+package cmd
+
+import (
+	"context"
+	"fmt"
+	"os"
+	"os/exec"
+	"path/filepath"
+	"sort"
+
+	"github.com/langchain-ai/langsmith-cli/internal/client"
+	"github.com/langchain-ai/langsmith-cli/internal/output"
+	"github.com/spf13/cobra"
+)
+
+func newAppsPushCmd() *cobra.Command {
+	var (
+		name        string
+		description string
+		entrypoint  string
+		buildCmd    string
+		noBuild     bool
+	)
+
+	cmd := &cobra.Command{
+		Use:   "push",
+		Short: "Upload the current directory as a custom app",
+		Long: `Upload the current directory as a custom app.
+
+Builds before uploading: if package.json has a "build" script (both starter
+templates do), this runs it first (like "npm run build"), so the upload
+always reflects your current source — not whatever happened to be left in
+dist/ by a previous "apps dev" session (e.g. one interrupted mid-rebuild).
+Pass --build to run a different command instead, or --no-build to upload
+the directory exactly as-is with no build step. The first push creates the
+app and writes .langsmith/app.json recording its ID; every push after that
+reads that file and updates the same app in place. Commit .langsmith/app.json
+so teammates' pushes update the same app instead of creating new ones.
+
+--name only takes effect on the first push (creation).`,
+		RunE: func(cmd *cobra.Command, args []string) error {
+			dir, err := os.Getwd()
+			if err != nil {
+				return fmt.Errorf("getting current directory: %w", err)
+			}
+
+			if noBuild && buildCmd != "" {
+				return fmt.Errorf("--build and --no-build are mutually exclusive")
+			}
+
+			if !noBuild {
+				cmdToRun := buildCmd
+				if cmdToRun == "" {
+					script, pkgJSONExists, scriptErr := packageJSONScript(dir, "build")
+					if scriptErr != nil {
+						return fmt.Errorf("reading package.json to find a \"build\" script: %w", scriptErr)
+					}
+					if script != "" {
+						cmdToRun = "npm run build"
+					} else if pkgJSONExists {
+						fmt.Fprintln(os.Stderr, `note: no "build" script in package.json — skipping automatic build; pass --build to run one`)
+					}
+				}
+				if cmdToRun != "" {
+					if err := runAppsBuildCmd(dir, cmdToRun); err != nil {
+						return err
+					}
+				}
+			}
+
+			files, err := readDirectoryAsAppFiles(dir)
+			if err != nil {
+				return err
+			}
+			if len(files) == 0 {
+				return fmt.Errorf("no files found under %s (after applying exclusions)", dir)
+			}
+			if _, ok := files[entrypoint]; !ok {
+				return fmt.Errorf("entrypoint %q not found among uploaded files; pass --entrypoint or check --build produced it", entrypoint)
+			}
+
+			link, err := readAppLink(dir)
+			if err != nil {
+				return err
+			}
+			// "apps init" writes .langsmith/app.json immediately (recording the
+			// name) with no app_id yet — that's only known once an app is
+			// actually created. So a link file existing isn't enough to mean
+			// "already created"; app_id being set is.
+			notYetCreated := link == nil || link.AppID == ""
+
+			c := MustGetClient()
+			ctx := context.Background()
+
+			var app customApp
+			updated := false
+			if !notYetCreated {
+				payload := map[string]any{
+					"files":      files,
+					"entrypoint": entrypoint,
+				}
+				if name != "" {
+					payload["name"] = name
+				}
+				if description != "" {
+					payload["description"] = description
+				}
+				err := c.RawPatch(ctx, "/v1/platform/custom-apps/"+link.AppID, payload, &app)
+				switch {
+				case err == nil:
+					updated = true
+				case client.IsConflict(err):
+					return fmt.Errorf("a custom app named %q already exists in this workspace", name)
+				case client.IsNotFound(err):
+					// The linked app_id no longer exists server-side (e.g. it
+					// was deleted through the UI) — .langsmith/app.json is
+					// stale. Recreate under the same name rather than failing,
+					// and relink to the new app below.
+					fmt.Fprintf(os.Stderr, "note: custom app %s no longer exists (it may have been deleted) — creating a new one\n", link.AppID)
+				default:
+					return fmt.Errorf("updating custom app %s: %w", link.AppID, err)
+				}
+			}
+
+			if updated {
+				if err := writeAppLink(dir, appLink{
+					AppID: app.ID,
+					Name:  app.Name,
+				}); err != nil {
+					return err
+				}
+			} else {
+				appName := name
+				if appName == "" && link != nil && link.Name != "" {
+					appName = link.Name
+				}
+				if appName == "" {
+					appName = filepath.Base(filepath.Clean(dir))
+				}
+				payload := map[string]any{
+					"name":       appName,
+					"files":      files,
+					"entrypoint": entrypoint,
+				}
+				if description != "" {
+					payload["description"] = description
+				}
+				if err := c.RawPost(ctx, "/v1/platform/custom-apps", payload, &app); err != nil {
+					if client.IsConflict(err) {
+						return fmt.Errorf("a custom app named %q already exists in this workspace. try `langsmith apps push --name \"New Name\"` instead", appName)
+					}
+					return fmt.Errorf("creating custom app: %w", err)
+				}
+				if err := writeAppLink(dir, appLink{
+					AppID: app.ID,
+					Name:  app.Name,
+				}); err != nil {
+					return err
+				}
+			}
+
+			paths := make([]string, 0, len(files))
+			for k := range files {
+				paths = append(paths, k)
+			}
+			sort.Strings(paths)
+
+			status := "created"
+			if updated {
+				status = "updated"
+			}
+			output.OutputJSON(map[string]any{
+				"status":     status,
+				"app_id":     app.ID,
+				"name":       app.Name,
+				"entrypoint": app.Entrypoint,
+				"files":      paths,
+			}, "")
+			return nil
+		},
+	}
+
+	cmd.Flags().StringVar(&name, "name", "", "App name (required on first push; renames on later pushes if passed)")
+	cmd.Flags().StringVar(&description, "description", "", "App description")
+	cmd.Flags().StringVar(&entrypoint, "entrypoint", "dist/bundle.js", "Path (relative to the current directory) of the file to render")
+	cmd.Flags().StringVar(&buildCmd, "build", "", "Shell command to run in the current directory before uploading, overriding the auto-detected package.json \"build\" script (e.g. \"npm run build\")")
+	cmd.Flags().BoolVar(&noBuild, "no-build", false, "Skip building before uploading, even if package.json has a \"build\" script")
+	return cmd
+}
+
+func runAppsBuildCmd(dir, buildCmd string) error {
+	c := exec.Command("sh", "-c", buildCmd)
+	c.Dir = dir
+	c.Stdout = os.Stderr
+	c.Stderr = os.Stderr
+	if err := c.Run(); err != nil {
+		return fmt.Errorf("--build command %q failed: %w", buildCmd, err)
+	}
+	return nil
+}
diff --git a/internal/cmd/apps_push_test.go b/internal/cmd/apps_push_test.go
new file mode 100644
index 0000000..f221913
--- /dev/null
+++ b/internal/cmd/apps_push_test.go
@@ -0,0 +1,375 @@
+package cmd
+
+import (
+	"encoding/json"
+	"io"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+)
+
+func seedAppDir(t *testing.T, dir string) {
+	t.Helper()
+	if err := os.MkdirAll(filepath.Join(dir, "dist"), 0o755); err != nil {
+		t.Fatalf("mkdir dist: %v", err)
+	}
+	if err := os.WriteFile(filepath.Join(dir, "dist", "bundle.js"), []byte("module.exports = { render: function() {} }"), 0o644); err != nil {
+		t.Fatalf("seed bundle.js: %v", err)
+	}
+}
+
+func TestAppsPush_CreatesAndWritesLink(t *testing.T) {
+	var sawPost bool
+	var postBody map[string]any
+
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		switch {
+		case r.Method == "POST" && r.URL.Path == "/v1/platform/custom-apps":
+			sawPost = true
+			body, _ := io.ReadAll(r.Body)
+			_ = json.Unmarshal(body, &postBody)
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(customApp{
+				ID:         "app_new",
+				Name:       "my-app",
+				Entrypoint: "dist/bundle.js",
+			})
+		default:
+			t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+		}
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	seedAppDir(t, dir)
+	t.Chdir(dir)
+
+	out := captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"push", "--name", "my-app"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if !sawPost {
+		t.Fatal("expected POST to create the app")
+	}
+	if postBody["name"] != "my-app" {
+		t.Errorf("expected name in create payload, got %v", postBody)
+	}
+	if !strings.Contains(out, `"status": "created"`) {
+		t.Errorf("expected created status in output:\n%s", out)
+	}
+
+	link, err := readAppLink(dir)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.AppID != "app_new" {
+		t.Errorf("expected link file with app_new, got %+v", link)
+	}
+}
+
+func TestAppsPush_UpdatesWhenAlreadyLinked(t *testing.T) {
+	var sawPatch, sawPost bool
+	var patchPath string
+
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		switch {
+		case r.Method == "POST" && r.URL.Path == "/v1/platform/custom-apps":
+			sawPost = true
+		case r.Method == "PATCH":
+			sawPatch = true
+			patchPath = r.URL.Path
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(customApp{
+				ID:         "app_existing",
+				Name:       "my-app",
+				Entrypoint: "dist/bundle.js",
+			})
+		default:
+			t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+		}
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	seedAppDir(t, dir)
+	if err := writeAppLink(dir, appLink{AppID: "app_existing", Name: "my-app"}); err != nil {
+		t.Fatalf("seed link: %v", err)
+	}
+	t.Chdir(dir)
+
+	captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"push"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if sawPost {
+		t.Error("expected update path to PATCH, not POST (create)")
+	}
+	if !sawPatch {
+		t.Fatal("expected PATCH to update the existing app")
+	}
+	if patchPath != "/v1/platform/custom-apps/app_existing" {
+		t.Errorf("unexpected PATCH path: %s", patchPath)
+	}
+}
+
+// A link with a name but no app_id (what "apps init" writes) must POST, not
+// PATCH an empty ID.
+func TestAppsPush_CreatesWhenLinkedButNotYetCreated(t *testing.T) {
+	var sawPost bool
+	var postBody map[string]any
+
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		switch {
+		case r.Method == "POST" && r.URL.Path == "/v1/platform/custom-apps":
+			sawPost = true
+			body, _ := io.ReadAll(r.Body)
+			_ = json.Unmarshal(body, &postBody)
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(customApp{
+				ID:         "app_new",
+				Name:       "my-aq-app",
+				Entrypoint: "dist/bundle.js",
+			})
+		default:
+			t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+		}
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	seedAppDir(t, dir)
+	// Mirrors what "apps init --name my-aq-app --template annotation-queue" writes.
+	if err := writeAppLink(dir, appLink{Name: "my-aq-app"}); err != nil {
+		t.Fatalf("seed partial link: %v", err)
+	}
+	t.Chdir(dir)
+
+	out := captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"push"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if !sawPost {
+		t.Fatal("expected POST to create the app (app_id was empty, so this isn't an update)")
+	}
+	if postBody["name"] != "my-aq-app" {
+		t.Errorf("expected name from the link file used as fallback, got %v", postBody)
+	}
+	if !strings.Contains(out, `"status": "created"`) {
+		t.Errorf("expected created status, got:\n%s", out)
+	}
+
+	link, err := readAppLink(dir)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.AppID != "app_new" {
+		t.Errorf("expected link file updated with the real app_id, got %+v", link)
+	}
+}
+
+// If the linked app was deleted out-of-band (e.g. through the UI),
+// .langsmith/app.json still has its old app_id and push's PATCH 404s. Push
+// must recreate the app under the same name rather than failing, and relink
+// to the new app_id.
+func TestAppsPush_RecreatesWhenLinkedAppWasDeleted(t *testing.T) {
+	var sawPatch, sawPost bool
+	var postBody map[string]any
+
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		switch {
+		case r.Method == "PATCH" && r.URL.Path == "/v1/platform/custom-apps/app_deleted":
+			sawPatch = true
+			w.Header().Set("Content-Type", "application/json")
+			w.WriteHeader(http.StatusNotFound)
+			_ = json.NewEncoder(w).Encode(map[string]string{"error": "custom app not found"})
+		case r.Method == "POST" && r.URL.Path == "/v1/platform/custom-apps":
+			sawPost = true
+			body, _ := io.ReadAll(r.Body)
+			_ = json.Unmarshal(body, &postBody)
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(customApp{
+				ID:         "app_recreated",
+				Name:       "my-app",
+				Entrypoint: "dist/bundle.js",
+			})
+		default:
+			t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+		}
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	seedAppDir(t, dir)
+	if err := writeAppLink(dir, appLink{AppID: "app_deleted", Name: "my-app"}); err != nil {
+		t.Fatalf("seed link: %v", err)
+	}
+	t.Chdir(dir)
+
+	out := captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"push"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if !sawPatch {
+		t.Fatal("expected push to try PATCH against the linked (now-deleted) app_id first")
+	}
+	if !sawPost {
+		t.Fatal("expected push to fall back to POST (create) after the PATCH 404s")
+	}
+	if postBody["name"] != "my-app" {
+		t.Errorf("expected the recreated app to reuse the old app's name, got %v", postBody)
+	}
+	if !strings.Contains(out, `"status": "created"`) {
+		t.Errorf("expected created status, got:\n%s", out)
+	}
+
+	link, err := readAppLink(dir)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if link == nil || link.AppID != "app_recreated" {
+		t.Errorf("expected link file relinked to the new app_id, got %+v", link)
+	}
+}
+
+func TestAppsPush_ErrorsWhenEntrypointMissing(t *testing.T) {
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	if err := os.WriteFile(filepath.Join(dir, "other.js"), []byte("x"), 0o644); err != nil {
+		t.Fatalf("seed: %v", err)
+	}
+	t.Chdir(dir)
+
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"push", "--name", "my-app"})
+	if err := cmd.Execute(); err == nil {
+		t.Fatal("expected error when default entrypoint dist/bundle.js is missing")
+	}
+}
+
+// Regression test for the actual bug that motivated auto-building: "apps
+// dev"'s watch process empties dist/ before every rebuild, so interrupting
+// it mid-rebuild leaves an empty dist/ behind. Push must not trust that
+// leftover state — it should rebuild from source before uploading.
+func TestAppsPush_BuildsFromPackageJSONByDefault(t *testing.T) {
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		if r.Method == "POST" && r.URL.Path == "/v1/platform/custom-apps" {
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(customApp{ID: "app_new", Name: "my-app", Entrypoint: "dist/bundle.js"})
+			return
+		}
+		t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	fakeNpm(t, `mkdir -p dist && printf 'module.exports={render:function(){}}' > dist/bundle.js`)
+	if err := os.WriteFile(filepath.Join(dir, "package.json"), []byte(`{"scripts":{"build":"vite build"}}`), 0o644); err != nil {
+		t.Fatalf("seed package.json: %v", err)
+	}
+	// No dist/ seeded at all — simulates an "apps dev" watch process that was
+	// interrupted mid-rebuild (emptyOutDir cleared it, nothing was written back).
+	t.Chdir(dir)
+
+	captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{"push", "--name", "my-app"})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if _, err := os.Stat(filepath.Join(dir, "dist", "bundle.js")); err != nil {
+		t.Errorf("expected the auto-detected \"build\" script to produce dist/bundle.js: %v", err)
+	}
+}
+
+func TestAppsPush_NoBuildSkipsAutomaticBuild(t *testing.T) {
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	fakeNpm(t, `mkdir -p dist && printf 'module.exports={render:function(){}}' > dist/bundle.js`)
+	if err := os.WriteFile(filepath.Join(dir, "package.json"), []byte(`{"scripts":{"build":"vite build"}}`), 0o644); err != nil {
+		t.Fatalf("seed package.json: %v", err)
+	}
+	t.Chdir(dir)
+
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"push", "--name", "my-app", "--no-build"})
+	if err := cmd.Execute(); err == nil {
+		t.Fatal("expected error: --no-build should skip the build, leaving dist/bundle.js missing")
+	}
+	if _, err := os.Stat(filepath.Join(dir, "dist", "bundle.js")); err == nil {
+		t.Error("--no-build must not run the package.json \"build\" script")
+	}
+}
+
+func TestAppsPush_BuildAndNoBuildAreMutuallyExclusive(t *testing.T) {
+	dir := t.TempDir()
+	seedAppDir(t, dir)
+	t.Chdir(dir)
+
+	cmd := newAppsCmd()
+	cmd.SetArgs([]string{"push", "--name", "my-app", "--build", "true", "--no-build"})
+	if err := cmd.Execute(); err == nil {
+		t.Fatal("expected error when both --build and --no-build are passed")
+	}
+}
+
+func TestAppsPush_CustomBuildCommandOverridesAutoDetection(t *testing.T) {
+	srv := newTestServer(t, func(w http.ResponseWriter, r *http.Request) {
+		if r.Method == "POST" && r.URL.Path == "/v1/platform/custom-apps" {
+			w.Header().Set("Content-Type", "application/json")
+			_ = json.NewEncoder(w).Encode(customApp{ID: "app_new", Name: "my-app", Entrypoint: "dist/bundle.js"})
+			return
+		}
+		t.Errorf("unexpected request: %s %s", r.Method, r.URL.Path)
+	})
+	defer setupTestEnv(t, srv.URL)()
+
+	dir := t.TempDir()
+	// A package.json "build" script exists but must NOT run — --build wins.
+	if err := os.WriteFile(filepath.Join(dir, "package.json"), []byte(`{"scripts":{"build":"exit 1"}}`), 0o644); err != nil {
+		t.Fatalf("seed package.json: %v", err)
+	}
+	t.Chdir(dir)
+
+	captureStdout(t, func() {
+		cmd := newAppsCmd()
+		cmd.SetArgs([]string{
+			"push", "--name", "my-app",
+			"--build", "mkdir -p dist && printf 'module.exports={render:function(){}}' > dist/bundle.js",
+		})
+		if err := cmd.Execute(); err != nil {
+			t.Fatalf("execute: %v", err)
+		}
+	})
+
+	if _, err := os.Stat(filepath.Join(dir, "dist", "bundle.js")); err != nil {
+		t.Errorf("expected the explicit --build command to produce dist/bundle.js: %v", err)
+	}
+}
diff --git a/internal/cmd/apps_test.go b/internal/cmd/apps_test.go
new file mode 100644
index 0000000..27f5375
--- /dev/null
+++ b/internal/cmd/apps_test.go
@@ -0,0 +1,114 @@
+package cmd
+
+import (
+	"os"
+	"path/filepath"
+	"strings"
+	"testing"
+)
+
+func TestAppLink_RoundTrip(t *testing.T) {
+	dir := t.TempDir()
+
+	if link, err := readAppLink(dir); err != nil || link != nil {
+		t.Fatalf("expected (nil, nil) for missing link file, got (%v, %v)", link, err)
+	}
+
+	want := appLink{AppID: "app_1", Name: "my-app"}
+	if err := writeAppLink(dir, want); err != nil {
+		t.Fatalf("writeAppLink: %v", err)
+	}
+
+	got, err := readAppLink(dir)
+	if err != nil {
+		t.Fatalf("readAppLink: %v", err)
+	}
+	if got == nil || *got != want {
+		t.Errorf("readAppLink = %+v, want %+v", got, want)
+	}
+
+	// Written under .langsmith/app.json specifically, not loose in dir.
+	if _, err := os.Stat(filepath.Join(dir, appsLinkDir, appsLinkFile)); err != nil {
+		t.Errorf(".langsmith/app.json not found: %v", err)
+	}
+}
+
+func TestAppLink_OverwritesExisting(t *testing.T) {
+	dir := t.TempDir()
+	if err := writeAppLink(dir, appLink{AppID: "app_1"}); err != nil {
+		t.Fatalf("first write: %v", err)
+	}
+	if err := writeAppLink(dir, appLink{AppID: "app_2"}); err != nil {
+		t.Fatalf("second write: %v", err)
+	}
+	got, err := readAppLink(dir)
+	if err != nil || got == nil || got.AppID != "app_2" {
+		t.Errorf("expected app_2 after overwrite, got %+v (err %v)", got, err)
+	}
+}
+
+func TestReadDirectoryAsAppFiles_ExcludesConfiguredDirsAndFiles(t *testing.T) {
+	dir := t.TempDir()
+	seed := map[string]string{
+		"index.js":                  "module.exports = {}",
+		"node_modules/pkg/index.js": "should be excluded",
+		".git/HEAD":                 "should be excluded",
+		".langsmith/app.json":       "should be excluded",
+		".DS_Store":                 "should be excluded",
+		".env":                      "should be excluded",
+		".env.production":           "should be excluded",
+	}
+	for rel, content := range seed {
+		full := filepath.Join(dir, rel)
+		if err := os.MkdirAll(filepath.Dir(full), 0o755); err != nil {
+			t.Fatalf("mkdir for %s: %v", rel, err)
+		}
+		if err := os.WriteFile(full, []byte(content), 0o644); err != nil {
+			t.Fatalf("write %s: %v", rel, err)
+		}
+	}
+
+	files, err := readDirectoryAsAppFiles(dir)
+	if err != nil {
+		t.Fatalf("readDirectoryAsAppFiles: %v", err)
+	}
+	if len(files) != 1 {
+		t.Fatalf("expected exactly 1 file, got %v", files)
+	}
+	if files["index.js"] != "module.exports = {}" {
+		t.Errorf("unexpected content for index.js: %q", files["index.js"])
+	}
+}
+
+func TestReadDirectoryAsAppFiles_RejectsBinary(t *testing.T) {
+	dir := t.TempDir()
+	if err := os.WriteFile(filepath.Join(dir, "bin.dat"), []byte{0x00, 0x01, 0x02}, 0o644); err != nil {
+		t.Fatalf("seed: %v", err)
+	}
+	_, err := readDirectoryAsAppFiles(dir)
+	if err == nil || !strings.Contains(err.Error(), "binary") {
+		t.Errorf("expected binary-rejection error, got %v", err)
+	}
+}
+
+func TestReadDirectoryAsAppFiles_RejectsOversizedFile(t *testing.T) {
+	dir := t.TempDir()
+	big := make([]byte, appsMaxFileSizeBytes+1)
+	for i := range big {
+		big[i] = 'a'
+	}
+	if err := os.WriteFile(filepath.Join(dir, "big.txt"), big, 0o644); err != nil {
+		t.Fatalf("seed: %v", err)
+	}
+	_, err := readDirectoryAsAppFiles(dir)
+	if err == nil || !strings.Contains(err.Error(), "exceeds") {
+		t.Errorf("expected size-limit error, got %v", err)
+	}
+}
+
+func TestReadDirectoryAsAppFiles_ErrorsOnMissingDir(t *testing.T) {
+	_, err := readDirectoryAsAppFiles(filepath.Join(t.TempDir(), "does-not-exist"))
+	if err == nil {
+		t.Fatal("expected error for missing directory")
+	}
+}
diff --git a/internal/cmd/root.go b/internal/cmd/root.go
index 9c8992b..64cc585 100644
--- a/internal/cmd/root.go
+++ b/internal/cmd/root.go
@@ -77,6 +77,7 @@ Quick start:
 	rootCmd.AddCommand(newInsightsCmd())
 	rootCmd.AddCommand(newFleetCmd())
 	rootCmd.AddCommand(newHubCmd())
+	rootCmd.AddCommand(newAppsCmd())
 	rootCmd.AddCommand(newPromptCmd())
 	rootCmd.AddCommand(authCommand.Cobra())
 	rootCmd.AddCommand(newProfileCmd())
@@ -118,14 +119,24 @@ func GetFormat() string {
 
 // MustGetClient creates a LangSmith client or exits with an error.
 func MustGetClient() *client.Client {
-	opts, err := resolveClientOptions(true)
+	c, err := getClient()
 	if err != nil {
 		ExitError(err.Error())
 	}
+	return c
+}
+
+// getClient is the non-exiting sibling of MustGetClient: it returns an error
+// instead of calling os.Exit, so request handlers can't crash.
+func getClient() (*client.Client, error) {
+	opts, err := resolveClientOptions(true)
+	if err != nil {
+		return nil, err
+	}
 	if opts.APIKey == "" && opts.OAuthAccessToken == "" {
-		ExitError("not authenticated; run 'langsmith auth login', set LANGSMITH_API_KEY, or pass --api-key")
+		return nil, fmt.Errorf("not authenticated; run 'langsmith auth login', set LANGSMITH_API_KEY, or pass --api-key")
 	}
-	return client.NewWithOptions(opts)
+	return client.NewWithOptions(opts), nil
 }
 
 func resolveClientOptions(refreshOAuth bool) (client.Options, error) {
diff --git a/internal/cmd/templates/_shared/components/SearchableSelect.tsx b/internal/cmd/templates/_shared/components/SearchableSelect.tsx
new file mode 100644
index 0000000..d022ab4
--- /dev/null
+++ b/internal/cmd/templates/_shared/components/SearchableSelect.tsx
@@ -0,0 +1,226 @@
+// Canonical single source. apps_init.go copies this into a scaffolded app's
+// src/ at generation time, and only if the template imports it — there are no
+// standing per-template copies and no sync script. Deliberately
+// self-contained (own cn()/chevron, no external icon package) so it drops
+// into any template unmodified regardless of what other dependencies that
+// template happens to have.
+import { useEffect, useRef, useState } from 'react';
+
+function cn(...classes: (string | false | null | undefined)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+const PAGE_SIZE = 25;
+
+function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
+      <path d="m6 9 6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+export interface SearchableSelectItem {
+  id: string;
+  name: string;
+}
+
+interface Props<T extends SearchableSelectItem> {
+  id?: string;
+  value: string;
+  onSelect: (item: T) => void;
+  /** Fetches one page of results for the given search term. Called with
+   * offset 0 whenever the dropdown opens or the search term changes, and
+   * with an increasing offset as the user scrolls the list. A page shorter
+   * than PAGE_SIZE (25) is treated as the last page. */
+  fetchPage: (search: string, offset: number, limit: number) => Promise<T[]>;
+  placeholder: string;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+// A native <select> can't hold a search box or paginate its own options, so
+// this is a small custom combobox: closed-state button + an open popover
+// with a search input on top and an infinite-scrolling list below. Used
+// anywhere an app picks one item from a workspace-scoped list (queues,
+// projects, datasets, ...) — see the other templates' copies of this file.
+export function SearchableSelect<T extends SearchableSelectItem>({
+  id,
+  value,
+  onSelect,
+  fetchPage,
+  placeholder,
+  searchPlaceholder = 'Search by name…',
+  emptyLabel = 'No results',
+  disabled,
+  className,
+}: Props<T>) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [items, setItems] = useState<T[]>([]);
+  const [selectedItem, setSelectedItem] = useState<T | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  // Guards against a slow, stale page landing after a newer search/open.
+  const requestIdRef = useRef(0);
+
+  // (Re)load the first page whenever the dropdown opens or the search term
+  // changes while it's open.
+  useEffect(() => {
+    if (!open) return;
+    const myRequest = ++requestIdRef.current;
+    setLoading(true);
+    fetchPage(search, 0, PAGE_SIZE)
+      .then((page) => {
+        if (requestIdRef.current !== myRequest) return;
+        setItems(page);
+        setHasMore(page.length === PAGE_SIZE);
+      })
+      .catch((e) => console.error('Failed to load options', e))
+      .finally(() => {
+        if (requestIdRef.current === myRequest) setLoading(false);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- fetchPage identity isn't expected to change per render
+  }, [open, search]);
+
+  function loadMore() {
+    if (loadingMore || loading || !hasMore) return;
+    const myRequest = requestIdRef.current;
+    const offset = items.length;
+    setLoadingMore(true);
+    fetchPage(search, offset, PAGE_SIZE)
+      .then((page) => {
+        if (requestIdRef.current !== myRequest) return;
+        setItems((prev) => {
+          const seen = new Set(prev.map((i) => i.id));
+          return [...prev, ...page.filter((i) => !seen.has(i.id))];
+        });
+        setHasMore(page.length === PAGE_SIZE);
+      })
+      .catch((e) => console.error('Failed to load more options', e))
+      .finally(() => setLoadingMore(false));
+  }
+
+  // Infinite scroll within the open list.
+  useEffect(() => {
+    if (!open || !hasMore) return;
+    const root = listRef.current;
+    const target = sentinelRef.current;
+    if (!root || !target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) loadMore();
+      },
+      { root, rootMargin: '100px' }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, hasMore, items.length]);
+
+  // Close on outside click / Escape; focus the search box on open.
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('mousedown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+    searchInputRef.current?.focus();
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
+  function handleToggle() {
+    if (disabled) return;
+    setOpen((prev) => {
+      const next = !prev;
+      if (next) setSearch('');
+      return next;
+    });
+  }
+
+  function handleSelect(item: T) {
+    setSelectedItem(item);
+    onSelect(item);
+    setOpen(false);
+  }
+
+  // selectedItem is a cache for the closed-button label — if the parent
+  // resets `value` out from under us (e.g. a downstream selection clearing
+  // when an upstream one changes), only trust the cache while it still
+  // matches the current value, so the label doesn't show stale text.
+  const resolvedItem = selectedItem?.id === value ? selectedItem : null;
+  const showPlaceholder = !resolvedItem && !value;
+  const label = resolvedItem?.name ?? (value || placeholder);
+
+  return (
+    <div ref={containerRef} className={cn('relative min-w-0 max-w-[420px] flex-1', className)}>
+      <button
+        id={id}
+        type="button"
+        disabled={disabled}
+        onClick={handleToggle}
+        className="flex w-full items-center justify-between gap-2 rounded-md border border-secondary bg-primary px-3 py-1.5 text-left text-sm text-primary focus:border-brand focus:outline-none disabled:opacity-60"
+      >
+        <span className={cn('min-w-0 truncate', showPlaceholder && 'text-tertiary')}>{label}</span>
+        <ChevronDownIcon className="h-4 w-4 shrink-0 text-tertiary" />
+      </button>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full z-20 mt-1 overflow-hidden rounded-md border border-secondary bg-primary shadow-lg">
+          <div className="border-b border-secondary p-1.5">
+            <input
+              ref={searchInputRef}
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="w-full rounded border border-secondary bg-primary px-2 py-1 text-sm text-primary focus:border-brand focus:outline-none"
+            />
+          </div>
+          <div ref={listRef} className="max-h-[260px] overflow-auto py-1">
+            {loading ? (
+              <div className="px-3 py-4 text-center text-sm text-tertiary">Loading…</div>
+            ) : items.length === 0 ? (
+              <div className="px-3 py-4 text-center text-sm text-tertiary">{emptyLabel}</div>
+            ) : (
+              <>
+                {items.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => handleSelect(item)}
+                    className={cn(
+                      'block w-full truncate px-3 py-1.5 text-left text-sm hover:bg-surface-level-1-hover',
+                      item.id === value ? 'bg-selected text-primary' : 'text-secondary'
+                    )}
+                  >
+                    {item.name}
+                  </button>
+                ))}
+                {hasMore && (
+                  <div ref={sentinelRef} className="px-3 py-2 text-center text-xs text-tertiary">
+                    {loadingMore ? 'Loading more…' : ''}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/_shared/components/Spinner.tsx b/internal/cmd/templates/_shared/components/Spinner.tsx
new file mode 100644
index 0000000..2a7d445
--- /dev/null
+++ b/internal/cmd/templates/_shared/components/Spinner.tsx
@@ -0,0 +1,26 @@
+// Canonical single source. apps_init.go copies this into a scaffolded app's
+// src/ at generation time, and only if the template imports it — there are no
+// standing per-template copies and no sync script.
+import { cn } from '../lib/utils';
+
+interface SpinnerProps {
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const SIZE_CLASSES: Record<NonNullable<SpinnerProps['size']>, string> = {
+  sm: 'h-3 w-3 border',
+  md: 'h-4 w-4 border-2',
+};
+
+export function Spinner({ size = 'md', className }: SpinnerProps) {
+  return (
+    <span
+      className={cn(
+        'inline-block shrink-0 animate-spin rounded-full border-tertiary border-t-brand',
+        SIZE_CLASSES[size],
+        className
+      )}
+    />
+  );
+}
diff --git a/internal/cmd/templates/_shared/lib/utils.ts b/internal/cmd/templates/_shared/lib/utils.ts
new file mode 100644
index 0000000..a5f1f4d
--- /dev/null
+++ b/internal/cmd/templates/_shared/lib/utils.ts
@@ -0,0 +1,6 @@
+// Canonical single source. apps_init.go copies this into a scaffolded app's
+// src/ at generation time, and only if the template imports it — there are no
+// standing per-template copies and no sync script.
+export function cn(...classes: (string | false | null | undefined)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
diff --git a/internal/cmd/templates/agents-md/_common.md b/internal/cmd/templates/agents-md/_common.md
new file mode 100644
index 0000000..0c1ab08
--- /dev/null
+++ b/internal/cmd/templates/agents-md/_common.md
@@ -0,0 +1,78 @@
+# AGENTS.md — building a LangSmith custom app
+
+This app runs in a sandboxed iframe with no network access of its own —
+every LangSmith API call goes through `window.langsmith.call`. `src/entry.tsx`
+exports `render(data, root, metadata)`; keep that shape, the sandbox depends
+on it. `data` is normally `{}`; call `window.langsmith.setData(patch)` if you
+need to push a mutation out for the host to persist.
+
+## Calling the LangSmith API
+
+```ts
+const projects = await window.langsmith.call('GET /api/v1/sessions', {
+  params: { limit: '20' },
+});
+```
+
+`operation` is `"<METHOD> <path>"` — use the full path including its prefix
+(`/api/v1/...` for Python-hosted endpoints, `/v1/platform/...` and `/v2/...`
+for Go-hosted ones). `args` carries `params` (query string) and/or `body`
+(JSON). This is a generic passthrough, not a curated allowlist — anything
+your API key can already do works; a permission error is a real limit of the
+key. Full reference: https://docs.langchain.com/langsmith/home. Base URL:
+`https://api.smith.langchain.com` (or your self-hosted instance's URL).
+
+## Theme
+
+`metadata.mode` is `"dark"` | `"light"`. The sandbox sets `html.dark` from it
+before every render, so Tailwind/token-based UIs theme for free with no
+branching. Only branch on it yourself if you're using inline styles — and
+re-check it every render, since it can change without a remount.
+
+## Filter DSL for metadata equality
+
+Query endpoints take a `filter` string. Metadata equality is **two paired
+clauses**, not `eq(metadata.key, ...)`:
+
+```
+and(eq(metadata_key, "ls_agent_purpose"), eq(metadata_value, "coding"))
+```
+
+Combine with `and(...)` / `or(...)`; other examples: `has(tags, "prod")`,
+`eq(name, "ChatOpenAI")`, `eq(is_root, true)`.
+
+<!-- TEMPLATE-SPECIFIC -->
+
+## More of the LangSmith API (starting points, not exhaustive)
+
+**Runs**
+- `POST /api/v1/runs/query` — query runs (body: `session`, `filter`, `is_root`, `run_type`, `start_time`, `limit`, `select`); returns `{ runs, cursor }`
+- `POST /api/v1/runs/stats` — server-side aggregates over a filtered set of runs, no row limit (counts, error rate, latency percentiles, token/cost sums) — prefer this over paging through `runs/query` for any headline number
+- `POST /api/v1/runs/group/stats` — same, grouped (e.g. `group_by: "conversation"` for a distinct thread count)
+- `GET /api/v1/runs/{run_id}` — fetch one full run (all fields + inputs/outputs)
+- `POST /api/v1/runs` / `PATCH /api/v1/runs/{run_id}` — create / update a run
+
+**Projects (tracing sessions)**
+- `GET /api/v1/sessions` — list projects
+- `GET /api/v1/sessions/{session_id}` — get a project
+
+**Datasets & experiments**
+- `GET /api/v1/datasets` — list datasets
+- `POST /api/v1/datasets/{dataset_id}/runs` — per-example rows across experiments
+- `POST /v1/platform/datasets/{dataset_id}/examples` — create examples
+
+**Feedback**
+- `POST /api/v1/feedback` — create feedback
+- `GET /api/v1/feedback?run={run_id}` — list feedback for a run
+- `GET /api/v1/feedback-configs?key={key}` — a feedback key's type / direction
+
+**Annotation queues**
+- `GET /api/v1/annotation-queues` — list queues
+- `GET /api/v1/annotation-queues/{queue_id}/runs` — list runs in a queue
+
+**Threads**
+- `POST /v2/threads/query` — query threads
+- `GET /v2/threads/{thread_id}/traces` — get a thread's traces
+
+If you need something not listed, check the docs — almost everything in the
+LangSmith API is reachable this way.
diff --git a/internal/cmd/templates/agents-md/annotation_queue.md b/internal/cmd/templates/agents-md/annotation_queue.md
new file mode 100644
index 0000000..701b0c5
--- /dev/null
+++ b/internal/cmd/templates/agents-md/annotation_queue.md
@@ -0,0 +1,9 @@
+## This template: annotation-queue review
+
+A 3-pane queue-review UI: run list, inputs/outputs viewer, feedback rubric.
+It picks a queue via `GET /api/v1/annotation-queues` and drives everything
+else through `window.langsmith.call` — see `src/api.ts`.
+
+This is just a starting point, not a spec. Change the layout, the review
+flow, or the whole concept — rip out anything here and build whatever app
+you actually want.
diff --git a/internal/cmd/templates/agents-md/annotation_queue_grid.md b/internal/cmd/templates/agents-md/annotation_queue_grid.md
new file mode 100644
index 0000000..420271e
--- /dev/null
+++ b/internal/cmd/templates/agents-md/annotation_queue_grid.md
@@ -0,0 +1,9 @@
+## This template: annotation-queue review, as a spreadsheet grid
+
+Reviews an annotation queue as a spreadsheet grid — rows are queue runs,
+columns are rubric keys, editable inline. See `src/api.ts` and
+`src/components/DataGrid.tsx`.
+
+This is just a starting point, not a spec. Change the grid, the review flow,
+or the whole concept — rip out anything here and build whatever app you
+actually want.
diff --git a/internal/cmd/templates/agents-md/coding_agent_dashboard.md b/internal/cmd/templates/agents-md/coding_agent_dashboard.md
new file mode 100644
index 0000000..1e8548d
--- /dev/null
+++ b/internal/cmd/templates/agents-md/coding_agent_dashboard.md
@@ -0,0 +1,10 @@
+## This template: coding-agent dashboard
+
+Headline stats (turns, threads, cost, tokens, errors, latency) plus a
+recent-runs table, for one project's coding-agent traces
+(`ls_agent_purpose == "coding"`). Stats come from LangSmith's `runs/stats` /
+`runs/group/stats` endpoints rather than sampling raw runs — see `src/api.ts`.
+
+This is just a starting point, not a spec. Change the metrics, the layout, or
+the whole concept — rip out anything here and build whatever app you actually
+want.
diff --git a/internal/cmd/templates/agents-md/experiment_comparison.md b/internal/cmd/templates/agents-md/experiment_comparison.md
new file mode 100644
index 0000000..2dba202
--- /dev/null
+++ b/internal/cmd/templates/agents-md/experiment_comparison.md
@@ -0,0 +1,9 @@
+## This template: experiment-comparison dashboard
+
+Compares evaluation experiments for one dataset — regressions in feedback
+scores, latency, cost, and tokens vs a chosen baseline. See `src/api.ts` for
+the calls it makes and `src/lib/delta.ts` for how deltas are computed.
+
+This is just a starting point, not a spec. Change the metrics, the charts,
+or the whole concept — rip out anything here and build whatever app you
+actually want.
diff --git a/internal/cmd/templates/annotation-queue-grid/.gitignore b/internal/cmd/templates/annotation-queue-grid/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/internal/cmd/templates/annotation-queue-grid/README.md b/internal/cmd/templates/annotation-queue-grid/README.md
new file mode 100644
index 0000000..a1cefb9
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/README.md
@@ -0,0 +1,90 @@
+# {{.Name}}
+
+{{.Description}}
+
+A LangSmith custom app, scaffolded by `langsmith apps init` — a real,
+working annotation-queue review UI rendered as a **spreadsheet**: one row per
+queue run, one column per rubric key, cells edited inline and saved as you go,
+`Mark Completed` to complete a row. Meant to vibe-code from here, not a toy example.
+**Read `AGENTS.md` first** — it documents the LangSmith API surface this app
+can call.
+
+## What this is
+
+A custom app is a small React/TS UI rendered inside LangSmith in a
+locked-down sandbox (`sandbox="allow-scripts"`, no `allow-same-origin`). It
+never gets direct network access or a real credential — everything goes
+through a `postMessage` bridge to the host page (`window.langsmith.call`),
+which proxies to the real LangSmith API under the viewer's own session (or
+your local `LANGSMITH_API_KEY` when running `langsmith apps dev`).
+
+Since the sandbox has no bundler or npm access at runtime, this app is built
+with Vite in **library mode** into a single dependency-free CJS file
+(`dist/bundle.js`) — see `vite.config.ts` and `src/entry.tsx`. Use real
+React/TS and npm dependencies freely; they all get inlined at build time.
+Tailwind's compiled CSS is inlined too (`src/index.css` imported with
+`?inline` in `entry.tsx`) and injected via a `<style>` tag at first render —
+there's no way to `<link>` a second file into this sandbox.
+
+Apps are uniform — the host hands you no bound context (`data` is always
+`{}`). This app picks its own annotation queue: the top bar lists your
+workspace's queues (`GET /api/v1/annotation-queues`) and, once one is
+selected, everything else (which runs are in the queue, the rubric, existing
+feedback, marking a run complete) is fetched via `window.langsmith.call`. See
+`src/api.ts` and `src/components/QueueBar.tsx`.
+
+## Develop
+
+`langsmith apps init` already ran `npm install` and `npm run build` for you,
+so `dist/bundle.js` exists and `langsmith apps dev` works immediately:
+
+```bash
+langsmith apps dev
+```
+
+`apps dev` runs the app inside a real sandboxed iframe, identical
+restrictions to production, and automatically starts `npm run watch` for you
+(it detects the script in `package.json`) — edit the app, save, and the
+preview reloads on its own. Pass `--no-watch` if you'd rather drive the build
+yourself. Pick a queue from the in-app dropdown once it loads (it calls the
+real API using your local `LANGSMITH_API_KEY`, so it lists queues that
+actually exist in your workspace).
+
+## The bridge contract
+
+`src/entry.tsx` exports a `render(data, root, metadata)` function — the
+sandbox calls it once when `data` (`{}`) arrives, and again if `data` or
+`metadata` changes. `metadata.mode` is `"dark"` or `"light"`; the sandbox
+sets `html.dark` from it, so this Tailwind/token UI themes automatically
+(branch on `metadata.mode` only if you use inline styles):
+
+```ts
+export default {
+  render(data: {}, root: HTMLElement, metadata: { mode: 'dark' | 'light' }) {
+    // mount your app into root
+  },
+};
+```
+
+`window.langsmith`, injected by the host page, gives you:
+
+- `window.langsmith.call(operation, args)` — `operation` is a
+  `"<METHOD> <path>"` string (e.g. `"GET /api/v1/annotation-queues/{id}/runs"`),
+  forwarded as-is to the real LangSmith API. Not a curated allowlist — see
+  `AGENTS.md` for the available surface. Returns a Promise.
+- `window.langsmith.setData(patch)` — push a data mutation out for the host
+  to persist (rarely needed; most apps just call the API directly).
+- `window.langsmith.feedback.create(args)` — sugar over
+  `call('POST /api/v1/feedback', {body: args})`, since that's extremely common.
+
+## Deploy
+
+```bash
+npm run build
+langsmith apps push
+```
+
+The first `push` creates the app and writes `.langsmith/app.json` (the app's
+ID) into this directory — commit it so teammates' pushes update the same
+app instead of creating a new one. Every push after that updates it in
+place.
diff --git a/internal/cmd/templates/annotation-queue-grid/package.json b/internal/cmd/templates/annotation-queue-grid/package.json
new file mode 100644
index 0000000..362dec5
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "{{.Name}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
+  },
+  "dependencies": {
+    "@langchain/untitled-ui-icons": "^1.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/postcss.config.js b/internal/cmd/templates/annotation-queue-grid/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/App.tsx b/internal/cmd/templates/annotation-queue-grid/src/App.tsx
new file mode 100644
index 0000000..ec01672
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/App.tsx
@@ -0,0 +1,262 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { DataGrid } from './components/DataGrid';
+import { QueueBar } from './components/QueueBar';
+import { fetchFeedbackConfigs, fetchFeedbacks, fetchQueue, markRunComplete } from './api';
+import { useRunSection } from './hooks/useRunSection';
+import type { AnnotationQueue, FeedbackConfig, FeedbackItem } from './types';
+
+interface Props {
+  /** Optional starting queue. Apps are uniform now and normally receive {}, so
+   * this is usually empty and the user picks a queue via the QueueBar. */
+  queueId?: string;
+  /** Host render metadata; `metadata.mode` is "dark"|"light", applied by the sandbox — no branching needed. */
+  metadata?: RenderMetadata;
+}
+
+// feedbackByRun[runId][feedbackKey] → the latest saved feedback for that cell.
+export type FeedbackByRun = Record<string, Record<string, FeedbackItem>>;
+
+export function App({ queueId: initialQueueId }: Props) {
+  const [queueId, setQueueId] = useState(initialQueueId ?? '');
+  const [queue, setQueue] = useState<AnnotationQueue | null>(null);
+  const [configs, setConfigs] = useState<Record<string, FeedbackConfig>>({});
+  const [feedbackByRun, setFeedbackByRun] = useState<FeedbackByRun>({});
+  const [activeRow, setActiveRow] = useState(0);
+  const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
+  const [completeError, setCompleteError] = useState<string | null>(null);
+  const [selectedRunIds, setSelectedRunIds] = useState<Set<string>>(new Set());
+
+  const section = useRunSection(queueId || undefined, 'needs_my_review');
+  const rows = section.runs;
+
+  // Refs so the window keydown listener always calls the latest handlers
+  // (same trick as the 3-pane App.tsx).
+  const completeRef = useRef<(index: number) => void>(() => {});
+  const moveRef = useRef<(direction: 'up' | 'down') => void>(() => {});
+
+  // Columns are the rubric's feedback keys.
+  // Assertion-flagged items are pass/fail claims managed elsewhere, not
+  // scored feedback, so they're excluded (same as the real "Edit Annotation
+  // Queue" page's Feedback Rubrics list).
+  const columns = useMemo(
+    () => (queue?.rubric_items ?? []).filter((item) => !item.is_assertion),
+    [queue?.rubric_items]
+  );
+
+  // Reset per-queue UI state when the queue changes (run loading itself is
+  // owned by useRunSection, keyed on the same queueId).
+  useEffect(() => {
+    setQueue(null);
+    setActiveRow(0);
+    setExpandedRunId(null);
+    setCompleteError(null);
+    setSelectedRunIds(new Set());
+    if (!queueId) return;
+    fetchQueue(queueId)
+      .then(setQueue)
+      .catch((e) => console.error('Failed to load queue', e));
+  }, [queueId]);
+
+  // Fetch each key's type/min/max/categories config — the rubric item carries none (see RubricItem).
+  const columnKeys = useMemo(() => columns.map((c) => c.feedback_key), [columns]);
+  useEffect(() => {
+    if (columnKeys.length === 0) {
+      setConfigs({});
+      return;
+    }
+    fetchFeedbackConfigs(columnKeys)
+      .then((cfgs) => {
+        const map: Record<string, FeedbackConfig> = {};
+        for (const c of cfgs) map[c.feedback_key] = c.feedback_config;
+        setConfigs(map);
+      })
+      .catch((e) => console.error('Failed to load feedback configs', e));
+  }, [columnKeys.join(',')]);
+
+  // Load existing feedback for every loaded row so already-scored cells are
+  // prefilled — re-runs as loadMore brings in new rows, only fetching the
+  // ones we don't already have.
+  useEffect(() => {
+    const idsToFetch = rows.map((r) => r.id).filter((id) => !(id in feedbackByRun));
+    if (idsToFetch.length === 0) return;
+    let cancelled = false;
+    Promise.all(
+      idsToFetch.map((id) =>
+        fetchFeedbacks(id)
+          .then((items) => [id, items] as const)
+          .catch((e) => {
+            console.error('Failed to load feedback for run', id, e);
+            return [id, [] as FeedbackItem[]] as const;
+          })
+      )
+    ).then((entries) => {
+      if (cancelled) return;
+      setFeedbackByRun((prev) => {
+        const next = { ...prev };
+        for (const [runId, items] of entries) {
+          const byKey: Record<string, FeedbackItem> = {};
+          for (const item of items) byKey[item.key] = item;
+          next[runId] = byKey;
+        }
+        return next;
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rows.map((r) => r.id).join(',')]);
+
+  function handleCellSaved(runId: string, feedback: FeedbackItem) {
+    setFeedbackByRun((prev) => ({
+      ...prev,
+      [runId]: { ...(prev[runId] ?? {}), [feedback.key]: feedback },
+    }));
+  }
+
+  function handleCellDeleted(runId: string, feedbackKey: string) {
+    setFeedbackByRun((prev) => {
+      const row = { ...(prev[runId] ?? {}) };
+      delete row[feedbackKey];
+      return { ...prev, [runId]: row };
+    });
+  }
+
+  // Optimistically remove a completed row and keep the active row within
+  // bounds; restore it (and surface the error) if the server rejects it.
+  function handleComplete(index: number) {
+    const run = rows[index];
+    if (!run) return;
+    const queueRunId = run.queue_run_id;
+    setCompleteError(null);
+    section.removeRun(queueRunId);
+    setActiveRow((prev) => Math.max(0, Math.min(prev, rows.length - 2)));
+    markRunComplete(queueRunId).catch((e) => {
+      console.error('Failed to mark complete — restoring row', e);
+      section.restoreRun(run, index);
+      setCompleteError(e instanceof Error ? e.message : String(e));
+    });
+  }
+  useEffect(() => {
+    completeRef.current = handleComplete;
+  });
+
+  function toggleRowSelected(queueRunId: string) {
+    setSelectedRunIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(queueRunId)) next.delete(queueRunId);
+      else next.add(queueRunId);
+      return next;
+    });
+  }
+
+  function toggleSelectAll() {
+    setSelectedRunIds((prev) =>
+      prev.size === rows.length ? new Set() : new Set(rows.map((r) => r.queue_run_id))
+    );
+  }
+
+  // Mark every selected row complete at once. Each optimistically removed up
+  // front; any that the server rejects are restored (at their original
+  // index) and rolled into a single error summary.
+  async function handleBulkComplete() {
+    const targets = rows
+      .map((run, index) => ({ run, index }))
+      .filter(({ run }) => selectedRunIds.has(run.queue_run_id));
+    if (targets.length === 0) return;
+
+    setCompleteError(null);
+    setSelectedRunIds(new Set());
+    for (const { run } of targets) section.removeRun(run.queue_run_id);
+
+    const results = await Promise.allSettled(
+      targets.map(({ run }) => markRunComplete(run.queue_run_id))
+    );
+    const failures = targets.filter((_, i) => results[i].status === 'rejected');
+    if (failures.length > 0) {
+      failures.forEach(({ run, index }) => section.restoreRun(run, index));
+      setCompleteError(
+        `Failed to mark ${failures.length} of ${targets.length} run${targets.length === 1 ? '' : 's'} complete`
+      );
+    }
+  }
+
+  function moveActiveRow(direction: 'up' | 'down') {
+    setActiveRow((prev) => {
+      if (rows.length === 0) return 0;
+      const next = direction === 'up' ? prev - 1 : prev + 1;
+      if (next < 0 || next >= rows.length) return prev;
+      return next;
+    });
+  }
+  useEffect(() => {
+    moveRef.current = moveActiveRow;
+  });
+
+  // ArrowUp/ArrowDown move between rows (ignored mid-edit); Escape blurs the cell.
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      const el = document.activeElement as HTMLElement | null;
+      const tag = el?.tagName;
+      const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el?.isContentEditable;
+
+      if (e.key === 'Escape') {
+        el?.blur();
+        return;
+      }
+      if (inInput) return;
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        moveRef.current('up');
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        moveRef.current('down');
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  if (!queueId) {
+    return (
+      <div className="flex h-screen flex-col bg-surface-level-1">
+        <QueueBar selectedQueueId={queueId} onSelect={setQueueId} />
+        <div className="flex flex-1 items-center justify-center">
+          <span className="text-sm text-tertiary">Select an annotation queue to start reviewing.</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden bg-surface-level-1">
+      <QueueBar selectedQueueId={queueId} onSelect={setQueueId} />
+      <div className="flex min-h-0 flex-1 flex-col p-space-4">
+        <DataGrid
+          queue={queue}
+          columns={columns}
+          configs={configs}
+          rows={rows}
+          total={section.total}
+          rowsLoading={section.loading}
+          loadingMore={section.loadingMore}
+          hasMore={section.hasMore}
+          onLoadMore={section.loadMore}
+          feedbackByRun={feedbackByRun}
+          activeRow={activeRow}
+          expandedRunId={expandedRunId}
+          onToggleExpand={(runId) => setExpandedRunId((prev) => (prev === runId ? null : runId))}
+          completeError={completeError}
+          selectedRunIds={selectedRunIds}
+          onToggleRowSelected={toggleRowSelected}
+          onToggleSelectAll={toggleSelectAll}
+          onBulkComplete={handleBulkComplete}
+          onActivateRow={setActiveRow}
+          onCellSaved={handleCellSaved}
+          onCellDeleted={handleCellDeleted}
+          onComplete={(index) => completeRef.current(index)}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/api.ts b/internal/cmd/templates/annotation-queue-grid/src/api.ts
new file mode 100644
index 0000000..87f4282
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/api.ts
@@ -0,0 +1,106 @@
+// LangSmith API access, entirely through window.langsmith.call — see
+// global.d.ts for the bridge's type, and AGENTS.md for the operation format
+// and available endpoints. No fetch()/XMLHttpRequest here: the sandbox this
+// app runs in has no network access of its own.
+import type {
+  AnnotationQueue,
+  AnnotationQueueRun,
+  FeedbackConfigSchema,
+  FeedbackItem,
+  FeedbackSubmission,
+} from './types';
+
+export async function fetchQueues(
+  search = '',
+  offset = 0,
+  limit = 25
+): Promise<AnnotationQueue[]> {
+  const params: Record<string, string> = { limit: String(limit), offset: String(offset) };
+  if (search) params.name_contains = search;
+  return window.langsmith.call('GET /api/v1/annotation-queues', {
+    params,
+  }) as Promise<AnnotationQueue[]>;
+}
+
+export async function fetchQueue(queueId: string): Promise<AnnotationQueue> {
+  return window.langsmith.call(
+    `GET /api/v1/annotation-queues/${queueId}`
+  ) as Promise<AnnotationQueue>;
+}
+
+export type AnnotationQueueRunSectionStatus =
+  | 'needs_my_review'
+  | 'needs_others_review'
+  | 'completed';
+
+export async function fetchQueueRuns(
+  queueId: string,
+  status: AnnotationQueueRunSectionStatus | null = null,
+  limit = 50,
+  offset = 0
+): Promise<AnnotationQueueRun[]> {
+  const params: Record<string, string> = { limit: String(limit), offset: String(offset) };
+  if (status) params.status = status;
+  return window.langsmith.call(`GET /api/v1/annotation-queues/${queueId}/runs`, {
+    params,
+  }) as Promise<AnnotationQueueRun[]>;
+}
+
+// The /runs endpoint's total-count header isn't reachable through the
+// window.langsmith.call bridge (it only returns the parsed body), so we ask
+// this endpoint separately to learn how many runs exist for a status.
+export async function fetchQueueRunsSize(
+  queueId: string,
+  status: AnnotationQueueRunSectionStatus
+): Promise<number> {
+  const result = (await window.langsmith.call(
+    `GET /api/v1/annotation-queues/${queueId}/size`,
+    { params: { status } }
+  )) as { size: number };
+  return result.size;
+}
+
+export async function fetchFeedbackConfigs(keys: string[]): Promise<FeedbackConfigSchema[]> {
+  if (keys.length === 0) return [];
+  return window.langsmith.call('GET /api/v1/feedback-configs', {
+    params: { key: keys },
+  }) as Promise<FeedbackConfigSchema[]>;
+}
+
+export async function submitFeedback(feedback: FeedbackSubmission): Promise<FeedbackItem> {
+  return window.langsmith.call('POST /api/v1/feedback', {
+    body: {
+      ...feedback,
+      feedback_source: { type: 'app' },
+      // The /feedback schema defaults this to true; explicitly opt out like
+      // the real annotation queue UI does — a review action shouldn't have
+      // the side effect of extending the underlying trace's retention.
+      extend_trace_retention: false,
+    },
+  }) as Promise<FeedbackItem>;
+}
+
+export async function fetchFeedbacks(runId: string): Promise<FeedbackItem[]> {
+  return window.langsmith.call('GET /api/v1/feedback', {
+    params: { run: runId },
+  }) as Promise<FeedbackItem[]>;
+}
+
+export async function patchFeedback(
+  feedbackId: string,
+  patch: Partial<Pick<FeedbackItem, 'score' | 'value' | 'comment'>>
+): Promise<FeedbackItem> {
+  return window.langsmith.call(`PATCH /api/v1/feedback/${feedbackId}`, {
+    body: patch,
+  }) as Promise<FeedbackItem>;
+}
+
+export async function deleteFeedback(feedbackId: string): Promise<void> {
+  await window.langsmith.call(`DELETE /api/v1/feedback/${feedbackId}`);
+}
+
+export async function markRunComplete(queueRunId: string): Promise<void> {
+  await window.langsmith.call(`POST /api/v1/annotation-queues/status/${queueRunId}`, {
+    body: { status: 'completed' },
+  });
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/components/DataGrid.tsx b/internal/cmd/templates/annotation-queue-grid/src/components/DataGrid.tsx
new file mode 100644
index 0000000..b7581d8
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/components/DataGrid.tsx
@@ -0,0 +1,412 @@
+import { Fragment, useEffect, useRef } from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from '@langchain/untitled-ui-icons';
+import { GridCell } from './GridCell';
+import { Spinner } from './Spinner';
+import type {
+  AnnotationQueue,
+  AnnotationQueueRun,
+  FeedbackConfig,
+  FeedbackItem,
+  RubricItem,
+} from '../types';
+import { cn } from '../lib/utils';
+
+interface Props {
+  queue: AnnotationQueue | null;
+  columns: RubricItem[];
+  configs: Record<string, FeedbackConfig>;
+  rows: AnnotationQueueRun[];
+  /** Exact total for this section (see useRunSection) — shown in the header
+   * bar instead of deriving a count from the loaded page. */
+  total: number;
+  rowsLoading: boolean;
+  loadingMore: boolean;
+  hasMore: boolean;
+  onLoadMore: () => void;
+  feedbackByRun: Record<string, Record<string, FeedbackItem>>;
+  activeRow: number;
+  expandedRunId: string | null;
+  completeError: string | null;
+  selectedRunIds: Set<string>;
+  onToggleExpand: (runId: string) => void;
+  onToggleRowSelected: (queueRunId: string) => void;
+  onToggleSelectAll: () => void;
+  onBulkComplete: () => void;
+  onActivateRow: (index: number) => void;
+  onCellSaved: (runId: string, feedback: FeedbackItem) => void;
+  onCellDeleted: (runId: string, feedbackKey: string) => void;
+  onComplete: (index: number) => void;
+}
+
+function stringifyIO(value: Record<string, unknown> | null): string {
+  if (!value) return '';
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return '';
+  }
+}
+
+function prettyIO(value: Record<string, unknown> | null): string {
+  if (!value) return '(empty)';
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+// Clickable, always-visibly-interactive treatment shared by the Run
+// Name/Inputs/Outputs cells — the whole column, not just its text, opens
+// the expanded row.
+const expandableCellClass =
+  'max-w-[220px] cursor-pointer truncate px-3 py-1.5 align-middle hover:bg-surface-level-2';
+
+export function DataGrid({
+  queue,
+  columns,
+  configs,
+  rows,
+  total,
+  rowsLoading,
+  loadingMore,
+  hasMore,
+  onLoadMore,
+  feedbackByRun,
+  activeRow,
+  expandedRunId,
+  completeError,
+  selectedRunIds,
+  onToggleExpand,
+  onToggleRowSelected,
+  onToggleSelectAll,
+  onBulkComplete,
+  onActivateRow,
+  onCellSaved,
+  onCellDeleted,
+  onComplete,
+}: Props) {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const selectAllRef = useRef<HTMLInputElement | null>(null);
+
+  // Infinite scroll: fetch the next page once the sentinel at the bottom of
+  // the scroll container comes into view.
+  useEffect(() => {
+    if (!hasMore) return;
+    const root = scrollRef.current;
+    const target = sentinelRef.current;
+    if (!root || !target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) onLoadMore();
+      },
+      { root, rootMargin: '200px' }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [hasMore, onLoadMore]);
+
+  // The sentinel above only helps once it's actually on screen — but when
+  // every loaded row gets marked complete (e.g. a bulk action clears the
+  // whole visible page), the table itself unmounts in favor of the empty
+  // state below, taking the sentinel with it. Nothing would ever trigger
+  // the next page again even though more rows exist server-side, so fetch
+  // proactively whenever the list runs dry while more is still available.
+  useEffect(() => {
+    if (rows.length === 0 && hasMore && !rowsLoading && !loadingMore) {
+      onLoadMore();
+    }
+  }, [rows.length, hasMore, rowsLoading, loadingMore, onLoadMore]);
+
+  // Reflect partial selection as the native indeterminate visual — plain
+  // HTML has no attribute for this, it's set imperatively on the node.
+  useEffect(() => {
+    if (!selectAllRef.current) return;
+    selectAllRef.current.indeterminate = selectedRunIds.size > 0 && selectedRunIds.size < rows.length;
+  }, [selectedRunIds.size, rows.length]);
+
+  if (!queue) {
+    return (
+      <div className="flex flex-1 items-center justify-center rounded-lg border border-secondary">
+        <span className="text-sm text-tertiary">Loading queue…</span>
+      </div>
+    );
+  }
+
+  // A row's required columns must all have feedback before it can be marked
+  // complete — mirrors the 3-pane FeedbackPanel's allRequiredFilled gate.
+  function requiredFilled(runId: string): boolean {
+    const rowFeedback = feedbackByRun[runId] ?? {};
+    return columns.filter((c) => c.is_required).every((c) => rowFeedback[c.feedback_key] != null);
+  }
+
+  const colSpan = 1 + 3 + columns.length + 1;
+
+  // Arrow keys move focus between feedback cells (identified by the
+  // data-row-index/data-col-index GridCell stamps onto its input/select) —
+  // this is what makes the grid navigable like an actual spreadsheet
+  // instead of just editable one field at a time. Deliberately unconditional
+  // (not just at text boundaries): values here are short scores/categories/
+  // comments, so trading away in-text left/right cursor movement for fast
+  // cell-to-cell movement is the right default for a review workflow.
+  function handleGridKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+    const target = e.target as HTMLElement;
+    const rowAttr = target.getAttribute('data-row-index');
+    const colAttr = target.getAttribute('data-col-index');
+    if (rowAttr == null || colAttr == null) return;
+    const row = Number(rowAttr);
+    const col = Number(colAttr);
+
+    let nextRow = row;
+    let nextCol = col;
+    if (e.key === 'ArrowUp') nextRow -= 1;
+    else if (e.key === 'ArrowDown') nextRow += 1;
+    else if (e.key === 'ArrowLeft') nextCol -= 1;
+    else nextCol += 1;
+
+    if (nextRow < 0 || nextRow >= rows.length || nextCol < 0 || nextCol >= columns.length) return;
+
+    e.preventDefault();
+    const el = scrollRef.current?.querySelector<HTMLElement>(
+      `[data-row-index="${nextRow}"][data-col-index="${nextCol}"]`
+    );
+    if (!el) return;
+    el.focus();
+    if (el instanceof HTMLInputElement) el.select();
+    onActivateRow(nextRow);
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg border border-secondary">
+      {/* Header bar */}
+      <div className="flex items-center justify-between border-b border-secondary px-4 py-3">
+        <div className="flex items-baseline gap-2">
+          <span className="text-base font-medium text-primary">{queue.name}</span>
+          <span className="text-sm text-tertiary">
+            {Math.max(total, rows.length)} to review · ↑/↓/←/→ to move between cells
+          </span>
+        </div>
+        {selectedRunIds.size > 0 && (
+          <button
+            type="button"
+            onClick={onBulkComplete}
+            className="rounded-md bg-brand px-3 py-1.5 text-xs font-medium text-brand-on-fill transition-colors hover:bg-brand-hover"
+          >
+            Mark {selectedRunIds.size} Completed
+          </button>
+        )}
+      </div>
+
+      {completeError && (
+        <div role="alert" className="border-b border-secondary bg-error px-4 py-2 text-xs text-error-secondary">
+          Failed to mark complete: {completeError}
+        </div>
+      )}
+
+      {/* Grid */}
+      <div ref={scrollRef} onKeyDown={handleGridKeyDown} className="min-h-0 flex-1 overflow-auto">
+        {columns.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <span className="text-sm text-tertiary">This queue has no rubric items to score.</span>
+          </div>
+        ) : rows.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <span className="text-sm text-tertiary">
+              {/* hasMore here means the auto-fetch effect above is already
+                  loading the next page — never flash "nothing left" when
+                  we know there's more coming. */}
+              {rowsLoading || loadingMore || hasMore ? 'Loading runs…' : 'Nothing left to review 🎉'}
+            </span>
+          </div>
+        ) : (
+          <table className="w-full border-collapse text-left">
+            <thead className="sticky top-0 z-10 bg-surface-level-2">
+              <tr>
+                <th className="w-10 border-b border-secondary px-3 py-2">
+                  <input
+                    ref={selectAllRef}
+                    type="checkbox"
+                    checked={rows.length > 0 && selectedRunIds.size === rows.length}
+                    onChange={onToggleSelectAll}
+                    aria-label="Select all rows"
+                    className="h-4 w-4 cursor-pointer accent-[var(--bg-brand)]"
+                  />
+                </th>
+                <th className="w-[220px] min-w-[220px] border-b border-secondary px-3 py-2 text-xs font-medium text-tertiary">
+                  Run Name
+                </th>
+                <th className="w-[220px] min-w-[220px] border-b border-l border-secondary px-3 py-2 text-xs font-medium text-tertiary">
+                  Inputs
+                </th>
+                <th className="w-[220px] min-w-[220px] border-b border-l border-secondary px-3 py-2 text-xs font-medium text-tertiary">
+                  Outputs
+                </th>
+                {columns.map((col) => (
+                  <th
+                    key={col.feedback_key}
+                    className="min-w-[140px] border-b border-l border-secondary px-3 py-2 text-xs font-medium text-tertiary"
+                    title={col.description ?? undefined}
+                  >
+                    <span className="flex items-center gap-1">
+                      {col.feedback_key}
+                      {col.is_required && <span className="text-error-primary">*</span>}
+                    </span>
+                  </th>
+                ))}
+                <th className="w-[140px] border-b border-l border-secondary px-3 py-2 text-xs font-medium text-tertiary">
+                  {/* Mark Completed column */}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((run, index) => {
+                const isActive = index === activeRow;
+                const isExpanded = expandedRunId === run.id;
+                const isSelected = selectedRunIds.has(run.queue_run_id);
+                const rowFeedback = feedbackByRun[run.id] ?? {};
+                const inputsPreview = stringifyIO(run.inputs);
+                const outputsPreview = stringifyIO(run.outputs);
+                return (
+                  <Fragment key={run.queue_run_id}>
+                    <tr
+                      onClick={() => onActivateRow(index)}
+                      className={cn(
+                        'cursor-pointer',
+                        !isExpanded && 'border-b border-secondary',
+                        isActive
+                          ? 'bg-selected'
+                          : index % 2 === 1
+                            ? 'bg-secondary/30 hover:bg-surface-level-1-hover'
+                            : 'hover:bg-surface-level-1-hover'
+                      )}
+                    >
+                      <td className="px-3 py-1.5 align-middle" onClick={(e) => e.stopPropagation()}>
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={() => onToggleRowSelected(run.queue_run_id)}
+                          aria-label={`Select ${run.name ?? run.id}`}
+                          className="h-4 w-4 cursor-pointer accent-[var(--bg-brand)]"
+                        />
+                      </td>
+                      <td
+                        className={cn(expandableCellClass, 'text-sm text-secondary')}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onToggleExpand(run.id);
+                        }}
+                      >
+                        <div className="flex min-w-0 items-center gap-1.5">
+                          {isExpanded ? (
+                            <ChevronDownIcon className="h-3.5 w-3.5 shrink-0 text-tertiary" />
+                          ) : (
+                            <ChevronRightIcon className="h-3.5 w-3.5 shrink-0 text-tertiary" />
+                          )}
+                          <span className="min-w-0 truncate" title={run.name ?? run.id}>
+                            {run.name ?? run.id.slice(0, 8)}
+                          </span>
+                        </div>
+                      </td>
+                      <td
+                        className={cn(expandableCellClass, 'border-l border-secondary font-mono text-xs text-tertiary')}
+                        title={inputsPreview}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onToggleExpand(run.id);
+                        }}
+                      >
+                        {inputsPreview || '—'}
+                      </td>
+                      <td
+                        className={cn(expandableCellClass, 'border-l border-secondary font-mono text-xs text-tertiary')}
+                        title={outputsPreview}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onToggleExpand(run.id);
+                        }}
+                      >
+                        {outputsPreview || '—'}
+                      </td>
+                      {columns.map((col, colIndex) => (
+                        <td
+                          key={col.feedback_key}
+                          className="border-l border-secondary px-1 py-1 align-middle"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <GridCell
+                            item={col}
+                            config={configs[col.feedback_key]}
+                            runId={run.id}
+                            traceId={run.trace_id}
+                            sessionId={run.session_id}
+                            startTime={run.start_time}
+                            existingFeedback={rowFeedback[col.feedback_key]}
+                            rowIndex={index}
+                            colIndex={colIndex}
+                            onSaved={(fb) => onCellSaved(run.id, fb)}
+                            onDeleted={(key) => onCellDeleted(run.id, key)}
+                          />
+                        </td>
+                      ))}
+                      <td className="border-l border-secondary px-2 py-1 text-center align-middle">
+                        {/* One or more rows selected: only the bulk action
+                            in the header bar applies — hide the per-row
+                            button instead of leaving a redundant, easy-to-
+                            misclick affordance next to the checkboxes. */}
+                        {selectedRunIds.size === 0 && (
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onComplete(index);
+                            }}
+                            disabled={!requiredFilled(run.id)}
+                            title={!requiredFilled(run.id) ? 'Fill all required (*) columns first' : undefined}
+                            className="rounded-md bg-brand px-3 py-1 text-xs font-medium text-brand-on-fill transition-colors hover:bg-brand-hover disabled:opacity-50"
+                          >
+                            Mark Completed
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                    {isExpanded && (
+                      <tr className="border-b border-secondary bg-surface-level-1">
+                        <td colSpan={colSpan} className="px-3 py-3">
+                          <div className="grid grid-cols-2 gap-4">
+                            <div className="flex flex-col gap-1">
+                              <span className="text-xs font-medium text-tertiary">Inputs</span>
+                              <pre className="max-h-[300px] overflow-auto whitespace-pre-wrap break-words rounded-md bg-surface-level-2 p-2 font-mono text-xs text-secondary">
+                                {prettyIO(run.inputs)}
+                              </pre>
+                            </div>
+                            <div className="flex flex-col gap-1">
+                              <span className="text-xs font-medium text-tertiary">Outputs</span>
+                              <pre className="max-h-[300px] overflow-auto whitespace-pre-wrap break-words rounded-md bg-surface-level-2 p-2 font-mono text-xs text-secondary">
+                                {prettyIO(run.outputs)}
+                              </pre>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </Fragment>
+                );
+              })}
+              {hasMore && (
+                <tr>
+                  <td colSpan={colSpan} className="px-3 py-3">
+                    <div ref={sentinelRef} className="flex items-center justify-center">
+                      {loadingMore && <Spinner size="sm" />}
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/components/GridCell.tsx b/internal/cmd/templates/annotation-queue-grid/src/components/GridCell.tsx
new file mode 100644
index 0000000..2970d2d
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/components/GridCell.tsx
@@ -0,0 +1,203 @@
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDownIcon } from '@langchain/untitled-ui-icons';
+import { patchFeedback, submitFeedback, deleteFeedback } from '../api';
+import type { FeedbackConfig, FeedbackItem, RubricItem } from '../types';
+import { cn } from '../lib/utils';
+
+interface Props {
+  item: RubricItem;
+  config: FeedbackConfig | undefined;
+  runId: string;
+  traceId: string | undefined;
+  sessionId: string | undefined;
+  startTime: string | undefined;
+  existingFeedback: FeedbackItem | undefined;
+  /** Grid coordinates, stamped onto the focusable element as data
+   * attributes so DataGrid's arrow-key handler can find neighboring cells
+   * via the DOM without every cell needing to know about its siblings. */
+  rowIndex: number;
+  colIndex: number;
+  onSaved: (feedback: FeedbackItem) => void;
+  onDeleted: (feedbackKey: string) => void;
+}
+
+// One editable cell. Saves as-you-go via the same submit/patch/delete calls the 3-pane FeedbackPanel uses.
+export function GridCell({
+  item,
+  config,
+  runId,
+  traceId,
+  sessionId,
+  startTime,
+  existingFeedback,
+  rowIndex,
+  colIndex,
+  onSaved,
+  onDeleted,
+}: Props) {
+  const [score, setScore] = useState<number | null>(existingFeedback?.score ?? null);
+  const [comment, setComment] = useState<string>(existingFeedback?.comment ?? '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Resync when the underlying feedback identity changes (row reload / edit
+  // elsewhere), mirroring RubricCard's prevFeedbackId guard.
+  const prevFeedbackId = useRef<string | undefined>(existingFeedback?.id);
+  useEffect(() => {
+    if (existingFeedback?.id !== prevFeedbackId.current) {
+      prevFeedbackId.current = existingFeedback?.id;
+      setScore(existingFeedback?.score ?? null);
+      setComment(existingFeedback?.comment ?? '');
+      setError(null);
+    }
+  });
+
+  // Editor type comes from the feedback config (freeform when unconfigured,
+  // like LangSmith). Non-categorical, non-continuous keys fall through to freeform.
+  const configType = config?.type ?? 'freeform';
+  const isCategorical = configType === 'categorical' && !!config?.categories?.length;
+  const isContinuous = configType === 'continuous';
+
+  async function save(newScore: number | null, newValue: string | null, newComment?: string) {
+    setSaving(true);
+    setError(null);
+    try {
+      const commentVal = newComment !== undefined ? newComment : comment;
+      let saved: FeedbackItem;
+      if (existingFeedback) {
+        saved = await patchFeedback(existingFeedback.id, {
+          score: newScore,
+          value: newValue,
+          comment: commentVal || null,
+        });
+      } else {
+        saved = await submitFeedback({
+          key: item.feedback_key,
+          run_id: runId,
+          score: newScore,
+          value: newValue ?? undefined,
+          comment: commentVal || undefined,
+          trace_id: traceId,
+          session_id: sessionId,
+          start_time: startTime,
+        });
+      }
+      onSaved(saved);
+    } catch (e) {
+      console.error('Failed to save feedback', e);
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!existingFeedback) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await deleteFeedback(existingFeedback.id);
+      setScore(null);
+      setComment('');
+      onDeleted(item.feedback_key);
+    } catch (e) {
+      console.error('Failed to delete feedback', e);
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // Deliberately spreadsheet-like: a persistent visible box (not a
+  // hover-only/transparent border) so every fillable cell reads as
+  // "editable" at rest, with a bold same-color glow on focus mimicking a
+  // selected spreadsheet cell.
+  const cellInput = cn(
+    'w-full rounded-none border border-secondary bg-surface-level-1 px-2 py-1 text-sm text-primary transition-colors',
+    'hover:border-strong hover:bg-surface-level-1-hover',
+    'focus:border-brand focus:bg-primary focus:outline-none focus:shadow-[0_0_0_1px_var(--border-brand)]',
+    error && 'border-error-strong'
+  );
+
+  if (isCategorical) {
+    return (
+      <div className="relative">
+        <select
+          value={score ?? ''}
+          disabled={saving}
+          onChange={(e) => {
+            if (e.target.value === '') {
+              setScore(null);
+              handleDelete();
+              return;
+            }
+            const val = Number(e.target.value);
+            const cat = config!.categories!.find((c) => c.value === val);
+            setScore(val);
+            save(val, cat?.label ?? String(val));
+          }}
+          title={error ?? undefined}
+          data-row-index={rowIndex}
+          data-col-index={colIndex}
+          className={cn(cellInput, 'appearance-none pr-6', 'cursor-pointer', saving && 'opacity-50')}
+        >
+          <option value="">—</option>
+          {config!.categories!.map((cat) => (
+            <option key={cat.value} value={cat.value}>
+              {cat.label ?? String(cat.value)}
+            </option>
+          ))}
+        </select>
+        <ChevronDownIcon className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-tertiary" />
+      </div>
+    );
+  }
+
+  if (isContinuous) {
+    return (
+      <input
+        type="number"
+        step="any"
+        min={config?.min ?? undefined}
+        max={config?.max ?? undefined}
+        value={score ?? ''}
+        disabled={saving}
+        onChange={(e) => setScore(e.target.value === '' ? null : Number(e.target.value))}
+        onBlur={() => {
+          if (score == null && existingFeedback) handleDelete();
+          else if (score != null) save(score, null);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+        }}
+        placeholder="—"
+        title={error ?? undefined}
+        data-row-index={rowIndex}
+        data-col-index={colIndex}
+        className={cn(cellInput, saving && 'opacity-50')}
+      />
+    );
+  }
+
+  // Freeform
+  return (
+    <input
+      type="text"
+      value={comment}
+      disabled={saving}
+      onChange={(e) => setComment(e.target.value)}
+      onBlur={() => {
+        if (comment.trim()) save(null, null, comment);
+        else if (existingFeedback) handleDelete();
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+      }}
+      placeholder="—"
+      title={error ?? undefined}
+      data-row-index={rowIndex}
+      data-col-index={colIndex}
+      className={cn(cellInput, saving && 'opacity-50')}
+    />
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/components/QueueBar.tsx b/internal/cmd/templates/annotation-queue-grid/src/components/QueueBar.tsx
new file mode 100644
index 0000000..1a53541
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/components/QueueBar.tsx
@@ -0,0 +1,30 @@
+import { fetchQueues } from '../api';
+import type { AnnotationQueue } from '../types';
+import { SearchableSelect } from './SearchableSelect';
+
+interface Props {
+  selectedQueueId: string;
+  onSelect: (queueId: string) => void;
+}
+
+// Apps get no host context, so the app picks its own queue from this bar's
+// list of the workspace's queues — paginated (25/page) and searchable by
+// name server-side via fetchQueues' name_contains.
+export function QueueBar({ selectedQueueId, onSelect }: Props) {
+  return (
+    <div className="flex items-center gap-2 bg-surface-level-1 px-4 py-2">
+      <label htmlFor="ls-queue-select" className="shrink-0 text-sm font-medium text-secondary">
+        Annotation queue
+      </label>
+      <SearchableSelect<AnnotationQueue>
+        id="ls-queue-select"
+        value={selectedQueueId}
+        onSelect={(queue) => onSelect(queue.id)}
+        fetchPage={fetchQueues}
+        placeholder="Select a queue…"
+        searchPlaceholder="Search queues by name…"
+        emptyLabel="No annotation queues in this workspace"
+      />
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/entry.tsx b/internal/cmd/templates/annotation-queue-grid/src/entry.tsx
new file mode 100644
index 0000000..86fdf8a
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/entry.tsx
@@ -0,0 +1,37 @@
+import { createRoot, type Root } from 'react-dom/client';
+import { StrictMode } from 'react';
+import { App } from './App';
+// `?inline` gets the fully-processed (Tailwind + autoprefixer) CSS as a plain
+// string instead of Vite emitting a separate stylesheet asset — there's no
+// way to <link> a second file into this sandbox; everything has to be in the
+// one bundled entrypoint. See README.md.
+import css from './index.css?inline';
+
+let styleInjected = false;
+let root: Root | null = null;
+
+function ensureStyleInjected() {
+  if (styleInjected) return;
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+
+interface RenderData {
+  queueId?: string;
+}
+
+export default {
+  render(data: RenderData, rootEl: HTMLElement, metadata: RenderMetadata) {
+    ensureStyleInjected();
+    if (!root) root = createRoot(rootEl);
+    // metadata.mode is "dark"|"light". The sandbox sets html.dark from it, so
+    // this Tailwind UI themes without branching; passed to App.
+    root.render(
+      <StrictMode>
+        <App queueId={data?.queueId ?? ''} metadata={metadata} />
+      </StrictMode>
+    );
+  },
+};
diff --git a/internal/cmd/templates/annotation-queue-grid/src/global.d.ts b/internal/cmd/templates/annotation-queue-grid/src/global.d.ts
new file mode 100644
index 0000000..95c5301
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/global.d.ts
@@ -0,0 +1,21 @@
+export {};
+
+declare global {
+  /** render()'s 3rd arg, an open/extensible dict. v1 has only `mode`
+   * ("dark"|"light"); the sandbox sets `html.dark` from it. */
+  type RenderMetadata = { mode: 'dark' | 'light' };
+
+  interface Window {
+    /** Injected by the host page (LangSmith, or `langsmith apps dev` locally) — see AGENTS.md. */
+    langsmith: {
+      call: (
+        operation: string,
+        args?: { params?: Record<string, string | string[]>; body?: unknown }
+      ) => Promise<unknown>;
+      setData: (patch: Record<string, unknown>) => void;
+      feedback: {
+        create: (args: Record<string, unknown>) => Promise<unknown>;
+      };
+    };
+  }
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/hooks/useRunSection.ts b/internal/cmd/templates/annotation-queue-grid/src/hooks/useRunSection.ts
new file mode 100644
index 0000000..2b55fcb
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/hooks/useRunSection.ts
@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { fetchQueueRuns, fetchQueueRunsSize } from '../api';
+import type { AnnotationQueueRunSectionStatus } from '../api';
+import type { AnnotationQueueRun } from '../types';
+
+const PAGE_SIZE = 50;
+
+export interface RunSection {
+  runs: AnnotationQueueRun[];
+  /** Exact count for this status, from fetchQueueRunsSize — not an estimate,
+   * so callers can display it directly instead of deriving from runs.length. */
+  total: number;
+  loading: boolean;
+  loadingMore: boolean;
+  hasMore: boolean;
+  loadMore: () => void;
+  removeRun: (queueRunId: string) => void;
+  restoreRun: (run: AnnotationQueueRun, atIndex: number) => void;
+}
+
+/**
+ * Loads one status section of an annotation queue's runs, a page at a time.
+ * Total count comes from a separate /size call (not a response header — see
+ * fetchQueueRunsSize), and that total caps how far loadMore will page.
+ */
+export function useRunSection(
+  queueId: string | undefined,
+  status: AnnotationQueueRunSectionStatus
+): RunSection {
+  const [runs, setRuns] = useState<AnnotationQueueRun[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const loadingMoreRef = useRef(false);
+  const runsRef = useRef<AnnotationQueueRun[]>([]);
+  runsRef.current = runs;
+
+  useEffect(() => {
+    setRuns([]);
+    setTotal(0);
+    if (!queueId) return;
+    let cancelled = false;
+    setLoading(true);
+    Promise.all([
+      fetchQueueRuns(queueId, status, PAGE_SIZE, 0),
+      fetchQueueRunsSize(queueId, status),
+    ])
+      .then(([firstPage, size]) => {
+        if (cancelled) return;
+        setRuns(firstPage);
+        setTotal(size);
+      })
+      .catch((e) => console.error(`Failed to load ${status} runs`, e))
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [queueId, status]);
+
+  const loadMore = useCallback(() => {
+    if (!queueId || loadingMoreRef.current) return;
+    if (runsRef.current.length >= total) return;
+    loadingMoreRef.current = true;
+    setLoadingMore(true);
+    fetchQueueRuns(queueId, status, PAGE_SIZE, runsRef.current.length)
+      .then((nextPage) => {
+        setRuns((prev) => {
+          // Offsets can drift as runs complete elsewhere while this page
+          // loads; dedupe defensively rather than assuming clean boundaries.
+          const seen = new Set(prev.map((r) => r.queue_run_id));
+          const fresh = nextPage.filter((r) => !seen.has(r.queue_run_id));
+          return [...prev, ...fresh];
+        });
+      })
+      .catch((e) => console.error(`Failed to load more ${status} runs`, e))
+      .finally(() => {
+        loadingMoreRef.current = false;
+        setLoadingMore(false);
+      });
+  }, [queueId, status, total]);
+
+  const removeRun = useCallback((queueRunId: string) => {
+    setRuns((prev) => prev.filter((r) => r.queue_run_id !== queueRunId));
+    setTotal((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const restoreRun = useCallback((run: AnnotationQueueRun, atIndex: number) => {
+    setRuns((prev) => {
+      if (prev.some((r) => r.queue_run_id === run.queue_run_id)) return prev;
+      const next = [...prev];
+      next.splice(Math.min(atIndex, next.length), 0, run);
+      return next;
+    });
+    setTotal((prev) => prev + 1);
+  }, []);
+
+  return {
+    runs,
+    total,
+    loading,
+    loadingMore,
+    hasMore: runs.length < total,
+    loadMore,
+    removeRun,
+    restoreRun,
+  };
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/index.css b/internal/cmd/templates/annotation-queue-grid/src/index.css
new file mode 100644
index 0000000..5eae8f1
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/index.css
@@ -0,0 +1,386 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--bg-surface-level-1);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    min-height: 100vh;
+  }
+
+  * {
+    outline-color: var(--brand-400);
+  }
+
+  :root {
+    /* gray */
+    --gray-25: #fcfcfc;
+    --gray-50: #fafafa;
+    --gray-100: #f4f4f5;
+    --gray-200: #e4e4e7;
+    --gray-300: #d1d1d6;
+    --gray-400: #a0a0ab;
+    --gray-500: #70707b;
+    --gray-600: #51525c;
+    --gray-700: #3f3f46;
+    --gray-800: #26272b;
+    --gray-900: #1a1a1e;
+    --gray-950: #131316;
+
+    /* neutral */
+    --neutral-25: #fafbfd;
+    --neutral-35: #f8fafc;
+    --neutral-50: #f5f8fb;
+    --neutral-100: #edf2f7;
+    --neutral-200: #e2e8f0;
+    --neutral-300: #cbd5e1;
+    --neutral-400: #94a3b8;
+    --neutral-500: #64748b;
+    --neutral-600: #475569;
+    --neutral-700: #334155;
+    --neutral-800: #1e293b;
+    --neutral-900: #0f172a;
+    --neutral-950: #080f1e;
+
+    --white: #ffffff;
+    --black: #000000;
+
+    /* brand */
+    --brand-10: #f2faff;
+    --brand-25: #e5f4ff;
+    --brand-50: #cce9ff;
+    --brand-75: #9dd2fc;
+    --brand-100: #5fbef8;
+    --brand-200: #008dff;
+    --brand-300: #0078f1;
+    --brand-400: #006ddd;
+    --brand-500: #1566b8;
+    --brand-600: #145095;
+    --brand-700: #0d3d77;
+    --brand-800: #0c336a;
+    --brand-900: #102656;
+    --brand-950: #101a30;
+
+    /* red */
+    --red-25: #fffbfa;
+    --red-50: #fef3f2;
+    --red-100: #fee4e2;
+    --red-200: #fecdca;
+    --red-300: #fda29b;
+    --red-400: #f97066;
+    --red-500: #f04438;
+    --red-600: #d92d20;
+    --red-700: #b42318;
+    --red-800: #912018;
+    --red-900: #7a271a;
+    --red-950: #55160c;
+
+    /* orange */
+    --orange-25: #fffcf5;
+    --orange-50: #fffaeb;
+    --orange-100: #fef0c7;
+    --orange-200: #fedf89;
+    --orange-300: #fec84b;
+    --orange-400: #fdb022;
+    --orange-500: #f79009;
+    --orange-600: #cd6002;
+    --orange-700: #ac5305;
+    --orange-800: #894101;
+    --orange-900: #6d3300;
+    --orange-950: #4c2400;
+
+    /* green */
+    --green-25: #f5fef9;
+    --green-50: #ecfdf3;
+    --green-100: #dcfae6;
+    --green-200: #acefc6;
+    --green-300: #75e0a7;
+    --green-400: #46cd89;
+    --green-500: #19b26b;
+    --green-600: #079455;
+    --green-700: #047647;
+    --green-800: #065d3a;
+    --green-900: #084d31;
+    --green-950: #053321;
+
+    /* acid */
+    --acid-10: #fafee8;
+    --acid-25: #f2fcc8;
+    --acid-50: #e3f797;
+    --acid-100: #cceb50;
+    --acid-200: #aecf1a;
+    --acid-300: #93b000;
+    --acid-400: #799200;
+    --acid-500: #607500;
+    --acid-600: #495a00;
+    --acid-700: #354200;
+    --acid-800: #232c00;
+    --acid-900: #141a00;
+    --acid-950: #0b1000;
+
+    /* purple */
+    --purple-10: #f9f7ff;
+    --purple-25: #f1ecff;
+    --purple-50: #e3d9ff;
+    --purple-100: #c5b4f0;
+    --purple-200: #a691df;
+    --purple-300: #8b71cc;
+    --purple-400: #7655b8;
+    --purple-500: #6244a0;
+    --purple-600: #4e3487;
+    --purple-700: #3b2560;
+    --purple-800: #291753;
+    --purple-900: #190d38;
+    --purple-950: #0f0822;
+
+    /* SEMANTIC TOKENS */
+
+    /* SURFACE */
+    --bg-surface-level-1: var(--white);
+    --bg-surface-level-1-hover: var(--neutral-25);
+    --bg-surface-level-2: var(--neutral-50);
+    --bg-surface-level-2-hover: var(--neutral-100);
+    --bg-surface-level-3: var(--neutral-100);
+    --bg-surface-level-4: var(--neutral-200);
+    --bg-disabled: var(--neutral-100);
+    --bg-elevated: var(--white);
+    --bg-elevated-hover: var(--neutral-25);
+    --bg-elevated-selected: var(--neutral-25);
+    --bg-overlay: rgba(0, 0, 0, 0.5);
+
+    /* BRAND */
+    --bg-brand: var(--brand-400);
+    --bg-brand-hover: var(--brand-500);
+    --bg-brand-subtle: var(--brand-25);
+    --bg-brand-subtle-hover: var(--brand-50);
+    --bg-brand-muted: var(--brand-10);
+    --bg-purple: var(--purple-50);
+
+    /* INTENT */
+    --bg-success: var(--green-50);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-strong: var(--green-600);
+    --bg-error: var(--red-50);
+    --bg-error-subtle: var(--red-100);
+    --bg-error-strong: var(--red-600);
+    --bg-warning: var(--orange-50);
+    --bg-warning-subtle: var(--orange-100);
+    --bg-warning-strong: var(--orange-600);
+
+    /* CONTROL */
+    --bg-control-active: var(--brand-300);
+    --bg-control-active-hover: var(--brand-400);
+    --bg-control-thumb: var(--white);
+    --bg-control-disabled: var(--neutral-200);
+    --text-control-active-foreground: var(--bg-control-thumb);
+
+    /* SELECTED */
+    --bg-selected: var(--brand-25);
+    --bg-selected-hover: var(--brand-50);
+
+    /* BORDER */
+    --border-default: var(--neutral-300);
+    --border-subtle: var(--neutral-200);
+    --border-muted: var(--neutral-100);
+    --border-faint: var(--neutral-50);
+    --border-strong: var(--neutral-600);
+    --border-disabled: var(--neutral-200);
+    --border-focus: var(--brand-400);
+    --border-error: var(--red-300);
+    --border-error-strong: var(--red-600);
+    --border-brand: var(--brand-400);
+    --border-brand-strong: var(--brand-600);
+    --border-brand-subtle: var(--brand-100);
+    --border-warning: var(--orange-300);
+    --border-success: var(--green-200);
+    --border-purple: var(--purple-200);
+
+    /* TEXT */
+    --text-primary: var(--neutral-900);
+    --text-secondary: var(--neutral-700);
+    --text-secondary-hover: var(--neutral-800);
+    --text-tertiary: var(--neutral-600);
+    --text-tertiary-hover: var(--neutral-700);
+    --text-quaternary: var(--neutral-500);
+    --text-disabled: var(--neutral-300);
+    --text-placeholder: var(--neutral-400);
+    --text-error-primary: var(--red-700);
+    --text-error-secondary: var(--red-600);
+    --text-error-tertiary: var(--red-500);
+    --text-warning-primary: var(--orange-700);
+    --text-warning-secondary: var(--orange-600);
+    --text-warning-tertiary: var(--orange-500);
+    --text-success-primary: var(--green-700);
+    --text-success-secondary: var(--green-600);
+    --text-success-tertiary: var(--green-500);
+    --text-brand-primary: var(--brand-700);
+    --text-brand-secondary: var(--brand-600);
+    --text-brand-tertiary: var(--brand-500);
+    --text-brand-disabled: var(--brand-75);
+    --text-brand-on-fill: var(--white);
+    --text-link: var(--brand-300);
+    --text-link-hover: var(--brand-200);
+
+    /* ICON */
+    --icon-primary: var(--neutral-900);
+    --icon-secondary: var(--neutral-700);
+    --icon-tertiary: var(--neutral-500);
+    --icon-disabled: var(--neutral-300);
+    --icon-brand: var(--brand-400);
+    --icon-error: var(--red-600);
+    --icon-success: var(--green-600);
+    --icon-warning: var(--orange-600);
+
+    /* SHADOW */
+    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 3px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* MOTION */
+    --duration-fast: 100ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 500ms;
+
+    /* DEPRECATED ALIASES */
+    --bg-primary: var(--bg-surface-level-1);
+    --bg-primary-hover: var(--bg-surface-level-1-hover);
+    --bg-secondary: var(--bg-surface-level-2);
+    --bg-secondary-hover: var(--bg-surface-level-2-hover);
+    --bg-tertiary: var(--bg-surface-level-3);
+    --bg-quaternary: var(--bg-surface-level-4);
+    --bg-brand-primary: var(--bg-brand);
+    --bg-brand-primary_hover: var(--bg-brand-hover);
+    --bg-brand-secondary: var(--bg-brand-subtle);
+    --bg-brand-secondary_hover: var(--bg-brand-subtle-hover);
+    --bg-brand-tertiary: var(--bg-brand-muted);
+    --bg-success-primary: var(--bg-success);
+    --bg-success-secondary: var(--bg-success-subtle);
+    --bg-error-primary: var(--bg-error);
+    --bg-error-secondary: var(--bg-error-subtle);
+    --bg-warning-primary: var(--bg-warning);
+    --bg-warning-secondary: var(--bg-warning-subtle);
+    --border-primary: var(--border-default);
+    --border-secondary: var(--border-subtle);
+    --border-tertiary: var(--border-muted);
+    --border-quaternary: var(--border-faint);
+    --text-button-primary: var(--white);
+  }
+
+  html.dark {
+    --gray-25: #131316;
+    --gray-50: #1a1a1e;
+    --gray-100: #26272b;
+    --gray-200: #3f3f46;
+    --gray-300: #51525c;
+    --gray-400: #70707b;
+    --gray-500: #a0a0ab;
+    --gray-600: #d1d1d6;
+    --gray-700: #e4e4e7;
+    --gray-800: #f4f4f5;
+    --gray-900: #fafafa;
+    --gray-950: #fcfcfc;
+
+    --neutral-25: #09090f;
+    --neutral-35: #0d0f18;
+    --neutral-50: #111521;
+    --neutral-100: #1b2030;
+    --neutral-200: #282e42;
+    --neutral-300: #393f55;
+    --neutral-400: #555d78;
+    --neutral-500: #8790ab;
+    --neutral-600: #cbd5e1;
+    --neutral-700: #e2e8f0;
+    --neutral-800: #edf2f7;
+    --neutral-900: #f5f8fb;
+    --neutral-950: #fafbfd;
+
+    --white: #131316;
+    --black: #ffffff;
+
+    --brand-10: #101a30;
+    --brand-25: #102656;
+    --brand-50: #0c336a;
+    --brand-75: #0c3871;
+    --brand-100: #0d3d77;
+    --brand-200: #145095;
+    --brand-300: #1566b8;
+    --brand-400: #006ddd;
+    --brand-500: #0078f1;
+    --brand-600: #008dff;
+    --brand-700: #5fbef8;
+    --brand-800: #cce9ff;
+    --brand-900: #e5f4ff;
+    --brand-950: #f2faff;
+
+    --red-25: #55160c;
+    --red-50: #7a271a;
+    --red-100: #912018;
+    --red-200: #b42318;
+    --red-300: #d92d20;
+    --red-400: #f04438;
+    --red-500: #f97066;
+    --red-600: #fda29b;
+    --red-700: #fecdca;
+    --red-800: #fee4e2;
+    --red-900: #fef3f2;
+    --red-950: #fffbfa;
+
+    --orange-25: #4c2400;
+    --orange-50: #6d3300;
+    --orange-100: #894101;
+    --orange-200: #ac5305;
+    --orange-300: #cd6002;
+    --orange-400: #f79009;
+    --orange-500: #fdb022;
+    --orange-600: #fec84b;
+    --orange-700: #fedf89;
+    --orange-800: #fef0c7;
+    --orange-900: #fffaeb;
+    --orange-950: #fffcf5;
+
+    --green-25: #053321;
+    --green-50: #084d31;
+    --green-100: #065d3a;
+    --green-200: #047647;
+    --green-300: #079455;
+    --green-400: #19b26b;
+    --green-500: #46cd89;
+    --green-600: #75e0a7;
+    --green-700: #acefc6;
+    --green-800: #dcfae6;
+    --green-900: #ecfdf3;
+    --green-950: #f5fef9;
+  }
+}
+
+@keyframes linear-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(800%);
+  }
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/types.ts b/internal/cmd/templates/annotation-queue-grid/src/types.ts
new file mode 100644
index 0000000..d8e0ca2
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/types.ts
@@ -0,0 +1,93 @@
+export type IOMode = 'collapsed' | 'expanded' | 'raw';
+
+export interface AnnotationQueueRun {
+  id: string;
+  queue_run_id: string;
+  session_id: string;
+  trace_id: string;
+  start_time: string;
+  name: string | null;
+  inputs: Record<string, unknown> | null;
+  outputs: Record<string, unknown> | null;
+  error: string | null;
+  last_reviewed_time: string | null;
+  added_at: string | null;
+  completed_by: string[];
+  reserved_by: string[];
+}
+
+// Mirrors AnnotationQueueRubricItemSchema (smith-backend/app/schemas.py) — the
+// rubric item itself carries no type/min/max/options; that comes from a
+// separate per-key FeedbackConfig lookup (see fetchFeedbackConfigs in api.ts).
+export interface RubricItem {
+  feedback_key: string;
+  description: string | null;
+  value_descriptions: Record<string, string> | null;
+  score_descriptions: Record<string, string> | null;
+  is_required?: boolean | null;
+  // Assertion-flagged items are pass/fail claims managed elsewhere (the run
+  // review panel's own Assertions section), not scored feedback keys — the
+  // real "Edit Annotation Queue" page excludes them from its Feedback
+  // Rubrics list for the same reason. Filtered out of the grid's columns;
+  // this app has no other assertion-specific UI.
+  is_assertion?: boolean | null;
+}
+
+export interface AnnotationQueue {
+  id: string;
+  name: string;
+  queue_type: 'single' | 'pairwise';
+  rubric_items: RubricItem[];
+  rubric_instructions: string | null;
+  num_reviewers_per_item?: number | null;
+}
+
+export interface FeedbackCategory {
+  value: number;
+  label: string | null;
+}
+
+export type FeedbackConfigType = 'continuous' | 'categorical' | 'freeform';
+
+// Mirrors FeedbackConfig (smith-backend/app/schemas.py) — determines how a
+// feedback key should be rendered/entered (number input, category buttons, or
+// free text), fetched separately per key from GET /feedback-configs.
+export interface FeedbackConfig {
+  type: FeedbackConfigType;
+  min: number | null;
+  max: number | null;
+  categories: FeedbackCategory[] | null;
+}
+
+export interface FeedbackConfigSchema {
+  feedback_key: string;
+  feedback_config: FeedbackConfig;
+  tenant_id: string;
+  modified_at: string;
+  is_lower_score_better: boolean | null;
+}
+
+export interface FeedbackSubmission {
+  key: string;
+  run_id: string;
+  score?: number | null;
+  value?: string | null;
+  comment?: string | null;
+  // Without these, the backend has to look the run up by run_id alone —
+  // which can miss (falls into an async/best-effort path that may never
+  // land) instead of writing the feedback inline. Always pass them when
+  // known, same as the real annotation queue UI does.
+  trace_id?: string;
+  session_id?: string;
+  start_time?: string;
+}
+
+export interface FeedbackItem {
+  id: string;
+  run_id: string;
+  key: string;
+  score: number | null;
+  value: string | null;
+  comment: string | null;
+  created_at: string;
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/src/vite-env.d.ts b/internal/cmd/templates/annotation-queue-grid/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/internal/cmd/templates/annotation-queue-grid/tailwind.config.js b/internal/cmd/templates/annotation-queue-grid/tailwind.config.js
new file mode 100644
index 0000000..623e1a9
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/tailwind.config.js
@@ -0,0 +1,128 @@
+const withAlpha = (cssVar) => ({ opacityValue }) =>
+  opacityValue !== undefined
+    ? `color-mix(in srgb, ${cssVar} calc(${opacityValue} * 100%), transparent)`
+    : cssVar;
+
+const spaceScale = {
+  'space-1': '0.25rem',
+  'space-2': '0.5rem',
+  'space-3': '0.75rem',
+  'space-4': '1rem',
+  'space-5': '1.25rem',
+  'space-6': '1.5rem',
+  'space-7': '2rem',
+  'space-8': '2.5rem',
+  'space-9': '4rem',
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      backgroundColor: {
+        // Surfaces
+        'surface-level-1': withAlpha('var(--bg-surface-level-1)'),
+        'surface-level-2': withAlpha('var(--bg-surface-level-2)'),
+        'surface-level-3': withAlpha('var(--bg-surface-level-3)'),
+        'surface-level-4': withAlpha('var(--bg-surface-level-4)'),
+        'elevated': withAlpha('var(--bg-elevated)'),
+        'elevated-hover': withAlpha('var(--bg-elevated-hover)'),
+        'disabled': withAlpha('var(--bg-disabled)'),
+        // Brand
+        'brand': withAlpha('var(--bg-brand)'),
+        'brand-hover': withAlpha('var(--bg-brand-hover)'),
+        'brand-subtle': withAlpha('var(--bg-brand-subtle)'),
+        'brand-subtle-hover': withAlpha('var(--bg-brand-subtle-hover)'),
+        'brand-muted': withAlpha('var(--bg-brand-muted)'),
+        // Intent
+        'success': withAlpha('var(--bg-success)'),
+        'success-subtle': withAlpha('var(--bg-success-subtle)'),
+        'success-strong': withAlpha('var(--bg-success-strong)'),
+        'error': withAlpha('var(--bg-error)'),
+        'error-subtle': withAlpha('var(--bg-error-subtle)'),
+        'error-strong': withAlpha('var(--bg-error-strong)'),
+        'warning': withAlpha('var(--bg-warning)'),
+        'warning-subtle': withAlpha('var(--bg-warning-subtle)'),
+        'warning-strong': withAlpha('var(--bg-warning-strong)'),
+        // Controls
+        'control-active': withAlpha('var(--bg-control-active)'),
+        'control-thumb': withAlpha('var(--bg-control-thumb)'),
+        'control-disabled': withAlpha('var(--bg-control-disabled)'),
+        // Selected
+        'selected': withAlpha('var(--bg-selected)'),
+        'selected-hover': withAlpha('var(--bg-selected-hover)'),
+        // Deprecated aliases (for compatibility with existing classes)
+        'primary': withAlpha('var(--bg-surface-level-1)'),
+        'secondary': withAlpha('var(--bg-surface-level-2)'),
+        'tertiary': withAlpha('var(--bg-surface-level-3)'),
+        'quaternary': withAlpha('var(--bg-surface-level-4)'),
+      },
+      borderColor: {
+        'default': withAlpha('var(--border-default)'),
+        'subtle': withAlpha('var(--border-subtle)'),
+        'muted': withAlpha('var(--border-muted)'),
+        'faint': withAlpha('var(--border-faint)'),
+        'strong': withAlpha('var(--border-strong)'),
+        'disabled': withAlpha('var(--border-disabled)'),
+        'focus': withAlpha('var(--border-focus)'),
+        'error': withAlpha('var(--border-error)'),
+        'error-strong': withAlpha('var(--border-error-strong)'),
+        'brand': withAlpha('var(--border-brand)'),
+        'brand-strong': withAlpha('var(--border-brand-strong)'),
+        'brand-subtle': withAlpha('var(--border-brand-subtle)'),
+        'warning': withAlpha('var(--border-warning)'),
+        'success': withAlpha('var(--border-success)'),
+        // Deprecated aliases
+        'primary': withAlpha('var(--border-default)'),
+        'secondary': withAlpha('var(--border-subtle)'),
+        'tertiary': withAlpha('var(--border-muted)'),
+        'quaternary': withAlpha('var(--border-faint)'),
+      },
+      textColor: {
+        'primary': withAlpha('var(--text-primary)'),
+        'secondary': withAlpha('var(--text-secondary)'),
+        'tertiary': withAlpha('var(--text-tertiary)'),
+        'quaternary': withAlpha('var(--text-quaternary)'),
+        'disabled': withAlpha('var(--text-disabled)'),
+        'placeholder': withAlpha('var(--text-placeholder)'),
+        'error-primary': withAlpha('var(--text-error-primary)'),
+        'error-secondary': withAlpha('var(--text-error-secondary)'),
+        'warning-primary': withAlpha('var(--text-warning-primary)'),
+        'success-primary': withAlpha('var(--text-success-primary)'),
+        'brand-primary': withAlpha('var(--text-brand-primary)'),
+        'brand-secondary': withAlpha('var(--text-brand-secondary)'),
+        'brand-on-fill': withAlpha('var(--text-brand-on-fill)'),
+        'link': withAlpha('var(--text-link)'),
+        'link-hover': withAlpha('var(--text-link-hover)'),
+        'icon-primary': withAlpha('var(--icon-primary)'),
+        'icon-secondary': withAlpha('var(--icon-secondary)'),
+        'icon-tertiary': withAlpha('var(--icon-tertiary)'),
+        'icon-disabled': withAlpha('var(--icon-disabled)'),
+        'icon-brand': withAlpha('var(--icon-brand)'),
+        'icon-error': withAlpha('var(--icon-error)'),
+        'icon-success': withAlpha('var(--icon-success)'),
+        'icon-warning': withAlpha('var(--icon-warning)'),
+      },
+      borderRadius: {
+        'xs': 'var(--radius-xs)',
+        'sm': 'var(--radius-sm)',
+        'md': 'var(--radius-md)',
+        'lg': 'var(--radius-lg)',
+        'xl': 'var(--radius-xl)',
+        'full': 'var(--radius-full)',
+      },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+      },
+      gap: spaceScale,
+      padding: spaceScale,
+      margin: spaceScale,
+      space: spaceScale,
+    },
+  },
+  plugins: [],
+};
diff --git a/internal/cmd/templates/annotation-queue-grid/tsconfig.json b/internal/cmd/templates/annotation-queue-grid/tsconfig.json
new file mode 100644
index 0000000..a4c834a
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/internal/cmd/templates/annotation-queue-grid/vite.config.ts b/internal/cmd/templates/annotation-queue-grid/vite.config.ts
new file mode 100644
index 0000000..977c289
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue-grid/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// Library-mode build: the sandbox this app runs in evaluates a single
+// dependency-free CJS file exporting { render(data, root, metadata) } — not a
+// self-mounting SPA. See src/entry.tsx and AGENTS.md.
+export default defineConfig({
+  plugins: [react()],
+  // Unlike Vite's normal app-mode build, library mode does NOT replace
+  // process.env.NODE_ENV on its own — React/ReactDOM's bundled source still
+  // references it internally. There's no `process` global in the sandboxed
+  // iframe (or any browser), so without this the bundle throws
+  // "ReferenceError: process is not defined" the moment it's required.
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: 'src/entry.tsx',
+      formats: ['cjs'],
+      fileName: () => 'bundle.js',
+    },
+  },
+});
diff --git a/internal/cmd/templates/annotation-queue/.gitignore b/internal/cmd/templates/annotation-queue/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/internal/cmd/templates/annotation-queue/README.md b/internal/cmd/templates/annotation-queue/README.md
new file mode 100644
index 0000000..ac0acc3
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/README.md
@@ -0,0 +1,89 @@
+# {{.Name}}
+
+{{.Description}}
+
+A LangSmith custom app, scaffolded by `langsmith apps init` — a real,
+working annotation-queue review UI (run list, inputs/outputs viewer,
+feedback rubric, reviewer notes) you're meant to vibe-code from here, not a
+toy example. **Read `AGENTS.md` first** — it documents the LangSmith API
+surface this app can call.
+
+## What this is
+
+A custom app is a small React/TS UI rendered inside LangSmith in a
+locked-down sandbox (`sandbox="allow-scripts"`, no `allow-same-origin`). It
+never gets direct network access or a real credential — everything goes
+through a `postMessage` bridge to the host page (`window.langsmith.call`),
+which proxies to the real LangSmith API under the viewer's own session (or
+your local `LANGSMITH_API_KEY` when running `langsmith apps dev`).
+
+Since the sandbox has no bundler or npm access at runtime, this app is built
+with Vite in **library mode** into a single dependency-free CJS file
+(`dist/bundle.js`) — see `vite.config.ts` and `src/entry.tsx`. Use real
+React/TS and npm dependencies freely; they all get inlined at build time.
+Tailwind's compiled CSS is inlined too (`src/index.css` imported with
+`?inline` in `entry.tsx`) and injected via a `<style>` tag at first render —
+there's no way to `<link>` a second file into this sandbox.
+
+Apps are uniform — the host hands you no bound context (`data` is always
+`{}`). This app picks its own annotation queue: the top bar lists your
+workspace's queues (`GET /api/v1/annotation-queues`) and, once one is
+selected, everything else (which runs are in the queue, a run's
+inputs/outputs, submitting feedback, marking a run complete) is fetched via
+`window.langsmith.call`. See `src/api.ts` and `src/components/QueueBar.tsx`.
+
+## Develop
+
+`langsmith apps init` already ran `npm install` and `npm run build` for you,
+so `dist/bundle.js` exists and `langsmith apps dev` works immediately:
+
+```bash
+langsmith apps dev
+```
+
+`apps dev` runs the app inside a real sandboxed iframe, identical
+restrictions to production, and automatically starts `npm run watch` for you
+(it detects the script in `package.json`) — edit the app, save, and the
+preview reloads on its own. Pass `--no-watch` if you'd rather drive the build
+yourself. Pick a queue from the in-app dropdown once it loads (it calls the
+real API using your local `LANGSMITH_API_KEY`, so it lists queues that
+actually exist in your workspace).
+
+## The bridge contract
+
+`src/entry.tsx` exports a `render(data, root, metadata)` function — the
+sandbox calls it once when `data` (`{}`) arrives, and again if `data` or
+`metadata` changes. `metadata.mode` is `"dark"` or `"light"`; the sandbox
+sets `html.dark` from it, so this Tailwind/token UI themes automatically
+(branch on `metadata.mode` only if you use inline styles):
+
+```ts
+export default {
+  render(data: {}, root: HTMLElement, metadata: { mode: 'dark' | 'light' }) {
+    // mount your app into root
+  },
+};
+```
+
+`window.langsmith`, injected by the host page, gives you:
+
+- `window.langsmith.call(operation, args)` — `operation` is a
+  `"<METHOD> <path>"` string (e.g. `"GET /api/v1/annotation-queues/{id}/runs"`),
+  forwarded as-is to the real LangSmith API. Not a curated allowlist — see
+  `AGENTS.md` for the available surface. Returns a Promise.
+- `window.langsmith.setData(patch)` — push a data mutation out for the host
+  to persist (rarely needed; most apps just call the API directly).
+- `window.langsmith.feedback.create(args)` — sugar over
+  `call('POST /api/v1/feedback', {body: args})`, since that's extremely common.
+
+## Deploy
+
+```bash
+npm run build
+langsmith apps push
+```
+
+The first `push` creates the app and writes `.langsmith/app.json` (the app's
+ID) into this directory — commit it so teammates' pushes update the same
+app instead of creating a new one. Every push after that updates it in
+place.
diff --git a/internal/cmd/templates/annotation-queue/package.json b/internal/cmd/templates/annotation-queue/package.json
new file mode 100644
index 0000000..362dec5
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "{{.Name}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
+  },
+  "dependencies": {
+    "@langchain/untitled-ui-icons": "^1.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/internal/cmd/templates/annotation-queue/postcss.config.js b/internal/cmd/templates/annotation-queue/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/internal/cmd/templates/annotation-queue/src/App.tsx b/internal/cmd/templates/annotation-queue/src/App.tsx
new file mode 100644
index 0000000..beff9f6
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/App.tsx
@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState } from 'react';
+import { FeedbackPanel } from './components/FeedbackPanel';
+import { LinearProgress } from './components/LinearProgress';
+import { QueueBar } from './components/QueueBar';
+import { RunList } from './components/RunList';
+import { RunViewer } from './components/RunViewer';
+import { fetchQueue, markRunComplete } from './api';
+import { useRunSection } from './hooks/useRunSection';
+import type { AnnotationQueue } from './types';
+
+interface Props {
+  /** Optional starting queue. Apps are uniform now and normally receive {},
+   * so this is usually empty and the user picks a queue via the QueueBar. */
+  queueId?: string;
+  /** Host render metadata; `metadata.mode` is "dark"|"light". The sandbox sets
+   * html.dark from it, so this UI needs no branching. */
+  metadata?: RenderMetadata;
+}
+
+export function App({ queueId: initialQueueId }: Props) {
+  const [queueId, setQueueId] = useState(initialQueueId ?? '');
+  const [queue, setQueue] = useState<AnnotationQueue | null>(null);
+  const [selectedQueueRunId, setSelectedQueueRunId] = useState<string | undefined>(undefined);
+  const [completing, setCompleting] = useState(false);
+  const [completeError, setCompleteError] = useState<string | null>(null);
+
+  const isMultiReviewer = !!queue?.num_reviewers_per_item && queue.num_reviewers_per_item > 1;
+  const needsReview = useRunSection(queueId || undefined, 'needs_my_review');
+  const needsOthersReview = useRunSection(queueId || undefined, 'needs_others_review', isMultiReviewer);
+  const completed = useRunSection(queueId || undefined, 'completed');
+
+  // Keep a ref to the complete handler so hotkey always calls the latest version
+  const completeRef = useRef<() => void>(() => {});
+  // Same trick for h/l navigation, which needs the latest run list + selection
+  const goToAdjacentRunRef = useRef<(direction: 'prev' | 'next') => void>(() => {});
+
+  // Load queue metadata whenever the queue changes. Run sections load
+  // themselves (see useRunSection), keyed on the same queueId.
+  useEffect(() => {
+    // Clear the previous queue's rubric first so switching queues doesn't
+    // flash stale data from the one before.
+    setQueue(null);
+    setSelectedQueueRunId(undefined);
+    if (!queueId) return;
+    fetchQueue(queueId)
+      .then(setQueue)
+      .catch((e) => console.error('Failed to load queue', e));
+  }, [queueId]);
+
+  // Keyboard shortcuts: H=prev, L=next, Esc=blur, Cmd/Ctrl+Enter=complete
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      const tag = (document.activeElement as HTMLElement | null)?.tagName;
+      const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || (document.activeElement as HTMLElement | null)?.isContentEditable;
+
+      if (e.key === 'Escape') {
+        (document.activeElement as HTMLElement | null)?.blur();
+        return;
+      }
+
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault();
+        completeRef.current?.();
+        return;
+      }
+
+      if (!inInput) {
+        if (e.key === 'h') {
+          goToAdjacentRunRef.current('prev');
+        }
+        if (e.key === 'l') {
+          goToAdjacentRunRef.current('next');
+        }
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, []);
+
+  const allRuns = [...needsReview.runs, ...needsOthersReview.runs, ...completed.runs];
+  const selectedRun =
+    allRuns.find((r) => r.queue_run_id === selectedQueueRunId) ?? needsReview.runs[0] ?? null;
+
+  function handleSelectRun(queueRunId: string) {
+    setSelectedQueueRunId(queueRunId);
+    setCompleteError(null);
+  }
+
+  // h/l step through the "Needs Review" list. No-op at a list boundary.
+  function goToAdjacentRun(direction: 'prev' | 'next') {
+    const list = needsReview.runs;
+    if (list.length === 0) return;
+    const idx = list.findIndex((r) => r.queue_run_id === selectedQueueRunId);
+    if (idx === -1) {
+      handleSelectRun(list[0].queue_run_id);
+      return;
+    }
+    const nextIdx = direction === 'prev' ? idx - 1 : idx + 1;
+    if (nextIdx < 0 || nextIdx >= list.length) return;
+    handleSelectRun(list[nextIdx].queue_run_id);
+  }
+
+  useEffect(() => {
+    goToAdjacentRunRef.current = goToAdjacentRun;
+  });
+
+  // Synchronous trigger (so both the footer button and the Cmd/Ctrl+Enter
+  // hotkey can call it the same way) that runs the async complete flow and
+  // surfaces any failure via completeError instead of swallowing it — a
+  // failed call used to look identical to a successful one.
+  function handleComplete() {
+    if (!selectedRun || completing) return;
+    const queueRunId = selectedRun.queue_run_id;
+    setCompleting(true);
+    setCompleteError(null);
+    markRunComplete(queueRunId)
+      .then(() => {
+        const remainingNeedsReview = needsReview.runs.filter((r) => r.queue_run_id !== queueRunId);
+        needsReview.removeRun(queueRunId);
+        completed.prependRun({ ...selectedRun, last_reviewed_time: new Date().toISOString() });
+        setSelectedQueueRunId(remainingNeedsReview[0]?.queue_run_id);
+      })
+      .catch((e) => {
+        console.error('Failed to mark complete', e);
+        setCompleteError(e instanceof Error ? e.message : String(e));
+      })
+      .finally(() => setCompleting(false));
+  }
+
+  useEffect(() => {
+    completeRef.current = handleComplete;
+  });
+
+  if (!queueId) {
+    return (
+      <div className="flex h-screen flex-col bg-surface-level-1">
+        <QueueBar selectedQueueId={queueId} onSelect={setQueueId} />
+        <div className="flex flex-1 items-center justify-center">
+          <span className="text-sm text-tertiary">Select an annotation queue to start reviewing.</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!queue) {
+    return (
+      <div className="flex h-screen flex-col bg-surface-level-1">
+        <QueueBar selectedQueueId={queueId} onSelect={setQueueId} />
+        <LinearProgress />
+      </div>
+    );
+  }
+
+  const contentLoading = (needsReview.loading || completed.loading) && !selectedRun;
+
+  return (
+    <div className="flex h-screen flex-col overflow-hidden bg-surface-level-1">
+      <QueueBar selectedQueueId={queueId} onSelect={setQueueId} />
+      <div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-secondary m-space-4 mt-space-3">
+        {/* Left: 280px run list */}
+        <div className="flex h-full w-[280px] min-w-[280px] max-w-[280px] flex-col overflow-hidden">
+          <RunList
+            needsReview={needsReview}
+            needsOthersReview={needsOthersReview}
+            completed={completed}
+            selectedQueueRunId={selectedQueueRunId ?? selectedRun?.queue_run_id}
+            numReviewersPerItem={queue.num_reviewers_per_item}
+            onSelectRun={handleSelectRun}
+          />
+        </div>
+
+        {/* Center: flex-1 inputs/outputs */}
+        <div className="relative flex min-w-0 flex-1 flex-col overflow-auto">
+          {selectedRun || contentLoading ? (
+            <RunViewer
+              inputs={selectedRun?.inputs ?? null}
+              outputs={selectedRun?.outputs ?? null}
+              error={selectedRun?.error}
+              loading={contentLoading}
+            />
+          ) : (
+            <div className="flex flex-1 items-center justify-center">
+              <span className="text-sm text-tertiary">Select a run to review</span>
+            </div>
+          )}
+        </div>
+
+        {/* Right: 450px feedback panel */}
+        <div className="flex h-full w-[450px] min-w-[450px] max-w-[450px] flex-col border-l border-secondary">
+          <FeedbackPanel
+            queue={queue}
+            runId={selectedRun?.id}
+            traceId={selectedRun?.trace_id}
+            sessionId={selectedRun?.session_id}
+            startTime={selectedRun?.start_time}
+            queueRunId={selectedRun?.queue_run_id}
+            onComplete={handleComplete}
+            completing={completing}
+            completeError={completeError}
+            totalNeedsReview={needsReview.runs.length}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/api.ts b/internal/cmd/templates/annotation-queue/src/api.ts
new file mode 100644
index 0000000..265537e
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/api.ts
@@ -0,0 +1,112 @@
+// LangSmith API access, entirely through window.langsmith.call — see
+// global.d.ts for the bridge's type, and AGENTS.md for the operation format
+// and available endpoints. No fetch()/XMLHttpRequest here: the sandbox this
+// app runs in has no network access of its own.
+//
+// Every path is under /api/v1 — this is the documented public API surface
+// (see smith-backend/static/openapi.json), the contract this app's API-key
+// auth actually talks to. The frontend's own bundle skips this prefix in
+// SaaS mode, but that's specific to how its own session-authenticated calls
+// route internally — not the public contract external API-key clients use.
+import type {
+  AnnotationQueue,
+  AnnotationQueueRun,
+  FeedbackConfigSchema,
+  FeedbackItem,
+  FeedbackSubmission,
+} from './types';
+
+export async function fetchQueues(
+  search = '',
+  offset = 0,
+  limit = 25
+): Promise<AnnotationQueue[]> {
+  const params: Record<string, string> = { limit: String(limit), offset: String(offset) };
+  if (search) params.name_contains = search;
+  return window.langsmith.call('GET /api/v1/annotation-queues', {
+    params,
+  }) as Promise<AnnotationQueue[]>;
+}
+
+export async function fetchQueue(queueId: string): Promise<AnnotationQueue> {
+  return window.langsmith.call(
+    `GET /api/v1/annotation-queues/${queueId}`
+  ) as Promise<AnnotationQueue>;
+}
+
+export type AnnotationQueueRunSectionStatus =
+  | 'needs_my_review'
+  | 'needs_others_review'
+  | 'completed';
+
+export async function fetchQueueRuns(
+  queueId: string,
+  status: AnnotationQueueRunSectionStatus | null = null,
+  limit = 50,
+  offset = 0
+): Promise<AnnotationQueueRun[]> {
+  const params: Record<string, string> = { limit: String(limit), offset: String(offset) };
+  if (status) params.status = status;
+  return window.langsmith.call(`GET /api/v1/annotation-queues/${queueId}/runs`, {
+    params,
+  }) as Promise<AnnotationQueueRun[]>;
+}
+
+// The /runs endpoint's X-Pagination-Total header isn't reachable through the
+// window.langsmith.call bridge (it only returns the parsed body), so we ask
+// this endpoint separately to learn how many runs exist for a status.
+export async function fetchQueueRunsSize(
+  queueId: string,
+  status: AnnotationQueueRunSectionStatus
+): Promise<number> {
+  const result = (await window.langsmith.call(
+    `GET /api/v1/annotation-queues/${queueId}/size`,
+    { params: { status } }
+  )) as { size: number };
+  return result.size;
+}
+
+export async function fetchFeedbackConfigs(keys: string[]): Promise<FeedbackConfigSchema[]> {
+  if (keys.length === 0) return [];
+  return window.langsmith.call('GET /api/v1/feedback-configs', {
+    params: { key: keys },
+  }) as Promise<FeedbackConfigSchema[]>;
+}
+
+export async function submitFeedback(feedback: FeedbackSubmission): Promise<FeedbackItem> {
+  return window.langsmith.call('POST /api/v1/feedback', {
+    body: {
+      ...feedback,
+      feedback_source: { type: 'app' },
+      // The /feedback schema defaults this to true; explicitly opt out like
+      // the real annotation queue UI does — a review action shouldn't have
+      // the side effect of extending the underlying trace's retention.
+      extend_trace_retention: false,
+    },
+  }) as Promise<FeedbackItem>;
+}
+
+export async function fetchFeedbacks(runId: string): Promise<FeedbackItem[]> {
+  return window.langsmith.call('GET /api/v1/feedback', {
+    params: { run: runId },
+  }) as Promise<FeedbackItem[]>;
+}
+
+export async function patchFeedback(
+  feedbackId: string,
+  patch: Partial<Pick<FeedbackItem, 'score' | 'value' | 'comment'>>
+): Promise<FeedbackItem> {
+  return window.langsmith.call(`PATCH /api/v1/feedback/${feedbackId}`, {
+    body: patch,
+  }) as Promise<FeedbackItem>;
+}
+
+export async function deleteFeedback(feedbackId: string): Promise<void> {
+  await window.langsmith.call(`DELETE /api/v1/feedback/${feedbackId}`);
+}
+
+export async function markRunComplete(queueRunId: string): Promise<void> {
+  await window.langsmith.call(`POST /api/v1/annotation-queues/status/${queueRunId}`, {
+    body: { status: 'completed' },
+  });
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/ErrorBanner.tsx b/internal/cmd/templates/annotation-queue/src/components/ErrorBanner.tsx
new file mode 100644
index 0000000..95e9ecb
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/ErrorBanner.tsx
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { AlertTriangleIcon, ChevronRightIcon } from '@langchain/untitled-ui-icons';
+import { cn } from '../lib/utils';
+
+/** Red alert banner shown above a run's outputs when the run errored, mirroring LangSmith's run error card. */
+export function ErrorBanner({ error }: { error: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const canExpand = error.includes('\n') || error.length > 100;
+
+  return (
+    <div role="alert" className="mb-3 w-full rounded-sm bg-error px-2.5 py-1">
+      <div className="flex w-full items-center gap-2">
+        <AlertTriangleIcon className="h-3.5 w-3.5 shrink-0 text-error-primary" />
+        <div className="flex min-w-0 flex-1 gap-1">
+          <span className="shrink-0 whitespace-nowrap text-xs font-medium text-error-secondary">
+            Error
+          </span>
+          <span
+            className={cn(
+              'min-w-0 flex-1 text-xs text-error-secondary',
+              !expanded && 'truncate whitespace-nowrap'
+            )}
+          >
+            {error}
+          </span>
+        </div>
+        {canExpand && (
+          <button
+            type="button"
+            className="shrink-0 text-error-secondary"
+            onClick={() => setExpanded((v) => !v)}
+          >
+            <ChevronRightIcon className={cn('h-3.5 w-3.5 transition-transform', expanded && 'rotate-90')} />
+          </button>
+        )}
+      </div>
+      {expanded && (
+        <div className="mt-1 pl-6">
+          <span className="whitespace-pre-wrap break-words text-xs text-error-secondary">{error}</span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/FeedbackChip.tsx b/internal/cmd/templates/annotation-queue/src/components/FeedbackChip.tsx
new file mode 100644
index 0000000..f90b0f4
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/FeedbackChip.tsx
@@ -0,0 +1,33 @@
+import { getColorForFeedbackKey, formatFeedbackValue } from '../lib/feedbackColors';
+import { Spinner } from './Spinner';
+
+interface FeedbackChipProps {
+  feedbackKey: string;
+  score?: number | null;
+  value?: string | null;
+  isLoading?: boolean;
+}
+
+export function FeedbackChip({ feedbackKey, score, value, isLoading }: FeedbackChipProps) {
+  const color = getColorForFeedbackKey(feedbackKey);
+  const displayValue = formatFeedbackValue(score, value);
+
+  return (
+    <div className="flex h-6 flex-row items-center gap-1.5 rounded-sm border border-secondary bg-primary px-2">
+      <div
+        className="shrink-0 rounded-[2px]"
+        style={{ backgroundColor: color, width: '6px', height: '6px' }}
+      />
+      <span className="max-w-[200px] truncate text-xs font-medium leading-normal text-primary">
+        {feedbackKey}
+      </span>
+      {isLoading ? (
+        <Spinner size="sm" />
+      ) : displayValue != null ? (
+        <span className="min-w-0 max-w-[100px] truncate text-xs text-secondary">
+          {displayValue}
+        </span>
+      ) : null}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/FeedbackPanel.tsx b/internal/cmd/templates/annotation-queue/src/components/FeedbackPanel.tsx
new file mode 100644
index 0000000..a10cc6e
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/FeedbackPanel.tsx
@@ -0,0 +1,584 @@
+import {
+  CheckCircleBrokenIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Edit03Icon,
+  InfoCircleIcon,
+  PlusIcon,
+  XIcon,
+} from '@langchain/untitled-ui-icons';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ErrorBanner } from './ErrorBanner';
+import { FeedbackChip } from './FeedbackChip';
+import { ReviewerNotes } from './ReviewerNotes';
+import { Spinner } from './Spinner';
+import type { AnnotationQueue, FeedbackConfig, FeedbackItem, RubricItem } from '../types';
+import {
+  deleteFeedback,
+  fetchFeedbackConfigs,
+  fetchFeedbacks,
+  patchFeedback,
+  submitFeedback,
+} from '../api';
+import { cn } from '../lib/utils';
+
+function errorMessage(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}
+
+interface Props {
+  queue: AnnotationQueue | null;
+  runId: string | undefined;
+  traceId: string | undefined;
+  sessionId: string | undefined;
+  startTime: string | undefined;
+  queueRunId: string | undefined;
+  onComplete: () => void;
+  completing: boolean;
+  completeError: string | null;
+  totalNeedsReview: number;
+}
+
+// ── Rubric item card ─────────────────────────────────────────────────────────
+
+interface RubricCardProps {
+  item: RubricItem;
+  config: FeedbackConfig | undefined;
+  existingFeedback: FeedbackItem | undefined;
+  runId: string;
+  traceId: string | undefined;
+  sessionId: string | undefined;
+  startTime: string | undefined;
+  expanded: boolean;
+  onToggleExpand: () => void;
+  onFeedbackSaved: (feedback: FeedbackItem) => void;
+  onFeedbackDeleted: (feedbackKey: string) => void;
+}
+
+function RubricCard({
+  item,
+  config,
+  existingFeedback,
+  runId,
+  traceId,
+  sessionId,
+  startTime,
+  expanded,
+  onToggleExpand,
+  onFeedbackSaved,
+  onFeedbackDeleted,
+}: RubricCardProps) {
+  const [score, setScore] = useState<number | null>(existingFeedback?.score ?? null);
+  const [comment, setComment] = useState<string>(existingFeedback?.comment ?? '');
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Sync when run changes (existingFeedback.id changes)
+  const prevFeedbackId = useRef<string | undefined>(existingFeedback?.id);
+  useEffect(() => {
+    if (existingFeedback?.id !== prevFeedbackId.current) {
+      prevFeedbackId.current = existingFeedback?.id;
+      setScore(existingFeedback?.score ?? null);
+      setComment(existingFeedback?.comment ?? '');
+      setError(null);
+    }
+  });
+
+  // Type comes from the feedback config, not the rubric item — a key with no
+  // config yet (e.g. a brand-new ad-hoc key) defaults to freeform, same as
+  // LangSmith's own behavior for unconfigured keys.
+  const configType = config?.type ?? 'freeform';
+  const isCategorical = configType === 'categorical' && !!config?.categories?.length;
+  const isContinuous = configType === 'continuous';
+  const isFreeform = !isCategorical && !isContinuous;
+
+  async function save(newScore: number | null, newValue: string | null, newComment?: string) {
+    setSaving(true);
+    setError(null);
+    try {
+      const commentVal = newComment !== undefined ? newComment : comment;
+      let saved: FeedbackItem;
+      if (existingFeedback) {
+        saved = await patchFeedback(existingFeedback.id, {
+          score: newScore,
+          value: newValue,
+          comment: commentVal || null,
+        });
+      } else {
+        saved = await submitFeedback({
+          key: item.feedback_key,
+          run_id: runId,
+          score: newScore,
+          value: newValue ?? undefined,
+          comment: commentVal || undefined,
+          trace_id: traceId,
+          session_id: sessionId,
+          start_time: startTime,
+        });
+      }
+      onFeedbackSaved(saved);
+    } catch (e) {
+      console.error('Failed to save feedback', e);
+      setError(errorMessage(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!existingFeedback) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await deleteFeedback(existingFeedback.id);
+      setScore(null);
+      setComment('');
+      onFeedbackDeleted(item.feedback_key);
+    } catch (e) {
+      console.error('Failed to delete feedback', e);
+      setError(errorMessage(e));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const isFilled = existingFeedback != null;
+  const feedbackScore = existingFeedback?.score;
+  const feedbackValue = existingFeedback?.value;
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg border border-secondary p-3">
+      {/* Header row */}
+      <button
+        type="button"
+        className="flex w-full items-center gap-2 text-left"
+        onClick={onToggleExpand}
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          <FeedbackChip
+            feedbackKey={item.feedback_key}
+            score={feedbackScore}
+            value={feedbackValue}
+            isLoading={saving}
+          />
+          {isFilled && !saving && (
+            <CheckCircleBrokenIcon className="h-4 w-4 shrink-0 text-success-primary" />
+          )}
+          {item.is_required && (
+            <span className="inline-flex items-center rounded-sm border border-warning bg-warning px-1.5 py-0.5 text-xs font-medium text-warning-primary">
+              Required
+            </span>
+          )}
+        </div>
+        {expanded ? (
+          <ChevronDownIcon className="h-4 w-4 shrink-0 text-tertiary" />
+        ) : (
+          <ChevronRightIcon className="h-4 w-4 shrink-0 text-tertiary" />
+        )}
+      </button>
+
+      {expanded && (
+        <div className="flex flex-col gap-2">
+          {item.description && (
+            <p className="text-sm text-quaternary">{item.description}</p>
+          )}
+
+          {error && <ErrorBanner error={error} />}
+
+          {/* Category options */}
+          {isCategorical && (
+            <div className="flex flex-col gap-2">
+              {config!.categories!.map((cat) => {
+                const label = cat.label ?? String(cat.value);
+                const isSelected = score === cat.value;
+                // value_descriptions is keyed by label when categories have a
+                // string label; score_descriptions is keyed by the stringified
+                // numeric value otherwise (mirrors AnnotationQueueRubricForm).
+                const description = cat.label
+                  ? (item.value_descriptions?.[cat.label] ?? undefined)
+                  : (item.score_descriptions?.[String(cat.value)] ?? undefined);
+                return (
+                  <button
+                    key={cat.value}
+                    type="button"
+                    className={cn(
+                      'flex w-full cursor-pointer flex-col gap-1 rounded-md border p-3 text-left',
+                      isSelected
+                        ? 'border-brand bg-brand-muted'
+                        : 'border-secondary hover:bg-secondary/50'
+                    )}
+                    onClick={() => {
+                      if (isSelected) {
+                        setScore(null);
+                        handleDelete();
+                      } else {
+                        setScore(cat.value);
+                        save(cat.value, label);
+                      }
+                    }}
+                    disabled={saving}
+                  >
+                    <span className={cn('text-sm font-medium', saving && 'opacity-0')}>
+                      {label}
+                    </span>
+                    {description && (
+                      <span className="line-clamp-2 whitespace-normal break-words text-sm text-tertiary">
+                        {description}
+                      </span>
+                    )}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Numeric input */}
+          {isContinuous && (
+            <div className="flex flex-col gap-2">
+              {(config?.min != null || config?.max != null) && (
+                <div className="text-xs text-quaternary">
+                  {config?.min != null && config?.max != null
+                    ? `Min: ${config.min}, Max: ${config.max}`
+                    : config?.min != null
+                      ? `Min: ${config.min}`
+                      : `Max: ${config?.max}`}
+                </div>
+              )}
+              <div className="flex gap-2">
+                <input
+                  type="number"
+                  step="any"
+                  min={config?.min ?? undefined}
+                  max={config?.max ?? undefined}
+                  value={score ?? ''}
+                  onChange={(e) => {
+                    const val = e.target.value === '' ? null : Number(e.target.value);
+                    setScore(val);
+                  }}
+                  onBlur={() => save(score, null)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+                  }}
+                  placeholder="Enter score"
+                  className="min-w-0 flex-1 rounded-md border border-secondary bg-primary px-3 py-1.5 text-sm text-primary focus:border-brand focus:outline-none"
+                />
+                {existingFeedback && (
+                  <button
+                    type="button"
+                    className="shrink-0 self-start rounded p-1 text-quaternary hover:bg-secondary"
+                    onMouseDown={(e) => e.preventDefault()}
+                    onClick={handleDelete}
+                  >
+                    <XIcon className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Freeform text */}
+          {isFreeform && (
+            <div className="flex gap-2">
+              <textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                onBlur={() => {
+                  if (comment.trim()) save(null, null, comment);
+                  else if (existingFeedback) handleDelete();
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                    (e.target as HTMLTextAreaElement).blur();
+                  }
+                }}
+                placeholder="Enter text"
+                rows={3}
+                className="flex-1 resize-none rounded-md border border-secondary bg-primary px-3 py-1.5 text-sm text-primary focus:border-brand focus:outline-none"
+              />
+              {existingFeedback && (
+                <button
+                  type="button"
+                  className="self-start rounded p-1 text-quaternary hover:bg-secondary"
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={handleDelete}
+                >
+                  <XIcon className="h-4 w-4" />
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── FeedbackPanel ─────────────────────────────────────────────────────────────
+
+export function FeedbackPanel({
+  queue,
+  runId,
+  traceId,
+  sessionId,
+  startTime,
+  queueRunId,
+  onComplete,
+  completing,
+  completeError,
+  totalNeedsReview,
+}: Props) {
+  const [feedbackMap, setFeedbackMap] = useState<Record<string, FeedbackItem>>({});
+  const [feedbackLoading, setFeedbackLoading] = useState(false);
+  const [feedbackConfigs, setFeedbackConfigs] = useState<Record<string, FeedbackConfig>>({});
+  const [expandedItems, setExpandedItems] = useState<boolean[]>([]);
+  // Ad-hoc feedback keys added via the "+ Add" button, on top of the queue's rubric
+  const [adhocKeys, setAdhocKeys] = useState<string[]>([]);
+  const [addingKey, setAddingKey] = useState(false);
+  const [newKeyName, setNewKeyName] = useState('');
+
+  const allRubricItems: RubricItem[] = [
+    ...(queue?.rubric_items ?? []),
+    ...adhocKeys.map(
+      (key): RubricItem => ({
+        feedback_key: key,
+        description: null,
+        value_descriptions: null,
+        score_descriptions: null,
+      })
+    ),
+  ];
+  // Assertion-flagged rubric items belong to dataset-curation mode, not the
+  // Feedback list — mirrors AnnotationQueueRubricForm's filteredQueue.
+  const visibleRubricItems = allRubricItems.filter((item) => !item.is_assertion);
+
+  // Initialize expanded state when queue loads. Sized to the *visible*
+  // (non-assertion) items, since that's what expandedItems is indexed against
+  // everywhere else.
+  useEffect(() => {
+    if (queue?.id) {
+      const visibleCount = (queue.rubric_items ?? []).filter((item) => !item.is_assertion).length;
+      setExpandedItems(Array(visibleCount).fill(true));
+      setAdhocKeys([]);
+    }
+  }, [queue?.id, queue?.rubric_items]);
+
+  // Fetch the type/min/max/categories config for each visible key — the
+  // rubric item itself carries no type info (see RubricItem in types.ts).
+  const rubricKeys = useMemo(
+    () => visibleRubricItems.map((item) => item.feedback_key),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [visibleRubricItems.map((item) => item.feedback_key).join(',')]
+  );
+  useEffect(() => {
+    if (rubricKeys.length === 0) {
+      setFeedbackConfigs({});
+      return;
+    }
+    fetchFeedbackConfigs(rubricKeys)
+      .then((configs) => {
+        const map: Record<string, FeedbackConfig> = {};
+        for (const c of configs) map[c.feedback_key] = c.feedback_config;
+        setFeedbackConfigs(map);
+      })
+      .catch((e) => console.error('Failed to load feedback configs', e));
+  }, [rubricKeys]);
+
+  function handleAddKey() {
+    const key = newKeyName.trim();
+    if (key && !allRubricItems.some((item) => item.feedback_key === key)) {
+      setAdhocKeys((prev) => [...prev, key]);
+      setExpandedItems((prev) => [...prev, true]);
+    }
+    setNewKeyName('');
+    setAddingKey(false);
+  }
+
+  // Reload feedbacks when runId changes
+  useEffect(() => {
+    if (!runId) {
+      setFeedbackMap({});
+      return;
+    }
+    setFeedbackLoading(true);
+    fetchFeedbacks(runId)
+      .then((items) => {
+        const map: Record<string, FeedbackItem> = {};
+        for (const item of items) map[item.key] = item;
+        setFeedbackMap(map);
+      })
+      .catch((e) => console.error('Failed to load feedbacks', e))
+      .finally(() => setFeedbackLoading(false));
+  }, [runId]);
+
+  const handleFeedbackSaved = useCallback(
+    (feedback: FeedbackItem, index: number) => {
+      setFeedbackMap((prev) => ({ ...prev, [feedback.key]: feedback }));
+      // Auto-advance: open next unfilled item
+      setExpandedItems((prev) => {
+        const next = [...prev];
+        for (let i = index + 1; i < visibleRubricItems.length; i++) {
+          if (
+            !feedbackMap[visibleRubricItems[i].feedback_key] &&
+            feedback.key !== visibleRubricItems[i].feedback_key
+          ) {
+            next[i] = true;
+            break;
+          }
+        }
+        return next;
+      });
+    },
+    [visibleRubricItems, feedbackMap]
+  );
+
+  const handleFeedbackDeleted = useCallback((feedbackKey: string) => {
+    setFeedbackMap((prev) => {
+      const next = { ...prev };
+      delete next[feedbackKey];
+      return next;
+    });
+  }, []);
+
+  const hasRubricItems = visibleRubricItems.length > 0;
+  const allRequiredFilled = visibleRubricItems
+    .filter((item) => item.is_required)
+    .every((item) => feedbackMap[item.feedback_key] != null);
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {/* Scrollable content */}
+      <div className="flex-1 overflow-auto px-4 py-4">
+        <div className="flex flex-col gap-10">
+          {/* Instructions section */}
+          <div className="flex flex-col gap-2">
+            <div className="text-base font-medium text-primary">Instructions</div>
+            {queue?.rubric_instructions ? (
+              <div className="text-sm text-secondary">{queue.rubric_instructions}</div>
+            ) : (
+              <div className="flex flex-col items-center gap-3 rounded-xl bg-secondary px-6 py-12">
+                <div className="rounded-full bg-brand-subtle p-2">
+                  <InfoCircleIcon className="h-4 w-4 text-brand-primary" />
+                </div>
+                <div className="flex flex-col gap-1 text-center">
+                  <div className="text-sm font-semibold text-secondary">No instructions yet</div>
+                  <div className="text-sm text-tertiary">
+                    Contact your administrator to create a clear annotation rubric.
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Feedback section */}
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <div className="text-base font-medium text-primary">Feedback</div>
+                {feedbackLoading && <Spinner size="md" className="opacity-50" />}
+              </div>
+              {queue && (
+                <button
+                  type="button"
+                  onClick={() => setAddingKey(true)}
+                  className="inline-flex items-center gap-1 rounded-md border border-secondary px-2.5 py-1.5 text-xs font-medium text-secondary hover:bg-secondary"
+                >
+                  <PlusIcon className="h-3.5 w-3.5" />
+                  Add
+                </button>
+              )}
+            </div>
+
+            {addingKey && (
+              <input
+                autoFocus
+                value={newKeyName}
+                onChange={(e) => setNewKeyName(e.target.value)}
+                onBlur={handleAddKey}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+                  if (e.key === 'Escape') {
+                    setNewKeyName('');
+                    setAddingKey(false);
+                  }
+                }}
+                placeholder="Feedback key"
+                className="w-full rounded-md border border-secondary bg-primary px-3 py-1.5 text-sm text-primary focus:border-brand focus:outline-none"
+              />
+            )}
+
+            {!queue ? (
+              <div className="flex items-center justify-center py-8">
+                <span className="text-sm text-tertiary">Loading rubric…</span>
+              </div>
+            ) : !hasRubricItems ? (
+              <div className="flex flex-col items-center gap-3 rounded-xl bg-secondary px-6 py-12">
+                <div className="rounded-full bg-brand-subtle p-2">
+                  <Edit03Icon className="h-4 w-4 text-brand-primary" />
+                </div>
+                <div className="flex flex-col gap-1 text-center">
+                  <div className="text-sm font-semibold text-secondary">No feedback rubrics yet</div>
+                  <div className="text-sm text-tertiary">
+                    Add an existing rubric or set up one for future use.
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3">
+                {visibleRubricItems.map((item, idx) => (
+                  <RubricCard
+                    key={item.feedback_key}
+                    item={item}
+                    config={feedbackConfigs[item.feedback_key]}
+                    existingFeedback={feedbackMap[item.feedback_key]}
+                    runId={runId ?? ''}
+                    traceId={traceId}
+                    sessionId={sessionId}
+                    startTime={startTime}
+                    expanded={expandedItems[idx] ?? true}
+                    onToggleExpand={() =>
+                      setExpandedItems((prev) => {
+                        const next = [...prev];
+                        next[idx] = !next[idx];
+                        return next;
+                      })
+                    }
+                    onFeedbackSaved={(fb) => handleFeedbackSaved(fb, idx)}
+                    onFeedbackDeleted={handleFeedbackDeleted}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Reviewer notes */}
+          <ReviewerNotes runId={runId} traceId={traceId} sessionId={sessionId} startTime={startTime} />
+        </div>
+      </div>
+
+      {/* Sticky footer */}
+      {runId && queueRunId && (
+        <div className="sticky bottom-0 border-t border-secondary bg-primary px-4 pb-20 pt-4">
+          {completeError && <ErrorBanner error={completeError} />}
+          <button
+            type="button"
+            className="flex w-full items-center justify-center gap-2 rounded-md bg-brand px-4 py-2 text-sm font-medium text-brand-on-fill transition-colors hover:bg-brand-hover disabled:opacity-50"
+            onClick={onComplete}
+            disabled={completing || !allRequiredFilled}
+            title={!allRequiredFilled ? 'Fill in all required rubric items' : undefined}
+          >
+            {completing ? (
+              'Saving…'
+            ) : (
+              <>
+                {totalNeedsReview > 1 ? 'Next' : 'Done'}
+                <span className="flex items-center gap-0.5 text-xs opacity-70">
+                  <span>⌘</span><span>↵</span>
+                </span>
+              </>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/LinearProgress.tsx b/internal/cmd/templates/annotation-queue/src/components/LinearProgress.tsx
new file mode 100644
index 0000000..a686206
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/LinearProgress.tsx
@@ -0,0 +1,11 @@
+/** Indeterminate top-of-page progress bar, shown while the queue/run data is still loading. */
+export function LinearProgress() {
+  return (
+    <div className="h-0.5 w-full shrink-0 overflow-hidden bg-brand-subtle">
+      <div
+        className="h-full w-[12.5%] rounded-full bg-brand"
+        style={{ animation: 'linear-progress-indeterminate 1.2s ease-in-out infinite' }}
+      />
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/QueueBar.tsx b/internal/cmd/templates/annotation-queue/src/components/QueueBar.tsx
new file mode 100644
index 0000000..1a53541
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/QueueBar.tsx
@@ -0,0 +1,30 @@
+import { fetchQueues } from '../api';
+import type { AnnotationQueue } from '../types';
+import { SearchableSelect } from './SearchableSelect';
+
+interface Props {
+  selectedQueueId: string;
+  onSelect: (queueId: string) => void;
+}
+
+// Apps get no host context, so the app picks its own queue from this bar's
+// list of the workspace's queues — paginated (25/page) and searchable by
+// name server-side via fetchQueues' name_contains.
+export function QueueBar({ selectedQueueId, onSelect }: Props) {
+  return (
+    <div className="flex items-center gap-2 bg-surface-level-1 px-4 py-2">
+      <label htmlFor="ls-queue-select" className="shrink-0 text-sm font-medium text-secondary">
+        Annotation queue
+      </label>
+      <SearchableSelect<AnnotationQueue>
+        id="ls-queue-select"
+        value={selectedQueueId}
+        onSelect={(queue) => onSelect(queue.id)}
+        fetchPage={fetchQueues}
+        placeholder="Select a queue…"
+        searchPlaceholder="Search queues by name…"
+        emptyLabel="No annotation queues in this workspace"
+      />
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/ReviewerNotes.tsx b/internal/cmd/templates/annotation-queue/src/components/ReviewerNotes.tsx
new file mode 100644
index 0000000..8e9768f
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/ReviewerNotes.tsx
@@ -0,0 +1,150 @@
+import { Trash02Icon } from '@langchain/untitled-ui-icons';
+import { useEffect, useState } from 'react';
+import { deleteFeedback, fetchFeedbacks, submitFeedback } from '../api';
+import type { FeedbackItem } from '../types';
+import { ErrorBanner } from './ErrorBanner';
+import { Spinner } from './Spinner';
+
+function errorMessage(e: unknown): string {
+  return e instanceof Error ? e.message : String(e);
+}
+
+interface Props {
+  runId: string | undefined;
+  traceId: string | undefined;
+  sessionId: string | undefined;
+  startTime: string | undefined;
+}
+
+// Mirrors LangSmith's RunNotesCrud: a per-run comment thread built on the
+// regular feedback API under the reserved "note" key (comment-only, no score).
+const NOTE_KEY = 'note';
+
+export function ReviewerNotes({ runId, traceId, sessionId, startTime }: Props) {
+  const [notes, setNotes] = useState<FeedbackItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setDraft('');
+    setError(null);
+    if (!runId) {
+      setNotes([]);
+      return;
+    }
+    setLoading(true);
+    fetchFeedbacks(runId)
+      .then((items) =>
+        setNotes(
+          items
+            .filter((f) => f.key === NOTE_KEY && f.comment)
+            .sort((a, b) => (a.created_at < b.created_at ? 1 : -1))
+        )
+      )
+      .catch((e) => console.error('Failed to load reviewer notes', e))
+      .finally(() => setLoading(false));
+  }, [runId]);
+
+  async function handleAddNote() {
+    if (!runId || !draft.trim()) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const saved = await submitFeedback({
+        key: NOTE_KEY,
+        run_id: runId,
+        comment: draft.trim(),
+        feedback_config: { type: 'freeform' },
+        trace_id: traceId,
+        session_id: sessionId,
+        start_time: startTime,
+      });
+      setNotes((prev) => [saved, ...prev]);
+      setDraft('');
+    } catch (e) {
+      console.error('Failed to add reviewer note', e);
+      setError(errorMessage(e));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  async function handleDeleteNote(note: FeedbackItem) {
+    setError(null);
+    try {
+      await deleteFeedback(note.id);
+      setNotes((prev) => prev.filter((n) => n.id !== note.id));
+    } catch (e) {
+      console.error('Failed to delete reviewer note', e);
+      setError(errorMessage(e));
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-base font-medium text-primary">Reviewer Notes</div>
+
+      <div className="flex flex-col gap-2">
+        <textarea
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+              e.preventDefault();
+              handleAddNote();
+            }
+          }}
+          placeholder="Leave a note for other reviewers…"
+          rows={2}
+          disabled={!runId || submitting}
+          className="resize-none rounded-md border border-secondary bg-primary px-3 py-1.5 text-sm text-primary focus:border-brand focus:outline-none disabled:opacity-50"
+        />
+        <button
+          type="button"
+          onClick={handleAddNote}
+          disabled={!runId || submitting || !draft.trim()}
+          className="self-end rounded-md border border-secondary px-2.5 py-1.5 text-xs font-medium text-secondary hover:bg-secondary disabled:opacity-50"
+        >
+          {submitting ? 'Adding…' : 'Add note'}
+        </button>
+      </div>
+
+      {error && <ErrorBanner error={error} />}
+
+      {loading ? (
+        <div className="flex items-center justify-center py-4">
+          <Spinner size="sm" />
+        </div>
+      ) : (
+        notes.length > 0 && (
+          <div className="flex flex-col gap-2">
+            {notes.map((note) => (
+              <div
+                key={note.id}
+                className="flex flex-col gap-1 rounded-lg border border-secondary p-3"
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <span className="whitespace-pre-line break-words text-sm text-primary">
+                    {note.comment}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => handleDeleteNote(note)}
+                    className="shrink-0 rounded p-1 text-quaternary hover:bg-secondary"
+                  >
+                    <Trash02Icon className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+                <span className="text-xs text-quaternary">
+                  {new Date(note.created_at).toLocaleString()}
+                </span>
+              </div>
+            ))}
+          </div>
+        )
+      )}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/RunList.tsx b/internal/cmd/templates/annotation-queue/src/components/RunList.tsx
new file mode 100644
index 0000000..b60841e
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/RunList.tsx
@@ -0,0 +1,256 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  ClockIcon,
+  LayersTwo01Icon,
+  Lock01Icon,
+} from '@langchain/untitled-ui-icons';
+import type { AnnotationQueueRun } from '../types';
+import type { RunSection as RunSectionData } from '../hooks/useRunSection';
+import { getCollapsedPreview } from '../lib/messages';
+import { cn } from '../lib/utils';
+import { Spinner } from './Spinner';
+
+const SKELETON_WIDTH_PAIRS: [string, string][] = [
+  ['w-[35%]', 'w-[45%]'],
+  ['w-[45%]', 'w-[30%]'],
+  ['w-[30%]', 'w-[50%]'],
+  ['w-[40%]', 'w-[35%]'],
+  ['w-[25%]', 'w-[40%]'],
+  ['w-[38%]', 'w-[28%]'],
+  ['w-[42%]', 'w-[32%]'],
+  ['w-[28%]', 'w-[48%]'],
+];
+
+function RunListSkeletons() {
+  return (
+    <div className="flex flex-col">
+      {SKELETON_WIDTH_PAIRS.map(([nameW, previewW], i) => (
+        <div
+          key={i}
+          className="flex items-center gap-2 border-b border-secondary px-3 py-2.5"
+        >
+          <div className={cn('my-0 h-3.5 shrink-0 animate-pulse rounded bg-secondary', nameW)} />
+          <div className={cn('my-0 h-3 min-w-0 animate-pulse rounded bg-secondary opacity-60', previewW)} />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface RunListItemProps {
+  run: AnnotationQueueRun;
+  isSelected: boolean;
+  onClick: () => void;
+  numReviewersPerItem?: number | null;
+}
+
+function RunListItem({ run, isSelected, onClick, numReviewersPerItem }: RunListItemProps) {
+  const preview = getCollapsedPreview(run.inputs);
+  const completedCount = run.completed_by?.length ?? 0;
+  const reservedCount = run.reserved_by?.length ?? 0;
+  const isFullyReserved =
+    !!numReviewersPerItem && reservedCount >= numReviewersPerItem;
+  const showProgress = !!numReviewersPerItem && numReviewersPerItem > 1 && completedCount > 0;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full items-center gap-2 border-b border-secondary px-3 py-2.5 text-left transition-colors',
+        isSelected ? 'bg-tertiary' : 'hover:bg-secondary'
+      )}
+      onClick={onClick}
+    >
+      <span
+        className={cn(
+          'shrink-0 truncate text-sm',
+          isFullyReserved ? 'text-quaternary' : 'text-primary'
+        )}
+      >
+        {run.name ?? run.id.slice(0, 8)}
+      </span>
+      {preview && (
+        <span
+          className={cn(
+            'min-w-0 flex-1 truncate text-xs',
+            isFullyReserved ? 'text-quaternary' : 'text-tertiary'
+          )}
+        >
+          {preview}
+        </span>
+      )}
+      <div className="ml-auto flex shrink-0 items-center gap-1.5">
+        {showProgress && (
+          <span className="flex items-center gap-0.5 rounded bg-secondary px-1 py-0.5">
+            <CheckCircleIcon className="h-3 w-3 text-tertiary" />
+            <span className="text-xs leading-3 text-tertiary">
+              {completedCount}/{numReviewersPerItem}
+            </span>
+          </span>
+        )}
+        {isFullyReserved && (
+          <span className="flex items-center rounded bg-secondary px-1 py-0.5">
+            <Lock01Icon className="h-3 w-3 text-tertiary" />
+          </span>
+        )}
+      </div>
+    </button>
+  );
+}
+
+interface SectionProps {
+  label: string;
+  icon: React.ElementType;
+  section: RunSectionData;
+  selectedQueueRunId: string | undefined;
+  defaultOpen: boolean;
+  isLast?: boolean;
+  numReviewersPerItem?: number | null;
+  onSelectRun: (queueRunId: string) => void;
+}
+
+function RunSection({
+  label,
+  icon: Icon,
+  section,
+  selectedQueueRunId,
+  defaultOpen,
+  isLast,
+  numReviewersPerItem,
+  onSelectRun,
+}: SectionProps) {
+  const { runs, total, loading, loadingMore, hasMore, loadMore } = section;
+  const [open, setOpen] = useState(defaultOpen);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+
+  // Fetch the next page once the sentinel at the bottom of this section's
+  // scroll container comes into view. hasMore comes from a separate /size
+  // call (see useRunSection), not from this page's response.
+  useEffect(() => {
+    if (!open || !hasMore) return;
+    const root = scrollRef.current;
+    const target = sentinelRef.current;
+    if (!root || !target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) loadMore();
+      },
+      { root, rootMargin: '150px' }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [open, hasMore, loadMore]);
+
+  return (
+    <div className={cn('flex flex-col', open && 'min-h-0 flex-1')}>
+      <button
+        type="button"
+        className={cn(
+          'flex shrink-0 items-center gap-2 bg-secondary px-3 py-2 hover:bg-tertiary',
+          open && 'border-b border-secondary',
+          !open && isLast && 'border-b border-secondary'
+        )}
+        onClick={() => setOpen((v) => !v)}
+      >
+        {open ? (
+          <ChevronDownIcon className="h-3.5 w-3.5 text-tertiary" />
+        ) : (
+          <ChevronRightIcon className="h-3.5 w-3.5 text-tertiary" />
+        )}
+        <Icon className="h-3.5 w-3.5 text-tertiary" />
+        <span className="text-sm font-medium text-secondary">{label}</span>
+        <div className="ml-auto flex items-center gap-1.5">
+          {loading && <Spinner size="sm" />}
+          <span className="text-xs text-tertiary">{Math.max(total, runs.length)}</span>
+        </div>
+      </button>
+
+      {open && (
+        <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto">
+          {loading ? (
+            <RunListSkeletons />
+          ) : runs.length === 0 ? (
+            <div className="flex items-center justify-center px-3 py-6">
+              <span className="text-xs text-tertiary">No runs</span>
+            </div>
+          ) : (
+            <>
+              {runs.map((run) => (
+                <RunListItem
+                  key={run.queue_run_id}
+                  run={run}
+                  isSelected={run.queue_run_id === selectedQueueRunId}
+                  onClick={() => onSelectRun(run.queue_run_id)}
+                  numReviewersPerItem={numReviewersPerItem}
+                />
+              ))}
+              {hasMore && (
+                <div ref={sentinelRef} className="flex items-center justify-center py-3">
+                  {loadingMore && <Spinner size="sm" />}
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface Props {
+  needsReview: RunSectionData;
+  needsOthersReview: RunSectionData;
+  completed: RunSectionData;
+  selectedQueueRunId: string | undefined;
+  numReviewersPerItem?: number | null;
+  onSelectRun: (queueRunId: string) => void;
+}
+
+export function RunList({
+  needsReview,
+  needsOthersReview,
+  completed,
+  selectedQueueRunId,
+  numReviewersPerItem,
+  onSelectRun,
+}: Props) {
+  const showNeedsOthersReview = (numReviewersPerItem ?? 0) > 1;
+
+  return (
+    <div className="flex h-full flex-col divide-y divide-secondary overflow-hidden border-r border-secondary">
+      <RunSection
+        label="Needs Review"
+        icon={LayersTwo01Icon}
+        section={needsReview}
+        selectedQueueRunId={selectedQueueRunId}
+        defaultOpen={true}
+        numReviewersPerItem={numReviewersPerItem}
+        onSelectRun={onSelectRun}
+      />
+      {showNeedsOthersReview && (
+        <RunSection
+          label="Needs Others' Review"
+          icon={ClockIcon}
+          section={needsOthersReview}
+          selectedQueueRunId={selectedQueueRunId}
+          defaultOpen={false}
+          numReviewersPerItem={numReviewersPerItem}
+          onSelectRun={onSelectRun}
+        />
+      )}
+      <RunSection
+        label="Completed"
+        icon={CheckCircleIcon}
+        section={completed}
+        selectedQueueRunId={selectedQueueRunId}
+        defaultOpen={false}
+        isLast={true}
+        onSelectRun={onSelectRun}
+      />
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/components/RunViewer.tsx b/internal/cmd/templates/annotation-queue/src/components/RunViewer.tsx
new file mode 100644
index 0000000..941af95
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/components/RunViewer.tsx
@@ -0,0 +1,292 @@
+import { useState } from 'react';
+import { CornerDownRightIcon, Maximize01Icon, Minimize01Icon } from '@langchain/untitled-ui-icons';
+import type { IOMode } from '../types';
+import {
+  maybeGetMessages,
+  contentToText,
+  getDisplayRole,
+  getMessageFields,
+  getMessageRole,
+  getToolCalls,
+  getCollapsedPreview,
+  toYamlish,
+  type NormalizedToolCall,
+} from '../lib/messages';
+import { cn } from '../lib/utils';
+import { ErrorBanner } from './ErrorBanner';
+import { Spinner } from './Spinner';
+
+interface Props {
+  inputs: Record<string, unknown> | null;
+  outputs: Record<string, unknown> | null;
+  error?: string | null;
+  loading?: boolean;
+}
+
+// ── Shared card chrome ───────────────────────────────────────────────────────
+
+function RoleBadge({ role }: { role: string }) {
+  return (
+    <span className="shrink-0 rounded-sm bg-secondary px-1.5 py-0.5 text-xs font-semibold uppercase tracking-wide text-secondary">
+      {role}
+    </span>
+  );
+}
+
+// ── Tool call cards, nested beneath an AI message ───────────────────────────
+
+function ToolCallItem({ toolCall }: { toolCall: NormalizedToolCall }) {
+  return (
+    <div className="ml-4 mt-2 flex items-start gap-2">
+      <CornerDownRightIcon className="mt-3 size-4 shrink-0 text-tertiary" />
+      <div className="flex-1 rounded-lg border border-secondary bg-primary">
+        <div className="flex items-center gap-2 px-4 py-2">
+          <RoleBadge role="Tool call" />
+          {toolCall.name && (
+            <span className="font-mono text-xs font-medium text-primary">{toolCall.name}</span>
+          )}
+          {toolCall.id && <span className="font-mono text-xs text-quaternary">{toolCall.id}</span>}
+        </div>
+        <div className="px-4 pb-4">
+          <pre className="whitespace-pre-wrap break-words font-mono text-xs text-secondary">
+            {toYamlish(toolCall.args)}
+          </pre>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ToolCallsSection({ toolCalls }: { toolCalls: NormalizedToolCall[] }) {
+  if (toolCalls.length === 0) return null;
+  return (
+    <div className="flex flex-col">
+      {toolCalls.map((tc, i) => (
+        <ToolCallItem key={i} toolCall={tc} />
+      ))}
+    </div>
+  );
+}
+
+// ── Tool result message ──────────────────────────────────────────────────────
+
+function ToolMessageCard({ message }: { message: unknown }) {
+  const fields = getMessageFields(message);
+  const toolCallId = (fields.tool_call_id ?? (fields.additional_kwargs as Record<string, unknown> | undefined)?.tool_call_id) as
+    | string
+    | undefined;
+  const toolName = typeof fields.name === 'string' ? fields.name : '';
+  const content = fields.content;
+  const parsedContent = (() => {
+    try {
+      return typeof content === 'string' ? JSON.parse(content) : content;
+    } catch {
+      return content;
+    }
+  })();
+
+  return (
+    <div className="rounded-lg border border-secondary bg-primary">
+      <div className="flex items-center gap-2 px-4 py-2">
+        <RoleBadge role="Tool" />
+        {toolName && <span className="font-mono text-xs font-medium text-primary">{toolName}</span>}
+        {toolCallId && <span className="font-mono text-xs text-quaternary">{toolCallId}</span>}
+      </div>
+      <div className="px-4 pb-4">
+        <pre className="whitespace-pre-wrap break-words font-mono text-xs text-secondary">
+          {typeof parsedContent === 'string' ? parsedContent : toYamlish(parsedContent)}
+        </pre>
+      </div>
+    </div>
+  );
+}
+
+// ── Single message card (human / ai / system) ────────────────────────────────
+
+function MessageCard({ message }: { message: unknown }) {
+  const role = getMessageRole(message);
+
+  if (role === 'tool') {
+    return <ToolMessageCard message={message} />;
+  }
+
+  const fields = getMessageFields(message);
+  const text = contentToText(fields.content);
+  const toolCalls = role === 'ai' ? getToolCalls(message) : [];
+
+  return (
+    <div className="flex flex-col">
+      <div className="rounded-lg border border-secondary bg-primary">
+        <div className="flex items-center gap-2 px-4 py-2">
+          <RoleBadge role={getDisplayRole(message)} />
+        </div>
+        <div className="px-4 pb-4">
+          {text ? (
+            <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-primary">{text}</p>
+          ) : (
+            <p className="text-xs italic text-quaternary">Empty</p>
+          )}
+        </div>
+      </div>
+      <ToolCallsSection toolCalls={toolCalls} />
+    </div>
+  );
+}
+
+// ── Data renderer ────────────────────────────────────────────────────────────
+
+function DataView({ data }: { data: Record<string, unknown> }) {
+  const messages = maybeGetMessages(data);
+
+  if (messages && messages.length > 0) {
+    return (
+      <div className="flex flex-col gap-3">
+        {messages.map((msg, i) => (
+          <MessageCard key={i} message={msg} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {Object.entries(data).map(([key, value]) => (
+        <div key={key} className="flex flex-col gap-1">
+          <span className="text-xs font-medium text-secondary">{key}</span>
+          {typeof value === 'string' ? (
+            <p className="whitespace-pre-wrap break-words text-sm leading-relaxed text-primary">
+              {value}
+            </p>
+          ) : (
+            <pre className="whitespace-pre-wrap break-words rounded-lg border border-secondary bg-secondary p-3 text-xs text-primary">
+              {JSON.stringify(value, null, 2)}
+            </pre>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── CollapsibleSection ───────────────────────────────────────────────────────
+
+function CollapsibleSection({
+  title,
+  data,
+  mode,
+  onModeChange,
+  error,
+  loading,
+  showRawButton = true,
+}: {
+  title: string;
+  data: Record<string, unknown> | null;
+  mode: IOMode;
+  onModeChange: (m: IOMode) => void;
+  error?: string | null;
+  loading?: boolean;
+  showRawButton?: boolean;
+}) {
+  const hasData = data && Object.keys(data).length > 0;
+
+  const preview = mode === 'collapsed' && hasData ? getCollapsedPreview(data) : '';
+
+  return (
+    <div className="group flex flex-col">
+      {/* Header */}
+      <div
+        className="flex cursor-pointer items-center justify-between border-b border-secondary bg-secondary px-6 py-2"
+        onClick={() => onModeChange(mode === 'collapsed' ? 'expanded' : 'collapsed')}
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-4">
+          <span className="shrink-0 text-xs font-medium uppercase tracking-wide text-tertiary">
+            {title}
+          </span>
+          {loading ? (
+            <Spinner size="sm" />
+          ) : (
+            mode === 'collapsed' &&
+            preview && (
+              <span className="line-clamp-1 min-w-0 flex-1 text-sm text-quaternary">
+                {preview}
+              </span>
+            )
+          )}
+        </div>
+        {!loading && (
+          <div
+            className="flex shrink-0 items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {showRawButton && mode !== 'collapsed' && (
+              <button
+                type="button"
+                className={cn(
+                  'rounded px-2 py-1 text-xs text-quaternary',
+                  mode === 'raw' ? 'bg-tertiary' : 'bg-transparent hover:bg-secondary'
+                )}
+                onClick={() => onModeChange(mode === 'raw' ? 'expanded' : 'raw')}
+              >
+                RAW
+              </button>
+            )}
+            <button
+              type="button"
+              className="rounded p-1 text-quaternary hover:bg-tertiary"
+              onClick={() => onModeChange(mode === 'collapsed' ? 'expanded' : 'collapsed')}
+            >
+              {mode === 'collapsed' ? (
+                <Maximize01Icon className="h-3.5 w-3.5" />
+              ) : (
+                <Minimize01Icon className="h-3.5 w-3.5" />
+              )}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {!loading && mode !== 'collapsed' && (
+        <div className="border-b border-secondary p-4">
+          {error && <ErrorBanner error={error} />}
+          {!hasData ? (
+            <p className="text-sm text-tertiary">—</p>
+          ) : mode === 'raw' ? (
+            <pre className="whitespace-pre-wrap break-words rounded-lg border border-secondary bg-secondary p-3 text-xs text-primary">
+              {JSON.stringify(data, null, 2)}
+            </pre>
+          ) : (
+            <DataView data={data} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── RunViewer ────────────────────────────────────────────────────────────────
+
+export function RunViewer({ inputs, outputs, error, loading }: Props) {
+  const [inputMode, setInputMode] = useState<IOMode>('expanded');
+  const [outputMode, setOutputMode] = useState<IOMode>('expanded');
+
+  return (
+    <div className="flex h-full flex-col">
+      <CollapsibleSection
+        title="Inputs"
+        data={inputs}
+        mode={inputMode}
+        onModeChange={setInputMode}
+        loading={loading}
+      />
+      <CollapsibleSection
+        title="Outputs"
+        data={outputs}
+        mode={outputMode}
+        onModeChange={setOutputMode}
+        error={error}
+        loading={loading}
+      />
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/annotation-queue/src/entry.tsx b/internal/cmd/templates/annotation-queue/src/entry.tsx
new file mode 100644
index 0000000..86fdf8a
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/entry.tsx
@@ -0,0 +1,37 @@
+import { createRoot, type Root } from 'react-dom/client';
+import { StrictMode } from 'react';
+import { App } from './App';
+// `?inline` gets the fully-processed (Tailwind + autoprefixer) CSS as a plain
+// string instead of Vite emitting a separate stylesheet asset — there's no
+// way to <link> a second file into this sandbox; everything has to be in the
+// one bundled entrypoint. See README.md.
+import css from './index.css?inline';
+
+let styleInjected = false;
+let root: Root | null = null;
+
+function ensureStyleInjected() {
+  if (styleInjected) return;
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+
+interface RenderData {
+  queueId?: string;
+}
+
+export default {
+  render(data: RenderData, rootEl: HTMLElement, metadata: RenderMetadata) {
+    ensureStyleInjected();
+    if (!root) root = createRoot(rootEl);
+    // metadata.mode is "dark"|"light". The sandbox sets html.dark from it, so
+    // this Tailwind UI themes without branching; passed to App.
+    root.render(
+      <StrictMode>
+        <App queueId={data?.queueId ?? ''} metadata={metadata} />
+      </StrictMode>
+    );
+  },
+};
diff --git a/internal/cmd/templates/annotation-queue/src/global.d.ts b/internal/cmd/templates/annotation-queue/src/global.d.ts
new file mode 100644
index 0000000..95c5301
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/global.d.ts
@@ -0,0 +1,21 @@
+export {};
+
+declare global {
+  /** render()'s 3rd arg, an open/extensible dict. v1 has only `mode`
+   * ("dark"|"light"); the sandbox sets `html.dark` from it. */
+  type RenderMetadata = { mode: 'dark' | 'light' };
+
+  interface Window {
+    /** Injected by the host page (LangSmith, or `langsmith apps dev` locally) — see AGENTS.md. */
+    langsmith: {
+      call: (
+        operation: string,
+        args?: { params?: Record<string, string | string[]>; body?: unknown }
+      ) => Promise<unknown>;
+      setData: (patch: Record<string, unknown>) => void;
+      feedback: {
+        create: (args: Record<string, unknown>) => Promise<unknown>;
+      };
+    };
+  }
+}
diff --git a/internal/cmd/templates/annotation-queue/src/hooks/useRunSection.ts b/internal/cmd/templates/annotation-queue/src/hooks/useRunSection.ts
new file mode 100644
index 0000000..0252113
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/hooks/useRunSection.ts
@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { fetchQueueRuns, fetchQueueRunsSize } from '../api';
+import type { AnnotationQueueRunSectionStatus } from '../api';
+import type { AnnotationQueueRun } from '../types';
+
+const PAGE_SIZE = 50;
+
+export interface RunSection {
+  runs: AnnotationQueueRun[];
+  /** Exact count for this status, from fetchQueueRunsSize — not an estimate,
+   * so callers can display it directly instead of deriving from runs.length. */
+  total: number;
+  loading: boolean;
+  loadingMore: boolean;
+  hasMore: boolean;
+  loadMore: () => void;
+  removeRun: (queueRunId: string) => void;
+  prependRun: (run: AnnotationQueueRun) => void;
+}
+
+/**
+ * Loads one status section (needs_my_review / needs_others_review /
+ * completed) of an annotation queue's runs, a page at a time. Mirrors the
+ * production AQ UI's approach: total count comes from a separate /size
+ * call (not a response header — see fetchQueueRunsSize), and that total
+ * caps how far loadMore will page.
+ */
+export function useRunSection(
+  queueId: string | undefined,
+  status: AnnotationQueueRunSectionStatus,
+  enabled = true
+): RunSection {
+  const [runs, setRuns] = useState<AnnotationQueueRun[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const loadingMoreRef = useRef(false);
+  const runsRef = useRef<AnnotationQueueRun[]>([]);
+  runsRef.current = runs;
+
+  useEffect(() => {
+    setRuns([]);
+    setTotal(0);
+    if (!queueId || !enabled) return;
+    let cancelled = false;
+    setLoading(true);
+    Promise.all([
+      fetchQueueRuns(queueId, status, PAGE_SIZE, 0),
+      fetchQueueRunsSize(queueId, status),
+    ])
+      .then(([firstPage, size]) => {
+        if (cancelled) return;
+        setRuns(firstPage);
+        setTotal(size);
+      })
+      .catch((e) => console.error(`Failed to load ${status} runs`, e))
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [queueId, status, enabled]);
+
+  const loadMore = useCallback(() => {
+    if (!queueId || loadingMoreRef.current) return;
+    if (runsRef.current.length >= total) return;
+    loadingMoreRef.current = true;
+    setLoadingMore(true);
+    fetchQueueRuns(queueId, status, PAGE_SIZE, runsRef.current.length)
+      .then((nextPage) => {
+        setRuns((prev) => {
+          // Offsets can drift as runs complete elsewhere while this page
+          // loads; dedupe defensively rather than assuming clean boundaries.
+          const seen = new Set(prev.map((r) => r.queue_run_id));
+          const fresh = nextPage.filter((r) => !seen.has(r.queue_run_id));
+          return [...prev, ...fresh];
+        });
+      })
+      .catch((e) => console.error(`Failed to load more ${status} runs`, e))
+      .finally(() => {
+        loadingMoreRef.current = false;
+        setLoadingMore(false);
+      });
+  }, [queueId, status, total]);
+
+  const removeRun = useCallback((queueRunId: string) => {
+    setRuns((prev) => prev.filter((r) => r.queue_run_id !== queueRunId));
+    setTotal((prev) => Math.max(0, prev - 1));
+  }, []);
+
+  const prependRun = useCallback((run: AnnotationQueueRun) => {
+    setRuns((prev) => [run, ...prev]);
+    setTotal((prev) => prev + 1);
+  }, []);
+
+  return {
+    runs,
+    total,
+    loading,
+    loadingMore,
+    hasMore: runs.length < total,
+    loadMore,
+    removeRun,
+    prependRun,
+  };
+}
diff --git a/internal/cmd/templates/annotation-queue/src/index.css b/internal/cmd/templates/annotation-queue/src/index.css
new file mode 100644
index 0000000..5eae8f1
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/index.css
@@ -0,0 +1,386 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--bg-surface-level-1);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    min-height: 100vh;
+  }
+
+  * {
+    outline-color: var(--brand-400);
+  }
+
+  :root {
+    /* gray */
+    --gray-25: #fcfcfc;
+    --gray-50: #fafafa;
+    --gray-100: #f4f4f5;
+    --gray-200: #e4e4e7;
+    --gray-300: #d1d1d6;
+    --gray-400: #a0a0ab;
+    --gray-500: #70707b;
+    --gray-600: #51525c;
+    --gray-700: #3f3f46;
+    --gray-800: #26272b;
+    --gray-900: #1a1a1e;
+    --gray-950: #131316;
+
+    /* neutral */
+    --neutral-25: #fafbfd;
+    --neutral-35: #f8fafc;
+    --neutral-50: #f5f8fb;
+    --neutral-100: #edf2f7;
+    --neutral-200: #e2e8f0;
+    --neutral-300: #cbd5e1;
+    --neutral-400: #94a3b8;
+    --neutral-500: #64748b;
+    --neutral-600: #475569;
+    --neutral-700: #334155;
+    --neutral-800: #1e293b;
+    --neutral-900: #0f172a;
+    --neutral-950: #080f1e;
+
+    --white: #ffffff;
+    --black: #000000;
+
+    /* brand */
+    --brand-10: #f2faff;
+    --brand-25: #e5f4ff;
+    --brand-50: #cce9ff;
+    --brand-75: #9dd2fc;
+    --brand-100: #5fbef8;
+    --brand-200: #008dff;
+    --brand-300: #0078f1;
+    --brand-400: #006ddd;
+    --brand-500: #1566b8;
+    --brand-600: #145095;
+    --brand-700: #0d3d77;
+    --brand-800: #0c336a;
+    --brand-900: #102656;
+    --brand-950: #101a30;
+
+    /* red */
+    --red-25: #fffbfa;
+    --red-50: #fef3f2;
+    --red-100: #fee4e2;
+    --red-200: #fecdca;
+    --red-300: #fda29b;
+    --red-400: #f97066;
+    --red-500: #f04438;
+    --red-600: #d92d20;
+    --red-700: #b42318;
+    --red-800: #912018;
+    --red-900: #7a271a;
+    --red-950: #55160c;
+
+    /* orange */
+    --orange-25: #fffcf5;
+    --orange-50: #fffaeb;
+    --orange-100: #fef0c7;
+    --orange-200: #fedf89;
+    --orange-300: #fec84b;
+    --orange-400: #fdb022;
+    --orange-500: #f79009;
+    --orange-600: #cd6002;
+    --orange-700: #ac5305;
+    --orange-800: #894101;
+    --orange-900: #6d3300;
+    --orange-950: #4c2400;
+
+    /* green */
+    --green-25: #f5fef9;
+    --green-50: #ecfdf3;
+    --green-100: #dcfae6;
+    --green-200: #acefc6;
+    --green-300: #75e0a7;
+    --green-400: #46cd89;
+    --green-500: #19b26b;
+    --green-600: #079455;
+    --green-700: #047647;
+    --green-800: #065d3a;
+    --green-900: #084d31;
+    --green-950: #053321;
+
+    /* acid */
+    --acid-10: #fafee8;
+    --acid-25: #f2fcc8;
+    --acid-50: #e3f797;
+    --acid-100: #cceb50;
+    --acid-200: #aecf1a;
+    --acid-300: #93b000;
+    --acid-400: #799200;
+    --acid-500: #607500;
+    --acid-600: #495a00;
+    --acid-700: #354200;
+    --acid-800: #232c00;
+    --acid-900: #141a00;
+    --acid-950: #0b1000;
+
+    /* purple */
+    --purple-10: #f9f7ff;
+    --purple-25: #f1ecff;
+    --purple-50: #e3d9ff;
+    --purple-100: #c5b4f0;
+    --purple-200: #a691df;
+    --purple-300: #8b71cc;
+    --purple-400: #7655b8;
+    --purple-500: #6244a0;
+    --purple-600: #4e3487;
+    --purple-700: #3b2560;
+    --purple-800: #291753;
+    --purple-900: #190d38;
+    --purple-950: #0f0822;
+
+    /* SEMANTIC TOKENS */
+
+    /* SURFACE */
+    --bg-surface-level-1: var(--white);
+    --bg-surface-level-1-hover: var(--neutral-25);
+    --bg-surface-level-2: var(--neutral-50);
+    --bg-surface-level-2-hover: var(--neutral-100);
+    --bg-surface-level-3: var(--neutral-100);
+    --bg-surface-level-4: var(--neutral-200);
+    --bg-disabled: var(--neutral-100);
+    --bg-elevated: var(--white);
+    --bg-elevated-hover: var(--neutral-25);
+    --bg-elevated-selected: var(--neutral-25);
+    --bg-overlay: rgba(0, 0, 0, 0.5);
+
+    /* BRAND */
+    --bg-brand: var(--brand-400);
+    --bg-brand-hover: var(--brand-500);
+    --bg-brand-subtle: var(--brand-25);
+    --bg-brand-subtle-hover: var(--brand-50);
+    --bg-brand-muted: var(--brand-10);
+    --bg-purple: var(--purple-50);
+
+    /* INTENT */
+    --bg-success: var(--green-50);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-strong: var(--green-600);
+    --bg-error: var(--red-50);
+    --bg-error-subtle: var(--red-100);
+    --bg-error-strong: var(--red-600);
+    --bg-warning: var(--orange-50);
+    --bg-warning-subtle: var(--orange-100);
+    --bg-warning-strong: var(--orange-600);
+
+    /* CONTROL */
+    --bg-control-active: var(--brand-300);
+    --bg-control-active-hover: var(--brand-400);
+    --bg-control-thumb: var(--white);
+    --bg-control-disabled: var(--neutral-200);
+    --text-control-active-foreground: var(--bg-control-thumb);
+
+    /* SELECTED */
+    --bg-selected: var(--brand-25);
+    --bg-selected-hover: var(--brand-50);
+
+    /* BORDER */
+    --border-default: var(--neutral-300);
+    --border-subtle: var(--neutral-200);
+    --border-muted: var(--neutral-100);
+    --border-faint: var(--neutral-50);
+    --border-strong: var(--neutral-600);
+    --border-disabled: var(--neutral-200);
+    --border-focus: var(--brand-400);
+    --border-error: var(--red-300);
+    --border-error-strong: var(--red-600);
+    --border-brand: var(--brand-400);
+    --border-brand-strong: var(--brand-600);
+    --border-brand-subtle: var(--brand-100);
+    --border-warning: var(--orange-300);
+    --border-success: var(--green-200);
+    --border-purple: var(--purple-200);
+
+    /* TEXT */
+    --text-primary: var(--neutral-900);
+    --text-secondary: var(--neutral-700);
+    --text-secondary-hover: var(--neutral-800);
+    --text-tertiary: var(--neutral-600);
+    --text-tertiary-hover: var(--neutral-700);
+    --text-quaternary: var(--neutral-500);
+    --text-disabled: var(--neutral-300);
+    --text-placeholder: var(--neutral-400);
+    --text-error-primary: var(--red-700);
+    --text-error-secondary: var(--red-600);
+    --text-error-tertiary: var(--red-500);
+    --text-warning-primary: var(--orange-700);
+    --text-warning-secondary: var(--orange-600);
+    --text-warning-tertiary: var(--orange-500);
+    --text-success-primary: var(--green-700);
+    --text-success-secondary: var(--green-600);
+    --text-success-tertiary: var(--green-500);
+    --text-brand-primary: var(--brand-700);
+    --text-brand-secondary: var(--brand-600);
+    --text-brand-tertiary: var(--brand-500);
+    --text-brand-disabled: var(--brand-75);
+    --text-brand-on-fill: var(--white);
+    --text-link: var(--brand-300);
+    --text-link-hover: var(--brand-200);
+
+    /* ICON */
+    --icon-primary: var(--neutral-900);
+    --icon-secondary: var(--neutral-700);
+    --icon-tertiary: var(--neutral-500);
+    --icon-disabled: var(--neutral-300);
+    --icon-brand: var(--brand-400);
+    --icon-error: var(--red-600);
+    --icon-success: var(--green-600);
+    --icon-warning: var(--orange-600);
+
+    /* SHADOW */
+    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 3px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* MOTION */
+    --duration-fast: 100ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 500ms;
+
+    /* DEPRECATED ALIASES */
+    --bg-primary: var(--bg-surface-level-1);
+    --bg-primary-hover: var(--bg-surface-level-1-hover);
+    --bg-secondary: var(--bg-surface-level-2);
+    --bg-secondary-hover: var(--bg-surface-level-2-hover);
+    --bg-tertiary: var(--bg-surface-level-3);
+    --bg-quaternary: var(--bg-surface-level-4);
+    --bg-brand-primary: var(--bg-brand);
+    --bg-brand-primary_hover: var(--bg-brand-hover);
+    --bg-brand-secondary: var(--bg-brand-subtle);
+    --bg-brand-secondary_hover: var(--bg-brand-subtle-hover);
+    --bg-brand-tertiary: var(--bg-brand-muted);
+    --bg-success-primary: var(--bg-success);
+    --bg-success-secondary: var(--bg-success-subtle);
+    --bg-error-primary: var(--bg-error);
+    --bg-error-secondary: var(--bg-error-subtle);
+    --bg-warning-primary: var(--bg-warning);
+    --bg-warning-secondary: var(--bg-warning-subtle);
+    --border-primary: var(--border-default);
+    --border-secondary: var(--border-subtle);
+    --border-tertiary: var(--border-muted);
+    --border-quaternary: var(--border-faint);
+    --text-button-primary: var(--white);
+  }
+
+  html.dark {
+    --gray-25: #131316;
+    --gray-50: #1a1a1e;
+    --gray-100: #26272b;
+    --gray-200: #3f3f46;
+    --gray-300: #51525c;
+    --gray-400: #70707b;
+    --gray-500: #a0a0ab;
+    --gray-600: #d1d1d6;
+    --gray-700: #e4e4e7;
+    --gray-800: #f4f4f5;
+    --gray-900: #fafafa;
+    --gray-950: #fcfcfc;
+
+    --neutral-25: #09090f;
+    --neutral-35: #0d0f18;
+    --neutral-50: #111521;
+    --neutral-100: #1b2030;
+    --neutral-200: #282e42;
+    --neutral-300: #393f55;
+    --neutral-400: #555d78;
+    --neutral-500: #8790ab;
+    --neutral-600: #cbd5e1;
+    --neutral-700: #e2e8f0;
+    --neutral-800: #edf2f7;
+    --neutral-900: #f5f8fb;
+    --neutral-950: #fafbfd;
+
+    --white: #131316;
+    --black: #ffffff;
+
+    --brand-10: #101a30;
+    --brand-25: #102656;
+    --brand-50: #0c336a;
+    --brand-75: #0c3871;
+    --brand-100: #0d3d77;
+    --brand-200: #145095;
+    --brand-300: #1566b8;
+    --brand-400: #006ddd;
+    --brand-500: #0078f1;
+    --brand-600: #008dff;
+    --brand-700: #5fbef8;
+    --brand-800: #cce9ff;
+    --brand-900: #e5f4ff;
+    --brand-950: #f2faff;
+
+    --red-25: #55160c;
+    --red-50: #7a271a;
+    --red-100: #912018;
+    --red-200: #b42318;
+    --red-300: #d92d20;
+    --red-400: #f04438;
+    --red-500: #f97066;
+    --red-600: #fda29b;
+    --red-700: #fecdca;
+    --red-800: #fee4e2;
+    --red-900: #fef3f2;
+    --red-950: #fffbfa;
+
+    --orange-25: #4c2400;
+    --orange-50: #6d3300;
+    --orange-100: #894101;
+    --orange-200: #ac5305;
+    --orange-300: #cd6002;
+    --orange-400: #f79009;
+    --orange-500: #fdb022;
+    --orange-600: #fec84b;
+    --orange-700: #fedf89;
+    --orange-800: #fef0c7;
+    --orange-900: #fffaeb;
+    --orange-950: #fffcf5;
+
+    --green-25: #053321;
+    --green-50: #084d31;
+    --green-100: #065d3a;
+    --green-200: #047647;
+    --green-300: #079455;
+    --green-400: #19b26b;
+    --green-500: #46cd89;
+    --green-600: #75e0a7;
+    --green-700: #acefc6;
+    --green-800: #dcfae6;
+    --green-900: #ecfdf3;
+    --green-950: #f5fef9;
+  }
+}
+
+@keyframes linear-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(800%);
+  }
+}
diff --git a/internal/cmd/templates/annotation-queue/src/lib/feedbackColors.ts b/internal/cmd/templates/annotation-queue/src/lib/feedbackColors.ts
new file mode 100644
index 0000000..f30c942
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/lib/feedbackColors.ts
@@ -0,0 +1,54 @@
+// Viridis-scale color stops (perceptually-uniform), approximating d3-scale-chromatic's
+// interpolateViridis without pulling in the d3 dependency.
+const VIRIDIS_STOPS: Array<[number, number, number]> = [
+  [0x44, 0x01, 0x54],
+  [0x3b, 0x52, 0x8b],
+  [0x21, 0x90, 0x8d],
+  [0x5d, 0xc9, 0x63],
+  [0xfd, 0xe7, 0x25],
+];
+
+function interpolateViridis(t: number): string {
+  const clamped = Math.min(1, Math.max(0, t));
+  const scaled = clamped * (VIRIDIS_STOPS.length - 1);
+  const i = Math.min(VIRIDIS_STOPS.length - 2, Math.floor(scaled));
+  const frac = scaled - i;
+  const [r1, g1, b1] = VIRIDIS_STOPS[i];
+  const [r2, g2, b2] = VIRIDIS_STOPS[i + 1];
+  const r = Math.round(r1 + (r2 - r1) * frac);
+  const g = Math.round(g1 + (g2 - g1) * frac);
+  const b = Math.round(b1 + (b2 - b1) * frac);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+/** Deterministic per-key color, matching LangSmith's fallback feedback-key color hash. */
+export function getColorForFeedbackKey(key: string): string {
+  const limitedKey = key
+    .trim()
+    .toUpperCase()
+    .normalize('NFD')
+    .slice(0, 2)
+    .replace(/[^A-Z]/g, '@')
+    .padEnd(2, '@');
+  const asciiSum = limitedKey
+    .split('')
+    .map((c) => c.charCodeAt(0) - 64)
+    .map((n, i) => n / (1 + i))
+    .reduce((a, b) => a + b, 0);
+  const rebased = asciiSum / (26 + 13);
+  return interpolateViridis(rebased);
+}
+
+export const scoreFormatter = new Intl.NumberFormat('en-US', {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 4,
+});
+
+export function formatFeedbackValue(
+  score: number | null | undefined,
+  value: string | null | undefined
+): string | undefined {
+  if (value != null) return value;
+  if (score != null) return scoreFormatter.format(score);
+  return undefined;
+}
diff --git a/internal/cmd/templates/annotation-queue/src/lib/messages.ts b/internal/cmd/templates/annotation-queue/src/lib/messages.ts
new file mode 100644
index 0000000..c5bb31d
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/lib/messages.ts
@@ -0,0 +1,261 @@
+export interface NormalizedToolCall {
+  id: string;
+  name: string;
+  args: unknown;
+}
+
+interface SerializedMessage {
+  lc: number;
+  type: 'constructor';
+  id: string[];
+  kwargs: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+function isSerializedMessage(v: Record<string, unknown>): v is SerializedMessage {
+  return (
+    typeof v.lc === 'number' &&
+    v.type === 'constructor' &&
+    Array.isArray(v.id) &&
+    typeof v.kwargs === 'object' &&
+    v.kwargs !== null
+  );
+}
+
+export function isMessageLike(value: unknown): boolean {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const v = value as Record<string, unknown>;
+  if (isSerializedMessage(v)) return true;
+  return ('role' in v || 'type' in v) && 'content' in v;
+}
+
+/** Extracts the flat field bag (content, tool_calls, name, ...) regardless of message shape. */
+export function getMessageFields(message: unknown): Record<string, unknown> {
+  if (!message || typeof message !== 'object') return {};
+  const v = message as Record<string, unknown>;
+  if (isSerializedMessage(v)) return v.kwargs;
+  return v;
+}
+
+/** Lowercased role, e.g. "human" | "ai" | "system" | "tool". */
+export function getMessageRole(message: unknown): string {
+  if (!message || typeof message !== 'object') return '';
+  const v = message as Record<string, unknown>;
+  let type: string | undefined;
+
+  if (isSerializedMessage(v)) {
+    const last = v.id[v.id.length - 1] ?? '';
+    type = last.split('Message')[0]?.toLowerCase();
+    const kwargsType = v.kwargs.type;
+    if (typeof kwargsType === 'string' && kwargsType) type = kwargsType;
+  } else {
+    type = (v.type ?? v.role) as string | undefined;
+  }
+
+  if (typeof type !== 'string' || !type) return '';
+  type = type.toLowerCase();
+  if (type.endsWith('messagechunk')) type = type.slice(0, -'messagechunk'.length);
+  if (type === 'developer') return 'system';
+  if (type === 'user') return 'human';
+  if (type === 'assistant') return 'ai';
+  return type;
+}
+
+/** Uppercase badge label matching LangSmith's annotation queue chat cards, e.g. "HUMAN", "AI", "TOOL". */
+export function getDisplayRole(message: unknown): string {
+  const role = getMessageRole(message);
+  return role ? role.toUpperCase() : 'UNKNOWN';
+}
+
+/** Renders only the visible text blocks of a message's content (tool_use/tool_call blocks render as separate cards). */
+export function contentToText(content: unknown): string {
+  if (typeof content === 'string') return content;
+  if (Array.isArray(content)) {
+    return content
+      .map((part) => {
+        if (typeof part === 'string') return part;
+        const p = part as Record<string, unknown>;
+        if (p.type === 'tool_use' || p.type === 'tool_call' || p.type === 'tool_result') return '';
+        if (typeof p.text === 'string') return p.text;
+        if (p.type === 'image_url' || p.type === 'image') return '[image]';
+        return '';
+      })
+      .filter(Boolean)
+      .join('\n');
+  }
+  if (content == null) return '';
+  return typeof content === 'object' ? JSON.stringify(content, null, 2) : String(content);
+}
+
+function parseMaybeJson(value: unknown): unknown {
+  if (typeof value !== 'string') return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+/** Extracts tool calls from a message's `tool_calls`/`additional_kwargs.tool_calls` field, or from Anthropic-style tool_use blocks embedded directly in content. */
+export function getToolCalls(message: unknown): NormalizedToolCall[] {
+  const fields = getMessageFields(message);
+  const additionalKwargs = fields.additional_kwargs as Record<string, unknown> | undefined;
+  const raw = Array.isArray(fields.tool_calls)
+    ? fields.tool_calls
+    : Array.isArray(additionalKwargs?.tool_calls)
+      ? additionalKwargs?.tool_calls
+      : undefined;
+
+  if (raw && raw.length > 0) {
+    return raw.map((tc) => {
+      const t = tc as Record<string, unknown>;
+      const fn = t.function as Record<string, unknown> | undefined;
+      const custom = t.custom as Record<string, unknown> | undefined;
+      const name = (t.name ?? fn?.name ?? custom?.name ?? '') as string;
+      const argsRaw = t.args ?? fn?.arguments ?? custom?.input ?? {};
+      return { id: (t.id ?? t.call_id ?? '') as string, name, args: parseMaybeJson(argsRaw) };
+    });
+  }
+
+  const content = fields.content;
+  if (Array.isArray(content)) {
+    const blocks = content.filter((p) => {
+      const type = (p as Record<string, unknown>)?.type;
+      return type === 'tool_use' || type === 'tool_call';
+    }) as Record<string, unknown>[];
+    if (blocks.length > 0) {
+      return blocks.map((b) => ({
+        id: (b.id ?? '') as string,
+        name: (b.name ?? '') as string,
+        args: parseMaybeJson(b.input ?? b.args ?? {}),
+      }));
+    }
+  }
+
+  return [];
+}
+
+export function maybeGetMessages(data: unknown): unknown[] | null {
+  if (!data) return null;
+
+  if (isMessageLike(data)) return [data];
+
+  if (Array.isArray(data)) {
+    if (data.length > 0 && data.every(isMessageLike)) return data;
+    return null;
+  }
+
+  if (typeof data !== 'object') return null;
+  const record = data as Record<string, unknown>;
+
+  const direct = record['messages'];
+  if (Array.isArray(direct) && direct.length > 0 && direct.every(isMessageLike)) {
+    return direct;
+  }
+
+  const outputVal = record['output'];
+  if (outputVal && typeof outputVal === 'object' && !Array.isArray(outputVal)) {
+    const nested = (outputVal as Record<string, unknown>)['messages'];
+    if (Array.isArray(nested) && nested.length > 0 && nested.every(isMessageLike)) {
+      return nested;
+    }
+  }
+
+  for (const key of Object.keys(record)) {
+    const val = record[key];
+    if (Array.isArray(val) && val.length > 0 && val.every(isMessageLike)) {
+      return val;
+    }
+  }
+
+  return null;
+}
+
+export function getCollapsedPreview(data: unknown): string {
+  if (!data) return '';
+
+  const messages = maybeGetMessages(data);
+  if (messages && messages.length > 0) {
+    const last = messages[messages.length - 1];
+    return contentToText(getMessageFields(last).content).replace(/\n+/g, ' ').trim().slice(0, 120);
+  }
+
+  if (typeof data === 'string') return data;
+
+  if (typeof data === 'object' && !Array.isArray(data)) {
+    const record = data as Record<string, unknown>;
+    const firstVal = Object.values(record)[0];
+    if (typeof firstVal === 'string') return firstVal.slice(0, 120);
+    return JSON.stringify(firstVal ?? data).slice(0, 120);
+  }
+
+  return JSON.stringify(data).slice(0, 120);
+}
+
+// ── YAML-ish pretty-printer, matching the block-style rendering LangSmith uses
+// for tool call args / tool results (e.g. multiline strings as `|-` blocks). ──
+
+function scalarToYaml(value: unknown): string {
+  if (value === null || value === undefined) return 'null';
+  return String(value);
+}
+
+function entryLines(key: string, value: unknown, indent: number): string[] {
+  const pad = '  '.repeat(indent);
+  if (value !== null && typeof value === 'object') {
+    if (Array.isArray(value) && value.length === 0) return [`${pad}${key}: []`];
+    if (!Array.isArray(value) && Object.keys(value as object).length === 0) {
+      return [`${pad}${key}: {}`];
+    }
+    return [`${pad}${key}:`, ...valueLines(value, indent + 1)];
+  }
+  if (typeof value === 'string' && value.includes('\n')) {
+    const body = value.split('\n').map((line) => `${'  '.repeat(indent + 1)}${line}`);
+    return [`${pad}${key}: |-`, ...body];
+  }
+  return [`${pad}${key}: ${scalarToYaml(value)}`];
+}
+
+function valueLines(value: unknown, indent: number): string[] {
+  const pad = '  '.repeat(indent);
+  if (Array.isArray(value)) {
+    if (value.length === 0) return [`${pad}[]`];
+    const lines: string[] = [];
+    for (const item of value) {
+      if (item !== null && typeof item === 'object' && !Array.isArray(item)) {
+        const entries = Object.entries(item as Record<string, unknown>);
+        if (entries.length === 0) {
+          lines.push(`${pad}- {}`);
+          continue;
+        }
+        entries.forEach(([k, v], idx) => {
+          const childLines = entryLines(k, v, indent + 1);
+          if (idx === 0) {
+            lines.push(`${pad}- ${childLines[0].slice((indent + 1) * 2)}`);
+            lines.push(...childLines.slice(1));
+          } else {
+            lines.push(...childLines);
+          }
+        });
+      } else if (Array.isArray(item)) {
+        lines.push(`${pad}-`);
+        lines.push(...valueLines(item, indent + 1));
+      } else {
+        lines.push(`${pad}- ${scalarToYaml(item)}`);
+      }
+    }
+    return lines;
+  }
+  if (value !== null && typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) return [`${pad}{}`];
+    return entries.flatMap(([k, v]) => entryLines(k, v, indent));
+  }
+  return [`${pad}${scalarToYaml(value)}`];
+}
+
+export function toYamlish(value: unknown): string {
+  if (value === null || value === undefined) return 'null';
+  if (typeof value !== 'object') return scalarToYaml(value);
+  return valueLines(value, 0).join('\n');
+}
diff --git a/internal/cmd/templates/annotation-queue/src/types.ts b/internal/cmd/templates/annotation-queue/src/types.ts
new file mode 100644
index 0000000..8a6e591
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/types.ts
@@ -0,0 +1,91 @@
+export type IOMode = 'collapsed' | 'expanded' | 'raw';
+
+export interface AnnotationQueueRun {
+  id: string;
+  queue_run_id: string;
+  session_id: string;
+  trace_id: string;
+  start_time: string;
+  name: string | null;
+  inputs: Record<string, unknown> | null;
+  outputs: Record<string, unknown> | null;
+  error: string | null;
+  last_reviewed_time: string | null;
+  added_at: string | null;
+  completed_by: string[];
+  reserved_by: string[];
+}
+
+// Mirrors AnnotationQueueRubricItemSchema (smith-backend/app/schemas.py) — the
+// rubric item itself carries no type/min/max/options; that comes from a
+// separate per-key FeedbackConfig lookup (see fetchFeedbackConfigs in api.ts).
+export interface RubricItem {
+  feedback_key: string;
+  description: string | null;
+  value_descriptions: Record<string, string> | null;
+  score_descriptions: Record<string, string> | null;
+  is_required?: boolean | null;
+  is_assertion?: boolean | null;
+}
+
+export interface AnnotationQueue {
+  id: string;
+  name: string;
+  queue_type: 'single' | 'pairwise';
+  rubric_items: RubricItem[];
+  rubric_instructions: string | null;
+  num_reviewers_per_item?: number | null;
+}
+
+export interface FeedbackCategory {
+  value: number;
+  label: string | null;
+}
+
+export type FeedbackConfigType = 'continuous' | 'categorical' | 'freeform';
+
+// Mirrors FeedbackConfig (smith-backend/app/schemas.py) — determines how a
+// feedback key should be rendered/entered (number input, category buttons, or
+// free text), fetched separately per key from GET /feedback-configs.
+export interface FeedbackConfig {
+  type: FeedbackConfigType;
+  min: number | null;
+  max: number | null;
+  categories: FeedbackCategory[] | null;
+}
+
+export interface FeedbackConfigSchema {
+  feedback_key: string;
+  feedback_config: FeedbackConfig;
+  tenant_id: string;
+  modified_at: string;
+  is_lower_score_better: boolean | null;
+}
+
+export interface FeedbackSubmission {
+  key: string;
+  run_id: string;
+  score?: number | null;
+  value?: string | null;
+  comment?: string | null;
+  // Only reviewer notes pass this today — creates the "note" key's config as
+  // freeform the first time it's used, mirroring the real UI's RunNotesCrud.
+  feedback_config?: { type: FeedbackConfigType };
+  // Without these, the backend has to look the run up by run_id alone —
+  // which can miss (falls into an async/best-effort path that may never
+  // land) instead of writing the feedback inline. Always pass them when
+  // known, same as the real annotation queue UI does.
+  trace_id?: string;
+  session_id?: string;
+  start_time?: string;
+}
+
+export interface FeedbackItem {
+  id: string;
+  run_id: string;
+  key: string;
+  score: number | null;
+  value: string | null;
+  comment: string | null;
+  created_at: string;
+}
diff --git a/internal/cmd/templates/annotation-queue/src/vite-env.d.ts b/internal/cmd/templates/annotation-queue/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/internal/cmd/templates/annotation-queue/tailwind.config.js b/internal/cmd/templates/annotation-queue/tailwind.config.js
new file mode 100644
index 0000000..623e1a9
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/tailwind.config.js
@@ -0,0 +1,128 @@
+const withAlpha = (cssVar) => ({ opacityValue }) =>
+  opacityValue !== undefined
+    ? `color-mix(in srgb, ${cssVar} calc(${opacityValue} * 100%), transparent)`
+    : cssVar;
+
+const spaceScale = {
+  'space-1': '0.25rem',
+  'space-2': '0.5rem',
+  'space-3': '0.75rem',
+  'space-4': '1rem',
+  'space-5': '1.25rem',
+  'space-6': '1.5rem',
+  'space-7': '2rem',
+  'space-8': '2.5rem',
+  'space-9': '4rem',
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      backgroundColor: {
+        // Surfaces
+        'surface-level-1': withAlpha('var(--bg-surface-level-1)'),
+        'surface-level-2': withAlpha('var(--bg-surface-level-2)'),
+        'surface-level-3': withAlpha('var(--bg-surface-level-3)'),
+        'surface-level-4': withAlpha('var(--bg-surface-level-4)'),
+        'elevated': withAlpha('var(--bg-elevated)'),
+        'elevated-hover': withAlpha('var(--bg-elevated-hover)'),
+        'disabled': withAlpha('var(--bg-disabled)'),
+        // Brand
+        'brand': withAlpha('var(--bg-brand)'),
+        'brand-hover': withAlpha('var(--bg-brand-hover)'),
+        'brand-subtle': withAlpha('var(--bg-brand-subtle)'),
+        'brand-subtle-hover': withAlpha('var(--bg-brand-subtle-hover)'),
+        'brand-muted': withAlpha('var(--bg-brand-muted)'),
+        // Intent
+        'success': withAlpha('var(--bg-success)'),
+        'success-subtle': withAlpha('var(--bg-success-subtle)'),
+        'success-strong': withAlpha('var(--bg-success-strong)'),
+        'error': withAlpha('var(--bg-error)'),
+        'error-subtle': withAlpha('var(--bg-error-subtle)'),
+        'error-strong': withAlpha('var(--bg-error-strong)'),
+        'warning': withAlpha('var(--bg-warning)'),
+        'warning-subtle': withAlpha('var(--bg-warning-subtle)'),
+        'warning-strong': withAlpha('var(--bg-warning-strong)'),
+        // Controls
+        'control-active': withAlpha('var(--bg-control-active)'),
+        'control-thumb': withAlpha('var(--bg-control-thumb)'),
+        'control-disabled': withAlpha('var(--bg-control-disabled)'),
+        // Selected
+        'selected': withAlpha('var(--bg-selected)'),
+        'selected-hover': withAlpha('var(--bg-selected-hover)'),
+        // Deprecated aliases (for compatibility with existing classes)
+        'primary': withAlpha('var(--bg-surface-level-1)'),
+        'secondary': withAlpha('var(--bg-surface-level-2)'),
+        'tertiary': withAlpha('var(--bg-surface-level-3)'),
+        'quaternary': withAlpha('var(--bg-surface-level-4)'),
+      },
+      borderColor: {
+        'default': withAlpha('var(--border-default)'),
+        'subtle': withAlpha('var(--border-subtle)'),
+        'muted': withAlpha('var(--border-muted)'),
+        'faint': withAlpha('var(--border-faint)'),
+        'strong': withAlpha('var(--border-strong)'),
+        'disabled': withAlpha('var(--border-disabled)'),
+        'focus': withAlpha('var(--border-focus)'),
+        'error': withAlpha('var(--border-error)'),
+        'error-strong': withAlpha('var(--border-error-strong)'),
+        'brand': withAlpha('var(--border-brand)'),
+        'brand-strong': withAlpha('var(--border-brand-strong)'),
+        'brand-subtle': withAlpha('var(--border-brand-subtle)'),
+        'warning': withAlpha('var(--border-warning)'),
+        'success': withAlpha('var(--border-success)'),
+        // Deprecated aliases
+        'primary': withAlpha('var(--border-default)'),
+        'secondary': withAlpha('var(--border-subtle)'),
+        'tertiary': withAlpha('var(--border-muted)'),
+        'quaternary': withAlpha('var(--border-faint)'),
+      },
+      textColor: {
+        'primary': withAlpha('var(--text-primary)'),
+        'secondary': withAlpha('var(--text-secondary)'),
+        'tertiary': withAlpha('var(--text-tertiary)'),
+        'quaternary': withAlpha('var(--text-quaternary)'),
+        'disabled': withAlpha('var(--text-disabled)'),
+        'placeholder': withAlpha('var(--text-placeholder)'),
+        'error-primary': withAlpha('var(--text-error-primary)'),
+        'error-secondary': withAlpha('var(--text-error-secondary)'),
+        'warning-primary': withAlpha('var(--text-warning-primary)'),
+        'success-primary': withAlpha('var(--text-success-primary)'),
+        'brand-primary': withAlpha('var(--text-brand-primary)'),
+        'brand-secondary': withAlpha('var(--text-brand-secondary)'),
+        'brand-on-fill': withAlpha('var(--text-brand-on-fill)'),
+        'link': withAlpha('var(--text-link)'),
+        'link-hover': withAlpha('var(--text-link-hover)'),
+        'icon-primary': withAlpha('var(--icon-primary)'),
+        'icon-secondary': withAlpha('var(--icon-secondary)'),
+        'icon-tertiary': withAlpha('var(--icon-tertiary)'),
+        'icon-disabled': withAlpha('var(--icon-disabled)'),
+        'icon-brand': withAlpha('var(--icon-brand)'),
+        'icon-error': withAlpha('var(--icon-error)'),
+        'icon-success': withAlpha('var(--icon-success)'),
+        'icon-warning': withAlpha('var(--icon-warning)'),
+      },
+      borderRadius: {
+        'xs': 'var(--radius-xs)',
+        'sm': 'var(--radius-sm)',
+        'md': 'var(--radius-md)',
+        'lg': 'var(--radius-lg)',
+        'xl': 'var(--radius-xl)',
+        'full': 'var(--radius-full)',
+      },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+      },
+      gap: spaceScale,
+      padding: spaceScale,
+      margin: spaceScale,
+      space: spaceScale,
+    },
+  },
+  plugins: [],
+};
diff --git a/internal/cmd/templates/annotation-queue/tsconfig.json b/internal/cmd/templates/annotation-queue/tsconfig.json
new file mode 100644
index 0000000..a4c834a
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/internal/cmd/templates/annotation-queue/vite.config.ts b/internal/cmd/templates/annotation-queue/vite.config.ts
new file mode 100644
index 0000000..977c289
--- /dev/null
+++ b/internal/cmd/templates/annotation-queue/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// Library-mode build: the sandbox this app runs in evaluates a single
+// dependency-free CJS file exporting { render(data, root, metadata) } — not a
+// self-mounting SPA. See src/entry.tsx and AGENTS.md.
+export default defineConfig({
+  plugins: [react()],
+  // Unlike Vite's normal app-mode build, library mode does NOT replace
+  // process.env.NODE_ENV on its own — React/ReactDOM's bundled source still
+  // references it internally. There's no `process` global in the sandboxed
+  // iframe (or any browser), so without this the bundle throws
+  // "ReferenceError: process is not defined" the moment it's required.
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: 'src/entry.tsx',
+      formats: ['cjs'],
+      fileName: () => 'bundle.js',
+    },
+  },
+});
diff --git a/internal/cmd/templates/blank/.gitignore b/internal/cmd/templates/blank/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/internal/cmd/templates/blank/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/internal/cmd/templates/blank/README.md b/internal/cmd/templates/blank/README.md
new file mode 100644
index 0000000..d6793a9
--- /dev/null
+++ b/internal/cmd/templates/blank/README.md
@@ -0,0 +1,71 @@
+# {{.Name}}
+
+{{.Description}}
+
+A LangSmith custom app, scaffolded by `langsmith apps init` (the default
+`blank` template). It starts as a small, genuinely working example — a list of
+your workspace's most recently active tracing projects — not a blank page.
+**Read `AGENTS.md` first** — it documents the LangSmith API surface this
+app can call.
+
+## What this is
+
+A custom app is a small React/TS UI rendered inside LangSmith in a
+locked-down sandbox (`sandbox="allow-scripts"`, no `allow-same-origin`). It
+never gets direct network access or a real credential — everything goes
+through a `postMessage` bridge to the host page (`window.langsmith.call`),
+which proxies to the real LangSmith API under the viewer's own session (or
+your local `LANGSMITH_API_KEY` when running `langsmith apps dev`).
+
+Since the sandbox has no bundler or npm access at runtime, this app is built
+with Vite in **library mode**: `npm run build` bundles everything (React
+included) into a single dependency-free file (`dist/bundle.js`) before it's
+pushed. Use npm dependencies freely — they all get inlined at build time.
+
+## Develop
+
+`langsmith apps init` already ran `npm install` and `npm run build` for you,
+so `dist/bundle.js` exists and `langsmith apps dev` works immediately:
+
+```bash
+langsmith apps dev
+```
+
+`apps dev` runs the app inside a real sandboxed iframe, identical
+restrictions to production, and automatically starts `npm run watch` for
+you (it detects the script in `package.json`) — edit `src/App.tsx`, save,
+and the preview reloads on its own. Pass `--no-watch` if you'd rather drive
+the build yourself.
+
+## The bridge contract
+
+`src/entry.tsx` exports a `render(data, root, metadata)` function that the
+host calls once on load and again whenever `data` or `metadata` changes —
+`data` is always `{}` (apps fetch whatever they need themselves).
+`metadata.mode` is `"dark"` or
+`"light"`; the sandbox sets `html.dark` from it, so this token-based UI themes
+automatically (branch on `metadata.mode` only if you use inline styles).
+`src/App.tsx` is the actual UI; edit it freely, it's just a React component.
+
+`window.langsmith`, injected by the host page, gives you:
+
+- `window.langsmith.call(operation, args)` — `operation` is a
+  `"<METHOD> <path>"` string (e.g. `"GET /api/v1/sessions"`), forwarded
+  as-is to the real LangSmith API. Not a curated allowlist — see
+  `AGENTS.md` for the available surface. Returns a Promise.
+- `window.langsmith.setData(patch)` — push a data mutation out for the host
+  to persist.
+- `window.langsmith.feedback.create(args)` — sugar over
+  `call('POST /api/v1/feedback', {body: args})`.
+
+## Deploy
+
+```bash
+npm run build
+langsmith apps push
+```
+
+The first `push` creates the app and writes `.langsmith/app.json` (the
+app's ID) into this directory — commit it so teammates' pushes update the
+same app instead of creating a new one. Every push after that updates it in
+place.
diff --git a/internal/cmd/templates/blank/package.json b/internal/cmd/templates/blank/package.json
new file mode 100644
index 0000000..e07cf8d
--- /dev/null
+++ b/internal/cmd/templates/blank/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "{{.Name}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/internal/cmd/templates/blank/postcss.config.js b/internal/cmd/templates/blank/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/internal/cmd/templates/blank/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/internal/cmd/templates/blank/src/App.tsx b/internal/cmd/templates/blank/src/App.tsx
new file mode 100644
index 0000000..29dd8a6
--- /dev/null
+++ b/internal/cmd/templates/blank/src/App.tsx
@@ -0,0 +1,49 @@
+// A static starting point — no API calls, nothing to break. Edit this
+// file (or delete it) and build whatever you want; see AGENTS.md for the
+// full LangSmith API surface and README.md for the render(data, root, metadata)
+// bridge contract.
+export function App(_props: { data: unknown; metadata?: RenderMetadata }) {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-surface-level-1 p-6">
+      <div className="w-full max-w-md rounded-xl border border-secondary bg-elevated p-8 text-center shadow-md">
+        <div className="mx-auto flex size-10 items-center justify-center rounded-full bg-brand-subtle">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            className="size-5 text-brand-primary"
+            stroke="currentColor"
+            strokeWidth={1.75}
+          >
+            <path
+              d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+
+        <h1 className="mt-4 text-lg font-semibold text-primary">Your custom app starts here</h1>
+        <p className="mt-2 text-sm leading-relaxed text-tertiary">
+          A blank canvas — edit <code className="text-secondary">src/App.tsx</code> to build
+          whatever you want.
+        </p>
+
+        <div className="mt-5 rounded-lg border border-secondary bg-secondary p-3 text-left">
+          <p className="text-xs font-medium uppercase tracking-wide text-quaternary">
+            Calling the API
+          </p>
+          <pre className="mt-1.5 overflow-x-auto text-xs leading-relaxed text-secondary">
+            {`await window.langsmith.call(
+  'GET /api/v1/sessions',
+  { params: { limit: '10' } }
+);`}
+          </pre>
+        </div>
+
+        <p className="mt-4 text-xs text-quaternary">
+          See <code className="text-tertiary">AGENTS.md</code> for the full API surface.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/blank/src/entry.tsx b/internal/cmd/templates/blank/src/entry.tsx
new file mode 100644
index 0000000..6c1bcc5
--- /dev/null
+++ b/internal/cmd/templates/blank/src/entry.tsx
@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import css from './index.css?inline';
+import { App } from './App';
+
+let root: Root | null = null;
+let styleInjected = false;
+
+function ensureStyles() {
+  if (styleInjected) return;
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+
+export function render(data: unknown, container: HTMLElement, metadata: RenderMetadata) {
+  ensureStyles();
+  if (!root) {
+    root = createRoot(container);
+  }
+  // metadata.mode is "dark"|"light". The sandbox sets html.dark from it, so
+  // this token UI themes without branching; passed to App.
+  root.render(createElement(App, { data, metadata }));
+}
+
+// Some sandbox hosts call a bare default export; support both shapes.
+export default { render };
diff --git a/internal/cmd/templates/blank/src/global.d.ts b/internal/cmd/templates/blank/src/global.d.ts
new file mode 100644
index 0000000..95c5301
--- /dev/null
+++ b/internal/cmd/templates/blank/src/global.d.ts
@@ -0,0 +1,21 @@
+export {};
+
+declare global {
+  /** render()'s 3rd arg, an open/extensible dict. v1 has only `mode`
+   * ("dark"|"light"); the sandbox sets `html.dark` from it. */
+  type RenderMetadata = { mode: 'dark' | 'light' };
+
+  interface Window {
+    /** Injected by the host page (LangSmith, or `langsmith apps dev` locally) — see AGENTS.md. */
+    langsmith: {
+      call: (
+        operation: string,
+        args?: { params?: Record<string, string | string[]>; body?: unknown }
+      ) => Promise<unknown>;
+      setData: (patch: Record<string, unknown>) => void;
+      feedback: {
+        create: (args: Record<string, unknown>) => Promise<unknown>;
+      };
+    };
+  }
+}
diff --git a/internal/cmd/templates/blank/src/index.css b/internal/cmd/templates/blank/src/index.css
new file mode 100644
index 0000000..5eae8f1
--- /dev/null
+++ b/internal/cmd/templates/blank/src/index.css
@@ -0,0 +1,386 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--bg-surface-level-1);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    min-height: 100vh;
+  }
+
+  * {
+    outline-color: var(--brand-400);
+  }
+
+  :root {
+    /* gray */
+    --gray-25: #fcfcfc;
+    --gray-50: #fafafa;
+    --gray-100: #f4f4f5;
+    --gray-200: #e4e4e7;
+    --gray-300: #d1d1d6;
+    --gray-400: #a0a0ab;
+    --gray-500: #70707b;
+    --gray-600: #51525c;
+    --gray-700: #3f3f46;
+    --gray-800: #26272b;
+    --gray-900: #1a1a1e;
+    --gray-950: #131316;
+
+    /* neutral */
+    --neutral-25: #fafbfd;
+    --neutral-35: #f8fafc;
+    --neutral-50: #f5f8fb;
+    --neutral-100: #edf2f7;
+    --neutral-200: #e2e8f0;
+    --neutral-300: #cbd5e1;
+    --neutral-400: #94a3b8;
+    --neutral-500: #64748b;
+    --neutral-600: #475569;
+    --neutral-700: #334155;
+    --neutral-800: #1e293b;
+    --neutral-900: #0f172a;
+    --neutral-950: #080f1e;
+
+    --white: #ffffff;
+    --black: #000000;
+
+    /* brand */
+    --brand-10: #f2faff;
+    --brand-25: #e5f4ff;
+    --brand-50: #cce9ff;
+    --brand-75: #9dd2fc;
+    --brand-100: #5fbef8;
+    --brand-200: #008dff;
+    --brand-300: #0078f1;
+    --brand-400: #006ddd;
+    --brand-500: #1566b8;
+    --brand-600: #145095;
+    --brand-700: #0d3d77;
+    --brand-800: #0c336a;
+    --brand-900: #102656;
+    --brand-950: #101a30;
+
+    /* red */
+    --red-25: #fffbfa;
+    --red-50: #fef3f2;
+    --red-100: #fee4e2;
+    --red-200: #fecdca;
+    --red-300: #fda29b;
+    --red-400: #f97066;
+    --red-500: #f04438;
+    --red-600: #d92d20;
+    --red-700: #b42318;
+    --red-800: #912018;
+    --red-900: #7a271a;
+    --red-950: #55160c;
+
+    /* orange */
+    --orange-25: #fffcf5;
+    --orange-50: #fffaeb;
+    --orange-100: #fef0c7;
+    --orange-200: #fedf89;
+    --orange-300: #fec84b;
+    --orange-400: #fdb022;
+    --orange-500: #f79009;
+    --orange-600: #cd6002;
+    --orange-700: #ac5305;
+    --orange-800: #894101;
+    --orange-900: #6d3300;
+    --orange-950: #4c2400;
+
+    /* green */
+    --green-25: #f5fef9;
+    --green-50: #ecfdf3;
+    --green-100: #dcfae6;
+    --green-200: #acefc6;
+    --green-300: #75e0a7;
+    --green-400: #46cd89;
+    --green-500: #19b26b;
+    --green-600: #079455;
+    --green-700: #047647;
+    --green-800: #065d3a;
+    --green-900: #084d31;
+    --green-950: #053321;
+
+    /* acid */
+    --acid-10: #fafee8;
+    --acid-25: #f2fcc8;
+    --acid-50: #e3f797;
+    --acid-100: #cceb50;
+    --acid-200: #aecf1a;
+    --acid-300: #93b000;
+    --acid-400: #799200;
+    --acid-500: #607500;
+    --acid-600: #495a00;
+    --acid-700: #354200;
+    --acid-800: #232c00;
+    --acid-900: #141a00;
+    --acid-950: #0b1000;
+
+    /* purple */
+    --purple-10: #f9f7ff;
+    --purple-25: #f1ecff;
+    --purple-50: #e3d9ff;
+    --purple-100: #c5b4f0;
+    --purple-200: #a691df;
+    --purple-300: #8b71cc;
+    --purple-400: #7655b8;
+    --purple-500: #6244a0;
+    --purple-600: #4e3487;
+    --purple-700: #3b2560;
+    --purple-800: #291753;
+    --purple-900: #190d38;
+    --purple-950: #0f0822;
+
+    /* SEMANTIC TOKENS */
+
+    /* SURFACE */
+    --bg-surface-level-1: var(--white);
+    --bg-surface-level-1-hover: var(--neutral-25);
+    --bg-surface-level-2: var(--neutral-50);
+    --bg-surface-level-2-hover: var(--neutral-100);
+    --bg-surface-level-3: var(--neutral-100);
+    --bg-surface-level-4: var(--neutral-200);
+    --bg-disabled: var(--neutral-100);
+    --bg-elevated: var(--white);
+    --bg-elevated-hover: var(--neutral-25);
+    --bg-elevated-selected: var(--neutral-25);
+    --bg-overlay: rgba(0, 0, 0, 0.5);
+
+    /* BRAND */
+    --bg-brand: var(--brand-400);
+    --bg-brand-hover: var(--brand-500);
+    --bg-brand-subtle: var(--brand-25);
+    --bg-brand-subtle-hover: var(--brand-50);
+    --bg-brand-muted: var(--brand-10);
+    --bg-purple: var(--purple-50);
+
+    /* INTENT */
+    --bg-success: var(--green-50);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-strong: var(--green-600);
+    --bg-error: var(--red-50);
+    --bg-error-subtle: var(--red-100);
+    --bg-error-strong: var(--red-600);
+    --bg-warning: var(--orange-50);
+    --bg-warning-subtle: var(--orange-100);
+    --bg-warning-strong: var(--orange-600);
+
+    /* CONTROL */
+    --bg-control-active: var(--brand-300);
+    --bg-control-active-hover: var(--brand-400);
+    --bg-control-thumb: var(--white);
+    --bg-control-disabled: var(--neutral-200);
+    --text-control-active-foreground: var(--bg-control-thumb);
+
+    /* SELECTED */
+    --bg-selected: var(--brand-25);
+    --bg-selected-hover: var(--brand-50);
+
+    /* BORDER */
+    --border-default: var(--neutral-300);
+    --border-subtle: var(--neutral-200);
+    --border-muted: var(--neutral-100);
+    --border-faint: var(--neutral-50);
+    --border-strong: var(--neutral-600);
+    --border-disabled: var(--neutral-200);
+    --border-focus: var(--brand-400);
+    --border-error: var(--red-300);
+    --border-error-strong: var(--red-600);
+    --border-brand: var(--brand-400);
+    --border-brand-strong: var(--brand-600);
+    --border-brand-subtle: var(--brand-100);
+    --border-warning: var(--orange-300);
+    --border-success: var(--green-200);
+    --border-purple: var(--purple-200);
+
+    /* TEXT */
+    --text-primary: var(--neutral-900);
+    --text-secondary: var(--neutral-700);
+    --text-secondary-hover: var(--neutral-800);
+    --text-tertiary: var(--neutral-600);
+    --text-tertiary-hover: var(--neutral-700);
+    --text-quaternary: var(--neutral-500);
+    --text-disabled: var(--neutral-300);
+    --text-placeholder: var(--neutral-400);
+    --text-error-primary: var(--red-700);
+    --text-error-secondary: var(--red-600);
+    --text-error-tertiary: var(--red-500);
+    --text-warning-primary: var(--orange-700);
+    --text-warning-secondary: var(--orange-600);
+    --text-warning-tertiary: var(--orange-500);
+    --text-success-primary: var(--green-700);
+    --text-success-secondary: var(--green-600);
+    --text-success-tertiary: var(--green-500);
+    --text-brand-primary: var(--brand-700);
+    --text-brand-secondary: var(--brand-600);
+    --text-brand-tertiary: var(--brand-500);
+    --text-brand-disabled: var(--brand-75);
+    --text-brand-on-fill: var(--white);
+    --text-link: var(--brand-300);
+    --text-link-hover: var(--brand-200);
+
+    /* ICON */
+    --icon-primary: var(--neutral-900);
+    --icon-secondary: var(--neutral-700);
+    --icon-tertiary: var(--neutral-500);
+    --icon-disabled: var(--neutral-300);
+    --icon-brand: var(--brand-400);
+    --icon-error: var(--red-600);
+    --icon-success: var(--green-600);
+    --icon-warning: var(--orange-600);
+
+    /* SHADOW */
+    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 3px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* MOTION */
+    --duration-fast: 100ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 500ms;
+
+    /* DEPRECATED ALIASES */
+    --bg-primary: var(--bg-surface-level-1);
+    --bg-primary-hover: var(--bg-surface-level-1-hover);
+    --bg-secondary: var(--bg-surface-level-2);
+    --bg-secondary-hover: var(--bg-surface-level-2-hover);
+    --bg-tertiary: var(--bg-surface-level-3);
+    --bg-quaternary: var(--bg-surface-level-4);
+    --bg-brand-primary: var(--bg-brand);
+    --bg-brand-primary_hover: var(--bg-brand-hover);
+    --bg-brand-secondary: var(--bg-brand-subtle);
+    --bg-brand-secondary_hover: var(--bg-brand-subtle-hover);
+    --bg-brand-tertiary: var(--bg-brand-muted);
+    --bg-success-primary: var(--bg-success);
+    --bg-success-secondary: var(--bg-success-subtle);
+    --bg-error-primary: var(--bg-error);
+    --bg-error-secondary: var(--bg-error-subtle);
+    --bg-warning-primary: var(--bg-warning);
+    --bg-warning-secondary: var(--bg-warning-subtle);
+    --border-primary: var(--border-default);
+    --border-secondary: var(--border-subtle);
+    --border-tertiary: var(--border-muted);
+    --border-quaternary: var(--border-faint);
+    --text-button-primary: var(--white);
+  }
+
+  html.dark {
+    --gray-25: #131316;
+    --gray-50: #1a1a1e;
+    --gray-100: #26272b;
+    --gray-200: #3f3f46;
+    --gray-300: #51525c;
+    --gray-400: #70707b;
+    --gray-500: #a0a0ab;
+    --gray-600: #d1d1d6;
+    --gray-700: #e4e4e7;
+    --gray-800: #f4f4f5;
+    --gray-900: #fafafa;
+    --gray-950: #fcfcfc;
+
+    --neutral-25: #09090f;
+    --neutral-35: #0d0f18;
+    --neutral-50: #111521;
+    --neutral-100: #1b2030;
+    --neutral-200: #282e42;
+    --neutral-300: #393f55;
+    --neutral-400: #555d78;
+    --neutral-500: #8790ab;
+    --neutral-600: #cbd5e1;
+    --neutral-700: #e2e8f0;
+    --neutral-800: #edf2f7;
+    --neutral-900: #f5f8fb;
+    --neutral-950: #fafbfd;
+
+    --white: #131316;
+    --black: #ffffff;
+
+    --brand-10: #101a30;
+    --brand-25: #102656;
+    --brand-50: #0c336a;
+    --brand-75: #0c3871;
+    --brand-100: #0d3d77;
+    --brand-200: #145095;
+    --brand-300: #1566b8;
+    --brand-400: #006ddd;
+    --brand-500: #0078f1;
+    --brand-600: #008dff;
+    --brand-700: #5fbef8;
+    --brand-800: #cce9ff;
+    --brand-900: #e5f4ff;
+    --brand-950: #f2faff;
+
+    --red-25: #55160c;
+    --red-50: #7a271a;
+    --red-100: #912018;
+    --red-200: #b42318;
+    --red-300: #d92d20;
+    --red-400: #f04438;
+    --red-500: #f97066;
+    --red-600: #fda29b;
+    --red-700: #fecdca;
+    --red-800: #fee4e2;
+    --red-900: #fef3f2;
+    --red-950: #fffbfa;
+
+    --orange-25: #4c2400;
+    --orange-50: #6d3300;
+    --orange-100: #894101;
+    --orange-200: #ac5305;
+    --orange-300: #cd6002;
+    --orange-400: #f79009;
+    --orange-500: #fdb022;
+    --orange-600: #fec84b;
+    --orange-700: #fedf89;
+    --orange-800: #fef0c7;
+    --orange-900: #fffaeb;
+    --orange-950: #fffcf5;
+
+    --green-25: #053321;
+    --green-50: #084d31;
+    --green-100: #065d3a;
+    --green-200: #047647;
+    --green-300: #079455;
+    --green-400: #19b26b;
+    --green-500: #46cd89;
+    --green-600: #75e0a7;
+    --green-700: #acefc6;
+    --green-800: #dcfae6;
+    --green-900: #ecfdf3;
+    --green-950: #f5fef9;
+  }
+}
+
+@keyframes linear-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(800%);
+  }
+}
diff --git a/internal/cmd/templates/blank/src/vite-env.d.ts b/internal/cmd/templates/blank/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/internal/cmd/templates/blank/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/internal/cmd/templates/blank/tailwind.config.js b/internal/cmd/templates/blank/tailwind.config.js
new file mode 100644
index 0000000..623e1a9
--- /dev/null
+++ b/internal/cmd/templates/blank/tailwind.config.js
@@ -0,0 +1,128 @@
+const withAlpha = (cssVar) => ({ opacityValue }) =>
+  opacityValue !== undefined
+    ? `color-mix(in srgb, ${cssVar} calc(${opacityValue} * 100%), transparent)`
+    : cssVar;
+
+const spaceScale = {
+  'space-1': '0.25rem',
+  'space-2': '0.5rem',
+  'space-3': '0.75rem',
+  'space-4': '1rem',
+  'space-5': '1.25rem',
+  'space-6': '1.5rem',
+  'space-7': '2rem',
+  'space-8': '2.5rem',
+  'space-9': '4rem',
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      backgroundColor: {
+        // Surfaces
+        'surface-level-1': withAlpha('var(--bg-surface-level-1)'),
+        'surface-level-2': withAlpha('var(--bg-surface-level-2)'),
+        'surface-level-3': withAlpha('var(--bg-surface-level-3)'),
+        'surface-level-4': withAlpha('var(--bg-surface-level-4)'),
+        'elevated': withAlpha('var(--bg-elevated)'),
+        'elevated-hover': withAlpha('var(--bg-elevated-hover)'),
+        'disabled': withAlpha('var(--bg-disabled)'),
+        // Brand
+        'brand': withAlpha('var(--bg-brand)'),
+        'brand-hover': withAlpha('var(--bg-brand-hover)'),
+        'brand-subtle': withAlpha('var(--bg-brand-subtle)'),
+        'brand-subtle-hover': withAlpha('var(--bg-brand-subtle-hover)'),
+        'brand-muted': withAlpha('var(--bg-brand-muted)'),
+        // Intent
+        'success': withAlpha('var(--bg-success)'),
+        'success-subtle': withAlpha('var(--bg-success-subtle)'),
+        'success-strong': withAlpha('var(--bg-success-strong)'),
+        'error': withAlpha('var(--bg-error)'),
+        'error-subtle': withAlpha('var(--bg-error-subtle)'),
+        'error-strong': withAlpha('var(--bg-error-strong)'),
+        'warning': withAlpha('var(--bg-warning)'),
+        'warning-subtle': withAlpha('var(--bg-warning-subtle)'),
+        'warning-strong': withAlpha('var(--bg-warning-strong)'),
+        // Controls
+        'control-active': withAlpha('var(--bg-control-active)'),
+        'control-thumb': withAlpha('var(--bg-control-thumb)'),
+        'control-disabled': withAlpha('var(--bg-control-disabled)'),
+        // Selected
+        'selected': withAlpha('var(--bg-selected)'),
+        'selected-hover': withAlpha('var(--bg-selected-hover)'),
+        // Deprecated aliases (for compatibility with existing classes)
+        'primary': withAlpha('var(--bg-surface-level-1)'),
+        'secondary': withAlpha('var(--bg-surface-level-2)'),
+        'tertiary': withAlpha('var(--bg-surface-level-3)'),
+        'quaternary': withAlpha('var(--bg-surface-level-4)'),
+      },
+      borderColor: {
+        'default': withAlpha('var(--border-default)'),
+        'subtle': withAlpha('var(--border-subtle)'),
+        'muted': withAlpha('var(--border-muted)'),
+        'faint': withAlpha('var(--border-faint)'),
+        'strong': withAlpha('var(--border-strong)'),
+        'disabled': withAlpha('var(--border-disabled)'),
+        'focus': withAlpha('var(--border-focus)'),
+        'error': withAlpha('var(--border-error)'),
+        'error-strong': withAlpha('var(--border-error-strong)'),
+        'brand': withAlpha('var(--border-brand)'),
+        'brand-strong': withAlpha('var(--border-brand-strong)'),
+        'brand-subtle': withAlpha('var(--border-brand-subtle)'),
+        'warning': withAlpha('var(--border-warning)'),
+        'success': withAlpha('var(--border-success)'),
+        // Deprecated aliases
+        'primary': withAlpha('var(--border-default)'),
+        'secondary': withAlpha('var(--border-subtle)'),
+        'tertiary': withAlpha('var(--border-muted)'),
+        'quaternary': withAlpha('var(--border-faint)'),
+      },
+      textColor: {
+        'primary': withAlpha('var(--text-primary)'),
+        'secondary': withAlpha('var(--text-secondary)'),
+        'tertiary': withAlpha('var(--text-tertiary)'),
+        'quaternary': withAlpha('var(--text-quaternary)'),
+        'disabled': withAlpha('var(--text-disabled)'),
+        'placeholder': withAlpha('var(--text-placeholder)'),
+        'error-primary': withAlpha('var(--text-error-primary)'),
+        'error-secondary': withAlpha('var(--text-error-secondary)'),
+        'warning-primary': withAlpha('var(--text-warning-primary)'),
+        'success-primary': withAlpha('var(--text-success-primary)'),
+        'brand-primary': withAlpha('var(--text-brand-primary)'),
+        'brand-secondary': withAlpha('var(--text-brand-secondary)'),
+        'brand-on-fill': withAlpha('var(--text-brand-on-fill)'),
+        'link': withAlpha('var(--text-link)'),
+        'link-hover': withAlpha('var(--text-link-hover)'),
+        'icon-primary': withAlpha('var(--icon-primary)'),
+        'icon-secondary': withAlpha('var(--icon-secondary)'),
+        'icon-tertiary': withAlpha('var(--icon-tertiary)'),
+        'icon-disabled': withAlpha('var(--icon-disabled)'),
+        'icon-brand': withAlpha('var(--icon-brand)'),
+        'icon-error': withAlpha('var(--icon-error)'),
+        'icon-success': withAlpha('var(--icon-success)'),
+        'icon-warning': withAlpha('var(--icon-warning)'),
+      },
+      borderRadius: {
+        'xs': 'var(--radius-xs)',
+        'sm': 'var(--radius-sm)',
+        'md': 'var(--radius-md)',
+        'lg': 'var(--radius-lg)',
+        'xl': 'var(--radius-xl)',
+        'full': 'var(--radius-full)',
+      },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+      },
+      gap: spaceScale,
+      padding: spaceScale,
+      margin: spaceScale,
+      space: spaceScale,
+    },
+  },
+  plugins: [],
+};
diff --git a/internal/cmd/templates/blank/tsconfig.json b/internal/cmd/templates/blank/tsconfig.json
new file mode 100644
index 0000000..a4c834a
--- /dev/null
+++ b/internal/cmd/templates/blank/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/internal/cmd/templates/blank/vite.config.ts b/internal/cmd/templates/blank/vite.config.ts
new file mode 100644
index 0000000..977c289
--- /dev/null
+++ b/internal/cmd/templates/blank/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// Library-mode build: the sandbox this app runs in evaluates a single
+// dependency-free CJS file exporting { render(data, root, metadata) } — not a
+// self-mounting SPA. See src/entry.tsx and AGENTS.md.
+export default defineConfig({
+  plugins: [react()],
+  // Unlike Vite's normal app-mode build, library mode does NOT replace
+  // process.env.NODE_ENV on its own — React/ReactDOM's bundled source still
+  // references it internally. There's no `process` global in the sandboxed
+  // iframe (or any browser), so without this the bundle throws
+  // "ReferenceError: process is not defined" the moment it's required.
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: 'src/entry.tsx',
+      formats: ['cjs'],
+      fileName: () => 'bundle.js',
+    },
+  },
+});
diff --git a/internal/cmd/templates/coding-agent-dashboard/.gitignore b/internal/cmd/templates/coding-agent-dashboard/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/internal/cmd/templates/coding-agent-dashboard/README.md b/internal/cmd/templates/coding-agent-dashboard/README.md
new file mode 100644
index 0000000..5baf9fb
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/README.md
@@ -0,0 +1,72 @@
+# {{.Name}}
+
+{{.Description}}
+
+A LangSmith custom app, scaffolded by `langsmith apps init --template
+coding-agent-dashboard`. It charts your coding-agent runs: pick a project,
+and it shows the share of each `ls_integration` as a pie plus a per-model
+breakdown (with run counts and error rates). **Read `AGENTS.md` first** — it
+documents the LangSmith API surface this app can call.
+
+## What this is
+
+A custom app is a small React/TS UI rendered inside LangSmith in a
+locked-down sandbox (`sandbox="allow-scripts"`, no `allow-same-origin`). It
+never gets direct network access or a real credential — everything goes
+through a `postMessage` bridge to the host page (`window.langsmith.call`),
+which proxies to the real LangSmith API under the viewer's own session (or
+your local `LANGSMITH_API_KEY` when running `langsmith apps dev`).
+
+Since the sandbox has no bundler or npm access at runtime, this app is built
+with Vite in **library mode**: `npm run build` bundles everything (React
+included) into a single dependency-free file (`dist/bundle.js`) before it's
+pushed. Use npm dependencies freely — they all get inlined at build time.
+
+## Develop
+
+`langsmith apps init` already ran `npm install` and `npm run build` for you,
+so `dist/bundle.js` exists and `langsmith apps dev` works immediately:
+
+```bash
+langsmith apps dev
+```
+
+`apps dev` runs the app inside a real sandboxed iframe, identical
+restrictions to production, and automatically starts `npm run watch` for
+you (it detects the script in `package.json`) — edit `src/App.tsx`, save,
+and the preview reloads on its own. Pass `--no-watch` if you'd rather drive
+the build yourself. Pick a project from the in-app dropdown once it loads
+(it calls the real API using your local `LANGSMITH_API_KEY`).
+
+## The bridge contract
+
+`src/entry.tsx` exports a `render(data, root, metadata)` function that the
+host calls once on load and again whenever `data` or `metadata` changes —
+`data` is always `{}` (apps fetch whatever they need themselves).
+`metadata.mode` is `"dark"` or
+`"light"`; the sandbox sets `html.dark` from it, so this token-based UI themes
+automatically (branch on `metadata.mode` only if you use inline styles).
+`src/App.tsx` is the actual UI; edit it freely, it's just a React component.
+
+`window.langsmith`, injected by the host page, gives you:
+
+- `window.langsmith.call(operation, args)` — `operation` is a
+  `"<METHOD> <path>"` string (e.g. `"GET /api/v1/sessions"`), forwarded
+  as-is to the real LangSmith API. Not a curated allowlist — see
+  `AGENTS.md` for the available surface. Returns a Promise.
+- `window.langsmith.setData(patch)` — push a data mutation out for the host
+  to persist.
+- `window.langsmith.feedback.create(args)` — sugar over
+  `call('POST /api/v1/feedback', {body: args})`.
+
+## Deploy
+
+```bash
+npm run build
+langsmith apps push
+```
+
+The first `push` creates the app and writes `.langsmith/app.json` (the
+app's ID) into this directory — commit it so teammates' pushes update the
+same app instead of creating a new one. Every push after that updates it in
+place.
diff --git a/internal/cmd/templates/coding-agent-dashboard/package.json b/internal/cmd/templates/coding-agent-dashboard/package.json
new file mode 100644
index 0000000..e07cf8d
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "{{.Name}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/postcss.config.js b/internal/cmd/templates/coding-agent-dashboard/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/App.tsx b/internal/cmd/templates/coding-agent-dashboard/src/App.tsx
new file mode 100644
index 0000000..4aaefc8
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/App.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { ProjectBar } from './components/ProjectBar';
+import { OverviewPanel } from './components/OverviewPanel';
+import { RunsTable } from './components/RunsTable';
+import { Section } from './components/primitives';
+import { Spinner } from './components/Spinner';
+import { fetchProjectStats, fetchRecentRuns } from './api';
+import { cn } from './lib/utils';
+import type { ProjectStats, Run, StatsScope } from './types';
+
+const EMPTY_STATS: ProjectStats = { turns: null, threads: null, failedScopes: [] };
+
+const WINDOW_OPTIONS: { days: number; label: string }[] = [
+  { days: 1, label: 'Last 24 hours' },
+  { days: 7, label: 'Last 7 days' },
+  { days: 30, label: 'Last 30 days' },
+  { days: 90, label: 'Last 90 days' },
+];
+
+const SCOPE_LABEL: Record<StatsScope, string> = {
+  turns: 'turn stats',
+  threads: 'thread count',
+};
+
+export function App(_props: { data: unknown; metadata?: RenderMetadata }) {
+  const [projectId, setProjectId] = useState('');
+  const [windowDays, setWindowDays] = useState(7);
+
+  const [stats, setStats] = useState<ProjectStats>(EMPTY_STATS);
+  const [statsLoading, setStatsLoading] = useState(false);
+  const [crashed, setCrashed] = useState(false);
+
+  const [runs, setRuns] = useState<Run[]>([]);
+  const [runsLoading, setRunsLoading] = useState(false);
+  const [runsFailed, setRunsFailed] = useState(false);
+
+  useEffect(() => {
+    setStats(EMPTY_STATS);
+    setRuns([]);
+    setCrashed(false);
+    setRunsFailed(false);
+    if (!projectId) return;
+
+    setStatsLoading(true);
+    fetchProjectStats(projectId, windowDays)
+      .then(setStats)
+      .catch((e) => {
+        console.error('Failed to load project stats', e);
+        setCrashed(true);
+      })
+      .finally(() => setStatsLoading(false));
+
+    setRunsLoading(true);
+    fetchRecentRuns(projectId, windowDays)
+      .then(setRuns)
+      .catch((e) => {
+        console.error('Failed to load recent runs', e);
+        setRunsFailed(true);
+      })
+      .finally(() => setRunsLoading(false));
+  }, [projectId, windowDays]);
+
+  const hasAnyStats = stats.turns != null || stats.threads != null;
+  const hasFailures = stats.failedScopes.length > 0;
+
+  return (
+    <div className="flex min-h-screen flex-col bg-surface-level-1">
+      <ProjectBar selectedProjectId={projectId} onSelect={setProjectId} />
+      <div className="flex-1 p-6">{renderBody()}</div>
+    </div>
+  );
+
+  function renderBody() {
+    if (!projectId) {
+      return (
+        <GuideState step={1} heading="Pick a tracing project to get started" subtext="Every stat and the recent-runs table below are scoped to it." />
+      );
+    }
+    if (statsLoading && !hasAnyStats) {
+      return <GuideState spinner heading="Loading stats…" />;
+    }
+    if (crashed) {
+      return <GuideState tone="error" heading="Couldn't load this project's stats" subtext="Check the console and your access to this project." />;
+    }
+    if (!hasAnyStats && hasFailures) {
+      return (
+        <GuideState
+          tone="error"
+          heading="Still rate-limited after retries"
+          subtext={`Couldn't load ${stats.failedScopes.map((k) => SCOPE_LABEL[k]).join(' or ')} — try reselecting the project in a moment.`}
+        />
+      );
+    }
+    if (!hasAnyStats) {
+      return <GuideState heading="No data in this window" subtext="Try a wider time window above, or a different project." />;
+    }
+
+    return (
+      <div className={cn('mx-auto flex max-w-6xl flex-col gap-6', statsLoading && 'motion-safe:transition-opacity motion-safe:duration-normal opacity-50')}>
+        <div className="flex flex-wrap items-center justify-between gap-2">
+          <h2 className="text-base font-semibold text-primary">Overview</h2>
+          {windowSelect()}
+        </div>
+
+        {hasFailures && (
+          <p className="rounded-md border border-secondary bg-surface-level-2 px-3 py-2 text-xs text-secondary">
+            Couldn't load {stats.failedScopes.map((k) => SCOPE_LABEL[k]).join(' or ')} after retries — those numbers are
+            showing as "—" below. Reselect the project or change the window to retry.
+          </p>
+        )}
+
+        <OverviewPanel stats={stats} />
+
+        <Section
+          title="Recent runs"
+          note={
+            runsFailed
+              ? "Couldn't load recent runs — check the console and your access."
+              : `Most recent ${runs.length} turn${runs.length === 1 ? '' : 's'} in this window — a sample for browsing, not the source of the stats above.`
+          }
+        >
+          {runsLoading && runs.length === 0 ? (
+            <div className="flex items-center justify-center gap-2 py-8">
+              <Spinner size="sm" />
+              <span className="text-sm text-tertiary">Loading recent runs…</span>
+            </div>
+          ) : (
+            <RunsTable runs={runs} />
+          )}
+        </Section>
+      </div>
+    );
+  }
+
+  function windowSelect() {
+    return (
+      <label className="flex items-center gap-2 text-xs text-tertiary">
+        Window
+        <select
+          value={windowDays}
+          onChange={(e) => setWindowDays(Number(e.target.value))}
+          className="rounded-md border border-secondary bg-primary px-2 py-1 text-xs text-primary focus:border-brand focus:outline-none"
+        >
+          {WINDOW_OPTIONS.map((o) => (
+            <option key={o.days} value={o.days}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </label>
+    );
+  }
+}
+
+function GuideState({
+  step,
+  heading,
+  subtext,
+  spinner,
+  tone,
+}: {
+  step?: number;
+  heading: string;
+  subtext?: string;
+  spinner?: boolean;
+  tone?: 'error';
+}) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 py-24 text-center">
+      {spinner ? (
+        <Spinner size="md" />
+      ) : step != null ? (
+        <span
+          className={cn(
+            'flex size-10 items-center justify-center rounded-full border-2 text-base font-semibold',
+            tone === 'error' ? 'border-error text-error-primary' : 'border-brand text-brand-primary'
+          )}
+        >
+          {step}
+        </span>
+      ) : null}
+      <div className="flex flex-col gap-1">
+        <span className={cn('text-base font-semibold', tone === 'error' ? 'text-error-primary' : 'text-primary')}>{heading}</span>
+        {subtext && <span className="max-w-md text-sm text-tertiary">{subtext}</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/api.ts b/internal/cmd/templates/coding-agent-dashboard/src/api.ts
new file mode 100644
index 0000000..55422be
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/api.ts
@@ -0,0 +1,134 @@
+// All LangSmith access goes through window.langsmith.call — the sandbox has
+// no network of its own. See AGENTS.md for the operation format and endpoints.
+import type { Project, ProjectStats, RunGroupStats, RunsQueryResponse, RunStats, StatsScope } from './types';
+
+// Metadata equality is two paired clauses in the filter DSL, not
+// eq(metadata.key, ...).
+const CODING_FILTER = 'and(eq(metadata_key, "ls_agent_purpose"), eq(metadata_value, "coding"))';
+
+// The recent-runs table is intentionally bounded — it's a sample for
+// browsing, not a data source for any headline number. Every stat above it
+// comes from the stats endpoints instead, which aggregate server-side over
+// the whole time window with no row limit.
+const RECENT_RUNS_LIMIT = 100;
+
+function windowStart(days: number): string {
+  return new Date(Date.now() - days * 86400000).toISOString();
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// window.langsmith.call collapses every failure (including a transient 429
+// from firing several queries at once) into a plain Error with no status
+// code attached — the sandbox bridge drops it before the app ever sees it.
+// So retry blindly on any failure rather than trying to sniff "rate limit"
+// out of message text that varies between local dev and production. A
+// workspace that's already saturated (busy shared project, several other
+// dev sessions hitting the same key) can stay over its limit for seconds at
+// a time, so this budget is generous: 5 attempts, backoff capped at 6s.
+const RETRY_ATTEMPTS = 5;
+const RETRY_BASE_DELAY_MS = 500;
+const RETRY_MAX_DELAY_MS = 6000;
+
+type CallArgs = Parameters<Window['langsmith']['call']>[1];
+
+async function callWithRetry<T>(operation: string, args: CallArgs): Promise<T> {
+  for (let attempt = 1; ; attempt++) {
+    try {
+      return (await window.langsmith.call(operation, args)) as T;
+    } catch (e) {
+      if (attempt >= RETRY_ATTEMPTS) throw e;
+      const delay = Math.min(RETRY_BASE_DELAY_MS * 2 ** (attempt - 1), RETRY_MAX_DELAY_MS);
+      await sleep(delay + Math.random() * 300);
+    }
+  }
+}
+
+export async function fetchProjects(
+  search = '',
+  offset = 0,
+  limit = 25
+): Promise<Project[]> {
+  // reference_free=true keeps real tracing projects and drops eval experiments.
+  const params: Record<string, string> = {
+    limit: String(limit),
+    offset: String(offset),
+    reference_free: 'true',
+  };
+  if (search) params.name_contains = search;
+  return callWithRetry<Project[]>('GET /api/v1/sessions', { params });
+}
+
+const STATS_SELECT = [
+  'run_count',
+  'error_rate',
+  'latency_p50',
+  'latency_p99',
+  'latency_avg',
+  'total_tokens',
+  'prompt_tokens',
+  'completion_tokens',
+  'total_cost',
+  'prompt_cost',
+  'completion_cost',
+];
+
+// Gap enforced between queries even when one resolves instantly (e.g. a
+// cached response) — on top of whatever the retries above already spent
+// waiting, this keeps the two stats queries and the recent-runs query from
+// ever landing back-to-back (see fetchProjectRuns's history in git blame for
+// why: a single client firing several requests at once was enough to trip a
+// workspace's rate limit on its own).
+const INTER_QUERY_GAP_MS = 250;
+
+// Exact, whole-window aggregates — no row limit, no sampling. Two
+// independent calls (turns, threads) so one being rate-limited doesn't blank
+// the other's numbers; see ProjectStats.failedScopes.
+export async function fetchProjectStats(sessionId: string, windowDays: number): Promise<ProjectStats> {
+  const startTime = windowStart(windowDays);
+  const failedScopes: StatsScope[] = [];
+
+  let turns: RunStats | null = null;
+  try {
+    turns = await callWithRetry<RunStats>('POST /api/v1/runs/stats', {
+      body: { session: [sessionId], filter: CODING_FILTER, start_time: startTime, is_root: true, select: STATS_SELECT },
+    });
+  } catch (e) {
+    console.error('Failed to load turn stats after retries', e);
+    failedScopes.push('turns');
+  }
+
+  await sleep(INTER_QUERY_GAP_MS);
+
+  let threads: RunGroupStats | null = null;
+  try {
+    threads = await callWithRetry<RunGroupStats>('POST /api/v1/runs/group/stats', {
+      body: { session_id: sessionId, group_by: 'conversation', filter: CODING_FILTER, start_time: startTime },
+    });
+  } catch (e) {
+    console.error('Failed to load thread stats after retries', e);
+    failedScopes.push('threads');
+  }
+
+  return { turns, threads, failedScopes };
+}
+
+// A bounded sample for the recent-runs table only — never used to compute a
+// headline stat, so its 100-row cap doesn't need to be (and isn't) accurate
+// for anything but "what happened most recently."
+export async function fetchRecentRuns(sessionId: string, windowDays: number) {
+  await sleep(INTER_QUERY_GAP_MS);
+  const resp = await callWithRetry<RunsQueryResponse>('POST /api/v1/runs/query', {
+    body: {
+      session: [sessionId],
+      filter: CODING_FILTER,
+      start_time: windowStart(windowDays),
+      is_root: true,
+      limit: RECENT_RUNS_LIMIT,
+      select: ['id', 'name', 'error', 'start_time', 'end_time', 'total_tokens', 'total_cost', 'extra'],
+    },
+  });
+  return resp?.runs ?? [];
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/components/OverviewPanel.tsx b/internal/cmd/templates/coding-agent-dashboard/src/components/OverviewPanel.tsx
new file mode 100644
index 0000000..ac3dd5f
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/components/OverviewPanel.tsx
@@ -0,0 +1,47 @@
+import type { ProjectStats } from '../types';
+import { formatCost, formatDuration, formatInt, formatPct, formatTokens } from '../lib/format';
+import { StatTile, type StatTone } from './primitives';
+
+const DASH = '—';
+
+function errorTone(rate: number | null | undefined): StatTone | undefined {
+  if (rate == null) return undefined;
+  if (rate >= 10) return 'bad';
+  if (rate >= 2) return 'warning';
+  return 'good';
+}
+
+// The headline numbers, straight from the two stats endpoints — exact,
+// whole-window aggregates, not derived from the sampled recent-runs table
+// below. A tile shows "—" only when its field is genuinely absent from the
+// response, never a silently-wrong zero.
+export function OverviewPanel({ stats }: { stats: ProjectStats }) {
+  const t = stats.turns;
+  const th = stats.threads;
+
+  const tokenHint =
+    t?.prompt_tokens != null && t?.completion_tokens != null
+      ? `${formatTokens(t.prompt_tokens)} prompt · ${formatTokens(t.completion_tokens)} completion`
+      : undefined;
+  const costHint =
+    t?.prompt_cost != null && t?.completion_cost != null
+      ? `${formatCost(t.prompt_cost)} prompt · ${formatCost(t.completion_cost)} completion`
+      : undefined;
+
+  return (
+    <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+      <StatTile label="Turns" value={t?.run_count != null ? formatInt(t.run_count) : DASH} />
+      <StatTile label="Threads" value={th?.group_count != null ? formatInt(th.group_count) : DASH} />
+      <StatTile label="Cost" value={t?.total_cost != null ? formatCost(t.total_cost) : DASH} hint={costHint} />
+      <StatTile label="Tokens" value={t?.total_tokens != null ? formatTokens(t.total_tokens) : DASH} hint={tokenHint} />
+      <StatTile
+        label="Error rate"
+        value={t?.error_rate != null ? formatPct(t.error_rate) : DASH}
+        tone={errorTone(t?.error_rate)}
+      />
+      <StatTile label="Avg latency" value={t?.latency_avg != null ? formatDuration(t.latency_avg) : DASH} />
+      <StatTile label="p50 latency" value={t?.latency_p50 != null ? formatDuration(t.latency_p50) : DASH} />
+      <StatTile label="p99 latency" value={t?.latency_p99 != null ? formatDuration(t.latency_p99) : DASH} />
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/components/ProjectBar.tsx b/internal/cmd/templates/coding-agent-dashboard/src/components/ProjectBar.tsx
new file mode 100644
index 0000000..ecacd1d
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/components/ProjectBar.tsx
@@ -0,0 +1,43 @@
+import { fetchProjects } from '../api';
+import type { Project } from '../types';
+import { SearchableSelect } from './SearchableSelect';
+
+interface Props {
+  selectedProjectId: string;
+  onSelect: (projectId: string) => void;
+}
+
+// One step, same guided-flow language as the experiment-comparison
+// template's stepper: a numbered badge (done once picked), a title, and the
+// control right below it — everything always visible and editable.
+export function ProjectBar({ selectedProjectId, onSelect }: Props) {
+  const done = Boolean(selectedProjectId);
+
+  return (
+    <div className="flex gap-4 bg-surface-level-1 px-4 py-4">
+      <span
+        className={`flex size-7 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold ${
+          done ? 'border-brand bg-brand text-brand-on-fill' : 'border-brand text-brand-primary bg-surface-level-1'
+        }`}
+      >
+        {done ? '✓' : 1}
+      </span>
+      <div className="flex flex-1 flex-col gap-1.5">
+        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className="text-sm font-semibold text-primary">Select a tracing project</span>
+          <span className="text-xs text-tertiary">Every stat below is scoped to it.</span>
+        </div>
+        <SearchableSelect<Project>
+          id="ls-project-select"
+          value={selectedProjectId}
+          onSelect={(project) => onSelect(project.id)}
+          fetchPage={fetchProjects}
+          placeholder="Select a project…"
+          searchPlaceholder="Search projects by name…"
+          emptyLabel="No tracing projects in this workspace"
+          className="max-w-[360px]"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/components/RunsTable.tsx b/internal/cmd/templates/coding-agent-dashboard/src/components/RunsTable.tsx
new file mode 100644
index 0000000..6316b9e
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/components/RunsTable.tsx
@@ -0,0 +1,55 @@
+import type { Run } from '../types';
+import { durationMs, repoOf, threadOf, UNKNOWN } from '../lib/normalize';
+import { formatCost, formatDuration, formatRelativeTime, formatTokens } from '../lib/format';
+import { Empty } from './primitives';
+
+// A flat, bounded sample of the most recent turns — for browsing, not for
+// computing any of the stats above it (see api.ts's RECENT_RUNS_LIMIT).
+export function RunsTable({ runs }: { runs: Run[] }) {
+  if (runs.length === 0) return <Empty label="No recent turns in this window" />;
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-xs text-tertiary">
+            <th className="pb-1.5 font-medium">Turn</th>
+            <th className="pb-1.5 font-medium">Repo</th>
+            <th className="pb-1.5 font-medium">Thread</th>
+            <th className="pb-1.5 text-right font-medium">Duration</th>
+            <th className="pb-1.5 text-right font-medium">Tokens</th>
+            <th className="pb-1.5 text-right font-medium">Cost</th>
+            <th className="pb-1.5 text-right font-medium">When</th>
+          </tr>
+        </thead>
+        <tbody>
+          {runs.map((r) => {
+            const ms = durationMs(r);
+            const thread = threadOf(r);
+            const repo = repoOf(r);
+            return (
+              <tr key={r.id} className="border-t border-secondary">
+                <td className="max-w-[220px] truncate py-1.5 pr-2 text-primary" title={r.name ?? ''}>
+                  <span className="inline-flex items-center gap-1.5">
+                    {r.error && <span className="size-1.5 shrink-0 rounded-full bg-error-strong" title={r.error} />}
+                    {r.name ?? 'run'}
+                  </span>
+                </td>
+                <td className="max-w-[160px] truncate py-1.5 pr-2 text-secondary" title={repo}>
+                  {repo === UNKNOWN ? '—' : repo}
+                </td>
+                <td className="py-1.5 pr-2 font-mono text-xs text-tertiary" title={thread}>
+                  {thread ? thread.slice(0, 8) : '—'}
+                </td>
+                <td className="py-1.5 text-right tabular-nums text-secondary">{ms != null ? formatDuration(ms) : '—'}</td>
+                <td className="py-1.5 text-right tabular-nums text-secondary">{formatTokens(r.total_tokens ?? 0)}</td>
+                <td className="py-1.5 text-right tabular-nums text-secondary">{formatCost(r.total_cost ?? 0)}</td>
+                <td className="py-1.5 text-right tabular-nums text-tertiary">{r.start_time ? formatRelativeTime(r.start_time) : '—'}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/components/primitives.tsx b/internal/cmd/templates/coding-agent-dashboard/src/components/primitives.tsx
new file mode 100644
index 0000000..a572c98
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/components/primitives.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+export function Section({ title, note, children }: { title: string; note?: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-3 rounded-lg border border-secondary p-5">
+      <div className="flex flex-col gap-0.5">
+        <h2 className="text-sm font-semibold text-primary">{title}</h2>
+        {note && <span className="text-xs text-tertiary">{note}</span>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export function Empty({ label = 'No data' }: { label?: string }) {
+  return <span className="py-4 text-center text-xs text-tertiary">{label}</span>;
+}
+
+export type StatTone = 'good' | 'warning' | 'bad';
+
+const TONE_CLASS: Record<StatTone, string> = {
+  good: 'text-success-primary',
+  warning: 'text-warning-primary',
+  bad: 'text-error-primary',
+};
+
+// tone colors the value itself (a status, not a series) — e.g. an error rate
+// tile going amber past a threshold. Omit it for a plain neutral stat.
+export function StatTile({ label, value, hint, tone }: { label: string; value: string; hint?: string; tone?: StatTone }) {
+  return (
+    <div className="flex flex-col gap-1 rounded-lg border border-secondary p-4">
+      <span className="text-xs font-medium uppercase tracking-wide text-tertiary">{label}</span>
+      <span className={`text-2xl font-semibold ${tone ? TONE_CLASS[tone] : 'text-primary'}`}>{value}</span>
+      {hint && <span className="text-xs text-tertiary">{hint}</span>}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/entry.tsx b/internal/cmd/templates/coding-agent-dashboard/src/entry.tsx
new file mode 100644
index 0000000..6c1bcc5
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/entry.tsx
@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import css from './index.css?inline';
+import { App } from './App';
+
+let root: Root | null = null;
+let styleInjected = false;
+
+function ensureStyles() {
+  if (styleInjected) return;
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+
+export function render(data: unknown, container: HTMLElement, metadata: RenderMetadata) {
+  ensureStyles();
+  if (!root) {
+    root = createRoot(container);
+  }
+  // metadata.mode is "dark"|"light". The sandbox sets html.dark from it, so
+  // this token UI themes without branching; passed to App.
+  root.render(createElement(App, { data, metadata }));
+}
+
+// Some sandbox hosts call a bare default export; support both shapes.
+export default { render };
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/global.d.ts b/internal/cmd/templates/coding-agent-dashboard/src/global.d.ts
new file mode 100644
index 0000000..95c5301
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/global.d.ts
@@ -0,0 +1,21 @@
+export {};
+
+declare global {
+  /** render()'s 3rd arg, an open/extensible dict. v1 has only `mode`
+   * ("dark"|"light"); the sandbox sets `html.dark` from it. */
+  type RenderMetadata = { mode: 'dark' | 'light' };
+
+  interface Window {
+    /** Injected by the host page (LangSmith, or `langsmith apps dev` locally) — see AGENTS.md. */
+    langsmith: {
+      call: (
+        operation: string,
+        args?: { params?: Record<string, string | string[]>; body?: unknown }
+      ) => Promise<unknown>;
+      setData: (patch: Record<string, unknown>) => void;
+      feedback: {
+        create: (args: Record<string, unknown>) => Promise<unknown>;
+      };
+    };
+  }
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/index.css b/internal/cmd/templates/coding-agent-dashboard/src/index.css
new file mode 100644
index 0000000..5eae8f1
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/index.css
@@ -0,0 +1,386 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--bg-surface-level-1);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    min-height: 100vh;
+  }
+
+  * {
+    outline-color: var(--brand-400);
+  }
+
+  :root {
+    /* gray */
+    --gray-25: #fcfcfc;
+    --gray-50: #fafafa;
+    --gray-100: #f4f4f5;
+    --gray-200: #e4e4e7;
+    --gray-300: #d1d1d6;
+    --gray-400: #a0a0ab;
+    --gray-500: #70707b;
+    --gray-600: #51525c;
+    --gray-700: #3f3f46;
+    --gray-800: #26272b;
+    --gray-900: #1a1a1e;
+    --gray-950: #131316;
+
+    /* neutral */
+    --neutral-25: #fafbfd;
+    --neutral-35: #f8fafc;
+    --neutral-50: #f5f8fb;
+    --neutral-100: #edf2f7;
+    --neutral-200: #e2e8f0;
+    --neutral-300: #cbd5e1;
+    --neutral-400: #94a3b8;
+    --neutral-500: #64748b;
+    --neutral-600: #475569;
+    --neutral-700: #334155;
+    --neutral-800: #1e293b;
+    --neutral-900: #0f172a;
+    --neutral-950: #080f1e;
+
+    --white: #ffffff;
+    --black: #000000;
+
+    /* brand */
+    --brand-10: #f2faff;
+    --brand-25: #e5f4ff;
+    --brand-50: #cce9ff;
+    --brand-75: #9dd2fc;
+    --brand-100: #5fbef8;
+    --brand-200: #008dff;
+    --brand-300: #0078f1;
+    --brand-400: #006ddd;
+    --brand-500: #1566b8;
+    --brand-600: #145095;
+    --brand-700: #0d3d77;
+    --brand-800: #0c336a;
+    --brand-900: #102656;
+    --brand-950: #101a30;
+
+    /* red */
+    --red-25: #fffbfa;
+    --red-50: #fef3f2;
+    --red-100: #fee4e2;
+    --red-200: #fecdca;
+    --red-300: #fda29b;
+    --red-400: #f97066;
+    --red-500: #f04438;
+    --red-600: #d92d20;
+    --red-700: #b42318;
+    --red-800: #912018;
+    --red-900: #7a271a;
+    --red-950: #55160c;
+
+    /* orange */
+    --orange-25: #fffcf5;
+    --orange-50: #fffaeb;
+    --orange-100: #fef0c7;
+    --orange-200: #fedf89;
+    --orange-300: #fec84b;
+    --orange-400: #fdb022;
+    --orange-500: #f79009;
+    --orange-600: #cd6002;
+    --orange-700: #ac5305;
+    --orange-800: #894101;
+    --orange-900: #6d3300;
+    --orange-950: #4c2400;
+
+    /* green */
+    --green-25: #f5fef9;
+    --green-50: #ecfdf3;
+    --green-100: #dcfae6;
+    --green-200: #acefc6;
+    --green-300: #75e0a7;
+    --green-400: #46cd89;
+    --green-500: #19b26b;
+    --green-600: #079455;
+    --green-700: #047647;
+    --green-800: #065d3a;
+    --green-900: #084d31;
+    --green-950: #053321;
+
+    /* acid */
+    --acid-10: #fafee8;
+    --acid-25: #f2fcc8;
+    --acid-50: #e3f797;
+    --acid-100: #cceb50;
+    --acid-200: #aecf1a;
+    --acid-300: #93b000;
+    --acid-400: #799200;
+    --acid-500: #607500;
+    --acid-600: #495a00;
+    --acid-700: #354200;
+    --acid-800: #232c00;
+    --acid-900: #141a00;
+    --acid-950: #0b1000;
+
+    /* purple */
+    --purple-10: #f9f7ff;
+    --purple-25: #f1ecff;
+    --purple-50: #e3d9ff;
+    --purple-100: #c5b4f0;
+    --purple-200: #a691df;
+    --purple-300: #8b71cc;
+    --purple-400: #7655b8;
+    --purple-500: #6244a0;
+    --purple-600: #4e3487;
+    --purple-700: #3b2560;
+    --purple-800: #291753;
+    --purple-900: #190d38;
+    --purple-950: #0f0822;
+
+    /* SEMANTIC TOKENS */
+
+    /* SURFACE */
+    --bg-surface-level-1: var(--white);
+    --bg-surface-level-1-hover: var(--neutral-25);
+    --bg-surface-level-2: var(--neutral-50);
+    --bg-surface-level-2-hover: var(--neutral-100);
+    --bg-surface-level-3: var(--neutral-100);
+    --bg-surface-level-4: var(--neutral-200);
+    --bg-disabled: var(--neutral-100);
+    --bg-elevated: var(--white);
+    --bg-elevated-hover: var(--neutral-25);
+    --bg-elevated-selected: var(--neutral-25);
+    --bg-overlay: rgba(0, 0, 0, 0.5);
+
+    /* BRAND */
+    --bg-brand: var(--brand-400);
+    --bg-brand-hover: var(--brand-500);
+    --bg-brand-subtle: var(--brand-25);
+    --bg-brand-subtle-hover: var(--brand-50);
+    --bg-brand-muted: var(--brand-10);
+    --bg-purple: var(--purple-50);
+
+    /* INTENT */
+    --bg-success: var(--green-50);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-strong: var(--green-600);
+    --bg-error: var(--red-50);
+    --bg-error-subtle: var(--red-100);
+    --bg-error-strong: var(--red-600);
+    --bg-warning: var(--orange-50);
+    --bg-warning-subtle: var(--orange-100);
+    --bg-warning-strong: var(--orange-600);
+
+    /* CONTROL */
+    --bg-control-active: var(--brand-300);
+    --bg-control-active-hover: var(--brand-400);
+    --bg-control-thumb: var(--white);
+    --bg-control-disabled: var(--neutral-200);
+    --text-control-active-foreground: var(--bg-control-thumb);
+
+    /* SELECTED */
+    --bg-selected: var(--brand-25);
+    --bg-selected-hover: var(--brand-50);
+
+    /* BORDER */
+    --border-default: var(--neutral-300);
+    --border-subtle: var(--neutral-200);
+    --border-muted: var(--neutral-100);
+    --border-faint: var(--neutral-50);
+    --border-strong: var(--neutral-600);
+    --border-disabled: var(--neutral-200);
+    --border-focus: var(--brand-400);
+    --border-error: var(--red-300);
+    --border-error-strong: var(--red-600);
+    --border-brand: var(--brand-400);
+    --border-brand-strong: var(--brand-600);
+    --border-brand-subtle: var(--brand-100);
+    --border-warning: var(--orange-300);
+    --border-success: var(--green-200);
+    --border-purple: var(--purple-200);
+
+    /* TEXT */
+    --text-primary: var(--neutral-900);
+    --text-secondary: var(--neutral-700);
+    --text-secondary-hover: var(--neutral-800);
+    --text-tertiary: var(--neutral-600);
+    --text-tertiary-hover: var(--neutral-700);
+    --text-quaternary: var(--neutral-500);
+    --text-disabled: var(--neutral-300);
+    --text-placeholder: var(--neutral-400);
+    --text-error-primary: var(--red-700);
+    --text-error-secondary: var(--red-600);
+    --text-error-tertiary: var(--red-500);
+    --text-warning-primary: var(--orange-700);
+    --text-warning-secondary: var(--orange-600);
+    --text-warning-tertiary: var(--orange-500);
+    --text-success-primary: var(--green-700);
+    --text-success-secondary: var(--green-600);
+    --text-success-tertiary: var(--green-500);
+    --text-brand-primary: var(--brand-700);
+    --text-brand-secondary: var(--brand-600);
+    --text-brand-tertiary: var(--brand-500);
+    --text-brand-disabled: var(--brand-75);
+    --text-brand-on-fill: var(--white);
+    --text-link: var(--brand-300);
+    --text-link-hover: var(--brand-200);
+
+    /* ICON */
+    --icon-primary: var(--neutral-900);
+    --icon-secondary: var(--neutral-700);
+    --icon-tertiary: var(--neutral-500);
+    --icon-disabled: var(--neutral-300);
+    --icon-brand: var(--brand-400);
+    --icon-error: var(--red-600);
+    --icon-success: var(--green-600);
+    --icon-warning: var(--orange-600);
+
+    /* SHADOW */
+    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 3px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* MOTION */
+    --duration-fast: 100ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 500ms;
+
+    /* DEPRECATED ALIASES */
+    --bg-primary: var(--bg-surface-level-1);
+    --bg-primary-hover: var(--bg-surface-level-1-hover);
+    --bg-secondary: var(--bg-surface-level-2);
+    --bg-secondary-hover: var(--bg-surface-level-2-hover);
+    --bg-tertiary: var(--bg-surface-level-3);
+    --bg-quaternary: var(--bg-surface-level-4);
+    --bg-brand-primary: var(--bg-brand);
+    --bg-brand-primary_hover: var(--bg-brand-hover);
+    --bg-brand-secondary: var(--bg-brand-subtle);
+    --bg-brand-secondary_hover: var(--bg-brand-subtle-hover);
+    --bg-brand-tertiary: var(--bg-brand-muted);
+    --bg-success-primary: var(--bg-success);
+    --bg-success-secondary: var(--bg-success-subtle);
+    --bg-error-primary: var(--bg-error);
+    --bg-error-secondary: var(--bg-error-subtle);
+    --bg-warning-primary: var(--bg-warning);
+    --bg-warning-secondary: var(--bg-warning-subtle);
+    --border-primary: var(--border-default);
+    --border-secondary: var(--border-subtle);
+    --border-tertiary: var(--border-muted);
+    --border-quaternary: var(--border-faint);
+    --text-button-primary: var(--white);
+  }
+
+  html.dark {
+    --gray-25: #131316;
+    --gray-50: #1a1a1e;
+    --gray-100: #26272b;
+    --gray-200: #3f3f46;
+    --gray-300: #51525c;
+    --gray-400: #70707b;
+    --gray-500: #a0a0ab;
+    --gray-600: #d1d1d6;
+    --gray-700: #e4e4e7;
+    --gray-800: #f4f4f5;
+    --gray-900: #fafafa;
+    --gray-950: #fcfcfc;
+
+    --neutral-25: #09090f;
+    --neutral-35: #0d0f18;
+    --neutral-50: #111521;
+    --neutral-100: #1b2030;
+    --neutral-200: #282e42;
+    --neutral-300: #393f55;
+    --neutral-400: #555d78;
+    --neutral-500: #8790ab;
+    --neutral-600: #cbd5e1;
+    --neutral-700: #e2e8f0;
+    --neutral-800: #edf2f7;
+    --neutral-900: #f5f8fb;
+    --neutral-950: #fafbfd;
+
+    --white: #131316;
+    --black: #ffffff;
+
+    --brand-10: #101a30;
+    --brand-25: #102656;
+    --brand-50: #0c336a;
+    --brand-75: #0c3871;
+    --brand-100: #0d3d77;
+    --brand-200: #145095;
+    --brand-300: #1566b8;
+    --brand-400: #006ddd;
+    --brand-500: #0078f1;
+    --brand-600: #008dff;
+    --brand-700: #5fbef8;
+    --brand-800: #cce9ff;
+    --brand-900: #e5f4ff;
+    --brand-950: #f2faff;
+
+    --red-25: #55160c;
+    --red-50: #7a271a;
+    --red-100: #912018;
+    --red-200: #b42318;
+    --red-300: #d92d20;
+    --red-400: #f04438;
+    --red-500: #f97066;
+    --red-600: #fda29b;
+    --red-700: #fecdca;
+    --red-800: #fee4e2;
+    --red-900: #fef3f2;
+    --red-950: #fffbfa;
+
+    --orange-25: #4c2400;
+    --orange-50: #6d3300;
+    --orange-100: #894101;
+    --orange-200: #ac5305;
+    --orange-300: #cd6002;
+    --orange-400: #f79009;
+    --orange-500: #fdb022;
+    --orange-600: #fec84b;
+    --orange-700: #fedf89;
+    --orange-800: #fef0c7;
+    --orange-900: #fffaeb;
+    --orange-950: #fffcf5;
+
+    --green-25: #053321;
+    --green-50: #084d31;
+    --green-100: #065d3a;
+    --green-200: #047647;
+    --green-300: #079455;
+    --green-400: #19b26b;
+    --green-500: #46cd89;
+    --green-600: #75e0a7;
+    --green-700: #acefc6;
+    --green-800: #dcfae6;
+    --green-900: #ecfdf3;
+    --green-950: #f5fef9;
+  }
+}
+
+@keyframes linear-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(800%);
+  }
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/lib/format.ts b/internal/cmd/templates/coding-agent-dashboard/src/lib/format.ts
new file mode 100644
index 0000000..200a807
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/lib/format.ts
@@ -0,0 +1,46 @@
+// Compact display formatters shared across panels.
+
+export function formatInt(n: number): string {
+  return Math.round(n).toLocaleString('en-US');
+}
+
+export function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
+  return formatInt(n);
+}
+
+export function formatCost(n: number): string {
+  if (!n) return '$0';
+  if (n < 0.01) return `$${n.toFixed(4)}`;
+  if (n < 1) return `$${n.toFixed(3)}`;
+  return `$${n.toFixed(2)}`;
+}
+
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const m = Math.floor(ms / 60_000);
+  const s = Math.round((ms % 60_000) / 1000);
+  return `${m}m ${s}s`;
+}
+
+export function formatPct(n: number): string {
+  return `${Math.round(n)}%`;
+}
+
+// "5m ago" / "3h ago" / "2d ago" for the recent-runs table; falls back to a
+// locale date once it's further back than a week.
+export function formatRelativeTime(iso: string): string {
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return '—';
+  const diffMs = Date.now() - t;
+  const minutes = Math.floor(diffMs / 60_000);
+  if (minutes < 1) return 'just now';
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return new Date(t).toLocaleDateString();
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/lib/normalize.ts b/internal/cmd/templates/coding-agent-dashboard/src/lib/normalize.ts
new file mode 100644
index 0000000..7bf1bb5
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/lib/normalize.ts
@@ -0,0 +1,26 @@
+import type { Run } from '../types';
+
+// Custom metadata read helpers for the recent-runs table. Field names vary
+// across integrations, so the entity accessors fall back through the known
+// aliases (see AGENTS.md).
+function str(run: Run, key: string): string | undefined {
+  const v = run.extra?.metadata?.[key];
+  return typeof v === 'string' && v ? v : undefined;
+}
+
+export const UNKNOWN = 'unknown';
+
+export function repoOf(run: Run): string {
+  return str(run, 'repository_name') ?? UNKNOWN;
+}
+
+export function threadOf(run: Run): string | undefined {
+  return str(run, 'thread_id');
+}
+
+export function durationMs(run: Run): number | null {
+  if (!run.start_time || !run.end_time) return null;
+  const s = Date.parse(run.start_time);
+  const e = Date.parse(run.end_time);
+  return Number.isFinite(s) && Number.isFinite(e) && e >= s ? e - s : null;
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/types.ts b/internal/cmd/templates/coding-agent-dashboard/src/types.ts
new file mode 100644
index 0000000..6d220db
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/types.ts
@@ -0,0 +1,57 @@
+export interface Project {
+  id: string;
+  name: string;
+}
+
+// Fields selected from POST /api/v1/runs/query for the recent-runs table.
+// Custom metadata lives at extra.metadata; token/cost totals roll up onto
+// root runs.
+export interface Run {
+  id: string;
+  name: string | null;
+  error: string | null;
+  start_time: string | null;
+  end_time: string | null;
+  total_tokens: number | null;
+  total_cost: number | null;
+  extra: { metadata?: Record<string, unknown> } | null;
+}
+
+export interface RunsQueryResponse {
+  runs: Run[];
+  cursor?: string | null;
+}
+
+// Field names mirror `schemas.RunStats` in smith-backend/app/schemas.py.
+// Every field is optional/nullable there too, so a stat this app didn't ask
+// for (or one the backend didn't compute) is simply absent, not zero.
+export interface RunStats {
+  run_count?: number | null;
+  error_rate?: number | null;
+  latency_p50?: number | null;
+  latency_p99?: number | null;
+  latency_avg?: number | null;
+  total_tokens?: number | null;
+  prompt_tokens?: number | null;
+  completion_tokens?: number | null;
+  total_cost?: number | null;
+  prompt_cost?: number | null;
+  completion_cost?: number | null;
+}
+
+// `schemas.RunGroupStats` = RunStats + group_count (distinct thread count),
+// returned by POST /api/v1/runs/group/stats with group_by="conversation".
+export interface RunGroupStats extends RunStats {
+  group_count?: number | null;
+}
+
+export type StatsScope = 'turns' | 'threads';
+
+// The two stats calls this dashboard makes, each independently retryable —
+// one scope failing (e.g. still rate-limited) shouldn't blank the other's
+// numbers. See fetchProjectStats.
+export interface ProjectStats {
+  turns: RunStats | null;
+  threads: RunGroupStats | null;
+  failedScopes: StatsScope[];
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/src/vite-env.d.ts b/internal/cmd/templates/coding-agent-dashboard/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/internal/cmd/templates/coding-agent-dashboard/tailwind.config.js b/internal/cmd/templates/coding-agent-dashboard/tailwind.config.js
new file mode 100644
index 0000000..623e1a9
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/tailwind.config.js
@@ -0,0 +1,128 @@
+const withAlpha = (cssVar) => ({ opacityValue }) =>
+  opacityValue !== undefined
+    ? `color-mix(in srgb, ${cssVar} calc(${opacityValue} * 100%), transparent)`
+    : cssVar;
+
+const spaceScale = {
+  'space-1': '0.25rem',
+  'space-2': '0.5rem',
+  'space-3': '0.75rem',
+  'space-4': '1rem',
+  'space-5': '1.25rem',
+  'space-6': '1.5rem',
+  'space-7': '2rem',
+  'space-8': '2.5rem',
+  'space-9': '4rem',
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      backgroundColor: {
+        // Surfaces
+        'surface-level-1': withAlpha('var(--bg-surface-level-1)'),
+        'surface-level-2': withAlpha('var(--bg-surface-level-2)'),
+        'surface-level-3': withAlpha('var(--bg-surface-level-3)'),
+        'surface-level-4': withAlpha('var(--bg-surface-level-4)'),
+        'elevated': withAlpha('var(--bg-elevated)'),
+        'elevated-hover': withAlpha('var(--bg-elevated-hover)'),
+        'disabled': withAlpha('var(--bg-disabled)'),
+        // Brand
+        'brand': withAlpha('var(--bg-brand)'),
+        'brand-hover': withAlpha('var(--bg-brand-hover)'),
+        'brand-subtle': withAlpha('var(--bg-brand-subtle)'),
+        'brand-subtle-hover': withAlpha('var(--bg-brand-subtle-hover)'),
+        'brand-muted': withAlpha('var(--bg-brand-muted)'),
+        // Intent
+        'success': withAlpha('var(--bg-success)'),
+        'success-subtle': withAlpha('var(--bg-success-subtle)'),
+        'success-strong': withAlpha('var(--bg-success-strong)'),
+        'error': withAlpha('var(--bg-error)'),
+        'error-subtle': withAlpha('var(--bg-error-subtle)'),
+        'error-strong': withAlpha('var(--bg-error-strong)'),
+        'warning': withAlpha('var(--bg-warning)'),
+        'warning-subtle': withAlpha('var(--bg-warning-subtle)'),
+        'warning-strong': withAlpha('var(--bg-warning-strong)'),
+        // Controls
+        'control-active': withAlpha('var(--bg-control-active)'),
+        'control-thumb': withAlpha('var(--bg-control-thumb)'),
+        'control-disabled': withAlpha('var(--bg-control-disabled)'),
+        // Selected
+        'selected': withAlpha('var(--bg-selected)'),
+        'selected-hover': withAlpha('var(--bg-selected-hover)'),
+        // Deprecated aliases (for compatibility with existing classes)
+        'primary': withAlpha('var(--bg-surface-level-1)'),
+        'secondary': withAlpha('var(--bg-surface-level-2)'),
+        'tertiary': withAlpha('var(--bg-surface-level-3)'),
+        'quaternary': withAlpha('var(--bg-surface-level-4)'),
+      },
+      borderColor: {
+        'default': withAlpha('var(--border-default)'),
+        'subtle': withAlpha('var(--border-subtle)'),
+        'muted': withAlpha('var(--border-muted)'),
+        'faint': withAlpha('var(--border-faint)'),
+        'strong': withAlpha('var(--border-strong)'),
+        'disabled': withAlpha('var(--border-disabled)'),
+        'focus': withAlpha('var(--border-focus)'),
+        'error': withAlpha('var(--border-error)'),
+        'error-strong': withAlpha('var(--border-error-strong)'),
+        'brand': withAlpha('var(--border-brand)'),
+        'brand-strong': withAlpha('var(--border-brand-strong)'),
+        'brand-subtle': withAlpha('var(--border-brand-subtle)'),
+        'warning': withAlpha('var(--border-warning)'),
+        'success': withAlpha('var(--border-success)'),
+        // Deprecated aliases
+        'primary': withAlpha('var(--border-default)'),
+        'secondary': withAlpha('var(--border-subtle)'),
+        'tertiary': withAlpha('var(--border-muted)'),
+        'quaternary': withAlpha('var(--border-faint)'),
+      },
+      textColor: {
+        'primary': withAlpha('var(--text-primary)'),
+        'secondary': withAlpha('var(--text-secondary)'),
+        'tertiary': withAlpha('var(--text-tertiary)'),
+        'quaternary': withAlpha('var(--text-quaternary)'),
+        'disabled': withAlpha('var(--text-disabled)'),
+        'placeholder': withAlpha('var(--text-placeholder)'),
+        'error-primary': withAlpha('var(--text-error-primary)'),
+        'error-secondary': withAlpha('var(--text-error-secondary)'),
+        'warning-primary': withAlpha('var(--text-warning-primary)'),
+        'success-primary': withAlpha('var(--text-success-primary)'),
+        'brand-primary': withAlpha('var(--text-brand-primary)'),
+        'brand-secondary': withAlpha('var(--text-brand-secondary)'),
+        'brand-on-fill': withAlpha('var(--text-brand-on-fill)'),
+        'link': withAlpha('var(--text-link)'),
+        'link-hover': withAlpha('var(--text-link-hover)'),
+        'icon-primary': withAlpha('var(--icon-primary)'),
+        'icon-secondary': withAlpha('var(--icon-secondary)'),
+        'icon-tertiary': withAlpha('var(--icon-tertiary)'),
+        'icon-disabled': withAlpha('var(--icon-disabled)'),
+        'icon-brand': withAlpha('var(--icon-brand)'),
+        'icon-error': withAlpha('var(--icon-error)'),
+        'icon-success': withAlpha('var(--icon-success)'),
+        'icon-warning': withAlpha('var(--icon-warning)'),
+      },
+      borderRadius: {
+        'xs': 'var(--radius-xs)',
+        'sm': 'var(--radius-sm)',
+        'md': 'var(--radius-md)',
+        'lg': 'var(--radius-lg)',
+        'xl': 'var(--radius-xl)',
+        'full': 'var(--radius-full)',
+      },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+      },
+      gap: spaceScale,
+      padding: spaceScale,
+      margin: spaceScale,
+      space: spaceScale,
+    },
+  },
+  plugins: [],
+};
diff --git a/internal/cmd/templates/coding-agent-dashboard/tsconfig.json b/internal/cmd/templates/coding-agent-dashboard/tsconfig.json
new file mode 100644
index 0000000..a4c834a
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/internal/cmd/templates/coding-agent-dashboard/vite.config.ts b/internal/cmd/templates/coding-agent-dashboard/vite.config.ts
new file mode 100644
index 0000000..977c289
--- /dev/null
+++ b/internal/cmd/templates/coding-agent-dashboard/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// Library-mode build: the sandbox this app runs in evaluates a single
+// dependency-free CJS file exporting { render(data, root, metadata) } — not a
+// self-mounting SPA. See src/entry.tsx and AGENTS.md.
+export default defineConfig({
+  plugins: [react()],
+  // Unlike Vite's normal app-mode build, library mode does NOT replace
+  // process.env.NODE_ENV on its own — React/ReactDOM's bundled source still
+  // references it internally. There's no `process` global in the sandboxed
+  // iframe (or any browser), so without this the bundle throws
+  // "ReferenceError: process is not defined" the moment it's required.
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: 'src/entry.tsx',
+      formats: ['cjs'],
+      fileName: () => 'bundle.js',
+    },
+  },
+});
diff --git a/internal/cmd/templates/experiment-comparison/.gitignore b/internal/cmd/templates/experiment-comparison/.gitignore
new file mode 100644
index 0000000..b947077
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+dist/
diff --git a/internal/cmd/templates/experiment-comparison/README.md b/internal/cmd/templates/experiment-comparison/README.md
new file mode 100644
index 0000000..05a1c3b
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/README.md
@@ -0,0 +1,73 @@
+# {{.Name}}
+
+{{.Description}}
+
+A LangSmith custom app, scaffolded by `langsmith apps init --template
+experiment-comparison`. Pick a dataset, a baseline experiment, and one or more
+comparisons; it shows per-experiment aggregates and a per-example table, with
+comparison cells colored green/red vs the baseline — for latency, cost, and
+tokens too, not just feedback scores. **Read `AGENTS.md` first** — it documents
+the LangSmith API surface this app can call.
+
+## What this is
+
+A custom app is a small React/TS UI rendered inside LangSmith in a
+locked-down sandbox (`sandbox="allow-scripts"`, no `allow-same-origin`). It
+never gets direct network access or a real credential — everything goes
+through a `postMessage` bridge to the host page (`window.langsmith.call`),
+which proxies to the real LangSmith API under the viewer's own session (or
+your local `LANGSMITH_API_KEY` when running `langsmith apps dev`).
+
+Since the sandbox has no bundler or npm access at runtime, this app is built
+with Vite in **library mode**: `npm run build` bundles everything (React
+included) into a single dependency-free file (`dist/bundle.js`) before it's
+pushed. Use npm dependencies freely — they all get inlined at build time.
+
+## Develop
+
+`langsmith apps init` already ran `npm install` and `npm run build` for you,
+so `dist/bundle.js` exists and `langsmith apps dev` works immediately:
+
+```bash
+langsmith apps dev
+```
+
+`apps dev` runs the app inside a real sandboxed iframe, identical
+restrictions to production, and automatically starts `npm run watch` for
+you (it detects the script in `package.json`) — edit `src/App.tsx`, save,
+and the preview reloads on its own. Pass `--no-watch` if you'd rather drive
+the build yourself. Pick a dataset and experiments from the in-app dropdowns
+once they load (it calls the real API using your local `LANGSMITH_API_KEY`).
+
+## The bridge contract
+
+`src/entry.tsx` exports a `render(data, root, metadata)` function that the
+host calls once on load and again whenever `data` or `metadata` changes —
+`data` is always `{}` (apps fetch whatever they need themselves).
+`metadata.mode` is `"dark"` or
+`"light"`; the sandbox sets `html.dark` from it, so this token-based UI themes
+automatically (branch on `metadata.mode` only if you use inline styles).
+`src/App.tsx` is the actual UI; edit it freely, it's just a React component.
+
+`window.langsmith`, injected by the host page, gives you:
+
+- `window.langsmith.call(operation, args)` — `operation` is a
+  `"<METHOD> <path>"` string (e.g. `"GET /api/v1/sessions"`), forwarded
+  as-is to the real LangSmith API. Not a curated allowlist — see
+  `AGENTS.md` for the available surface. Returns a Promise.
+- `window.langsmith.setData(patch)` — push a data mutation out for the host
+  to persist.
+- `window.langsmith.feedback.create(args)` — sugar over
+  `call('POST /api/v1/feedback', {body: args})`.
+
+## Deploy
+
+```bash
+npm run build
+langsmith apps push
+```
+
+The first `push` creates the app and writes `.langsmith/app.json` (the
+app's ID) into this directory — commit it so teammates' pushes update the
+same app instead of creating a new one. Every push after that updates it in
+place.
diff --git a/internal/cmd/templates/experiment-comparison/package.json b/internal/cmd/templates/experiment-comparison/package.json
new file mode 100644
index 0000000..e07cf8d
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "{{.Name}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "watch": "vite build --watch"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}
diff --git a/internal/cmd/templates/experiment-comparison/postcss.config.js b/internal/cmd/templates/experiment-comparison/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/App.tsx b/internal/cmd/templates/experiment-comparison/src/App.tsx
new file mode 100644
index 0000000..79a3645
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/App.tsx
@@ -0,0 +1,335 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Pickers } from './components/Pickers';
+import { SummaryPanel } from './components/SummaryPanel';
+import { ExampleTable } from './components/ExampleTable';
+import { Scoreboard } from './components/Scoreboard';
+import { Scorecard } from './components/Scorecard';
+import { DeltaHistogram } from './components/DeltaHistogram';
+import { ScatterPlot } from './components/ScatterPlot';
+import { Section } from './components/primitives';
+import { Spinner } from './components/Spinner';
+import { fetchComparison, fetchExperiments, fetchFeedbackConfigs } from './api';
+import { costOf, latencyMs, scoreFor } from './lib/delta';
+import { buildMetrics, comparisonColor, letterFor } from './lib/metrics';
+import { cn } from './lib/utils';
+import type { Aggregate, ExampleWithRuns, ExperimentView, Experiment } from './types';
+
+const EXAMPLE_LIMIT = 25;
+
+function mean(values: number[]): number | null {
+  return values.length ? values.reduce((a, b) => a + b, 0) / values.length : null;
+}
+
+export function App(_props: { data: unknown; metadata?: RenderMetadata }) {
+  const [datasetId, setDatasetId] = useState('');
+
+  // The full list (not just what's paginated into the dataset/baseline
+  // pickers) — needed to look experiments up by id for the Compare
+  // checkboxes and the ordered/colored experiment views below.
+  const [experiments, setExperiments] = useState<Experiment[]>([]);
+  const [experimentsLoading, setExperimentsLoading] = useState(false);
+  const [baselineId, setBaselineId] = useState('');
+  const [comparisonIds, setComparisonIds] = useState<string[]>([]);
+
+  const [examples, setExamples] = useState<ExampleWithRuns[]>([]);
+  const [examplesLoading, setExamplesLoading] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [lowerIsBetter, setLowerIsBetter] = useState<Record<string, boolean>>({});
+  const [metricId, setMetricId] = useState('');
+
+  // Reset downstream selections and load this dataset's experiments.
+  useEffect(() => {
+    setExperiments([]);
+    setBaselineId('');
+    setComparisonIds([]);
+    setExamples([]);
+    if (!datasetId) return;
+    setExperimentsLoading(true);
+    fetchExperiments(datasetId)
+      .then((xs) => setExperiments(xs ?? []))
+      .catch((e) => console.error('Failed to load experiments', e))
+      .finally(() => setExperimentsLoading(false));
+  }, [datasetId]);
+
+  const selectedIds = useMemo(
+    () => (baselineId ? [baselineId, ...comparisonIds] : []),
+    [baselineId, comparisonIds]
+  );
+
+  // Fetch the per-example comparison whenever the selection changes. The
+  // previous render is kept on screen (dimmed via examplesLoading) instead of
+  // being cleared up front, so re-picking a comparison doesn't flash back to
+  // a bare loading message.
+  useEffect(() => {
+    setFailed(false);
+    if (!datasetId || !baselineId) {
+      setExamples([]);
+      return;
+    }
+    setExamplesLoading(true);
+    fetchComparison(datasetId, selectedIds, EXAMPLE_LIMIT)
+      .then((rows) => setExamples(rows ?? []))
+      .catch((e) => {
+        console.error('Failed to load comparison', e);
+        setFailed(true);
+        setExamples([]);
+      })
+      .finally(() => setExamplesLoading(false));
+  }, [datasetId, baselineId, selectedIds.join(',')]);
+
+  // Feedback keys present across all runs, and their score direction.
+  const feedbackKeys = useMemo(() => {
+    const keys = new Set<string>();
+    for (const ex of examples) {
+      for (const run of ex.runs) {
+        for (const k of Object.keys(run.feedback_stats ?? {})) keys.add(k);
+      }
+    }
+    return [...keys].sort();
+  }, [examples]);
+
+  useEffect(() => {
+    if (feedbackKeys.length === 0) {
+      setLowerIsBetter({});
+      return;
+    }
+    fetchFeedbackConfigs(feedbackKeys)
+      .then((configs) => {
+        const map: Record<string, boolean> = {};
+        for (const c of configs) map[c.feedback_key] = c.is_lower_score_better === true;
+        setLowerIsBetter(map);
+      })
+      .catch((e) => console.error('Failed to load feedback configs', e));
+  }, [feedbackKeys.join(',')]);
+
+  const orderedExperiments = useMemo(
+    () => selectedIds.map((id) => experiments.find((x) => x.id === id)).filter(Boolean) as Experiment[],
+    [selectedIds, experiments]
+  );
+
+  // Ordered experiments with a display letter and series color (baseline first).
+  const expViews = useMemo<ExperimentView[]>(
+    () =>
+      orderedExperiments.map((x, i) => ({
+        id: x.id,
+        name: x.name,
+        letter: letterFor(i),
+        isBaseline: i === 0,
+        color: i === 0 ? 'var(--text-tertiary)' : comparisonColor(i - 1),
+      })),
+    [orderedExperiments]
+  );
+
+  const metrics = useMemo(() => buildMetrics(feedbackKeys, lowerIsBetter), [feedbackKeys, lowerIsBetter]);
+
+  // Keep the shared metric selection valid as feedback keys load.
+  useEffect(() => {
+    setMetricId((prev) => (metrics.some((m) => m.id === prev) ? prev : (metrics[0]?.id ?? '')));
+  }, [metrics]);
+
+  const selectedMetric = useMemo(
+    () => metrics.find((m) => m.id === metricId) ?? metrics[0],
+    [metrics, metricId]
+  );
+
+  // Per-experiment aggregates derived over the fetched examples.
+  const aggregates = useMemo(() => {
+    const out: Record<string, Aggregate> = {};
+    for (const id of selectedIds) {
+      const runs = examples.map((ex) => ex.runs.find((r) => r.session_id === id));
+      const latencies = runs.map(latencyMs).filter((v): v is number => v != null);
+      const costs = runs.map(costOf).filter((v): v is number => v != null);
+      const tokens = runs
+        .map((r) => (typeof r?.total_tokens === 'number' ? r.total_tokens : null))
+        .filter((v): v is number => v != null);
+      const avgScores: Record<string, number> = {};
+      for (const key of feedbackKeys) {
+        const scores = runs.map((r) => scoreFor(r, key)).filter((v): v is number => v != null);
+        const m = mean(scores);
+        if (m != null) avgScores[key] = m;
+      }
+      out[id] = {
+        experimentId: id,
+        runCount: runs.filter(Boolean).length,
+        avgLatencyMs: mean(latencies),
+        totalCost: costs.length ? costs.reduce((a, b) => a + b, 0) : null,
+        avgTokens: mean(tokens),
+        avgScores,
+      };
+    }
+    return out;
+  }, [examples, selectedIds, feedbackKeys]);
+
+  return (
+    <div className="flex min-h-screen flex-col bg-surface-level-1">
+      <Pickers
+        datasetId={datasetId}
+        onDataset={setDatasetId}
+        experiments={experiments}
+        experimentsLoading={experimentsLoading}
+        baselineId={baselineId}
+        onBaseline={setBaselineId}
+        comparisonIds={comparisonIds}
+        onToggleComparison={(id) =>
+          setComparisonIds((prev) =>
+            prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+          )
+        }
+      />
+      <div className="flex-1 p-6">{renderBody()}</div>
+    </div>
+  );
+
+  function renderBody() {
+    if (!datasetId) {
+      return (
+        <GuideState step={1} heading="Pick a dataset to get started" subtext="Every experiment you compare has to run against this dataset." />
+      );
+    }
+    if (experimentsLoading && experiments.length === 0) {
+      return <GuideState spinner heading="Loading experiments…" />;
+    }
+    if (experiments.length === 0) {
+      return (
+        <GuideState
+          step={2}
+          heading="This dataset doesn't have any experiments yet"
+          subtext="Run an evaluation against it, then come back here to compare results."
+        />
+      );
+    }
+    if (!baselineId) {
+      return (
+        <GuideState step={2} heading="Choose a baseline experiment" subtext="Every other experiment gets compared against this one." />
+      );
+    }
+    if (comparisonIds.length === 0) {
+      return (
+        <GuideState
+          step={3}
+          heading="Pick one or more experiments to compare"
+          subtext="Check any experiment above to see how it stacks up against the baseline."
+        />
+      );
+    }
+    if (examples.length === 0 && examplesLoading) {
+      return <GuideState spinner heading="Loading comparison…" />;
+    }
+    if (failed) {
+      return <GuideState tone="error" heading="Couldn't load this comparison" subtext="Check the console and your access to this dataset." />;
+    }
+    if (examples.length === 0) {
+      const comparedNames = expViews.slice(1).map((x) => x.name).join(', ') || 'the selected comparison';
+      return (
+        <GuideState
+          heading="No shared examples for this selection"
+          subtext={`${expViews[0]?.name ?? 'The baseline'} and ${comparedNames} don't have any traced examples in common here. Try a different baseline or comparison above.`}
+        />
+      );
+    }
+
+    const capped = examples.length >= EXAMPLE_LIMIT;
+
+    return (
+      <div
+        className={cn(
+          'mx-auto flex max-w-6xl flex-col gap-8 motion-safe:transition-opacity motion-safe:duration-normal',
+          examplesLoading && 'pointer-events-none opacity-50'
+        )}
+      >
+        <Section
+          title="Summary"
+          note="Comparison bars are colored vs the baseline: lower latency/cost/tokens is better; feedback honors is_lower_score_better."
+        >
+          <SummaryPanel experiments={expViews} aggregates={aggregates} metrics={metrics} />
+        </Section>
+
+        {selectedMetric && (
+          <>
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <h2 className="text-base font-semibold text-primary">Focus metric</h2>
+              {metricSelect()}
+            </div>
+
+            <Section title="Scoreboard" note={`${selectedMetric.label} for each experiment, vs the baseline.`}>
+              <Scoreboard experiments={expViews} aggregates={aggregates} metric={selectedMetric} />
+            </Section>
+
+            <Section title="Regression scorecard" note="Per comparison, the share of examples that beat, tied, or lost to the baseline — across every metric.">
+              <Scorecard examples={examples} experiments={expViews} metrics={metrics} />
+            </Section>
+
+            <Section title="Delta distribution" note={`How ${selectedMetric.label} shifted per example — green bars are wins, red bars are regressions.`}>
+              <DeltaHistogram examples={examples} experiments={expViews} metric={selectedMetric} />
+            </Section>
+
+            <Section title="Baseline vs comparison" note="Each point is one example; the dashed line is parity.">
+              <ScatterPlot examples={examples} experiments={expViews} metric={selectedMetric} />
+            </Section>
+          </>
+        )}
+
+        <Section title="Per-example" note={capped ? `Showing first ${EXAMPLE_LIMIT} examples.` : undefined}>
+          <ExampleTable examples={examples} experiments={expViews} metric={selectedMetric} />
+        </Section>
+      </div>
+    );
+  }
+
+  function metricSelect() {
+    return (
+      <label className="flex items-center gap-2 text-xs text-tertiary">
+        Metric
+        <select
+          value={metricId}
+          onChange={(e) => setMetricId(e.target.value)}
+          className="rounded-md border border-secondary bg-primary px-2 py-1 text-xs text-primary focus:border-brand focus:outline-none"
+        >
+          {metrics.map((m) => (
+            <option key={m.id} value={m.id}>
+              {m.label}
+            </option>
+          ))}
+        </select>
+      </label>
+    );
+  }
+}
+
+// The empty/blocked state for every step of the guide above — echoes the
+// same numbered-badge language as the Pickers stepper, so "you're on step 2"
+// reads the same whether the reason is up top or down here.
+function GuideState({
+  step,
+  heading,
+  subtext,
+  spinner,
+  tone,
+}: {
+  step?: number;
+  heading: string;
+  subtext?: string;
+  spinner?: boolean;
+  tone?: 'error';
+}) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center gap-3 py-24 text-center">
+      {spinner ? (
+        <Spinner size="md" />
+      ) : step != null ? (
+        <span
+          className={cn(
+            'flex size-10 items-center justify-center rounded-full border-2 text-base font-semibold',
+            tone === 'error' ? 'border-error text-error-primary' : 'border-brand text-brand-primary'
+          )}
+        >
+          {step}
+        </span>
+      ) : null}
+      <div className="flex flex-col gap-1">
+        <span className={cn('text-base font-semibold', tone === 'error' ? 'text-error-primary' : 'text-primary')}>{heading}</span>
+        {subtext && <span className="max-w-md text-sm text-tertiary">{subtext}</span>}
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/api.ts b/internal/cmd/templates/experiment-comparison/src/api.ts
new file mode 100644
index 0000000..d8da989
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/api.ts
@@ -0,0 +1,54 @@
+// All access goes through window.langsmith.call (the sandbox has no network).
+// See AGENTS.md for the operations and shapes.
+import type { Dataset, ExampleWithRuns, Experiment, FeedbackConfigSchema } from './types';
+
+export async function fetchDatasets(
+  search = '',
+  offset = 0,
+  limit = 100
+): Promise<Dataset[]> {
+  const params: Record<string, string> = { limit: String(limit), offset: String(offset) };
+  if (search) params.name_contains = search;
+  return window.langsmith.call('GET /api/v1/datasets', {
+    params,
+  }) as Promise<Dataset[]>;
+}
+
+// Experiments are the sessions whose reference_dataset is this dataset.
+export async function fetchExperiments(
+  datasetId: string,
+  search = '',
+  offset = 0,
+  limit = 100
+): Promise<Experiment[]> {
+  const params: Record<string, string | string[]> = {
+    reference_dataset: [datasetId],
+    reference_free: 'false',
+    limit: String(limit),
+    offset: String(offset),
+  };
+  if (search) params.name_contains = search;
+  return window.langsmith.call('GET /api/v1/sessions', {
+    params,
+  }) as Promise<Experiment[]>;
+}
+
+// Per-example rows joined server-side across the given experiments. Each
+// example carries one run per session_id (see ExampleWithRuns).
+export async function fetchComparison(
+  datasetId: string,
+  sessionIds: string[],
+  limit = 25
+): Promise<ExampleWithRuns[]> {
+  return window.langsmith.call(`POST /api/v1/datasets/${datasetId}/runs`, {
+    body: { session_ids: sessionIds, limit, offset: 0 },
+  }) as Promise<ExampleWithRuns[]>;
+}
+
+// is_lower_score_better per feedback key, so score deltas honor direction.
+export async function fetchFeedbackConfigs(keys: string[]): Promise<FeedbackConfigSchema[]> {
+  if (keys.length === 0) return [];
+  return window.langsmith.call('GET /api/v1/feedback-configs', {
+    params: { key: keys },
+  }) as Promise<FeedbackConfigSchema[]>;
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/DeltaHistogram.tsx b/internal/cmd/templates/experiment-comparison/src/components/DeltaHistogram.tsx
new file mode 100644
index 0000000..1ade789
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/DeltaHistogram.tsx
@@ -0,0 +1,142 @@
+import { useMemo, useState } from 'react';
+import type { ExampleWithRuns, ExperimentView } from '../types';
+import { histogram, SERIES_CAP, type HistogramBin, type RunMetric } from '../lib/metrics';
+import { improvementDelta } from '../lib/delta';
+import { Empty } from './primitives';
+
+interface Props {
+  examples: ExampleWithRuns[];
+  experiments: ExperimentView[]; // baseline first, then comparisons
+  metric: RunMetric;
+}
+
+const W = 260;
+const H = 150;
+const M = { top: 12, right: 8, bottom: 22, left: 8 };
+const PW = W - M.left - M.right;
+const PH = H - M.top - M.bottom;
+const GAP = 2;
+
+// Per comparison, a distribution of per-example improvement over the
+// baseline for the selected metric — positive (green) bars are wins,
+// negative (red) bars are regressions, so the shape of the win/loss spread
+// is visible at a glance, not just its average.
+export function DeltaHistogram({ examples, experiments, metric }: Props) {
+  const baseline = experiments[0];
+  const shown = experiments.slice(1, 1 + SERIES_CAP);
+  const hidden = experiments.length - 1 - shown.length;
+  if (!baseline) return null;
+  if (shown.length === 0) return <Empty label="Pick a comparison experiment to see its delta distribution." />;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {shown.map((exp) => (
+          <ComparisonHistogram key={exp.id} examples={examples} baselineId={baseline.id} comparison={exp} metric={metric} />
+        ))}
+      </div>
+      {hidden > 0 && (
+        <p className="text-xs text-tertiary">+{hidden} more comparison{hidden > 1 ? 's' : ''} not plotted.</p>
+      )}
+    </div>
+  );
+}
+
+function ComparisonHistogram({
+  examples,
+  baselineId,
+  comparison,
+  metric,
+}: {
+  examples: ExampleWithRuns[];
+  baselineId: string;
+  comparison: ExperimentView;
+  metric: RunMetric;
+}) {
+  const [hover, setHover] = useState<number | null>(null);
+
+  const bins = useMemo(() => {
+    const deltas: number[] = [];
+    for (const ex of examples) {
+      const base = metric.value(ex.runs.find((r) => r.session_id === baselineId));
+      const val = metric.value(ex.runs.find((r) => r.session_id === comparison.id));
+      const d = improvementDelta(base, val, metric.lowerIsBetter);
+      if (d != null) deltas.push(d);
+    }
+    return histogram(deltas, 9);
+  }, [examples, baselineId, comparison.id, metric]);
+
+  const maxCount = bins.reduce((m, b) => Math.max(m, b.count), 0);
+
+  return (
+    <div className="rounded-lg border border-subtle p-3">
+      <div className="mb-1 flex items-center gap-1.5 text-sm font-medium text-primary">
+        <span className="h-2.5 w-2.5 shrink-0 rounded-[2px]" style={{ backgroundColor: comparison.color }} />
+        <span className="truncate" title={comparison.name}>{comparison.name}</span>
+      </div>
+      {maxCount === 0 ? (
+        <Empty label="No paired values." />
+      ) : (
+        <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img" aria-label={`Delta distribution for ${comparison.name}`}>
+          <line x1={M.left} x2={M.left + PW} y1={M.top + PH} y2={M.top + PH} stroke="var(--border-subtle)" strokeWidth={1} />
+          {bins.map((b, i) => (
+            <HistogramBar key={i} bin={b} index={i} maxCount={maxCount} hovered={hover === i} onHover={setHover} format={metric.format} />
+          ))}
+          <ZeroLine bins={bins} />
+        </svg>
+      )}
+    </div>
+  );
+}
+
+function HistogramBar({
+  bin,
+  index,
+  maxCount,
+  hovered,
+  onHover,
+  format,
+}: {
+  bin: HistogramBin;
+  index: number;
+  maxCount: number;
+  hovered: boolean;
+  onHover: (i: number | null) => void;
+  format: (v: number | null) => string;
+}) {
+  const slot = PW / 9;
+  const x = M.left + index * slot;
+  const barW = Math.max(slot - GAP, 1);
+  const barH = (bin.count / maxCount) * PH;
+  const y = M.top + PH - barH;
+  const mid = (bin.lo + bin.hi) / 2;
+  const color = mid > 0 ? 'var(--bg-success-strong)' : mid < 0 ? 'var(--bg-error-strong)' : 'var(--border-strong)';
+
+  return (
+    <g onMouseEnter={() => onHover(index)} onMouseLeave={() => onHover(null)} className="cursor-pointer">
+      {/* transparent full-height hit area so hovering a short bar is as easy as a tall one */}
+      <rect x={x} y={M.top} width={barW} height={PH} fill="transparent" />
+      <rect x={x} y={y} width={barW} height={Math.max(barH, bin.count > 0 ? 2 : 0)} rx={2} fill={color} opacity={hovered ? 1 : 0.85}>
+        <title>{`${format(bin.lo)} to ${format(bin.hi)}: ${bin.count} example${bin.count === 1 ? '' : 's'}`}</title>
+      </rect>
+      {bin.count > 0 && (
+        <text x={x + barW / 2} y={y - 3} textAnchor="middle" className="fill-current text-tertiary" style={{ fontSize: 9 }}>
+          {bin.count}
+        </text>
+      )}
+    </g>
+  );
+}
+
+// Dashed reference line at delta = 0, when the observed range straddles it —
+// a threshold, not a gridline, so dashing is the right signal here.
+function ZeroLine({ bins }: { bins: HistogramBin[] }) {
+  if (bins.length === 0) return null;
+  const lo = bins[0].lo;
+  const hi = bins[bins.length - 1].hi;
+  if (lo > 0 || hi < 0) return null;
+  const x = M.left + ((0 - lo) / (hi - lo)) * PW;
+  return (
+    <line x1={x} x2={x} y1={M.top} y2={M.top + PH} stroke="var(--text-tertiary)" strokeDasharray="3 3" opacity={0.6} />
+  );
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/ExampleTable.tsx b/internal/cmd/templates/experiment-comparison/src/components/ExampleTable.tsx
new file mode 100644
index 0000000..ef10c5f
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/ExampleTable.tsx
@@ -0,0 +1,149 @@
+import { useMemo, useState } from 'react';
+import type { ExampleWithRuns, ExperimentRun, ExperimentView } from '../types';
+import { improvementDelta, verdict, verdictClass } from '../lib/delta';
+import type { RunMetric } from '../lib/metrics';
+
+interface Props {
+  examples: ExampleWithRuns[];
+  experiments: ExperimentView[]; // baseline first, then comparisons
+  metric: RunMetric | undefined; // drives the per-cell value and coloring
+}
+
+type Sort = 'regression' | 'improvement' | 'default';
+
+function truncate(value: unknown, max = 80): string {
+  if (value == null) return '—';
+  const s = typeof value === 'string' ? value : JSON.stringify(value);
+  return s.length > max ? s.slice(0, max) + '…' : s;
+}
+
+function runFor(example: ExampleWithRuns, sessionId: string): ExperimentRun | undefined {
+  return example.runs.find((r) => r.session_id === sessionId);
+}
+
+// One row per example; per experiment its output and the selected metric,
+// colored vs the baseline run and sortable by worst regression.
+export function ExampleTable({ examples, experiments, metric }: Props) {
+  const baseline = experiments[0];
+  const comparisons = experiments.slice(1);
+  const [sort, setSort] = useState<Sort>('default');
+
+  const rows = useMemo(() => {
+    if (sort === 'default' || !metric || !baseline || comparisons.length === 0) return examples;
+    const scored = examples.map((ex) => ({ ex, score: worstDelta(ex, baseline.id, comparisons, metric) }));
+    scored.sort((a, b) => rank(a.score, b.score, sort));
+    return scored.map((s) => s.ex);
+  }, [examples, sort, metric, baseline, comparisons]);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {comparisons.length > 0 && metric && (
+        <div className="flex items-center gap-2 text-xs text-tertiary">
+          <span>Sort</span>
+          <select
+            value={sort}
+            onChange={(e) => setSort(e.target.value as Sort)}
+            className="rounded-md border border-secondary bg-primary px-2 py-1 text-xs text-primary focus:border-brand focus:outline-none"
+          >
+            <option value="default">Default order</option>
+            <option value="regression">Worst {metric.label} regressions</option>
+            <option value="improvement">Best {metric.label} improvements</option>
+          </select>
+        </div>
+      )}
+
+      <div className="overflow-x-auto rounded-lg border border-secondary">
+        <table className="w-full border-collapse text-sm">
+          <thead>
+            <tr className="border-b border-secondary bg-surface-level-2">
+              <th className="px-3 py-2 text-left font-medium text-tertiary">Input</th>
+              {experiments.map((x) => (
+                <th key={x.id} colSpan={2} className="px-3 py-2 text-left font-medium text-primary">
+                  <span className="inline-flex items-center gap-1.5">
+                    <span className="h-2.5 w-2.5 shrink-0 rounded-[2px]" style={{ backgroundColor: x.color }} />
+                    <span className="truncate" title={x.name}>{x.name}</span>
+                    {x.isBaseline && <span className="text-xs text-tertiary">(baseline)</span>}
+                  </span>
+                </th>
+              ))}
+            </tr>
+            <tr className="border-b border-secondary bg-surface-level-2 text-xs text-tertiary">
+              <th className="px-3 py-1.5 text-left font-normal" />
+              {experiments.map((x) => (
+                <th key={x.id} colSpan={2} className="px-3 py-1.5 text-left font-normal">
+                  output · {metric?.label ?? 'value'}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((ex) => {
+              const baseVal = metric ? metric.value(runFor(ex, baseline?.id ?? '')) : null;
+              return (
+                <tr key={ex.id} className="border-b border-secondary align-top last:border-0">
+                  <td
+                    className="max-w-[240px] truncate px-3 py-2 text-secondary"
+                    title={truncate(ex.inputs, 500)}
+                  >
+                    {truncate(ex.inputs)}
+                  </td>
+                  {experiments.map((x) => {
+                    const run = runFor(ex, x.id);
+                    const value = metric ? metric.value(run) : null;
+                    const cls = x.isBaseline
+                      ? 'text-tertiary'
+                      : verdictClass(verdict(baseVal, value, metric?.lowerIsBetter ?? false));
+                    return (
+                      <FragmentCells
+                        key={x.id}
+                        output={truncate(run?.outputs ?? run?.outputs_preview)}
+                        value={metric ? metric.format(value) : '—'}
+                        valueClass={cls}
+                      />
+                    );
+                  })}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function FragmentCells(props: { output: string; value: string; valueClass: string }) {
+  return (
+    <>
+      <td className="max-w-[240px] truncate px-3 py-2 text-primary" title={props.output}>
+        {props.output}
+      </td>
+      <td className={`whitespace-nowrap px-3 py-2 tabular-nums ${props.valueClass}`}>{props.value}</td>
+    </>
+  );
+}
+
+// Most negative directional delta across comparisons; null when nothing pairs up.
+function worstDelta(
+  ex: ExampleWithRuns,
+  baselineId: string,
+  comparisons: ExperimentView[],
+  metric: RunMetric
+): number | null {
+  const base = metric.value(runFor(ex, baselineId));
+  let worst: number | null = null;
+  for (const c of comparisons) {
+    const d = improvementDelta(base, metric.value(runFor(ex, c.id)), metric.lowerIsBetter);
+    if (d == null) continue;
+    worst = worst == null ? d : Math.min(worst, d);
+  }
+  return worst;
+}
+
+// Nulls sink; regression = most negative first, improvement = most positive first.
+function rank(a: number | null, b: number | null, sort: Sort): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return 1;
+  if (b == null) return -1;
+  return sort === 'regression' ? a - b : b - a;
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/Pickers.tsx b/internal/cmd/templates/experiment-comparison/src/components/Pickers.tsx
new file mode 100644
index 0000000..1b48e09
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/Pickers.tsx
@@ -0,0 +1,171 @@
+import { useCallback, type ReactNode } from 'react';
+import { fetchDatasets, fetchExperiments } from '../api';
+import type { Dataset, Experiment } from '../types';
+import { SearchableSelect } from './SearchableSelect';
+import { cn } from '../lib/utils';
+
+interface Props {
+  datasetId: string;
+  onDataset: (id: string) => void;
+
+  experiments: Experiment[];
+  experimentsLoading: boolean;
+  baselineId: string;
+  onBaseline: (id: string) => void;
+
+  comparisonIds: string[];
+  onToggleComparison: (id: string) => void;
+}
+
+type StepStatus = 'done' | 'active' | 'disabled';
+
+// Dataset → baseline → one or more comparison experiments — a persistent,
+// always-editable 3-step guide (not a wizard you advance through and lose
+// access to). A later step disables with an inline reason until the step
+// before it is satisfied; nothing here is ever hidden.
+export function Pickers({
+  datasetId,
+  onDataset,
+  experiments,
+  experimentsLoading,
+  baselineId,
+  onBaseline,
+  comparisonIds,
+  onToggleComparison,
+}: Props) {
+  const others = experiments.filter((e) => e.id !== baselineId);
+
+  const fetchBaselinePage = useCallback(
+    (search: string, offset: number, limit: number) =>
+      datasetId ? fetchExperiments(datasetId, search, offset, limit) : Promise.resolve([]),
+    [datasetId]
+  );
+
+  const step2Status: StepStatus = !datasetId ? 'disabled' : baselineId ? 'done' : 'active';
+  const step3Status: StepStatus = !baselineId ? 'disabled' : comparisonIds.length > 0 ? 'done' : 'active';
+
+  return (
+    <div className="flex flex-col bg-surface-level-1 px-4 py-4">
+      <Step number={1} status={datasetId ? 'done' : 'active'} title="Choose a dataset" last={false}>
+        <SearchableSelect<Dataset>
+          id="ec-dataset"
+          value={datasetId}
+          onSelect={(dataset) => onDataset(dataset.id)}
+          fetchPage={fetchDatasets}
+          placeholder="Select a dataset…"
+          searchPlaceholder="Search datasets by name…"
+          emptyLabel="No datasets in this workspace"
+          className="max-w-[360px]"
+        />
+      </Step>
+
+      <Step
+        number={2}
+        status={step2Status}
+        title="Choose a baseline"
+        subtitle="Every other experiment gets compared against this one."
+        last={false}
+      >
+        {step2Status === 'disabled' ? (
+          <Hint>Pick a dataset first.</Hint>
+        ) : (
+          <SearchableSelect<Experiment>
+            id="ec-baseline"
+            value={baselineId}
+            onSelect={(experiment) => onBaseline(experiment.id)}
+            fetchPage={fetchBaselinePage}
+            placeholder="Select a baseline…"
+            searchPlaceholder="Search experiments by name…"
+            emptyLabel="No experiments in this dataset"
+            className="max-w-[360px]"
+          />
+        )}
+      </Step>
+
+      <Step
+        number={3}
+        status={step3Status}
+        title="Choose what to compare"
+        subtitle="Check one or more experiments to see how they stack up against the baseline."
+        last
+      >
+        {step3Status === 'disabled' ? (
+          <Hint>Pick a baseline first.</Hint>
+        ) : experimentsLoading ? (
+          <Hint>Loading experiments…</Hint>
+        ) : others.length === 0 ? (
+          <Hint>No other experiments in this dataset.</Hint>
+        ) : (
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
+            {others.map((x) => (
+              <label key={x.id} className="flex items-center gap-1.5 text-sm text-primary">
+                <input
+                  type="checkbox"
+                  checked={comparisonIds.includes(x.id)}
+                  onChange={() => onToggleComparison(x.id)}
+                  className="accent-[var(--bg-brand)]"
+                />
+                <span className="truncate">{x.name}</span>
+              </label>
+            ))}
+          </div>
+        )}
+      </Step>
+    </div>
+  );
+}
+
+function Hint({ children }: { children: ReactNode }) {
+  return <span className="text-sm text-tertiary">{children}</span>;
+}
+
+const BADGE_CLASS: Record<StepStatus, string> = {
+  done: 'border-brand bg-brand text-brand-on-fill',
+  active: 'border-brand text-brand-primary bg-surface-level-1',
+  disabled: 'border-subtle text-quaternary bg-surface-level-2',
+};
+
+const TITLE_CLASS: Record<StepStatus, string> = {
+  done: 'text-primary',
+  active: 'text-primary',
+  disabled: 'text-quaternary',
+};
+
+function Step({
+  number,
+  status,
+  title,
+  subtitle,
+  last,
+  children,
+}: {
+  number: number;
+  status: StepStatus;
+  title: string;
+  subtitle?: string;
+  last: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex gap-4">
+      <div className="flex flex-col items-center">
+        <span
+          className={cn(
+            'flex size-7 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold motion-safe:transition-colors motion-safe:duration-normal',
+            BADGE_CLASS[status]
+          )}
+        >
+          {status === 'done' ? '✓' : number}
+        </span>
+        {!last && <span className="my-1 w-px flex-1 bg-border-subtle" style={{ minHeight: 12 }} />}
+      </div>
+      <div className={cn('flex flex-1 flex-col gap-1.5', last ? 'pb-0' : 'pb-4')}>
+        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className={cn('text-sm font-semibold', TITLE_CLASS[status])}>{title}</span>
+          {subtitle && <span className="text-xs text-tertiary">{subtitle}</span>}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/ScatterPlot.tsx b/internal/cmd/templates/experiment-comparison/src/components/ScatterPlot.tsx
new file mode 100644
index 0000000..e913469
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/ScatterPlot.tsx
@@ -0,0 +1,197 @@
+import { useMemo, useState } from 'react';
+import type { ExampleWithRuns, ExperimentView } from '../types';
+import { SERIES_CAP, type RunMetric } from '../lib/metrics';
+import { Empty } from './primitives';
+
+interface Props {
+  examples: ExampleWithRuns[];
+  experiments: ExperimentView[]; // baseline first, then comparisons
+  metric: RunMetric;
+}
+
+interface Point {
+  cx: number;
+  cy: number;
+  xv: number;
+  yv: number;
+  name: string;
+  color: string;
+  letter: string;
+}
+
+const W = 520;
+const H = 360;
+const M = { top: 16, right: 16, bottom: 44, left: 64 };
+const PW = W - M.left - M.right;
+const PH = H - M.top - M.bottom;
+
+// Baseline (x) vs each comparison (y) for one metric; diagonal is parity.
+export function ScatterPlot({ examples, experiments, metric }: Props) {
+  const [hover, setHover] = useState<Point | null>(null);
+  const baseline = experiments[0];
+  const shown = experiments.slice(1, 1 + SERIES_CAP);
+  const hidden = experiments.length - 1 - shown.length;
+
+  const { points, lo, hi } = useMemo(() => {
+    const raw: Omit<Point, 'cx' | 'cy'>[] = [];
+    const vals: number[] = [];
+    for (const exp of shown) {
+      for (const ex of examples) {
+        const xv = metric.value(ex.runs.find((r) => r.session_id === baseline?.id));
+        const yv = metric.value(ex.runs.find((r) => r.session_id === exp.id));
+        if (xv == null || yv == null) continue;
+        raw.push({ xv, yv, name: ex.name || ex.id, color: exp.color, letter: exp.letter });
+        vals.push(xv, yv);
+      }
+    }
+    let lo = vals.length ? Math.min(...vals) : 0;
+    let hi = vals.length ? Math.max(...vals) : 1;
+    if (hi === lo) hi = lo + 1;
+    const pad = (hi - lo) * 0.08;
+    lo -= pad;
+    hi += pad;
+    const points = raw.map((r) => ({ ...r, cx: scaleX(r.xv, lo, hi), cy: scaleY(r.yv, lo, hi) }));
+    return { points, lo, hi };
+  }, [examples, shown, baseline, metric]);
+
+  if (!baseline) return null;
+  if (points.length === 0) {
+    return <Empty label={`No paired values for ${metric.label} in this selection.`} />;
+  }
+
+  const ticks = [lo, (lo + hi) / 2, hi];
+  const betterHint = metric.lowerIsBetter
+    ? 'points below the line beat the baseline'
+    : 'points above the line beat the baseline';
+
+  return (
+    <div className="flex flex-col gap-2">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full" role="img" aria-label={`Baseline vs comparison ${metric.label}`}>
+        {ticks.map((t) => (
+          <g key={`gx-${t}`}>
+            <line
+              x1={scaleX(t, lo, hi)}
+              x2={scaleX(t, lo, hi)}
+              y1={M.top}
+              y2={M.top + PH}
+              stroke="var(--border-subtle)"
+            />
+            <line
+              x1={M.left}
+              x2={M.left + PW}
+              y1={scaleY(t, lo, hi)}
+              y2={scaleY(t, lo, hi)}
+              stroke="var(--border-subtle)"
+            />
+            <text
+              x={scaleX(t, lo, hi)}
+              y={M.top + PH + 16}
+              textAnchor="middle"
+              className="fill-current text-tertiary"
+              style={{ fontSize: 10 }}
+            >
+              {metric.format(t)}
+            </text>
+            <text
+              x={M.left - 8}
+              y={scaleY(t, lo, hi) + 3}
+              textAnchor="end"
+              className="fill-current text-tertiary"
+              style={{ fontSize: 10 }}
+            >
+              {metric.format(t)}
+            </text>
+          </g>
+        ))}
+
+        <line
+          x1={M.left}
+          y1={M.top + PH}
+          x2={M.left + PW}
+          y2={M.top}
+          stroke="var(--text-tertiary)"
+          strokeDasharray="4 4"
+          opacity={0.7}
+        />
+
+        {points.map((p, i) => (
+          <g key={i} onMouseEnter={() => setHover(p)} onMouseLeave={() => setHover(null)} className="cursor-pointer">
+            {/* transparent hit area — bigger than the visible dot so hover doesn't require pinpoint aim */}
+            <circle cx={p.cx} cy={p.cy} r={12} fill="transparent" />
+            <circle
+              cx={p.cx}
+              cy={p.cy}
+              r={hover === p ? 6 : 4}
+              fill={p.color}
+              stroke="var(--bg-surface-level-1)"
+              strokeWidth={1.5}
+              className="motion-safe:transition-[r] motion-safe:duration-fast"
+            >
+              <title>{`${p.letter} · ${p.name}\nbaseline ${metric.format(p.xv)} → ${metric.format(p.yv)}`}</title>
+            </circle>
+          </g>
+        ))}
+
+        <text
+          x={M.left + PW / 2}
+          y={H - 4}
+          textAnchor="middle"
+          className="fill-current text-tertiary"
+          style={{ fontSize: 11 }}
+        >
+          baseline {metric.label}
+        </text>
+        <text
+          transform={`translate(14 ${M.top + PH / 2}) rotate(-90)`}
+          textAnchor="middle"
+          className="fill-current text-tertiary"
+          style={{ fontSize: 11 }}
+        >
+          comparison {metric.label}
+        </text>
+
+        {hover && <Tooltip point={hover} metric={metric} />}
+      </svg>
+
+      <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-tertiary">
+        {shown.map((exp) => (
+          <span key={exp.id} className="inline-flex items-center gap-1.5 text-secondary">
+            <span className="h-2.5 w-2.5 rounded-[2px]" style={{ backgroundColor: exp.color }} />
+            {exp.letter} · <span className="truncate max-w-[180px]" title={exp.name}>{exp.name}</span>
+          </span>
+        ))}
+        <span>dashed line = parity; {betterHint}.</span>
+        {hidden > 0 && <span>+{hidden} more comparison{hidden > 1 ? 's' : ''} not plotted.</span>}
+      </div>
+    </div>
+  );
+}
+
+function Tooltip({ point, metric }: { point: Point; metric: RunMetric }) {
+  const boxW = 168;
+  const x = Math.min(Math.max(point.cx + 10, M.left), W - M.right - boxW);
+  const y = Math.min(Math.max(point.cy - 34, M.top), M.top + PH - 34);
+  return (
+    <g pointerEvents="none">
+      <rect x={x} y={y} width={boxW} height={30} rx={4} fill="var(--bg-elevated)" stroke="var(--border-default)" />
+      <text x={x + 8} y={y + 13} className="fill-current text-primary" style={{ fontSize: 10 }}>
+        {point.letter} · {truncate(point.name)}
+      </text>
+      <text x={x + 8} y={y + 25} className="fill-current text-tertiary" style={{ fontSize: 10 }}>
+        {metric.format(point.xv)} → {metric.format(point.yv)}
+      </text>
+    </g>
+  );
+}
+
+function scaleX(v: number, lo: number, hi: number): number {
+  return M.left + ((v - lo) / (hi - lo)) * PW;
+}
+
+function scaleY(v: number, lo: number, hi: number): number {
+  return M.top + PH - ((v - lo) / (hi - lo)) * PH;
+}
+
+function truncate(s: string, max = 22): string {
+  return s.length > max ? s.slice(0, max) + '…' : s;
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/Scoreboard.tsx b/internal/cmd/templates/experiment-comparison/src/components/Scoreboard.tsx
new file mode 100644
index 0000000..0fb152a
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/Scoreboard.tsx
@@ -0,0 +1,55 @@
+import type { Aggregate, ExperimentView } from '../types';
+import { aggregateValue, type RunMetric } from '../lib/metrics';
+import { verdict } from '../lib/delta';
+import { StatTile, type StatDelta } from './primitives';
+
+interface Props {
+  experiments: ExperimentView[]; // baseline first, then comparisons
+  aggregates: Record<string, Aggregate>;
+  metric: RunMetric;
+}
+
+function signed(raw: number, format: (v: number | null) => string): string {
+  if (raw === 0) return `±${format(0)}`;
+  return `${raw > 0 ? '+' : '−'}${format(Math.abs(raw))}`;
+}
+
+const TONE: Record<ReturnType<typeof verdict>, StatDelta['tone']> = {
+  better: 'good',
+  worse: 'bad',
+  neutral: 'neutral',
+};
+
+// The headline moment: baseline's value, then each comparison's value with a
+// delta pill (colored by whether it actually beat the baseline, not by sign).
+export function Scoreboard({ experiments, aggregates, metric }: Props) {
+  const baseline = experiments[0];
+  const comparisons = experiments.slice(1);
+  if (!baseline) return null;
+  const baseValue = aggregateValue(aggregates[baseline.id], metric);
+
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+      <StatTile
+        label={`${baseline.letter} · ${baseline.name}`}
+        value={metric.format(baseValue)}
+        hint="baseline"
+        accent={baseline.color}
+      />
+      {comparisons.map((exp) => {
+        const value = aggregateValue(aggregates[exp.id], metric);
+        const raw = baseValue != null && value != null ? value - baseValue : null;
+        const v = verdict(baseValue, value, metric.lowerIsBetter);
+        return (
+          <StatTile
+            key={exp.id}
+            label={`${exp.letter} · ${exp.name}`}
+            value={metric.format(value)}
+            accent={exp.color}
+            delta={raw == null ? undefined : { text: signed(raw, metric.format), tone: TONE[v] }}
+          />
+        );
+      })}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/Scorecard.tsx b/internal/cmd/templates/experiment-comparison/src/components/Scorecard.tsx
new file mode 100644
index 0000000..238d085
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/Scorecard.tsx
@@ -0,0 +1,83 @@
+import type { ExampleWithRuns, ExperimentView } from '../types';
+import type { RunMetric } from '../lib/metrics';
+import { verdict } from '../lib/delta';
+import { StackedBar, type StackedRow } from './primitives';
+
+interface Props {
+  examples: ExampleWithRuns[];
+  experiments: ExperimentView[]; // baseline first, then comparisons
+  metrics: RunMetric[];
+}
+
+interface Tally {
+  better: number;
+  worse: number;
+  neutral: number;
+}
+
+// Per comparison, how many examples beat / lost to / tied the baseline per
+// metric — a stacked win/tie/loss bar so the proportion reads at a glance.
+export function Scorecard({ examples, experiments, metrics }: Props) {
+  const baseline = experiments[0];
+  const comparisons = experiments.slice(1);
+  if (!baseline || comparisons.length === 0) return null;
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {comparisons.map((exp) => {
+        const rows: StackedRow[] = metrics.map((m) => {
+          const t = tallyFor(examples, baseline.id, exp.id, m);
+          return {
+            label: m.label,
+            segments: [
+              { key: 'better', value: t.better, color: 'var(--bg-success-strong)' },
+              { key: 'neutral', value: t.neutral, color: 'var(--border-strong)' },
+              { key: 'worse', value: t.worse, color: 'var(--bg-error-strong)' },
+            ],
+          };
+        });
+        return (
+          <div key={exp.id} className="rounded-lg border border-subtle p-4">
+            <div className="mb-3 flex items-center gap-1.5 text-sm font-medium text-primary">
+              <span className="h-2.5 w-2.5 shrink-0 rounded-[2px]" style={{ backgroundColor: exp.color }} />
+              <span className="truncate" title={exp.name}>{exp.name}</span>
+            </div>
+            <StackedBar rows={rows} />
+          </div>
+        );
+      })}
+      <div className="flex items-center gap-4 text-xs text-tertiary sm:col-span-2 lg:col-span-3">
+        <Swatch color="var(--bg-success-strong)" label="beat baseline" />
+        <Swatch color="var(--border-strong)" label="tied" />
+        <Swatch color="var(--bg-error-strong)" label="lost to baseline" />
+      </div>
+    </div>
+  );
+}
+
+function Swatch({ color, label }: { color: string; label: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <span className="size-2.5 shrink-0 rounded-sm" style={{ backgroundColor: color }} />
+      {label}
+    </span>
+  );
+}
+
+function tallyFor(
+  examples: ExampleWithRuns[],
+  baselineId: string,
+  compId: string,
+  metric: RunMetric
+): Tally {
+  const t: Tally = { better: 0, worse: 0, neutral: 0 };
+  for (const ex of examples) {
+    const base = metric.value(ex.runs.find((r) => r.session_id === baselineId));
+    const val = metric.value(ex.runs.find((r) => r.session_id === compId));
+    const v = verdict(base, val, metric.lowerIsBetter);
+    if (v === 'better') t.better++;
+    else if (v === 'worse') t.worse++;
+    else t.neutral++;
+  }
+  return t;
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/SummaryPanel.tsx b/internal/cmd/templates/experiment-comparison/src/components/SummaryPanel.tsx
new file mode 100644
index 0000000..e899ba0
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/SummaryPanel.tsx
@@ -0,0 +1,52 @@
+import type { Aggregate, ExperimentView } from '../types';
+import { aggregateValue, type RunMetric } from '../lib/metrics';
+import { BarList, StatTile, type BarItem } from './primitives';
+
+interface Props {
+  experiments: ExperimentView[]; // baseline first, then comparisons
+  aggregates: Record<string, Aggregate>;
+  metrics: RunMetric[];
+}
+
+// Every metric ExampleTable/ScatterPlot can plot, rendered as one small
+// grouped-bar comparison per metric. With a lone baseline (no comparisons
+// picked yet) a one-bar chart is a stat tile in bar's clothing, so that case
+// renders a plain KPI row instead.
+export function SummaryPanel({ experiments, aggregates, metrics }: Props) {
+  if (experiments.length <= 1) {
+    const exp = experiments[0];
+    return (
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        {metrics.map((m) => (
+          <StatTile key={m.id} label={m.label} value={m.format(aggregateValue(aggregates[exp?.id ?? ''], m))} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2">
+      {metrics.map((m) => {
+        const items: BarItem[] = experiments.map((x) => {
+          const v = aggregateValue(aggregates[x.id], m);
+          return {
+            key: x.id,
+            label: `${x.letter} · ${x.name}`,
+            value: v,
+            display: m.format(v),
+            color: x.color,
+          };
+        });
+        return (
+          <div key={m.id} className="flex flex-col gap-2 rounded-lg border border-subtle p-4">
+            <span className="text-xs font-medium uppercase tracking-wide text-tertiary">
+              {m.label}
+              {m.lowerIsBetter && <span className="normal-case text-quaternary"> · lower is better</span>}
+            </span>
+            <BarList items={items} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/components/primitives.tsx b/internal/cmd/templates/experiment-comparison/src/components/primitives.tsx
new file mode 100644
index 0000000..29d0b4d
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/components/primitives.tsx
@@ -0,0 +1,168 @@
+import type { ReactNode } from 'react';
+
+const SURFACE = 'var(--bg-surface-level-1)';
+
+export function Section({ title, note, children }: { title: string; note?: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-3 rounded-lg border border-secondary p-5">
+      <div className="flex flex-col gap-0.5">
+        <h2 className="text-sm font-semibold text-primary">{title}</h2>
+        {note && <span className="text-xs text-tertiary">{note}</span>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export function Empty({ label = 'No data' }: { label?: string }) {
+  return <span className="py-4 text-center text-xs text-tertiary">{label}</span>;
+}
+
+export interface StatDelta {
+  text: string;
+  tone: 'good' | 'bad' | 'neutral';
+}
+
+const DELTA_TONE_CLASS: Record<StatDelta['tone'], string> = {
+  good: 'bg-success-subtle text-success-primary',
+  bad: 'bg-error-subtle text-error-primary',
+  neutral: 'bg-surface-level-2 text-tertiary',
+};
+
+// Value uses proportional figures (not tabular-nums) — this is a standalone
+// hero/stat-tile number, not a column that needs to align with others.
+export function StatTile({
+  label,
+  value,
+  hint,
+  delta,
+  accent,
+}: {
+  label: string;
+  value: string;
+  hint?: string;
+  delta?: StatDelta;
+  accent?: string;
+}) {
+  return (
+    <div className="flex flex-col gap-1.5 rounded-lg border border-secondary p-4">
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-tertiary">
+        {accent && <span className="size-2 shrink-0 rounded-[2px]" style={{ backgroundColor: accent }} />}
+        <span className="truncate" title={label}>{label}</span>
+      </span>
+      <span className="text-2xl font-semibold text-primary">{value}</span>
+      {(delta || hint) && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          {delta && (
+            <span className={`inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium ${DELTA_TONE_CLASS[delta.tone]}`}>
+              {delta.text}
+            </span>
+          )}
+          {hint && <span className="text-xs text-tertiary">{hint}</span>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export interface LegendItem {
+  label: string;
+  color: string;
+}
+
+export function Legend({ items }: { items: LegendItem[] }) {
+  return (
+    <ul className="flex flex-wrap items-center gap-x-4 gap-y-1">
+      {items.map((it) => (
+        <li key={it.label} className="flex items-center gap-1.5 text-xs text-secondary">
+          <span className="size-2.5 shrink-0 rounded-sm" style={{ backgroundColor: it.color }} />
+          <span className="truncate max-w-[180px]" title={it.label}>{it.label}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface BarItem {
+  key: string;
+  label: string;
+  value: number | null; // null → missing: empty track, em-dash value
+  display: string;
+  color: string;
+  hint?: string;
+}
+
+// One bar per item sharing a scale. A null value renders no fill (never a
+// fake sliver) so "missing" never reads as "zero".
+export function BarList({ items, labelWidth = 'w-32' }: { items: BarItem[]; labelWidth?: string }) {
+  if (items.length === 0) return <Empty />;
+  const max = items.reduce((m, x) => Math.max(m, x.value ?? 0), 0);
+  return (
+    <ul className="flex flex-col gap-2">
+      {items.map((it) => (
+        <li key={it.key} className="flex items-center gap-3 text-sm" title={it.hint ?? `${it.label}: ${it.display}`}>
+          <span className={`${labelWidth} shrink-0 truncate text-secondary`} title={it.label}>
+            {it.label}
+          </span>
+          <span className="h-2 min-w-0 flex-1 overflow-hidden rounded-full bg-surface-level-3">
+            {it.value != null && (
+              <span
+                className="block h-full rounded-full motion-safe:transition-[width] motion-safe:duration-slow"
+                style={{
+                  width: `${max > 0 ? Math.max((it.value / max) * 100, it.value > 0 ? 3 : 0) : 0}%`,
+                  backgroundColor: it.color,
+                }}
+              />
+            )}
+          </span>
+          <span className="w-20 shrink-0 text-right tabular-nums text-tertiary">{it.display}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface Segment {
+  key: string;
+  value: number;
+  color: string;
+}
+
+export interface StackedRow {
+  label: string;
+  segments: Segment[];
+}
+
+// Horizontal stacked bars sharing one scale; a 2px surface-color gap (border-r)
+// separates each segment instead of an outline.
+export function StackedBar({ rows, format = (n: number) => String(n) }: { rows: StackedRow[]; format?: (n: number) => string }) {
+  if (rows.length === 0) return <Empty />;
+  const max = rows.reduce((m, r) => Math.max(m, r.segments.reduce((s, x) => s + x.value, 0)), 0);
+  return (
+    <ul className="flex flex-col gap-2">
+      {rows.map((r) => {
+        const total = r.segments.reduce((s, x) => s + x.value, 0);
+        return (
+          <li key={r.label} className="flex items-center gap-3 text-sm">
+            <span className="w-28 shrink-0 truncate text-secondary" title={r.label}>
+              {r.label}
+            </span>
+            <span className="flex h-2.5 min-w-0 flex-1 overflow-hidden rounded-full bg-surface-level-3">
+              {r.segments.map((s) =>
+                s.value > 0 ? (
+                  <span
+                    key={s.key}
+                    title={`${s.key}: ${format(s.value)}`}
+                    className="block h-full border-r-2 first:rounded-l-full last:rounded-r-full last:border-r-0"
+                    style={{ width: `${max > 0 ? (s.value / max) * 100 : 0}%`, backgroundColor: s.color, borderColor: SURFACE }}
+                  />
+                ) : null
+              )}
+            </span>
+            <span className="w-16 shrink-0 text-right tabular-nums text-tertiary">{format(total)}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/entry.tsx b/internal/cmd/templates/experiment-comparison/src/entry.tsx
new file mode 100644
index 0000000..6c1bcc5
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/entry.tsx
@@ -0,0 +1,28 @@
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import css from './index.css?inline';
+import { App } from './App';
+
+let root: Root | null = null;
+let styleInjected = false;
+
+function ensureStyles() {
+  if (styleInjected) return;
+  const style = document.createElement('style');
+  style.textContent = css;
+  document.head.appendChild(style);
+  styleInjected = true;
+}
+
+export function render(data: unknown, container: HTMLElement, metadata: RenderMetadata) {
+  ensureStyles();
+  if (!root) {
+    root = createRoot(container);
+  }
+  // metadata.mode is "dark"|"light". The sandbox sets html.dark from it, so
+  // this token UI themes without branching; passed to App.
+  root.render(createElement(App, { data, metadata }));
+}
+
+// Some sandbox hosts call a bare default export; support both shapes.
+export default { render };
diff --git a/internal/cmd/templates/experiment-comparison/src/global.d.ts b/internal/cmd/templates/experiment-comparison/src/global.d.ts
new file mode 100644
index 0000000..95c5301
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/global.d.ts
@@ -0,0 +1,21 @@
+export {};
+
+declare global {
+  /** render()'s 3rd arg, an open/extensible dict. v1 has only `mode`
+   * ("dark"|"light"); the sandbox sets `html.dark` from it. */
+  type RenderMetadata = { mode: 'dark' | 'light' };
+
+  interface Window {
+    /** Injected by the host page (LangSmith, or `langsmith apps dev` locally) — see AGENTS.md. */
+    langsmith: {
+      call: (
+        operation: string,
+        args?: { params?: Record<string, string | string[]>; body?: unknown }
+      ) => Promise<unknown>;
+      setData: (patch: Record<string, unknown>) => void;
+      feedback: {
+        create: (args: Record<string, unknown>) => Promise<unknown>;
+      };
+    };
+  }
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/index.css b/internal/cmd/templates/experiment-comparison/src/index.css
new file mode 100644
index 0000000..67ac7b4
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/index.css
@@ -0,0 +1,398 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color-scheme: light;
+  }
+
+  html.dark {
+    color-scheme: dark;
+  }
+
+  body {
+    background-color: var(--bg-surface-level-1);
+    color: var(--text-primary);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    min-height: 100vh;
+  }
+
+  * {
+    outline-color: var(--brand-400);
+  }
+
+  :root {
+    /* gray */
+    --gray-25: #fcfcfc;
+    --gray-50: #fafafa;
+    --gray-100: #f4f4f5;
+    --gray-200: #e4e4e7;
+    --gray-300: #d1d1d6;
+    --gray-400: #a0a0ab;
+    --gray-500: #70707b;
+    --gray-600: #51525c;
+    --gray-700: #3f3f46;
+    --gray-800: #26272b;
+    --gray-900: #1a1a1e;
+    --gray-950: #131316;
+
+    /* neutral */
+    --neutral-25: #fafbfd;
+    --neutral-35: #f8fafc;
+    --neutral-50: #f5f8fb;
+    --neutral-100: #edf2f7;
+    --neutral-200: #e2e8f0;
+    --neutral-300: #cbd5e1;
+    --neutral-400: #94a3b8;
+    --neutral-500: #64748b;
+    --neutral-600: #475569;
+    --neutral-700: #334155;
+    --neutral-800: #1e293b;
+    --neutral-900: #0f172a;
+    --neutral-950: #080f1e;
+
+    --white: #ffffff;
+    --black: #000000;
+
+    /* brand */
+    --brand-10: #f2faff;
+    --brand-25: #e5f4ff;
+    --brand-50: #cce9ff;
+    --brand-75: #9dd2fc;
+    --brand-100: #5fbef8;
+    --brand-200: #008dff;
+    --brand-300: #0078f1;
+    --brand-400: #006ddd;
+    --brand-500: #1566b8;
+    --brand-600: #145095;
+    --brand-700: #0d3d77;
+    --brand-800: #0c336a;
+    --brand-900: #102656;
+    --brand-950: #101a30;
+
+    /* red */
+    --red-25: #fffbfa;
+    --red-50: #fef3f2;
+    --red-100: #fee4e2;
+    --red-200: #fecdca;
+    --red-300: #fda29b;
+    --red-400: #f97066;
+    --red-500: #f04438;
+    --red-600: #d92d20;
+    --red-700: #b42318;
+    --red-800: #912018;
+    --red-900: #7a271a;
+    --red-950: #55160c;
+
+    /* orange */
+    --orange-25: #fffcf5;
+    --orange-50: #fffaeb;
+    --orange-100: #fef0c7;
+    --orange-200: #fedf89;
+    --orange-300: #fec84b;
+    --orange-400: #fdb022;
+    --orange-500: #f79009;
+    --orange-600: #cd6002;
+    --orange-700: #ac5305;
+    --orange-800: #894101;
+    --orange-900: #6d3300;
+    --orange-950: #4c2400;
+
+    /* green */
+    --green-25: #f5fef9;
+    --green-50: #ecfdf3;
+    --green-100: #dcfae6;
+    --green-200: #acefc6;
+    --green-300: #75e0a7;
+    --green-400: #46cd89;
+    --green-500: #19b26b;
+    --green-600: #079455;
+    --green-700: #047647;
+    --green-800: #065d3a;
+    --green-900: #084d31;
+    --green-950: #053321;
+
+    /* series (categorical chart slots, validated CVD-safe light) */
+    --series-1: #2a78d6;
+    --series-2: #008300;
+    --series-3: #e87ba4;
+    --series-4: #eda100;
+
+    /* acid */
+    --acid-10: #fafee8;
+    --acid-25: #f2fcc8;
+    --acid-50: #e3f797;
+    --acid-100: #cceb50;
+    --acid-200: #aecf1a;
+    --acid-300: #93b000;
+    --acid-400: #799200;
+    --acid-500: #607500;
+    --acid-600: #495a00;
+    --acid-700: #354200;
+    --acid-800: #232c00;
+    --acid-900: #141a00;
+    --acid-950: #0b1000;
+
+    /* purple */
+    --purple-10: #f9f7ff;
+    --purple-25: #f1ecff;
+    --purple-50: #e3d9ff;
+    --purple-100: #c5b4f0;
+    --purple-200: #a691df;
+    --purple-300: #8b71cc;
+    --purple-400: #7655b8;
+    --purple-500: #6244a0;
+    --purple-600: #4e3487;
+    --purple-700: #3b2560;
+    --purple-800: #291753;
+    --purple-900: #190d38;
+    --purple-950: #0f0822;
+
+    /* SEMANTIC TOKENS */
+
+    /* SURFACE */
+    --bg-surface-level-1: var(--white);
+    --bg-surface-level-1-hover: var(--neutral-25);
+    --bg-surface-level-2: var(--neutral-50);
+    --bg-surface-level-2-hover: var(--neutral-100);
+    --bg-surface-level-3: var(--neutral-100);
+    --bg-surface-level-4: var(--neutral-200);
+    --bg-disabled: var(--neutral-100);
+    --bg-elevated: var(--white);
+    --bg-elevated-hover: var(--neutral-25);
+    --bg-elevated-selected: var(--neutral-25);
+    --bg-overlay: rgba(0, 0, 0, 0.5);
+
+    /* BRAND */
+    --bg-brand: var(--brand-400);
+    --bg-brand-hover: var(--brand-500);
+    --bg-brand-subtle: var(--brand-25);
+    --bg-brand-subtle-hover: var(--brand-50);
+    --bg-brand-muted: var(--brand-10);
+    --bg-purple: var(--purple-50);
+
+    /* INTENT */
+    --bg-success: var(--green-50);
+    --bg-success-subtle: var(--green-100);
+    --bg-success-strong: var(--green-600);
+    --bg-error: var(--red-50);
+    --bg-error-subtle: var(--red-100);
+    --bg-error-strong: var(--red-600);
+    --bg-warning: var(--orange-50);
+    --bg-warning-subtle: var(--orange-100);
+    --bg-warning-strong: var(--orange-600);
+
+    /* CONTROL */
+    --bg-control-active: var(--brand-300);
+    --bg-control-active-hover: var(--brand-400);
+    --bg-control-thumb: var(--white);
+    --bg-control-disabled: var(--neutral-200);
+    --text-control-active-foreground: var(--bg-control-thumb);
+
+    /* SELECTED */
+    --bg-selected: var(--brand-25);
+    --bg-selected-hover: var(--brand-50);
+
+    /* BORDER */
+    --border-default: var(--neutral-300);
+    --border-subtle: var(--neutral-200);
+    --border-muted: var(--neutral-100);
+    --border-faint: var(--neutral-50);
+    --border-strong: var(--neutral-600);
+    --border-disabled: var(--neutral-200);
+    --border-focus: var(--brand-400);
+    --border-error: var(--red-300);
+    --border-error-strong: var(--red-600);
+    --border-brand: var(--brand-400);
+    --border-brand-strong: var(--brand-600);
+    --border-brand-subtle: var(--brand-100);
+    --border-warning: var(--orange-300);
+    --border-success: var(--green-200);
+    --border-purple: var(--purple-200);
+
+    /* TEXT */
+    --text-primary: var(--neutral-900);
+    --text-secondary: var(--neutral-700);
+    --text-secondary-hover: var(--neutral-800);
+    --text-tertiary: var(--neutral-600);
+    --text-tertiary-hover: var(--neutral-700);
+    --text-quaternary: var(--neutral-500);
+    --text-disabled: var(--neutral-300);
+    --text-placeholder: var(--neutral-400);
+    --text-error-primary: var(--red-700);
+    --text-error-secondary: var(--red-600);
+    --text-error-tertiary: var(--red-500);
+    --text-warning-primary: var(--orange-700);
+    --text-warning-secondary: var(--orange-600);
+    --text-warning-tertiary: var(--orange-500);
+    --text-success-primary: var(--green-700);
+    --text-success-secondary: var(--green-600);
+    --text-success-tertiary: var(--green-500);
+    --text-brand-primary: var(--brand-700);
+    --text-brand-secondary: var(--brand-600);
+    --text-brand-tertiary: var(--brand-500);
+    --text-brand-disabled: var(--brand-75);
+    --text-brand-on-fill: var(--white);
+    --text-link: var(--brand-300);
+    --text-link-hover: var(--brand-200);
+
+    /* ICON */
+    --icon-primary: var(--neutral-900);
+    --icon-secondary: var(--neutral-700);
+    --icon-tertiary: var(--neutral-500);
+    --icon-disabled: var(--neutral-300);
+    --icon-brand: var(--brand-400);
+    --icon-error: var(--red-600);
+    --icon-success: var(--green-600);
+    --icon-warning: var(--orange-600);
+
+    /* SHADOW */
+    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px 4px -1px rgba(16, 24, 40, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.1), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
+
+    /* RADIUS */
+    --radius-none: 0px;
+    --radius-xs: 3px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-full: 9999px;
+
+    /* MOTION */
+    --duration-fast: 100ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --duration-slower: 500ms;
+
+    /* DEPRECATED ALIASES */
+    --bg-primary: var(--bg-surface-level-1);
+    --bg-primary-hover: var(--bg-surface-level-1-hover);
+    --bg-secondary: var(--bg-surface-level-2);
+    --bg-secondary-hover: var(--bg-surface-level-2-hover);
+    --bg-tertiary: var(--bg-surface-level-3);
+    --bg-quaternary: var(--bg-surface-level-4);
+    --bg-brand-primary: var(--bg-brand);
+    --bg-brand-primary_hover: var(--bg-brand-hover);
+    --bg-brand-secondary: var(--bg-brand-subtle);
+    --bg-brand-secondary_hover: var(--bg-brand-subtle-hover);
+    --bg-brand-tertiary: var(--bg-brand-muted);
+    --bg-success-primary: var(--bg-success);
+    --bg-success-secondary: var(--bg-success-subtle);
+    --bg-error-primary: var(--bg-error);
+    --bg-error-secondary: var(--bg-error-subtle);
+    --bg-warning-primary: var(--bg-warning);
+    --bg-warning-secondary: var(--bg-warning-subtle);
+    --border-primary: var(--border-default);
+    --border-secondary: var(--border-subtle);
+    --border-tertiary: var(--border-muted);
+    --border-quaternary: var(--border-faint);
+    --text-button-primary: var(--white);
+  }
+
+  html.dark {
+    --gray-25: #131316;
+    --gray-50: #1a1a1e;
+    --gray-100: #26272b;
+    --gray-200: #3f3f46;
+    --gray-300: #51525c;
+    --gray-400: #70707b;
+    --gray-500: #a0a0ab;
+    --gray-600: #d1d1d6;
+    --gray-700: #e4e4e7;
+    --gray-800: #f4f4f5;
+    --gray-900: #fafafa;
+    --gray-950: #fcfcfc;
+
+    --neutral-25: #09090f;
+    --neutral-35: #0d0f18;
+    --neutral-50: #111521;
+    --neutral-100: #1b2030;
+    --neutral-200: #282e42;
+    --neutral-300: #393f55;
+    --neutral-400: #555d78;
+    --neutral-500: #8790ab;
+    --neutral-600: #cbd5e1;
+    --neutral-700: #e2e8f0;
+    --neutral-800: #edf2f7;
+    --neutral-900: #f5f8fb;
+    --neutral-950: #fafbfd;
+
+    --white: #131316;
+    --black: #ffffff;
+
+    --brand-10: #101a30;
+    --brand-25: #102656;
+    --brand-50: #0c336a;
+    --brand-75: #0c3871;
+    --brand-100: #0d3d77;
+    --brand-200: #145095;
+    --brand-300: #1566b8;
+    --brand-400: #006ddd;
+    --brand-500: #0078f1;
+    --brand-600: #008dff;
+    --brand-700: #5fbef8;
+    --brand-800: #cce9ff;
+    --brand-900: #e5f4ff;
+    --brand-950: #f2faff;
+
+    --red-25: #55160c;
+    --red-50: #7a271a;
+    --red-100: #912018;
+    --red-200: #b42318;
+    --red-300: #d92d20;
+    --red-400: #f04438;
+    --red-500: #f97066;
+    --red-600: #fda29b;
+    --red-700: #fecdca;
+    --red-800: #fee4e2;
+    --red-900: #fef3f2;
+    --red-950: #fffbfa;
+
+    --orange-25: #4c2400;
+    --orange-50: #6d3300;
+    --orange-100: #894101;
+    --orange-200: #ac5305;
+    --orange-300: #cd6002;
+    --orange-400: #f79009;
+    --orange-500: #fdb022;
+    --orange-600: #fec84b;
+    --orange-700: #fedf89;
+    --orange-800: #fef0c7;
+    --orange-900: #fffaeb;
+    --orange-950: #fffcf5;
+
+    --green-25: #053321;
+    --green-50: #084d31;
+    --green-100: #065d3a;
+    --green-200: #047647;
+    --green-300: #079455;
+    --green-400: #19b26b;
+    --green-500: #46cd89;
+    --green-600: #75e0a7;
+    --green-700: #acefc6;
+    --green-800: #dcfae6;
+    --green-900: #ecfdf3;
+    --green-950: #f5fef9;
+
+    /* series stepped for the dark surface, validated as a set */
+    --series-1: #3987e5;
+    --series-2: #008300;
+    --series-3: #d55181;
+    --series-4: #c98500;
+  }
+}
+
+@keyframes linear-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(800%);
+  }
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/lib/delta.ts b/internal/cmd/templates/experiment-comparison/src/lib/delta.ts
new file mode 100644
index 0000000..5201d52
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/lib/delta.ts
@@ -0,0 +1,53 @@
+import type { ExperimentRun } from '../types';
+
+export type Verdict = 'better' | 'worse' | 'neutral';
+
+// Coerce feedback_stats[key].avg to a number, guarding the untyped nested map
+// so a missing/non-numeric score returns null instead of NaN.
+export function scoreFor(run: ExperimentRun | undefined, key: string): number | null {
+  const raw = run?.feedback_stats?.[key]?.avg;
+  const n = typeof raw === 'number' ? raw : Number(raw);
+  return Number.isFinite(n) ? n : null;
+}
+
+export function latencyMs(run: ExperimentRun | undefined): number | null {
+  if (!run?.end_time) return null;
+  const ms = new Date(run.end_time).getTime() - new Date(run.start_time).getTime();
+  return Number.isFinite(ms) ? ms : null;
+}
+
+export function costOf(run: ExperimentRun | undefined): number | null {
+  const n = Number(run?.total_cost);
+  return Number.isFinite(n) ? n : null;
+}
+
+// Signed improvement of `value` over `baseline` (positive = better), honoring
+// direction; null if either side is missing so callers never mistake a gap
+// for a real zero delta.
+export function improvementDelta(
+  baseline: number | null,
+  value: number | null,
+  lowerIsBetter: boolean
+): number | null {
+  if (baseline == null || value == null) return null;
+  return lowerIsBetter ? baseline - value : value - baseline;
+}
+
+// Compare value against baseline; 'neutral' when either is missing or they
+// tie, so missing data never miscolors.
+export function verdict(
+  baseline: number | null,
+  value: number | null,
+  lowerIsBetter: boolean
+): Verdict {
+  const d = improvementDelta(baseline, value, lowerIsBetter);
+  if (d == null || d === 0) return 'neutral';
+  return d > 0 ? 'better' : 'worse';
+}
+
+// Token-based text colors that flip under html.dark, so deltas read in both themes.
+export function verdictClass(v: Verdict): string {
+  if (v === 'better') return 'text-success-primary';
+  if (v === 'worse') return 'text-error-primary';
+  return 'text-primary';
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/lib/metrics.ts b/internal/cmd/templates/experiment-comparison/src/lib/metrics.ts
new file mode 100644
index 0000000..7f6da2c
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/lib/metrics.ts
@@ -0,0 +1,103 @@
+import type { Aggregate, ExperimentRun } from '../types';
+import { costOf, latencyMs, scoreFor } from './delta';
+
+// A single comparable measure read straight off one run.
+export interface RunMetric {
+  id: string;
+  label: string;
+  lowerIsBetter: boolean;
+  value: (run: ExperimentRun | undefined) => number | null;
+  format: (v: number | null) => string;
+}
+
+export const fmt = {
+  ms: (v: number | null) => (v == null ? '—' : `${Math.round(v)} ms`),
+  cost: (v: number | null) => (v == null ? '—' : `$${v.toFixed(4)}`),
+  tokens: (v: number | null) => (v == null ? '—' : Math.round(v).toLocaleString()),
+  score: (v: number | null) => (v == null ? '—' : v.toFixed(3)),
+};
+
+// Feedback keys first, then the always-lower-is-better system metrics.
+export function buildMetrics(
+  feedbackKeys: string[],
+  lowerIsBetter: Record<string, boolean>
+): RunMetric[] {
+  const scores: RunMetric[] = feedbackKeys.map((key) => ({
+    id: `score:${key}`,
+    label: key,
+    lowerIsBetter: lowerIsBetter[key] ?? false,
+    value: (run) => scoreFor(run, key),
+    format: fmt.score,
+  }));
+  const system: RunMetric[] = [
+    { id: 'latency', label: 'Latency', lowerIsBetter: true, value: latencyMs, format: fmt.ms },
+    { id: 'cost', label: 'Cost', lowerIsBetter: true, value: costOf, format: fmt.cost },
+    {
+      id: 'tokens',
+      label: 'Tokens',
+      lowerIsBetter: true,
+      value: (run) => (typeof run?.total_tokens === 'number' ? run.total_tokens : null),
+      format: fmt.tokens,
+    },
+  ];
+  return [...scores, ...system];
+}
+
+// Reads the aggregate matching a RunMetric id, so components that show
+// per-experiment aggregates (Scoreboard, SummaryPanel) can share the same
+// metric list ExampleTable/ScatterPlot use instead of re-deriving their own.
+export function aggregateValue(agg: Aggregate | undefined, metric: RunMetric): number | null {
+  if (!agg) return null;
+  if (metric.id === 'latency') return agg.avgLatencyMs;
+  if (metric.id === 'cost') return agg.totalCost;
+  if (metric.id === 'tokens') return agg.avgTokens;
+  if (metric.id.startsWith('score:')) {
+    const key = metric.id.slice('score:'.length);
+    return key in agg.avgScores ? agg.avgScores[key] : null;
+  }
+  return null;
+}
+
+export interface HistogramBin {
+  lo: number;
+  hi: number;
+  count: number;
+}
+
+// Fixed-width bins spanning the observed range; empty bins are kept so the
+// bars read as one continuous distribution instead of a sparse strip.
+export function histogram(values: number[], binCount = 9): HistogramBin[] {
+  if (values.length === 0) return [];
+  let lo = Math.min(...values);
+  let hi = Math.max(...values);
+  if (lo === hi) {
+    lo -= 1;
+    hi += 1;
+  }
+  const width = (hi - lo) / binCount;
+  const bins: HistogramBin[] = Array.from({ length: binCount }, (_, i) => ({
+    lo: lo + i * width,
+    hi: lo + (i + 1) * width,
+    count: 0,
+  }));
+  for (const v of values) {
+    const idx = Math.min(binCount - 1, Math.floor((v - lo) / width));
+    bins[idx].count++;
+  }
+  return bins;
+}
+
+// Series/small-multiples stay CVD-safe (and legible) only for the first four slots.
+export const SERIES_CAP = 4;
+
+const SERIES_VARS = ['var(--series-1)', 'var(--series-2)', 'var(--series-3)', 'var(--series-4)'];
+
+// A, B, C… for the ordered experiments.
+export function letterFor(index: number): string {
+  return String.fromCharCode(65 + index);
+}
+
+// Comparison index (0-based); past the palette, fold to a neutral tone.
+export function comparisonColor(index: number): string {
+  return SERIES_VARS[index] ?? 'var(--text-tertiary)';
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/types.ts b/internal/cmd/templates/experiment-comparison/src/types.ts
new file mode 100644
index 0000000..c04edc7
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/types.ts
@@ -0,0 +1,55 @@
+export interface Dataset {
+  id: string;
+  name: string;
+}
+
+export interface Experiment {
+  id: string;
+  name: string;
+}
+
+// Per-run feedback_stats is an untyped nested map from the API
+// ({ [key]: { avg, n, ... } }); read it through scoreFor in lib/delta.
+export interface ExperimentRun {
+  session_id: string;
+  outputs: Record<string, unknown> | null;
+  outputs_preview: string | null;
+  error: string | null;
+  start_time: string;
+  end_time: string | null;
+  total_tokens: number | null;
+  total_cost: string | null;
+  feedback_stats: Record<string, Record<string, unknown>> | null;
+}
+
+export interface ExampleWithRuns {
+  id: string;
+  name: string;
+  inputs: Record<string, unknown> | null;
+  outputs: Record<string, unknown> | null;
+  runs: ExperimentRun[];
+}
+
+export interface FeedbackConfigSchema {
+  feedback_key: string;
+  is_lower_score_better: boolean | null;
+}
+
+// An ordered experiment with its display letter and series color (baseline first).
+export interface ExperimentView {
+  id: string;
+  name: string;
+  letter: string;
+  color: string;
+  isBaseline: boolean;
+}
+
+// Per-experiment aggregates derived client-side over the fetched examples.
+export interface Aggregate {
+  experimentId: string;
+  runCount: number;
+  avgLatencyMs: number | null;
+  totalCost: number | null;
+  avgTokens: number | null;
+  avgScores: Record<string, number>;
+}
diff --git a/internal/cmd/templates/experiment-comparison/src/vite-env.d.ts b/internal/cmd/templates/experiment-comparison/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/internal/cmd/templates/experiment-comparison/tailwind.config.js b/internal/cmd/templates/experiment-comparison/tailwind.config.js
new file mode 100644
index 0000000..623e1a9
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/tailwind.config.js
@@ -0,0 +1,128 @@
+const withAlpha = (cssVar) => ({ opacityValue }) =>
+  opacityValue !== undefined
+    ? `color-mix(in srgb, ${cssVar} calc(${opacityValue} * 100%), transparent)`
+    : cssVar;
+
+const spaceScale = {
+  'space-1': '0.25rem',
+  'space-2': '0.5rem',
+  'space-3': '0.75rem',
+  'space-4': '1rem',
+  'space-5': '1.25rem',
+  'space-6': '1.5rem',
+  'space-7': '2rem',
+  'space-8': '2.5rem',
+  'space-9': '4rem',
+};
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      backgroundColor: {
+        // Surfaces
+        'surface-level-1': withAlpha('var(--bg-surface-level-1)'),
+        'surface-level-2': withAlpha('var(--bg-surface-level-2)'),
+        'surface-level-3': withAlpha('var(--bg-surface-level-3)'),
+        'surface-level-4': withAlpha('var(--bg-surface-level-4)'),
+        'elevated': withAlpha('var(--bg-elevated)'),
+        'elevated-hover': withAlpha('var(--bg-elevated-hover)'),
+        'disabled': withAlpha('var(--bg-disabled)'),
+        // Brand
+        'brand': withAlpha('var(--bg-brand)'),
+        'brand-hover': withAlpha('var(--bg-brand-hover)'),
+        'brand-subtle': withAlpha('var(--bg-brand-subtle)'),
+        'brand-subtle-hover': withAlpha('var(--bg-brand-subtle-hover)'),
+        'brand-muted': withAlpha('var(--bg-brand-muted)'),
+        // Intent
+        'success': withAlpha('var(--bg-success)'),
+        'success-subtle': withAlpha('var(--bg-success-subtle)'),
+        'success-strong': withAlpha('var(--bg-success-strong)'),
+        'error': withAlpha('var(--bg-error)'),
+        'error-subtle': withAlpha('var(--bg-error-subtle)'),
+        'error-strong': withAlpha('var(--bg-error-strong)'),
+        'warning': withAlpha('var(--bg-warning)'),
+        'warning-subtle': withAlpha('var(--bg-warning-subtle)'),
+        'warning-strong': withAlpha('var(--bg-warning-strong)'),
+        // Controls
+        'control-active': withAlpha('var(--bg-control-active)'),
+        'control-thumb': withAlpha('var(--bg-control-thumb)'),
+        'control-disabled': withAlpha('var(--bg-control-disabled)'),
+        // Selected
+        'selected': withAlpha('var(--bg-selected)'),
+        'selected-hover': withAlpha('var(--bg-selected-hover)'),
+        // Deprecated aliases (for compatibility with existing classes)
+        'primary': withAlpha('var(--bg-surface-level-1)'),
+        'secondary': withAlpha('var(--bg-surface-level-2)'),
+        'tertiary': withAlpha('var(--bg-surface-level-3)'),
+        'quaternary': withAlpha('var(--bg-surface-level-4)'),
+      },
+      borderColor: {
+        'default': withAlpha('var(--border-default)'),
+        'subtle': withAlpha('var(--border-subtle)'),
+        'muted': withAlpha('var(--border-muted)'),
+        'faint': withAlpha('var(--border-faint)'),
+        'strong': withAlpha('var(--border-strong)'),
+        'disabled': withAlpha('var(--border-disabled)'),
+        'focus': withAlpha('var(--border-focus)'),
+        'error': withAlpha('var(--border-error)'),
+        'error-strong': withAlpha('var(--border-error-strong)'),
+        'brand': withAlpha('var(--border-brand)'),
+        'brand-strong': withAlpha('var(--border-brand-strong)'),
+        'brand-subtle': withAlpha('var(--border-brand-subtle)'),
+        'warning': withAlpha('var(--border-warning)'),
+        'success': withAlpha('var(--border-success)'),
+        // Deprecated aliases
+        'primary': withAlpha('var(--border-default)'),
+        'secondary': withAlpha('var(--border-subtle)'),
+        'tertiary': withAlpha('var(--border-muted)'),
+        'quaternary': withAlpha('var(--border-faint)'),
+      },
+      textColor: {
+        'primary': withAlpha('var(--text-primary)'),
+        'secondary': withAlpha('var(--text-secondary)'),
+        'tertiary': withAlpha('var(--text-tertiary)'),
+        'quaternary': withAlpha('var(--text-quaternary)'),
+        'disabled': withAlpha('var(--text-disabled)'),
+        'placeholder': withAlpha('var(--text-placeholder)'),
+        'error-primary': withAlpha('var(--text-error-primary)'),
+        'error-secondary': withAlpha('var(--text-error-secondary)'),
+        'warning-primary': withAlpha('var(--text-warning-primary)'),
+        'success-primary': withAlpha('var(--text-success-primary)'),
+        'brand-primary': withAlpha('var(--text-brand-primary)'),
+        'brand-secondary': withAlpha('var(--text-brand-secondary)'),
+        'brand-on-fill': withAlpha('var(--text-brand-on-fill)'),
+        'link': withAlpha('var(--text-link)'),
+        'link-hover': withAlpha('var(--text-link-hover)'),
+        'icon-primary': withAlpha('var(--icon-primary)'),
+        'icon-secondary': withAlpha('var(--icon-secondary)'),
+        'icon-tertiary': withAlpha('var(--icon-tertiary)'),
+        'icon-disabled': withAlpha('var(--icon-disabled)'),
+        'icon-brand': withAlpha('var(--icon-brand)'),
+        'icon-error': withAlpha('var(--icon-error)'),
+        'icon-success': withAlpha('var(--icon-success)'),
+        'icon-warning': withAlpha('var(--icon-warning)'),
+      },
+      borderRadius: {
+        'xs': 'var(--radius-xs)',
+        'sm': 'var(--radius-sm)',
+        'md': 'var(--radius-md)',
+        'lg': 'var(--radius-lg)',
+        'xl': 'var(--radius-xl)',
+        'full': 'var(--radius-full)',
+      },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+      },
+      gap: spaceScale,
+      padding: spaceScale,
+      margin: spaceScale,
+      space: spaceScale,
+    },
+  },
+  plugins: [],
+};
diff --git a/internal/cmd/templates/experiment-comparison/tsconfig.json b/internal/cmd/templates/experiment-comparison/tsconfig.json
new file mode 100644
index 0000000..a4c834a
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/internal/cmd/templates/experiment-comparison/vite.config.ts b/internal/cmd/templates/experiment-comparison/vite.config.ts
new file mode 100644
index 0000000..977c289
--- /dev/null
+++ b/internal/cmd/templates/experiment-comparison/vite.config.ts
@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// Library-mode build: the sandbox this app runs in evaluates a single
+// dependency-free CJS file exporting { render(data, root, metadata) } — not a
+// self-mounting SPA. See src/entry.tsx and AGENTS.md.
+export default defineConfig({
+  plugins: [react()],
+  // Unlike Vite's normal app-mode build, library mode does NOT replace
+  // process.env.NODE_ENV on its own — React/ReactDOM's bundled source still
+  // references it internally. There's no `process` global in the sandboxed
+  // iframe (or any browser), so without this the bundle throws
+  // "ReferenceError: process is not defined" the moment it's required.
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    lib: {
+      entry: 'src/entry.tsx',
+      formats: ['cjs'],
+      fileName: () => 'bundle.js',
+    },
+  },
+});