diff --git a/.gitignore b/.gitignore index 83631c4..de9bd60 100644 --- a/.gitignore +++ b/.gitignore @@ -40,3 +40,9 @@ next-env.d.ts /.wrangler/ /outputs/ /work/ + +# Thinkloom generated artifacts +/desktop-dist/ +/src-tauri/target/ +*.tsbuildinfo + diff --git a/IMPLEMENTATION_STATUS.md b/IMPLEMENTATION_STATUS.md new file mode 100644 index 0000000..9ca7e5a --- /dev/null +++ b/IMPLEMENTATION_STATUS.md @@ -0,0 +1,32 @@ +# Thinkloom implementation status + +Status date: 2026-07-16 + +## Completed locally + +- M0 engineering baseline: shared React/TypeScript interface, Tauri 2 shell, typed command errors, Windows packaging configuration, browser/Sites companion, build/type/lint/unit checks. +- M1 project and provenance foundation: project layout, SQLite schema, atomic canonical writes, rotating snapshots, SHA-256 event chain, chain verification, hidden Git checkpoints, canonical rebuild inputs. +- M2 provider/privacy boundary: Ollama, OpenAI and compatible request paths; OS vault secrets; provider test; local/cloud status; first-cloud-use approval; retry-preserving failure state. +- M3 ideation and idea curation: typed turns, one focused question, challenge modes, suggestion review, direct save, edits, variants, merge, tags, archive/rejected history, drafting sets. +- M4 drafting workspace: TipTap structured editor, dominant three-panel layout, selective context, staged generation, all acceptance destinations, partial acceptance, manual editing, undo/redo, autosave. +- M5 finalization/style/history: editorial action previews, editable style traits and disallowed habits, saved versions, comparison summary, restore, release checkpoints, provenance timeline and contribution relationships. +- M7 export/backup/evidence: Markdown, HTML, PDF, text, backup ZIP, evidence ZIP, sanitization disclosure, hashes, manifest, atomic finalization, strict ZIP import validation. + +## External release gates + +These items cannot be honestly certified from this workspace alone and need project-owner decisions or assets: + +1. Voice runtime: provide/approve the faster-whisper model size and Silero VAD ONNX model distribution. The interface currently uses ephemeral browser speech recognition as a functional fallback and retains no audio, but the required bundled local voice pipeline is not yet present. +2. Local-model acceptance baseline: confirm the Ollama model used for release testing. The implementation default is `llama3.2`. +3. Signing and distribution: provide the Windows code-signing certificate and choose the installer distribution channel. MSI/NSIS configuration is present, but signed release artifacts cannot be produced without credentials. +4. Secondary platforms: decide whether macOS and Linux are part of the first signed release. Their keychain, microphone, installer, and packaging gates require platform runners. +5. PDF typography: the native exporter creates a valid dependency-free PDF. Approve whether the release should instead bundle a browser-print engine for richer typography. +6. Diagnostics policy: confirm whether opt-in diagnostic reports are allowed. Current diagnostics are local, redacted, and exclude prompts, responses, credentials, and audio. + +## Remaining hardening + +- Run microphone/VAD/transcription integration tests once the approved model assets are supplied. +- Run signed clean-install, upgrade, downgrade-warning, and uninstall tests on each release platform. +- Run full 20,000-word interaction and fault-injection profiling on packaged release hardware. +- Resolve the upstream moderate PostCSS advisory inherited by the pinned Next/Vinext preview toolchain when a compatible patch is available. Native packaged assets do not execute the Sites server dependency. +- Deploy the Sites companion after a deployment credential is issued by the connected Sites service. diff --git a/README.md b/README.md index 9781e0a..815825a 100644 --- a/README.md +++ b/README.md @@ -1,98 +1,58 @@ -# vinext-starter - -A clean full-stack starter running on -[vinext](https://github.com/cloudflare/vinext), with optional Cloudflare D1 and -Drizzle support. - -## Prerequisites - -- Node.js `>=22.13.0` - -## Quick Start - -```bash -npm install -npm run dev -npm run build -``` - -This starter does not use `wrangler.jsonc`. - -## Included Shape - -- edit site code under `app/` -- `.openai/hosting.json` declares optional Sites D1 and R2 bindings -- `vite.config.ts` simulates declared bindings for local development -- `db/schema.ts` starts intentionally empty -- `examples/d1/` contains an optional D1 example surface -- `drizzle.config.ts` supports local migration generation when needed - -## Workspace Auth Headers - -OpenAI workspace sites can read the current user's email from -`oai-authenticated-user-email`. - -SIWC-authenticated workspace sites may also receive -`oai-authenticated-user-full-name` when the user's SIWC profile has a non-empty -`name` claim. The full-name value is percent-encoded UTF-8 and is accompanied by -`oai-authenticated-user-full-name-encoding: percent-encoded-utf-8`. - -Treat the full name as optional and fall back to email when it is absent: - -```tsx -import { headers } from "next/headers"; - -export default async function Home() { - const requestHeaders = await headers(); - const email = requestHeaders.get("oai-authenticated-user-email"); - const encodedFullName = requestHeaders.get("oai-authenticated-user-full-name"); - const fullName = - encodedFullName && - requestHeaders.get("oai-authenticated-user-full-name-encoding") === - "percent-encoded-utf-8" - ? decodeURIComponent(encodedFullName) - : null; - - const displayName = fullName ?? email; - // ... -} -``` - -## Optional Dispatch-Owned ChatGPT Sign-In - -Import the ready-to-use helpers from `app/chatgpt-auth.ts` when the site needs -optional or required ChatGPT sign-in: - -- Use `getChatGPTUser()` for optional signed-in UI. -- Use `requireChatGPTUser(returnTo)` for server-rendered pages that should send - anonymous visitors through Sign in with ChatGPT. -- Use `chatGPTSignInPath(returnTo)` and `chatGPTSignOutPath(returnTo)` for - browser links or actions. -- Pass a same-origin relative `returnTo` path for the destination after sign-in - or sign-out. The helper validates and safely encodes it. -- Mark protected pages with `export const dynamic = "force-dynamic"` because - they depend on per-request identity headers. - -Dispatch owns `/signin-with-chatgpt`, `/signout-with-chatgpt`, `/callback`, the -OAuth cookies, and identity header injection. Do not implement app routes for -those reserved paths. Routes that do not import and call the helper remain -anonymous-compatible. - -SIWC establishes identity only; it does not prove workspace membership. Use the -Sites hosting platform's access policy controls for workspace-wide restrictions, -or enforce explicit server-side membership or allowlist checks. - -Use SIWC for account pages, user-specific dashboards, saved records, and write -actions tied to the current ChatGPT user. Leave public content anonymous. - -## Useful Commands - -- `npm run dev`: start local development -- `npm run build`: verify the vinext build output -- `npm test`: build the starter and verify its rendered loading skeleton -- `npm run db:generate`: generate Drizzle migrations after schema changes - -## Learn More - -- [vinext Documentation](https://github.com/cloudflare/vinext) -- [Drizzle D1 Guide](https://orm.drizzle.team/docs/get-started/d1-new) +# Thinkloom + +Thinkloom is a desktop-first, local-first writing studio that helps one writer move from conversation to ideas, draft, revision, and a versioned release while preserving an inspectable creative-process record. + +This repository contains two builds of the same React interface: + +- a Tauri 2 desktop application backed by Rust, SQLite, canonical Markdown/JSON/JSONL files, hidden Git checkpoints, operating-system credentials, and atomic exports; +- a Sites companion build for product preview and browser-based evaluation. + +## Implemented workflow + +- Reversible Ideation, Drafting, and Finalization phases +- Typed conversation, challenge levels, push-to-talk browser transcription, and optional visible speech output +- Suggested ideas with explicit accept/reject, editing, variants, archiving, source links, drafting sets, and merges +- TipTap/ProseMirror structured manuscript editor with canonical Markdown round-tripping, undo/redo, headings, lists, selection replacement, and cursor insertion +- Persisted preview-first generation states with retry-safe provider errors and partial acceptance +- Ollama, OpenAI, and OpenAI-compatible provider profiles; credentials use the operating-system vault +- Local/Cloud/Mixed status and project-scoped cloud approval +- SQLite live state, atomic canonical files, seven rotating recovery snapshots, and a hidden Git repository per project +- Append-only SHA-256 provenance journal with chain-head verification and a contribution relationship view +- Named versions, restore controls, release checkpoints, and tags using non-Git language in the UI +- Markdown, HTML, PDF, plain text, sanitized evidence ZIP, and complete project backup ZIP generation +- ZIP import path, symlink, file-count, and expanded-size validation +- Responsive, keyboard-navigable, screen-reader-labeled UI with reduced-motion and dark-mode support + +## Development + +Requirements: Node.js 22.13 or newer, Rust 1.77.2 or newer, Git, and the Windows WebView2 runtime for the primary desktop target. + +```powershell +npm install +npm run dev +npm run desktop:dev +npm run build +npm run desktop:build +npm run tauri -- build +``` + +Quality checks: + +```powershell +npm run typecheck +npm run lint +npm test +cd src-tauri +cargo fmt --check +cargo test +``` + +## Project storage + +A desktop project is self-contained. Canonical files live under `manuscript/`, `ideas/`, `conversations/`, `provenance/`, and `style/`. Live SQLite state and rotating snapshots are under `.thinkloom/` and are excluded from the project’s hidden Git history. Audio retention is always false; no audio file extension is created by the native service. + +## Provider setup + +Ollama defaults to `http://127.0.0.1:11434` and model `llama3.2`. OpenAI and compatible credentials are entered in Settings and saved through Windows Credential Manager, macOS Keychain, or Linux Secret Service. The first cloud operation in each project requires explicit approval. + +See [IMPLEMENTATION_STATUS.md](IMPLEMENTATION_STATUS.md) for release gates that require external models, signing credentials, or additional platform validation. diff --git a/app/globals.css b/app/globals.css index af82619..3d23d03 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,9 @@ -@import "tailwindcss"; - -:root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } -} - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} +:root{--ink:#20201d;--muted:#74736c;--paper:#f4f1e9;--panel:#fbfaf5;--line:#dcd7ca;--line-dark:#c5bfb0;--moss:#52684f;--moss-soft:#e3eadf;--clay:#a86145;--clay-soft:#f2e4da;--gold:#b38b39;--blue:#536c80;--shadow:0 18px 60px rgba(54,48,36,.08);color-scheme:light;font-synthesis:none}*{box-sizing:border-box}html{font-size:15px;background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);background:radial-gradient(circle at 20% 0,rgba(255,255,255,.85),transparent 32rem),var(--paper);font-family:"Segoe UI",system-ui,-apple-system,sans-serif}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.48}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(82,104,79,.35);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:1rem;top:-4rem;z-index:99;padding:.7rem 1rem;background:var(--ink);color:white;border-radius:0 0 6px 6px}.skip-link:focus{top:0}.loading{height:100vh;display:grid;place-content:center;text-align:center;gap:1rem}.loading .brand-mark{margin:auto}.loading p{color:var(--muted)}.app-shell{min-height:100vh;display:flex;flex-direction:column}.project-bar{height:68px;display:flex;align-items:center;gap:1.5rem;padding:0 2rem;border-bottom:1px solid var(--line);background:rgba(251,250,245,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:.7rem;border:0;background:none;font-family:Georgia,serif;font-size:1.18rem;font-weight:700;padding:0}.brand-mark{width:32px;height:32px;display:grid;place-items:center;color:#fff;background:var(--ink);border-radius:50% 50% 45% 52%;font:italic 700 1.2rem Georgia,serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}.project-identity{display:flex;flex-direction:column;min-width:0;padding-left:1.5rem;border-left:1px solid var(--line)}.project-identity strong{font-family:Georgia,serif;font-size:1rem}.project-identity span{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}.project-status{margin-left:auto;display:flex;align-items:center;gap:.85rem}.mark{display:inline-flex;align-items:center;gap:.42rem;padding:.3rem .64rem;border:1px solid var(--line);border-radius:999px;color:#625f58;background:#f0eee7;font-size:.69rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.mark-good{color:#40533d;background:var(--moss-soft);border-color:#cbd8c6}.mark-warm{color:#855039;background:var(--clay-soft);border-color:#e4ccbd}.mark-cloud{color:#3f596d;background:#e4edf2;border-color:#c9dbe4}.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(82,104,79,.12)}.history-state{border:0;background:none;color:var(--muted);font-size:.75rem}.history-state:hover{color:var(--ink)}.save-state{font-size:.7rem;color:var(--moss);padding-left:.85rem;border-left:1px solid var(--line)}.main-nav{height:53px;display:flex;align-items:stretch;padding:0 2rem;border-bottom:1px solid var(--line);background:var(--panel)}.main-nav button{border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-size:.78rem;padding:0 .95rem}.main-nav button:hover,.main-nav button.active{color:var(--ink)}.main-nav button.active{border-bottom-color:var(--clay)}.phase-nav,.utility-nav{display:flex}.phase-nav{gap:.2rem}.phase-nav button{font-family:Georgia,serif;font-size:.86rem}.phase-nav button span{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:.45rem;border:1px solid var(--line-dark);border-radius:50%;font:600 .64rem "Segoe UI",sans-serif}.phase-nav button.active span{background:var(--ink);border-color:var(--ink);color:white}.utility-nav{margin-left:auto}.notice{min-height:33px;display:flex;align-items:center;justify-content:center;gap:.45rem;border-bottom:1px solid #e5dcc5;background:#f6eed8;color:#665a3e;font-size:.7rem;letter-spacing:.02em}.notice span{color:var(--gold)}.workspace{flex:1;min-height:0;padding:18px 22px 22px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 2px 8px rgba(50,43,30,.025);min-width:0}.panel-heading{min-height:75px;padding:1.25rem 1.35rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line)}.eyebrow{display:block;margin-bottom:.32rem;color:var(--clay);font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.panel h1,.panel h2,.page-heading h1,.feature-card h2,.export-card h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:500;line-height:1.12}.panel-heading h1{font-size:1.35rem}.panel-heading h2{font-size:1.18rem}.segmented{display:flex;padding:3px;background:#eeece5;border-radius:6px}.segmented button{border:0;background:none;padding:.35rem .52rem;border-radius:4px;color:var(--muted);font-size:.65rem}.segmented button.active{background:white;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}.ideation-layout{height:calc(100vh - 194px);min-height:610px;display:grid;grid-template-columns:minmax(480px,1.55fr) minmax(320px,.8fr);gap:14px}.conversation-panel,.ideas-panel{min-height:0;display:flex;flex-direction:column}.conversation-stream{flex:1;overflow:auto;padding:1rem 9% 1.5rem}.date-divider{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 1.4rem;color:#99958b;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.date-divider::before,.date-divider::after{content:"";height:1px;background:var(--line);flex:1}.turn{max-width:78%;margin-bottom:1.4rem}.turn.user{margin-left:auto}.turn-author{display:flex;gap:.65rem;align-items:center;margin-bottom:.42rem;color:var(--muted);font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.turn.user .turn-author{justify-content:flex-end}.turn-author time{font-weight:400;text-transform:none;letter-spacing:0;color:#aaa59a}.turn p{margin:0;padding:1rem 1.1rem;border-radius:4px 13px 13px 13px;background:#eeece5;font:1rem/1.62 Georgia,serif}.turn.user p{background:#e5e9e1;border-radius:13px 4px 13px 13px}.inline-action{display:block;margin:.4rem 0 0 auto;border:0;background:none;color:var(--moss);font-size:.67rem}.thinking p span{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#8f8b82;animation:thinking 1.1s infinite}.thinking p span:nth-child(2){animation-delay:.16s}.thinking p span:nth-child(3){animation-delay:.32s}.composer{margin:0 1.1rem 1.1rem;border:1px solid var(--line-dark);border-radius:8px;background:white;box-shadow:0 8px 30px rgba(43,38,28,.06);overflow:hidden}.composer.listening{border-color:var(--clay);box-shadow:0 0 0 3px rgba(168,97,69,.1)}.composer textarea{display:block;width:100%;resize:none;border:0;outline:0;padding:1rem 1.1rem .6rem;background:transparent;font:1rem/1.45 Georgia,serif}.composer-actions{display:flex;align-items:center;justify-content:space-between;padding:.35rem .55rem .55rem}.composer-actions>div{display:flex;align-items:center;gap:.55rem}.privacy-note{color:var(--muted);font-size:.64rem}.icon-button{width:30px;height:30px;border:1px solid var(--line);background:#f5f3ed;border-radius:50%;font-size:.65rem;color:var(--clay)}.icon-button.danger{color:white;background:var(--clay)}.primary-button,.secondary-button,.release-button{border-radius:5px;padding:.62rem .9rem;font-size:.75rem;font-weight:700}.primary-button{border:1px solid var(--ink);background:var(--ink);color:white}.primary-button:hover,.release-button:hover{background:#383731}.secondary-button{border:1px solid var(--line-dark);background:white}.full{width:100%;justify-content:center}.voice-state{display:flex;gap:.55rem;align-items:center;padding:.48rem .75rem;background:var(--clay-soft);color:#814a33;font-size:.66rem}.pulse{width:7px;height:7px;border-radius:50%;background:var(--clay);animation:pulse 1.2s infinite}.idea-list{flex:1;overflow:auto;padding:1rem}.idea-card{position:relative;padding:1rem;margin-bottom:.85rem;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;background:white}.idea-card.status-accepted{border-left-color:var(--moss)}.idea-card.status-rejected,.idea-card.status-archived{opacity:.62;border-left-color:#999}.idea-meta{display:flex;justify-content:space-between;margin-bottom:.65rem;color:var(--muted);font-size:.61rem;text-transform:uppercase;letter-spacing:.08em}.idea-card h3{margin:0 0 .45rem;font:600 1rem/1.2 Georgia,serif}.idea-card p{margin:0;color:#55534d;font-size:.78rem;line-height:1.5}.tag-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem}.tag-row span{padding:.2rem .43rem;border-radius:3px;background:#f0eee7;color:#726f66;font-size:.59rem}.card-actions{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.8rem;padding-top:.7rem;border-top:1px solid #eeeae0}.card-actions button,.text-button{border:0;background:none;padding:.3rem .4rem;color:var(--muted);font-size:.66rem}.card-actions button:hover{color:var(--ink);background:#f1efe9;border-radius:3px}.card-actions .accept{color:var(--moss);font-weight:800}.edit-title,.idea-card textarea{width:100%;border:1px solid var(--line);padding:.45rem;border-radius:3px;background:#fdfcf8}.edit-title{font:600 1rem Georgia,serif;margin-bottom:.4rem}.idea-card textarea{min-height:76px;font-size:.75rem}.show-history{margin:0 1rem 1rem;padding:.6rem;border:1px dashed var(--line-dark);background:none;color:var(--muted);font-size:.67rem;border-radius:5px} +@keyframes thinking{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(168,97,69,.35)}100%{box-shadow:0 0 0 8px rgba(168,97,69,0)}} +.drafting-layout,.finalization-layout{height:calc(100vh - 194px);min-height:620px;display:grid;grid-template-columns:minmax(210px,.7fr) minmax(480px,2.15fr) minmax(280px,.95fr);gap:12px}.draft-ideas,.draft-assistant,.manuscript-panel,.editorial-rail,.release-panel{display:flex;min-height:0;flex-direction:column}.relation{padding:.9rem 1rem;border-bottom:1px solid var(--line)}.relation label,.settings-section>label{display:flex;flex-direction:column;gap:.35rem;color:var(--muted);font-size:.67rem;font-weight:700}.relation select,.settings-section select,.settings-section input,.feature-card input,.feature-card textarea{width:100%;padding:.55rem;border:1px solid var(--line-dark);border-radius:4px;background:white}.draft-idea{display:flex;gap:.65rem;margin:.75rem .8rem 0;padding:.75rem;border:1px solid var(--line);border-radius:5px;background:white;cursor:pointer}.draft-idea.selected{border-color:#abbba6;background:#edf2ea}.draft-idea input{accent-color:var(--moss)}.draft-idea span{min-width:0}.draft-idea strong,.draft-idea small{display:block}.draft-idea strong{font:600 .82rem Georgia,serif}.draft-idea small{margin-top:.35rem;color:var(--muted);font-size:.65rem;line-height:1.4}.draft-ideas>.secondary-button{margin:1rem;width:calc(100% - 2rem)}.shortcut{margin:auto 1rem 1rem;color:#a09b90;font-size:.61rem;text-align:center}.editor-toolbar{min-height:75px;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem;border-bottom:1px solid var(--line)}.editor-toolbar>div:last-child{display:flex;align-items:center;gap:.8rem}.editor-toolbar button{border:1px solid var(--line);background:white;border-radius:4px;padding:.48rem .65rem;font-size:.66rem}.editor-toolbar span{color:var(--muted);font-size:.66rem}.manuscript-editor{flex:1;min-height:0;resize:none;border:0;outline:0;padding:3.5rem clamp(2rem,7vw,7rem);background:#fffefa;color:#2d2b27;font:1.05rem/1.85 Georgia,"Times New Roman",serif;caret-color:var(--clay);tab-size:2}.editor-footer{display:flex;justify-content:space-between;padding:.55rem 1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.61rem}.assistant-context{margin:1rem;color:var(--muted);font-size:.73rem;line-height:1.5}.draft-assistant>.primary-button{margin:0 1rem;width:calc(100% - 2rem)}.generation-preview{margin:1rem;padding:1rem;border:1px solid #d8c5ac;border-radius:6px;background:#fffbf1}.generation-preview.compact{margin:1rem 0}.preview-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;font-size:.7rem;font-weight:800}.generation-preview>p{font:italic .88rem/1.65 Georgia,serif;color:#464239}.preview-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid #e8dcc8}.preview-actions button{border:1px solid var(--line);background:white;padding:.42rem .55rem;border-radius:4px;font-size:.62rem}.preview-actions .primary-button{background:var(--ink);color:white;border-color:var(--ink)}.preview-actions .danger-text{color:#9b4c3f}.empty{margin:auto;padding:2rem 1.4rem;text-align:center;color:var(--muted)}.empty h2{font-size:1.08rem;color:var(--ink);margin-bottom:.5rem}.empty p{font-size:.72rem;line-height:1.5}.finalization-layout{grid-template-columns:minmax(180px,.62fr) minmax(500px,2.15fr) minmax(250px,.9fr)}.editorial-rail,.release-panel{padding:1.25rem}.editorial-rail>p,.release-panel>p{color:var(--muted);font-size:.72rem;line-height:1.5}.action-stack{display:flex;flex-direction:column;margin-top:1.2rem}.action-stack button{display:flex;justify-content:space-between;padding:.75rem .15rem;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;font:600 .8rem Georgia,serif}.action-stack button:hover{padding-left:.4rem;color:var(--clay)}.release-panel h2,.editorial-rail h2{margin-bottom:.5rem}.release-check{display:flex;align-items:center;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--line)}.release-check>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--moss-soft);color:var(--moss);font-size:.68rem}.release-check strong,.release-check small{display:block}.release-check strong{font-size:.73rem}.release-check small{margin-top:.15rem;color:var(--muted);font-size:.61rem}.release-panel>.secondary-button{margin-top:auto}.release-button{margin-top:.6rem;border:1px solid var(--clay);background:var(--clay);color:white}.fine-print{text-align:center;font-size:.6rem!important}.page-layout{max-width:1440px;margin:0 auto;padding:2.5rem 1rem 4rem}.page-heading{margin:0 0 2rem}.page-heading h1{font-size:2.15rem;margin-bottom:.5rem}.page-heading>p,.page-heading>div>p{margin:0;color:var(--muted);font:1rem/1.5 Georgia,serif}.provenance-heading{display:flex;justify-content:space-between;align-items:end}.overview-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1rem}.feature-card,.export-card{position:relative;padding:1.7rem;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--shadow)}.feature-card.wide{grid-row:span 2}.card-index,.export-type{display:block;margin-bottom:1.2rem;color:var(--clay);font-size:.61rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.feature-card h2,.export-card h2{font-size:1.55rem;margin-bottom:.8rem}.feature-card p,.export-card p{color:var(--muted);line-height:1.55}.feature-card input{font:1.25rem Georgia,serif;margin:.8rem 0}.feature-card textarea{min-height:85px;resize:vertical}.stat-row{display:flex;gap:2.5rem;margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line)}.stat-row strong,.stat-row span{display:block}.stat-row strong{font:1.7rem Georgia,serif}.stat-row span{color:var(--muted);font-size:.65rem}.history-layout,.provenance-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.7fr);gap:1rem}.version-list,.timeline{padding:1rem}.version-row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:.8rem;padding:1rem;border-bottom:1px solid var(--line)}.version-symbol{color:var(--clay)}.version-row strong,.version-row span{display:block}.version-row strong{font:600 .9rem Georgia,serif}.version-row span{margin-top:.25rem;color:var(--muted);font-size:.65rem}.version-row button{border:1px solid var(--line);background:white;padding:.4rem .55rem;margin-left:.35rem;border-radius:4px;font-size:.63rem}.history-aside,.contribution{padding:1.4rem;height:max-content}.history-aside h2,.contribution h2{margin-bottom:.7rem}.history-aside p,.contribution>p{color:var(--muted);font-size:.75rem;line-height:1.5}.event-row{display:grid;grid-template-columns:32px 1fr;gap:.8rem;padding:1rem;border-bottom:1px solid var(--line)}.actor-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:.63rem;font-weight:800}.actor-user{background:var(--moss-soft);color:var(--moss)}.actor-assistant{background:var(--clay-soft);color:var(--clay)}.actor-system{background:#e9e8e3;color:#666}.event-top{display:flex;justify-content:space-between;gap:1rem}.event-top strong{font:600 .86rem Georgia,serif}.event-top time{color:var(--muted);font-size:.61rem}.event-row p{margin:.3rem 0;color:var(--muted);font-size:.64rem}.event-row code{color:#989287;font-size:.56rem}.contribution-chain{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:1.2rem 0}.contribution-chain span{width:100%;padding:.7rem;border:1px solid var(--line);border-radius:4px;background:white;text-align:center;font-size:.67rem}.contribution-chain i{color:var(--clay);font-style:normal}.export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.export-card{min-height:340px;display:flex;flex-direction:column}.export-card.featured{background:#26322a;color:white;border-color:#26322a}.export-card.featured p{color:#cbd3cb}.export-card.featured .export-type{color:#adc2ab}.export-card>button{margin-top:auto;width:max-content}.export-buttons{display:flex;flex-direction:column;margin-top:auto}.export-buttons button{display:flex;justify-content:space-between;padding:.72rem 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left}.export-buttons span{color:var(--muted);font-size:.65rem}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.settings-section{padding:1.5rem}.settings-section:last-child{grid-column:1/-1}.settings-heading{display:flex;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:1rem}.settings-number{color:var(--clay);font:italic 1.2rem Georgia,serif}.settings-heading h2{font-size:1.15rem}.settings-heading p{margin:.2rem 0 0;color:var(--muted);font-size:.7rem}.settings-section>label{margin-bottom:.85rem}.toggle-row{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:.7rem!important;padding:1rem;border:1px solid var(--line);border-radius:5px;background:white;cursor:pointer}.toggle-row input{width:auto!important;accent-color:var(--moss)}.toggle-row strong,.toggle-row small{display:block}.toggle-row small{margin-top:.25rem;color:var(--muted);font-weight:400;line-height:1.4}.cloud-warning{padding:.8rem;margin-bottom:.8rem;border-left:3px solid var(--gold);background:#f6eed8;font-size:.7rem}.cloud-warning p{color:#6f6348}.cloud-warning button{border:1px solid #cdbb8e;background:white;padding:.45rem;border-radius:3px}.trait-list label{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:.6rem;margin-bottom:.5rem}.confidence{color:var(--moss);font-size:.61rem;text-transform:uppercase}.inline-input{display:flex}.inline-input input{border-radius:4px 0 0 4px}.inline-input button{border:1px solid var(--line-dark);border-left:0;background:#eeece5;border-radius:0 4px 4px 0}.app-footer{height:28px;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;border-top:1px solid var(--line);background:var(--panel);color:#99958a;font-size:.57rem} +@media(max-width:1100px){.project-identity span,.save-state{display:none}.utility-nav button{padding:0 .5rem}.workspace{padding:12px}.ideation-layout{grid-template-columns:1.3fr .8fr}.drafting-layout,.finalization-layout{grid-template-columns:190px minmax(420px,1fr)}.draft-assistant,.release-panel{grid-column:1/-1;max-height:none}.drafting-layout,.finalization-layout{height:auto}.manuscript-editor{min-height:640px}.export-grid{grid-template-columns:1fr 1fr}.export-card:last-child{grid-column:1/-1}} +@media(max-width:760px){.project-bar{padding:0 1rem}.project-identity,.history-state{display:none}.main-nav{height:auto;min-height:53px;padding:0 .5rem;overflow-x:auto}.main-nav button{white-space:nowrap}.utility-nav{margin-left:1rem}.notice{padding:.4rem 1rem;text-align:center}.workspace{padding:8px}.ideation-layout,.drafting-layout,.finalization-layout{height:auto;min-height:0;display:flex;flex-direction:column}.conversation-panel{height:720px}.ideas-panel{max-height:700px}.draft-ideas,.editorial-rail{order:2}.manuscript-panel{order:1}.draft-assistant,.release-panel{order:3}.manuscript-editor{min-height:65vh;padding:2rem 1.5rem}.page-layout{padding:1.5rem .25rem}.overview-grid,.history-layout,.provenance-layout,.export-grid,.settings-grid{grid-template-columns:1fr}.feature-card.wide{grid-row:auto}.settings-section:last-child,.export-card:last-child{grid-column:auto}.provenance-heading{align-items:start;gap:1rem}.page-heading h1{font-size:1.75rem}.app-footer span:nth-child(2){display:none}} +@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} +@media(prefers-color-scheme:dark){:root{--ink:#f0ede4;--muted:#aaa69d;--paper:#1d1e1b;--panel:#252622;--line:#3c3d36;--line-dark:#55564d;--moss-soft:#344032;--clay-soft:#4a352c}body{background:var(--paper)}.project-bar{background:rgba(37,38,34,.9)}.brand-mark,.primary-button{background:#eeeae0;color:#1e1f1c}.composer,.idea-card,.manuscript-editor,.draft-idea,.editor-toolbar button,.secondary-button,.preview-actions button,.feature-card input,.feature-card textarea,.settings-section input,.settings-section select,.contribution-chain span,.toggle-row,.version-row button{background:#2c2d29;color:var(--ink)}.turn p{background:#30312c}.turn.user p{background:#354034}.generation-preview{background:#342f25}.export-card.featured{background:#324034}.mark{background:#30312d}.segmented{background:#30312d}.segmented button.active{background:#45463f}.notice{background:#3a3425}.cloud-warning{background:#3a3425}.draft-idea.selected{background:#344032}.app-footer{background:var(--panel)}} +.project-actions{display:flex;flex-wrap:wrap;gap:.45rem}.project-path{display:block;margin-top:.75rem;color:var(--muted);overflow-wrap:anywhere} +.structured-editor{padding:0;overflow:auto}.format-toolbar{position:sticky;top:0;z-index:2;display:flex;gap:.25rem;padding:.55rem 1rem;border-bottom:1px solid var(--line);background:rgba(255,254,250,.94);backdrop-filter:blur(10px)}.format-toolbar button{min-width:30px;padding:.35rem .5rem;border:1px solid var(--line);border-radius:3px;background:white;font-size:.65rem}.format-toolbar button[aria-pressed="true"]{color:white;background:var(--ink);border-color:var(--ink)}.structured-editor .tiptap{min-height:100%;padding:3rem clamp(2rem,7vw,7rem);outline:0}.structured-editor .tiptap h1,.structured-editor .tiptap h2{font-family:Georgia,serif;line-height:1.2}.structured-editor .tiptap p{margin:.8rem 0}.editor-loading{display:grid;place-items:center;color:var(--muted)} diff --git a/app/layout.tsx b/app/layout.tsx index b312bad..9a98db0 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,38 +1,20 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { headers } from "next/headers"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - -export const metadata: Metadata = { - title: "Writing Workspace Framework", - description: "A conversation-first writing workspace visualization.", - icons: { - icon: "/favicon.svg", - shortcut: "/favicon.svg", - }, -}; - -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { - return ( - - - {children} - - - ); +export async function generateMetadata(): Promise { + const requestHeaders = await headers(); + const host = requestHeaders.get("x-forwarded-host") ?? requestHeaders.get("host") ?? "localhost"; + const protocol = requestHeaders.get("x-forwarded-proto") ?? (host.startsWith("localhost") ? "http" : "https"); + const image = new URL("/og.png", `${protocol}://${host}`).toString(); + return { + title: "Thinkloom — ideas into writing", + description: "A local-first writing studio for exploring ideas, shaping drafts, and preserving your creative process.", + icons: { icon: "/icon.png", shortcut: "/icon.png", apple: "/icon.png" }, + openGraph: { title: "Thinkloom — ideas into writing", description: "Explore, shape, and publish thoughtful writing without losing the thread of how it came together.", type: "website", images: [{ url: image, width: 1732, height: 909, alt: "Thinkloom — ideas into writing, without losing the thread." }] }, + twitter: { card: "summary_large_image", images: [image] }, + }; } + +export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { return {children}; } + diff --git a/app/page.tsx b/app/page.tsx index c6ca982..0bd9b21 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,5 +1,2 @@ -import { redirect } from "next/navigation"; - -export default function Home() { - redirect("/writing-workspace-framework.html"); -} +import Thinkloom from "./thinkloom"; +export default function Home() { return ; } diff --git a/app/thinkloom.tsx b/app/thinkloom.tsx new file mode 100644 index 0000000..9736a6c --- /dev/null +++ b/app/thinkloom.tsx @@ -0,0 +1,169 @@ +"use client"; +import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"; +import { EditorContent, useEditor } from "@tiptap/react"; +import StarterKit from "@tiptap/starter-kit"; +import { Markdown } from "@tiptap/markdown"; + +type Phase = "ideation" | "drafting" | "finalization"; +type View = Phase | "project" | "history" | "provenance" | "export" | "settings"; +type IdeaStatus = "suggested" | "accepted" | "rejected" | "archived"; +type Actor = "user" | "assistant" | "system"; +interface Turn { id: string; speaker: "user" | "assistant"; text: string; createdAt: string } +interface Idea { id: string; title: string; summary: string; detail: string; status: IdeaStatus; sourceTurnIds: string[]; parentIdeaIds: string[]; tags: string[]; pinned: boolean; selected: boolean; group?: string; createdBy: "user" | "assistant" | "mixed" } +interface Event { id: string; type: string; actor: Actor; at: string; summary: string; previousHash: string | null; hash: string; provider?: string } +interface Checkpoint { id: string; name: string; at: string; manuscript: string; words: number } +interface Provider { kind: "ollama" | "openai" | "compatible"; name: string; endpoint: string; model: string; mode: "local" | "cloud"; connected: boolean } +interface State { id: string; title: string; subtitle: string; phase: Phase; privacy: "Local" | "Cloud" | "Mixed"; cloudApproved: boolean; challenge: "Gentle" | "Balanced" | "Rigorous"; spokenReplies: boolean; turns: Turn[]; ideas: Idea[]; manuscript: string; generation: { id: string; state: "idle" | "streaming" | "staged" | "accepted" | "rejected" | "failed"; text: string; prompt: string; relation: string }; events: Event[]; checkpoints: Checkpoint[]; provider: Provider; styleTraits: string[]; disallowedHabits: string[]; finalized: boolean; updatedAt: string } + +const now = () => new Date().toISOString(); +const uid = (prefix: string) => `${prefix}_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 7)}`; +const countWords = (value: string) => value.trim() ? value.trim().split(/\s+/).length : 0; +const fmt = (value: string) => new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }).format(new Date(value)); +const hash = (value: string) => { let n = 2166136261; for (let i = 0; i < value.length; i += 1) n = Math.imul(n ^ value.charCodeAt(i), 16777619); return Math.abs(n).toString(16).padStart(8, "0"); }; +const clean = (md: string) => md.replace(/^#{1,6}\s+/gm, "").replace(/[*_`>]/g, ""); +const escapeHtml = (v: string) => v.replace(/&/g, "&").replace(//g, ">"); +const toHtml = (md: string) => md.split("\n").map((line) => line.startsWith("# ") ? `

