Skip to content

Synchronize README and wireframe docs #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blackopsrepl merged 1 commit into from
Mar 21, 2026
Merged

Synchronize README and wireframe docs #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 12 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ That's it. Every asset is compiled into the binary via `include_dir!`.

## Screenshots

**Planner123** — Gantt chart with dependency arrows, project-colored bars, and constraint scoring:
**Planner123** — Gantt chart with split panes, project-colored bars, and constraint scoring:

![Planner123 Gantt](screenshots/planner123-gantt.png)

Expand Down Expand Up @@ -166,7 +166,7 @@ SF.createButton({ text: 'Sm', variant: 'primary', size: 'small' })
## Timeline Rail

The scheduling hero view. Resource lanes with positioned task blocks,
gauges, stats, heatmaps, and changeover indicators.
gauges, stats, and changeover indicators.

```javascript
// Day header
Expand Down Expand Up @@ -227,7 +227,8 @@ Gauge styles: `heat` (blue→amber→red), `load` (emerald→amber→red), `emer

Interactive task scheduling with Frappe Gantt. Split-pane layout: task grid
on top, SVG timeline chart on bottom. Drag to reschedule, resize to change
duration, sortable grid columns, project-colored bars, and pinned task styling.
duration, sortable grid columns, project-colored bars, dependency arrows,
and pinned task styling.

```html
<link rel="stylesheet" href="/sf/vendor/frappe-gantt/frappe-gantt.min.css">
Expand Down Expand Up @@ -394,8 +395,9 @@ SF.map.decodePolyline('_p~iF~ps|U...'); // Google polyline algorithm
solverforge-ui/
├── Cargo.toml # 2 deps: axum + include_dir
├── src/lib.rs # routes() + asset serving
├── Makefile # make → cats css-src/ + js-src/ into sf.css + sf.js
├── css-src/ # 16 CSS source files (numbered for concat order)
├── Makefile # bundles css-src/ + js-src/ into sf.css + sf.js
├── .github/workflows/ # CI, release, and publish automation
├── css-src/ # 19 CSS source files (numbered for concat order)
│ ├── 00-tokens.css # design system variables
│ ├── 01-reset.css # box-sizing reset
│ ├── 02-typography.css # @font-face declarations
Expand All @@ -411,8 +413,10 @@ solverforge-ui/
│ ├── 12-footer.css # .sf-footer
│ ├── 13-scrollbars.css # custom webkit scrollbars
│ ├── 14-animations.css # @keyframes + toast + api guide
│ ├── 15-rail.css # timeline rail, resource cards, blocks
│ └── 16-gantt.css # Frappe Gantt + Split.js layout + bar styling
│ ├── 15-rail-resources.css # resource cards, gauges, resource layout
│ ├── 16-rail-blocks.css # rail blocks, changeovers, unassigned styles
│ ├── 17-gantt-layout.css # split layout, grid table, view controls
│ └── 18-gantt-bars.css # Frappe bar overrides, pinned/highlighted bars
├── js-src/ # 15 JS source files
│ ├── 00-core.js # SF namespace, escHtml, el()
│ ├── 01-score.js # score parsing
Expand All @@ -427,7 +431,7 @@ solverforge-ui/
│ ├── 10-backend.js # createBackend() — axum/tauri/fetch
│ ├── 11-solver.js # createSolver() — SSE state machine
│ ├── 12-api-guide.js # createApiGuide(), createFooter()
│ ├── 13-rail.js # timeline rail, resource cards, blocks
│ ├── 13-rail.js # timeline rail header, cards, blocks, changeovers
│ └── 14-gantt.js # Frappe Gantt wrapper (split pane, grid, chart)
└── static/sf/ # Embedded assets (include_dir!)
├── sf.css # concatenated from css-src/
Expand Down
26 changes: 9 additions & 17 deletions WIREFRAME.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,16 +290,8 @@ Shorthand: `SF.showError(title, detail)`
│ resource- │ color per process, late blocks glow red │
│ stats │ │
│ │ ╲╲╲╲ .sf-changeover (diagonal amber stripes) │
├────────────┼──────────────────────────────────────────────────────┤
│ │ ░░░░░░░░░░░░░ .sf-heatmap-segment ░░░░░░░░░░░░░░ │
└────────────┴──────────────────────────────────────────────────────┘
200px fixed ← remaining width is the rail →

Unassigned:
┌──────────────────────────────────────────────────────────────────┐
│ ODL-55 — Tempra — Rossi ODL-88 — Ricottura — Verdi │
│ ↑ .sf-unassigned-pill (red border, red text) │
└──────────────────────────────────────────────────────────────────┘
```

**JS:**
Expand Down Expand Up @@ -345,31 +337,31 @@ card.clearBlocks();
┌──────────────────────────────────────────────────────────────────┐
│ .sf-gantt-pane (grid) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Tasks [expand] │ │ .sf-gantt-pane-header
│ │ Tasks │ │ .sf-gantt-pane-header
│ ├────────────────────────────────────────────────────────────┤ │
│ │ TASK │ PROJECT │ START │ P │ PIN │ │ .sf-gantt-table th
│ │ TASK │ START │ P │ │ │ .sf-gantt-table th
│ ├───────────────────────────────────────────────────────────│ │
│ │▌ Design review │ ● Alpha │ 09:00 │ P1 │ │ │ .sf-gantt-row
│ │▌ Implementation │ ● Alpha │ 10:30 │ P2 │ │ │ left border = project color
│ │▌ Testing │ ● Beta │ 14:00 │ P3 │ 📌 │ │ sweep underline on hover
│ │▌ Design review │ 09:00 │ P1 │ │ │ .sf-gantt-row
│ │▌ Implementation │ 10:30 │ P2 │ │ │ left border = custom_class
│ │▌ Testing │ 14:00 │ P3 │ │ │ sweep underline on hover
│ └────────────────────────────────────────────────────────────┘ │
├══════════════════════════════════════════════════════════════════┤ ← Split.js gutter (4px, emerald on hover)
│ .sf-gantt-pane (chart) │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Schedule [Quarter Day ▾] [expand] │ │ .sf-gantt-pane-header
│ │ Schedule [Quarter Day ▾] │ │ .sf-gantt-pane-header
│ ├────────────────────────────────────────────────────────────┤ │
│ │ Frappe Gantt SVG │ │
│ │ ┌───────────────┬──────────────────────────┬─────────┐ │ │
│ │ │ 09:00 10:00 │ 11:00 12:00 13:00 │ 14:00 │ │ │
│ │ ├───────────────┼──────────────────────────┼─────────┤ │ │
│ │ │ ████████████ ┼──→ ██████████████████████│ │ │ │ bars colored by project
│ │ │ ████████████ ┼──→ ██████████████████████│ │ │ │ bars colored by custom_class
│ │ │ Design │ Implementation │ │ │ │ arrows = dependencies
│ │ │ │ │ ████████│ │ │ pinned = dashed amber stroke
│ │ │ │ │ ████████│ │ │
│ │ │ │ │ Testing │ │ │
│ │ └───────────────┴──────────────────────────┴─────────┘ │ │
│ │ │ │
│ │ hover: brightness(1.12) + drop-shadow │ │
│ │ drag: grab cursor, tooltip shows time range │ │
│ │ drag: grab cursor │ │
│ │ resize: ew-resize handles appear on hover │ │
│ └────────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────┘
Expand Down
Loading