regular UI specs

[pashute]

to compare with aidash

# Step Pairing App — Specification

## Overview
A single-page tool for matching actual steps to planned steps, organizing them into categories, and exporting a structured markdown hierarchy. No persistence — session only.

---

## Layout

### Columns (left to right)
Three columns: **Category | Planned | Actual**

- **Category** — contains user-defined categories, each as a draggable block containing its associated planned and actual steps
- **Planned** — planned steps, sorted under categories or under "No Category" at the top
- **Actual** — actual steps, each paired to a planned step (side by side, stacking below if multiple), or floating under a category, or unpaired under "No Category"

A **"No Category"** group always appears at the top of all columns as the default landing zone.

Category rows span all three columns as a full-width divider/header, with a separator line above and below each category block. The last group before the next category ends when its last planned/actual row ends.

### Sidebar (far left)
Vertical control panel with the following buttons:
- **Suggest** — AI suggests categories
- **Categorize** — AI assigns planned steps to existing categories
- **Pair** — AI pairs actual steps to planned steps (or to categories if no match)
- **Undo / Redo**
- **Reset** — keeps all steps and categories, but removes all pairings and categorizations; everything returns to No Category
- **Clear** — empties all content entirely
- **Export**

---

## Columns — Editing

Each column header has an **edit pencil icon (✏️)** and an **X button**.

### Edit Pencil
- Clicking the pencil opens a **multiline textbox + Save button** below the column header
- Opening a different column's textbox closes the current one
- Clicking **Save** closes the textbox

### Save Behavior
Each line in the textbox becomes a draggable **step item**.
- If the line already starts with a dash and/or checkbox (`- [ ]`), it is kept as-is
- If not, `- [ ] ` is prepended automatically

### Column X Button
- Clears that column's content only
- For Category column: "No Category" remains
- For Planned column: paired Actual items stay paired to each other but lose their Planned
- For Actual column: pairings are removed, Planned steps remain

---

## Steps — Behavior

### Appearance
Each step is a draggable item showing:
`- [ ] Step text`

### Editing
- **Double-click** to edit inline; press **Enter** to confirm
- **Delete key** (when selected/focused) to delete the item

### Dragging — Planned Steps
- Drag into a category block → step moves under that category (indented in its column)
- Drag to "No Category" → removes from category
- Drag to reorder within a category

### Dragging — Actual Steps
- Drag onto a **Planned step** → pairs them; actual appears to the right of the planned on the same row
- Multiple actuals on one planned → stack below each other, aligned to the Actual column
- Drag onto a **category block** (with no planned target) → associates with category, not a specific planned
- Drag out → unlinks/unpairs; returns to No Category

---

## Categories — Behavior

### Appearance
Each category spans all three columns as a full-width labeled divider, with a separator line above and below the block.

### Creating
- Added via the Category column's edit textbox (one category per line)

### Editing & Deleting
- **Double-click** to rename; **Enter** to confirm
- **Delete key** to delete category — steps inside return to No Category

### Dragging
- Drag category block up/down to reorder
- All associated steps move with it

---

## AI Mode

Triggered by **Suggest**, **Categorize**, or **Pair** buttons. Each action undoes the previous AI attempt before running fresh (equivalent to auto-Retry).

### Visual Marking
Affected items are marked with:
- **Orange highlight**
- **? (question mark)** badge
- Three inline controls: **✓ checkbox | ✔ confirm | ✗ reject**

### Item-level Actions
- **Check (✓)** — accepts this item; removes orange and question mark
- **✗ (X)** — rejects; moves item to No Category and removes markings

### Session-level Actions (appear at top or sidebar)
- **Save** — accepts all remaining marked items; removes all AI markings
- **Retry** — undoes the entire AI attempt and runs a fresh different suggestion

---

## Export

Clicking **Export** opens a plain text window showing the markdown output with a **Copy to Clipboard** button.

### Format

• Category Name
  -- Planned step
  --- Actual step
  --- Actual step
  -- Planned step
• No Category
  -- Planned step
  --- Actual step

---

## Future Features (noted, not in scope)
- `[v]` done, `[x]` cancelled, `[!]` problem — markings on actual steps reflected on their paired planned step
- **Organize** button — splits export into succeeded vs. failed planned steps