${escapeHtml(line.slice(2))}

` : line.startsWith("## ") ? `

${escapeHtml(line.slice(3))}

` : line.trim() ? `

${escapeHtml(line)}

` : "").join("\n"); + +const initial: State = { + id: "project_attention_commons", title: "The Attention Commons", subtitle: "An essay on reclaiming shared focus", phase: "ideation", privacy: "Local", cloudApproved: false, challenge: "Balanced", spokenReplies: false, + turns: [ + { id: "turn_1", speaker: "user", text: "I keep returning to the idea that attention is treated as a private resource, even though its erosion changes public life.", createdAt: "2026-07-16T17:42:00.000Z" }, + { id: "turn_2", speaker: "assistant", text: "That tension feels central: we experience distraction individually, but the consequences accumulate socially. Where do you see that shared cost most clearly?", createdAt: "2026-07-16T17:43:00.000Z" }, + { id: "turn_3", speaker: "user", text: "In classrooms, meetings, and even public debate. We have fewer places where sustained attention is expected and protected.", createdAt: "2026-07-16T17:44:00.000Z" }, + ], + ideas: [ + { id: "idea_1", title: "Attention as civic infrastructure", summary: "Treat sustained attention like a shared condition that institutions can protect or degrade.", detail: "Move beyond individual self-control and ask what healthy attention-supporting institutions look like.", status: "accepted", sourceTurnIds: ["turn_1", "turn_3"], parentIdeaIds: [], tags: ["thesis", "public life"], pinned: true, selected: true, group: "Core argument", createdBy: "mixed" }, + { id: "idea_2", title: "The vanishing expectation", summary: "Public spaces increasingly assume interruption instead of sustained presence.", detail: "Contrast spaces across expectations rather than generations.", status: "suggested", sourceTurnIds: ["turn_3"], parentIdeaIds: [], tags: ["observation"], pinned: false, selected: false, createdBy: "assistant" }, + { id: "idea_3", title: "Beyond digital minimalism", summary: "Personal habits matter, but they cannot repair systems designed around extraction.", detail: "A counterpoint to purely individual advice about focus.", status: "suggested", sourceTurnIds: ["turn_1"], parentIdeaIds: [], tags: ["counterpoint"], pinned: false, selected: false, createdBy: "assistant" }, + ], + manuscript: "# The Attention Commons\n\nWe have learned to talk about attention as if it were a private possession. We protect it with timers, muted notifications, and carefully chosen routines. Yet the places where attention matters most—classrooms, meetings, courts, and public debate—are shared. When sustained focus becomes rare, the loss does not remain private.\n\n## A public condition\n\nAttention is not simply something an individual brings into a room. It is also something the room can make possible. Norms, incentives, architecture, and technology all determine whether concentration is supported or quietly auctioned away.\n", + generation: { id: "", state: "idle", text: "", prompt: "", relation: "synthesize" }, + events: [ + { id: "event_1", type: "PROJECT_CREATED", actor: "user", at: "2026-07-16T17:42:00.000Z", summary: "Created The Attention Commons", previousHash: null, hash: "1c4b790d" }, + { id: "event_2", type: "IDEA_ACCEPTED", actor: "user", at: "2026-07-16T17:45:00.000Z", summary: "Accepted “Attention as civic infrastructure”", previousHash: "1c4b790d", hash: "783fa0b2" }, + ], + checkpoints: [{ id: "version_1", name: "Opening premise", at: "2026-07-16T17:50:00.000Z", manuscript: "# The Attention Commons\n\nWe have learned to talk about attention as if it were a private possession.", words: 14 }], + provider: { kind: "ollama", name: "Ollama", endpoint: "http://127.0.0.1:11434", model: "llama3.2", mode: "local", connected: false }, + styleTraits: ["Clear, reflective sentences", "Concrete institutional examples", "Measured, invitational argument"], disallowedHabits: ["Overstated certainty", "Generic scene-setting"], finalized: false, updatedAt: "2026-07-16T17:42:00.000Z", +}; + +async function invokeNative(command: string, args: Record = {}): Promise { const host = window as unknown as { __TAURI_INTERNALS__?: { invoke: (name: string, payload: Record) => Promise } }; return host.__TAURI_INTERNALS__ ? host.__TAURI_INTERNALS__.invoke(command, args) : null; } +function download(name: string, contents: string, type = "text/plain") { const href = URL.createObjectURL(new Blob([contents], { type })); const a = document.createElement("a"); a.href = href; a.download = name; a.click(); URL.revokeObjectURL(href); } +function Mark({ children, tone = "neutral" }: { children: React.ReactNode; tone?: string }) { return {children}; } +function Empty({ eyebrow, title, body }: { eyebrow: string; title: string; body: string }) { return
{eyebrow}

{title}

{body}

; } + +interface StructuredEditorHandle { focus: () => void; insert: (markdown: string, replace: boolean) => string; } +const StructuredEditor = forwardRef void; onCommit: () => void }>(function StructuredEditor({ value, onChange, onCommit }, ref) { + const instance = useEditor({ + extensions: [StarterKit, Markdown], + content: value, + contentType: "markdown", + immediatelyRender: false, + editorProps: { attributes: { class: "tiptap-document", "aria-label": "Structured manuscript editor" } }, + onUpdate: ({ editor }) => onChange(editor.getMarkdown()), + onBlur: onCommit, + }); + useEffect(() => { if (instance && instance.getMarkdown() !== value) instance.commands.setContent(value, { contentType: "markdown", emitUpdate: false }); }, [instance, value]); + useImperativeHandle(ref, () => ({ + focus: () => { instance?.commands.focus(); }, + insert: (markdown, replace) => { if (!instance) return value; if (replace) instance.chain().focus().deleteSelection().insertContent(markdown, { contentType: "markdown" }).run(); else instance.chain().focus().insertContent(markdown, { contentType: "markdown" }).run(); return instance.getMarkdown(); }, + }), [instance, value]); + if (!instance) return
Preparing structured editor…
; + return
; +}); +export default function Thinkloom() { + const [project, setProject] = useState(initial); const [hydrated, setHydrated] = useState(false); const [view, setView] = useState("ideation"); const [message, setMessage] = useState(""); const [notice, setNotice] = useState("Project ready. History is being recorded."); const [busy, setBusy] = useState(false); const [listening, setListening] = useState(false); const [showRejected, setShowRejected] = useState(false); const [editingIdea, setEditingIdea] = useState(null); const [newHabit, setNewHabit] = useState(""); const [sanitized, setSanitized] = useState(true); const [credential, setCredential] = useState(""); const [projectPath, setProjectPath] = useState(""); const editor = useRef(null); const finalEditor = useRef(null); const conversationEnd = useRef(null); + useEffect(() => { queueMicrotask(() => { try { const raw = localStorage.getItem("thinkloom-project-v1"); if (raw) setProject({ ...initial, ...JSON.parse(raw) as State }); } catch {} setHydrated(true); }); }, []); + useEffect(() => { if (hydrated) localStorage.setItem("thinkloom-project-v1", JSON.stringify(project)); }, [project, hydrated]); + const mutate = useCallback((type: string, summary: string, update: (current: State) => State, actor: Actor = "user") => { setProject((current) => { const previousHash = current.events.at(-1)?.hash ?? null; const event: Event = { id: uid("event"), type, actor, at: now(), summary, previousHash, hash: hash(`${previousHash}|${type}|${summary}|${Date.now()}`), provider: actor === "assistant" ? current.provider.name : undefined }; const next = { ...update(current), events: [...current.events, event], updatedAt: event.at }; void invokeNative("persist_state", { appState: next }).catch(() => undefined); return next; }); setNotice(summary); }, []); + const navigate = (next: View) => { setView(next); if (["ideation", "drafting", "finalization"].includes(next) && project.phase !== next) mutate("PHASE_CHANGED", `Moved to ${next}`, (current) => ({ ...current, phase: next as Phase })); }; + useEffect(() => { const shortcut = (e: KeyboardEvent) => { if (!e.altKey) return; if (e.key === "1") document.getElementById("ideas-panel")?.focus(); if (e.key === "2") editor.current?.focus(); if (e.key === "3") document.getElementById("assistant-panel")?.focus(); }; window.addEventListener("keydown", shortcut); return () => window.removeEventListener("keydown", shortcut); }, []); + const visibleIdeas = useMemo(() => project.ideas.filter((idea) => showRejected || !["rejected", "archived"].includes(idea.status)), [project.ideas, showRejected]); + const draftingIdeas = project.ideas.filter((idea) => idea.status === "accepted"); const selectedIdeas = draftingIdeas.filter((idea) => idea.selected); + + const sendMessage = async () => { + const text = message.trim(); if (!text || busy) return; setMessage(""); setBusy(true); + const userTurn: Turn = { id: uid("turn"), speaker: "user", text, createdAt: now() }; + mutate("USER_TEXT_TURN_CREATED", "Saved your conversation turn", (current) => ({ ...current, turns: [...current.turns, userTurn] })); + await new Promise((resolve) => setTimeout(resolve, 400)); + const focus = text.replace(/[.!?].*$/, "").slice(0, 100); + const reply = project.challenge === "Gentle" ? `There is something worth staying with in “${focus}.” What personal moment makes that feel true?` : project.challenge === "Rigorous" ? `If a skeptical reader challenged “${focus},” what evidence or distinction would make it hold?` : `“${focus}” suggests a useful tension. What changes when you see it as a shared condition?`; + const assistantTurn: Turn = { id: uid("turn"), speaker: "assistant", text: reply, createdAt: now() }; + const suggestion: Idea = { id: uid("idea"), title: focus.length > 46 ? `${focus.slice(0, 43)}…` : focus, summary: text, detail: "Explore how this supports or complicates the central argument.", status: "suggested", sourceTurnIds: [userTurn.id], parentIdeaIds: [], tags: ["from conversation"], pinned: false, selected: false, createdBy: "mixed" }; + mutate("ASSISTANT_RESPONSE_GENERATED", "A response and suggested idea are ready", (current) => ({ ...current, turns: [...current.turns, assistantTurn], ideas: [...current.ideas, suggestion] }), "assistant"); + if (project.spokenReplies && "speechSynthesis" in window) speechSynthesis.speak(new SpeechSynthesisUtterance(reply)); setBusy(false); requestAnimationFrame(() => conversationEnd.current?.scrollIntoView({ behavior: "smooth" })); + }; + const saveLastTurn = () => { const turn = [...project.turns].reverse().find((item) => item.speaker === "user"); if (!turn) return; const idea: Idea = { id: uid("idea"), title: turn.text.slice(0, 58), summary: turn.text, detail: "Saved directly from conversation.", status: "accepted", sourceTurnIds: [turn.id], parentIdeaIds: [], tags: ["saved directly"], pinned: false, selected: true, createdBy: "user" }; mutate("IDEA_ACCEPTED", `Saved “${idea.title}” as an idea`, (current) => ({ ...current, ideas: [...current.ideas, idea] })); }; + const setIdeaStatus = (id: string, status: IdeaStatus) => { const idea = project.ideas.find((item) => item.id === id); if (!idea) return; mutate(`IDEA_${status.toUpperCase()}`, `${status === "accepted" ? "Accepted" : status === "rejected" ? "Rejected" : "Archived"} “${idea.title}”`, (current) => ({ ...current, ideas: current.ideas.map((item) => item.id === id ? { ...item, status, selected: status === "accepted" } : item) })); }; + const updateIdea = (id: string, patch: Partial, summary = "Updated idea") => mutate("IDEA_EDITED", summary, (current) => ({ ...current, ideas: current.ideas.map((idea) => idea.id === id ? { ...idea, ...patch } : idea) })); + const createVariant = (source: Idea) => { const variant: Idea = { ...source, id: uid("idea"), title: `${source.title} — another angle`, detail: `A deliberate counter-reading of: ${source.detail}`, parentIdeaIds: [source.id], status: "suggested", selected: false, pinned: false, createdBy: "mixed" }; mutate("IDEA_VARIANT_CREATED", `Created a variant of “${source.title}”`, (current) => ({ ...current, ideas: [...current.ideas, variant] })); }; + const mergeSelected = () => { if (selectedIdeas.length < 2) { setNotice("Select at least two ideas to merge."); return; } const merged: Idea = { id: uid("idea"), title: selectedIdeas.map((idea) => idea.title).join(" + ").slice(0, 70), summary: selectedIdeas.map((idea) => idea.summary).join(" "), detail: "A synthesis retaining both parent ideas.", status: "accepted", sourceTurnIds: [...new Set(selectedIdeas.flatMap((idea) => idea.sourceTurnIds))], parentIdeaIds: selectedIdeas.map((idea) => idea.id), tags: [...new Set(selectedIdeas.flatMap((idea) => idea.tags))], pinned: true, selected: true, createdBy: "mixed" }; mutate("IDEAS_MERGED", `Merged ${selectedIdeas.length} ideas`, (current) => ({ ...current, ideas: [...current.ideas.map((idea) => selectedIdeas.some((selected) => selected.id === idea.id) ? { ...idea, selected: false } : idea), merged] })); }; + + const startGeneration = async (action = "draft") => { + if (busy) return; if (action === "draft" && !selectedIdeas.length) { setNotice("Select at least one accepted idea first."); return; } setBusy(true); const id = uid("generation"); const source = selectedIdeas.map((idea) => idea.summary).join(" ") || "the current passage"; const prompt = action === "draft" ? `Draft a passage that ${project.generation.relation}s the selected ideas.` : `${action} the selected passage.`; + mutate("GENERATION_REQUESTED", `Started ${action.toLowerCase()} preview`, (current) => ({ ...current, generation: { ...current.generation, id, state: "streaming", text: "", prompt } })); await new Promise((resolve) => setTimeout(resolve, 500)); + let nativeText: string | null = null; + try { nativeText = await invokeNative("generate_text", { profile: project.provider, prompt, context: source, cloudApproved: project.cloudApproved }); } + catch (error) { mutate("GENERATION_FAILED", "Provider request failed; your request is preserved for retry", (current) => ({ ...current, generation: { ...current.generation, id, state: "failed", text: "", prompt } }), "system"); setNotice(`Provider request failed: ${String(error)}`); setBusy(false); return; } + const variants: Record = { draft: `The language of personal discipline obscures a public design problem. ${source} A community’s capacity for sustained thought depends on the expectations it builds into ordinary places: whether a classroom protects silence long enough for uncertainty, whether a meeting rewards listening before reaction, and whether public argument leaves room for ideas that cannot arrive as slogans.`, Clarity: "Attention is personal in experience but public in consequence. Institutions shape whether people can sustain it together.", Rewrite: "We guard attention as private property, yet its most important work happens between us—in classrooms, meetings, and the slow exchange of public argument.", Shorten: "Attention feels private, but its loss reshapes public life.", Expand: "Attention feels private, but its loss reshapes public life. The change appears first as friction: a classroom that cannot settle, a meeting that repeats itself, a debate that rewards instant response. Over time, those moments become an institutional condition.", Transition: "That is why the question must move beyond individual habit and toward the environments we share.", Repetition: "Consider trimming repeated uses of “private,” “shared,” and “attention” in the opening two paragraphs.", Consistency: "The draft consistently frames attention as infrastructure; keep the institutional examples parallel to maintain that logic.", Tone: "A measured version can make the claim firmly without blaming readers for systems they did not design.", "User voice": "In your reflective voice: the room matters because attention is never brought into it alone; it is invited, protected, or spent there.", Proofread: "The selected passage is mechanically clean. Consider an em dash instead of the current parenthetical pause." }; + mutate("GENERATION_COMPLETED", "Preview ready — your manuscript is unchanged", (current) => ({ ...current, generation: { ...current.generation, id, state: "staged", text: nativeText ?? variants[action] ?? variants.draft, prompt } }), "assistant"); setBusy(false); + }; + const acceptGeneration = (mode: "cursor" | "replace" | "append" | "section", partial = false) => { const full = project.generation.text; if (!full) return; const accepted = partial ? full.split(/(?<=[.!?])\s+/).slice(0, 2).join(" ") : full; let manuscript = project.manuscript; if ((mode === "replace" || mode === "cursor") && view === "drafting") { manuscript = editor.current?.insert(accepted, mode === "replace") ?? manuscript; } else if (mode === "replace") { const start = finalEditor.current?.selectionStart ?? manuscript.length; const end = finalEditor.current?.selectionEnd ?? start; manuscript = `${manuscript.slice(0, start)}${accepted}${manuscript.slice(end)}`; } else if (mode === "section") manuscript = `${manuscript.trimEnd()}\n\n## New section\n\n${accepted}\n`; else manuscript = `${manuscript.trimEnd()}\n\n${accepted}\n`; mutate(partial ? "GENERATION_PARTIALLY_ACCEPTED" : "GENERATION_ACCEPTED", `${partial ? "Partially accepted" : "Accepted"} generated text`, (current) => ({ ...current, manuscript, generation: { ...current.generation, state: "accepted" } })); }; + const discardGeneration = () => mutate("GENERATION_REJECTED", "Discarded generated preview", (current) => ({ ...current, generation: { ...current.generation, state: "rejected", text: "" } })); + const saveCheckpoint = (name = `Version ${project.checkpoints.length + 1}`) => { const point: Checkpoint = { id: uid("version"), name, at: now(), manuscript: project.manuscript, words: countWords(project.manuscript) }; mutate("CHECKPOINT_CREATED", `Saved version “${name}”`, (current) => ({ ...current, checkpoints: [...current.checkpoints, point] })); void invokeNative("create_checkpoint", { name }); }; + const restoreCheckpoint = (point: Checkpoint) => mutate("VERSION_RESTORED", `Restored “${point.name}”`, (current) => ({ ...current, manuscript: point.manuscript })); + const finalize = () => { const point: Checkpoint = { id: uid("release"), name: `Release ${project.checkpoints.filter((item) => item.name.startsWith("Release")).length + 1}`, at: now(), manuscript: project.manuscript, words: countWords(project.manuscript) }; mutate("RELEASE_FINALIZED", `Finalized ${point.name}`, (current) => ({ ...current, finalized: true, checkpoints: [...current.checkpoints, point] })); void invokeNative("finalize_release"); }; + const exportFile = async (format: "markdown" | "html" | "text" | "evidence") => { const native = await invokeNative("export_project", { format, sanitized }); if (native) { setNotice(`Exported to ${native}`); return; } if (format === "markdown") download(`${project.title}.md`, project.manuscript, "text/markdown"); if (format === "text") download(`${project.title}.txt`, clean(project.manuscript)); if (format === "html") download(`${project.title}.html`, `${escapeHtml(project.title)}${toHtml(project.manuscript)}`, "text/html"); if (format === "evidence") download(`${project.title}-creative-process.json`, JSON.stringify({ schemaVersion: "1.0", projectId: project.id, createdAt: now(), sanitized, provenanceChainHead: project.events.at(-1)?.hash, manuscriptHash: hash(project.manuscript), events: sanitized ? project.events.filter((event) => !event.provider) : project.events }, null, 2), "application/json"); mutate("EXPORT_CREATED", `Created ${format} export`, (current) => current); }; + const startVoice = () => { if (listening) { setListening(false); setNotice("Voice input stopped; no audio was retained."); return; } speechSynthesis?.cancel(); const host = window as unknown as { webkitSpeechRecognition?: new () => { lang: string; interimResults: boolean; start: () => void; onresult: (e: { results: ArrayLike<{ 0: { transcript: string } }> }) => void; onend: () => void; onerror: () => void } }; if (!host.webkitSpeechRecognition) { setNotice("Voice transcription is unavailable here. Typed input is ready."); return; } const recognition = new host.webkitSpeechRecognition(); recognition.lang = "en-US"; recognition.interimResults = true; recognition.onresult = (e) => setMessage(Array.from(e.results).map((result) => result[0].transcript).join("")); recognition.onend = () => { setListening(false); setNotice("Transcript ready to review. Audio was discarded."); }; recognition.onerror = () => { setListening(false); setNotice("Transcription failed. Audio was discarded; retry or type instead."); }; recognition.start(); setListening(true); setNotice("Listening… provisional transcript will appear below."); }; + const verifyChain = () => { const valid = project.events.every((event, index) => event.previousHash === (index ? project.events[index - 1].hash : null)); setNotice(valid ? `History verified: ${project.events.length} linked events.` : "History needs repair. Your writing remains safely autosaved."); }; + const createNativeProject = async () => { try { const folder = await invokeNative("choose_project_folder"); if (!folder) { setNotice("Choose a folder when you are ready to create the desktop project."); return; } const result = await invokeNative<{ path: string }>("create_project", { path: folder, title: project.title }); if (!result) { setNotice("Project folders are available in the installed desktop app."); return; } setProjectPath(result.path); await invokeNative("persist_state", { appState: project }); setNotice("Self-contained project created and ready."); } catch (error) { setNotice(`Project could not be created: ${String(error)}`); } }; + const openNativeProject = async () => { try { const folder = await invokeNative("choose_project_folder"); if (!folder) return; const result = await invokeNative<{ path: string }>("open_project", { path: folder }); if (!result) { setNotice("Opening project folders is available in the installed desktop app."); return; } setProjectPath(result.path); const restored = await invokeNative("load_project_state"); if (restored) setProject(restored); setNotice("Project reopened and its history verified."); } catch (error) { setNotice(`Project could not be opened: ${String(error)}`); } }; + + if (!hydrated) return
T

Gathering your threads…

; + return
+ Skip to workspace +
{project.title}{project.subtitle}
{project.privacy}Saved
+ +
✦{notice}
+
+ + {view === "ideation" &&
+
Open thread

Explore the thought

{(["Gentle", "Balanced", "Rigorous"] as const).map((level) => )}
+
Today · Session 1
{project.turns.map((turn) =>
{turn.speaker === "user" ? "You" : "Thinkloom"}

{turn.text}

{turn.speaker === "user" && }
)}{busy &&
Thinkloom

}
+
{listening &&
Listening — audio stays in memory and will be discarded
}