non-linear-docs/03-VIEWS-AND-UI.md

Non-Linear: Views & UI

Overview

Non-Linear provides two primary graph views, a flat fallback, and a cycle view. The interaction model is keyboard-first with a command palette as the primary navigation method.

View 1: Layered Overview

Purpose: See the entire project structure at a glance, organized by abstraction level.

Layout: Rows arranged by depth in the decomposition tree. Each row represents one abstraction layer.

Layer 0 (root):     [My SaaS Project]
                    /        |         \
Layer 1:     [Auth]      [Billing]    [Dashboard]
              / \           |          /    \
Layer 2:  [Login] [SSO]  [Stripe]  [Charts] [Filters]
            |                         |
Layer 3:  [OAuth flow]             [Bar chart component]

Behavior

• Edges visible: Parent→child edges drawn between layers. Lateral links shown as overlay edges (dashed, colored by type).
• Backlink count badges: Nodes show inbound link counts ("3 blocked").
• Cycle highlighting: Cycle members highlighted with color/tag.
• Collapse/expand: Each node can collapse its subtree.
• Zoom: At high zoom, nodes show only title. At lower zoom, nodes show title + status + assignee.
• Filtering: Filter by label, status, assignee. Non-matching nodes dimmed, not hidden (preserving structural context).
• Node coloring: Status-based by default. Optionally by label, assignee, or priority.

View 2: Focus Widget

Purpose: Inspect a single node and its immediate context.

Layout: Selected node in center. Parent shown above. Children shown below. Lateral links shown as badges or side panel.

Behavior

• Breadcrumb navigation: Full root→node path as clickable segments at the top (e.g., Project > Backend > Auth > Login Flow > Password Reset).
• Navigation: Click any node to make it the new focus ("walking the tree").
• Detail panel: Full description, comments, change history timeline (compact, filterable by event type).
• Backlinks section: Inbound lateral links grouped by type.
• Quick actions: Change status, assign, add labels, add child, add link.

View 3: Flat List / Board (Fallback)

Purpose: Quick triage, standup-style review, batch operations.

Layout: Standard list or Kanban board (columns = statuses).

• Sorting: By status, priority, assignee, updated date, creation date.
• Grouping: By parent node, label, assignee.
• Bulk actions: Multi-select for status change, assign, add labels.
• Search: Full-text search across titles and descriptions.

View 4: Cycle View

Purpose: See current sprint/cycle work across all subtrees.

Layout: Flat list of current cycle members, grouped by subtree or status.

Interaction Model

Keyboard-First

Every action has a keyboard shortcut. Graph navigation:

• Alt+↑ — navigate to parent
• Alt+↓ — navigate to children
• Alt+←/→ — navigate siblings
• Follow lateral links via shortcut

Command Palette (Cmd+K)

The primary navigation and action method:

• Fuzzy search across all nodes, actions, views
• Context-aware: shows different actions depending on current view and selection
• Unified entry point for commands ("change status") and search results ("issues matching 'stripe'")

Natural Language Node Creation (from Todoist)

Type in the command palette: "Add a bug under Auth > Login flow: password reset emails aren't sending, p0, assign to agent-1"

• Parses tree path via >, labels via # or keywords (p0, bug), assignment via @
• Fuzzy-matches node names in the path
• Falls back to inbox if path can't be resolved
• Agent can use same syntax via API

Plan-Then-Apply

Structural changes show a preview before committing:

• Reparent preview: "Moving 'Auth' under 'Infrastructure' will: change depth from 1→2, move 12 child nodes, agent-1 will lose access (scoped to 'Backend' subtree)"
• Bulk operations: "Changing status of 8 nodes to 'done' — 3 have open blockers"
• Delete preview: "Deleting 'Legacy API' will remove 1 node + 7 children, break 3 lateral links"
• Agent proposals: agent submits a "plan" (e.g., proposed decomposition), human reviews diff-style and approves

View Switching

Users can switch between views freely. The selected node context is preserved — if you're focused on "Login" in the Focus Widget and switch to Layered Overview, "Login" is highlighted/centered.

Notifications (Scoped Watching)

• Watch granularity: single node, subtree, or project-wide
• Event type filters: status changes, comments, new children, link changes, agent actions
• Defaults: watch nodes you created or are assigned to
• Mute: temporarily silence a noisy subtree
• Agent filter: "only notify me when agent-1 changes something"

Entry Experience

New Project (Clean Start)

1. User creates a project → automatically creates root node with project name
2. User placed in Focus Widget on root node
3. Prompt to add first children (components/areas)
4. Command palette available immediately for keyboard-driven creation

Import (v0.2+)

• Import from Linear, Jira, GitHub Issues
• System infers hierarchy from existing relationships
• User reviews and adjusts inferred tree before confirming