Code
    Chronicle VisualizerUpdated Jun 4, 2026JSX

    Chronicle Visualizer app page

    Imported React file from app/page.jsx.

    Source file

    app/page.jsx

    React176 lines
    1. "use client";
    3. import { useMemo, useState } from "react";
    5. const projects = ["all", "hyphenomenon", "rps-etsy", "family-shapes", "tmora", "shopify", "codex-skills"];
    7. const frames = Array.from({ length: 72 }).map((_, index) => {
    8. const hour = 12 - Math.floor(index / 12);
    9. const minute = 55 - ((index * 5) % 60);
    10. const project = projects[(index % (projects.length - 1)) + 1];
    11. const status = index % 9 === 0 ? "quarantine" : index % 4 === 0 ? "candidate" : "private";
    12. return {
    13. id: `frame-${index + 1}`,
    14. time: `${Math.max(7, hour)}:${String(Math.max(0, minute)).padStart(2, "0")} ${hour >= 12 ? "PM" : "AM"}`,
    15. group: hour >= 11 ? "June 4, 2026 - Midday Capture" : "June 4, 2026 - Morning Capture",
    16. project,
    17. status,
    18. summary: project === "tmora"
    19. ? "Inferred TMORA print-production context. Raw screen content stays private until reviewed."
    20. : `Inferred ${project} work context. Publication requires redaction review and source-safe summary text.`
    21. };
    22. });
    24. const statusLabels = {
    25. private: "raw private",
    26. candidate: "redaction candidate",
    27. quarantine: "quarantined"
    28. };
    30. export default function Home() {
    31. const [project, setProject] = useState("all");
    32. const [query, setQuery] = useState("");
    33. const [selected, setSelected] = useState(frames[7]);
    35. const visibleFrames = useMemo(() => {
    36. const normalized = query.trim().toLowerCase();
    37. return frames.filter((frame) => {
    38. const projectMatch = project === "all" || frame.project === project;
    39. const text = `${frame.project} ${frame.status} ${frame.summary}`.toLowerCase();
    40. return projectMatch && (!normalized || text.includes(normalized));
    41. });
    42. }, [project, query]);
    44. const groups = useMemo(() => {
    45. return visibleFrames.reduce((acc, frame) => {
    46. acc[frame.group] ||= [];
    47. acc[frame.group].push(frame);
    48. return acc;
    49. }, {});
    50. }, [visibleFrames]);
    52. return (
    53. <main className="viewer-shell">
    54. <aside className="side-nav" aria-label="Chronicle viewer sections">
    55. <a className="brand" href="/">
    56. <span className="brand-mark" aria-hidden="true" />
    57. Chronicle
    58. </a>
    59. <nav>
    60. <a className="active" href="/">Timeline</a>
    61. <a href="/docs">Docs</a>
    62. <a href="/projects">Projects</a>
    63. </nav>
    64. <div className="storage-note">
    65. <strong>Raw archive</strong>
    66. <span>Private object storage planned. Git is for source and reviewed public derivatives.</span>
    67. </div>
    68. </aside>
    70. <section className="timeline-app">
    71. <header className="app-toolbar">
    72. <div>
    73. <h1>Visual Timeline</h1>
    74. <p>Public app scaffold using synthetic/redacted placeholders. Raw captures are not loaded here.</p>
    75. </div>
    76. <div className="toolbar-controls">
    77. <label className="app-search">
    78. <span>Search</span>
    79. <input
    80. value={query}
    81. onChange={(event) => setQuery(event.target.value)}
    82. placeholder="project, redaction status, summary"
    83. />
    84. </label>
    85. <button type="button">Archive setup</button>
    86. <button type="button">Redaction queue</button>
    87. </div>
    88. </header>
    90. <section className="filter-row" aria-label="Project filters">
    91. {projects.map((item) => (
    92. <button
    93. className={project === item ? "selected" : ""}
    94. key={item}
    95. onClick={() => setProject(item)}
    96. type="button"
    97. >
    98. {item === "all" ? "All projects" : item}
    99. </button>
    100. ))}
    101. </section>
    103. <div className="viewer-content">
    104. <section className="timeline-canvas" aria-label="Chronicle visual timeline">
    105. {Object.entries(groups).map(([group, items]) => (
    106. <section className="frame-group" key={group}>
    107. <header>
    108. <h2>{group}</h2>
    109. <span>{items.length} frames</span>
    110. </header>
    111. <div className="frame-grid">
    112. {items.map((frame, index) => (
    113. <button
    114. className={`frame-card ${frame.status} ${selected?.id === frame.id ? "is-selected" : ""}`}
    115. key={frame.id}
    116. onClick={() => setSelected(frame)}
    117. type="button"
    118. >
    119. <span className="synthetic-screen">
    120. <span className="screen-bar" />
    121. <span className="screen-line short" />
    122. <span className="screen-line" />
    123. <span className={index % 5 === 0 ? "redaction-block wide" : "redaction-block"} />
    124. </span>
    125. <span className="frame-time">{frame.time}</span>
    126. <span className="frame-project">{frame.project}</span>
    127. </button>
    128. ))}
    129. </div>
    130. </section>
    131. ))}
    132. </section>
    134. <aside className="detail-panel" aria-label="Selected frame details">
    135. <div className="date-rail" aria-label="Date scrubber">
    136. <a href="#june-4" className="active">Jun 4</a>
    137. <a href="#summaries">Summaries</a>
    138. <a href="#archive">Archive</a>
    139. </div>
    141. {selected ? (
    142. <article className="inspector">
    143. <div className={`status-pill ${selected.status}`}>{statusLabels[selected.status]}</div>
    144. <h2>{selected.time}</h2>
    145. <p>{selected.summary}</p>
    147. <dl>
    148. <div>
    149. <dt>Project label</dt>
    150. <dd>{selected.project} <span>inferred</span></dd>
    151. </div>
    152. <div>
    153. <dt>Source visibility</dt>
    154. <dd>private raw frame</dd>
    155. </div>
    156. <div>
    157. <dt>Publication state</dt>
    158. <dd>{selected.status === "candidate" ? "needs review" : "not public"}</dd>
    159. </div>
    160. </dl>
    162. <section className="policy-box">
    163. <h3>Publication boundary</h3>
    164. <p>
    165. This app must publish only reviewed redacted derivatives. Raw screenshots, OCR,
    166. local paths, and private summaries stay outside git and public deploys.
    167. </p>
    168. </section>
    169. </article>
    170. ) : null}
    171. </aside>
    172. </div>
    173. </section>
    174. </main>
    175. );
    176. }