feat(ui): activity-aware project sidebar

- Projects sorted by last activity (latest run, else creation) — the project
a researcher wants is almost always the one they last touched
- Recency groups: Today / This week / Earlier
- Per-project context: run count + relative time (2h ago) instead of raw date
- Search box always visible (was gated behind >5 projects)
- Backend: ProjectOut gains last_activity_at + n_runs (single aggregate query)
- Test: ordering + activity fields (33 tests total)

CHANGELOG.md

@@ -5,8 +5,13 @@ Format: [Keep a Changelog](https://keepachangelog.com/). User-visible changes on
 ## [Unreleased]
 
 ### Fixed
+- Project sidebar redesigned for growing lists: always-visible search, recency groups
+  (Today / This week / Earlier), per-project run count + relative last-activity time,
+  and ordering by last activity instead of creation date.
 - Improved dashboard responsive layout, focus states, and table overflow handling on
   narrow screens.
+- Aligned the run-analysis action with the model/language controls and made the project
+  sidebar scroll cleanly as project counts grow.
 
 ### Added
 - Repository initialized from the public demo (v0.1 feature set: projects, tolerant CSV/XLSX

backend/app/main.py

@@ -156,7 +156,34 @@ def list_languages():
 # --------------------------------------------------------------- projects
 @app.get("/api/projects", response_model=list[ProjectOut])
 def list_projects(db: Session = Depends(get_db)):
-    return db.query(Project).order_by(Project.created_at.desc()).all()
+    """Projects ordered by last activity (latest run, else creation) — the
+    project a researcher wants is almost always the one they last worked on."""
+    from sqlalchemy import func
+
+    activity = {
+        pid: (last, count)
+        for pid, last, count in db.query(
+            Job.project_id, func.max(Job.created_at), func.count(Job.id)
+        )
+        .group_by(Job.project_id)
+        .all()
+    }
+    rows = db.query(Project).all()
+    out = []
+    for p in rows:
+        last, count = activity.get(p.id, (None, 0))
+        out.append(
+            ProjectOut(
+                id=p.id,
+                name=p.name,
+                description=p.description,
+                created_at=p.created_at,
+                last_activity_at=last or p.created_at,
+                n_runs=count,
+            )
+        )
+    out.sort(key=lambda x: x.last_activity_at, reverse=True)
+    return out
 
 
 @app.post("/api/projects", response_model=ProjectOut, status_code=201)
@@ -164,7 +191,14 @@ def create_project(body: ProjectCreate, db: Session = Depends(get_db)):
     project = Project(name=body.name.strip(), description=body.description.strip())
     db.add(project)
     db.commit()
-    return project
+    return ProjectOut(
+        id=project.id,
+        name=project.name,
+        description=project.description,
+        created_at=project.created_at,
+        last_activity_at=project.created_at,
+        n_runs=0,
+    )
 
 
 # ----------------------------------------------------------------- corpora

backend/app/schemas.py

@@ -13,6 +13,8 @@ class ProjectOut(BaseModel):
     name: str
     description: str
     created_at: str
+    last_activity_at: str = ""  # latest run creation, else project creation
+    n_runs: int = 0
 
 
 class CorpusOut(BaseModel):

backend/static/assets/index-BDrO2FRr.css

@@ -0,0 +1 @@
+:root{--maroon: #7a1f3d;--maroon-dark: #5e1730;--ink: #1d2129;--muted: #667085;--line: #e5e7eb;--bg: #f7f7f8;--card: #ffffff;--ok: #157f3d;--err: #b42318;--accent-soft: #f6ebef;--control-height: 40px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--maroon);color:#fff;padding:14px 28px;display:flex;align-items:baseline;flex-wrap:wrap;gap:14px}.header h1{flex:0 0 auto;font-size:17px;margin:0;font-weight:650;letter-spacing:.2px;white-space:nowrap}.header .sub{flex:1 1 280px;min-width:0;font-size:12.5px;opacity:.85}.layout{display:flex;flex:1;min-width:0;min-height:0}.sidebar{width:250px;background:var(--card);border-right:1px solid var(--line);padding:18px 14px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}.sidebar h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px}.sidebar h2 .count{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:10.5px;letter-spacing:0;color:var(--muted)}.sidebar-filter{width:100%;padding:7px 10px;margin-bottom:10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}.sidebar-filter:focus{outline:none;border-color:var(--maroon)}.project-list{flex:1;min-height:0;overflow-y:auto;margin:0 -4px;padding:0 4px 4px}.group-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:10px 4px 5px}div:first-child>.group-label{margin-top:2px}.project-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:5px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font:inherit;color:var(--ink)}.project-item:hover{background:var(--bg)}.project-item.active{background:var(--accent-soft);border-color:var(--maroon);font-weight:600}.project-item .project-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-item .date{display:block;font-size:11.5px;color:var(--muted);font-weight:400}.project-create{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.project-create>button{width:100%}.main{flex:1;padding:22px 28px;overflow-y:auto;min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-bottom:16px}.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px}button{white-space:nowrap}button.primary{background:var(--maroon);color:#fff;border:none;min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;line-height:1.2}button.primary:hover{background:var(--maroon-dark)}button.primary:disabled{background:#c9ccd1;cursor:not-allowed}button.ghost{background:none;border:1px solid var(--line);color:var(--ink);min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:8px;font:inherit;cursor:pointer;line-height:1.2}button.ghost:hover{border-color:var(--maroon);color:var(--maroon)}button.linkish{background:none;border:none;color:var(--maroon);font:inherit;cursor:pointer;padding:0;text-decoration:underline}input[type=text],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}input[type=text],select{height:var(--control-height)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(122,31,61,.38);outline-offset:2px}input[type=file]{display:block;max-width:100%;margin-top:6px;font-size:13px;color:var(--muted)}input[type=file]::file-selector-button{background:#fff;border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button:hover{border-color:var(--maroon);color:var(--maroon)}.row>button{align-self:flex-end;margin-bottom:1px}textarea{resize:vertical}label.field{display:block;margin-bottom:10px;font-size:13px;font-weight:600}label.field>*{margin-top:4px;font-weight:400}.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{min-width:0}.row>.grow{flex:1;min-width:min(220px,100%)}.language-control{min-width:170px}.model-control{min-width:260px}.run-settings{display:grid;grid-template-columns:minmax(160px,230px) minmax(320px,720px) max-content;justify-content:start;gap:14px;align-items:end}.run-settings .field{margin-bottom:0}.run-button{min-width:180px;height:var(--control-height)}.construct-row{display:grid;grid-template-columns:minmax(320px,1120px) max-content;justify-content:start;align-items:end;gap:14px}.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}.result-actions{justify-content:flex-end}.result-actions a{display:inline-flex;text-decoration:none}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.pill.completed{background:#e6f4ea;color:var(--ok)}.pill.running{background:#fff3e0;color:#b45309}.pill.queued{background:#eef2f7;color:var(--muted)}.pill.failed{background:#fdecea;color:var(--err)}.progress-track{background:var(--line);border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:var(--maroon);height:100%;transition:width .4s ease}.warnings{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5b00;border-radius:8px;padding:10px 14px}.error-banner{background:#fdecea;color:var(--err);border:1px solid #f5c6c0;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.table-wrap{width:100%;overflow-x:auto}table.docs{width:100%;border-collapse:collapse;font-size:13px}table.docs th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}table.docs td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:top;overflow-wrap:anywhere}table.docs td.score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}.stat{flex:1;min-width:110px;background:var(--bg);border-radius:8px;padding:10px 14px}.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.item-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}.item-bar-label{flex:1;font-size:12.5px;min-width:0;overflow-wrap:anywhere}.item-bar-track{flex:1.2;background:var(--bg);border-radius:999px;height:10px}.item-bar-fill{background:var(--maroon);opacity:.85;height:100%;border-radius:999px}.item-bar-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.construct-items{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px}.construct-items li{margin-bottom:2px}.meta-footer{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:14px;font-variant-numeric:tabular-nums}.meta-footer code{font-size:11.5px}.muted{color:var(--muted)}.small{font-size:12.5px}.mt{margin-top:12px}@media (max-width: 820px){body{font-size:14px}.header{padding:12px 16px;align-items:flex-start;gap:2px 12px}.header h1{font-size:16px}.header .sub{flex:1 1 210px;font-size:12px;line-height:1.35}.layout{display:block}.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px}.project-list{max-height:220px;margin-right:0;flex:none}.project-create{border-top:0}.main{width:100%;padding:16px 14px 28px;overflow:visible}.card{padding:16px;margin-bottom:14px}.row,.run-settings,.construct-row,.results-toolbar,.result-actions{gap:10px}.row,.results-toolbar,.result-actions{flex-direction:column;align-items:stretch}.run-settings,.construct-row{grid-template-columns:1fr}.row>.grow,.construct-row>.grow,.language-control,.model-control{width:100%;min-width:0}.main .row>button,.main .row>a,.main .row>a>button,.results-toolbar>button{align-self:stretch;margin-bottom:0;width:100%}.run-button{width:100%;min-width:0}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-width:0}.item-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:6px 10px}.item-bar-track{grid-column:1 / -1;width:100%}.item-bar-val{width:auto}table.docs{min-width:520px}}@media (max-width: 460px){.header .sub{flex-basis:100%}.stat-grid{grid-template-columns:1fr}}

backend/static/assets/index-CPF9wqlU.css

@@ -1 +0,0 @@
-:root{--maroon: #7a1f3d;--maroon-dark: #5e1730;--ink: #1d2129;--muted: #667085;--line: #e5e7eb;--bg: #f7f7f8;--card: #ffffff;--ok: #157f3d;--err: #b42318;--accent-soft: #f6ebef}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;color:var(--ink);background:var(--bg);font-size:14.5px;line-height:1.5}.app{display:flex;flex-direction:column;min-height:100vh}.header{background:var(--maroon);color:#fff;padding:14px 28px;display:flex;align-items:baseline;flex-wrap:wrap;gap:14px}.header h1{flex:0 0 auto;font-size:17px;margin:0;font-weight:650;letter-spacing:.2px;white-space:nowrap}.header .sub{flex:1 1 280px;min-width:0;font-size:12.5px;opacity:.85}.layout{display:flex;flex:1;min-width:0;min-height:0}.sidebar{width:250px;background:var(--card);border-right:1px solid var(--line);padding:18px 14px;flex-shrink:0}.sidebar h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:0 0 10px 4px;display:flex;align-items:center;gap:8px}.sidebar h2 .count{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:10.5px;letter-spacing:0;color:var(--muted)}.sidebar-filter{width:100%;padding:7px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}.sidebar-filter:focus{outline:none;border-color:var(--maroon)}.project-list{max-height:calc(100vh - 210px);overflow-y:auto;margin:0 -4px;padding:0 4px}.project-item{display:block;width:100%;text-align:left;padding:9px 12px;margin-bottom:4px;border:1px solid transparent;border-radius:8px;background:none;cursor:pointer;font:inherit;color:var(--ink)}.project-item:hover{background:var(--bg)}.project-item.active{background:var(--accent-soft);border-color:var(--maroon);font-weight:600}.project-item .date{display:block;font-size:11.5px;color:var(--muted);font-weight:400}.main{flex:1;padding:22px 28px;overflow-y:auto;min-width:0}.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:18px 20px;margin-bottom:16px}.card h3{margin:0 0 4px;font-size:15px}.card .hint{color:var(--muted);font-size:12.5px;margin:0 0 12px}.step-badge{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;background:var(--maroon);color:#fff;font-size:12px;font-weight:700;margin-right:8px;vertical-align:-3px}button{white-space:nowrap}button.primary{background:var(--maroon);color:#fff;border:none;padding:9px 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}button.primary:hover{background:var(--maroon-dark)}button.primary:disabled{background:#c9ccd1;cursor:not-allowed}button.ghost{background:none;border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:8px;font:inherit;cursor:pointer}button.ghost:hover{border-color:var(--maroon);color:var(--maroon)}button.linkish{background:none;border:none;color:var(--maroon);font:inherit;cursor:pointer;padding:0;text-decoration:underline}input[type=text],textarea,select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;color:var(--ink)}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid rgba(122,31,61,.38);outline-offset:2px}input[type=file]{display:block;max-width:100%;margin-top:6px;font-size:13px;color:var(--muted)}input[type=file]::file-selector-button{background:#fff;border:1px solid var(--line);color:var(--ink);padding:7px 14px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer;margin-right:10px}input[type=file]::file-selector-button:hover{border-color:var(--maroon);color:var(--maroon)}.row>button{align-self:flex-end;margin-bottom:1px}textarea{resize:vertical}label.field{display:block;margin-bottom:10px;font-size:13px;font-weight:600}label.field>*{margin-top:4px;font-weight:400}.row{display:flex;gap:14px;flex-wrap:wrap}.row>*{min-width:0}.row>.grow{flex:1;min-width:min(220px,100%)}.language-control{min-width:170px}.results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}.result-actions{justify-content:flex-end}.result-actions a{display:inline-flex;text-decoration:none}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;font-weight:600}.pill.completed{background:#e6f4ea;color:var(--ok)}.pill.running{background:#fff3e0;color:#b45309}.pill.queued{background:#eef2f7;color:var(--muted)}.pill.failed{background:#fdecea;color:var(--err)}.progress-track{background:var(--line);border-radius:999px;height:7px;overflow:hidden}.progress-fill{background:var(--maroon);height:100%;transition:width .4s ease}.warnings{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5b00;border-radius:8px;padding:10px 14px}.error-banner{background:#fdecea;color:var(--err);border:1px solid #f5c6c0;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.table-wrap{width:100%;overflow-x:auto}table.docs{width:100%;border-collapse:collapse;font-size:13px}table.docs th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;border-bottom:1px solid var(--line)}table.docs td{padding:7px 8px;border-bottom:1px solid var(--bg);vertical-align:top;overflow-wrap:anywhere}table.docs td.score{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.stat-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}.stat{flex:1;min-width:110px;background:var(--bg);border-radius:8px;padding:10px 14px}.stat .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stat .k{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.item-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}.item-bar-label{flex:1;font-size:12.5px;min-width:0;overflow-wrap:anywhere}.item-bar-track{flex:1.2;background:var(--bg);border-radius:999px;height:10px}.item-bar-fill{background:var(--maroon);opacity:.85;height:100%;border-radius:999px}.item-bar-val{width:52px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600}.construct-items{margin:8px 0 0;padding-left:20px;color:var(--muted);font-size:12.5px}.construct-items li{margin-bottom:2px}.meta-footer{font-size:12px;color:var(--muted);background:var(--bg);border-radius:8px;padding:10px 14px;margin-top:14px;font-variant-numeric:tabular-nums}.meta-footer code{font-size:11.5px}.muted{color:var(--muted)}.small{font-size:12.5px}.mt{margin-top:12px}@media (max-width: 820px){body{font-size:14px}.header{padding:12px 16px;align-items:flex-start;gap:2px 12px}.header h1{font-size:16px}.header .sub{flex:1 1 210px;font-size:12px;line-height:1.35}.layout{display:block}.sidebar{width:100%;border-right:0;border-bottom:1px solid var(--line);padding:14px}.project-list{max-height:220px;margin-right:0}.main{width:100%;padding:16px 14px 28px;overflow:visible}.card{padding:16px;margin-bottom:14px}.row,.results-toolbar,.result-actions{flex-direction:column;align-items:stretch;gap:10px}.row>.grow,.language-control{width:100%;min-width:0}.main .row>button,.main .row>a,.main .row>a>button,.results-toolbar>button{align-self:stretch;margin-bottom:0;width:100%}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.stat{min-width:0}.item-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:6px 10px}.item-bar-track{grid-column:1 / -1;width:100%}.item-bar-val{width:auto}table.docs{min-width:520px}}@media (max-width: 460px){.header .sub{flex-basis:100%}.stat-grid{grid-template-columns:1fr}}

backend/static/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CCR Platform — Contextualized Construct Representations</title>
-    <script type="module" crossorigin src="/assets/index-gF2iJ3kV.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CPF9wqlU.css">
+    <script type="module" crossorigin src="/assets/index-CHG17tHs.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BDrO2FRr.css">
   </head>
   <body>
     <div id="root"></div>

backend/tests/test_api.py

@@ -187,6 +187,16 @@ def test_validation_errors(client, flow):
     assert resp.status_code == 400
 
 
+def test_projects_carry_activity_and_sort_by_it(client, flow):
+    projects = client.get("/api/projects").json()
+    demo = next(p for p in projects if p["id"] == flow["project"]["id"])
+    assert demo["n_runs"] >= 1
+    assert demo["last_activity_at"] >= demo["created_at"]
+    # the project with runs sorts above a freshly created empty one from earlier tests
+    order = [p["last_activity_at"] for p in projects]
+    assert order == sorted(order, reverse=True)
+
+
 # --------------------------------------------------- spec 0003: models API
 def test_models_endpoint_from_registry(client):
     models = client.get("/api/models").json()

frontend/src/App.jsx

@@ -2,6 +2,36 @@ import { useEffect, useState } from "react";
 import { api } from "./api.js";
 import Workspace from "./Workspace.jsx";
 
+function relativeTime(iso) {
+  if (!iso) return "";
+  const then = new Date(iso.endsWith("Z") || iso.includes("+") ? iso : iso + "Z");
+  const mins = Math.max(0, Math.floor((Date.now() - then.getTime()) / 60000));
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d ago`;
+  return then.toISOString().slice(0, 10);
+}
+
+function groupProjects(projects) {
+  // Buckets by last activity: Today / This week / Earlier. Projects arrive
+  // sorted by last activity (backend), so group order falls out naturally.
+  const now = Date.now();
+  const DAY = 86400000;
+  const groups = { Today: [], "This week": [], Earlier: [] };
+  for (const p of projects) {
+    const iso = p.last_activity_at || p.created_at;
+    const t = new Date(iso.endsWith("Z") || iso.includes("+") ? iso : iso + "Z").getTime();
+    const age = now - t;
+    if (age < DAY) groups.Today.push(p);
+    else if (age < 7 * DAY) groups["This week"].push(p);
+    else groups.Earlier.push(p);
+  }
+  return Object.entries(groups).filter(([, items]) => items.length > 0);
+}
+
 export default function App() {
   const [projects, setProjects] = useState([]);
   const [selectedId, setSelectedId] = useState(null);
@@ -17,6 +47,16 @@ export default function App() {
     loadProjects();
   }, []);
 
+  useEffect(() => {
+    if (projects.length === 0) {
+      setSelectedId(null);
+      return;
+    }
+    if (!selectedId || !projects.some((p) => p.id === selectedId)) {
+      setSelectedId(projects[0].id);
+    }
+  }, [projects, selectedId]);
+
   async function createProject(e) {
     e.preventDefault();
     if (!newName.trim()) return;
@@ -32,6 +72,10 @@ export default function App() {
   }
 
   const selected = projects.find((p) => p.id === selectedId) || null;
+  const normalizedFilter = filter.trim().toLowerCase();
+  const visibleProjects = projects.filter((p) =>
+    p.name.toLowerCase().includes(normalizedFilter)
+  );
 
   return (
     <div className="app">
@@ -48,57 +92,63 @@ export default function App() {
             Projects
             {projects.length > 0 && <span className="count">{projects.length}</span>}
           </h2>
-          {projects.length > 5 && (
-            <input
-              type="text"
-              className="sidebar-filter"
-              placeholder="Filter projects…"
-              value={filter}
-              onChange={(e) => setFilter(e.target.value)}
-            />
-          )}
+          <input
+            type="text"
+            className="sidebar-filter"
+            placeholder="Search projects..."
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+          />
           <div className="project-list">
-            {projects
-              .filter((p) => p.name.toLowerCase().includes(filter.trim().toLowerCase()))
-              .map((p) => (
-                <button
-                  key={p.id}
-                  className={"project-item" + (p.id === selectedId ? " active" : "")}
-                  onClick={() => setSelectedId(p.id)}
-                >
-                  {p.name}
-                  <span className="date">{p.created_at.slice(0, 10)}</span>
-                </button>
-              ))}
-            {filter &&
-              projects.every(
-                (p) => !p.name.toLowerCase().includes(filter.trim().toLowerCase())
-              ) && <p className="small muted">No projects match “{filter}”.</p>}
+            {groupProjects(visibleProjects).map(([groupLabel, items]) => (
+              <div key={groupLabel}>
+                <div className="group-label">{groupLabel}</div>
+                {items.map((p) => (
+                  <button
+                    key={p.id}
+                    className={"project-item" + (p.id === selectedId ? " active" : "")}
+                    onClick={() => setSelectedId(p.id)}
+                    title={p.name}
+                  >
+                    <span className="project-name">{p.name}</span>
+                    <span className="date">
+                      {p.n_runs > 0 ? `${p.n_runs} run${p.n_runs === 1 ? "" : "s"} · ` : ""}
+                      {relativeTime(p.last_activity_at || p.created_at)}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            ))}
+            {filter && visibleProjects.length === 0 && (
+              <p className="small muted">No projects match "{filter}".</p>
+            )}
           </div>
 
-          {creating ? (
-            <form onSubmit={createProject} className="mt">
-              <input
-                type="text"
-                autoFocus
-                placeholder="Project name"
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-              />
-              <div className="row mt">
-                <button className="primary" type="submit">
-                  Create
-                </button>
-                <button className="ghost" type="button" onClick={() => setCreating(false)}>
-                  Cancel
-                </button>
-              </div>
-            </form>
-          ) : (
-            <button className="ghost mt" onClick={() => setCreating(true)}>
-              + New project
-            </button>
-          )}
+          <div className="project-create">
+            {creating ? (
+              <form onSubmit={createProject}>
+                <input
+                  type="text"
+                  autoFocus
+                  placeholder="Project name"
+                  value={newName}
+                  onChange={(e) => setNewName(e.target.value)}
+                />
+                <div className="row mt">
+                  <button className="primary" type="submit">
+                    Create
+                  </button>
+                  <button className="ghost" type="button" onClick={() => setCreating(false)}>
+                    Cancel
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <button className="ghost" onClick={() => setCreating(true)}>
+                + New project
+              </button>
+            )}
+          </div>
         </aside>
 
         <main className="main">

frontend/src/Workspace.jsx

@@ -181,7 +181,7 @@ export default function Workspace({ project }) {
           Pick a validated scale from the library, or define custom items. CCR scores each
           text by its similarity to these items.
         </p>
-        <div className="row">
+        <div className="construct-row">
           <div className="grow">
             <select value={constructId} onChange={(e) => setConstructId(e.target.value)}>
               <option value="">— select construct —</option>
@@ -242,32 +242,28 @@ export default function Workspace({ project }) {
           in the run metadata. If the corpus doesn&apos;t match the selected language or the
           model doesn&apos;t support it, you&apos;ll get a warning — never a silent result.
         </p>
-        <div className="row">
-          <div className="language-control">
-            <label className="field">
-              Text language
-              <select value={language} onChange={(e) => setLanguage(e.target.value)}>
-                {languages.map((l) => (
-                  <option key={l} value={l}>
-                    {l}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-          <div className="grow">
-            <label className="field">
-              Embedding model
-              <select value={modelName} onChange={(e) => setModelName(e.target.value)}>
-                {models.map((m) => (
-                  <option key={m.id} value={m.id}>
-                    {m.label}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </div>
-          <button className="primary" disabled={!canRun} onClick={handleRun}>
+        <div className="run-settings">
+          <label className="field language-control">
+            Text language
+            <select value={language} onChange={(e) => setLanguage(e.target.value)}>
+              {languages.map((l) => (
+                <option key={l} value={l}>
+                  {l}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="field model-control">
+            Embedding model
+            <select value={modelName} onChange={(e) => setModelName(e.target.value)}>
+              {models.map((m) => (
+                <option key={m.id} value={m.id}>
+                  {m.label}
+                </option>
+              ))}
+            </select>
+          </label>
+          <button className="primary run-button" disabled={!canRun} onClick={handleRun}>
             {running ? "Starting…" : "Run CCR analysis"}
           </button>
         </div>

frontend/src/styles.css

@@ -9,6 +9,7 @@
   --ok: #157f3d;
   --err: #b42318;
   --accent-soft: #f6ebef;
+  --control-height: 40px;
 }
 
 * { box-sizing: border-box; }
@@ -53,6 +54,9 @@ body {
   border-right: 1px solid var(--line);
   padding: 18px 14px;
   flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 .sidebar h2 {
   font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px;
@@ -64,23 +68,44 @@ body {
   padding: 0 8px; font-size: 10.5px; letter-spacing: 0; color: var(--muted);
 }
 .sidebar-filter {
-  width: 100%; padding: 7px 10px; margin-bottom: 8px;
+  width: 100%; padding: 7px 10px; margin-bottom: 10px;
   border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px;
   background: #fff; color: var(--ink);
 }
 .sidebar-filter:focus { outline: none; border-color: var(--maroon); }
 .project-list {
-  max-height: calc(100vh - 210px); overflow-y: auto; margin: 0 -4px; padding: 0 4px;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  margin: 0 -4px;
+  padding: 0 4px 4px;
+}
+.group-label {
+  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
+  color: var(--muted); margin: 10px 4px 5px;
 }
+div:first-child > .group-label { margin-top: 2px; }
 .project-item {
   display: block; width: 100%; text-align: left;
-  padding: 9px 12px; margin-bottom: 4px;
+  padding: 9px 12px; margin-bottom: 5px;
   border: 1px solid transparent; border-radius: 8px;
   background: none; cursor: pointer; font: inherit; color: var(--ink);
 }
 .project-item:hover { background: var(--bg); }
 .project-item.active { background: var(--accent-soft); border-color: var(--maroon); font-weight: 600; }
+.project-item .project-name {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .project-item .date { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
+.project-create {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+.project-create > button { width: 100%; }
 
 /* ---------- main ---------- */
 .main { flex: 1; padding: 22px 28px; overflow-y: auto; min-width: 0; }
@@ -104,13 +129,23 @@ button { white-space: nowrap; }
 
 button.primary {
   background: var(--maroon); color: #fff; border: none;
-  padding: 9px 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
+  min-height: var(--control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 18px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
+  line-height: 1.2;
 }
 button.primary:hover { background: var(--maroon-dark); }
 button.primary:disabled { background: #c9ccd1; cursor: not-allowed; }
 button.ghost {
   background: none; border: 1px solid var(--line); color: var(--ink);
-  padding: 8px 14px; border-radius: 8px; font: inherit; cursor: pointer;
+  min-height: var(--control-height);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 14px; border-radius: 8px; font: inherit; cursor: pointer;
+  line-height: 1.2;
 }
 button.ghost:hover { border-color: var(--maroon); color: var(--maroon); }
 button.linkish {
@@ -122,6 +157,7 @@ input[type="text"], textarea, select {
   width: 100%; padding: 8px 10px; border: 1px solid var(--line);
   border-radius: 8px; font: inherit; background: #fff; color: var(--ink);
 }
+input[type="text"], select { height: var(--control-height); }
 
 button:focus-visible,
 input:focus-visible,
@@ -156,6 +192,26 @@ label.field > * { margin-top: 4px; font-weight: 400; }
 .row > * { min-width: 0; }
 .row > .grow { flex: 1; min-width: min(220px, 100%); }
 .language-control { min-width: 170px; }
+.model-control { min-width: 260px; }
+.run-settings {
+  display: grid;
+  grid-template-columns: minmax(160px, 230px) minmax(320px, 720px) max-content;
+  justify-content: start;
+  gap: 14px;
+  align-items: end;
+}
+.run-settings .field { margin-bottom: 0; }
+.run-button {
+  min-width: 180px;
+  height: var(--control-height);
+}
+.construct-row {
+  display: grid;
+  grid-template-columns: minmax(320px, 1120px) max-content;
+  justify-content: start;
+  align-items: end;
+  gap: 14px;
+}
 .results-toolbar {
   display: flex;
   align-items: center;
@@ -255,7 +311,9 @@ table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; whit
   .project-list {
     max-height: 220px;
     margin-right: 0;
+    flex: none;
   }
+  .project-create { border-top: 0; }
   .main {
     width: 100%;
     padding: 16px 14px 28px;
@@ -266,15 +324,27 @@ table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; whit
     margin-bottom: 14px;
   }
 
+  .row,
+  .run-settings,
+  .construct-row,
+  .results-toolbar,
+  .result-actions {
+    gap: 10px;
+  }
   .row,
   .results-toolbar,
   .result-actions {
     flex-direction: column;
     align-items: stretch;
-    gap: 10px;
+  }
+  .run-settings,
+  .construct-row {
+    grid-template-columns: 1fr;
   }
   .row > .grow,
-  .language-control {
+  .construct-row > .grow,
+  .language-control,
+  .model-control {
     width: 100%;
     min-width: 0;
   }
@@ -286,6 +356,10 @@ table.docs td.score { font-variant-numeric: tabular-nums; font-weight: 600; whit
     margin-bottom: 0;
     width: 100%;
   }
+  .run-button {
+    width: 100%;
+    min-width: 0;
+  }
 
   .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .stat { min-width: 0; }