diff --git a/docs/architecture/backend.md b/docs/architecture/backend.md index 0158fcc..0edaa0b 100644 --- a/docs/architecture/backend.md +++ b/docs/architecture/backend.md @@ -51,6 +51,7 @@ pi-web/ │ │ ├── new_session.go # New-session creation logic │ │ ├── git.go # /api/git/info, /api/git/rename-branch handlers │ │ ├── scratchpad.go # Per-project scratchpad get/save (SQLite) +│ │ ├── projects.go # Project visibility prefs: list/toggle/register + index filtering (SQLite) │ │ ├── sound.go # /api/sounds + /sounds/ asset serving │ │ ├── push.go # PushManager: VAPID, subscribe/unsubscribe, NotifyDone │ │ ├── update.go # /api/version, check-update, update, restart handlers @@ -116,9 +117,11 @@ and `RunRestart`. When `Updater` is nil the version/update routes are not regist when `RunInstall`/`RunRestart` are nil the corresponding endpoints respond `503`. On `New`, the server opens (and migrates) a SQLite database at -`~/.pi/agent/pi-web.sqlite` — currently a single `scratchpads` table keyed by -project path. A `PushManager` (when configured) persists web-push subscriptions and -VAPID keys under the agent dir. +`~/.pi/agent/pi-web.sqlite` — a `scratchpads` table keyed by project path, a +`project_prefs` table recording which projects are enabled, and an `app_settings` +key/value table holding the project-filter master switch (default off). See +`projects.go`. A `PushManager` (when configured) persists web-push subscriptions +and VAPID keys under the agent dir. ### `sessions.Session` @@ -208,6 +211,7 @@ type piRPCWorker struct { | `/api/git/info` | GET | `handleGitInfo` | Branch / dirty / PR-URL info for a project | | `/api/git/rename-branch` | POST | `handleGitRenameBranch` | Rename the current git branch | | `/api/scratchpad` | GET/POST | `handleGetScratchpad` / `handleSaveScratchpad` | Per-project scratchpad (SQLite) | +| `/api/projects` | GET/POST | `handleApiProjects` / `handleUpdateProject` | List projects + filter state; enable/disable/register/remove, bulk enable-all/disable-all, enable-filter/disable-filter (SQLite) | | `/api/sounds` | GET | `handleApiSounds` | List available notification sounds | | `/sounds/` | GET | `handleSounds` | Serve a sound asset (no auth) | | `/custom-themes.css` | GET | `handleCustomThemes` | User custom theme CSS | diff --git a/docs/architecture/system-overview.md b/docs/architecture/system-overview.md index b57d86e..dc04048 100644 --- a/docs/architecture/system-overview.md +++ b/docs/architecture/system-overview.md @@ -16,7 +16,7 @@ pi-web is a local HTTP server that lets you browse and interact with your pi cod | Live Updates | Server-Sent Events (SSE) | | Chat RPC | JSONL over stdin/stdout via `pi --mode rpc` | | Session Storage | JSONL files on disk; pi-web creates new session files and appends `session_info` for browser rename | -| Local DB | SQLite (`~/.pi/agent/pi-web.sqlite`) for per-project scratchpads | +| Local DB | SQLite (`~/.pi/agent/pi-web.sqlite`) for per-project scratchpads and project visibility prefs | | Auth | Token cookie/query/header (optional on localhost) | ## Component Diagram @@ -56,6 +56,7 @@ pi-web is a local HTTP server that lets you browse and interact with your pi cod │ GET /api/worker-status → handleWorkerStatus │ │ GET /api/git/info / POST /api/git/rename-branch │ │ GET/POST /api/scratchpad → scratchpad (SQLite) │ +│ GET/POST /api/projects → project visibility prefs (SQLite) │ │ GET /api/sounds / GET /sounds/… (notification sounds) │ │ POST /share → handleShare (GitHub Gist) │ │ GET /events → handleEvents (SSE) │ @@ -127,7 +128,7 @@ name, while pi-web itself continues listening only on localhost. ├── session-status/ │ ├── 2026-01-15T10-30-00.000Z_a1b2c3d4.jsonl ← terminal writes here │ └── … -├── pi-web.sqlite ← scratchpads (and future local state) +├── pi-web.sqlite ← scratchpads + project visibility prefs └── pi-web/ ├── pi-web-state.json ← server state file ├── custom-themes.css ← optional user custom theme @@ -135,6 +136,27 @@ name, while pi-web itself continues listening only on localhost. └── push-subs.json ← web-push subscriptions (when push enabled) ``` +## Project Visibility + +Project filtering is an **opt-in master switch**, stored in the `app_settings` +SQLite table (`project_filter_enabled`, default **off**). Per-project enable +state lives in the `project_prefs` table. Both are server-side, so they sync +across devices. See `internal/server/projects.go`. + +- **Filter off (default):** every session shows; new sessions (web- or + terminal-created) appear immediately, exactly like before the feature existed. +- **Filter on:** the index only renders sessions whose project is **enabled** — + an allowlist. Projects discovered after the table is first seeded default to + hidden, so one-off folders stay out of view. +- **First seed** (empty `project_prefs`): every discovered project is enabled, so + turning the filter on doesn't blank the homepage. +- **Registering** a folder path (`action: register`) pre-approves it so sessions + that later land there show immediately, even before any session exists. +- Filtering is applied server-side in both `handleIndex` and `handleApiSessions` + (no client flash) and is a no-op while the master switch is off. Manage via the + index menu → **Manage Projects** (search, select/deselect-all, register, and the + filter switch), backed by `GET/POST /api/projects`. + ## Startup Order 1. Parse CLI flags (`-p`, `-host`, `-o`, `-insecure`, `-version`) diff --git a/internal/server/btw.go b/internal/server/btw.go new file mode 100644 index 0000000..76abb65 --- /dev/null +++ b/internal/server/btw.go @@ -0,0 +1,106 @@ +package server + +import ( + "context" + "encoding/json" + "net/http" + "os" + + "pi-web/internal/sessions" +) + +// settingBtwSessionID is the app_settings key holding the id of the single, +// global "btw" scratch-chat session surfaced in the floating btw window. +const settingBtwSessionID = "btw_session_id" + +func (s *Server) getBtwSessionID() string { + if s.db == nil { + return "" + } + var v string + if err := s.db.QueryRow("SELECT value FROM app_settings WHERE key = ?", settingBtwSessionID).Scan(&v); err != nil { + return "" + } + return v +} + +func (s *Server) setBtwSessionID(id string) { + if s.db == nil { + return + } + prev := s.getBtwSessionID() + _, _ = s.db.Exec(`INSERT INTO app_settings (key, value) VALUES (?, ?) + ON CONFLICT(key) DO UPDATE SET value=excluded.value`, settingBtwSessionID, id) + // Notify every connected client (on any device) so an open btw window can + // switch to the new session in realtime. Only when it actually changed. + if id != prev { + s.broadcastBtwChanged(id) + } +} + +// broadcastBtwChanged tells all clients which session is now the global btw +// session. Sent on the global topic so any open btw window re-syncs even if it +// is currently subscribed to a different (or no) session. +func (s *Server) broadcastBtwChanged(id string) { + msg, err := formatSSEJSONEvent("btw-changed", map[string]string{"sessionId": id}) + if err != nil { + return + } + s.broadcast(globalSessID, msg) +} + +// handleGetBtw returns the current global btw session id, clearing the stored +// pointer if the session file has since been deleted so the client can fall +// back to its empty state. +func (s *Server) handleGetBtw(w http.ResponseWriter, r *http.Request) { + if r.Method != http.MethodGet { + writeJSONError(w, http.StatusMethodNotAllowed, "method not allowed") + return + } + id := s.getBtwSessionID() + if id != "" { + if _, err := sessions.ResolveByID(s.sessionsDir, id); err != nil { + id = "" + s.setBtwSessionID("") + } + } + writeJSON(w, http.StatusOK, map[string]any{"sessionId": id}) +} + +// handleNewBtw creates a fresh session, records it as the global btw session, +// and returns its id. The path defaults to the user's home directory when the +// caller does not supply one (e.g. the originating page had no cwd). +func (s *Server) handleNewBtw(w http.ResponseWriter, r *http.Request) { + if r.Method != http.MethodPost { + writeJSONError(w, http.StatusMethodNotAllowed, "method not allowed") + return + } + var body struct { + Path string `json:"path"` + } + if err := json.NewDecoder(r.Body).Decode(&body); err != nil { + writeJSONError(w, http.StatusBadRequest, "invalid json body") + return + } + path := body.Path + if path == "" { + path, _ = os.UserHomeDir() + } + + id, err := sessions.CreateSessionFileWithSettings(s.sessionsDir, path, sessions.InitialSettings{}) + if err != nil { + writeJSONError(w, http.StatusInternalServerError, err.Error()) + return + } + s.setBtwSessionID(id) + + // Pre-warm a worker so the first chat message lands quickly, mirroring + // handleNewSession. + if s.chatSender != nil { + if resolved, err := sessions.ResolveByID(s.sessionsDir, id); err == nil { + go s.initializeNewSessionWorker(context.Background(), resolved.Session.ID, resolved.Path, sessions.InitialSettings{}) + } + } + + writeJSON(w, http.StatusOK, map[string]any{"ok": true, "id": id}) +} diff --git a/internal/server/btw_test.go b/internal/server/btw_test.go new file mode 100644 index 0000000..3b1a0a4 --- /dev/null +++ b/internal/server/btw_test.go @@ -0,0 +1,128 @@ +package server + +import ( + "bytes" + "database/sql" + "encoding/json" + "net/http" + "net/http/httptest" + "testing" + + _ "modernc.org/sqlite" +) + +func newAppSettingsDB(t *testing.T) *sql.DB { + t.Helper() + db, err := sql.Open("sqlite", ":memory:") + if err != nil { + t.Fatalf("failed to open test db: %v", err) + } + if _, err := db.Exec(appSettingsSchema); err != nil { + t.Fatalf("failed to create app_settings table: %v", err) + } + t.Cleanup(func() { db.Close() }) + return db +} + +func TestBtwSessionIDRoundTrip(t *testing.T) { + db := newAppSettingsDB(t) + s := &Server{db: db} + + if got := s.getBtwSessionID(); got != "" { + t.Fatalf("expected empty id initially, got %q", got) + } + s.setBtwSessionID("abc.jsonl") + if got := s.getBtwSessionID(); got != "abc.jsonl" { + t.Fatalf("expected 'abc.jsonl', got %q", got) + } + // Upsert overwrites. + s.setBtwSessionID("def.jsonl") + if got := s.getBtwSessionID(); got != "def.jsonl" { + t.Fatalf("expected 'def.jsonl', got %q", got) + } +} + +func TestHandleNewBtwThenGet(t *testing.T) { + db := newAppSettingsDB(t) + dir := t.TempDir() + s := &Server{db: db, sessionsDir: dir} + + // Create a new btw session rooted at a real directory. + body := bytes.NewBufferString(`{"path":"` + dir + `"}`) + req := httptest.NewRequest(http.MethodPost, "/api/btw/new", body) + w := httptest.NewRecorder() + s.handleNewBtw(w, req) + + if w.Code != http.StatusOK { + t.Fatalf("expected 200 OK, got %d: %s", w.Code, w.Body.String()) + } + var created map[string]any + if err := json.Unmarshal(w.Body.Bytes(), &created); err != nil { + t.Fatal(err) + } + id, _ := created["id"].(string) + if id == "" { + t.Fatalf("expected a new session id, got %v", created) + } + if stored := s.getBtwSessionID(); stored != id { + t.Fatalf("expected stored btw id %q, got %q", id, stored) + } + + // GET returns the same id, since the session file now exists. + greq := httptest.NewRequest(http.MethodGet, "/api/btw", nil) + gw := httptest.NewRecorder() + s.handleGetBtw(gw, greq) + if gw.Code != http.StatusOK { + t.Fatalf("expected 200 OK on get, got %d", gw.Code) + } + var got map[string]any + if err := json.Unmarshal(gw.Body.Bytes(), &got); err != nil { + t.Fatal(err) + } + if got["sessionId"] != id { + t.Fatalf("expected sessionId %q, got %v", id, got["sessionId"]) + } +} + +func TestHandleGetBtwClearsStalePointer(t *testing.T) { + db := newAppSettingsDB(t) + s := &Server{db: db, sessionsDir: t.TempDir()} + + // Point at a session that does not exist on disk. + s.setBtwSessionID("2026-01-01T00-00-00.000Z_deadbeef.jsonl") + + req := httptest.NewRequest(http.MethodGet, "/api/btw", nil) + w := httptest.NewRecorder() + s.handleGetBtw(w, req) + if w.Code != http.StatusOK { + t.Fatalf("expected 200 OK, got %d", w.Code) + } + var got map[string]any + if err := json.Unmarshal(w.Body.Bytes(), &got); err != nil { + t.Fatal(err) + } + if got["sessionId"] != "" { + t.Fatalf("expected empty sessionId for stale pointer, got %v", got["sessionId"]) + } + if stored := s.getBtwSessionID(); stored != "" { + t.Fatalf("expected stale pointer cleared, still have %q", stored) + } +} + +func TestHandleBtwMethodGuards(t *testing.T) { + s := &Server{db: newAppSettingsDB(t), sessionsDir: t.TempDir()} + + // GET handler rejects POST. + w := httptest.NewRecorder() + s.handleGetBtw(w, httptest.NewRequest(http.MethodPost, "/api/btw", nil)) + if w.Code != http.StatusMethodNotAllowed { + t.Fatalf("expected 405 for POST on GET handler, got %d", w.Code) + } + + // new handler rejects GET. + w2 := httptest.NewRecorder() + s.handleNewBtw(w2, httptest.NewRequest(http.MethodGet, "/api/btw/new", nil)) + if w2.Code != http.StatusMethodNotAllowed { + t.Fatalf("expected 405 for GET on new handler, got %d", w2.Code) + } +} diff --git a/internal/server/handlers.go b/internal/server/handlers.go index 901ce7b..61655e0 100644 --- a/internal/server/handlers.go +++ b/internal/server/handlers.go @@ -29,6 +29,7 @@ func (s *Server) handleIndex(w http.ResponseWriter, r *http.Request) { http.Error(w, err.Error(), 500) return } + summaries = s.filterEnabledSummaries(summaries) sessions.SortSummariesByActivity(summaries) w.Header().Set("Content-Type", "text/html; charset=utf-8") if err := s.renderIndex(w, summaries); err != nil { @@ -169,6 +170,8 @@ func (s *Server) handleApiSessions(w http.ResponseWriter, r *http.Request) { } } summaries = filtered + } else { + summaries = s.filterEnabledSummaries(summaries) } sessions.SortSummariesByActivity(summaries) diff --git a/internal/server/projects.go b/internal/server/projects.go new file mode 100644 index 0000000..71be3d0 --- /dev/null +++ b/internal/server/projects.go @@ -0,0 +1,353 @@ +package server + +import ( + "encoding/json" + "errors" + "net/http" + "os" + "path/filepath" + "sort" + "strings" + "time" + + "pi-web/internal/sessions" +) + +var ( + errEmptyPath = errors.New("path is required") + errRelativePath = errors.New("path must be absolute") +) + +// projectPrefsSchema creates the table that records which projects are shown on +// the index page. A project is "enabled" when it should appear; new projects +// discovered after the first run default to disabled (allowlist), while the +// very first run seeds every existing project as enabled so the homepage looks +// unchanged until the user starts curating. +const projectPrefsSchema = `CREATE TABLE IF NOT EXISTS project_prefs ( + project_path TEXT PRIMARY KEY, + enabled INTEGER NOT NULL DEFAULT 1, + source TEXT NOT NULL DEFAULT 'discovered', + updated_at DATETIME +)` + +// appSettingsSchema holds simple key/value app preferences. Currently only the +// project-filter master switch. +const appSettingsSchema = `CREATE TABLE IF NOT EXISTS app_settings ( + key TEXT PRIMARY KEY, + value TEXT +)` + +const settingProjectFilterEnabled = "project_filter_enabled" + +// projectFilterEnabled reports whether the homepage should be filtered to only +// enabled projects. Off by default: with the filter off every project (and any +// new session) shows up normally. +func (s *Server) projectFilterEnabled() bool { + if s.db == nil { + return false + } + var v string + if err := s.db.QueryRow("SELECT value FROM app_settings WHERE key = ?", settingProjectFilterEnabled).Scan(&v); err != nil { + return false + } + return v == "1" +} + +func (s *Server) setProjectFilterEnabled(enabled bool) { + if s.db == nil { + return + } + v := "0" + if enabled { + v = "1" + } + _, _ = s.db.Exec(`INSERT INTO app_settings (key, value) VALUES (?, ?) + ON CONFLICT(key) DO UPDATE SET value=excluded.value`, settingProjectFilterEnabled, v) +} + +type projectEntry struct { + Path string `json:"path"` + Enabled bool `json:"enabled"` + SessionCount int `json:"sessionCount"` + Source string `json:"source"` +} + +func (s *Server) nowTime() time.Time { + if s.now != nil { + return s.now() + } + return time.Now() +} + +// distinctProjects returns the unique, non-empty project paths in first-seen +// order. +func distinctProjects(summaries []sessions.SessionSummary) []string { + seen := make(map[string]bool) + out := make([]string, 0) + for _, sum := range summaries { + if sum.Project == "" || seen[sum.Project] { + continue + } + seen[sum.Project] = true + out = append(out, sum.Project) + } + return out +} + +// syncProjectPrefs records any not-yet-tracked discovered projects. On the very +// first run (empty table) every discovered project is enabled; afterwards new +// projects are inserted disabled so they stay hidden until the user enables +// them. Existing rows are never modified. +func (s *Server) syncProjectPrefs(discovered []string) { + if s.db == nil || len(discovered) == 0 { + return + } + var count int + if err := s.db.QueryRow("SELECT COUNT(*) FROM project_prefs").Scan(&count); err != nil { + return + } + defaultEnabled := 0 + if count == 0 { + defaultEnabled = 1 + } + now := s.nowTime() + for _, p := range discovered { + if p == "" { + continue + } + _, _ = s.db.Exec(`INSERT INTO project_prefs (project_path, enabled, source, updated_at) + VALUES (?, ?, 'discovered', ?) + ON CONFLICT(project_path) DO NOTHING`, p, defaultEnabled, now) + } +} + +// enabledProjectSet returns the set of enabled project paths. The second return +// value is false when preferences are unavailable (no database), in which case +// callers should treat every project as enabled. +func (s *Server) enabledProjectSet() (map[string]bool, bool) { + if s.db == nil { + return nil, false + } + rows, err := s.db.Query("SELECT project_path FROM project_prefs WHERE enabled = 1") + if err != nil { + return nil, false + } + defer rows.Close() + set := make(map[string]bool) + for rows.Next() { + var p string + if err := rows.Scan(&p); err != nil { + return nil, false + } + set[p] = true + } + return set, true +} + +// filterEnabledSummaries drops sessions whose project is disabled. Sessions with +// an empty project are always kept. With no database it is a no-op. +func (s *Server) filterEnabledSummaries(summaries []sessions.SessionSummary) []sessions.SessionSummary { + if s.db == nil || !s.projectFilterEnabled() { + return summaries + } + s.syncProjectPrefs(distinctProjects(summaries)) + enabled, ok := s.enabledProjectSet() + if !ok { + return summaries + } + out := make([]sessions.SessionSummary, 0, len(summaries)) + for _, sum := range summaries { + if sum.Project == "" || enabled[sum.Project] { + out = append(out, sum) + } + } + return out +} + +func (s *Server) handleApiProjects(w http.ResponseWriter, r *http.Request) { + if r.Method != http.MethodGet { + writeJSONError(w, http.StatusMethodNotAllowed, "method not allowed") + return + } + summaries, err := s.loadSummaries() + if err != nil { + writeJSONError(w, http.StatusInternalServerError, err.Error()) + return + } + + counts := make(map[string]int) + for _, sum := range summaries { + if sum.Project != "" { + counts[sum.Project]++ + } + } + s.syncProjectPrefs(distinctProjects(summaries)) + + enabled := make(map[string]bool) + source := make(map[string]string) + if s.db != nil { + rows, err := s.db.Query("SELECT project_path, enabled, source FROM project_prefs") + if err == nil { + defer rows.Close() + for rows.Next() { + var p, src string + var en int + if err := rows.Scan(&p, &en, &src); err != nil { + continue + } + enabled[p] = en == 1 + source[p] = src + } + } + } + + // Union of projects that have sessions and projects recorded in prefs + // (e.g. registered paths without sessions yet). + paths := make(map[string]bool) + for p := range counts { + paths[p] = true + } + for p := range enabled { + paths[p] = true + } + + entries := make([]projectEntry, 0, len(paths)) + for p := range paths { + src := source[p] + if src == "" { + src = "discovered" + } + en := enabled[p] + // Without a database we cannot persist prefs; report everything enabled. + if s.db == nil { + en = true + } + entries = append(entries, projectEntry{ + Path: p, + Enabled: en, + SessionCount: counts[p], + Source: src, + }) + } + sort.Slice(entries, func(i, j int) bool { + if entries[i].SessionCount != entries[j].SessionCount { + return entries[i].SessionCount > entries[j].SessionCount + } + return entries[i].Path < entries[j].Path + }) + + writeJSON(w, 0, map[string]any{ + "projects": entries, + "filterEnabled": s.projectFilterEnabled(), + }) +} + +func (s *Server) handleUpdateProject(w http.ResponseWriter, r *http.Request) { + if r.Method != http.MethodPost { + writeJSONError(w, http.StatusMethodNotAllowed, "method not allowed") + return + } + var body struct { + Path string `json:"path"` + Action string `json:"action"` + } + if err := json.NewDecoder(r.Body).Decode(&body); err != nil { + writeJSONError(w, http.StatusBadRequest, "invalid json body") + return + } + if s.db == nil { + writeJSONError(w, http.StatusInternalServerError, "preferences are unavailable") + return + } + + if body.Action == "enable-filter" || body.Action == "disable-filter" { + s.setProjectFilterEnabled(body.Action == "enable-filter") + writeJSON(w, 0, map[string]any{"ok": true, "filterEnabled": s.projectFilterEnabled()}) + return + } + + if body.Action == "enable-all" || body.Action == "disable-all" { + s.setAllProjectsEnabled(body.Action == "enable-all") + writeJSON(w, 0, map[string]any{"ok": true}) + return + } + + path := body.Path + if body.Action == "register" { + normalized, err := normalizeProjectPath(path) + if err != nil { + writeJSONError(w, http.StatusBadRequest, err.Error()) + return + } + path = normalized + } + if strings.TrimSpace(path) == "" { + writeJSONError(w, http.StatusBadRequest, "path is required") + return + } + + now := s.nowTime() + var err error + switch body.Action { + case "enable": + _, err = s.db.Exec(`INSERT INTO project_prefs (project_path, enabled, source, updated_at) + VALUES (?, 1, 'discovered', ?) + ON CONFLICT(project_path) DO UPDATE SET enabled=1, updated_at=excluded.updated_at`, path, now) + case "disable": + _, err = s.db.Exec(`INSERT INTO project_prefs (project_path, enabled, source, updated_at) + VALUES (?, 0, 'discovered', ?) + ON CONFLICT(project_path) DO UPDATE SET enabled=0, updated_at=excluded.updated_at`, path, now) + case "register": + _, err = s.db.Exec(`INSERT INTO project_prefs (project_path, enabled, source, updated_at) + VALUES (?, 1, 'registered', ?) + ON CONFLICT(project_path) DO UPDATE SET enabled=1, updated_at=excluded.updated_at`, path, now) + case "remove": + _, err = s.db.Exec("DELETE FROM project_prefs WHERE project_path = ?", path) + default: + writeJSONError(w, http.StatusBadRequest, "unknown action") + return + } + if err != nil { + writeJSONError(w, http.StatusInternalServerError, "failed to update project: "+err.Error()) + return + } + writeJSON(w, 0, map[string]any{"ok": true, "path": path}) +} + +// setAllProjectsEnabled flips every known project (discovered ∪ registered) to +// enabled or disabled in one shot. Discovered projects are synced first so they +// exist as rows before the bulk update. +func (s *Server) setAllProjectsEnabled(enabled bool) { + if s.db == nil { + return + } + if summaries, err := s.loadSummaries(); err == nil { + s.syncProjectPrefs(distinctProjects(summaries)) + } + val := 0 + if enabled { + val = 1 + } + _, _ = s.db.Exec("UPDATE project_prefs SET enabled = ?, updated_at = ?", val, s.nowTime()) +} + +// normalizeProjectPath expands a leading ~ and cleans the path so a registered +// project matches the cwd recorded in future session headers. +func normalizeProjectPath(path string) (string, error) { + path = strings.TrimSpace(path) + if path == "" { + return "", errEmptyPath + } + if strings.HasPrefix(path, "~/") { + home, err := os.UserHomeDir() + if err != nil { + return "", err + } + path = filepath.Join(home, path[2:]) + } + path = filepath.Clean(path) + if !filepath.IsAbs(path) { + return "", errRelativePath + } + return path, nil +} diff --git a/internal/server/projects_test.go b/internal/server/projects_test.go new file mode 100644 index 0000000..cdeed49 --- /dev/null +++ b/internal/server/projects_test.go @@ -0,0 +1,302 @@ +package server + +import ( + "database/sql" + "encoding/json" + "net/http" + "net/http/httptest" + "os" + "path/filepath" + "strings" + "testing" + + "pi-web/internal/sessions" + + _ "modernc.org/sqlite" +) + +func newProjectPrefsDB(t *testing.T) *sql.DB { + t.Helper() + db, err := sql.Open("sqlite", ":memory:") + if err != nil { + t.Fatalf("open db: %v", err) + } + if _, err := db.Exec(projectPrefsSchema); err != nil { + t.Fatalf("create project_prefs: %v", err) + } + if _, err := db.Exec(appSettingsSchema); err != nil { + t.Fatalf("create app_settings: %v", err) + } + t.Cleanup(func() { db.Close() }) + return db +} + +func enabledSet(t *testing.T, s *Server) map[string]bool { + t.Helper() + set, ok := s.enabledProjectSet() + if !ok { + t.Fatal("enabledProjectSet not available") + } + return set +} + +func TestSyncProjectPrefs_FirstRunEnablesAll(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + s.syncProjectPrefs([]string{"/a", "/b"}) + + set := enabledSet(t, s) + if !set["/a"] || !set["/b"] { + t.Fatalf("first run should enable all discovered projects, got %v", set) + } +} + +func TestSyncProjectPrefs_NewProjectsHiddenAfterBootstrap(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + s.syncProjectPrefs([]string{"/a"}) // bootstrap: /a enabled + + s.syncProjectPrefs([]string{"/a", "/c"}) // /c appears later + set := enabledSet(t, s) + if !set["/a"] { + t.Fatal("/a should remain enabled") + } + if set["/c"] { + t.Fatal("/c discovered after bootstrap should be hidden by default") + } +} + +func TestSyncProjectPrefs_PreservesExistingState(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + s.syncProjectPrefs([]string{"/a"}) + // User disables /a. + if _, err := s.db.Exec("UPDATE project_prefs SET enabled = 0 WHERE project_path = ?", "/a"); err != nil { + t.Fatal(err) + } + // A later sync must not re-enable it. + s.syncProjectPrefs([]string{"/a", "/b"}) + set := enabledSet(t, s) + if set["/a"] { + t.Fatal("/a should stay disabled across syncs") + } +} + +func TestFilterEnabledSummaries(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + s.setProjectFilterEnabled(true) + // Seed: /a enabled, /b disabled. + s.syncProjectPrefs([]string{"/a"}) + s.syncProjectPrefs([]string{"/a", "/b"}) // /b hidden + + summaries := []sessions.SessionSummary{ + {ID: "1", Project: "/a"}, + {ID: "2", Project: "/b"}, + {ID: "3", Project: ""}, // empty project always kept + } + out := s.filterEnabledSummaries(summaries) + got := map[string]bool{} + for _, sum := range out { + got[sum.ID] = true + } + if !got["1"] || got["2"] || !got["3"] { + t.Fatalf("unexpected filter result: %v", got) + } +} + +func TestFilterEnabledSummaries_NoDBIsNoOp(t *testing.T) { + s := &Server{} + summaries := []sessions.SessionSummary{{ID: "1", Project: "/a"}} + if len(s.filterEnabledSummaries(summaries)) != 1 { + t.Fatal("without db, filtering should be a no-op") + } +} + +func TestFilterDisabledShowsEverything(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + // /b is disabled in prefs, but the master filter is off (default). + s.syncProjectPrefs([]string{"/a"}) + s.syncProjectPrefs([]string{"/a", "/b"}) + + summaries := []sessions.SessionSummary{{ID: "1", Project: "/a"}, {ID: "2", Project: "/b"}} + if got := s.filterEnabledSummaries(summaries); len(got) != 2 { + t.Fatalf("filter off should show everything, got %d", len(got)) + } + + s.setProjectFilterEnabled(true) + if got := s.filterEnabledSummaries(summaries); len(got) != 1 { + t.Fatalf("filter on should hide /b, got %d", len(got)) + } +} + +func TestHandleUpdateProject_FilterToggle(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + if s.projectFilterEnabled() { + t.Fatal("filter should default off") + } + + post := func(action string) { + body, _ := json.Marshal(map[string]string{"action": action}) + req := httptest.NewRequest(http.MethodPost, "/api/projects", strings.NewReader(string(body))) + w := httptest.NewRecorder() + s.handleUpdateProject(w, req) + if w.Code != http.StatusOK { + t.Fatalf("%s status = %d", action, w.Code) + } + } + + post("enable-filter") + if !s.projectFilterEnabled() { + t.Fatal("enable-filter should turn the filter on") + } + post("disable-filter") + if s.projectFilterEnabled() { + t.Fatal("disable-filter should turn the filter off") + } +} + +func TestHandleUpdateProject(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t)} + + post := func(path, action string) *httptest.ResponseRecorder { + body, _ := json.Marshal(map[string]string{"path": path, "action": action}) + req := httptest.NewRequest(http.MethodPost, "/api/projects", strings.NewReader(string(body))) + w := httptest.NewRecorder() + s.handleUpdateProject(w, req) + return w + } + + if w := post("/a", "enable"); w.Code != http.StatusOK { + t.Fatalf("enable status = %d", w.Code) + } + if !enabledSet(t, s)["/a"] { + t.Fatal("/a should be enabled") + } + + if w := post("/a", "disable"); w.Code != http.StatusOK { + t.Fatalf("disable status = %d", w.Code) + } + if enabledSet(t, s)["/a"] { + t.Fatal("/a should be disabled") + } + + // register stores the path with source=registered and enabled. + if w := post("/home/user/proj", "register"); w.Code != http.StatusOK { + t.Fatalf("register status = %d", w.Code) + } + var source string + if err := s.db.QueryRow("SELECT source FROM project_prefs WHERE project_path = ?", "/home/user/proj").Scan(&source); err != nil { + t.Fatal(err) + } + if source != "registered" { + t.Fatalf("source = %q, want registered", source) + } + + // remove deletes the row. + if w := post("/home/user/proj", "remove"); w.Code != http.StatusOK { + t.Fatalf("remove status = %d", w.Code) + } + var count int + if err := s.db.QueryRow("SELECT COUNT(*) FROM project_prefs WHERE project_path = ?", "/home/user/proj").Scan(&count); err != nil { + t.Fatal(err) + } + if count != 0 { + t.Fatal("removed project should be gone") + } + + if w := post("/a", "bogus"); w.Code != http.StatusBadRequest { + t.Fatalf("unknown action status = %d, want 400", w.Code) + } +} + +func TestHandleUpdateProject_BulkToggle(t *testing.T) { + s := &Server{db: newProjectPrefsDB(t), cache: sessions.NewCache(), sessionsDir: t.TempDir()} + s.syncProjectPrefs([]string{"/a", "/b", "/c"}) + + post := func(action string) *httptest.ResponseRecorder { + body, _ := json.Marshal(map[string]string{"action": action}) + req := httptest.NewRequest(http.MethodPost, "/api/projects", strings.NewReader(string(body))) + w := httptest.NewRecorder() + s.handleUpdateProject(w, req) + return w + } + + if w := post("disable-all"); w.Code != http.StatusOK { + t.Fatalf("disable-all status = %d", w.Code) + } + if len(enabledSet(t, s)) != 0 { + t.Fatal("disable-all should disable every project") + } + + if w := post("enable-all"); w.Code != http.StatusOK { + t.Fatalf("enable-all status = %d", w.Code) + } + set := enabledSet(t, s) + if !set["/a"] || !set["/b"] || !set["/c"] { + t.Fatalf("enable-all should enable every project, got %v", set) + } +} + +func TestHandleApiProjects(t *testing.T) { + sessionsDir := t.TempDir() + writeSessionWithCWD(t, filepath.Join(sessionsDir, "sub1"), "a.jsonl", "/home/user/project-a") + writeSessionWithCWD(t, filepath.Join(sessionsDir, "sub1"), "b.jsonl", "/home/user/project-a") + writeSessionWithCWD(t, filepath.Join(sessionsDir, "sub2"), "c.jsonl", "/home/user/project-b") + + s := &Server{db: newProjectPrefsDB(t), sessionsDir: sessionsDir, cache: sessions.NewCache()} + + req := httptest.NewRequest(http.MethodGet, "/api/projects", nil) + w := httptest.NewRecorder() + s.handleApiProjects(w, req) + if w.Code != http.StatusOK { + t.Fatalf("status = %d", w.Code) + } + + var payload struct { + Projects []projectEntry `json:"projects"` + } + if err := json.Unmarshal(w.Body.Bytes(), &payload); err != nil { + t.Fatal(err) + } + byPath := map[string]projectEntry{} + for _, p := range payload.Projects { + byPath[p.Path] = p + } + a, ok := byPath["/home/user/project-a"] + if !ok || a.SessionCount != 2 || !a.Enabled { + t.Fatalf("project-a entry wrong: %+v", a) + } + b, ok := byPath["/home/user/project-b"] + if !ok || b.SessionCount != 1 || !b.Enabled { + t.Fatalf("project-b entry wrong: %+v", b) + } +} + +func TestNormalizeProjectPath(t *testing.T) { + home, _ := os.UserHomeDir() + cases := []struct { + in string + want string + wantErr bool + }{ + {"/abs/path", "/abs/path", false}, + {"/abs/path/", "/abs/path", false}, + {"~/proj", filepath.Join(home, "proj"), false}, + {" /spaced ", "/spaced", false}, + {"relative/path", "", true}, + {"", "", true}, + } + for _, tc := range cases { + got, err := normalizeProjectPath(tc.in) + if tc.wantErr { + if err == nil { + t.Errorf("normalizeProjectPath(%q) expected error", tc.in) + } + continue + } + if err != nil { + t.Errorf("normalizeProjectPath(%q) error: %v", tc.in, err) + continue + } + if got != tc.want { + t.Errorf("normalizeProjectPath(%q) = %q, want %q", tc.in, got, tc.want) + } + } +} diff --git a/internal/server/server.go b/internal/server/server.go index 84c2ec6..1b1ec82 100644 --- a/internal/server/server.go +++ b/internal/server/server.go @@ -117,6 +117,12 @@ func New(deps Deps) *Server { if err != nil { fmt.Fprintf(os.Stderr, "failed to create scratchpads table: %v\n", err) } + if _, err := db.Exec(projectPrefsSchema); err != nil { + fmt.Fprintf(os.Stderr, "failed to create project_prefs table: %v\n", err) + } + if _, err := db.Exec(appSettingsSchema); err != nil { + fmt.Fprintf(os.Stderr, "failed to create app_settings table: %v\n", err) + } } s := &Server{ @@ -188,6 +194,13 @@ func (s *Server) Register(mux *http.ServeMux) { mux.HandleFunc("/api/clone-session", s.auth.Wrap(s.handleApiCloneSession)) mux.HandleFunc("/api/rename-session", s.auth.Wrap(s.handleRenameSession)) mux.HandleFunc("/api/recent-locations", s.auth.Wrap(s.handleRecentLocations)) + mux.HandleFunc("/api/projects", func(w http.ResponseWriter, r *http.Request) { + if r.Method == http.MethodPost { + s.auth.Wrap(s.handleUpdateProject)(w, r) + } else { + s.auth.Wrap(s.handleApiProjects)(w, r) + } + }) mux.HandleFunc("/api/git/info", s.auth.Wrap(s.handleGitInfo)) mux.HandleFunc("/api/git/rename-branch", s.auth.Wrap(s.handleGitRenameBranch)) mux.HandleFunc("/custom-themes.css", s.auth.Wrap(s.handleCustomThemes)) @@ -198,6 +211,8 @@ func (s *Server) Register(mux *http.ServeMux) { s.auth.Wrap(s.handleGetScratchpad)(w, r) } }) + mux.HandleFunc("/api/btw", s.auth.Wrap(s.handleGetBtw)) + mux.HandleFunc("/api/btw/new", s.auth.Wrap(s.handleNewBtw)) if s.push != nil { s.push.Register(mux, s.auth.Wrap) } diff --git a/internal/ui/live_menu.go b/internal/ui/live_menu.go index a59f1a2..befc179 100644 --- a/internal/ui/live_menu.go +++ b/internal/ui/live_menu.go @@ -55,6 +55,7 @@ func homeMenuHTML() template.HTML { Sections: []liveMenuSection{ {Items: []liveMenuItem{ {Label: "New Session", Attrs: `data-new-session-btn role="menuitem"`}, + {Label: "Manage Projects", Attrs: `id="manage-projects-btn" data-manage-projects-btn role="menuitem"`}, {Label: "Import Session", Muted: true, Attrs: `role="menuitem"`}, }}, {Items: []liveMenuItem{ @@ -93,7 +94,6 @@ func sessionMenuHTML(id, class, bodyClass, itemClass, toggleID, themeIconClass, ItemClass: itemClass, Sections: []liveMenuSection{ {Title: "Session", Items: []liveMenuItem{ - {Label: "New Session", Suffix: template.HTML("⌘T"), Attrs: `data-action="new-session"`}, {Label: "Search Sessions", Suffix: template.HTML("⌘K"), Attrs: `data-action="list-sessions"`}, }}, {Items: []liveMenuItem{ diff --git a/internal/ui/live_templates/chat_composer.html b/internal/ui/live_templates/chat_composer.html index 8116066..0589f0a 100644 --- a/internal/ui/live_templates/chat_composer.html +++ b/internal/ui/live_templates/chat_composer.html @@ -229,6 +229,11 @@ +
-
+
@@ -265,12 +269,16 @@ hidden />
+
+ -
+
@@ -303,5 +311,6 @@
+
diff --git a/internal/ui/live_templates/export/app/80-ui.js b/internal/ui/live_templates/export/app/80-ui.js index 8e1b056..d7d36d2 100644 --- a/internal/ui/live_templates/export/app/80-ui.js +++ b/internal/ui/live_templates/export/app/80-ui.js @@ -292,6 +292,11 @@ function setupSidebarCollapse() { if (hideSidebarBtn) { hideSidebarBtn.addEventListener('click', closeSidebar); } + + const sidebarCloseBtn = document.getElementById('sidebar-close'); + if (sidebarCloseBtn) { + sidebarCloseBtn.addEventListener('click', () => setSidebarOpen(false)); + } } setupSidebarCollapse(); diff --git a/internal/ui/live_templates/index.html b/internal/ui/live_templates/index.html index e72abb7..20f817d 100644 --- a/internal/ui/live_templates/index.html +++ b/internal/ui/live_templates/index.html @@ -37,6 +37,12 @@

