-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathviewer.html
More file actions
1057 lines (766 loc) · 45.8 KB
/
viewer.html
File metadata and controls
1057 lines (766 loc) · 45.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Spec Drift — Entropy Viewer</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0d1117;
color: #c9d1d9;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 14px;
line-height: 1.6;
overflow-x: hidden;
}
#app {
max-width: 800px;
margin: 0 auto;
padding: 20px 24px 120px;
}
/* Header */
.header {
text-align: center;
padding: 32px 0 24px;
border-bottom: 1px solid #21262d;
margin-bottom: 24px;
}
.header h1 {
font-size: 20px;
font-weight: 600;
color: #e6edf3;
letter-spacing: 0.5px;
}
.header .subtitle {
font-size: 12px;
color: #484f58;
margin-top: 4px;
}
.version-label {
font-size: 15px;
color: #58a6ff;
margin-top: 12px;
font-weight: 500;
}
/* Timeline */
.timeline {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 20px 0;
}
.timeline-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #21262d;
border: 2px solid #30363d;
cursor: pointer;
transition: all 0.3s;
position: relative;
}
.timeline-dot:hover {
background: #30363d;
border-color: #484f58;
}
.timeline-dot.active {
background: #58a6ff;
border-color: #58a6ff;
box-shadow: 0 0 8px rgba(88, 166, 255, 0.4);
}
.timeline-dot.visited {
background: #1f6feb;
border-color: #1f6feb;
}
.timeline-line {
width: 20px;
height: 2px;
background: #21262d;
}
/* Controls */
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 16px 0 24px;
}
.btn {
background: #21262d;
border: 1px solid #30363d;
color: #c9d1d9;
padding: 6px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-family: inherit;
transition: background 0.2s;
}
.btn:hover { background: #30363d; }
.btn:active { background: #484f58; }
.btn.play {
background: #1f6feb;
border-color: #1f6feb;
color: #fff;
min-width: 80px;
}
.btn.play:hover { background: #388bfd; }
/* Spec content */
.spec-container {
position: relative;
min-height: 400px;
}
.spec-line {
padding: 2px 8px;
border-radius: 3px;
transition: opacity 0.6s ease, background-color 0.6s ease;
white-space: pre-wrap;
word-wrap: break-word;
}
.spec-line.added {
background-color: rgba(46, 160, 67, 0.15);
border-left: 3px solid rgba(46, 160, 67, 0.5);
}
.spec-line.removed {
background-color: rgba(248, 81, 73, 0.15);
border-left: 3px solid rgba(248, 81, 73, 0.5);
}
.spec-line.fade-in {
opacity: 0;
}
.spec-line.fade-out {
opacity: 0;
pointer-events: none;
}
/* Markdown rendering */
.spec-line.h1 {
font-size: 22px;
font-weight: 700;
color: #e6edf3;
margin-top: 16px;
margin-bottom: 8px;
}
.spec-line.h2 {
font-size: 17px;
font-weight: 600;
color: #e6edf3;
margin-top: 20px;
margin-bottom: 6px;
border-bottom: 1px solid #21262d;
padding-bottom: 6px;
}
.spec-line.h3 {
font-size: 15px;
font-weight: 600;
color: #e6edf3;
margin-top: 12px;
margin-bottom: 4px;
}
.spec-line.bullet {
padding-left: 24px;
position: relative;
}
.spec-line.bullet::before {
content: '•';
position: absolute;
left: 10px;
color: #484f58;
}
.spec-line.hr {
border-bottom: 1px solid #21262d;
margin: 12px 0;
height: 1px;
}
.spec-line.blank {
height: 12px;
}
.spec-line .bold {
font-weight: 600;
color: #e6edf3;
}
/* Metrics bar */
.metrics-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #161b22;
border-top: 1px solid #21262d;
padding: 12px 24px;
display: flex;
justify-content: center;
gap: 32px;
font-size: 12px;
z-index: 100;
}
.metric {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.metric-value {
color: #58a6ff;
font-weight: 600;
font-size: 16px;
}
.metric-label {
color: #484f58;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 10px;
}
.metric-drift {
max-width: 300px;
text-align: center;
color: #8b949e;
font-size: 11px;
line-height: 1.4;
}
</style>
</head>
<body>
<div id="app">
<div class="header">
<h1>Spec Drift</h1>
<div class="subtitle">11 versions · semantic entropy timelapse</div>
<div class="version-label" id="versionLabel">Seed</div>
</div>
<div class="timeline" id="timeline"></div>
<div class="controls">
<button class="btn" id="prevBtn" onclick="prev()">← Prev</button>
<button class="btn play" id="playBtn" onclick="togglePlay()">▶ Play</button>
<button class="btn" id="nextBtn" onclick="next()">Next →</button>
</div>
<div class="spec-container" id="specContainer"></div>
</div>
<div class="metrics-bar" id="metricsBar">
<div class="metric">
<span class="metric-value" id="mIntent">—</span>
<span class="metric-label">Intent Score</span>
</div>
<div class="metric">
<span class="metric-value" id="mLoc">—</span>
<span class="metric-label">Lines of Code</span>
</div>
<div class="metric">
<span class="metric-value" id="mWords">—</span>
<span class="metric-label">Doc Words</span>
</div>
<div class="metric metric-drift" id="mDrift"></div>
</div>
<script>
// ── Embedded spec versions ──
const SPECS = [
`# Product Specification: To-Do List Web App
## Overview
A web-based task management application that allows users to create, organize, and track personal to-do items. The app provides a simple, distraction-free experience for managing daily tasks.
---
## Goals
- Help users capture and track tasks quickly
- Provide a clear view of what is pending, in progress, and completed
- Support basic organization to reduce cognitive load
---
## User Stories
- As a user, I can add a new task with a title and optional description
- As a user, I can mark a task as complete or incomplete
- As a user, I can edit the title or description of an existing task
- As a user, I can delete a task I no longer need
- As a user, I can view all tasks, or filter by status (active, completed, all)
- As a user, I can reorder tasks by dragging them into a preferred priority order
- As a user, my tasks persist between sessions so I do not lose my data
---
## Functional Requirements
### Task Management
- Each task must have a title (required) and an optional description
- Tasks must have a status: active or completed
- Users can bulk-delete all completed tasks at once
### Organization
- Tasks are displayed in a list ordered by user-defined priority
- Users can filter the task list by status
- A counter displays the number of remaining active tasks
### Persistence
- Tasks are saved automatically without requiring a manual save action
- Tasks remain available when the user returns to the app in a new session
---
## Non-Functional Requirements
- The interface must be usable on both desktop and mobile screen sizes
- Actions such as adding or completing a task must feel immediate with no perceptible delay
- The app must be accessible, supporting keyboard navigation and screen readers
---
## Out of Scope
- User accounts or authentication
- Collaboration or task sharing with other users
- Due dates, reminders, or notifications
- Sub-tasks or nested task hierarchies
- Third-party integrations`,
`# To-Do List — Product Specification
## Overview
To-Do is a browser-based task management application. It runs entirely in the browser with no server or account required. All tasks are saved automatically to the browser's local storage, so they persist across page refreshes and browser restarts on the same device.
## Adding Tasks
Users enter a task title into a text field at the top of the page. A title is required; the form will not submit without one. An optional description field allows additional context to be entered for each task. Clicking the "Add Task" button creates the task, which immediately appears at the top of the list. After submission, both input fields are cleared and focus returns to the title field.
## Task List
Each task is displayed as a card showing its title and, if one was provided, its description beneath it. Every task card includes:
- A circular checkbox to mark the task complete or active.
- An edit button (pencil icon) to modify the task.
- A delete button (trash icon) to permanently remove the task.
- A drag handle (six-dot grip icon) for reordering.
When a task is marked complete, its title and description appear with a strikethrough and are visually dimmed. Toggling the checkbox again restores the task to an active state.
A counter in the page header displays the number of remaining (incomplete) tasks in real time, using correct singular or plural phrasing.
If no tasks match the current view, a "No tasks to show." message is displayed in place of the list.
## Editing Tasks
Clicking the edit button on any task opens a modal dialog overlaying the page. The modal pre-fills the current title and description. The user can update either field and click "Save" to apply the changes, or "Cancel" to discard them. Clicking outside the modal or pressing the Escape key also dismisses it without saving.
## Filtering Tasks
Three filter buttons — "All", "Active", and "Completed" — control which tasks are visible. Only one filter is active at a time. The active filter button is highlighted. Filtering does not delete tasks; it only changes the current view.
## Clearing Completed Tasks
The "Clear Completed" button permanently removes all tasks that have been marked complete in a single action. This button only performs the operation if at least one completed task exists.
## Reordering Tasks
Users can drag and drop task cards to rearrange them into any order. While dragging, the card being moved becomes semi-transparent and the target position is highlighted. Keyboard users can move the focused drag handle up or down with the Arrow Up and Arrow Down keys to reorder tasks without a mouse. The new order is saved immediately.
## Persistence
All task data — titles, descriptions, completion states, and order — is automatically saved to the browser's local storage after every change. No manual save action is required. Data is restored automatically the next time the page loads.`,
`# To-Do List — Product Specification
## Overview
To-Do is a browser-based task management application. It runs entirely in the browser with no server or account required. All tasks are saved automatically to the browser's local storage, so the list persists across page reloads and browser sessions on the same device.
## Interface Layout
The application displays a single-page interface with a maximum width of 640 pixels, centered on screen. The page is divided into three main areas: a form for adding tasks, a row of filter and bulk-action controls, and the task list itself.
A header at the top shows the application title and a live counter displaying how many tasks remain incomplete (for example, "3 tasks remaining" or "1 task remaining").
## Adding Tasks
At the top of the page, a form allows the user to create a new task. The form contains:
- A required text field for the task title.
- An optional textarea for a longer description.
- An "Add Task" button that submits the form.
Submitting the form with a non-empty title prepends the new task to the top of the list. Both fields are cleared automatically after submission and focus returns to the title field. Submitting with an empty title does nothing; focus is returned to the title field.
## The Task List
Each task appears as a card in the list and contains:
- A **drag handle** (a six-dot grid icon) on the left, used to reorder tasks.
- A **circular checkbox** that marks the task complete or incomplete.
- The **task title**, displayed in bold. Clicking the title also toggles the checkbox.
- An optional **description** shown below the title in smaller, secondary text.
- An **edit icon button** that opens the edit modal.
- A **delete icon button** (trash icon) that immediately removes the task.
Completed tasks display their title and description with a strikethrough and in a muted gray color.
When no tasks match the current filter, a "No tasks to show." message is displayed in place of the list.
## Completing and Toggling Tasks
Clicking a task's checkbox, or clicking its title, toggles the task between complete and incomplete. The change is reflected immediately in both the task's visual appearance and the remaining-tasks counter in the header.
## Editing Tasks
Clicking the edit icon on a task opens a modal dialog overlaying the page. The modal contains:
- A labeled title field (pre-filled with the task's current title).
- A labeled description field (pre-filled with the current description, if any).
- A "Save" button that applies the changes and closes the modal.
- A "Cancel" button that discards changes and closes the modal.
The modal also closes when the user clicks the backdrop outside the dialog or presses the Escape key.
## Filtering Tasks
Three filter buttons allow the user to narrow the visible list:
- **All** — shows every task (default view).
- **Active** — shows only incomplete tasks.
- **Completed** — shows only completed tasks.
The currently active filter is highlighted. Filters apply immediately and do not affect the underlying data.
## Bulk Deletion
A "Clear Completed" button removes all completed tasks from the list at once. If there are no completed tasks, the button has no effect.
## Reordering Tasks
Tasks can be reordered by dragging and dropping. The user picks up a task by its drag handle, drags it over another task, and drops it to place it in that position. The repositioned order is saved immediately.
Keyboard users can also reorder tasks by focusing a drag handle and pressing the Up or Down arrow keys to move that task one position at a time. Focus follows the moved item.
## Persistence
All task data — titles, descriptions, completion status, and order — is saved to the browser's local storage whenever any change is made. The full task list is restored automatically when the page is opened.`,
`# To-Do List — Product Specification
## Overview
To-Do is a browser-based task management application. It runs entirely in the browser with no server or account required. All tasks are saved automatically to the browser's local storage, so the list persists between sessions on the same device.
## Interface Layout
The application displays a single-page interface with a maximum content width of 640px, centered on the page. The layout consists of three main areas stacked vertically: a task entry form, a filter and bulk-action bar, and the task list itself. A header above these areas shows the application title alongside a live count of remaining (incomplete) tasks.
## Adding Tasks
At the top of the page is a form with two fields and a submit button. The first field is a required plain-text input for the task title. The second field is an optional multi-line textarea for a longer description. Clicking "Add Task" (or pressing Enter) creates the task and inserts it at the top of the list. If the title field is empty, the form does not submit and focus returns to the title input. After a task is added, both fields are cleared automatically.
## Task List
Each task appears as a card showing its title and, if provided, its description below the title. Every task card contains:
- A circular checkbox on the left to toggle completion status
- The task title, which also functions as a label for the checkbox
- An optional description in smaller text beneath the title
- An edit button (pencil icon) on the right
- A delete button (trash icon) on the right
- A six-dot drag handle on the far left for reordering
When a task is marked complete, its title and description are rendered with a strikethrough style and dimmed color to visually distinguish it from active tasks.
If no tasks match the current view, a "No tasks to show." message appears in place of the list.
## Completing and Deleting Tasks
Clicking the checkbox next to a task toggles it between active and completed. The task counter in the header updates immediately to reflect the number of incomplete tasks. Clicking the trash icon removes a task immediately and permanently.
## Editing Tasks
Clicking the edit (pencil) icon opens a modal dialog. The modal contains a title field pre-filled with the task's current title and a description textarea pre-filled with its current description. The user can modify either field and click "Save" to apply the changes. The modal can be dismissed without saving by clicking "Cancel", clicking outside the modal, or pressing the Escape key. A blank title prevents saving and returns focus to the title input.
## Filtering Tasks
Three filter buttons sit above the task list: "All", "Active", and "Completed". Selecting a filter updates the list to show only tasks matching that status. The active filter button is highlighted. The task counter always reflects the total number of incomplete tasks regardless of the current filter.
## Clearing Completed Tasks
A "Clear Completed" button in the filter bar removes all completed tasks from the list in a single action. If there are no completed tasks, the button has no effect.
## Reordering Tasks
Tasks can be reordered by dragging and dropping them within the list. While dragging, the source card becomes semi-transparent and the card being dragged over receives a highlighted border. Dropping a card repositions it. Tasks can also be reordered using the keyboard: focusing the drag handle and pressing the Up or Down arrow keys moves the task one position in the corresponding direction.
## Data Persistence
The task list is automatically saved to the browser's local storage after every change — including additions, completions, edits, deletions, reorders, and bulk clears. When the page is loaded, the saved task list is restored.`,
`# To-Do List — Product Specification
## Overview
To-Do is a single-page task management application that runs entirely in the browser. It allows users to create, manage, and organize a personal list of tasks. All data is saved automatically in the browser, so tasks persist across page reloads and browser sessions without requiring an account or network connection.
## Creating Tasks
At the top of the page is an entry form with two fields: a required title field and an optional description field. Typing a title and clicking **Add Task** (or pressing Enter) adds the task to the top of the list. The title field must contain at least one non-whitespace character; submitting an empty title does nothing and returns focus to the title field. After a task is added, both fields are cleared automatically.
## Task List
Each task appears as a card in the list and displays its title prominently. If a description was provided, it appears below the title in smaller text. Every task card includes:
- A circular **checkbox** on the left to mark the task complete or incomplete.
- An **edit button** (pencil icon) to modify the task.
- A **delete button** (trash icon) to permanently remove the task.
- A **drag handle** (six-dot grip icon) on the far left for reordering.
When a task is marked complete, its title and description are visually struck through and rendered in a muted color to distinguish it from active tasks.
## Editing Tasks
Clicking a task's edit button opens a modal dialog titled "Edit Task." The dialog presents the task's current title and description in editable fields. Clicking **Save** applies the changes; the title field must not be empty. Clicking **Cancel**, clicking outside the modal, or pressing the Escape key closes the dialog without saving.
## Reordering Tasks
Tasks can be reordered by dragging a card to a new position using the drag handle. Keyboard users can focus the drag handle and press the Up or Down arrow keys to move that task one position at a time.
## Filtering Tasks
Below the entry form, three filter buttons — **All**, **Active**, and **Completed** — control which tasks are visible. Only one filter is active at a time. When no tasks match the current filter, a "No tasks to show." message is displayed in place of the list.
## Clearing Completed Tasks
A **Clear Completed** button removes all completed tasks from the list at once. If there are no completed tasks, the button has no effect.
## Task Counter
The header displays a live count of remaining (incomplete) tasks, formatted as "N task remaining" or "N tasks remaining" with correct singular and plural grammar.
## Data Persistence
The task list, including completion states and order, is automatically saved to the browser's local storage whenever any change is made. The saved list is restored the next time the page is loaded.`,
`# To-Do List — Product Specification
## Overview
To-Do is a browser-based task management application. It runs entirely in the browser with no account or server required. All tasks are saved automatically to the browser's local storage, so the list persists across page refreshes and browser sessions on the same device.
## Interface Layout
The application displays a single-page interface centered on the screen with a maximum width suited for focused reading. At the top, the title "To-Do" appears alongside a live counter showing how many tasks remain incomplete, with correct singular and plural grammar ("1 task remaining" vs. "2 tasks remaining").
Below the header is an input area, followed by filter controls, and then the task list itself.
## Adding a Task
A user types a task title into the main text field and optionally fills in a description in the textarea below it. Clicking the "Add Task" button (or pressing Enter) adds the task to the top of the list. If the title field is empty, the form does not submit and focus returns to the title field. After a successful submission, both fields are cleared and the cursor returns to the title input for fast consecutive entry.
## Task List
Each task in the list displays:
- A drag handle on the left for reordering
- A circular checkbox to mark the task complete or incomplete
- The task title (bold) and, if provided, the description in smaller text below it
- An edit button and a delete button on the right
When a task is marked complete, its title and description are shown with a strikethrough and muted gray color. Toggling the checkbox again restores the task to active status.
## Editing a Task
Clicking the edit (pencil) icon on any task opens a modal dialog overlaying the page. The modal displays the task's current title and description in editable fields. The user can update either field and click "Save" to apply changes, or click "Cancel" (or press Escape, or click outside the modal) to dismiss without saving. The title field is required; saving with a blank title is not permitted.
## Deleting a Task
Clicking the trash icon on a task removes it immediately and permanently from the list.
## Filtering
Three filter buttons — "All," "Active," and "Completed" — control which tasks are visible. The active filter is highlighted. Switching filters does not delete or alter any tasks; it only changes the current view.
## Clearing Completed Tasks
A "Clear Completed" button removes all completed tasks from the list in a single action. If no tasks are currently marked complete, the button has no effect.
## Reordering Tasks
Tasks can be reordered by dragging and dropping them within the list. Keyboard users can reorder tasks by focusing the drag handle on a task and pressing the Up or Down arrow keys, which move the task one position at a time in the corresponding direction.
## Empty State
When no tasks match the current filter, a "No tasks to show." message is displayed in place of the list.`,
`# To-Do List
## Overview
To-Do List is a browser-based task management application. It runs entirely in the browser with no login required and automatically saves all data locally so tasks persist between sessions.
## Adding Tasks
At the top of the page, a form allows the user to create a new task. The form has two fields:
- **Title** (required) — a short, single-line name for the task.
- **Description** (optional) — a multi-line text area for additional detail.
Clicking **Add Task** saves the entry. If the title field is empty, the task is not saved and focus is returned to the title field. New tasks appear at the top of the list.
## The Task List
Each task appears as a card showing its title in bold, with the optional description shown beneath it in smaller text. Every task card provides three interactive controls:
- **Checkbox** — clicking it marks the task complete. Completed tasks display their title and description with a strikethrough and muted color to distinguish them visually. Clicking the checkbox again marks the task active.
- **Edit button** — opens a modal dialog pre-filled with the task's current title and description. The user can update either field and click **Save** to apply changes, or click **Cancel** (or press Escape, or click outside the modal) to discard them.
- **Delete button** — immediately removes the task from the list.
A live counter in the page header always reflects the number of tasks not yet completed (e.g., "3 tasks remaining" or "1 task remaining").
## Filtering
Three filter buttons let the user narrow the visible list:
- **All** — shows every task.
- **Active** — shows only tasks that are not yet complete.
- **Completed** — shows only tasks that have been marked complete.
The currently selected filter is highlighted. When no tasks match the active filter, a "No tasks to show." message is displayed in place of the list.
## Bulk Actions
A **Clear Completed** button removes all completed tasks from the list at once. If there are no completed tasks, clicking the button has no effect.
## Reordering
Tasks can be reordered by dragging and dropping them within the list. Each card has a grab handle on its left edge. Users who prefer keyboard interaction can focus the handle and use the **Up Arrow** and **Down Arrow** keys to move a task one position at a time.
## Data Persistence
All tasks are automatically saved to the browser's local storage whenever changes are made. Tasks, their descriptions, their completion states, and their order are all restored the next time the page is loaded.`,
`# To-Do List
## Overview
To-Do List is a browser-based task management application that lets users capture, organize, and track tasks. All data is saved automatically in the browser and persists across page refreshes and sessions without requiring an account or internet connection.
## Adding Tasks
The top of the page presents an input form with two fields: a required title field and an optional description field. Clicking **Add Task** saves the new task, which immediately appears at the top of the list. The title field must contain at least one non-whitespace character; submitting an empty title has no effect. After a task is added, both fields are cleared so the next task can be entered immediately.
## Task List
Each task appears as a card in the list and displays:
- A circular checkbox on the left to mark completion
- A bold title
- An optional description below the title, shown in smaller secondary text
- An edit button (pencil icon) and a delete button (trash icon) on the right
- A drag handle (six-dot grip icon) on the far left for reordering
Completed tasks are visually distinguished: the title and description are rendered in a muted grey color with a strikethrough on the title.
A counter in the page header shows how many tasks remain incomplete, with correct singular and plural grammar ("1 task remaining" vs. "2 tasks remaining").
When no tasks match the current view, a "No tasks to show." message is displayed in place of the list.
## Completing and Uncompleting Tasks
Clicking a task's circular checkbox toggles its completion status. Checking it marks the task complete; clicking it again restores the task to active.
## Editing Tasks
Clicking the edit button on any task opens a modal dialog overlaying the page. The modal pre-fills the task's current title and description. The user can modify either field and click **Save** to apply the changes. Clicking **Cancel**, clicking outside the modal, or pressing the Escape key dismisses the modal without saving.
## Deleting Tasks
Clicking the delete button on a task removes it immediately and permanently from the list.
## Filtering
Three filter buttons appear above the task list:
- **All** - shows every task regardless of status (the default view)
- **Active** - shows only incomplete tasks
- **Completed** - shows only completed tasks
The currently active filter is highlighted. The task counter always reflects the total number of incomplete tasks, independent of the selected filter.
## Clearing Completed Tasks
The **Clear Completed** button removes all completed tasks at once. If there are no completed tasks, the button has no effect.
## Reordering Tasks
Tasks can be reordered by dragging and dropping them within the list. Grabbing a task by its drag handle and dropping it onto another task moves it to that position. The same reordering is available via keyboard: focusing the drag handle and pressing the Up or Down arrow keys moves the task one position in the corresponding direction.
## Data Persistence
All tasks and their completion states are saved automatically to the browser's local storage. The list is fully restored when the page is reopened, with no manual save step required.`,
`# To-Do List
## Overview
To-Do List is a browser-based task management application that lets users create, organize, and track personal tasks. All data is stored locally in the browser, so tasks persist across page refreshes and sessions without requiring an account or network connection.
## Adding Tasks
The top of the page displays an input form with two fields: a required title field and an optional description field. Typing a title and clicking **Add Task** creates a new task, which immediately appears at the top of the list. If the title field is left blank, the form does not submit. After a task is added, both fields are cleared and focus returns to the title input for rapid entry of additional tasks.
## Viewing Tasks
Each task appears as a card in a vertical list. The card shows the task title in bold. If a description was provided, it appears below the title in smaller, muted text. A counter in the page header displays how many tasks remain incomplete, using correct singular or plural phrasing (e.g., "1 task remaining" or "3 tasks remaining"). When the visible list is empty, a "No tasks to show." message appears in place of the list.
## Completing Tasks
Each task card includes a circular checkbox on the left. Clicking it marks the task as complete: the checkbox fills with a green checkmark, and the task title and description are struck through and grayed out. Clicking the checkbox again restores the task to an active state.
## Editing Tasks
Clicking the pencil icon on any task opens a modal dialog. The dialog pre-fills the title and description fields with the task's current values. The user can update either field and click **Save** to apply changes, or click **Cancel** (or press Escape, or click outside the modal) to discard changes and close the dialog. A blank title prevents saving.
## Deleting Tasks
Each task card includes a trash icon button. Clicking it permanently removes that task from the list. The **Clear Completed** button, located above the list, removes all completed tasks at once in a single action.
## Filtering Tasks
Three filter buttons — **All**, **Active**, and **Completed** — control which tasks are visible. Only one filter is active at a time, highlighted in accent color. The active-task counter in the header always reflects the total number of incomplete tasks regardless of the current filter.
## Reordering Tasks
Tasks can be reordered by dragging and dropping them within the list. Each card has a six-dot drag handle on its left edge. Users can also reorder tasks using the keyboard by focusing the drag handle and pressing the Up or Down arrow keys to move a task one position at a time.
## Data Persistence
All tasks and their states are automatically saved to the browser's local storage whenever a change is made. Tasks are restored from local storage when the page loads, so the list survives browser refreshes and tab closures.`,
`# To-Do List
## Overview
To-Do List is a browser-based task management application. It runs entirely in the browser with no account or login required. All tasks are saved automatically to the browser's local storage, so they persist across page refreshes and browser sessions.
## Adding Tasks
A form at the top of the page lets users create new tasks. Each task has a required title and an optional description. Submitting the form with an empty title does nothing; the title field is focused so the user can type. After a task is successfully added, both fields are cleared and focus returns to the title field, ready for the next entry. New tasks appear at the top of the list.
## Task List
Each task in the list displays:
- A circular checkbox to mark the task complete or incomplete
- The task title in bold
- An optional description in smaller secondary text below the title
- An edit button (pencil icon)
- A delete button (trash icon)
- A drag handle (six-dot grid icon) on the left side
Completed tasks show their title and description with a strikethrough and dimmed text. The header area displays a live count of how many tasks remain incomplete, with correct singular and plural phrasing ("1 task remaining" vs. "2 tasks remaining").
If the current view contains no tasks, a "No tasks to show." message appears in place of the list.
## Completing and Uncompleting Tasks
Clicking the circular checkbox on any task toggles its completion state immediately. The change is saved automatically.
## Editing Tasks
Clicking the edit icon on a task opens a modal dialog. The modal displays the current title and description in editable fields. The user can update either field and click Save to apply the changes, or click Cancel (or press Escape, or click outside the modal) to discard changes and close the dialog. Saving with a blank title does nothing and keeps the modal open.
## Deleting Tasks
Clicking the trash icon on a task removes it immediately and permanently from the list.
## Filtering Tasks
Three filter buttons — All, Active, and Completed — control which tasks are visible. The currently active filter is visually highlighted. Switching filters does not change or delete any tasks; it only changes what is shown.
## Clearing Completed Tasks
A "Clear Completed" button removes all completed tasks from the list at once. If there are no completed tasks, clicking the button has no effect.
## Reordering Tasks
Tasks can be reordered by dragging and dropping. The user grabs the drag handle on the left side of any task and drops it onto another task to swap positions. The task being dragged appears semi-transparent while in motion, and the drop target is highlighted with a colored border. Keyboard users can also reorder tasks by focusing the drag handle and pressing the Up or Down arrow keys, which moves the task one position at a time. The new order is saved automatically.`,
`# To-Do List
## Overview
To-Do List is a browser-based task management application that runs entirely in the user's browser. All tasks are saved automatically and persist across browser sessions without requiring an account or network connection.
## Adding Tasks
The top of the page presents an entry form with two fields: a required title field and an optional description field. Clicking **Add Task** saves the new task, which immediately appears at the top of the task list. The title field must not be empty; submitting a blank title does nothing and returns focus to the title field.
## Viewing Tasks
Tasks appear as a vertical list of cards. Each card displays the task title in bold. If a description was provided, it appears beneath the title in smaller text. A counter in the page header shows how many tasks remain incomplete, updating automatically as tasks are added or completed.
When no tasks match the current view, a "No tasks to show." message appears in place of the list.
## Completing Tasks
Each task card has a circular checkbox on the left side. Clicking it toggles the task between active and completed states. Completed tasks are visually distinguished: the title gains a strikethrough and both the title and description text change to a muted gray color.
## Editing Tasks
Each task card has an edit button (pencil icon). Clicking it opens a modal dialog pre-filled with the task's current title and description. The user can update either field and click **Save** to apply the changes. Clicking **Cancel**, clicking outside the modal, or pressing the Escape key closes the dialog without saving.
## Deleting Tasks
Each task card has a delete button (trash icon). Clicking it immediately and permanently removes that task from the list.
## Filtering Tasks
A row of three filter buttons — **All**, **Active**, and **Completed** — controls which tasks are visible. The active filter is highlighted. Switching filters does not change any task data; it only changes what is displayed.
## Clearing Completed Tasks
A **Clear Completed** button removes all completed tasks at once. If there are no completed tasks, the button has no effect.
## Reordering Tasks
Tasks can be reordered by dragging and dropping. Each task card has a six-dot drag handle on its left edge. A user can grab the handle and drop the task onto any other task to move it to that position. Keyboard users can focus the drag handle and press the Up or Down arrow keys to move a task one position at a time.
## Data Persistence
All task data is saved to the browser's local storage automatically after every change. Tasks are restored when the page is reopened, so no work is lost on page refresh or when closing and reopening the browser tab.`
];
// ── Embedded metrics ──
const METRICS = [
{ iteration: 0, intent_score: 10, total_lines_of_code: 0, doc_word_count: 495, feature_drift: "Seed specification — original intent baseline." },
{ iteration: 1, intent_score: 9, total_lines_of_code: 254, doc_word_count: 495, feature_drift: "All original features preserved; adds UI-level detail (modal dialogs, drag handle, keyboard reordering)." },
{ iteration: 2, intent_score: 8, total_lines_of_code: 237, doc_word_count: 653, feature_drift: "Preserves all features, adds UI detail; omits non-functional requirements and out-of-scope list." },
{ iteration: 3, intent_score: 8, total_lines_of_code: 237, doc_word_count: 636, feature_drift: "All features preserved with implementation detail; omits non-functional requirements." },
{ iteration: 4, intent_score: 9, total_lines_of_code: 237, doc_word_count: 482, feature_drift: "All features preserved; adds minor UI detail extending original intent." },
{ iteration: 5, intent_score: 8, total_lines_of_code: 237, doc_word_count: 513, feature_drift: "Adds keyboard reordering, empty state, counter grammar; omits non-functional requirements." },
{ iteration: 6, intent_score: 9, total_lines_of_code: 188, doc_word_count: 438, feature_drift: "All features preserved; non-functional requirements and out-of-scope not restated." },
{ iteration: 7, intent_score: 9, total_lines_of_code: 188, doc_word_count: 530, feature_drift: "Adds UI-level detail; no features removed or added." },
{ iteration: 8, intent_score: 9, total_lines_of_code: 188, doc_word_count: 466, feature_drift: "All features preserved; adds local-storage as explicit persistence mechanism." },
{ iteration: 9, intent_score: 8, total_lines_of_code: 188, doc_word_count: 466, feature_drift: "All features implemented; drops non-functional requirements around responsiveness and accessibility." },
{ iteration: 10, intent_score: 9, total_lines_of_code: 188, doc_word_count: 466, feature_drift: "All features preserved; adds precise UI details absent from original." }
];
// ── State ──
let currentVersion = 0;
let playing = false;
let playTimer = null;
// ── LCS diff ──
function lcsMatrix(a, b) {
const m = a.length, n = b.length;
const dp = Array.from({ length: m + 1 }, () => new Uint16Array(n + 1));
for (let i = 1; i <= m; i++)
for (let j = 1; j <= n; j++)
dp[i][j] = a[i-1] === b[j-1] ? dp[i-1][j-1] + 1 : Math.max(dp[i-1][j], dp[i][j-1]);
return dp;
}
function diffLines(oldLines, newLines) {
const dp = lcsMatrix(oldLines, newLines);
const ops = [];
let i = oldLines.length, j = newLines.length;
while (i > 0 || j > 0) {
if (i > 0 && j > 0 && oldLines[i-1] === newLines[j-1]) {
ops.unshift({ type: 'keep', text: newLines[j-1] });
i--; j--;
} else if (j > 0 && (i === 0 || dp[i][j-1] >= dp[i-1][j])) {
ops.unshift({ type: 'add', text: newLines[j-1] });
j--;
} else {
ops.unshift({ type: 'remove', text: oldLines[i-1] });
i--;
}
}
return ops;
}
// ── Markdown line classification ──
function classifyLine(text) {
if (/^# /.test(text)) return { cls: 'h1', content: text.replace(/^# /, '') };
if (/^## /.test(text)) return { cls: 'h2', content: text.replace(/^## /, '') };
if (/^### /.test(text)) return { cls: 'h3', content: text.replace(/^### /, '') };
if (/^---\s*$/.test(text)) return { cls: 'hr', content: '' };
if (/^- /.test(text)) return { cls: 'bullet', content: text.replace(/^- /, '') };
if (text.trim() === '') return { cls: 'blank', content: '' };
return { cls: '', content: text };
}
function renderInlineMd(text) {
// Bold: **text** or __text__
return text.replace(/\*\*(.+?)\*\*/g, '<span class="bold">$1</span>')
.replace(/__(.+?)__/g, '<span class="bold">$1</span>');
}
function createLineEl(text, type) {
const { cls, content } = classifyLine(text);
const el = document.createElement('div');
el.className = 'spec-line' + (cls ? ' ' + cls : '');
if (type === 'add') el.classList.add('added');
if (type === 'remove') el.classList.add('removed');
if (cls !== 'hr' && cls !== 'blank') {
el.innerHTML = renderInlineMd(escapeHtml(content));
}
return el;
}
function escapeHtml(s) {
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
}
// ── Rendering ──
const container = document.getElementById('specContainer');
function renderVersion(idx) {
const lines = SPECS[idx].split('\n');
container.innerHTML = '';
for (const line of lines) {
container.appendChild(createLineEl(line, 'keep'));
}
}
function transitionTo(targetIdx) {
if (targetIdx < 0 || targetIdx >= SPECS.length || targetIdx === currentVersion) return;
const oldLines = SPECS[currentVersion].split('\n');
const newLines = SPECS[targetIdx].split('\n');
const ops = diffLines(oldLines, newLines);
container.innerHTML = '';
let stagger = 0;
const STAGGER_MS = 30;
for (const op of ops) {
const el = createLineEl(op.text, op.type);
if (op.type === 'add') {
el.classList.add('fade-in');
container.appendChild(el);
const delay = stagger * STAGGER_MS;
stagger++;
setTimeout(() => {
el.classList.remove('fade-in');
}, 50 + delay);
} else if (op.type === 'remove') {
container.appendChild(el);
const delay = stagger * STAGGER_MS;
stagger++;
setTimeout(() => {
el.classList.add('fade-out');
setTimeout(() => el.remove(), 650);
}, 50 + delay);
} else {
container.appendChild(el);
}
}
currentVersion = targetIdx;
updateUI();
}
// ── UI updates ──
function updateUI() {
// Version label
const label = currentVersion === 0 ? 'Seed' : `Iteration ${currentVersion}`;
document.getElementById('versionLabel').textContent = label;
// Timeline dots
document.querySelectorAll('.timeline-dot').forEach((dot, i) => {
dot.classList.toggle('active', i === currentVersion);
dot.classList.toggle('visited', i < currentVersion);
});
// Metrics
const m = METRICS[currentVersion];
document.getElementById('mIntent').textContent = m.intent_score + '/10';
document.getElementById('mLoc').textContent = m.total_lines_of_code || '—';
document.getElementById('mWords').textContent = m.doc_word_count;
document.getElementById('mDrift').textContent = m.feature_drift;
// Button states
document.getElementById('prevBtn').disabled = currentVersion === 0;
document.getElementById('nextBtn').disabled = currentVersion === SPECS.length - 1;
}
function buildTimeline() {
const tl = document.getElementById('timeline');
for (let i = 0; i < SPECS.length; i++) {
if (i > 0) {
const line = document.createElement('div');