Navigating the UI

Trinity's interface is built around a sidebar on the left with contextual pages for each major feature area. This page is a tour of what's where.

The sidebar has a fixed header (Trinity logo + user menu, scope switcher, project selector) and two collapsible sections underneath:

Project — items tied to the active project, shown only when a project is selected. Items unlock progressively as the project advances through its phases (onboarding → imported → structured → planning → executing).
Hub — workspace-wide items, always available.

Open one section at a time by clicking its header. A task indicator and the Trinity version label sit at the bottom of the sidebar.

Scope switcher

Directly above the project selector, the scope switcher lets you flip between your Personal workspace and any Team you belong to. Projects, settings, and data plane are all scoped to the active scope.

Project selector

Shows the active project name. Click to switch projects or open the New Project / Import Existing flow. Projects from the current scope only.

Project section

Items in order of appearance (some only unlock later):

Roadmap — onboarding roadmap; visible during the onboarding phase only
Dashboard — release-scoped planning view with PRD tabs, phase progress, and stats
Code — read-only code browser for your project's repos (file tree, branch switcher, Cmd+P file search)
Stories — browse and filter stories for the active release
Run — execution control, active stories, gate approvals
Releases — create releases, wire dependencies, track lifecycle state
Architect — add features or edit stories through a conversational interface
Align — project health check (roadmap review pre-PRD, drift detection post-PRD)
Audit — on-demand codebase quality scanner
Recaps — activity summaries and PDF report export
Metrics — execution analytics and AI cost tracking
Settings — per-project configuration (details, repos, collaborators, codebase map, targets, danger zone)

Hub section

Always visible, regardless of project state:

Activity — global activity feed with filters (project, category, actor)
Knowledge — project knowledge base (vault): architecture, learnings, audit reports
Gotchas — curated pitfalls library by language, framework, and tool
Teams — team management and invitations
Requests — pending invites (team, sponsorship, storage), plus project move approvals (badge shows count)
Team Settings — team-wide defaults (team scope only; visible to owners and managers)
Settings — app-wide configuration

Task indicator

The sidebar shows a task indicator when background operations are running — PRD generation, align, audit, onboarding generation, etc. It displays the current phase and progress.

Key Page Layouts

Planning Dashboard

Your command center for the active release's plan:

PRD tabs at the top — switch between PRDs belonging to the current release
Phase progress — visual progress bars for each phase
Stats cards — story counts, completion rates, dependency status
Generate PRD button — create a new plan iteration

Release selection happens at the Hub/project level, not here — see the Releases page.

Story Graph

The dependency graph visualizes relationships between stories in the active release:

Nodes represent stories, colored by status (pending, running, complete, failed)
Edges show dependencies
Zoom and pan to navigate large graphs
Click a node to open the story detail panel
Save layouts to preserve custom arrangements

Run Page

Shows execution state for the active release:

Coordinator status — one coordinator per (project, release) pair; running, draining, or idle
Active stories — currently executing with pipeline phase indicators
Gate queue — stories paused at gates awaiting your input
Worker status — how many workers are active and what they're doing

Releases Page

Releases are organized into columns by lifecycle state:

In Progress — status created (stories still running or pending)
Ready — all stories terminal, awaiting manual transition to releasing
Releasing — release pipeline running (preflight, SEO, release notes, tagging)
Released — completed releases (historical record)

Click any release card to open its detail panel: status controls, PRD list, release-dependency editor, and automation overrides (per-release useReleaseBranches / autoReleaseToBase / deleteReleaseBranch).

The release pipeline is always triggered manually — you start it either from the release detail panel here, or from the "Ready to release" card on the Run page once all stories are terminal.

Audit Page

Run on-demand codebase quality scans:

Run audit — trigger a comprehensive scan of your codebase
Chat interface — ask follow-up questions or focus on specific areas
Checklist tracking — audit findings are tracked as checklists that auto-update when stories address them
History — browse previous audit reports
Implement — send findings to Architect to generate fix stories

Story Detail

Click any story (from the list, graph, or run page) to see:

Description and acceptance criteria
Metadata — difficulty, surface area, dependencies, tags, targets, display ID (prd:phase.epic.story)
Pipeline status — which agent phase it's in
Agent handoffs — reports from each agent in the pipeline
PR and merge status — for completed stories
Comments + activity timeline — who changed what, when

Knowledge Base

Organized hierarchically:

Books — top-level containers (your project knowledge, gotchas, this user guide)
Sections — grouped chapters within a book
Chapters — topic areas
Pages — individual knowledge articles

Navigate by expanding sections in the left panel, or use the search bar to find specific content across all books.

Help Assistant

A floating help button appears in the bottom-right of every page. Click it to open a chat where you can ask questions about how to use Trinity. The assistant answers from the user guide — it won't make changes to your project. You can paste screenshots to ask about specific UI elements.

Common Actions

Creating a Release

Releases are usually auto-created (the first one gets minted when you generate your first PRD), but you can also create them manually:

Navigate to Releases
Click Create Release
Enter a name, version, and optional description
Link one or more PRDs (or leave empty and move PRDs in later)
Go to Run to start execution for the release

Adding a Feature

Navigate to Architect
Describe what you want in the chat
Architect proposes either adding the PRD to an existing unshipped release or creating a new one — approve or override
Review the generated stories
Confirm to add them to the release

Approving a Gate

Navigate to Run
Look for stories with a gate indicator
Click the gate to review the agent's request (deviation, missing secret, missing assets, etc.)
Choose Approve, Skip, or provide Feedback (re-runs the feedback pipeline)

Searching the Knowledge Base

Navigate to Knowledge
Use the search bar at the top
Results show matching pages across all books
Click a result to jump directly to that page

Running a Codebase Audit

Navigate to Audit
Click Run Audit to start a scan
Optionally type a focus area in the chat
Review findings — each has a severity, category, and recommendation
Click Implement to send findings to Architect for story generation

Exporting a Report

Navigate to Recaps
Click the Reports button
Choose report type (Executive or Technical)
Select the time period
Click Download to get a PDF

Sidebar switches between major sections
Browser back/forward works for navigation history
Knowledge Base has its own search bar
URLs are deep-linkable: stories (/stories/{id}), releases (/releases/{id}), knowledge pages (/knowledge/{book}/{chapter}/{page})

Responsive Design

Trinity is designed primarily for desktop use. The interface works best on screens 1280px or wider. On smaller screens (below 1024px) the sidebar collapses into a drawer with a sticky header at the top.