Sessions + {{ if eq (len .) 0 }} +
+

No sessions to show

+

Enable projects from the menu (⋯ → Manage Projects) to see their sessions.

+
+ {{ end }} {{ $currentProject := "" }} {{ range . }} {{ if ne .Project $currentProject }} @@ -87,6 +93,40 @@

Start a new session

+ {{ liveServiceWorkerScript }} diff --git a/internal/ui/live_templates/session.html b/internal/ui/live_templates/session.html index 7e10840..92a4ec6 100644 --- a/internal/ui/live_templates/session.html +++ b/internal/ui/live_templates/session.html @@ -13,9 +13,20 @@
- ← Sessions +
+ ← Sessions + +
{{.Title}}
+ +
diff --git a/internal/ui/live_templates/styles/index.css b/internal/ui/live_templates/styles/index.css index f5f657f..9e4eb5f 100644 --- a/internal/ui/live_templates/styles/index.css +++ b/internal/ui/live_templates/styles/index.css @@ -72,6 +72,16 @@ a { color: inherit; } -webkit-app-region: no-drag; app-region: no-drag; } +/* The dropdown menu and modals are layered above the draggable header. Without + an explicit no-drag, the OS title-bar drag region swallows clicks on any of + their controls that overlap the header band (e.g. the top menu items). */ +:root.wco .web-menu, +:root.wco .web-menu *, +:root.wco .modal-overlay, +:root.wco .modal-overlay * { + -webkit-app-region: no-drag; + app-region: no-drag; +} .header-top { display: flex; align-items: center; @@ -494,6 +504,186 @@ body.modal-sheet-open { overflow: hidden; } } .modal-error { color: var(--danger); min-height: 16px; margin-top: 8px; font-size: 11px; } +.modal-hint { color: var(--muted); font-size: 12px; margin-bottom: 12px; line-height: 1.5; } +.projects-filter-switch { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 12px 0 14px; + margin-bottom: 12px; + border-bottom: 1px solid var(--dim); + cursor: pointer; +} +.projects-filter-title { display: block; color: var(--text); font-size: 13px; font-weight: 560; } +.projects-filter-desc { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; line-height: 1.4; } +.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } +.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } +.switch-slider { + position: absolute; + inset: 0; + background: var(--dim); + border-radius: 999px; + transition: background 0.15s ease; +} +.switch-slider::before { + content: ""; + position: absolute; + left: 3px; + top: 3px; + width: 16px; + height: 16px; + border-radius: 50%; + background: var(--text-soft); + transition: transform 0.15s ease, background 0.15s ease; +} +.switch input:checked + .switch-slider { background: var(--accent); } +.switch input:checked + .switch-slider::before { transform: translateX(16px); background: var(--body-bg); } +.switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); } +.projects-config.filter-off { opacity: 0.5; } +.projects-toolbar { + display: flex; + align-items: stretch; + gap: 8px; + margin-bottom: 10px; +} +.projects-search { + flex: 1 1 auto; + min-width: 0; + height: 36px; + box-sizing: border-box; + background: var(--body-bg); + border: 1px solid var(--dim); + color: var(--text); + padding: 0 12px; + border-radius: 6px; + outline: none; + font-size: 12px; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +.projects-search:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } +.projects-bulk-btn { + flex: 0 0 auto; + height: 36px; + box-sizing: border-box; + border: 1px solid var(--dim); + background: transparent; + color: var(--text-soft); + cursor: pointer; + font-size: 11px; + padding: 0 14px; + border-radius: 6px; + white-space: nowrap; + transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; +} +.projects-bulk-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted); background: var(--surface-2); } +.projects-bulk-btn:disabled { opacity: 0.5; cursor: default; } +.projects-list { + display: flex; + flex-direction: column; + gap: 2px; + width: 100%; + max-width: 100%; + max-height: 320px; + overflow-x: hidden; + overflow-y: auto; + margin-bottom: 12px; +} +.projects-empty { color: var(--muted); font-size: 12px; padding: 12px 4px; } +.project-row { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + max-width: 100%; + padding: 8px 6px; + border-radius: 6px; + box-sizing: border-box; +} +.project-row:hover { background: var(--surface-2); } +.project-row input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + width: 18px; + height: 18px; + margin: 0; + border: 1.5px solid var(--muted); + border-radius: 5px; + background: var(--body-bg); + cursor: pointer; + position: relative; + flex: 0 0 auto; + order: 0; + transition: background 0.15s ease, border-color 0.15s ease; +} +.project-row input[type="checkbox"]:hover { border-color: var(--text-soft); } +.project-row input[type="checkbox"]:checked { + background: var(--accent); + border-color: var(--accent); +} +.project-row input[type="checkbox"]:checked::after { + content: ""; + position: absolute; + top: 46%; + left: 50%; + width: 5px; + height: 9px; + border: solid var(--body-bg); + border-width: 0 2px 2px 0; + transform: translate(-50%, -50%) rotate(45deg); +} +.project-row input[type="checkbox"]:focus-visible { + outline: none; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); +} +.project-row-name { + color: var(--text); + font-size: 12px; + flex: 1 1 auto; + min-width: 0; + order: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + /* Truncate from the left so the distinguishing tail of long, common-prefixed + paths (the project folder) stays visible. */ + direction: rtl; + text-align: left; +} +.project-row-name bdi { direction: ltr; unicode-bidi: bidi-override; } +.project-row-count { color: var(--muted); font-size: 11px; white-space: nowrap; flex: 0 0 auto; order: 2; } +.project-row-remove { + border: 1px solid var(--dim); + background: transparent; + color: var(--muted); + cursor: pointer; + font-size: 11px; + padding: 3px 8px; + border-radius: 6px; + flex: 0 0 auto; + order: 3; + transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; +} +.project-row-remove:hover { color: var(--danger); border-color: var(--danger); } +.project-row.hidden, .projects-empty.hidden { display: none; } +.projects-footer { + margin-top: 10px; + padding-top: 16px; + border-top: 1px solid var(--dim); +} +.projects-footer-label { + display: block; + color: var(--text-soft); + font-size: 12px; + font-weight: 560; + margin-bottom: 8px; +} +.projects-footer input { margin-bottom: 0; } +#projectsModalError { min-height: 0; margin: 8px 0 0; } +#projectsModalError:empty { display: none; } +#projectsModalOverlay .modal-actions { margin-top: 14px; } + ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--dim); } @@ -537,6 +727,9 @@ body.modal-sheet-open { overflow: hidden; } } .modal { width: 100%; + min-width: 0; + max-width: 100vw; + overflow-x: hidden; /* Fill the fixed overlay instead of 100svh; iOS can report svh shorter and leave a top gap. */ height: 100%; max-height: none; @@ -621,4 +814,31 @@ body.modal-sheet-open { overflow: hidden; } min-height: 48px; font-size: 16px; } + + /* Manage Projects sheet: switch + footer stay fixed, the list scrolls. */ + .projects-filter-switch { flex-shrink: 0; } + .projects-config { + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; + } + .projects-toolbar { flex-shrink: 0; } + .projects-list { + flex: 1 1 auto; + min-height: 0; + max-height: none; + margin-bottom: 0; + } + .projects-footer { flex-shrink: 0; } + #projectsModalOverlay .modal-actions { + order: 0; + margin: 14px 0 0; + padding: 0; + border-top: 0; + background: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + } } diff --git a/internal/ui/live_templates/styles/session.css b/internal/ui/live_templates/styles/session.css index 262483f..54475ae 100644 --- a/internal/ui/live_templates/styles/session.css +++ b/internal/ui/live_templates/styles/session.css @@ -67,6 +67,7 @@ --mdCode: #8abeb7; --mdCodeBlock: #b5bd68; --mdCodeBlockBorder: #808080; + --code-bg: rgba(0, 0, 0, 0.28); --mdQuote: #808080; --mdQuoteBorder: #808080; --mdHr: #808080; @@ -158,6 +159,7 @@ --mdCode: #5a8080; --mdCodeBlock: #588458; --mdCodeBlockBorder: #6c6c6c; + --code-bg: rgba(0, 0, 0, 0.05); --mdQuote: #6c6c6c; --mdQuoteBorder: #6c6c6c; --mdHr: #6c6c6c; @@ -236,7 +238,7 @@ --darkGray: #3b4252; --accent-color: #88c0d0; --selectedBg: #434c5e; - --userMessageBg: #3b4252; + --userMessageBg: #434c5e; --toolPendingBg: #434c5e; --toolSuccessBg: #434c5e; --toolErrorBg: #4c566a; @@ -249,6 +251,7 @@ --mdCode: #8fbcbb; --mdCodeBlock: #a3be8c; --mdCodeBlockBorder: #4c566a; + --code-bg: #2e3440; --mdQuote: #d8dee9; --mdQuoteBorder: #4c566a; --mdHr: #4c566a; @@ -327,7 +330,7 @@ --darkGray: #44475a; --accent-color: #ff79c6; --selectedBg: #44475a; - --userMessageBg: #1e1f29; + --userMessageBg: #343746; --toolPendingBg: #343746; --toolSuccessBg: #343746; --toolErrorBg: #44475a; @@ -340,6 +343,7 @@ --mdCode: #8be9fd; --mdCodeBlock: #50fa7b; --mdCodeBlockBorder: #6272a4; + --code-bg: #282a36; --mdQuote: #f8f8f2; --mdQuoteBorder: #6272a4; --mdHr: #6272a4; @@ -418,6 +422,9 @@ --right-sidebar-width: 320px; --right-sidebar-min-width: 240px; --right-sidebar-max-width: 640px; + /* Shared height of the three bottom bars (left tree status, middle git/btw + action bar, right scratchpad footer) so their top divider lines align. */ + --session-footer-h: 34px; } * { @@ -503,6 +510,31 @@ border-color: var(--borderMuted); } + .sidebar-close { + display: none; + width: 28px; + height: 28px; + padding: 0; + font-size: 14px; + line-height: 1; + font-family: inherit; + align-items: center; + justify-content: center; + background: transparent; + color: var(--muted); + border: 1px solid var(--dim); + border-radius: 3px; + cursor: pointer; + flex-shrink: 0; + transition: color 0.15s, background 0.15s, border-color 0.15s; + } + + .sidebar-close:hover { + color: var(--text); + background: var(--hover); + border-color: var(--borderMuted); + } + #sidebar-resizer:hover, body.sidebar-resizing #sidebar-resizer { background: var(--selectedBg); @@ -623,7 +655,9 @@ } .right-sidebar-footer { - padding: 6px 12px; + min-height: var(--session-footer-h); + box-sizing: border-box; + padding: 0 12px; border-top: 1px solid var(--dim); flex-shrink: 0; display: flex; @@ -829,7 +863,11 @@ } .tree-status { - padding: 4px 12px; + display: flex; + align-items: center; + min-height: var(--session-footer-h); + box-sizing: border-box; + padding: 0 12px; font-size: 10px; color: var(--muted); flex-shrink: 0; @@ -1090,6 +1128,13 @@ app-region: no-drag; } + .session-header-left { + display: inline-flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + } + .session-header-back { display: inline-flex; align-items: center; @@ -1100,6 +1145,10 @@ flex-shrink: 0; } + .session-header-tree-toggle[aria-pressed="false"] { + color: var(--text); + } + .session-header-back span { color: var(--muted); font-size: 14px; @@ -1151,6 +1200,49 @@ border-color: var(--pi-menu-border); } + .session-header-new { + height: 24px; + padding: 0 9px 0 7px; + font-size: 11px; + font-weight: 500; + font-family: inherit; + display: inline-flex; + align-items: center; + gap: 3px; + background: var(--accent); + color: var(--bg); + border: 1px solid var(--accent); + border-radius: 4px; + cursor: pointer; + flex-shrink: 0; + margin-right: 8px; + transition: opacity 0.12s; + } + + .session-header-new span[aria-hidden] { + font-size: 14px; + line-height: 1; + } + + .session-header-new:hover, + .session-header-new:active { + opacity: 0.85; + } + + @media (max-width: 900px) { + .session-header-new { + padding: 0; + width: 28px; + height: 28px; + justify-content: center; + gap: 0; + } + + .session-header-new-label { + display: none; + } + } + .session-header-shortcuts-help { height: 24px; padding: 0 7px; @@ -1249,6 +1341,7 @@ color: var(--userMessageText); padding: var(--line-height); border-radius: 4px; + border-left: 3px solid var(--accent); position: relative; overflow-wrap: break-word; word-wrap: break-word; @@ -2141,11 +2234,11 @@ } #sidebar .hide-sidebar { - position: absolute; - right: 12px; - bottom: calc(12px + env(safe-area-inset-bottom)); - z-index: 2; - padding: 6px 10px; + display: none; + } + + .sidebar-close { + display: flex; } #content { @@ -2252,7 +2345,8 @@ align-items: center; justify-content: space-between; gap: 10px; - padding: 9px 16px calc(9px + env(safe-area-inset-bottom)); + min-height: var(--session-footer-h); + padding: 0 16px env(safe-area-inset-bottom); font-size: 11px; background: var(--chrome-bg); border-top: 1px solid var(--dim); @@ -2266,6 +2360,9 @@ min-width: 0; color: var(--muted); } + /* display:inline-flex above would otherwise defeat the [hidden] attribute + (equal specificity, author rule wins) — restore hiding for non-git cwds. */ + .pi-git-branch[hidden] { display: none; } .pi-git-icon { width: 13px; height: 13px; @@ -2319,6 +2416,15 @@ } .pi-git-branch-input[hidden] { display: none; } + .pi-git-right { + display: inline-flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + /* Stay pinned right even when the branch cluster is hidden (non-git cwd). */ + margin-left: auto; + } + .pi-git-actions { display: inline-flex; align-items: center; @@ -2402,6 +2508,241 @@ } .pi-git-caret[hidden] { display: none; } + /* ── btw floating window ── */ + .pi-btw-window { + position: fixed; + top: 0; + left: 0; + z-index: 1200; + display: flex; + flex-direction: column; + width: 340px; + min-width: 260px; + max-width: calc(100vw - 24px); + height: 420px; + min-height: 220px; + max-height: calc(100vh - 24px); + background: var(--container-bg, var(--surface)); + border: 1px solid var(--dim); + border-radius: 8px; + box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); + overflow: hidden; + resize: both; + } + .pi-btw-window[hidden] { display: none; } + + .pi-btw-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 10px 12px; + background: var(--chrome-bg); + border-bottom: 1px solid var(--dim); + cursor: move; + user-select: none; + touch-action: none; + } + .pi-btw-title { + font-family: Georgia, "Times New Roman", serif; + font-style: italic; + font-size: 17px; + color: var(--text); + } + .pi-btw-actions { + display: inline-flex; + align-items: center; + gap: 4px; + } + .pi-btw-new { + padding: 2px 9px; + font-size: 11px; + font-family: inherit; + background: transparent; + color: var(--text-soft); + border: 1px solid var(--dim); + border-radius: 4px; + cursor: pointer; + transition: color 0.15s, background 0.15s, border-color 0.15s; + } + .pi-btw-new:hover { + color: var(--text); + background: var(--hover); + border-color: var(--borderMuted); + } + .pi-btw-new:disabled { opacity: 0.5; cursor: default; } + .pi-btw-close { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + padding: 0; + font-size: 18px; + line-height: 1; + background: transparent; + color: var(--muted); + border: 0; + border-radius: 4px; + cursor: pointer; + transition: color 0.15s, background 0.15s; + } + .pi-btw-close:hover { + color: var(--text); + background: var(--hover); + } + + .pi-btw-body { + flex: 1 1 auto; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 8px; + padding: 14px 12px; + font-size: 13px; + line-height: 1.55; + color: var(--text-soft); + } + .pi-btw-empty { + margin: auto; + text-align: center; + color: var(--muted); + font-size: 12px; + } + .pi-btw-msg { + max-width: 90%; + min-width: 0; + box-sizing: border-box; + padding: 7px 10px; + border-radius: 9px; + overflow-wrap: anywhere; + } + .pi-btw-msg.user { + align-self: flex-end; + background: var(--accent, #8abeb7); + color: var(--body-bg, #1d1f21); + } + .pi-btw-msg.user.pending { opacity: 0.6; } + .pi-btw-msg.assistant { + align-self: flex-start; + background: var(--hover); + color: var(--text); + } + + /* Rendered markdown inside a bubble: tight spacing, readable proportional + text, monospace only for code. */ + .pi-btw-md { min-width: 0; max-width: 100%; } + .pi-btw-md > :first-child { margin-top: 0; } + .pi-btw-md > :last-child { margin-bottom: 0; } + .pi-btw-md p { margin: 0 0 8px; } + .pi-btw-md img, + .pi-btw-md table { max-width: 100%; } + .pi-btw-md ul, + .pi-btw-md ol { margin: 0 0 8px; padding-left: 20px; } + .pi-btw-md li { margin: 2px 0; } + .pi-btw-md h1, + .pi-btw-md h2, + .pi-btw-md h3, + .pi-btw-md h4 { margin: 10px 0 6px; font-size: 1.05em; line-height: 1.3; } + .pi-btw-md code { + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; + font-size: 0.9em; + padding: 1px 4px; + border-radius: 4px; + background: color-mix(in srgb, var(--text) 12%, transparent); + } + .pi-btw-md pre { + margin: 0 0 8px; + padding: 8px 10px; + overflow-x: auto; + border-radius: 6px; + background: var(--code-bg, rgba(0, 0, 0, 0.28)); + } + .pi-btw-md pre code { padding: 0; background: none; } + .pi-btw-md a { color: var(--mdLink, #8abeb7); } + .pi-btw-md blockquote { + margin: 0 0 8px; + padding-left: 10px; + border-left: 2px solid var(--dim); + color: var(--muted); + } + + /* Tool-call chips and bash lines. */ + .pi-btw-tool { + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; + font-size: 12px; + color: var(--muted); + overflow-wrap: anywhere; + } + .pi-btw-tool + .pi-btw-tool { margin-top: 2px; } + + /* Working / streaming indicator (cat runner). */ + .pi-btw-working { + display: inline-flex; + align-items: center; + gap: 6px; + color: var(--muted); + } + .pi-btw-spinner { + display: inline-block; + text-align: center; + color: var(--accent, #8abeb7); + } + .pi-btw-working-label { font-size: 12px; } + + .pi-btw-input-row { + flex-shrink: 0; + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + border-top: 1px solid var(--dim); + } + .pi-btw-input { + flex: 1 1 auto; + min-width: 0; + box-sizing: border-box; + padding: 8px 10px; + font-family: Georgia, "Times New Roman", serif; + font-size: 14px; + background: var(--input-bg); + color: var(--text); + border: 1px solid var(--dim); + border-radius: 5px; + outline: none; + } + .pi-btw-input::placeholder { color: var(--muted); } + .pi-btw-send { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + font-size: 14px; + background: transparent; + color: var(--text-soft); + border: 1px solid var(--dim); + border-radius: 5px; + cursor: pointer; + transition: color 0.15s, background 0.15s, border-color 0.15s; + } + .pi-btw-send:hover { + color: var(--text); + background: var(--hover); + border-color: var(--borderMuted); + } + .pi-btw-send.cancel { + border-radius: 50%; + color: var(--error, #d77); + border-color: color-mix(in srgb, var(--error, #d77) 55%, var(--dim)); + } + .pi-btw-send.cancel:hover { + color: #fff; + background: var(--error, #d77); + border-color: var(--error, #d77); + } + .pi-chat-shell { width: 100%; max-width: 760px; @@ -2951,26 +3292,6 @@ } /* Update indicator */ - .update-indicator { - position: fixed; - top: 8px; - right: 8px; - z-index: 200; - padding: 2px 8px; - font-size: 10px; - font-family: inherit; - background: var(--accent); - color: var(--body-bg); - border-radius: 3px; - opacity: 0; - transition: opacity 0.3s; - cursor: pointer; - } - - .update-indicator.visible { - opacity: 1; - } - /* Follow button */ .follow-button { position: fixed; diff --git a/internal/ui/live_templates/styles/theme.css b/internal/ui/live_templates/styles/theme.css index 95df894..ea1cea4 100644 --- a/internal/ui/live_templates/styles/theme.css +++ b/internal/ui/live_templates/styles/theme.css @@ -80,6 +80,7 @@ --mdCode: #8abeb7; --mdCodeBlock: #b5bd68; --mdCodeBlockBorder: #808080; + --code-bg: rgba(0, 0, 0, 0.28); --mdQuote: #808080; --mdQuoteBorder: #808080; --mdHr: #808080; @@ -170,6 +171,7 @@ --mdCode: #5a8080; --mdCodeBlock: #588458; --mdCodeBlockBorder: #6c6c6c; + --code-bg: rgba(0, 0, 0, 0.05); --mdQuote: #6c6c6c; --mdQuoteBorder: #6c6c6c; --mdHr: #6c6c6c; @@ -247,7 +249,7 @@ --darkGray: #3b4252; --accent-color: #88c0d0; --selectedBg: #434c5e; - --userMessageBg: #3b4252; + --userMessageBg: #434c5e; --toolPendingBg: #434c5e; --toolSuccessBg: #434c5e; --toolErrorBg: #4c566a; @@ -260,6 +262,7 @@ --mdCode: #8fbcbb; --mdCodeBlock: #a3be8c; --mdCodeBlockBorder: #4c566a; + --code-bg: #2e3440; --mdQuote: #d8dee9; --mdQuoteBorder: #4c566a; --mdHr: #4c566a; @@ -337,7 +340,7 @@ --darkGray: #44475a; --accent-color: #ff79c6; --selectedBg: #44475a; - --userMessageBg: #1e1f29; + --userMessageBg: #343746; --toolPendingBg: #343746; --toolSuccessBg: #343746; --toolErrorBg: #44475a; @@ -350,6 +353,7 @@ --mdCode: #8be9fd; --mdCodeBlock: #50fa7b; --mdCodeBlockBorder: #6272a4; + --code-bg: #282a36; --mdQuote: #f8f8f2; --mdQuoteBorder: #6272a4; --mdHr: #6272a4; diff --git a/web/src/index/index.js b/web/src/index/index.js index 335e558..152be1c 100644 --- a/web/src/index/index.js +++ b/web/src/index/index.js @@ -49,6 +49,19 @@ export function runIndexPage({ const spinnerStatus = documentImpl.getElementById('index-spinner-status'); const layoutBtns = Array.from(documentImpl.querySelectorAll('[data-layout-btn]')); const layoutStorageKey = 'pi-sessions:view-layout'; + const manageProjectsBtns = Array.from(documentImpl.querySelectorAll('[data-manage-projects-btn]')); + const projectsModalOverlay = documentImpl.getElementById('projectsModalOverlay'); + const projectsModalBackBtn = documentImpl.getElementById('projectsModalBackBtn'); + const projectsDoneBtn = documentImpl.getElementById('projectsDoneBtn'); + const projectsList = documentImpl.getElementById('projectsList'); + const projectsAddPath = documentImpl.getElementById('projectsAddPath'); + const projectsAddBtn = documentImpl.getElementById('projectsAddBtn'); + const projectsModalError = documentImpl.getElementById('projectsModalError'); + const projectsSearch = documentImpl.getElementById('projectsSearch'); + const projectsToggleAllBtn = documentImpl.getElementById('projectsToggleAllBtn'); + const projectsFilterToggle = documentImpl.getElementById('projectsFilterToggle'); + const projectsFilterDesc = documentImpl.getElementById('projectsFilterDesc'); + const projectsConfig = documentImpl.getElementById('projectsConfig'); let modalHideTimer = null; let sessionPalette = null; @@ -330,6 +343,7 @@ export function runIndexPage({ const paletteOverlay = documentImpl.getElementById('sessionPalette'); if (paletteOverlay?.classList.contains('open')) closePalette(); else if (webMenu && !webMenu.hidden) closeMenu(); + else if (projectsModalOpen) hideProjectsModal(); else if (page.modal) hideModal(); } }); @@ -366,6 +380,249 @@ export function runIndexPage({ createBtn.addEventListener('click', doCreate); } + // ── Manage projects modal ── + + let projectsModalHideTimer = null; + let projectsModalOpen = false; + + function showProjectsModal() { + closeMenu(); + if (!projectsModalOverlay) return; + if (projectsModalHideTimer) { + clearTimeoutImpl(projectsModalHideTimer); + projectsModalHideTimer = null; + } + projectsModalOpen = true; + projectsModalOverlay.classList.add('visible'); + documentImpl.body?.classList.add('modal-sheet-open'); + const requestFrame = windowImpl.requestAnimationFrame?.bind(windowImpl) || ((fn) => setTimeoutImpl(fn, 0)); + requestFrame(() => projectsModalOverlay.classList.add('open')); + } + + function hideProjectsModal() { + projectsModalOpen = false; + if (projectsModalOverlay) { + projectsModalOverlay.classList.remove('open'); + if (projectsModalHideTimer) clearTimeoutImpl(projectsModalHideTimer); + projectsModalHideTimer = setTimeoutImpl(() => { + projectsModalOverlay.classList.remove('visible'); + projectsModalHideTimer = null; + }, 300); + } + documentImpl.body?.classList.remove('modal-sheet-open'); + } + + let projectsCache = []; + + function applyProjectsSearch() { + if (!projectsList) return; + const q = (projectsSearch?.value || '').trim().toLowerCase(); + const rows = projectsList.querySelectorAll('.project-row'); + let anyVisible = false; + rows.forEach((row) => { + const match = !q || (row.dataset.path || '').toLowerCase().includes(q); + row.classList.toggle('hidden', !match); + if (match) anyVisible = true; + }); + let noResults = projectsList.querySelector('[data-projects-no-results]'); + if (q && rows.length && !anyVisible) { + if (!noResults) { + noResults = documentImpl.createElement('div'); + noResults.className = 'projects-empty'; + noResults.setAttribute('data-projects-no-results', ''); + noResults.textContent = 'No projects match your search.'; + projectsList.appendChild(noResults); + } + noResults.classList.remove('hidden'); + } else if (noResults) { + noResults.classList.add('hidden'); + } + } + + function updateToggleAllLabel() { + if (!projectsToggleAllBtn) return; + const allEnabled = projectsCache.length > 0 && projectsCache.every((p) => p.enabled); + projectsToggleAllBtn.textContent = allEnabled ? 'Deselect all' : 'Select all'; + projectsToggleAllBtn.dataset.target = allEnabled ? 'disable' : 'enable'; + projectsToggleAllBtn.disabled = projectsCache.length === 0; + } + + function renderProjectsList(projects) { + if (!projectsList) return; + projectsCache = projects; + updateToggleAllLabel(); + projectsList.innerHTML = ''; + if (!projects.length) { + const empty = documentImpl.createElement('div'); + empty.className = 'projects-empty'; + empty.textContent = 'No projects found yet.'; + projectsList.appendChild(empty); + return; + } + for (const project of projects) { + const row = documentImpl.createElement('div'); + row.className = 'project-row'; + row.dataset.path = project.path; + + const checkbox = documentImpl.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.checked = !!project.enabled; + const applyToggle = async () => { + checkbox.disabled = true; + try { + await page.setProjectEnabled(project.path, checkbox.checked); + } catch (err) { + checkbox.checked = !checkbox.checked; + if (projectsModalError) projectsModalError.textContent = err.message || 'Failed to update project'; + } finally { + checkbox.disabled = false; + } + }; + checkbox.addEventListener('change', applyToggle); + + const name = documentImpl.createElement('span'); + name.className = 'project-row-name'; + const nameText = documentImpl.createElement('bdi'); + nameText.textContent = project.path; + name.appendChild(nameText); + name.title = project.path; + name.addEventListener('click', () => { + if (checkbox.disabled) return; + checkbox.checked = !checkbox.checked; + applyToggle(); + }); + + const meta = documentImpl.createElement('span'); + meta.className = 'project-row-count'; + const count = project.sessionCount || 0; + meta.textContent = count === 1 ? '1 session' : `${count} sessions`; + + row.appendChild(checkbox); + row.appendChild(name); + row.appendChild(meta); + + if (project.source === 'registered') { + const remove = documentImpl.createElement('button'); + remove.type = 'button'; + remove.className = 'project-row-remove'; + remove.textContent = 'Remove'; + remove.addEventListener('click', async () => { + remove.disabled = true; + try { + await page.removeProject(project.path); + await refreshProjectsList(); + } catch (err) { + remove.disabled = false; + if (projectsModalError) projectsModalError.textContent = err.message || 'Failed to remove project'; + } + }); + row.appendChild(remove); + } + + projectsList.appendChild(row); + } + applyProjectsSearch(); + } + + function syncFilterToggle(filterEnabled) { + if (projectsFilterToggle) projectsFilterToggle.checked = filterEnabled; + if (projectsConfig) projectsConfig.classList.toggle('filter-off', !filterEnabled); + if (projectsFilterDesc) { + projectsFilterDesc.textContent = filterEnabled + ? 'Only checked projects appear on the homepage.' + : 'All projects are shown. Turn on to show only the checked ones.'; + } + } + + async function refreshProjectsList() { + if (projectsModalError) projectsModalError.textContent = ''; + try { + const { projects, filterEnabled } = await page.loadProjects(); + renderProjectsList(projects); + syncFilterToggle(filterEnabled); + } catch (err) { + if (projectsModalError) projectsModalError.textContent = err.message || 'Failed to load projects'; + } + } + + async function openProjectsModal() { + showProjectsModal(); + if (projectsAddPath) projectsAddPath.value = ''; + if (projectsSearch) projectsSearch.value = ''; + await refreshProjectsList(); + } + + async function doRegisterProject() { + if (!projectsAddPath) return; + const path = projectsAddPath.value.trim(); + if (!path) return; + if (projectsModalError) projectsModalError.textContent = ''; + if (projectsAddBtn) projectsAddBtn.disabled = true; + try { + await page.registerProject(path); + projectsAddPath.value = ''; + await refreshProjectsList(); + } catch (err) { + if (projectsModalError) projectsModalError.textContent = err.message || 'Failed to add project'; + } finally { + if (projectsAddBtn) projectsAddBtn.disabled = false; + } + } + + async function doToggleAll() { + if (!projectsToggleAllBtn) return; + const enable = projectsToggleAllBtn.dataset.target !== 'disable'; + projectsToggleAllBtn.disabled = true; + if (projectsModalError) projectsModalError.textContent = ''; + try { + await page.setAllProjectsEnabled(enable); + await refreshProjectsList(); + } catch (err) { + if (projectsModalError) projectsModalError.textContent = err.message || 'Failed to update projects'; + projectsToggleAllBtn.disabled = false; + } + } + + manageProjectsBtns.forEach((btn) => { + btn.addEventListener('click', openProjectsModal); + }); + + if (projectsSearch) projectsSearch.addEventListener('input', applyProjectsSearch); + if (projectsToggleAllBtn) projectsToggleAllBtn.addEventListener('click', doToggleAll); + if (projectsFilterToggle) { + projectsFilterToggle.addEventListener('change', async () => { + const enabled = projectsFilterToggle.checked; + projectsFilterToggle.disabled = true; + syncFilterToggle(enabled); + if (projectsModalError) projectsModalError.textContent = ''; + try { + await page.setFilterEnabled(enabled); + } catch (err) { + syncFilterToggle(!enabled); + if (projectsModalError) projectsModalError.textContent = err.message || 'Failed to update filter'; + } finally { + projectsFilterToggle.disabled = false; + } + }); + } + + if (projectsModalBackBtn) projectsModalBackBtn.addEventListener('click', hideProjectsModal); + if (projectsDoneBtn) projectsDoneBtn.addEventListener('click', hideProjectsModal); + if (projectsAddBtn) projectsAddBtn.addEventListener('click', doRegisterProject); + if (projectsAddPath) { + projectsAddPath.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + e.preventDefault(); + doRegisterProject(); + } + }); + } + if (projectsModalOverlay) { + projectsModalOverlay.addEventListener('click', (e) => { + if (e.target === projectsModalOverlay) hideProjectsModal(); + }); + } + let initialLayout = 'timeline'; try { initialLayout = windowImpl.localStorage.getItem(layoutStorageKey) === 'projects' ? 'projects' : 'timeline'; diff --git a/web/src/index/sessions-page.js b/web/src/index/sessions-page.js index e4b444a..e349010 100644 --- a/web/src/index/sessions-page.js +++ b/web/src/index/sessions-page.js @@ -148,6 +148,8 @@ export function createSessionsPage({ fetchRecent = () => getJSON('/api/recent-locations'), fetchSessions = () => getJSON('/api/sessions'), createSession = (path) => postJSON('/api/new-session', { path }), + fetchProjects = () => getJSON('/api/projects'), + updateProject = (path, action) => postJSON('/api/projects', { path, action }), createStatusEvents = defaultCreateStatusEvents, navigate = defaultNavigate, setTimeoutImpl = setTimeout, @@ -300,6 +302,42 @@ export function createSessionsPage({ return this.recent; }, + async loadProjects() { + const response = await fetchProjects(); + return { + projects: Array.isArray(response.projects) ? response.projects : [], + filterEnabled: !!response.filterEnabled + }; + }, + + async setProjectEnabled(path, enabled) { + await updateProject(path, enabled ? 'enable' : 'disable'); + await this.refreshSessions(); + }, + + async setAllProjectsEnabled(enabled) { + await updateProject('', enabled ? 'enable-all' : 'disable-all'); + await this.refreshSessions(); + }, + + async setFilterEnabled(enabled) { + await updateProject('', enabled ? 'enable-filter' : 'disable-filter'); + await this.refreshSessions(); + }, + + async registerProject(path) { + const p = (path || '').trim(); + if (!p) return false; + await updateProject(p, 'register'); + await this.refreshSessions(); + return true; + }, + + async removeProject(path) { + await updateProject(path, 'remove'); + await this.refreshSessions(); + }, + async create() { const p = this.path.trim(); if (!p) { diff --git a/web/src/index/sessions-page.test.js b/web/src/index/sessions-page.test.js index 72010f9..ad3be28 100644 --- a/web/src/index/sessions-page.test.js +++ b/web/src/index/sessions-page.test.js @@ -230,3 +230,86 @@ describe('createSessionsPage scalable state', () => { expect(page._reloadTimer).toBeNull(); }); }); + +describe('createSessionsPage project management', () => { + afterEach(() => { + document.body.innerHTML = ''; + }); + + it('loads projects and filter state from the API', async () => { + const fetchProjects = vi.fn(async () => ({ + filterEnabled: true, + projects: [ + { path: '/a', enabled: true, sessionCount: 2, source: 'discovered' }, + { path: '/b', enabled: false, sessionCount: 0, source: 'registered' } + ] + })); + const page = createSessionsPage({ fetchProjects }); + const { projects, filterEnabled } = await page.loadProjects(); + expect(projects).toHaveLength(2); + expect(projects[0].path).toBe('/a'); + expect(filterEnabled).toBe(true); + }); + + it('toggles the project filter mode then refreshes', async () => { + const updateProject = vi.fn(async () => ({ ok: true })); + const fetchSessions = vi.fn(async () => ({ sessions: [] })); + const page = createSessionsPage({ updateProject, fetchSessions }); + + await page.setFilterEnabled(true); + expect(updateProject).toHaveBeenCalledWith('', 'enable-filter'); + await page.setFilterEnabled(false); + expect(updateProject).toHaveBeenCalledWith('', 'disable-filter'); + expect(fetchSessions).toHaveBeenCalledTimes(2); + }); + + it('toggles a project then refreshes the session list', async () => { + const updateProject = vi.fn(async () => ({ ok: true })); + const fetchSessions = vi.fn(async () => ({ sessions: [] })); + const page = createSessionsPage({ updateProject, fetchSessions }); + + await page.setProjectEnabled('/a', false); + expect(updateProject).toHaveBeenCalledWith('/a', 'disable'); + expect(fetchSessions).toHaveBeenCalled(); + + await page.setProjectEnabled('/a', true); + expect(updateProject).toHaveBeenCalledWith('/a', 'enable'); + }); + + it('registers a project and ignores blank paths', async () => { + const updateProject = vi.fn(async () => ({ ok: true })); + const fetchSessions = vi.fn(async () => ({ sessions: [] })); + const page = createSessionsPage({ updateProject, fetchSessions }); + + const ok = await page.registerProject(' ~/proj '); + expect(ok).toBe(true); + expect(updateProject).toHaveBeenCalledWith('~/proj', 'register'); + + updateProject.mockClear(); + const blank = await page.registerProject(' '); + expect(blank).toBe(false); + expect(updateProject).not.toHaveBeenCalled(); + }); + + it('removes a project then refreshes', async () => { + const updateProject = vi.fn(async () => ({ ok: true })); + const fetchSessions = vi.fn(async () => ({ sessions: [] })); + const page = createSessionsPage({ updateProject, fetchSessions }); + + await page.removeProject('/b'); + expect(updateProject).toHaveBeenCalledWith('/b', 'remove'); + expect(fetchSessions).toHaveBeenCalled(); + }); + + it('enables/disables all projects then refreshes', async () => { + const updateProject = vi.fn(async () => ({ ok: true })); + const fetchSessions = vi.fn(async () => ({ sessions: [] })); + const page = createSessionsPage({ updateProject, fetchSessions }); + + await page.setAllProjectsEnabled(false); + expect(updateProject).toHaveBeenCalledWith('', 'disable-all'); + await page.setAllProjectsEnabled(true); + expect(updateProject).toHaveBeenCalledWith('', 'enable-all'); + expect(fetchSessions).toHaveBeenCalledTimes(2); + }); +}); diff --git a/web/src/session/chat/git-footer.js b/web/src/session/chat/git-footer.js index 3ad2ad3..2fab9d8 100644 --- a/web/src/session/chat/git-footer.js +++ b/web/src/session/chat/git-footer.js @@ -30,6 +30,7 @@ export function setupGitFooter({ const bar = documentImpl.getElementById('pi-git-bar'); if (!bar || !gitApi) return; + const branchWrap = documentImpl.getElementById('pi-git-branch'); const nameEl = documentImpl.getElementById('pi-git-branch-name'); const editBtn = documentImpl.getElementById('pi-git-branch-edit'); const input = documentImpl.getElementById('pi-git-branch-input'); @@ -96,9 +97,14 @@ export function setupGitFooter({ function applyInfo(info) { if (!info || !info.isRepo || !info.branch) { - bar.hidden = true; + // Not a git repo: hide the git controls but keep the bar itself visible, + // since it also hosts the always-available btw button. + show(branchWrap, false); + show(prWrap, false); + bar.hidden = false; return; } + show(branchWrap, true); currentBranch = info.branch; prCreateUrl = info.prCreateUrl || ''; existingPrUrl = info.prUrl || ''; diff --git a/web/src/session/chat/git-footer.test.js b/web/src/session/chat/git-footer.test.js index ef06315..c8878e5 100644 --- a/web/src/session/chat/git-footer.test.js +++ b/web/src/session/chat/git-footer.test.js @@ -40,12 +40,16 @@ afterEach(() => { }); describe('setupGitFooter', () => { - it('stays hidden when the cwd is not a git repo', async () => { + it('hides the git controls but keeps the bar visible (for btw) when the cwd is not a git repo', async () => { dom = createDom(); const gitApi = { getGitInfo: vi.fn().mockResolvedValue({ isRepo: false }) }; setupGitFooter({ documentImpl: document, windowImpl: window, sessionId: 's', gitApi }); await flush(); - expect(id('pi-git-bar').hidden).toBe(true); + // Bar stays visible so the always-available btw button remains reachable. + expect(id('pi-git-bar').hidden).toBe(false); + // Git-specific clusters are hidden. + expect(id('pi-git-branch').hidden).toBe(true); + expect(id('pi-git-pr').hidden).toBe(true); }); it('renders synchronously from data attributes before the async fetch resolves', () => { diff --git a/web/src/session/live/btw-popup.js b/web/src/session/live/btw-popup.js new file mode 100644 index 0000000..de24bfa --- /dev/null +++ b/web/src/session/live/btw-popup.js @@ -0,0 +1,613 @@ +// The "btw" floating window: a draggable, resizable scratch-chat opened from +// the git bar. It talks to a single global pi session ("the btw session") +// persisted server-side in the sqlite app_settings table, so the conversation +// survives reloads AND stays in sync across every device in realtime. The +// window itself is built entirely in JS, so the export snapshot (no +// composer/git bar) never includes it. +// +// Backend contract: +// GET /api/btw -> { sessionId } current btw session (or "") +// POST /api/btw/new {path} -> { id } create + adopt a new btw session +// POST /api/chat?id= (FormData message) send a message +// POST /api/chat/cancel?id= cancel the running turn +// GET /api/worker-status?id= -> { state } idle|running|error +// GET /api/session?id=-> { entries, ... } transcript +// /events?id= SSE: "reload" + "chat-preview" {content,done} +// /events?id=__all__ SSE: "btw-changed" {sessionId} cross-device pointer sync + +import { marked } from 'marked'; +import { safeMarkedParse } from '../render/markdown.js'; +import { formatToolCall } from '../render/session-format.js'; +import { getSpinnerConfig } from './chat-preview.js'; + +const POS_KEY = 'pi-btw:window'; +const GLOBAL_TOPIC = '__all__'; + +export function setupBtwPopup({ + documentImpl = document, + windowImpl = window, + fetchImpl, + EventSourceImpl, + cwd = '', + renderMarkdown, +} = {}) { + const button = documentImpl.getElementById('pi-btw-button'); + if (!button) return null; + + // On phones the floating window and the main chat composer fight for the same + // cramped screen, so we keep them mutually exclusive there. + const isMobile = () => + !!(windowImpl.matchMedia && windowImpl.matchMedia('(hover: none) and (pointer: coarse)').matches); + + const doFetch = fetchImpl || windowImpl.fetch.bind(windowImpl); + const ES = EventSourceImpl || windowImpl.EventSource; + const setInterval = windowImpl.setInterval.bind(windowImpl); + const clearInterval = windowImpl.clearInterval.bind(windowImpl); + const toHtml = + renderMarkdown || + ((text) => { + try { + return safeMarkedParse(String(text == null ? '' : text), { marked }); + } catch (_) { + return escape(text); + } + }); + + let win = null; + let els = null; + let sessionId = ''; + let eventSource = null; // per-session: messages + let globalSource = null; // global: btw pointer changes + let entries = []; + let pendingUser = null; // optimistic user message awaiting canonical reload + let streamingText = ''; // live assistant text from chat-preview + let running = false; // worker is generating + let statusTimer = null; + let spinnerTimer = null; + let spinnerFrame = 0; + let spinnerConfig = getSpinnerConfig(windowImpl); + let lastSentAt = 0; // grace window: a freshly-sent turn shows "running" before + // the worker has actually transitioned out of idle. + + // ── persisted window geometry / open-state ── + function loadGeom() { + try { + const raw = windowImpl.localStorage?.getItem(POS_KEY); + return raw ? JSON.parse(raw) : null; + } catch (_) { + return null; + } + } + function saveGeom(patch) { + try { + const cur = loadGeom() || {}; + windowImpl.localStorage?.setItem(POS_KEY, JSON.stringify({ ...cur, ...patch })); + } catch (_) { + /* localStorage unavailable */ + } + } + + function escape(text) { + const div = documentImpl.createElement('div'); + div.textContent = String(text == null ? '' : text); + return div.innerHTML; + } + + function buildWindow() { + const root = documentImpl.createElement('div'); + root.className = 'pi-btw-window'; + root.setAttribute('role', 'dialog'); + root.setAttribute('aria-label', 'btw'); + root.hidden = true; + + root.innerHTML = ` +
+ btw +
+ + +
+
+
+
+ + +
+ `; + + documentImpl.body.appendChild(root); + + els = { + header: root.querySelector('.pi-btw-header'), + newBtn: root.querySelector('.pi-btw-new'), + closeBtn: root.querySelector('.pi-btw-close'), + body: root.querySelector('#pi-btw-body'), + form: root.querySelector('#pi-btw-form'), + input: root.querySelector('#pi-btw-input'), + send: root.querySelector('#pi-btw-send'), + }; + + els.closeBtn.addEventListener('click', () => close()); + els.newBtn.addEventListener('click', () => startNewSession()); + els.form.addEventListener('submit', (e) => { + e.preventDefault(); + submitMessage(); + }); + els.send.addEventListener('click', () => { + if (running) cancel(); + else submitMessage(); + }); + enableDrag(root, els.header); + persistResize(root); + + const geom = loadGeom(); + if (geom && geom.width) root.style.width = `${geom.width}px`; + if (geom && geom.height) root.style.height = `${geom.height}px`; + + return root; + } + + // ── transcript rendering (markdown + tool calls) ── + function atBottom() { + if (!els) return true; + const b = els.body; + return b.scrollHeight - b.scrollTop - b.clientHeight < 40; + } + function scrollToBottom() { + if (els) els.body.scrollTop = els.body.scrollHeight; + } + + // Render one transcript entry to HTML, or '' to skip it. + function renderEntry(entry) { + if (!entry || entry.type !== 'message' || !entry.message) return ''; + const msg = entry.message; + + if (msg.role === 'user') { + const text = contentText(msg.content).trim(); + if (!text) return ''; + return `
${toHtml(text)}
`; + } + + if (msg.role === 'assistant') { + const parts = []; + const blocks = Array.isArray(msg.content) ? msg.content : []; + blocks.forEach((block) => { + if (block.type === 'text' && block.text && block.text.trim()) { + parts.push(`
${toHtml(block.text)}
`); + } else if (block.type === 'toolCall') { + parts.push( + `
${escape(formatToolCall(block.name, block.arguments || {}))}
` + ); + } + }); + // Plain-string assistant content (older entries) has no blocks. + if (parts.length === 0 && typeof msg.content === 'string' && msg.content.trim()) { + parts.push(`
${toHtml(msg.content)}
`); + } + if (parts.length === 0) return ''; + return `
${parts.join('')}
`; + } + + if (msg.role === 'bashExecution' && msg.command) { + return `
$ ${escape(msg.command)}
`; + } + + return ''; + } + + function contentText(content) { + if (typeof content === 'string') return content; + if (Array.isArray(content)) { + return content + .filter((c) => c && c.type === 'text' && c.text) + .map((c) => c.text) + .join(''); + } + return ''; + } + + function spinnerHtml() { + const frame = spinnerConfig.frames[spinnerFrame % spinnerConfig.frames.length] || ''; + return ``; + } + + function render() { + if (!els) return; + const stick = atBottom(); + const rows = []; + + entries.forEach((entry) => { + const html = renderEntry(entry); + if (html) rows.push(html); + }); + + if (pendingUser) { + rows.push(`
${toHtml(pendingUser)}
`); + } + + // Working / streaming bubble while the worker is generating. + if (running || streamingText) { + const inner = streamingText + ? `
${toHtml(streamingText)}
` + : `${spinnerHtml()}Working…`; + rows.push(`
${inner}
`); + } + + if (rows.length === 0) { + els.body.innerHTML = sessionId + ? '
No messages yet — say hello.
' + : '
Type a message to start a btw chat, or hit “new”.
'; + } else { + els.body.innerHTML = rows.join(''); + } + + if (stick) scrollToBottom(); + } + + // ── data loading + live updates ── + function loadTranscript() { + if (!sessionId) { + entries = []; + render(); + return Promise.resolve(); + } + return doFetch('/api/session?id=' + encodeURIComponent(sessionId)) + .then((r) => (r.ok ? r.json() : null)) + .then((data) => { + if (!data) return; + entries = data.entries || []; + if (pendingUser) { + const arrived = entries.some( + (e) => + e && + e.type === 'message' && + e.message && + e.message.role === 'user' && + contentText(e.message.content).trim() === pendingUser + ); + if (arrived) pendingUser = null; + } + render(); + }) + .catch(() => {}); + } + + function subscribe() { + unsubscribe(); + if (!sessionId || !ES) return; + eventSource = new ES('/events?id=' + encodeURIComponent(sessionId)); + eventSource.onmessage = (e) => { + if (e.data === 'reload') { + streamingText = ''; + loadTranscript(); + refreshStatus(); + } + }; + eventSource.addEventListener('chat-preview', (e) => { + try { + const p = JSON.parse(e.data); + streamingText = p.content || ''; + if (!p.done) setRunning(true); + render(); + } catch (_) { + /* ignore malformed preview */ + } + }); + eventSource.onerror = () => {}; + } + function unsubscribe() { + if (eventSource) { + try { + eventSource.close(); + } catch (_) { + /* already closed */ + } + eventSource = null; + } + } + + // Listen on the global topic so a "new" on another device switches us over. + function subscribeGlobal() { + if (globalSource || !ES) return; + globalSource = new ES('/events?id=' + encodeURIComponent(GLOBAL_TOPIC)); + globalSource.addEventListener('btw-changed', (e) => { + try { + const p = JSON.parse(e.data); + const id = p.sessionId || ''; + if (id !== sessionId) setSession(id); + } catch (_) { + /* ignore */ + } + }); + globalSource.onerror = () => {}; + } + function unsubscribeGlobal() { + if (globalSource) { + try { + globalSource.close(); + } catch (_) { + /* already closed */ + } + globalSource = null; + } + } + + // ── worker running state (spinner + cancel button) ── + function startSpinner() { + if (spinnerTimer) return; + spinnerConfig = getSpinnerConfig(windowImpl); + spinnerTimer = setInterval(() => { + spinnerFrame += 1; + if (!win || win.hidden) return; + const el = win.querySelector('.pi-btw-spinner'); + if (el) { + el.textContent = spinnerConfig.frames[spinnerFrame % spinnerConfig.frames.length] || ''; + } + }, spinnerConfig.interval || 100); + } + function stopSpinner() { + if (spinnerTimer) { + clearInterval(spinnerTimer); + spinnerTimer = null; + } + } + + function setRunning(on) { + const was = running; + running = !!on; + if (els && els.send) { + els.send.textContent = running ? '◼' : '▷'; + els.send.classList.toggle('cancel', running); + els.send.setAttribute('aria-label', running ? 'Cancel' : 'Send'); + els.send.title = running ? 'Stop' : 'Send'; + } + if (running) startSpinner(); + else stopSpinner(); + if (running && !streamingText && !was) render(); + if (!running) { + streamingText = ''; + if (was) render(); + } + } + + function refreshStatus() { + if (!sessionId) return Promise.resolve(); + return doFetch('/api/worker-status?id=' + encodeURIComponent(sessionId)) + .then((r) => (r.ok ? r.json() : null)) + .then((data) => { + if (!data) return; + if (data.state === 'running') setRunning(true); + else if (data.state === 'idle') { + // Ignore a transient idle right after sending: the worker may not have + // spun up yet. SSE/the next poll will confirm the real state. + if (Date.now() - lastSentAt > 3000) setRunning(false); + } else if (data.state === 'error') setRunning(false); + }) + .catch(() => {}); + } + + function startStatusPolling() { + if (statusTimer) return; + statusTimer = setInterval(() => refreshStatus(), 1500); + } + function stopStatusPolling() { + if (statusTimer) { + clearInterval(statusTimer); + statusTimer = null; + } + } + + function cancel() { + if (!sessionId) return; + doFetch('/api/chat/cancel?id=' + encodeURIComponent(sessionId), { method: 'POST' }) + .then(() => setRunning(false)) + .catch(() => {}); + } + + // ── actions ── + function setSession(id) { + sessionId = id || ''; + saveGeom({ sessionId }); + entries = []; + pendingUser = null; + streamingText = ''; + setRunning(false); + if (sessionId) { + subscribe(); + loadTranscript(); + refreshStatus(); + } else { + unsubscribe(); + render(); + } + } + + function createSession() { + return doFetch('/api/btw/new', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ path: cwd }), + }) + .then((r) => r.json()) + .then((data) => { + if (data && data.id) { + setSession(data.id); + return data.id; + } + throw new Error(data && data.error ? data.error : 'failed to create btw session'); + }); + } + + function startNewSession() { + if (els) els.newBtn.disabled = true; + createSession() + .catch(() => {}) + .finally(() => { + if (els) els.newBtn.disabled = false; + if (els) els.input.focus(); + }); + } + + async function submitMessage() { + const message = els.input.value.trim(); + if (!message) return; + + els.input.value = ''; + pendingUser = message; + lastSentAt = Date.now(); + render(); + + try { + if (!sessionId) await createSession(); + // createSession() runs setSession() which clears optimistic state; re-show + // the pending bubble so it stays visible until the canonical reload. + pendingUser = message; + setRunning(true); + render(); + const body = new windowImpl.FormData(); + body.set('message', message); + const resp = await doFetch('/api/chat?id=' + encodeURIComponent(sessionId), { + method: 'POST', + body, + }); + const data = await resp.json().catch(() => ({})); + if (!resp.ok) throw new Error(data.error || 'chat request failed'); + } catch (err) { + pendingUser = null; + setRunning(false); + els.input.value = message; + render(); + } + } + + // ── drag (move) + resize persistence ── + function enableDrag(root, handle) { + let dragging = false; + let startX = 0; + let startY = 0; + let originLeft = 0; + let originTop = 0; + + function onMove(e) { + if (!dragging) return; + const vw = windowImpl.innerWidth || 0; + const vh = windowImpl.innerHeight || 0; + const rect = root.getBoundingClientRect(); + const left = Math.max(0, Math.min(originLeft + (e.clientX - startX), vw - rect.width)); + const top = Math.max(0, Math.min(originTop + (e.clientY - startY), vh - rect.height)); + root.style.left = `${left}px`; + root.style.top = `${top}px`; + saveGeom({ left, top }); + } + function onUp() { + dragging = false; + documentImpl.removeEventListener('pointermove', onMove); + documentImpl.removeEventListener('pointerup', onUp); + } + handle.addEventListener('pointerdown', (e) => { + if (e.target && e.target.closest && e.target.closest('.pi-btw-actions')) return; + dragging = true; + const rect = root.getBoundingClientRect(); + originLeft = rect.left; + originTop = rect.top; + startX = e.clientX; + startY = e.clientY; + documentImpl.addEventListener('pointermove', onMove); + documentImpl.addEventListener('pointerup', onUp); + }); + } + + function persistResize(root) { + if (!windowImpl.ResizeObserver) return; + let raf = 0; + const ro = new windowImpl.ResizeObserver(() => { + if (raf) windowImpl.cancelAnimationFrame?.(raf); + raf = windowImpl.requestAnimationFrame + ? windowImpl.requestAnimationFrame(() => { + saveGeom({ width: root.offsetWidth, height: root.offsetHeight }); + }) + : 0; + }); + ro.observe(root); + } + + function placeInitial(root) { + const geom = loadGeom(); + if (geom && typeof geom.left === 'number' && typeof geom.top === 'number') { + root.style.left = `${geom.left}px`; + root.style.top = `${geom.top}px`; + return; + } + const vw = windowImpl.innerWidth || 0; + const vh = windowImpl.innerHeight || 0; + const rect = root.getBoundingClientRect(); + const left = Math.max(0, (vw - rect.width) / 2); + const top = Math.max(0, vh - rect.height - 90); + root.style.left = `${left}px`; + root.style.top = `${top}px`; + saveGeom({ left, top }); + } + + function open() { + if (!win) win = buildWindow(); + win.hidden = false; + placeInitial(win); + button.setAttribute('aria-expanded', 'true'); + saveGeom({ open: true }); + subscribeGlobal(); + startStatusPolling(); + // Sync to the persisted server-side btw session each time we open. + doFetch('/api/btw') + .then((r) => (r.ok ? r.json() : null)) + .then((data) => { + const id = data && data.sessionId ? data.sessionId : ''; + if (id !== sessionId) setSession(id); + else if (id) { + loadTranscript(); + refreshStatus(); + } else render(); + }) + .catch(() => render()); + if (els) els.input.focus(); + } + + function close() { + if (win) win.hidden = true; + button.setAttribute('aria-expanded', 'false'); + saveGeom({ open: false }); + unsubscribe(); + unsubscribeGlobal(); + stopStatusPolling(); + stopSpinner(); + } + + function toggle() { + if (win && !win.hidden) close(); + else open(); + } + + button.setAttribute('aria-haspopup', 'dialog'); + button.setAttribute('aria-expanded', 'false'); + button.addEventListener('click', (e) => { + e.preventDefault(); + toggle(); + }); + + // On mobile, focusing the main chat composer should never leave the btw + // window covering it — get out of the way. + const composerTextarea = documentImpl.getElementById('pi-chat-message'); + if (composerTextarea) { + composerTextarea.addEventListener('focus', () => { + if (isMobile() && win && !win.hidden) close(); + }); + } + + // Auto-reopen if it was open before a reload, so the chat "comes back" — but + // not on mobile, where it would cover the composer unexpectedly. + const initialGeom = loadGeom(); + if (initialGeom && initialGeom.open && !isMobile()) open(); + + return { open, close, toggle }; +} diff --git a/web/src/session/live/btw-popup.test.js b/web/src/session/live/btw-popup.test.js new file mode 100644 index 0000000..a6bccf8 --- /dev/null +++ b/web/src/session/live/btw-popup.test.js @@ -0,0 +1,282 @@ +import { describe, expect, it, vi, beforeEach } from 'vitest'; +import { JSDOM } from 'jsdom'; +import { setupBtwPopup } from './btw-popup.js'; + +class FakeEventSource { + constructor(url) { + this.url = url; + this.listeners = {}; + FakeEventSource.instances.push(this); + } + addEventListener(type, fn) { + this.listeners[type] = fn; + } + emit(type, data) { + if (type === 'message' && this.onmessage) this.onmessage({ data }); + else if (this.listeners[type]) this.listeners[type]({ data }); + } + close() { + this.closed = true; + } +} +FakeEventSource.instances = []; + +function makeEnv() { + const dom = new JSDOM('', { url: 'http://localhost/' }); + const win = dom.window; + win.ResizeObserver = class { + observe() {} + disconnect() {} + }; + FakeEventSource.instances = []; + return { dom, win, doc: win.document }; +} + +function jsonResponse(body, ok = true) { + return Promise.resolve({ ok, json: () => Promise.resolve(body) }); +} + +// A fetch router that covers every endpoint the popup touches. +function router(overrides = {}) { + return vi.fn((url, opts) => { + if (url === '/api/btw') return jsonResponse(overrides.btw || { sessionId: '' }); + if (url === '/api/btw/new') return jsonResponse(overrides.new || { id: 'new-sess.jsonl' }); + if (url.startsWith('/api/worker-status')) return jsonResponse(overrides.status || { state: 'idle' }); + if (url.startsWith('/api/session')) return jsonResponse(overrides.session || { entries: [] }); + if (url.startsWith('/api/chat/cancel')) return jsonResponse({ ok: true }); + if (url.startsWith('/api/chat')) { + (overrides.sent || []).push(url); + return jsonResponse({ status: 'queued' }); + } + return jsonResponse({}); + }); +} + +const flush = () => new Promise((r) => setTimeout(r, 0)); + +describe('btw popup', () => { + beforeEach(() => { + FakeEventSource.instances = []; + }); + + it('returns null when the button is missing', () => { + const dom = new JSDOM(''); + const result = setupBtwPopup({ documentImpl: dom.window.document, windowImpl: dom.window }); + expect(result).toBeNull(); + }); + + it('builds the window with new + close + input on first open', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router(); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + const w = doc.querySelector('.pi-btw-window'); + expect(w).not.toBeNull(); + expect(w.hidden).toBe(false); + expect(w.querySelector('.pi-btw-new')).not.toBeNull(); + expect(w.querySelector('.pi-btw-close')).not.toBeNull(); + expect(w.querySelector('#pi-btw-input')).not.toBeNull(); + expect(fetchImpl).toHaveBeenCalledWith('/api/btw'); + api.close(); + }); + + it('renders the transcript as markdown', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router({ + btw: { sessionId: 'sess-1.jsonl' }, + session: { + entries: [ + { id: 'a', type: 'message', message: { role: 'user', content: 'hi' } }, + { id: 'b', type: 'message', message: { role: 'assistant', content: [{ type: 'text', text: '**bold** answer' }] } }, + ], + }, + }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + const msgs = doc.querySelectorAll('.pi-btw-msg'); + expect(msgs.length).toBe(2); + expect(msgs[0].textContent.trim()).toBe('hi'); + // Markdown emphasis becomes a . + expect(msgs[1].querySelector('strong')).not.toBeNull(); + expect(msgs[1].textContent).toContain('bold'); + api.close(); + }); + + it('renders tool calls as chips', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router({ + btw: { sessionId: 'sess-1.jsonl' }, + session: { + entries: [ + { + id: 'a', + type: 'message', + message: { + role: 'assistant', + content: [ + { type: 'text', text: 'reading' }, + { type: 'toolCall', id: 't1', name: 'read', arguments: { path: '/repo/foo.go' } }, + ], + }, + }, + ], + }, + }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + const tool = doc.querySelector('.pi-btw-tool'); + expect(tool).not.toBeNull(); + expect(tool.textContent).toContain('read'); + api.close(); + }); + + it('creates a session then sends when none exists yet', async () => { + const { win, doc } = makeEnv(); + const sent = []; + const fetchImpl = router({ new: { id: 'new-sess.jsonl' }, sent }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource, cwd: '/repo/foo' }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + doc.getElementById('pi-btw-input').value = 'do a thing'; + doc.getElementById('pi-btw-form').dispatchEvent(new win.Event('submit')); + await flush(); + + expect(fetchImpl).toHaveBeenCalledWith('/api/btw/new', expect.objectContaining({ method: 'POST' })); + expect(sent[0]).toContain('new-sess.jsonl'); + expect(doc.querySelector('.pi-btw-msg.user')).not.toBeNull(); + api.close(); + }); + + it('new button posts to /api/btw/new with the cwd', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router({ new: { id: 'fresh.jsonl' } }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource, cwd: '/repo/bar' }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + doc.querySelector('.pi-btw-new').click(); + await flush(); + + const call = fetchImpl.mock.calls.find((c) => c[0] === '/api/btw/new'); + expect(JSON.parse(call[1].body)).toEqual({ path: '/repo/bar' }); + api.close(); + }); + + it('shows a working indicator and toggles the send button to cancel while running', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router({ btw: { sessionId: 'sess-1.jsonl' } }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + doc.getElementById('pi-btw-input').value = 'go'; + doc.getElementById('pi-btw-form').dispatchEvent(new win.Event('submit')); + await flush(); + + const send = doc.getElementById('pi-btw-send'); + expect(send.classList.contains('cancel')).toBe(true); + expect(doc.querySelector('.pi-btw-msg.working')).not.toBeNull(); + + // Clicking the cancel button cancels the running turn. + send.click(); + await flush(); + expect(fetchImpl.mock.calls.some((c) => String(c[0]).startsWith('/api/chat/cancel'))).toBe(true); + api.close(); + }); + + it('renders streaming assistant text from chat-preview events', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router({ btw: { sessionId: 'sess-1.jsonl' } }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + const es = FakeEventSource.instances.find((e) => e.url.includes('sess-1.jsonl')); + es.emit('chat-preview', JSON.stringify({ content: 'partial answer', done: false })); + + const streaming = doc.querySelector('.pi-btw-msg.assistant.working .pi-btw-md'); + expect(streaming).not.toBeNull(); + expect(streaming.textContent).toContain('partial answer'); + api.close(); + }); + + it('switches session in realtime on a global btw-changed event', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router({ btw: { sessionId: 'sess-1.jsonl' } }); + const api = setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + + const globalES = FakeEventSource.instances.find((e) => e.url.includes('__all__')); + expect(globalES).toBeTruthy(); + globalES.emit('btw-changed', JSON.stringify({ sessionId: 'sess-2.jsonl' })); + await flush(); + + // It should now be subscribed to the new session's events. + expect(FakeEventSource.instances.some((e) => e.url.includes('sess-2.jsonl'))).toBe(true); + api.close(); + }); + + it('closes when the main composer is focused on mobile', async () => { + const dom = new JSDOM( + '', + { url: 'http://localhost/' } + ); + const win = dom.window; + const doc = win.document; + win.ResizeObserver = class { observe() {} disconnect() {} }; + win.matchMedia = () => ({ matches: true }); // simulate a touch device + FakeEventSource.instances = []; + const fetchImpl = router(); + setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + + doc.getElementById('pi-btw-button').click(); + await flush(); + expect(doc.querySelector('.pi-btw-window').hidden).toBe(false); + + doc.getElementById('pi-chat-message').dispatchEvent(new win.FocusEvent('focus')); + expect(doc.querySelector('.pi-btw-window').hidden).toBe(true); + }); + + it('does not auto-reopen on mobile even if it was open before', async () => { + const dom = new JSDOM('', { url: 'http://localhost/' }); + const win = dom.window; + const doc = win.document; + win.ResizeObserver = class { observe() {} disconnect() {} }; + win.matchMedia = () => ({ matches: true }); + win.localStorage.setItem('pi-btw:window', JSON.stringify({ open: true })); + FakeEventSource.instances = []; + setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl: router(), EventSourceImpl: FakeEventSource }); + + // No window should have been built/opened on a touch device. + expect(doc.querySelector('.pi-btw-window')).toBeNull(); + }); + + it('toggles closed on a second button click', async () => { + const { win, doc } = makeEnv(); + const fetchImpl = router(); + setupBtwPopup({ documentImpl: doc, windowImpl: win, fetchImpl, EventSourceImpl: FakeEventSource }); + const btn = doc.getElementById('pi-btw-button'); + + btn.click(); + await flush(); + btn.click(); + + expect(doc.querySelector('.pi-btw-window').hidden).toBe(true); + expect(btn.getAttribute('aria-expanded')).toBe('false'); + }); +}); diff --git a/web/src/session/live/live-events.js b/web/src/session/live/live-events.js index 5bd62cf..ccb8aa6 100644 --- a/web/src/session/live/live-events.js +++ b/web/src/session/live/live-events.js @@ -14,7 +14,6 @@ export async function handleSessionReload({ appendEntry, upsertEntry, refreshEntriesAffectedByToolResult, - showIndicator = () => {}, updateStats = () => {}, updateTitle = () => {}, isFollowing = () => false, @@ -55,7 +54,6 @@ export async function handleSessionReload({ clearChatPreview(); if (newCount > 0) { - showIndicator(); updateStats(entries); if (isFollowing()) { scrollAfterLayout(true); diff --git a/web/src/session/live/live-events.test.js b/web/src/session/live/live-events.test.js index ec9a095..95eaa34 100644 --- a/web/src/session/live/live-events.test.js +++ b/web/src/session/live/live-events.test.js @@ -15,7 +15,6 @@ describe('live events', () => { const entryState = { seen: new Set(), liveRendered: new Set() }; const appendEntry = vi.fn((entry) => { entryState.seen.add(entry.id); return true; }); const refresh = vi.fn(); - const showIndicator = vi.fn(); const updateStats = vi.fn(); const updateTitle = vi.fn(); const scrollAfterLayout = vi.fn(); @@ -29,7 +28,6 @@ describe('live events', () => { appendEntry, upsertEntry: vi.fn(), refreshEntriesAffectedByToolResult: refresh, - showIndicator, updateStats, updateTitle, isFollowing: () => true, @@ -41,7 +39,6 @@ describe('live events', () => { expect(result.newCount).toBe(2); expect(onReloaded).toHaveBeenCalledWith({ name: 'New Title', entries }); expect(refresh).toHaveBeenCalledWith(entries[1], entries); - expect(showIndicator).toHaveBeenCalled(); expect(updateStats).toHaveBeenCalledWith(entries); expect(updateTitle).toHaveBeenCalledWith('New Title'); expect(scrollAfterLayout).toHaveBeenCalledWith(true); diff --git a/web/src/session/live/live-reload-runner.js b/web/src/session/live/live-reload-runner.js index 9e29994..c7a9403 100644 --- a/web/src/session/live/live-reload-runner.js +++ b/web/src/session/live/live-reload-runner.js @@ -14,7 +14,6 @@ export function runLiveReload({ liveScroll, liveStats, liveEvents, - updateIndicator, chatPreview, shareOverlay, resumeButton, @@ -37,7 +36,6 @@ export function runLiveReload({ const __piLiveScroll = liveScroll; const __piLiveStats = liveStats; const __piLiveEvents = liveEvents; - const __piUpdateIndicator = updateIndicator; const __piChatPreview = chatPreview; const __piShareOverlay = shareOverlay; const __piResumeButton = resumeButton; @@ -220,16 +218,6 @@ export function runLiveReload({ var es = null; var reconnectTimer = null; var reconnectAttempt = 0; - var UPDATE_INDICATOR_STATE = { indicator: null }; - - function showIndicator() { - return __piUpdateIndicator.showUpdateIndicator(UPDATE_INDICATOR_STATE, { - documentImpl: document, - requestAnimationFrameImpl: requestAnimationFrame, - setTimeoutImpl: setTimeout, - scrollToBottom: scrollToBottom - }); - } var CHAT_PREVIEW_STATE = { chatPreviewEl: null, pendingUserEl: null }; @@ -281,7 +269,6 @@ export function runLiveReload({ appendEntry: appendEntry, upsertEntry: upsertEntry, refreshEntriesAffectedByToolResult: refreshEntriesAffectedByToolResult, - showIndicator: showIndicator, updateStats: updateStats, updateTitle: updateTitle, isFollowing: function() { return FOLLOW; }, diff --git a/web/src/session/live/live-reload-runner.test.js b/web/src/session/live/live-reload-runner.test.js index 556e611..555fdb9 100644 --- a/web/src/session/live/live-reload-runner.test.js +++ b/web/src/session/live/live-reload-runner.test.js @@ -29,7 +29,6 @@ describe('live reload runner', () => { liveScroll: { isAtBottom: () => true, scrollToBottom: vi.fn(), scrollElementAboveComposer: vi.fn(), createFollowButton: vi.fn(), setFollowButtonText: vi.fn(), removeFollowButton: vi.fn() }, liveStats: { updateStatsDom: vi.fn() }, liveEvents, - updateIndicator: { showUpdateIndicator: vi.fn() }, chatPreview: { clearChatPreview: vi.fn(), renderChatPreview: vi.fn() }, shareOverlay: { setupShareButton: vi.fn() }, resumeButton: { setupResumeButton: vi.fn() }, diff --git a/web/src/session/live/update-indicator.js b/web/src/session/live/update-indicator.js deleted file mode 100644 index 5e501ec..0000000 --- a/web/src/session/live/update-indicator.js +++ /dev/null @@ -1,35 +0,0 @@ -export function closeSidebarForUpdateIndicator({ documentImpl = document } = {}) { - documentImpl.getElementById('sidebar')?.classList.remove('open'); - documentImpl.getElementById('sidebar-overlay')?.classList.remove('open'); - documentImpl.body.classList.remove('sidebar-open'); - const hamburger = documentImpl.getElementById('hamburger'); - if (hamburger) hamburger.style.display = ''; -} - -export function showUpdateIndicator(state, { - documentImpl = document, - requestAnimationFrameImpl = requestAnimationFrame, - setTimeoutImpl = setTimeout, - closeSidebar = () => closeSidebarForUpdateIndicator({ documentImpl }), - scrollToBottom = () => {} -} = {}) { - if (state.indicator) return state.indicator; - const indicator = documentImpl.createElement('div'); - state.indicator = indicator; - indicator.textContent = 'updated - tap to view'; - indicator.className = 'update-indicator'; - indicator.addEventListener('click', () => { - closeSidebar(); - scrollToBottom(true); - }); - documentImpl.body.appendChild(indicator); - requestAnimationFrameImpl(() => { indicator.classList.add('visible'); }); - setTimeoutImpl(() => { - indicator.classList.remove('visible'); - setTimeoutImpl(() => { - if (state.indicator && state.indicator.parentNode) state.indicator.parentNode.removeChild(state.indicator); - state.indicator = null; - }, 300); - }, 1200); - return indicator; -} diff --git a/web/src/session/live/update-indicator.test.js b/web/src/session/live/update-indicator.test.js deleted file mode 100644 index bbad7d5..0000000 --- a/web/src/session/live/update-indicator.test.js +++ /dev/null @@ -1,32 +0,0 @@ -import { describe, expect, it, vi } from 'vitest'; -import { JSDOM } from 'jsdom'; -import { closeSidebarForUpdateIndicator, showUpdateIndicator } from './update-indicator.js'; - -describe('update indicator', () => { - it('closes sidebar classes', () => { - const dom = new JSDOM(''); - closeSidebarForUpdateIndicator({ documentImpl: dom.window.document }); - expect(dom.window.document.body.classList.contains('sidebar-open')).toBe(false); - expect(dom.window.document.getElementById('sidebar').classList.contains('open')).toBe(false); - expect(dom.window.document.getElementById('hamburger').style.display).toBe(''); - }); - - it('shows, clicks, and removes indicator', () => { - const dom = new JSDOM(''); - const state = { indicator: null }; - const closeSidebar = vi.fn(); - const scrollToBottom = vi.fn(); - const indicator = showUpdateIndicator(state, { - documentImpl: dom.window.document, - requestAnimationFrameImpl: (cb) => cb(), - setTimeoutImpl: (cb) => cb(), - closeSidebar, - scrollToBottom - }); - expect(indicator.textContent).toBe('updated - tap to view'); - indicator.click(); - expect(closeSidebar).toHaveBeenCalled(); - expect(scrollToBottom).toHaveBeenCalledWith(true); - expect(state.indicator).toBe(null); - }); -}); diff --git a/web/src/session/session.js b/web/src/session/session.js index f399880..5b9fdb2 100644 --- a/web/src/session/session.js +++ b/web/src/session/session.js @@ -18,6 +18,7 @@ import * as doneNotifier from './chat/done-notifier.js'; import * as chatApi from './chat/chat-api.js'; import * as gitApi from './chat/git-api.js'; import { setupGitFooter } from './chat/git-footer.js'; +import { setupBtwPopup } from './live/btw-popup.js'; import * as chatSelectors from './chat/chat-selectors.js'; import * as thinkingSelector from './chat/thinking-selector.js'; import * as modelSelector from './chat/model-selector.js'; @@ -26,7 +27,6 @@ import * as liveScroll from './live/live-scroll.js'; import * as liveStats from './live/live-stats.js'; import * as liveEntries from './live/live-entries.js'; import * as chatPreview from './live/chat-preview.js'; -import * as updateIndicator from './live/update-indicator.js'; import * as shareOverlay from './live/share-overlay.js'; import * as resumeButton from './live/resume-button.js'; import * as newSessionButton from './live/new-session-button.js'; @@ -318,7 +318,6 @@ export function runSessionApp({ target = window } = {}) { liveScroll, liveStats, liveEvents, - updateIndicator, chatPreview, shareOverlay, resumeButton, @@ -428,6 +427,14 @@ export function runSessionApp({ target = window } = {}) { }); } + const newSessionHeaderBtn = documentImpl.getElementById('new-session-header-btn'); + if (newSessionHeaderBtn) { + newSessionHeaderBtn.addEventListener('click', (e) => { + e.stopPropagation(); + documentImpl.getElementById('new-btn')?.click(); + }); + } + // Initialize chat after live reload so the optimistic "message sent" event // has a listener before the user can submit. Otherwise cold-start sends can // clear/disable the composer without rendering the pending message preview. @@ -459,6 +466,8 @@ export function runSessionApp({ target = window } = {}) { gitApi }); + setupBtwPopup({ documentImpl, windowImpl: target, cwd: dataModel.header?.cwd || '' }); + // Handle Visual Viewport changes to prevent mobile browsers from shifting // the top fixed header out of view when the virtual keyboard is open. if (target.visualViewport) { diff --git a/web/src/session/ui/sidebar.js b/web/src/session/ui/sidebar.js index a8a3401..ac436ff 100644 --- a/web/src/session/ui/sidebar.js +++ b/web/src/session/ui/sidebar.js @@ -98,6 +98,14 @@ export function setupSidebarCollapse({ documentImpl = document, windowImpl = win const hamburger = documentImpl.getElementById('hamburger'); const hideBtn = documentImpl.getElementById('hide-sidebar'); + const closeBtn = documentImpl.getElementById('sidebar-close'); + const treeToggle = documentImpl.getElementById('tree-toggle'); + + const syncTreeToggle = () => { + if (!treeToggle) return; + const isCollapsed = !!documentImpl.body?.classList.contains('sidebar-collapsed'); + treeToggle.setAttribute('aria-pressed', isCollapsed ? 'false' : 'true'); + }; hamburger?.addEventListener('click', () => { if (isMobileLayout({ windowImpl })) { @@ -106,6 +114,7 @@ export function setupSidebarCollapse({ documentImpl = document, windowImpl = win } setSidebarCollapsed(false, { documentImpl, windowImpl }); saveSidebarCollapsed(false, { storage }); + syncTreeToggle(); }); const closeSidebar = () => { @@ -115,11 +124,24 @@ export function setupSidebarCollapse({ documentImpl = document, windowImpl = win } setSidebarCollapsed(true, { documentImpl, windowImpl }); saveSidebarCollapsed(true, { storage }); + syncTreeToggle(); }; hideBtn?.addEventListener('click', closeSidebar); + closeBtn?.addEventListener('click', () => setSidebarOpen(false, { documentImpl })); + treeToggle?.addEventListener('click', () => { + if (isMobileLayout({ windowImpl })) { + setSidebarOpen(true, { documentImpl }); + return; + } + const next = !documentImpl.body?.classList.contains('sidebar-collapsed'); + setSidebarCollapsed(next, { documentImpl, windowImpl }); + saveSidebarCollapsed(next, { storage }); + syncTreeToggle(); + }); + syncTreeToggle(); } export function setupSidebarResize({ documentImpl = document, windowImpl = window, storage = globalThis.localStorage } = {}) { diff --git a/web/src/session/ui/sidebar.test.js b/web/src/session/ui/sidebar.test.js index 985e7c5..8250281 100644 --- a/web/src/session/ui/sidebar.test.js +++ b/web/src/session/ui/sidebar.test.js @@ -87,9 +87,11 @@ describe('setupSidebarCollapse', () => { function collapseDom() { const jsdom = new JSDOM(` + + `); Object.defineProperty(jsdom.window, 'innerWidth', { value: 1200, configurable: true }); jsdom.window.matchMedia = () => ({ matches: false }); @@ -129,6 +131,36 @@ describe('setupSidebarCollapse', () => { expect(storage.setItem).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_STORAGE_KEY, 'true'); }); + it('sidebar-close click closes the open mobile sidebar', () => { + const jsdom = collapseDom(); + jsdom.window.matchMedia = () => ({ matches: true }); + const storage = { getItem: () => 'false', setItem: vi.fn() }; + setupSidebarCollapse({ documentImpl: jsdom.window.document, windowImpl: jsdom.window, storage }); + const sidebar = jsdom.window.document.getElementById('sidebar'); + sidebar.classList.add('open'); + jsdom.window.document.body.classList.add('sidebar-open'); + jsdom.window.document.getElementById('sidebar-close').click(); + expect(sidebar.classList.contains('open')).toBe(false); + expect(jsdom.window.document.body.classList.contains('sidebar-open')).toBe(false); + }); + + it('tree-toggle click toggles collapse and reflects aria-pressed', () => { + const jsdom = collapseDom(); + const storage = { getItem: () => 'false', setItem: vi.fn() }; + setupSidebarCollapse({ documentImpl: jsdom.window.document, windowImpl: jsdom.window, storage }); + const treeToggle = jsdom.window.document.getElementById('tree-toggle'); + expect(treeToggle.getAttribute('aria-pressed')).toBe('true'); + + treeToggle.click(); + expect(jsdom.window.document.body.classList.contains('sidebar-collapsed')).toBe(true); + expect(treeToggle.getAttribute('aria-pressed')).toBe('false'); + expect(storage.setItem).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_STORAGE_KEY, 'true'); + + treeToggle.click(); + expect(jsdom.window.document.body.classList.contains('sidebar-collapsed')).toBe(false); + expect(treeToggle.getAttribute('aria-pressed')).toBe('true'); + expect(storage.setItem).toHaveBeenCalledWith(SIDEBAR_COLLAPSED_STORAGE_KEY, 'false'); + }); });