@lightupai/polaris 0.0.76 → 0.0.78

package/src/web/views.ts

@@ -3,6 +3,7 @@
 
 import { nav, slackIcon, type NavOpts } from "./layout";
 import type { SessionFixture, ProjectFixture, DeviceFixture } from "./fixtures";
+import type { Annotation } from "../types";
 
 interface TeamMember {
   name: string;
@@ -24,10 +25,22 @@ interface ViewContext {
   dailyPrompts?: Array<{ date: string; sender: string; count: number }>;
 }
 
-function navOpts(ctx: ViewContext): NavOpts {
+function navOpts(ctx: { userName: string; orgName: string; email: string; plan?: string }): NavOpts {
   return { userName: ctx.userName, orgName: ctx.orgName, email: ctx.email, plan: ctx.plan, banner: bannerForCtx(ctx) };
 }
 
+// Minimal context for pages that don't need the full dashboard state (transcript, search).
+export interface PageContext {
+  token: string;
+  userName: string;
+  orgName: string;
+  email: string;
+}
+
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
 // --- Copyable code block ---
 
 function copyBlock(text: string): string {
@@ -47,6 +60,8 @@ function sectionHeader(title: string): string {
   return `<h2 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">${title}</h2>`;
 }
 
+const formInputClass = "border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-polaris-300 focus:border-polaris-300";
+
 function statusBadge(label: string, done: boolean): string {
   return done
     ? `<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
@@ -58,7 +73,7 @@ function statusBadge(label: string, done: boolean): string {
 
 // --- Banner helpers ---
 
-function bannerForCtx(ctx: ViewContext): { message: string; style: "info" | "success" | "warning" } | undefined {
+function bannerForCtx(ctx: { plan?: string }): { message: string; style: "info" | "success" | "warning" } | undefined {
   if (ctx.plan && ctx.plan !== "free") {
     const label = ctx.plan.charAt(0).toUpperCase() + ctx.plan.slice(1);
     return { message: `<strong>${label} plan</strong> — we'll reach out shortly to get you set up. Full access in the meantime.`, style: "info" };
@@ -368,7 +383,7 @@ function renderProjectsSessionsSection(ctx: ViewContext, sessions: SessionFixtur
           </div>
         </details>
         <div class="space-y-4">
-          ${projects.map((p) => renderProjectCard(p, ctx.userName)).join("")}
+          ${projects.map((p) => renderProjectCard(p, ctx.userName, ctx.token)).join("")}
         </div>
       </div>`;
   }
@@ -392,7 +407,7 @@ function renderProjectsSessionsSection(ctx: ViewContext, sessions: SessionFixtur
     </div>`);
 }
 
-function renderProjectCard(project: ProjectFixture, userName: string): string {
+function renderProjectCard(project: ProjectFixture, userName: string, token: string): string {
   const sessionCount = project.sessions.length;
   const participantId = `user:${userName.toLowerCase().replace(/\s+/g, ".")}`;
 
@@ -403,7 +418,10 @@ function renderProjectCard(project: ProjectFixture, userName: string): string {
           <p class="text-sm font-semibold text-gray-900">${project.name}</p>
           ${project.slackChannel ? `<span class="text-xs text-gray-400">${project.slackChannel}</span>` : ""}
         </div>
-        <span class="text-xs text-gray-400">${sessionCount} session${sessionCount !== 1 ? "s" : ""}</span>
+        <div class="flex items-center gap-3">
+          <span class="text-xs text-gray-400">${sessionCount} session${sessionCount !== 1 ? "s" : ""}</span>
+          <a href="/projects/${encodeURIComponent(project.name)}/settings?token=${token}" class="text-xs font-medium text-gray-400 hover:text-polaris-700">Settings</a>
+        </div>
       </div>
       <div class="divide-y divide-gray-50">
         ${project.sessions.map((s) => {
@@ -419,16 +437,18 @@ function renderProjectCard(project: ProjectFixture, userName: string): string {
           const promptLabel = s.eventCount > 0
             ? `<span class="text-xs text-gray-400">${s.eventCount} prompt${s.eventCount !== 1 ? "s" : ""}</span>`
             : '';
+          const transcriptHref = `/sessions/${encodeURIComponent(project.name)}/${encodeURIComponent(s.name)}?token=${token}`;
           return `
             <div class="px-4 py-3 flex items-center justify-between">
               <div class="flex items-center gap-2">
                 <div class="w-2 h-2 rounded-full bg-green-500"></div>
-                <p class="text-sm text-gray-700">${s.name}</p>
+                <a href="${transcriptHref}" class="text-sm text-gray-700 hover:text-polaris-700 hover:underline">${s.name}</a>
                 ${roleBadge}
               </div>
               <div class="flex items-center gap-3">
                 ${driverLabel}
                 ${promptLabel}
+                <a href="${transcriptHref}" class="text-xs font-medium text-polaris-700 hover:text-polaris-800">Transcript</a>
               </div>
             </div>`;
         }).join("")}
@@ -542,3 +562,397 @@ export function renderProfileView(ctx: ViewContext, participantId: string): stri
       </div>
     </div>`;
 }
+
+// --- Session transcript view ---
+// Events arrive from the API newest-first ({ events, nextCursor }); we render ascending.
+
+export interface TranscriptEvent {
+  id: string;
+  project: string;
+  session: string;
+  timestamp: string;
+  source: string;
+  sender: string;
+  payload: Record<string, unknown>;
+}
+
+interface EventPayload {
+  hook_event_name?: string;
+  prompt?: string;
+  stop_response?: string;
+  last_assistant_message?: string;
+  tool_name?: string;
+  tool_input?: unknown;
+  tool_result?: unknown;
+  content?: string;
+}
+
+function eventMeta(e: TranscriptEvent): string {
+  return `<span class="text-xs text-gray-400">${escapeHtml(e.sender)} &middot; ${new Date(e.timestamp).toLocaleString()}</span>`;
+}
+
+function messageCard(badge: string, badgeClass: string, e: TranscriptEvent, text: string, cardClass = "bg-white border border-gray-200"): string {
+  return `
+    <div class="${cardClass} rounded-lg px-4 py-3">
+      <div class="flex items-baseline gap-2">
+        <span class="px-2 py-0.5 rounded-full text-xs font-medium ${badgeClass}">${badge}</span>
+        ${eventMeta(e)}
+      </div>
+      <p class="mt-1.5 text-sm text-gray-800 whitespace-pre-wrap">${escapeHtml(text)}</p>
+    </div>`;
+}
+
+function renderTranscriptItem(e: TranscriptEvent): string {
+  const p = e.payload as EventPayload;
+
+  if (e.source === "inject") {
+    return `
+      <div class="border-l-4 border-amber-400 bg-amber-50 rounded-r-lg px-4 py-3">
+        <div class="flex items-baseline gap-2">
+          <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">Inject</span>
+          ${eventMeta(e)}
+        </div>
+        <p class="mt-1.5 text-sm text-gray-800 whitespace-pre-wrap">[${escapeHtml(e.sender)}] ${escapeHtml(p.content ?? "")}</p>
+      </div>`;
+  }
+
+  if (e.source === "reply") {
+    return messageCard("Reply", "bg-gray-100 text-gray-600", e, p.content ?? "");
+  }
+
+  if (typeof p.prompt === "string") {
+    return messageCard("Prompt", "bg-polaris-100 text-polaris-800", e, p.prompt);
+  }
+
+  if (typeof p.tool_name === "string") {
+    const detail = p.hook_event_name === "PostToolUse" ? p.tool_result : p.tool_input;
+    let detailText = "";
+    try { detailText = JSON.stringify(detail, null, 2) ?? ""; } catch { detailText = String(detail); }
+    return `
+      <details class="px-1">
+        <summary class="flex items-baseline gap-2 py-1 text-xs text-gray-400 hover:text-gray-600 cursor-pointer select-none">
+          <span class="font-mono text-gray-500">${escapeHtml(p.tool_name)}</span>
+          <span>${p.hook_event_name === "PostToolUse" ? "result" : "tool call"}</span>
+          <span class="ml-auto">${eventMeta(e)}</span>
+        </summary>
+        ${detailText ? `<pre class="mt-1 mb-2 bg-gray-50 border border-gray-200 rounded px-3 py-2 text-xs font-mono whitespace-pre-wrap overflow-x-auto max-h-64 overflow-y-auto">${escapeHtml(detailText)}</pre>` : ""}
+      </details>`;
+  }
+
+  const response = typeof p.stop_response === "string" && p.stop_response ? p.stop_response : p.last_assistant_message;
+  if (typeof response === "string" && response) {
+    return messageCard("Agent", "bg-green-100 text-green-800", e, response, "bg-white border border-gray-200");
+  }
+
+  return "";
+}
+
+// --- Annotation controls (star / tag / decision curation) ---
+
+// Short excerpt of the event's main text, used as the default note when marking a decision.
+function eventExcerpt(e: TranscriptEvent): string {
+  const p = e.payload as EventPayload;
+  const text =
+    typeof p.prompt === "string" ? p.prompt
+    : typeof p.content === "string" ? p.content
+    : typeof p.stop_response === "string" && p.stop_response ? p.stop_response
+    : typeof p.last_assistant_message === "string" ? p.last_assistant_message
+    : "";
+  return text.slice(0, 200);
+}
+
+function annotationForm(action: string, fields: Record<string, string>, button: string): string {
+  const inputs = Object.entries(fields)
+    .map(([name, value]) => `<input type="hidden" name="${name}" value="${escapeHtml(value)}">`)
+    .join("");
+  return `<form method="POST" action="${action}" class="inline-flex">${inputs}${button}</form>`;
+}
+
+function renderAnnotationControls(e: TranscriptEvent, annotations: Annotation[], base: string, token: string): string {
+  const own = annotations.filter((a) => a.event_id === e.id);
+  const star = own.find((a) => a.kind === "star");
+  const tags = own.filter((a) => a.kind === "tag");
+  const decision = own.find((a) => a.kind === "decision");
+  const addAction = `${base}/annotations?token=${token}`;
+  const deleteAction = (id: string) => `${base}/annotations/${encodeURIComponent(id)}/delete?token=${token}`;
+
+  const starControl = star
+    ? annotationForm(deleteAction(star.id), {}, `<button type="submit" class="text-xs font-medium text-amber-500 hover:text-amber-600" title="Remove star">&#9733; Starred</button>`)
+    : annotationForm(addAction, { event_id: e.id, kind: "star" }, `<button type="submit" class="text-xs text-gray-400 hover:text-amber-600" title="Star this event">&#9734; Star</button>`);
+
+  const tagChips = tags
+    .map((t) =>
+      annotationForm(deleteAction(t.id), {}, `<button type="submit" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-polaris-100 text-polaris-800 hover:bg-polaris-200" title="Remove tag">#${escapeHtml(t.value ?? "")} <span class="text-polaris-400">&times;</span></button>`)
+    )
+    .join("");
+
+  const tagAdder = `
+      <details class="inline-block">
+        <summary class="text-xs text-gray-400 hover:text-polaris-700 cursor-pointer select-none list-none">+ Tag</summary>
+        <form method="POST" action="${addAction}" class="inline-flex items-center gap-1 mt-1">
+          <input type="hidden" name="event_id" value="${e.id}">
+          <input type="hidden" name="kind" value="tag">
+          <input name="value" required placeholder="tag-name" class="w-28 border border-gray-200 rounded px-2 py-0.5 text-xs focus:outline-none focus:ring-1 focus:ring-polaris-300">
+          <button type="submit" class="px-2 py-0.5 bg-polaris-700 text-white text-xs font-medium rounded hover:bg-polaris-800">Add</button>
+        </form>
+      </details>`;
+
+  const decisionControl = decision
+    ? annotationForm(deleteAction(decision.id), {}, `<button type="submit" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 hover:bg-purple-200" title="Unmark decision">&#9873; Decision <span class="text-purple-400">&times;</span></button>`)
+    : annotationForm(addAction, { event_id: e.id, kind: "decision", value: eventExcerpt(e) }, `<button type="submit" class="text-xs text-gray-400 hover:text-purple-700" title="Mark as decision">&#9873; Decision</button>`);
+
+  return `
+    <div class="flex flex-wrap items-center gap-2 mt-1 px-1">
+      ${starControl}
+      ${tagChips}
+      ${tagAdder}
+      ${decisionControl}
+    </div>`;
+}
+
+export function renderTranscriptView(
+  ctx: PageContext,
+  project: string,
+  session: string,
+  events: TranscriptEvent[],
+  nextCursor: string | null,
+  before?: string,
+  annotations: Annotation[] = []
+): string {
+  const base = `/sessions/${encodeURIComponent(project)}/${encodeURIComponent(session)}`;
+  const items = [...events]
+    .reverse()
+    .map((e) => {
+      const html = renderTranscriptItem(e);
+      return html ? `<div>${html}${renderAnnotationControls(e, annotations, base, ctx.token)}</div>` : "";
+    })
+    .filter((html) => html !== "")
+    .join("\n");
+
+  // Session-level annotations (no event_id) render as badges under the header.
+  const sessionBadges = annotations
+    .filter((a) => a.event_id === null)
+    .map((a) =>
+      a.kind === "tag"
+        ? `<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-polaris-100 text-polaris-800">#${escapeHtml(a.value ?? "")}</span>`
+        : a.kind === "decision"
+          ? `<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">&#9873; ${escapeHtml(a.value ?? "Decision")}</span>`
+          : `<span class="text-xs text-amber-500">&#9733;</span>`
+    )
+    .join("");
+
+  const pagingLinks = [
+    before ? `<a href="${base}?token=${ctx.token}" class="text-xs font-medium text-polaris-700 hover:text-polaris-800">Back to latest</a>` : "",
+    nextCursor ? `<a href="${base}?token=${ctx.token}&before=${encodeURIComponent(nextCursor)}" class="text-xs font-medium text-polaris-700 hover:text-polaris-800">Load older</a>` : "",
+  ].filter(Boolean).join("");
+
+  return `
+    ${nav(ctx.token, navOpts(ctx))}
+    <div class="max-w-3xl mx-auto px-6 pt-12 pb-16 space-y-10">
+      <div>
+        ${sectionHeader("Session transcript")}
+        <div class="flex items-baseline justify-between mb-4">
+          <h1 class="text-2xl font-bold text-gray-900">${escapeHtml(session)}</h1>
+          <span class="text-sm text-gray-400 font-mono">${escapeHtml(project)}</span>
+        </div>
+        ${sessionBadges ? `<div class="flex flex-wrap items-center gap-2 mb-3">${sessionBadges}</div>` : ""}
+        ${pagingLinks ? `<div class="flex items-center gap-4 mb-3">${pagingLinks}</div>` : ""}
+        ${items
+          ? `<div class="space-y-3">${items}</div>`
+          : `<div class="bg-white border border-gray-200 rounded-lg p-5 text-sm text-gray-500">No events captured for this session yet.</div>`}
+      </div>
+
+      <div>
+        ${sectionHeader("Inject guidance")}
+        <form method="POST" action="${base}/inject?token=${ctx.token}" class="bg-white border border-gray-200 rounded-lg p-5">
+          <p class="text-sm text-gray-500 mb-3">Send a note to this session's agent. It is delivered with the next prompt.</p>
+          <textarea name="content" rows="3" required placeholder="e.g. Use RS256, not HS256 &mdash; we need asymmetric keys" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-polaris-300 focus:border-polaris-300"></textarea>
+          <button type="submit" class="mt-3 px-4 py-2 bg-polaris-700 text-white text-sm font-medium rounded-lg hover:bg-polaris-800 transition">Inject</button>
+        </form>
+      </div>
+    </div>`;
+}
+
+// --- Search view ---
+
+export interface SearchQuery {
+  q: string;
+  project: string;
+  sender: string;
+  source: string;
+  tag: string;
+}
+
+export interface SearchResult {
+  event: TranscriptEvent;
+  snippet: string;
+}
+
+// ts_headline marks matches with <b>...</b>; escape everything else, then restore the highlights.
+function snippetHtml(snippet: string): string {
+  return escapeHtml(snippet)
+    .replace(/&lt;b&gt;/g, '<b class="font-semibold text-polaris-800 bg-polaris-100 rounded px-0.5">')
+    .replace(/&lt;\/b&gt;/g, "</b>");
+}
+
+export function renderSearchView(ctx: PageContext, query: SearchQuery, results: SearchResult[] | null, searchError?: string): string {
+  const inputClass = "border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-polaris-300 focus:border-polaris-300";
+  const sourceOptions = ["", "hook", "inject", "reply"]
+    .map((s) => `<option value="${s}"${s === query.source ? " selected" : ""}>${s === "" ? "Any source" : s}</option>`)
+    .join("");
+
+  let resultsSection = "";
+  if (searchError) {
+    resultsSection = `<div class="bg-white border border-red-200 rounded-lg p-5 text-sm text-red-700">${escapeHtml(searchError)}</div>`;
+  } else if (results !== null) {
+    const resultItems = results.map(({ event, snippet }) => {
+      const href = `/sessions/${encodeURIComponent(event.project)}/${encodeURIComponent(event.session)}?token=${ctx.token}`;
+      return `
+        <a href="${href}" class="block bg-white border border-gray-200 rounded-lg p-4 hover:border-polaris-300 hover:shadow-sm transition">
+          <div class="flex items-baseline gap-2 text-xs text-gray-400">
+            <span class="font-medium text-gray-700">${escapeHtml(event.sender)}</span>
+            <span class="font-mono">${escapeHtml(event.project)}/${escapeHtml(event.session)}</span>
+            <span class="ml-auto">${new Date(event.timestamp).toLocaleString()}</span>
+          </div>
+          <p class="mt-1.5 text-sm text-gray-700">${snippetHtml(snippet)}</p>
+        </a>`;
+    }).join("");
+    resultsSection = results.length
+      ? `<div>
+           <p class="text-xs text-gray-400 mb-3">${results.length} result${results.length !== 1 ? "s" : ""} for &ldquo;${escapeHtml(query.q)}&rdquo;</p>
+           <div class="space-y-3">${resultItems}</div>
+         </div>`
+      : `<div class="bg-white border border-gray-200 rounded-lg p-5 text-sm text-gray-500">No results for &ldquo;${escapeHtml(query.q)}&rdquo;.</div>`;
+  }
+
+  return `
+    ${nav(ctx.token, navOpts(ctx))}
+    <div class="max-w-3xl mx-auto px-6 pt-12 pb-16 space-y-6">
+      <div>
+        ${sectionHeader("Search")}
+        <form method="GET" action="/search" class="bg-white border border-gray-200 rounded-lg p-5 space-y-3">
+          <input type="hidden" name="token" value="${ctx.token}">
+          <div class="flex gap-2">
+            <input name="q" value="${escapeHtml(query.q)}" placeholder="Search prompts, responses, and messages" class="flex-1 ${inputClass}">
+            <button type="submit" class="px-4 py-2 bg-polaris-700 text-white text-sm font-medium rounded-lg hover:bg-polaris-800 transition">Search</button>
+          </div>
+          <div class="grid grid-cols-1 sm:grid-cols-4 gap-2">
+            <input name="project" value="${escapeHtml(query.project)}" placeholder="Project" class="${inputClass}">
+            <input name="sender" value="${escapeHtml(query.sender)}" placeholder="Sender (e.g. user:priya)" class="${inputClass}">
+            <select name="source" class="bg-white ${inputClass}">${sourceOptions}</select>
+            <input name="tag" value="${escapeHtml(query.tag)}" placeholder="Tag" class="${inputClass}">
+          </div>
+        </form>
+      </div>
+      ${resultsSection}
+    </div>`;
+}
+
+// --- Decisions view ---
+// Org-wide list of 'decision' annotations, each linking back to its transcript.
+
+export function renderDecisionsView(ctx: PageContext, projectFilter: string, decisions: Annotation[] | null, error?: string): string {
+  let listSection = "";
+  if (error) {
+    listSection = `<div class="bg-white border border-red-200 rounded-lg p-5 text-sm text-red-700">${escapeHtml(error)}</div>`;
+  } else if (decisions !== null) {
+    const items = decisions.map((d) => {
+      const href = `/sessions/${encodeURIComponent(d.project)}/${encodeURIComponent(d.session)}?token=${ctx.token}`;
+      return `
+        <div class="bg-white border border-gray-200 rounded-lg p-4">
+          <div class="flex items-baseline gap-2 text-xs text-gray-400">
+            <span class="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">&#9873; Decision</span>
+            ${d.participant_id ? `<span class="font-medium text-gray-700">${escapeHtml(d.participant_id)}</span>` : ""}
+            <span class="font-mono">${escapeHtml(d.project)}/${escapeHtml(d.session)}</span>
+            <span class="ml-auto">${new Date(d.created_at).toLocaleString()}</span>
+          </div>
+          <p class="mt-1.5 text-sm text-gray-700 whitespace-pre-wrap">${d.value ? escapeHtml(d.value) : '<span class="text-gray-400">No note</span>'}</p>
+          <a href="${href}" class="mt-2 inline-block text-xs font-medium text-polaris-700 hover:text-polaris-800">View transcript</a>
+        </div>`;
+    }).join("");
+    listSection = decisions.length
+      ? `<div class="space-y-3">${items}</div>`
+      : `<div class="bg-white border border-gray-200 rounded-lg p-5 text-sm text-gray-500">No decisions recorded yet. Mark transcript events as decisions to collect them here.</div>`;
+  }
+
+  return `
+    ${nav(ctx.token, navOpts(ctx))}
+    <div class="max-w-3xl mx-auto px-6 pt-12 pb-16 space-y-6">
+      <div>
+        ${sectionHeader("Decisions")}
+        <form method="GET" action="/decisions" class="bg-white border border-gray-200 rounded-lg p-5 flex gap-2">
+          <input type="hidden" name="token" value="${ctx.token}">
+          <input name="project" value="${escapeHtml(projectFilter)}" placeholder="Filter by project" class="flex-1 ${formInputClass}">
+          <button type="submit" class="px-4 py-2 bg-polaris-700 text-white text-sm font-medium rounded-lg hover:bg-polaris-800 transition">Filter</button>
+        </form>
+      </div>
+      ${listSection}
+    </div>`;
+}
+
+// --- Project settings view ---
+// Visibility toggle ('org' = everyone, 'members' = restricted) and member management.
+
+export interface ProjectMemberView {
+  participant_id: string;
+  role: string | null;
+}
+
+export function renderProjectSettingsView(ctx: PageContext, project: string, visibility: string, members: ProjectMemberView[], membersError?: string): string {
+  const base = `/projects/${encodeURIComponent(project)}`;
+  const isMembers = visibility === "members";
+
+  const memberRows = members.map((m) => `
+    <div class="px-4 py-3 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <p class="text-sm font-mono text-gray-700">${escapeHtml(m.participant_id)}</p>
+        ${m.role ? `<span class="px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">${escapeHtml(m.role)}</span>` : ""}
+      </div>
+      <form method="POST" action="${base}/members/${encodeURIComponent(m.participant_id)}/delete?token=${ctx.token}">
+        <button type="submit" class="text-xs font-medium text-red-600 hover:text-red-700">Remove</button>
+      </form>
+    </div>`).join("");
+
+  return `
+    ${nav(ctx.token, navOpts(ctx))}
+    <div class="max-w-3xl mx-auto px-6 pt-12 pb-16 space-y-10">
+      <div>
+        ${sectionHeader("Project settings")}
+        <div class="flex items-baseline justify-between mb-4">
+          <h1 class="text-2xl font-bold text-gray-900">${escapeHtml(project)}</h1>
+          <a href="/dashboard?token=${ctx.token}" class="text-xs font-medium text-polaris-700 hover:text-polaris-800">Back to dashboard</a>
+        </div>
+        <form method="POST" action="${base}/visibility?token=${ctx.token}" class="bg-white border border-gray-200 rounded-lg p-5">
+          <p class="text-sm font-semibold text-gray-900">Visibility</p>
+          <p class="text-sm text-gray-500 mt-1">Who can view this project's sessions and transcripts.</p>
+          <div class="mt-3 space-y-2">
+            <label class="flex items-center gap-2 text-sm text-gray-700">
+              <input type="radio" name="visibility" value="org"${isMembers ? "" : " checked"}>
+              Everyone in the organization
+            </label>
+            <label class="flex items-center gap-2 text-sm text-gray-700">
+              <input type="radio" name="visibility" value="members"${isMembers ? " checked" : ""}>
+              Members only
+            </label>
+          </div>
+          <button type="submit" class="mt-4 px-4 py-2 bg-polaris-700 text-white text-sm font-medium rounded-lg hover:bg-polaris-800 transition">Save visibility</button>
+        </form>
+      </div>
+
+      <div>
+        ${sectionHeader("Members")}
+        ${membersError ? `<div class="bg-white border border-red-200 rounded-lg p-5 text-sm text-red-700 mb-3">${escapeHtml(membersError)}</div>` : ""}
+        <div class="bg-white border border-gray-200 rounded-lg divide-y divide-gray-100">
+          ${memberRows || `<div class="px-4 py-3 text-sm text-gray-500">No members yet.${isMembers ? "" : " Membership only applies when visibility is set to members only."}</div>`}
+        </div>
+        <form method="POST" action="${base}/members?token=${ctx.token}" class="mt-3 bg-white border border-gray-200 rounded-lg p-5">
+          <p class="text-sm font-semibold text-gray-900">Add member</p>
+          <div class="mt-3 flex flex-col sm:flex-row gap-2">
+            <input name="participant_id" required placeholder="user:priya" class="flex-1 ${formInputClass}">
+            <input name="role" placeholder="Role (optional)" class="sm:w-40 ${formInputClass}">
+            <button type="submit" class="px-4 py-2 bg-polaris-700 text-white text-sm font-medium rounded-lg hover:bg-polaris-800 transition">Add</button>
+          </div>
+        </form>
+      </div>
+    </div>`;
+}

package/tests/acl.test.ts

@@ -0,0 +1,100 @@
+import { describe, expect, test, beforeAll, afterAll } from "bun:test";
+import {
+  createDb,
+  createOrg,
+  createProject,
+  getProject,
+  setProjectVisibility,
+  addProjectMember,
+  removeProjectMember,
+  listProjectMembers,
+  userCanAccessProject,
+  type Sql,
+} from "../src/service/db";
+
+const DATABASE_URL = process.env.DATABASE_URL ?? "postgres://polaris:polaris@localhost:5432/polaris_test";
+
+// Unique ids so this file is self-contained against a live Postgres.
+// (project_members rows survive resetTestData, so unique ids matter.)
+const RUN = crypto.randomUUID().slice(0, 8);
+const ORG = `acl-org-${RUN}`;
+const OPEN_PROJECT = `pj-acl-open-${RUN}`;
+const LOCKED_PROJECT = `pj-acl-locked-${RUN}`;
+
+const MEMBER = `user:member-${RUN}`;
+const OUTSIDER = `user:outsider-${RUN}`;
+
+let sql: Sql;
+
+beforeAll(async () => {
+  // Drop and recreate via createDb (mirrors tests/db.test.ts) so the schema —
+  // including the visibility migration and project_members — matches db.ts exactly.
+  sql = await createDb(DATABASE_URL);
+  await sql`DROP TABLE IF EXISTS plan_changes`;
+  await sql`DROP TABLE IF EXISTS events`;
+  await sql`DROP TABLE IF EXISTS sessions`;
+  await sql`DROP TABLE IF EXISTS projects`;
+  await sql`DROP TABLE IF EXISTS users`;
+  await sql`DROP TABLE IF EXISTS orgs`;
+  await sql.end();
+  sql = await createDb(DATABASE_URL);
+  await createOrg(sql, ORG, "ACL Org");
+  await createProject(sql, ORG, OPEN_PROJECT);
+  await createProject(sql, ORG, LOCKED_PROJECT);
+});
+
+afterAll(async () => {
+  await sql.end();
+});
+
+describe("project visibility", () => {
+  test("projects default to 'org' visibility and are accessible to anyone", async () => {
+    const project = await getProject(sql, ORG, OPEN_PROJECT);
+    expect(project).not.toBeNull();
+    expect(project!.visibility).toBe("org");
+    expect(await userCanAccessProject(sql, ORG, OPEN_PROJECT, OUTSIDER)).toBe(true);
+    expect(await userCanAccessProject(sql, ORG, OPEN_PROJECT, null)).toBe(true);
+  });
+
+  test("'members' visibility blocks non-members but allows members", async () => {
+    await setProjectVisibility(sql, ORG, LOCKED_PROJECT, "members");
+    const project = await getProject(sql, ORG, LOCKED_PROJECT);
+    expect(project!.visibility).toBe("members");
+
+    // Non-member blocked
+    expect(await userCanAccessProject(sql, ORG, LOCKED_PROJECT, OUTSIDER)).toBe(false);
+    // Anonymous (null participant) stays allowed — dev/test back-compat
+    expect(await userCanAccessProject(sql, ORG, LOCKED_PROJECT, null)).toBe(true);
+
+    // Member allowed
+    await addProjectMember(sql, ORG, LOCKED_PROJECT, MEMBER, "editor");
+    expect(await userCanAccessProject(sql, ORG, LOCKED_PROJECT, MEMBER)).toBe(true);
+
+    // The open project is unaffected
+    expect(await userCanAccessProject(sql, ORG, OPEN_PROJECT, OUTSIDER)).toBe(true);
+  });
+
+  test("adding the same member twice upserts the role", async () => {
+    await addProjectMember(sql, ORG, LOCKED_PROJECT, MEMBER, "viewer");
+    const members = await listProjectMembers(sql, ORG, LOCKED_PROJECT);
+    const rows = members.filter((m) => m.participant_id === MEMBER);
+    expect(rows).toHaveLength(1);
+    expect(rows[0].role).toBe("viewer");
+  });
+
+  test("removing a member revokes access", async () => {
+    await removeProjectMember(sql, ORG, LOCKED_PROJECT, MEMBER);
+    const members = await listProjectMembers(sql, ORG, LOCKED_PROJECT);
+    expect(members.find((m) => m.participant_id === MEMBER)).toBeUndefined();
+    expect(await userCanAccessProject(sql, ORG, LOCKED_PROJECT, MEMBER)).toBe(false);
+  });
+
+  test("switching back to 'org' restores access for everyone", async () => {
+    await setProjectVisibility(sql, ORG, LOCKED_PROJECT, "org");
+    expect(await userCanAccessProject(sql, ORG, LOCKED_PROJECT, OUTSIDER)).toBe(true);
+  });
+
+  test("unknown projects are treated as accessible (default-open)", async () => {
+    expect(await userCanAccessProject(sql, ORG, `pj-does-not-exist-${RUN}`, OUTSIDER)).toBe(true);
+  });
+});