Two frames showing the visual distinction between editable properties
and read-only Info section:
- Frame 1: Full inspector with editable properties (hover states,
cursor pointer) and Info section (muted, non-interactive)
- Frame 2: Side-by-side comparison of editable vs read-only styling
Product decisions:
- Separate "Info" section for derived metadata (Modified, Created,
Words, Size)
- Info uses --text-muted color, no hover/click states
- Editable properties keep interactive styling (hover bg, pointer)
- Type row stays at top of Properties section as identity element
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* ci: auto-release workflow on merge to main
Rewrite .github/workflows/release.yml to trigger on every push to main
instead of manual tag pushes. The workflow now:
- Computes version as 0.YYYYMMDD.GITHUB_RUN_NUMBER
- Builds aarch64-apple-darwin and x86_64-apple-darwin in parallel
- Merges them into a universal binary using lipo
- Creates a universal .dmg and signed updater tarball
- Generates latest.json with per-arch and universal platform entries
- Publishes a GitHub Release with auto-generated release notes
- Updates a GitHub Pages release history site (gh-pages branch)
Product decisions:
- Universal binary approach: copy arm64 .app as base, lipo the main
executable, keep everything else from arm64 (shared frameworks are
architecture-independent). This is the standard Tauri pattern.
- Per-arch updater tarballs are also uploaded so the Tauri updater can
download the correct arch-specific build (smaller download).
- Release notes are auto-generated from git log since last tag.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* ci: github pages with release history
Use peaceiris/actions-gh-pages@v4 to deploy a release history site.
The page fetches releases.json (also deployed) and renders each release
with date, notes, and download links for .dmg files.
This handles the gh-pages branch creation automatically on first run.
The page is available at https://refactoringhq.github.io/laputa-app/
Product decision: used fetch() to load releases.json at runtime instead
of inlining it, which is cleaner and avoids shell escaping issues with
release note content. The releases.json is deployed alongside index.html.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* feat: in-app update notification UI
Replace the old window.confirm updater with a proper React-based
update notification system:
- useUpdater hook now exposes state machine (idle → available →
downloading → ready) and actions (startDownload, openReleaseNotes,
dismiss)
- UpdateBanner component renders at the top of the app shell:
- "Available" state: shows version, Release Notes link, Update Now
button, dismiss X
- "Downloading" state: animated spinner, progress bar with percentage
- "Ready" state: Restart Now button to apply the update
- Silently checks on startup after 3s delay; fails silently on
network errors or 404
- Release Notes link opens the GitHub Pages release history site
Product decisions:
- Banner at top of app (not a modal) — non-intrusive, visible but
not blocking. User can dismiss and continue working.
- Progress bar shows during download so user knows it's working.
- Separate "Restart Now" state after download so user controls when
the app restarts (they may have unsaved work).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* test: updater component tests
Rewrite useUpdater hook tests and add UpdateBanner component tests:
Hook tests (10 cases):
- Starts in idle state
- Does nothing when not in Tauri
- Checks for updates after 3s delay
- Stays idle when no update available
- Transitions to available when update found
- Handles missing release body gracefully
- Stays idle on network error (fails silently)
- Dismiss returns to idle
- openReleaseNotes opens correct URL
- startDownload transitions through downloading to ready
Component tests (10 cases):
- Renders nothing when idle
- Renders nothing on error
- Shows version and buttons when available
- Update Now calls startDownload
- Release Notes calls openReleaseNotes
- Dismiss button works
- Shows progress bar during download
- Shows 0% at start of download
- Shows restart button when ready
- Restart button calls restartApp
All 457 tests pass.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* design: auto-build-release wireframes
Copy ui-design.pen as base. Frames to be added for:
1. Update notification banner (visible state) — horizontal bar at
top of app shell with version text, Release Notes link, Update
Now button, and dismiss X
2. Update download progress state — spinner icon, progress bar with
percentage, downloading text
3. "Restart to apply" state — green accent, version text, Restart
Now button
Note: Pencil editor was not available during this session. The base
design file is committed; frames will be added when the editor is
accessible. The implemented component (UpdateBanner.tsx) serves as
the source of truth for the design.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: update ARCHITECTURE.md with release/update system
Add comprehensive documentation for:
- Release pipeline (4-phase workflow: version → build → release → pages)
- Versioning scheme (0.YYYYMMDD.RUN_NUMBER)
- Universal binary strategy (lipo merge)
- Updater endpoint and latest.json manifest
- In-app update UI state machine
- GitHub Pages release history site
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix: rustfmt formatting
* fix: rustfmt build.rs
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Four frames showing collapse states:
1. All panels visible (default with collapse button)
2. Sidebar collapsed (note list + editor)
3. Editor only (⌥1)
4. Editor + notes (⌥2)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows sort dropdown with direction arrows (↑/↓) per option,
active state highlighting, and header button reflecting current direction.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copied from ui-design.pen as template. Contains existing 4-panel layout
frames showing sidebar, note list, editor, and inspector — the areas
where property sync and wikilink updates are now reflected immediately.
Note: Pencil app not available for interactive editing. Two logical
frames to call out:
1. Property sync: Inspector change → immediate sidebar/notelist update
2. Wikilink sync: rename → open tabs show updated wikilinks
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Four frames covering the GitHub vault modal flow:
1. Modal empty state — initial view with Clone/Create tabs
2. Clone repo list — browsing user repos with search
3. Create new repo — name input, visibility toggle, local path
4. Clone in progress — spinner, progress bar, status text
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Settings modal with header, 3 API key input fields (Anthropic, OpenAI,
Google AI), masked key display with clear button, and footer with
Cmd+, hint and Save button.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The macOS window frame (transparent title bar, 38px) and the sidebar
share the same background color (#F7F6F3), making them visually
indistinguishable. Replace the sidebar's paddingTop: 38 with a
dedicated spacer div that has a bottom border (1px solid var(--border)),
matching the border style used between all other panels. The spacer
also serves as a drag region for window movement.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two frames added to design/git-history.pen:
- "Git History — Commit List": shows inspector panel with clickable
hashes (primary color, underlined), relative dates, commit messages,
and author name (muted, small) on each commit row
- "Git History — Diff Open": shows diff view with breadcrumb bar
displaying file path and commit badge, plus colored diff lines
(red for removed, green for added)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two frames added:
- "Note Creation — Before (dialog)" — old flow with CreateNoteDialog
- "Note Creation — After (immediate)" — new flow with instant Untitled note
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing the tab rename interaction:
1. Normal tab state (double-click hint)
2. Editing mode (inline input with ring border, text selected)
3. Saved state (new title, file renamed, wiki links updated)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing drag interaction flow:
1. Default sidebar with grip-vertical drag handles on section headers
2. Mid-drag state with blue drop indicator line and floating section overlay
3. After-drop state showing reordered sections
Order persisted as "order" property in Type document frontmatter.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames added to design/draggable-tabs.pen:
1. Default state — tabs with grab cursor hint
2. Dragging state — tab at 0.5 opacity, 2px primary-color drop indicator
3. After drop — reordered tabs, localStorage persistence note
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows sort control UI for relationship subsection headers:
- Default state: sort icon + current sort label in header bar
- Open state: dropdown popover with options (Modified, Created, Title, Status)
- Selected option highlighted with check icon
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Added 4 frames to design/trash-notes.pen:
- Sidebar filter showing Trash with count badge and destructive color
- Note list view with TRASHED badge and 30-day warning state
- Relationship indicator with trash icon prefix for trashed refs
- 30-day auto-delete warning banner
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing the feature flow:
1. Button placement — "Customize sections" link above section groups
2. Popover open — toggles for each type section (People & Events OFF)
3. Result — sidebar with hidden sections removed entirely
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Four frames added to design/color-icon-for-types.pen:
1. Right-click context menu on sidebar section group headers
2. Icon & color picker popover (color swatches + icon grid)
3. Sidebar with custom icons & colors applied
4. Frontmatter persistence model (icon/color in type YAML)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three frames showing:
- Before: vertical list of plain text items
- After: horizontal wrapped pills with × remove and + add button
- Pill states: normal, hover (darker bg, red ×), + button, add input active
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Shows before/after states:
- Before: Properties icon in separate 40px collapsed panel sliver
- After: Properties icon moved into BreadcrumbBar toolbar icons
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Two frames showing tab switching shortcuts (Cmd+Opt+Left/Right in Tauri,
Cmd+Shift+Left/Right in browser) and note list navigation (Cmd+Opt+Up/Down
replaces current tab).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Three wireframe sections:
1. Create Type Dialog — simple modal with name field, triggered by + on Types section
2. Dynamic Sidebar Sections — custom types auto-appear as new sidebar sections
3. Updated Create Note Dialog — type selector includes custom types with blue accent
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
