127 lines
5.2 KiB
Markdown
127 lines
5.2 KiB
Markdown
# 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
|