Compare commits

...

20 Commits

Author SHA1 Message Date
Test
8df4730db6 fix: narrow deleted preview active tab path 2026-04-07 20:10:13 +02:00
Test
e5f3bae8f3 feat: show deleted notes as restorable changes 2026-04-07 20:09:04 +02:00
Test
1f39501ce5 fix: keep view filter values as plain text 2026-04-07 19:40:54 +02:00
Test
10024dbf53 test: slim the pre-push smoke lane 2026-04-07 19:22:11 +02:00
Test
e52d07affc chore: enforce main-only workflow and adopt AGENTS.md 2026-04-07 18:42:41 +02:00
Test
0d9af0fb0f chore: ratchet CodeScene thresholds to 9.45/9.29 2026-04-07 18:14:55 +02:00
Test
1ca2662a4b style: satisfy rustfmt pre-push check 2026-04-07 17:52:13 +02:00
Test
eb2758c154 fix: correct editor breadcrumb props typing 2026-04-07 17:49:15 +02:00
Test
7d308a65e0 fix: hide title section for untitled drafts 2026-04-07 17:47:15 +02:00
Test
74850b5b69 docs: rewrite vault AGENTS.md template — vault-agnostic, H1-as-title convention 2026-04-07 16:09:18 +02:00
Test
e486e863ce fix: open editor immediately when clicking suggested property slots
Previously, clicking a suggested property slot (Status, Date, URL) would add
an empty property to frontmatter but fail to open the editor. This was due
to a race condition where:

1. handleSuggestedAdd() called onAddProperty() which is async
2. The useEffect tried to detect when the property appeared in frontmatter
3. But frontmatter updates asynchronously after onAddProperty resolves
4. By the time frontmatter is updated, the useEffect had already run

The fix is to directly set the editing key immediately when clicking a
suggested slot, rather than relying on the useEffect to detect the property
being added. This is more reliable because we know we're adding the property
- we don't need to wait for it to appear in frontmatter.
2026-04-07 11:03:50 +02:00
Test
132618ebd3 docs: add/update ADRs for H1-as-title and Trash removal (guard — from commits 377a3f8d, 7daf6898, e581ad36) 2026-04-07 08:02:31 +02:00
Test
d29d5a03ae chore: restore ui-design.pen (Pencil design file — not stale) 2026-04-06 19:27:40 +02:00
Test
084c58fed8 docs: restore VISION.md — product vision, strategy and design principles 2026-04-06 19:26:48 +02:00
Test
63d85bf67f chore: remove remaining stale screenshots 2026-04-06 19:25:03 +02:00
Test
17d67013dc chore: remove stale docs and assets (PROJECT-SPEC, ROADMAP, VISION, Design System Proposal, iPad Prototype, screenshots, untitled notes, prompt.txt, ui-design.pen) 2026-04-06 19:18:15 +02:00
Test
458898f632 fix: suggested property slots now reliably open editor after click
Replace setTimeout-based editingKey activation with a useEffect that
watches propertyEntries. When the newly added property appears in
propertyEntries (after the async backend write completes), the effect
sets editingKey, ensuring the editor/picker opens regardless of timing.

The old setTimeout(fn, 0) approach raced with the async frontmatter
write — editingKey was set before the property existed in the DOM,
so the editing state had no matching PropertyRow to activate.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 16:31:51 +02:00
Test
89a605262c docs: require completion comment on Todoist task before /laputa-done (QA, refactoring, ADRs, code health) 2026-04-06 16:17:19 +02:00
Test
e097c5b717 docs: require pre-task code health check — refactor before feature work if below gate 2026-04-06 16:12:58 +02:00
Test
c0df2124ff fix: sync custom properties to VaultEntry on frontmatter changes
View filters that reference custom properties (e.g. "Trashed", "Priority")
were not reactively updating because contentToEntryPatch and
frontmatterToEntryPatch only synced known fields (type, status, etc.)
to the VaultEntry. Custom frontmatter keys were silently dropped.

Now frontmatterToEntryPatch produces a propertiesPatch for unknown keys,
and contentToEntryPatch includes them in the properties field. This
ensures evaluateView sees up-to-date custom property values when
re-filtering the note list.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-06 16:10:02 +02:00
114 changed files with 1496 additions and 2583 deletions

View File

@@ -1,2 +1,2 @@
HOTSPOT_THRESHOLD=9.33
AVERAGE_THRESHOLD=9.27
HOTSPOT_THRESHOLD=9.45
AVERAGE_THRESHOLD=9.29

275
.github/HOOKS.md vendored
View File

@@ -1,257 +1,64 @@
# Git Hooks
## Pre-Commit Hook: CodeScene Check
This repo uses Husky hooks from `.husky/`. Those files are the source of truth.
Il repository ha un pre-commit hook che verifica la qualità del codice prima di ogni commit.
## Installation
## Post-Commit Hook: Auto-Implement Design Changes
`pnpm install` runs the `prepare` script and installs the hooks into `.git/hooks`.
Quando committi modifiche a `ui-design.pen`, il post-commit hook:
1. Analizza automaticamente le modifiche (colori, typography, spacing, layout)
2. Spawna Claude Code in background per implementare le modifiche
3. Ti notifica quando l'implementazione è completa
---
## Pre-Commit Hook Details
### Cosa Fa
1. **Analizza file staged** — controlla solo TypeScript/Rust modificati
2. **Confronta con base branch**`origin/main` per branch, `HEAD~1` per main
3. **Avvisa per file grandi** — >500 linee modificate
4. **Suggerisce review** — con Claude Code + CodeScene MCP per analisi dettagliata
### Bypass Hook
Se sai cosa stai facendo:
If you need to reinstall them manually:
```bash
# Skip hook per questo commit
git commit --no-verify -m "your message"
# O includi nel commit message
git commit -m "your message [skip codescene]"
pnpm exec husky
```
### Installazione (già fatto per questa repo)
The hooks expect `node` and `pnpm` to be available. If they are installed via `nvm`, the hooks will try to load `~/.nvm/nvm.sh` automatically.
L'hook è già installato in `.git/hooks/pre-commit`.
## Policy
Se cloni la repo altrove, copia l'hook:
```bash
cp .github/hooks/pre-commit .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit
```
- Commit on `main` only.
- Push from `main` to `origin/main` only.
- Never use `--no-verify`.
- `.codescene-thresholds` is a ratchet. It can only move up.
### Esempio Output
## Pre-commit
#### ✅ Commit Normale
```
🔍 Running CodeScene Code Health check...
Comparing against: origin/main
Analyzing code changes...
✅ CodeScene check passed
+42 -18 lines
`.husky/pre-commit` blocks commits unless all of the following are true:
💡 For detailed code health analysis, run:
claude 'Check code health of this commit with CodeScene MCP'
```
- `HEAD` is attached to `main`
- staged TypeScript files pass `pnpm lint --quiet`
- TypeScript passes `npx tsc --noEmit`
- frontend tests pass via `pnpm test --run --silent`
- current CodeScene Hotspot and Average health are both at or above `.codescene-thresholds`
#### ⚠️ File Grandi
```
🔍 Running CodeScene Code Health check...
Comparing against: origin/main
Analyzing code changes...
⚠️ Large file changes detected (>500 lines):
- src/components/Editor.tsx
- src-tauri/src/vault.rs
If `CODESCENE_PAT` or `CODESCENE_PROJECT_ID` is missing, the CodeScene portion is skipped, but the rest of the hook still runs.
Consider:
- Breaking into smaller commits
- Reviewing with Claude Code + CodeScene MCP
- Running: claude 'Review code health of staged changes'
## Pre-push
Continue anyway? (y/N)
```
`.husky/pre-push` blocks pushes unless all of the following are true:
### CodeScene MCP Integration
- the current branch is `main`
- every pushed branch ref is `refs/heads/main -> refs/heads/main`
- TypeScript and the Vite build pass
- frontend coverage passes
- Rust lint and Rust coverage pass when `src-tauri/` changed
- the curated Playwright core smoke lane passes via `pnpm playwright:smoke`
- current CodeScene Hotspot and Average health are both at or above `.codescene-thresholds`
Per analisi dettagliata del code health, usa Claude Code:
If the remote CodeScene scores are better than the current thresholds, the hook updates `.codescene-thresholds`, stages it, and stops the push. Commit that file normally, then push again. The hook does not auto-commit or bypass itself.
## Legacy Files
The legacy `pre-commit` and `post-commit` files under `.github/hooks/` are archival only. Do not copy them into `.git/hooks`; use Husky and `.husky/` instead. `install-hooks.sh` remains as a reinstall helper that runs Husky.
## Troubleshooting
If a hook cannot find `node` or `pnpm`:
```bash
# Analizza staged changes
claude 'Check code health of staged changes with CodeScene MCP'
# Analizza file specifico
claude 'What is the code health score of src/components/Editor.tsx?'
# Pre-commit safeguard
claude 'Run pre_commit_code_health_safeguard on staged changes'
export NVM_DIR="$HOME/.nvm"
. "$NVM_DIR/nvm.sh"
nvm use node
```
### Troubleshooting
**Hook non si attiva:**
- Verifica che `.git/hooks/pre-commit` esista ed sia eseguibile
- `ls -la .git/hooks/pre-commit` — dovrebbe mostrare `-rwxr-xr-x`
**Vuoi disabilitare temporaneamente:**
```bash
mv .git/hooks/pre-commit .git/hooks/pre-commit.disabled
```
**Vuoi riabilitare:**
```bash
mv .git/hooks/pre-commit.disabled .git/hooks/pre-commit
```
### Future Improvements
Possibili miglioramenti:
- [ ] Integrazione diretta API CodeScene per score numerico
- [ ] Fail automatico se code health < soglia
- [ ] Cache dei risultati per evitare re-analisi
- [ ] Hook pre-push più pesante per analisi completa
---
## Post-Commit Hook: Auto-Implement Design Changes
### Cosa Fa
Quando committi modifiche a `ui-design.pen`, il hook:
1. **Analizza il diff** — usa `scripts/design-diff-analyzer.js`
2. **Identifica modifiche significative:**
- 🎨 Colori (fill, backgroundColor)
- 📝 Typography (fontSize, fontFamily)
- 📏 Spacing (padding, margin, gap)
- 🔲 Layout (nuovi componenti, riorganizzazioni)
3. **Spawna Claude Code** — in background via `openclaw sessions spawn`
4. **Auto-notifica** — quando l'implementazione è completa
### Cosa Implementa
| Tipo Modifica | Azione |
|--------------|--------|
| Colori | Aggiorna `src/theme.json` o CSS variables |
| Typography | Aggiorna `src/theme.json` typography |
| Spacing | Aggiorna `src/theme.json` spacing |
| Layout | Modifica/crea componenti React |
| Testi mockup | Nessuna azione (solo design) |
### Esempio Output
```
🎨 Design file changed - analyzing...
📋 Implementation tasks:
1. [HIGH] Update color palette
- fill: $--muted-foreground → #666666
- backgroundColor: #FFFFFF → #F5F5F5
Update src/theme.json or CSS variables to match the design.
2. [MEDIUM] Update typography
- fontSize: 14px → 16px
Update src/theme.json typography settings.
🚀 Spawning Claude Code to implement changes...
✅ Claude Code spawned - you'll be notified when implementation is complete
```
### Workflow Completo
```
You Post-Commit Hook Claude Code Brian (AI)
│ │ │ │
├─ Modify ui-design.pen │ │ │
├─ git add ui-design.pen │ │ │
├─ git commit │ │ │
│ │ │ │
│ ├─ Analyze diff │ │
│ ├─ Generate tasks │ │
│ ├─ Spawn Claude Code ────────> │
│ │ │ │
│ │ ├─ Implement changes │
│ │ ├─ Test visually │
│ │ ├─ Run tests │
│ │ ├─ Commit │
│ │ ├─ openclaw system event ────>
│ │ │ │
│ │ │ ├─ Notify Telegram
│ <─────────────────────────────────────────────────────────────────────────────┘
│ "✅ Design changes implemented and tested"
```
### Design Diff Analyzer
Lo script `scripts/design-diff-analyzer.js` rileva:
- **Color changes** — `"fill": "#OLD" → "#NEW"`
- **Font changes** — `"fontSize": 14 → 16`
- **Spacing** — `"padding": 8 → 12`
- **Content** — testi mockup (no implementation)
Uso:
```bash
# Analizza ultimo commit
node scripts/design-diff-analyzer.js
# Output JSON per automation
node scripts/design-diff-analyzer.js --json
```
### Disabilitare Temporaneamente
Se vuoi committare il design senza auto-implementazione:
```bash
# Disabilita hook
mv .git/hooks/post-commit .git/hooks/post-commit.disabled
# Commit
git commit -m "design: update mockup"
# Riabilita hook
mv .git/hooks/post-commit.disabled .git/hooks/post-commit
```
### Monitorare Claude Code
Mentre Claude Code lavora in background:
```bash
# Lista sub-agent attivi
openclaw sessions list --kinds isolated
# Vedi log di un sub-agent
openclaw sessions history --session-key <key>
# Ferma sub-agent (se necessario)
openclaw subagents kill --target design-auto-implement
```
### Troubleshooting
**Hook non parte:**
- Verifica che `ui-design.pen` sia effettivamente cambiato: `git diff HEAD~1 ui-design.pen`
- Verifica che lo script analyzer esista: `ls -la scripts/design-diff-analyzer.js`
**Nessuna notifica:**
- Claude Code potrebbe essere ancora in esecuzione — controlla `openclaw sessions list`
- Verifica che il prompt includa `openclaw system event` al termine
**Modifiche non implementate:**
- Controlla i log di Claude Code: `openclaw sessions history --session-key <key>`
- Il sub-agent viene auto-eliminato dopo completion (cleanup=delete)
### Limitazioni
- **Modifiche complesse** — layout completamente nuovi potrebbero richiedere intervento manuale
- **Timeout** — 10 minuti max (configurabile in hook)
- **Solo modifiche recenti** — analizza solo HEAD vs HEAD~1
Then retry the commit or push.

View File

@@ -1,25 +1,26 @@
#!/bin/bash
# Install git hooks for laputa-app
set -e
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
HOOKS_DIR="$(git rev-parse --git-dir)/hooks"
if ! command -v pnpm >/dev/null 2>&1 || ! command -v node >/dev/null 2>&1; then
export NVM_DIR="${NVM_DIR:-$HOME/.nvm}"
if [ -s "$NVM_DIR/nvm.sh" ]; then
# shellcheck disable=SC1090
. "$NVM_DIR/nvm.sh" --no-use
nvm use --silent node >/dev/null 2>&1 || true
fi
fi
echo "Installing git hooks..."
# Copy pre-commit hook
cp "$SCRIPT_DIR/pre-commit" "$HOOKS_DIR/pre-commit"
chmod +x "$HOOKS_DIR/pre-commit"
echo "✅ Installed pre-commit hook"
# Copy post-commit hook
cp "$SCRIPT_DIR/post-commit" "$HOOKS_DIR/post-commit"
chmod +x "$HOOKS_DIR/post-commit"
echo "✅ Installed post-commit hook"
if ! command -v pnpm >/dev/null 2>&1 || ! command -v node >/dev/null 2>&1; then
echo "❌ node and pnpm must be available to install Husky hooks"
exit 1
fi
echo "Installing Husky hooks from .husky/ ..."
pnpm exec husky
echo "✅ Husky hooks installed"
echo ""
echo "Hooks installed:"
echo " - pre-commit: CodeScene code health check"
echo " - post-commit: Auto-implement design changes via Claude Code"
echo "Source of truth:"
echo " - .husky/pre-commit"
echo " - .husky/pre-push"
echo ""
echo "To bypass pre-commit, use: git commit --no-verify"
echo "Or include [skip codescene] in your commit message"
echo "Never use --no-verify in this repo."

View File

@@ -2,8 +2,6 @@ name: CI
on:
push:
branches: [main, experiment/*]
pull_request:
branches: [main]
jobs:
@@ -82,16 +80,14 @@ jobs:
# ── 3. Code Health (CodeScene — Hotspot + Average Code Health gates) ──
# Enforces minimum floors on BOTH hotspot and average code health.
# Hotspot: weighted avg of most-edited files (9.6 current | target 9.8)
# Average: project-wide avg across all files (9.37 current | target 9.5)
# Both gates must pass — average catches regressions in non-hotspot files.
- name: Code Health gates (Hotspot ≥9.5 + Average ≥9.0)
# Thresholds come from .codescene-thresholds so CI and local hooks match.
- name: Code Health gates
env:
CODESCENE_PAT: ${{ secrets.CODESCENE_PAT }}
CODESCENE_PROJECT_ID: ${{ secrets.CODESCENE_PROJECT_ID }}
run: |
HOTSPOT_THRESHOLD=9.5
AVERAGE_THRESHOLD=9.33
HOTSPOT_THRESHOLD=$(grep '^HOTSPOT_THRESHOLD=' .codescene-thresholds | cut -d= -f2)
AVERAGE_THRESHOLD=$(grep '^AVERAGE_THRESHOLD=' .codescene-thresholds | cut -d= -f2)
API_RESPONSE=$(curl -sf \
-H "Authorization: Bearer $CODESCENE_PAT" \
-H "Accept: application/json" \

View File

@@ -1,6 +1,43 @@
#!/bin/sh
# Pre-commit: same checks as CI. Fix here, not in CI.
# Pre-commit: fast local gate before commit. Full suite runs in pre-push/CI.
set -e
ensure_node_tooling() {
if command -v node >/dev/null 2>&1 && command -v pnpm >/dev/null 2>&1; then
return 0
fi
NVM_DIR="${NVM_DIR:-$HOME/.nvm}"
if [ -s "$NVM_DIR/nvm.sh" ]; then
# shellcheck disable=SC1090
. "$NVM_DIR/nvm.sh" --no-use
nvm use --silent node >/dev/null 2>&1 || true
fi
if ! command -v node >/dev/null 2>&1 || ! command -v pnpm >/dev/null 2>&1; then
echo "❌ node and pnpm must be available before committing"
echo " Install them or make sure your nvm setup is available to git hooks."
exit 1
fi
}
require_main_branch() {
if ! git symbolic-ref -q HEAD >/dev/null 2>&1; then
echo "❌ Commits must happen on main. Detached HEAD is not allowed."
exit 1
fi
CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
if [ "$CURRENT_BRANCH" != "main" ]; then
echo "❌ Commits must happen on main. Current branch: $CURRENT_BRANCH"
echo " Merge or cherry-pick your work onto main, then commit there."
exit 1
fi
}
require_main_branch
ensure_node_tooling
echo "🔍 Pre-commit checks..."
# Lint + types (only if TS files staged)
@@ -19,7 +56,9 @@ echo "✅ Pre-commit passed"
# ── CodeScene Code Health gate ────────────────────────────────────────────
# Blocks commit if scores drop below thresholds in .codescene-thresholds.
# Thresholds are a ratchet — only go up, auto-updated after each successful push.
# Thresholds are a ratchet — only go up.
# When remote scores improve, pre-push updates .codescene-thresholds and stops
# so the new floor is committed with normal verified hooks.
# Note: remote scores lag behind local changes (update after push + re-analysis).
# If check fails: extract hooks, split components, reduce complexity.
# Never use eslint-disable, #[allow(...)], or `as any`.

View File

@@ -28,6 +28,64 @@
# ─────────────────────────────────────────────────────────────────────────
set -e
ensure_node_tooling() {
if command -v node >/dev/null 2>&1 && command -v pnpm >/dev/null 2>&1; then
return 0
fi
NVM_DIR="${NVM_DIR:-$HOME/.nvm}"
if [ -s "$NVM_DIR/nvm.sh" ]; then
# shellcheck disable=SC1090
. "$NVM_DIR/nvm.sh" --no-use
nvm use --silent node >/dev/null 2>&1 || true
fi
if ! command -v node >/dev/null 2>&1 || ! command -v pnpm >/dev/null 2>&1; then
echo "❌ node and pnpm must be available before pushing"
echo " Install them or make sure your nvm setup is available to git hooks."
exit 1
fi
}
require_main_push() {
if ! git symbolic-ref -q HEAD >/dev/null 2>&1; then
echo "❌ Pushes must happen from main. Detached HEAD is not allowed."
exit 1
fi
CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
if [ "$CURRENT_BRANCH" != "main" ]; then
echo "❌ Pushes must happen from main. Current branch: $CURRENT_BRANCH"
exit 1
fi
while IFS=' ' read -r LOCAL_REF LOCAL_SHA REMOTE_REF REMOTE_SHA; do
[ -z "$LOCAL_REF" ] && continue
case "$LOCAL_REF:$REMOTE_REF" in
refs/heads/main:refs/heads/main)
;;
refs/tags/*:refs/tags/*)
;;
*)
echo "❌ Pushes must be main -> main only."
echo " Attempted: ${LOCAL_REF:-<none>} -> ${REMOTE_REF:-<none>}"
exit 1
;;
esac
done <<EOF
$PUSH_INPUT
EOF
}
if [ -t 0 ]; then
PUSH_INPUT=""
else
PUSH_INPUT=$(cat)
fi
require_main_push
ensure_node_tooling
START_TIME=$(date +%s)
echo ""
@@ -85,7 +143,7 @@ if [ "$RUST_CHANGED" = true ]; then
cargo llvm-cov \
--manifest-path src-tauri/Cargo.toml \
$LLVM_COV_FLAGS \
--ignore-filename-regex "search\.rs|lib\.rs" \
--ignore-filename-regex "lib\.rs|main\.rs|menu\.rs" \
--fail-under-lines 85 \
-- --test-threads=1
echo " ✅ Rust coverage OK"
@@ -93,29 +151,32 @@ else
echo "⏭️ [3/5] Rust coverage — skipped (no src-tauri/ changes)"
fi
# ── 4. Playwright smoke tests (if any exist) ──────────────────────────
# ── 4. Playwright core smoke lane (if any exist) ──────────────────────
echo ""
SMOKE_FILES=$(find tests/smoke -name '*.spec.ts' 2>/dev/null | head -1)
SMOKE_FILES=$(find tests/smoke tests/integration -name '*.spec.ts' 2>/dev/null | head -1)
if [ -n "$SMOKE_FILES" ]; then
echo "🎭 [4/5] Playwright smoke tests..."
SMOKE_OUTPUT=$(pnpm playwright:smoke 2>&1) || true
echo "🎭 [4/5] Playwright core smoke tests..."
set +e
SMOKE_OUTPUT=$(pnpm playwright:smoke 2>&1)
SMOKE_STATUS=$?
set -e
echo "$SMOKE_OUTPUT" | tail -20
# Fail only on real failures (not flaky). Flaky = passed on retry.
if echo "$SMOKE_OUTPUT" | grep -qE '^\s+\d+ failed' && ! echo "$SMOKE_OUTPUT" | grep -qE '^\s+\d+ passed'; then
echo " ❌ Smoke tests FAILED"
exit 1
if [ "$SMOKE_STATUS" -ne 0 ]; then
echo " ❌ Core smoke tests FAILED"
exit "$SMOKE_STATUS"
fi
echo " ✅ Smoke tests OK"
echo " ✅ Core smoke tests OK"
else
echo "⏭️ [4/5] Playwright smoke tests — skipped (no tests/smoke/*.spec.ts)"
echo "⏭️ [4/5] Playwright core smoke tests — skipped (no tests/**/*.spec.ts)"
fi
# ── 5. CodeScene code health gate (ratchet) ──────────────────────────────
# Thresholds live in .codescene-thresholds and only ever go UP (ratchet).
# After every successful push the file is updated if scores improved.
# If remote scores improved, the hook updates the file and stops so the new
# floor is committed with normal verified hooks before the next push.
THRESHOLDS_FILE="$(git rev-parse --show-toplevel)/.codescene-thresholds"
HOTSPOT_MIN=9.5
AVERAGE_MIN=9.31
HOTSPOT_MIN=9.45
AVERAGE_MIN=9.29
if [ -f "$THRESHOLDS_FILE" ]; then
HOTSPOT_MIN=$(grep HOTSPOT_THRESHOLD "$THRESHOLDS_FILE" | cut -d= -f2)
AVERAGE_MIN=$(grep AVERAGE_THRESHOLD "$THRESHOLDS_FILE" | cut -d= -f2)
@@ -137,8 +198,9 @@ else
else
echo " Remote Hotspot Code Health: $HOTSPOT_SCORE (threshold: $HOTSPOT_MIN)"
echo " Remote Average Code Health: $AVERAGE_SCORE (threshold: $AVERAGE_MIN)"
PYTHON_STATUS=0
python3 -c "
import sys, os
import sys
hotspot = float('$HOTSPOT_SCORE')
average = float('$AVERAGE_SCORE')
@@ -161,8 +223,6 @@ else:
if failed:
sys.exit(1)
# Ratchet: update thresholds file if scores improved
# Truncate (floor) to 2 decimals so the threshold never exceeds the actual score
import math
thresholds_file = '$THRESHOLDS_FILE'
new_hotspot = max(hotspot_min, math.floor(hotspot * 100) / 100)
@@ -171,9 +231,16 @@ if new_hotspot > hotspot_min or new_average > average_min:
with open(thresholds_file, 'w') as f:
f.write(f'HOTSPOT_THRESHOLD={new_hotspot}\nAVERAGE_THRESHOLD={new_average}\n')
print(f' 📈 Ratchet updated: Hotspot {hotspot_min} → {new_hotspot}, Average {average_min} → {new_average}')
# Stage and amend the thresholds update into the last commit would change history — instead just auto-commit it
os.system(f'git add {thresholds_file} && git commit -m \"chore: ratchet CodeScene thresholds to {new_hotspot}/{new_average}\" --no-verify 2>/dev/null || true')
" || exit 1
sys.exit(3)
" || PYTHON_STATUS=$?
if [ "$PYTHON_STATUS" -ne 0 ] && [ "$PYTHON_STATUS" -ne 3 ]; then
exit "$PYTHON_STATUS"
fi
if [ "$PYTHON_STATUS" -eq 3 ]; then
git add "$THRESHOLDS_FILE"
echo " ❌ Commit the updated .codescene-thresholds with a normal verified commit, then push again."
exit 1
fi
fi
fi

149
AGENTS.md Normal file
View File

@@ -0,0 +1,149 @@
# AGENTS.md — Laputa App
> Quick links: [Project Spec](docs/PROJECT-SPEC.md) · [Architecture](docs/ARCHITECTURE.md) · [Abstractions](docs/ABSTRACTIONS.md) · [Wireframes](ui-design.pen)
---
## 1. Task Workflow
### 1a. Pick up a task
Run `/laputa-next-task` — fetches next task (To Rework first, then Open), moves to In Progress, returns full description.
**Before writing a single line of code:** run `mcp__codescene__code_health_score` to check the current codebase health against `.codescene-thresholds`. If the score is already below the threshold, **stop and refactor first** — find the worst files with the MCP, improve them, commit, then start the task. Never start feature work on a codebase that is already below the gate.
- Read task description and all comments fully
- For To Rework: the ❌ QA failed comment tells you exactly what to fix
- Check `docs/adr/` for relevant architecture decisions before structural choices
- Add a comment: `🚀 Starting work on this task. [Brief description of approach]`
### 1b. Implement
- Work on `main` branch — **no branches, no PRs, ever**. Pre-commit and pre-push block work from any other branch.
- Commit every 2030 min: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`
- **⛔ NEVER use --no-verify**
- For UI tasks: open `ui-design.pen` first, study visual language, design in light mode
### 1c. When done
**Phase 1 — Playwright (only for core user flows):**
Write Playwright test in `tests/smoke/<slug>.spec.ts` only if feature touches: vault open, note create/save/delete, search, wikilink navigation, git commit/push, conflict resolution. Tag a test with `@smoke` only if it protects a core pre-push workflow. Do NOT tag cosmetic or mock-heavy checks — keep those in the full regression lane. The curated `pnpm playwright:smoke` suite must stay under **5 minutes**; use `pnpm playwright:regression` for the full Playwright pass.
```bash
pnpm dev --port 5201 &
sleep 3
BASE_URL="http://localhost:5201" npx playwright test tests/smoke/<slug>.spec.ts
```
**Phase 2 — Native app QA:**
```bash
pnpm tauri dev &
sleep 10
bash ~/.openclaw/skills/laputa-qa/scripts/focus-app.sh laputa
bash ~/.openclaw/skills/laputa-qa/scripts/screenshot.sh /tmp/qa-native.png
```
Use `osascript` for keyboard interactions. Write result as Todoist comment (✅ or ❌). **⚠️ WKWebView:** `osascript keystroke` blocked inside editor — rely on Playwright for text input features.
After both phases pass, add a **completion comment** to the Todoist task before running `/laputa-done`. The comment must include:
- What was implemented (12 lines)
- QA: what was tested and how (Playwright / native screenshot / osascript)
- Refactoring: any files refactored to meet the CodeScene gate (or "none needed")
- ADRs: any new/updated ADRs (or "none")
- Docs: any updated docs (ARCHITECTURE.md, ABSTRACTIONS.md, etc.) (or "none")
- Code health: final Hotspot and Average scores after push
Then run `/laputa-done <task_id>` → moves to In Review, notifies Brian, self-dispatches next task.
---
## 2. Development Process
### Commits & pushes
- Push directly to `main` — no PRs, no branches. Pre-push blocks non-`main` pushes.
- Pre-push hook runs full check suite (build + tests + core Playwright smoke + CodeScene)
- **A task is NOT done until `git push origin main` succeeds.** If the hook blocks: read the error, fix it (clippy, tests, CodeScene, build), commit the fix, push again. **⛔ NEVER use --no-verify**
### TDD (mandatory)
Red → Green → Refactor → Commit. One cycle per commit. For bugs: write failing regression test first, then fix. Exception: pure CSS/layout changes.
**Test quality (Kent Beck's Desiderata):** Isolated · Deterministic · Fast · Behavioral · Structure-insensitive · Specific · Predictive. Fix flaky tests first. Prefer E2E over unit tests for user flows.
### Code health (mandatory)
Pre-commit and pre-push hooks enforce **Hotspot Code Health** and **Average Code Health** ≥ thresholds in `.codescene-thresholds`. Both gates block commit/push. Thresholds are a **ratchet** — only go up. When pre-push sees improved remote scores, it updates `.codescene-thresholds`, stages it, and stops so you can commit the new floor with normal verified hooks before pushing again. Never add `// eslint-disable`, `#[allow(...)]`, or `as any`.
**⛔ NEVER edit `.codescene-thresholds` to lower the values.** If the gate blocks you, improve the code — do not lower the bar.
**Before every commit:** run `mcp__codescene__code_health_review` on files you touched and verify score is higher. **Boy Scout Rule:** every file you touch must leave with a higher score.
**If CodeScene gate blocks your push:** use `mcp__codescene__code_health_score` to find the worst file, refactor it, commit, push again. Do NOT stop or wait for laputa-refactor — that is a background loop, not a substitute for fixing your own regressions.
### Check suite (runs on every push)
```bash
pnpm lint && npx tsc --noEmit && pnpm test && pnpm test:coverage # frontend ≥70%
cargo test && cargo llvm-cov --manifest-path src-tauri/Cargo.toml --no-clean --fail-under-lines 85
```
### ADRs & docs
ADRs live in `docs/adr/`. Create in the same commit as the code. Never edit existing — create a new one that supersedes. Use `/create-adr`. **When:** new dependency, storage strategy, platform target, core abstraction, cross-cutting pattern. **Not for:** bug fixes, styling, refactors.
After any Tauri command, new component/hook, data model change, or new integration: update `docs/ARCHITECTURE.md`, `docs/ABSTRACTIONS.md`, and/or `docs/GETTING-STARTED.md` in the same commit.
---
## 3. Product Rules
### User vault (`~/Laputa/`)
Default to `demo-vault-v2/`. If you must use `~/Laputa/` for testing: **never commit changes** — always run `cd ~/Laputa && git checkout -- . && git clean -fd` when done.
### UI design
Open `ui-design.pen` first (light mode). Create `design/<slug>.pen` for the task; on completion merge into `ui-design.pen` and delete it.
### UI components — mandatory rules
**Always use shadcn/ui components.** Never use raw HTML form elements (`<input>`, `<select>`, `<button>`, native `<input type="date">`, etc.) for user-facing UI. Every interactive element must use the shadcn/ui equivalent:
| Need | Use |
|---|---|
| Text input | `Input` from shadcn/ui |
| Dropdown/select | `Select` from shadcn/ui |
| Date picker | `Calendar` + `Popover` from shadcn/ui (NOT native `<input type="date">`) |
| Button | `Button` from shadcn/ui |
| Autocomplete/combobox | Reuse existing combobox components from the app (check `src/components/`) |
| Wikilink picker | Reuse the wikilink autocomplete component already used in the editor and Properties panel |
| Emoji picker | Reuse the emoji picker component already used for note/type icons |
| Color picker | Reuse the color swatch picker used for type customization |
| Toggle/switch | `Switch` or `ToggleGroup` from shadcn/ui |
| Dialog/modal | `Dialog` from shadcn/ui |
**When in doubt:** search `src/components/` for an existing component before building new. **Visual language:** all new UI must feel native to Laputa — if it looks like a browser default, it's wrong.
---
## 4. Reference
### macOS / Tauri gotchas
- `Option+N` → special chars on macOS. Use `e.code` or `Cmd+N`
- Tauri menu accelerators: `MenuItemBuilder::new(label).accelerator("CmdOrCtrl+1")`
- `app.set_menu()` replaces the ENTIRE menu bar — include all submenus
- `mock-tauri.ts` silently swallows Tauri calls — not a substitute for native testing
### QA scripts
```bash
bash ~/.openclaw/skills/laputa-qa/scripts/focus-app.sh laputa
bash ~/.openclaw/skills/laputa-qa/scripts/screenshot.sh /tmp/out.png
bash ~/.openclaw/skills/laputa-qa/scripts/shortcut.sh "command" "s"
```
### Diagrams
Prefer Mermaid (`flowchart`, `sequenceDiagram`, `classDiagram`, `stateDiagram-v2`). ASCII only for spatial wireframe layouts.

149
CLAUDE.md
View File

@@ -1,148 +1,3 @@
# CLAUDE.md — Laputa App
@AGENTS.md
> Quick links: [Project Spec](docs/PROJECT-SPEC.md) · [Architecture](docs/ARCHITECTURE.md) · [Abstractions](docs/ABSTRACTIONS.md) · [Wireframes](ui-design.pen)
---
## 1. Task Workflow
### 1a. Pick up a task
Run `/laputa-next-task` — fetches next task (To Rework first, then Open), moves to In Progress, returns full description.
- Read task description and all comments fully
- For To Rework: the ❌ QA failed comment tells you exactly what to fix
- Check `docs/adr/` for relevant architecture decisions before structural choices
- Add a comment: `🚀 Starting work on this task. [Brief description of approach]`
### 1b. Implement
- Work on `main` branch — **no branches, no PRs, ever**
- Commit every 2030 min: `feat:`, `fix:`, `refactor:`, `test:`, `docs:`
- **⛔ NEVER use --no-verify**
- For UI tasks: open `ui-design.pen` first, study visual language, design in light mode
### 1c. When done
**Phase 1 — Playwright (only for core user flows):**
Write smoke test in `tests/smoke/<slug>.spec.ts` only if feature touches: vault open, note create/save/delete, search, wikilink navigation, git commit/push, conflict resolution. Do NOT write Playwright tests for cosmetic changes — use Vitest instead. Suite must stay under **10 minutes**.
```bash
pnpm dev --port 5201 &
sleep 3
BASE_URL="http://localhost:5201" npx playwright test tests/smoke/<slug>.spec.ts
```
**Phase 2 — Native app QA:**
```bash
pnpm tauri dev &
sleep 10
bash ~/.openclaw/skills/laputa-qa/scripts/focus-app.sh laputa
bash ~/.openclaw/skills/laputa-qa/scripts/screenshot.sh /tmp/qa-native.png
```
Use `osascript` for keyboard interactions. Write result as Todoist comment (✅ or ❌). **⚠️ WKWebView:** `osascript keystroke` blocked inside editor — rely on Playwright for text input features.
After both phases pass, run `/laputa-done <task_id>` → moves to In Review, notifies Brian, self-dispatches next task.
---
## 2. Development Process
### Commits & pushes
- Push directly to `main` — no PRs, no branches
- Pre-push hook runs full check suite (build + tests + Playwright + CodeScene)
- **A task is NOT done until `git push origin main` succeeds.** If the hook blocks: read the error, fix it (clippy, tests, CodeScene, build), commit the fix, push again. **⛔ NEVER use --no-verify**
### TDD (mandatory)
Red → Green → Refactor → Commit. One cycle per commit. For bugs: write failing regression test first, then fix. Exception: pure CSS/layout changes.
**Test quality (Kent Beck's Desiderata):** Isolated · Deterministic · Fast · Behavioral · Structure-insensitive · Specific · Predictive. Fix flaky tests before adding new ones. Prefer E2E over unit tests for user flows.
### Code health (mandatory)
Pre-commit and pre-push hooks enforce **Hotspot Code Health** and **Average Code Health** ≥ thresholds in `.codescene-thresholds`. Both gates block commit/push. Thresholds are a **ratchet** — only go up, auto-updated after each successful push. Never add `// eslint-disable`, `#[allow(...)]`, or `as any`.
**⛔ NEVER edit `.codescene-thresholds` to lower the values.** If the gate blocks you, improve the code — do not lower the bar.
**Before every commit:** run `mcp__codescene__code_health_review` on files you touched and verify score is higher. **Boy Scout Rule:** every file you touch must leave with a higher score.
**If CodeScene gate blocks your push:** use `mcp__codescene__code_health_score` to find the worst file, refactor it, commit, push again. Do NOT stop or wait for laputa-refactor — that is a background loop, not a substitute for fixing your own regressions.
### Check suite (runs on every push)
```bash
pnpm lint && npx tsc --noEmit
pnpm test
pnpm test:coverage # frontend ≥70%
cargo test
cargo llvm-cov --manifest-path src-tauri/Cargo.toml --no-clean --fail-under-lines 85
```
### Architecture Decision Records (ADRs)
ADRs live in `docs/adr/`. Check before structural choices. Create the ADR **in the same commit as the code**. Never edit existing ADRs — create a new one that supersedes. Use `/create-adr` for template.
**When to create one:** new dependency, storage strategy, platform target, core abstraction change, cross-cutting pattern. **Not for:** bug fixes, UI styling, refactors, test additions.
### Keep docs/ in sync
After Tauri command, new component/hook, data model change, or new integration: update `docs/ARCHITECTURE.md`, `docs/ABSTRACTIONS.md`, and/or `docs/GETTING-STARTED.md` in the same commit.
---
## 3. Product Rules
### User vault (`~/Laputa/`)
Default to `demo-vault-v2/`. If you must use `~/Laputa/` for testing: **never commit changes** — always run `cd ~/Laputa && git checkout -- . && git clean -fd` when done.
### UI design
1. Open `ui-design.pen` first — study existing frames for visual language
2. Design in light mode. Create `design/<slug>.pen` for the task
3. On completion: merge frames into `ui-design.pen`, delete `design/<slug>.pen`
### UI components — mandatory rules
**Always use shadcn/ui components.** Never use raw HTML form elements (`<input>`, `<select>`, `<button>`, native `<input type="date">`, etc.) for user-facing UI. Every interactive element must use the shadcn/ui equivalent:
| Need | Use |
|---|---|
| Text input | `Input` from shadcn/ui |
| Dropdown/select | `Select` from shadcn/ui |
| Date picker | `Calendar` + `Popover` from shadcn/ui (NOT native `<input type="date">`) |
| Button | `Button` from shadcn/ui |
| Autocomplete/combobox | Reuse existing combobox components from the app (check `src/components/`) |
| Wikilink picker | Reuse the wikilink autocomplete component already used in the editor and Properties panel |
| Emoji picker | Reuse the emoji picker component already used for note/type icons |
| Color picker | Reuse the color swatch picker used for type customization |
| Toggle/switch | `Switch` or `ToggleGroup` from shadcn/ui |
| Dialog/modal | `Dialog` from shadcn/ui |
**When in doubt:** search `src/components/` for an existing component before building new. **Visual language:** all new UI must feel native to Laputa — if it looks like a browser default, it's wrong.
---
## 4. Reference
### macOS / Tauri gotchas
- `Option+N` → special chars on macOS. Use `e.code` or `Cmd+N`
- Tauri menu accelerators: `MenuItemBuilder::new(label).accelerator("CmdOrCtrl+1")`
- `app.set_menu()` replaces the ENTIRE menu bar — include all submenus
- `mock-tauri.ts` silently swallows Tauri calls — not a substitute for native testing
### QA scripts
```bash
bash ~/.openclaw/skills/laputa-qa/scripts/focus-app.sh laputa
bash ~/.openclaw/skills/laputa-qa/scripts/screenshot.sh /tmp/out.png
bash ~/.openclaw/skills/laputa-qa/scripts/shortcut.sh "command" "s"
```
### Diagrams
Prefer Mermaid (`flowchart`, `sequenceDiagram`, `classDiagram`, `stateDiagram-v2`). ASCII only for spatial wireframe layouts.
This file is a Claude Code compatibility shim. Keep shared agent instructions in `AGENTS.md`.

View File

@@ -24,9 +24,6 @@ Personal knowledge and life management desktop app built with Tauri v2 + React +
# Install dependencies
pnpm install
# Install git hooks (optional but recommended)
.github/hooks/install-hooks.sh
# Run dev server
pnpm dev
@@ -69,7 +66,7 @@ claude 'Check code health with CodeScene MCP'
## Development Workflow
See [CLAUDE.md](CLAUDE.md) for coding guidelines and workflow.
See [AGENTS.md](AGENTS.md) for coding guidelines and workflow. [CLAUDE.md](CLAUDE.md) remains as a compatibility shim for Claude Code.
**Key principles:**
- Small, atomic commits
@@ -79,7 +76,7 @@ See [CLAUDE.md](CLAUDE.md) for coding guidelines and workflow.
## CI/CD
GitHub Actions runs on every push/PR:
GitHub Actions runs on every push to `main`:
- ✅ Tests (frontend + Rust)
- 📊 Coverage (70% threshold)
- 🎨 Lint & format
@@ -89,7 +86,7 @@ See [.github/SETUP.md](.github/SETUP.md) for CI/CD configuration.
## Git Hooks
Pre-commit hook checks code health before every commit. See [.github/HOOKS.md](.github/HOOKS.md) for details.
Husky installs the git hooks from `.husky/` during `pnpm install`. The repo enforces `main`-only commits and pushes; see [.github/HOOKS.md](.github/HOOKS.md) for details.
## License

10
adr.md
View File

@@ -1,10 +0,0 @@
---
type: Type
"sidebar label": ADRs
icon: article
color: red
title: Adr
---
# ADR

View File

@@ -1,5 +0,0 @@
---
title: Custom views as .yml files with client-side filter engine
type: Note
status: Active
---

View File

@@ -1,5 +1,5 @@
---
type: Project
type: Note
status: Active
---

View File

@@ -1,5 +1,4 @@
---
title: Untitled note 213
type: Note
status: Active
---

View File

@@ -1,5 +1,5 @@
---
title: Untitled note 215
type: Note
status: Active
---
My Custom H1 Heading

View File

@@ -0,0 +1,7 @@
---
type: Note
status: Active
---
[[2024-03|March 2024]]
[[2024-03|March 2024]]

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,7 @@
---
type: Project
status: Active
---
Appended by raw editor test

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,4 @@
---
type: Note
status: Active
---

View File

@@ -0,0 +1,7 @@
---
type: Note
status: Active
---
[[2024-03|March 2024]]
[[2024-03|March 2024]]

View File

@@ -1,11 +1,8 @@
---
title: Untitled video
type: Project
status: Active
---
# Untitled project 13
## Objective

View File

@@ -1,11 +1,8 @@
---
title: Untitled project 7
type: Project
status: Active
---
# Untitled project 7
## Objective

View File

@@ -665,7 +665,7 @@ The vault backend (`src-tauri/src/vault/`) is split into focused submodules:
| `get_build_number` | Get app build number |
| `save_image` | Save base64 image to vault |
| `copy_image_to_vault` | Copy image file to vault |
| `update_menu_state` | Update native menu checkmarks |
| `update_menu_state` | Update native menu checkmarks and enabled/disabled state for selection-dependent actions |
## Mock Layer
@@ -718,6 +718,8 @@ Data flows unidirectionally: `App` passes data and callbacks as props to child c
| Cmd+[ / Cmd+] | Navigate back / forward |
| `[[` in editor | Open wikilink suggestion menu |
Selection-dependent note actions are wired through both the command palette and the native Note menu. For example, a deleted file opened from Changes view becomes a read-only diff preview, and that state enables the "Restore Deleted Note" menu/command while normal note mutation actions stay disabled.
## Auto-Release & In-App Updates
### Release Pipeline

View File

@@ -1,352 +0,0 @@
# Design System Proposal for Laputa
## Current State Assessment
### What exists today
- **53 top-level frames** scattered across a ~6800x11400px canvas with no spatial logic
- **0 reusable components** (every frame is ad-hoc)
- **~40 design variables** with light/dark theme support (colors, radii, fonts)
- **2 foundation frames**: Color Palette and Typography & Spacing Specs
- **1 full-app layout** frame (light mode only)
- **4 sidebar-collapse variations** showing different panel states
### Recurring patterns that should be components (but aren't)
By analyzing the 53 frames, these patterns are duplicated 3-10x each:
| Pattern | Where it appears | Times duplicated |
|---------|-----------------|-----------------|
| Inspector section header (label + action icon) | rbF01-03, reF01-03, pi01 | 7x |
| Note list item (title + snippet + date + dot) | dp01-04, mni01-04, trNL1 | ~10x |
| Tab bar tab (label + close + dot indicator) | dp10, mni10, full layout | 3x |
| Sidebar filter item (icon + label + count) | trSB1, full layout sidebar | 4x |
| Sidebar section group (chevron + icon + label) | full layout, drag frames | 4x |
| Breadcrumb bar (icon + path + badges) | dp20, archBtnNorm/Arc, full layout | 4x |
| Modal shell (header + body + footer) | ghv01-04, iogBH (settings) | 5x |
| Property row (label + value) | urlDefault/Hover/Edit, pi01 | 4x |
| Relationship pill (icon + label + X) | trRI1, reF01-03, rbF01-03 | 6x |
| Status badge (colored dot/pill) | dp01, dp10, dp20, dp30 | 4x |
| Status bar (version + branch + sync) | mni20, full layout | 2x |
| Search bar (dark themed) | 3aG9b, K1O2x, nrIcZ | 3x |
| Warning/info banner | trW30 | 1x (but will recur) |
Every time a new feature is designed, these get rebuilt from scratch.
---
## Proposed Structure
### Single file: `ui-design.pen`
Multiple files creates friction (can't reference components cross-file, harder to maintain). Keep one file, organized into logical **sections** using large container frames as visual grouping. Each section is a horizontal band across the canvas.
### Canvas Layout (top to bottom)
```
y ≈ 0 ┌─────────────────────────────────────────────┐
│ 0. COVER │
│ App name, version, last updated, TOC │
└─────────────────────────────────────────────┘
y ≈ 200 ┌─────────────────────────────────────────────┐
│ 1. FOUNDATIONS │
│ Color palette, Typography scale, Spacing, │
│ Border radius, Shadows, Iconography │
└─────────────────────────────────────────────┘
y ≈ 1800 ┌─────────────────────────────────────────────┐
│ 2. COMPONENTS (Reusable) │
│ Atoms → Molecules → Organisms │
│ Each component: default + states side by side│
└─────────────────────────────────────────────┘
y ≈ 5000 ┌─────────────────────────────────────────────┐
│ 3. PATTERNS / COMPOSITIONS │
│ Panel Inspector, Panel NoteList, Panel Editor│
│ Modal shell, Popover/dropdown shell │
└─────────────────────────────────────────────┘
y ≈ 7000 ┌─────────────────────────────────────────────┐
│ 4. FULL LAYOUTS │
│ Default state, Sidebar collapsed, Editor │
│ only, etc. (full 1440x900 frames) │
└─────────────────────────────────────────────┘
y ≈ 12000 ┌─────────────────────────────────────────────┐
│ 5. FEATURE SPECS │
│ Grouped by feature area — all current 53 │
│ frames reorganized here │
└─────────────────────────────────────────────┘
```
Each section starts with a **section label frame** (large text, description, horizontal rule). Within each section, frames flow **left to right, wrapping down**, with 100px spacing.
---
## Section 1: Foundations
### What to keep
- **Color Palette** (frame `mOf4J`) — already good. Move to top of file.
- **Typography & Spacing** (frame `HZonq`) — already good. Place next to color palette.
### What to add
- **Spacing Scale** — explicit 4px grid reference (4, 8, 12, 16, 20, 24, 32, 40, 48, 64) with visual boxes
- **Shadow Tokens** — overlay shadow, dialog shadow, dropdown shadow (currently only documented in CSS, not in the design file)
- **Icon Reference** — small grid showing common Lucide + Phosphor icons used in the app, at 14px and 16px sizes
### Variables to add
The .pen file already has `--radius-sm/md/lg` but is missing spacing variables. Add:
| Variable | Value | Usage |
|----------|-------|-------|
| `--space-xs` | 4 | Tight gaps (icon-to-label) |
| `--space-sm` | 8 | Standard gap |
| `--space-md` | 12 | Section padding |
| `--space-lg` | 16 | Panel padding |
| `--space-xl` | 24 | Large section gaps |
| `--space-2xl` | 32 | Page padding |
| `--space-3xl` | 48 | Section dividers |
---
## Section 2: Component Library
### Atomic Design Hierarchy
#### Atoms (smallest building blocks)
| Component | Variants/States | ID Prefix |
|-----------|----------------|-----------|
| **Button/Primary** | default, hover, active, disabled | `c/btn-pri` |
| **Button/Secondary** | default, hover, active, disabled | `c/btn-sec` |
| **Button/Ghost** | default, hover, active | `c/btn-ghost` |
| **Button/Destructive** | default, hover, disabled | `c/btn-dest` |
| **Button/Icon** | default, hover (icon-only button, e.g. close, settings) | `c/btn-icon` |
| **Input/Text** | empty, filled, focused, error, disabled | `c/input` |
| **Input/Search** | empty, with query, with clear button | `c/input-search` |
| **Badge** | default, secondary, outline, destructive, status colors (green/orange/red/blue/purple) | `c/badge` |
| **Status Dot** | green (new), orange (modified), none (clean) | `c/status-dot` |
| **Checkbox** | unchecked, checked, indeterminate | `c/checkbox` |
| **Toggle** | off, on | `c/toggle` |
| **Icon** | 14px, 16px, 20px wrapper with Lucide/Phosphor | `c/icon` |
| **Separator** | horizontal, vertical | `c/sep` |
| **Avatar/Initial** | letter avatar for Person entities | `c/avatar` |
| **Tooltip** | top, bottom (container with pointer) | `c/tooltip` |
#### Molecules (composed from atoms)
| Component | Composition | States | ID Prefix |
|-----------|------------|--------|-----------|
| **Sidebar/FilterItem** | icon + label + count badge | default, active, hover | `c/sb-filter` |
| **Sidebar/SectionHeader** | chevron + icon + label + add button | collapsed, expanded, hover, dragging | `c/sb-section` |
| **Sidebar/SectionItem** | indent + label | default, active, hover | `c/sb-item` |
| **Sidebar/TopicItem** | hash + label | default, active, hover | `c/sb-topic` |
| **NoteList/Item** | status dot + title + snippet + date + type pill | default, selected, hover, modified, new | `c/nl-item` |
| **NoteList/Header** | title + count + sort button | — | `c/nl-header` |
| **Tab** | label + close btn + modified dot | default, active, hover, modified | `c/tab` |
| **BreadcrumbBar** | path segments + word count + status badge | new, modified, clean | `c/breadcrumb` |
| **Property/Row** | label + value | default, hover, editing | `c/prop-row` |
| **Property/URLRow** | label + link + copy/edit icons | default, hover, editing | `c/prop-url` |
| **Relationship/Pill** | icon + label + (X remove on hover) | default, hover, trashed, archived | `c/rel-pill` |
| **Relationship/AddInput** | search input with autocomplete | empty, typing, results | `c/rel-add` |
| **Inspector/SectionHeader** | label + action button | default, hover | `c/insp-header` |
| **Git/CommitItem** | hash + message + author + date (timeline style) | — | `c/git-commit` |
| **Search/ResultItem** | title + path + highlighted snippet | default, selected | `c/search-result` |
| **Sort/DropdownItem** | label + direction arrow + checkmark | default, selected | `c/sort-item` |
| **Banner/Warning** | icon + message + optional action | info, warning, error | `c/banner` |
| **Wikilink** | colored link text (varies by entity type) | 8 type colors | `c/wikilink` |
#### Organisms (panel-level compositions)
| Component | Content | ID Prefix |
|-----------|---------|-----------|
| **Panel/Sidebar** | title bar + filters + sections + commit area | `c/panel-sidebar` |
| **Panel/NoteList** | header + type pills + item list | `c/panel-notelist` |
| **Panel/Editor** | tab bar + breadcrumb + content area | `c/panel-editor` |
| **Panel/Inspector** | properties section + relations + backlinks + history | `c/panel-inspector` |
| **Modal/Shell** | header + tab bar (opt) + body + footer | `c/modal` |
| **Popover/Dropdown** | list of items + separator + annotation | `c/popover` |
| **StatusBar** | left info + right info | `c/statusbar` |
| **TitleBar** | traffic lights (macOS) | `c/titlebar` |
---
## Section 3: Patterns / Compositions
These are **non-reusable** reference frames showing how components compose into real UI sections. Think of them as "component playgrounds" — they use component instances to build real UI, but they're documentation, not building blocks.
- **Inspector states**: Properties expanded, Relations with pills, Referenced By with/without entries, Backlinks, Git history
- **NoteList states**: All Notes view, filtered by section, empty state, search results
- **Sidebar states**: All sections expanded, one collapsed, dragging reorder, after reorder
- **Editor states**: Single tab, multiple tabs, modified tabs, diff view
- **Modal patterns**: GitHub Vault flow (4 states), Settings, Create Note, Commit Dialog
---
## Section 4: Full Layouts
| Frame | Description |
|-------|-------------|
| **Default — All Panels** | 1440x900, sidebar + notelist + editor + inspector |
| **Sidebar Collapsed** | Editor area wider, collapse button visible |
| **Editor + NoteList Only** | No sidebar or inspector |
| **Editor Only** | Focused writing mode |
| **AI Chat Open** | Inspector replaced with AI Chat panel |
| **Quick Open Modal** | Cmd+P overlay on default layout |
Keep the existing 5 layout frames (qHhaj + SC_all/nosb/edonly/ednl). Add AI Chat and Quick Open.
---
## Section 5: Feature Specs
Reorganize existing 53 frames into feature groups. Each group gets a **feature label** frame above it:
| Group | Frames to include |
|-------|-------------------|
| **Note Status & Indicators** | dp01, dp10, dp20, dp30, mni01, mni10, mni20 |
| **Trash & Archive** | trSB1, trNL1, trRI1, trW30, archBtnNorm, archBtnArc |
| **Inspector & Properties** | pi01, pi50, rbF01-03, reF01-03, urlDefault/Hover/Edit |
| **Sidebar** | dsg01a-04j, csB01, csA01 |
| **GitHub Vault** | ghv01-04, ghv03 |
| **Git History** | ghCL1, ghDO1, vc001, vc100, vc200 |
| **Sort & Search** | srtDD, srtBN, 3aG9b, K1O2x, nrIcZ |
| **Editor & Wikilinks** | wlc01 |
| **Settings** | iogBH |
| **Virtual List** | vl001 |
---
## Naming Convention
### Frames
```
Section-level: "== FOUNDATIONS =="
"== COMPONENTS =="
"== FULL LAYOUTS =="
Feature groups: "Feature: Trash & Archive"
"Feature: Note Status"
```
### Reusable Components
```
component/<category>/<name>
Examples:
component/button/primary
component/button/ghost
component/sidebar/filter-item
component/notelist/item
component/inspector/section-header
component/modal/shell
```
### States (within a component frame)
```
<component-name> — <state>
Examples:
Button/Primary — Default
Button/Primary — Hover
NoteList/Item — Selected
NoteList/Item — Modified
```
### Feature Spec Frames
```
<Feature> — <Specific View>
Examples:
Trash — Note List View
Trash — 30-Day Warning
Git History — Commit List
Git History — Diff Open
```
---
## Implementation Priority
### Phase 1: Foundation Cleanup (2-3 hours)
1. Add spacing variables to the .pen file
2. Move Color Palette and Typography frames to top of canvas (y ≈ 200)
3. Add section label frames as visual dividers
4. Reorganize existing 53 frames into the feature-spec section (y ≈ 12000+)
5. Create cover frame at y ≈ 0
**Impact**: Clean canvas, easy to navigate. Zero component work yet.
### Phase 2: Core Atoms (3-4 hours)
1. **Button** — 4 variants x 3 states = ~12 sub-frames, all as `reusable: true`
2. **Badge** — 6 color variants + 4 style variants
3. **Status Dot** — green, orange, red, none
4. **Input** — text + search variants
5. **Separator** — horizontal + vertical
6. **Icon Button** — close, settings, chevron, etc.
**Impact**: Building blocks exist. Future features can pull from them.
### Phase 3: Core Molecules (4-5 hours)
1. **Sidebar/FilterItem** — most reused sidebar pattern
2. **Sidebar/SectionHeader** — with chevron and add button
3. **NoteList/Item** — the most duplicated pattern in the file
4. **Tab** — with modified indicator states
5. **Property/Row** — default/hover/edit states
6. **Relationship/Pill** — normal/trashed/archived states
7. **Inspector/SectionHeader** — label + collapse/action
**Impact**: Feature specs can be rebuilt from instances. Consistency guaranteed.
### Phase 4: Organisms (3-4 hours)
1. **Modal/Shell** — replace 5 ad-hoc modals with instances of one shell
2. **Panel/Sidebar** — full sidebar composition
3. **Panel/NoteList** — full notelist composition
4. **StatusBar** — standardize
5. **Popover/Dropdown** — for sort, autocomplete, etc.
**Impact**: Full layouts can be composed from panel organisms.
### Phase 5: Rebuild Full Layouts (2-3 hours)
1. Rebuild "Laputa App — Full Layout (Light)" using component instances
2. Create remaining layout variants (AI Chat, Quick Open)
3. Ensure all layouts use the same component instances for consistency
**Impact**: Single source of truth. Change a button component, all layouts update.
### Phase 6: Feature Spec Cleanup (2-3 hours)
1. Rebuild key feature specs using component instances where possible
2. Remove frames that are now redundant (covered by component states)
3. Add any missing feature-specific variations
**Impact**: Clean, maintainable feature documentation.
---
## Estimated Total Effort
| Phase | Effort | Cumulative |
|-------|--------|-----------|
| 1. Foundation Cleanup | 2-3h | 2-3h |
| 2. Core Atoms | 3-4h | 5-7h |
| 3. Core Molecules | 4-5h | 9-12h |
| 4. Organisms | 3-4h | 12-16h |
| 5. Full Layouts | 2-3h | 14-19h |
| 6. Feature Cleanup | 2-3h | 16-22h |
**Recommendation**: Do phases 1-3 first (9-12h). This covers 80% of the value — clean organization + the most reused components. Phases 4-6 can happen incrementally as features are designed.
---
## What "World Class" Looks Like
After this work, `ui-design.pen` will:
1. **Open to a cover page** with app identity and section navigation
2. **Have ~30 reusable components** that match the real implementation 1:1
3. **Use variables everywhere** — no hardcoded colors, spacing, or radii
4. **Show every component state** — no guessing what hover/active/disabled looks like
5. **Compose layouts from instances** — change a component, all layouts update
6. **Group features logically** — find any feature spec in seconds
7. **Grow naturally** — new features just add instances of existing components + new feature-specific frames
The key shift: **from "collection of screenshots" to "living system of composable parts"**.

View File

@@ -24,7 +24,8 @@ pnpm tauri dev
# Run tests
pnpm test # Vitest unit tests
cargo test # Rust tests (from src-tauri/)
pnpm playwright:smoke # Playwright smoke tests
pnpm playwright:smoke # Curated Playwright core smoke lane (~5 min)
pnpm playwright:regression # Full Playwright regression suite
```
## Directory Structure
@@ -167,7 +168,7 @@ laputa-app/
│ └── package.json
├── e2e/ # Playwright E2E tests (~26 specs)
├── tests/smoke/ # Smoke tests (~10 specs)
├── tests/smoke/ # Playwright specs (full regression + @smoke subset)
├── design/ # Per-task design files
├── demo-vault-v2/ # Getting Started demo vault
├── scripts/ # Build/utility scripts
@@ -175,9 +176,11 @@ laputa-app/
├── package.json # Frontend dependencies + scripts
├── vite.config.ts # Vite bundler config
├── tsconfig.json # TypeScript config
├── playwright.config.ts # E2E test config
├── playwright.config.ts # Full Playwright regression config
├── playwright.smoke.config.ts # Curated pre-push Playwright config
├── ui-design.pen # Master design file
├── CLAUDE.md # Project instructions
├── AGENTS.md # Shared project instructions for coding agents
├── CLAUDE.md # Claude Code compatibility shim importing AGENTS.md
└── docs/ # This documentation
```
@@ -279,6 +282,8 @@ type SidebarSelection =
`useCommandRegistry` + `useAppCommands` build a centralized command registry. Commands are registered with labels, shortcuts, and handlers. The `CommandPalette` (Cmd+K) fuzzy-searches this registry. The native macOS menu bar also triggers commands via `useMenuEvents`.
Commands whose availability depends on the current note or Git state must also flow through `update_menu_state` so the native menu stays in sync with the command palette. The deleted-note restore action in Changes view is the reference example: the row opens a deleted diff preview, the command palette exposes "Restore Deleted Note", and the Note menu enables the same action only while that preview is active.
## Running Tests
```bash
@@ -294,9 +299,12 @@ cargo test
# Rust coverage (must pass ≥85% line coverage)
cargo llvm-cov --manifest-path src-tauri/Cargo.toml --no-clean --fail-under-lines 85
# Playwright smoke tests (requires dev server)
# Playwright core smoke lane (requires dev server)
BASE_URL="http://localhost:5173" pnpm playwright:smoke
# Full Playwright regression suite
BASE_URL="http://localhost:5173" pnpm playwright:regression
# Single Playwright test
BASE_URL="http://localhost:5173" npx playwright test tests/smoke/<slug>.spec.ts
```
@@ -330,6 +338,7 @@ BASE_URL="http://localhost:5173" npx playwright test tests/smoke/<slug>.spec.ts
1. Register the command in `useAppCommands.ts` via the command registry
2. Add a corresponding menu bar item in `menu.rs` for discoverability
3. If it has a keyboard shortcut, register it in `useAppKeyboard.ts`
4. If its enabled state depends on runtime selection (active note, deleted preview, Git status, etc.), thread that flag through `useMenuEvents.ts` and `update_menu_state` so the native menu enables/disables correctly
### Modify styling

View File

@@ -1,332 +0,0 @@
# Laputa App — Personal Knowledge & Life Management App
## Status: V1 Complete! 🎉
## Vision
Custom desktop + mobile app to manage Luca's life — projects, responsibilities, knowledge, people, events. Built around a specific ontology that no existing app gets right. The current Laputa vault (Obsidian, 9200+ markdown files) is the data layer and predecessor — the app gives it a proper UI.
## Tech Stack
- **Desktop**: Tauri (Rust shell + system webview)
- **Frontend**: React + TypeScript
- **Editor**: CodeMirror 6 — live preview with reveal-on-focus (Obsidian/Bear style)
- **Mobile**: Capacitor (wraps same web UI for iOS/Android) — later phase
- **Data**: plain markdown files on disk with YAML frontmatter, git-versioned
- **Core logic**: Rust (file parsing, git ops, indexing) via Tauri commands
---
## Ontology
### Core Entities
#### Year
- Top-level time container
- Has: Quarters, Targets
- Naming convention: `2026` (Laputa legacy: Chinese zodiac names like `2022-tiger`)
#### Quarter
- Time container within a Year
- Has: Projects, Targets
- Natural planning/review cycle
#### Responsibility
- Long-running duty, possibly indefinite
- Has clear and measurable KPIs (via Measures)
- Has an owner (Person)
- Has: Projects, Procedures, Tasks, Measures
- Examples: "Grow newsletter", "Manage sponsorships", "Stay healthy"
#### Measure
- A trackable metric tied to one or more Responsibilities
- Quantitative and observable
- Examples: "Resting heart rate", "Newsletter subscribers", "Monthly revenue", "Sponsorship close rate"
#### Target
- A time-bound goal for a Measure
- Typically quarterly
- Examples: "Resting HR < 55 by Q1 2026", "Reach 100k subscribers by Q2 2026"
- Belongs to: a Quarter (or Year), references a Measure
#### Project
- Has a beginning and an end
- Can't be completed in one sitting
- Has success criteria (key results, described informally in the project page)
- Has a timeline — at minimum a deadline (default: end of quarter)
- Advances one or more Responsibilities
- Has an owner (Person)
- Belongs to: Quarter (primary), Responsibility
- Has: Tasks, Notes
#### Experiment
- Like an unplanned baby project — exploring something promising without expectation of success
- Can't be completed in one sitting
- No strict success criteria or deadline
- Has an owner (Person)
- Examples: "Vibe-coding a stock screener", "Testing a new content format"
#### Procedure
- Recurring piece of work, completable in one sitting
- Has a cadence (daily, weekly, monthly, etc.)
- Belongs to: a Responsibility (usually) or a Project (less common)
- Has an owner (Person)
- Examples: "Weekly sponsorship report", "Morning briefing", "Monthly review"
#### Task
- One-off piece of work, completable in one sitting
- Belongs to: a Responsibility or a Project
- Has an owner (Person)
#### Topic
- An area of interest — no performance expectations
- Things link to Topics for categorization/discovery
- Examples: "AI/ML", "Trading", "Fitness", "Frontend"
#### Note
- A document, tool, resource, or any material helpful to advance work
- Can belong to: Procedures, Responsibilities, Projects (one or many)
- Can be related to: Topics (one or many)
- Examples: evergreen notes, reference docs, templates, bookmarks
#### Person
- A real-world person or an AI agent
- Owner of Projects, Responsibilities, Procedures, Tasks
- Related to Events
#### Event
- Something that happened on a given day, stored in long-term memory
- Examples: conversations, meetings, achievements, personal milestones
- Can be related to: any entity above
- Date-based: one specific day
---
## Relationships Summary
```
Year
└── Quarter
└── Project ──→ Responsibility (advances)
└── Target ──→ Measure ──→ Responsibility
Responsibility
├── Project
├── Procedure (recurring)
├── Task (one-off)
└── Measure → Target
Project
├── Task
└── Note
Procedure
└── Note
Note ──→ Topic (categorization)
Event ──→ anything (loose association)
Person = owner of Project, Responsibility, Procedure, Task
```
### Relationship Types
- **Belongs to**: hierarchical parent (Project→Quarter, Task→Project, Procedure→Responsibility)
- **Advances**: Project→Responsibility (why this project exists)
- **Related to**: loose association (Event→anything, Note→Topic)
- **Owner**: Person who is accountable (single owner per entity)
---
## Laputa Legacy Mapping
| Laputa Concept | Life OS Equivalent |
|---|---|
| Year | Year |
| Quarter | Quarter |
| Goal | Target + Measure |
| Project | Project |
| Key Result | Informal in Project page |
| Responsibility | Responsibility |
| Procedure | Procedure |
| Topic | Topic |
| Person | Person |
| Event | Event |
| Evergreen | Note |
| Note (reading notes) | Note |
| Readings | Note |
| Essay | Note (belongs to a Responsibility/Project) |
| Monday Ideas | Note |
| Area | Folded into Responsibility or Topic |
| Month | Removed (Quarter is the planning unit) |
| Journal | Removed or becomes a Note |
| Movie/Restaurant/Hotel | Out of scope (or Topic-linked Notes) |
| Vital | Measure |
| Video/Buckets | Note (belongs to Project/Responsibility) |
---
## UI Design
### Design Reference
- Wireframes: `/Users/luca/OpenClaw/Laputa-app-design.pen`
- Inspiration: Bear Notes, Obsidian
### Core Principle: Type-Agnostic UI
Minimize custom UI behavior per entity type. Everything is a file, everything gets the same treatment. Type only determines which sidebar section an entity appears under (and maybe an icon/color hint). The editor, right panel, and note list behave identically regardless of type.
### Layout: Four Panels
#### 1. Left Sidebar — Navigation
**Filters** (flat, switch the note list view):
- All Notes
- Untagged
- Favorites
- People
- Events
**Section Groups** (expandable, show entity list):
- PROJECTS +
- EXPERIMENTS +
- RESPONSIBILITIES +
- PROCEDURES +
**Topics** (flat list, not nested):
- work
- strategy
- ideas
- research
- drafts
- archive
#### 2. Note List — Middle Panel
- Contextual to sidebar selection
- Title, preview snippet, date, tags as colored pills
- Status/type indicators
- Search bar + create button
- Default sort: last edited (descending)
- Quick type filter pills: `All | Notes | Events | People | ...`
- When viewing a section group entity (e.g. a Project): its own page is **pinned at top**, children listed below
#### 3. Editor — Main Panel
- CodeMirror 6 with live preview (reveal markdown syntax on active line)
- **Tab bar** at top: multiple open notes, closeable, shows parent context
- Title + content only — NO properties/frontmatter shown in editor
- Tags shown as clickable pills below title
- Created/last edited dates below title
- Wikilinks rendered as clickable in-app navigation links
- Frontmatter exists in the file but is hidden from the editor view
#### 4. Right Panel — Inspector
- **Status** pills (Active, Draft, etc.)
- **Properties**: Created, Modified, Author, Word Count, custom properties. Editable — writes to YAML frontmatter.
- **Relationships**: all "belongs to", "related to", "advances" links. Editable.
- **Backlinks**: notes that reference this note
- **Revision History**: git commits for this file — hash, message, author, timestamp. "View all revisions" link.
### Key UI Decisions
- **Editor is sacred** — all metadata/relationships live in the right panel, not above the content. Avoids the Obsidian/Notion problem of properties pushing content down.
- **Everything is a file** — a Project, Responsibility, Topic are all just notes with a type. Clicking one in the sidebar shows its page pinned at top of note list, children below.
- **Topics are flat** — no nesting for v1
- **Saved views / smart filters** — future feature. Saved queries that live under any entity in the sidebar (e.g. "Evergreen 60+ days" under a Procedure). Not in v1.
- **Tasks stay on Todoist** — no task management in v1
## Design Decisions
- **Month/Week are NOT entities** — they're time-based views/filters, not containers. Monthly reviews are a Procedure.
- **Essays, Monday Ideas, Videos, Readings** = Notes (belonging to Responsibility/Project)
- **Movies, Restaurants, Hotels** = Notes attached to Topics
- **Key Results** = informal, embedded in Project pages (not a separate entity)
- **Owner** = single Person per entity (no multi-owner for now)
- **Type-agnostic UI** — minimize type-specific behavior, keep everything consistent
- **Metadata in right panel, not in editor** — frontmatter is hidden from the editor, rendered as editable UI in the inspector
## Dev Workflow
> Full process documented in **`dev-workflow` skill** (`~/.openclaw/skills/dev-workflow/SKILL.md`).
> Below: Laputa-specific details only.
- **Repo**: `~/Workspace/laputa-app/` + GitHub `LucaRonin/laputa-app`
- **Design file**: `~/OpenClaw/projects/Laputa-app-design.pen`
- **Mock layer**: `src/mock-tauri.ts` (realistic test data for browser/Playwright testing without Tauri)
### Laputa-Specific MCPs (for Claude Code)
- **Context7** — up-to-date docs for Tauri v2, CodeMirror 6, React
- **Pencil MCP** — reads the .pen design file
### Key Lesson from M1
M1 passed all tests but showed 0 notes — vault path wrong, error silently swallowed. This drove the mandatory verification workflow now captured in the dev-workflow skill.
---
## V1 Milestones
### M1: Scaffold & Shell ✅ COMPLETE
**Goal:** Empty Tauri + React app that opens a window, reads a vault path, and lists files.
- [x] Init repo at `~/Workspace/laputa-app/`
- [x] Tauri v2 + React 19 + TypeScript + Vite 7 project setup
- [x] Configure Vitest (7 tests), Playwright (2 E2E tests), Rust tests (10 tests)
- [x] Rust backend: `list_vault` command — scans directory, parses YAML frontmatter via `gray_matter` crate
- [x] Rust backend: extracts type (Is A), aliases, Belongs to, Related to, Status, Owner, Cadence, title from H1
- [x] React: four-panel layout (Sidebar 250px, NoteList 300px, Editor flex, Inspector 280px), all resizable
- [x] Tauri mock layer for browser testing (`src/mock-tauri.ts`)
- [x] Screenshot verification via Playwright (`e2e/screenshot.spec.ts`)
- [ ] Push to GitHub (not yet done)
**Git log (5 commits):**
```
e72d66a Add Tauri mock layer for browser testing and visual verification workflow
bc75647 Remove unused Vite scaffold files
7d5c48c Add unit and E2E tests for all panel components
57083ad Add four-panel layout shell with vault scanning on load
6b53cf8 Initialize Tauri v2 + React + TypeScript project with vault scanner
```
### M2: Sidebar & Note List
**Goal:** Navigate the vault via sidebar, see filtered note lists.
- [ ] Sidebar: Filters section (All Notes, Favorites)
- [ ] Sidebar: Section Groups (Projects, Experiments, Responsibilities, Procedures) — populated from frontmatter `type:`
- [ ] Sidebar: Topics — flat list, populated from `Related to` topic links
- [ ] Note list: show title, preview snippet, date, type indicator
- [ ] Note list: sort by last modified (descending)
- [ ] Note list: search (full-text across vault)
- [ ] Note list: type filter pills (All | Notes | Events | People | ...)
- [ ] Clicking a section group entity: pin its page at top, show children below
- [ ] Filesystem watching: live reload when files change externally
### M3: Editor
**Goal:** Open and edit markdown files with CodeMirror 6 live preview.
- [ ] CodeMirror 6 integration with React
- [ ] Live preview: hide markdown syntax, reveal on active line (Obsidian/Bear style)
- [ ] Frontmatter hidden from editor view
- [ ] Tab bar: open multiple notes, close tabs, show parent context
- [ ] Wikilinks rendered as clickable links → navigate in-app
- [ ] Save: write markdown + YAML frontmatter to disk
- [ ] Auto-save (debounced)
- [ ] Basic markdown features: headings, bold/italic, lists, code blocks, links, images
### M4: Right Panel — Inspector
**Goal:** View and edit metadata, relationships, and git history.
- [ ] Properties panel: Created, Modified, Author, Word Count, Status, custom fields
- [ ] Properties editable → writes to YAML frontmatter
- [ ] Relationships panel: Belongs to, Related to, Advances — rendered as clickable links
- [ ] Relationships editable (add/remove)
- [ ] Backlinks: auto-computed from wikilinks across vault
- [ ] Git revision history: show commits for current file (hash, message, author, date)
- [ ] "View all revisions" link
### M5: File Operations & Polish
**Goal:** Create, rename, delete files. Polish for daily-driver use.
- [ ] Create new note (with type selector → sets `type:` in frontmatter, created at vault root)
- [ ] Rename file (updates filename + title)
- [ ] Delete → permanent delete with confirm dialog
- [ ] Keyboard shortcuts (Cmd+N new, Cmd+S save, Cmd+P quick open/search)
- [ ] Quick open palette (Cmd+P) — fuzzy search across all files
- [ ] People and Events filters in sidebar
- [ ] Visual polish: match Bear-inspired design from .pen wireframes
- [ ] E2E tests with Playwright for core flows
---
## Open Questions
- [ ] Migration path from current Laputa vault (legacy cleanup, schema normalization)
- [ ] Multi-user or just Luca + AI agents?
- [ ] How does Brian (and other agents) interact with the data?
- [ ] Mobile: when to start the Capacitor layer?
- [ ] Year/Quarter navigation in sidebar — dedicated section or time-based filter?
- [ ] Home/dashboard view — what does it show?

View File

@@ -1,113 +0,0 @@
---
title: ROADMAP
---
# Laputa — Product Roadmap
*Strategic directions, not implementation tasks. Each item here represents a direction that will be broken down into many smaller tasks when the time comes.*
*Updated: March 2026.*
---
## Consolidation sprint (current priority)
Before building new features, the architectural foundations must be solid. Key structural fixes underway:
- Move vault cache outside the vault directory (→ `~/.laputa/cache/`) with atomic writes
- Flip `type:` to canonical field in Rust parser (`Is A:` becomes alias)
- Remove `allContent` from the architecture — derive backlinks from open tabs only
- ~~Remove hardcoded `RELATIONSHIP_KEYS` — detect wikilink fields dynamically~~ ✅ Done
- Fix hardcoded vault path in `resolveNewNote` / `resolveNewType` / `resolveDailyNote`
- Define and enforce the three-source-of-truth contract (filesystem → cache → React state)
These are not features — they are the foundation everything else is built on.
---
## Strategic directions
### 1. Semantic properties
**What:** Conventional frontmatter field names (`status:`, `url:`, `start_date:`, `end_date:`, `goal:`, `result:`) trigger rich UI rendering beyond the Properties panel — chips in the note list, progress indicators in the editor header, date range badges.
**Why:** Notes are not just documents. A Project has a start and end. A Responsibility has KPIs. A Procedure has an owner and a cadence. The app should surface this structure visually, not just store it as plain text.
**Convention over configuration:** the rendering rules ship as sensible defaults. Users can override via `config/semantic-properties.md` in the vault — a plain markdown file, editable from within the app.
**Draft tasks:** created in Todoist. To be prioritized after consolidation sprint.
---
### 2. Default relationships in Properties panel
**What:** The Properties panel shows a set of relationship fields by default — even when empty — guiding the user toward a connected knowledge graph. Defaults include: Belongs to, Related to, Events, People (Type is already shown).
**Why:** A new note starts with a completely empty Properties panel today. There's no guidance on how to connect it. Laputa is opinionated — it should show you the connections that matter.
**Convention over configuration:** the default list is built in, but can be overridden via `config/relations.md` in the vault.
**Draft tasks:** created in Todoist. Needs design discussion (per-type overrides?) before implementation.
---
### 3. Global workspace filter
**What:** A top-level workspace switcher (below the traffic lights) that filters the entire app — sidebar, note list, search — to show only notes belonging to the selected workspace, plus shared notes (those without a Workspace field).
**Why:** A single vault often contains both personal and work content. A workspace filter lets you focus on one context at a time without cognitive overhead.
**How:** Notes opt into a workspace via `Workspace: [[workspace/refactoring]]` frontmatter. Workspace notes are auto-detected from the `workspace/` folder. No setup required.
**Future trajectory:** Workspaces are the seed of a multi-vault, multi-user access control model. In the future, workspaces may map to separate Git repositories — each with their own access permissions. Different people see different workspaces (vaults). Git provides the audit trail. This enables Laputa to grow from a personal tool to a small-team knowledge base without rebuilding the product.
**Draft tasks:** created in Todoist. Lower priority than semantic properties and default relationships.
---
### 4. Inbox and capture pipeline
**What:** An Inbox section that surfaces all unorganized notes — those with no outgoing relationships. Replaces "All Notes" as the primary landing section. Capture integrations (Chrome extension, iPhone share sheet, Readwise sync) feed into the inbox automatically.
**Why:** Capture and organize are fundamentally different activities and should be treated separately. Today Laputa has no concept of an unorganized note — everything lands in the same pool. The inbox makes the unorganized state visible and actionable, creating a discipline: Inbox Zero, reached weekly.
**The inbox as a smart filter:** not a folder. Any note without `Belongs to:`, `Related to:`, or other meaningful relationship is automatically in the inbox. Connecting a note to something removes it from the inbox, automatically.
**Capture integrations (future, each a separate feature):**
- Chrome extension → saves URL/clip as a note to the vault via Git
- iPhone share sheet → quick capture from any app
- Readwise / Kindle highlights → synced via Git automation
- Voice memo → transcribed and dropped into inbox
**Priority:** The Inbox UI is high-value and can be implemented without the capture integrations. Integrations come after.
---
### 5. Mobile apps
**What:** Native apps for iPhone and iPad — not ports of the desktop app, but purpose-built for each form factor.
**iPhone:** Optimized for fast capture. Quick note creation, voice memos, brief thoughts. The primary use case is getting something into the vault quickly while away from the desk. Minimal reading and editing.
**iPad:** A more capable mirror of the desktop experience — reading, editing, navigating the vault. Not a full four-panel layout, but enough to work on notes meaningfully. Think "laptop replacement for light work sessions."
**Why it matters:** Laputa's value as a personal knowledge system depends on being able to capture things wherever you are. Without mobile capture, important notes get lost or end up scattered in other apps.
**Sync:** Git-based, same as desktop. The vault is a Git repo — mobile apps commit and pull like any other client.
**Priority:** After the desktop experience is solid. Not before.
---
## Principles for this roadmap
- **Foundations before features** — a shaky architecture multiplies the cost of every feature built on top of it
- **Convention over configuration** — ship strong defaults, allow customization via vault files
- **File-first** — every strategic direction must be achievable without breaking the markdown-files-on-disk model
- **AI-readable by design** — conventions that humans find intuitive should also be legible to AI agents navigating the vault
---
*For active tasks and bugs, see the Todoist board (Laputa App project).*
*For architectural decisions and design principles, see [ARCHITECTURE.md](./ARCHITECTURE.md) and [VISION.md](./VISION.md).*
<!-- QA test edit Wed Apr 1 16:17:01 CEST 2026 -->

View File

@@ -2,8 +2,9 @@
type: ADR
id: "0007"
title: "Title equals filename (slug sync)"
status: active
status: superseded
date: 2026-03-15
superseded_by: "0044"
---
## Context

View File

@@ -2,8 +2,9 @@
type: ADR
id: "0042"
title: "Trash auto-purge safety model"
status: active
status: superseded
date: 2026-04-05
superseded_by: "0045"
---
## Context

View File

@@ -0,0 +1,46 @@
---
type: ADR
id: "0044"
title: "H1 as primary title source — filename as stable identifier"
status: active
date: 2026-04-07
supersedes: "0007"
---
## Context
ADR-0007 established that the `title:` frontmatter field is the source of truth for display titles, with filenames derived from it via slugification and kept in sync bidirectionally. This model had a key assumption: the user explicitly types a title before writing content.
In practice this created friction: new notes required a title upfront, the TitleField was always visible cluttering the editor, and the "title = filename slug" contract was fragile when users renamed files externally. The team wanted a more natural writing flow where you just start writing — like most text editors — and the title emerges from the document.
A pair of commits on 2026-04-06 (`377a3f8d`, `7daf6898`) implemented a fundamentally different model.
## Decision
**The first `# H1` heading in the note body is the canonical display title. The `title:` frontmatter field is legacy/backward-compat only. New notes are created with filename `untitled-{type}-{timestamp}.md` and no `title:` in frontmatter. On save, if the note has an H1, the file is auto-renamed to a slug derived from it (collision-safe with `-2`, `-3` suffixes).**
Title resolution priority (Rust `extract_title`):
1. H1 on the first non-empty line of the body
2. Frontmatter `title:` field (legacy, backward-compat)
3. Slug-to-title derivation from filename stem
The `has_h1: bool` field on `VaultEntry` signals the frontend to hide `TitleField` and the icon picker when an H1 is present, since the H1 serves as the title surface.
The breadcrumb bar shows the **filename stem** (not display title) so users always know the actual file identifier.
Auto-rename (`auto_rename_untitled` Tauri command) fires on save for `untitled-*` files that gain an H1, converting them to a human-readable slug.
## Options considered
- **Option A — H1 as primary title + auto-rename on save** (chosen): natural writing flow, filename eventually reflects content, TitleField hidden when H1 present. Downside: auto-rename can surprise users; breadcrumb must show filename to stay honest.
- **Option B — Keep `title:` frontmatter as source of truth** (ADR-0007, now superseded): explicit, deterministic. Downside: forces upfront titling, TitleField always visible, friction for quick capture.
- **Option C — UUID-based filenames, title only in H1**: filenames never change, no rename logic needed. Downside: vault unreadable in Finder/terminal, breaks the plain-files principle (ADR-0002).
## Consequences
- New notes start as `untitled-note-{timestamp}.md` — the vault may accumulate untitled files if users abandon drafts without writing an H1
- `TitleField` component is hidden when `has_h1 = true`; icon picker is also hidden (icons only make sense on titled notes)
- Frontmatter `title:` still parsed for backward-compat; existing vaults with explicit titles continue to work
- Auto-rename on save introduces a file rename side-effect during editing — wikilinks pointing to the old filename may break until the rename propagates
- The breadcrumb filename display makes the system more honest but slightly more technical for non-power users
- Re-evaluate if users find auto-rename disorienting or if wikilink breakage during rename becomes a reliability concern

View File

@@ -0,0 +1,37 @@
---
type: ADR
id: "0045"
title: "Permanent delete with confirm modal — no Trash system"
status: active
date: 2026-04-07
supersedes: "0042"
---
## Context
ADR-0042 designed a Trash auto-purge safety model (soft-delete with 30-day retention, OS trash via `trash` crate, audit log). This was built on top of a Trash system that treated deletion as a two-phase operation: move to trash → auto-purge after 30 days.
The Trash system was subsequently identified as unnecessary complexity: it required `trashed`/`trashedAt` frontmatter fields, sidebar filtering, editor banners, inspector components, dedicated smoke tests, and a `trash` crate dependency. The safety guarantee users actually need is a **confirmation prompt before irreversible action**, not a soft-delete buffer — especially given notes live in a git repo (vault git history is already a recovery mechanism per ADR-0034 and ADR-0014).
Commit `e581ad36` on 2026-04-06 removed the entire Trash system (123 files changed, ~3164 lines deleted).
## Decision
**Delete is permanent and immediate, gated only by a confirmation modal (`useDeleteActions`). Notes with `trashed: true` in existing vault frontmatter are treated as normal notes (the flag is ignored by the parser). The `trash` crate dependency is removed.**
The confirmation modal is the sole safety gate. No soft-delete, no Trash view, no auto-purge scheduler, no `.laputa/purge.log`.
## Options considered
- **Option A — Permanent delete + confirm modal** (chosen): simple, honest, no hidden state. Git history provides recovery. Removes ~3000 lines of code and a platform-specific dependency. Downside: no in-app recovery path for users who don't know about git.
- **Option B — OS Trash via `trash` crate** (ADR-0042, now superseded): soft-delete to OS Trash, user can recover from macOS Trash app. Downside: additional dependency, complex auto-purge scheduler, misleading "auto-purge" promise that was never actually implemented.
- **Option C — `.laputa/deleted/` archive folder**: custom recovery mechanism inside vault. Downside: clutters vault, users wouldn't know to look there, still requires manual cleanup.
## Consequences
- Users who accidentally delete a note must recover from git history (`git checkout HEAD -- path/to/note.md`) — this is a power-user action
- `trashed`/`trashedAt` frontmatter fields in existing vaults are silently ignored — no migration needed, no data loss
- The `trash` crate is removed from `Cargo.toml` — build times improve marginally
- Smoke tests for trash flows are deleted; delete-related test coverage is now purely the confirm modal behavior
- The Trash view, sidebar filter, note banners, and bulk-trash actions are all gone — simpler UI surface
- Re-evaluate if user feedback shows significant accidental deletion incidents, or if git-based recovery proves too inaccessible for non-technical users

View File

@@ -97,4 +97,7 @@ proposed → active → superseded
| [0039](0039-git-history-for-note-dates.md) | Git history as source of truth for note creation/modification dates | active |
| [0040](0040-custom-views-yml-filter-engine.md) | Custom Views — .laputa/views/*.yml with YAML filter engine | active |
| [0041](0041-filekind-all-files-in-vault-scanner.md) | fileKind field — scan all vault files, not just markdown | active |
| [0042](0042-trash-auto-purge-safety-model.md) | Trash auto-purge safety model | active |
| [0042](0042-trash-auto-purge-safety-model.md) | Trash auto-purge safety model | superseded → [0045](0045-permanent-delete-no-trash.md) |
| [0043](0043-reactive-vault-state-on-save.md) | Reactive vault state: editor changes propagate immediately to all UI | active |
| [0044](0044-h1-as-title-primary-source.md) | H1 as primary title source — filename as stable identifier | active |
| [0045](0045-permanent-delete-no-trash.md) | Permanent delete with confirm modal — no Trash system | active |

View File

@@ -1,124 +0,0 @@
# iPad Prototype — Tauri v2 iOS Feasibility Report
**Date:** 2026-03-27\
\
**Status:** VERIFIED — App builds, installs, and renders React UI on iPad Pro 13" simulator (iOS 18.3.1)
## Summary
Laputa can be ported to iPad using Tauri v2 iOS (beta) with **minimal code changes**. The React frontend stays identical. The Rust backend compiles for iOS with conditional compilation to gate desktop-only features (git CLI, menu bar, MCP, Claude CLI). Vault read/write operations work without changes.
**Key result:** `tauri ios build --target aarch64-sim` succeeds. The app launches on iPad simulator and the React UI renders correctly (telemetry consent dialog, welcome screen, all styled correctly).
## What Works
| Feature | Status | Notes |
| ------------------------------ | ---------------- | --------------------------------------------------------------------- |
| Rust backend cross-compilation | VERIFIED | Zero errors, zero warnings for `aarch64-apple-ios-sim` |
| Desktop build (no regressions) | VERIFIED | 581 Rust tests pass, 2201 frontend tests pass, CodeScene gates pass |
| Tauri iOS project generation | VERIFIED | `tauri ios init` generates Xcode project successfully |
| Xcode build for simulator | VERIFIED | `tauri ios build --target aarch64-sim`**BUILD SUCCEEDED** |
| App launch on iPad simulator | VERIFIED | Installs and launches on iPad Pro 13" (M4), PID assigned |
| React UI in WebView | VERIFIED | Telemetry consent dialog renders with correct styling, fonts, buttons |
| Vault file read/write | Expected to work | Pure filesystem operations, no process spawning |
| AI chat (Anthropic API) | Expected to work | Uses `reqwest` HTTP, no CLI dependency |
| Search | Expected to work | Pure Rust in-memory search |
| Settings persistence | Expected to work | JSON file read/write |
## What Doesn't Work (Yet)
| Feature | Blocker | Recommended Solution |
| ---------------------- | ---------------------------- | --------------------------------------------------------------------------------------- |
| Git operations | No `git` binary on iOS | **Option B (Working Copy)** for prototype; **Option A (isomorphic-git)** for production |
| GitHub clone/push/pull | Depends on git CLI | Same as above |
| Claude CLI streaming | No `claude` binary on iOS | Use Anthropic API directly (requires new implementation) |
| MCP server / WS bridge | Spawns Node.js child process | Skip for mobile; explore in-process MCP later |
| macOS menu bar | Desktop-only API | Touch-native navigation (already handled by React) |
| Updater plugin | Desktop-only | Use TestFlight for updates |
| File open dialog | Different on iOS | `tauri-plugin-dialog` supports iOS — needs testing |
## Changes Made
### `src-tauri/src/lib.rs`
* Gated `WsBridgeChild`, `run_startup_tasks`, `spawn_ws_bridge`, `log_startup_result` behind `#[cfg(desktop)]`
* Mobile build skips MCP registration, WS bridge, and vault migrations at startup
* Run event handler gated for desktop (child process cleanup)
### `src-tauri/src/commands.rs`
* Git commands: desktop implementations remain unchanged; mobile stubs return graceful errors or empty results
* GitHub commands: desktop-only; mobile stubs return errors
* Claude CLI commands: desktop-only; mobile stubs return `installed: false`
* MCP commands: desktop-only; mobile stubs return `NotInstalled`
* Menu commands: desktop-only; mobile stub is a no-op
* Vault, frontmatter, search, AI chat, settings: **unchanged** (work on both platforms)
### `src-tauri/src/lib.rs`
* `pub mod menu` gated behind `#[cfg(desktop)]`
### `src-tauri/capabilities/`
* `default.json`: scoped to desktop platforms (`linux`, `macOS`, `windows`)
* `mobile.json`: new file with iOS/Android permissions (core, dialog)
### `src-tauri/gen/apple/`
* Full Xcode project generated by `tauri ios init`
* iPad support: all orientations enabled, arm64 architecture
## Architecture: How Mobile Stubs Work
```text
Frontend (React) ──invoke──> Tauri Commands ──> Rust Backend
┌──────────┴──────────┐
#[cfg(desktop)] #[cfg(mobile)]
│ │
Real impl Stub (error/empty)
(git CLI, (graceful degradation)
menu, MCP)
```
The frontend code doesn't change at all. Commands that aren't available on mobile return errors that the UI can handle gracefully (e.g., hiding the git sync panel, disabling commit buttons).
## Git Strategy for iPad
### Phase 1: Working Copy (Recommended for prototype)
* User manages vault with [Working Copy](https://workingcopy.app/) (git client for iPad)
* Laputa opens the vault via iOS Files API / FileProvider
* Zero git code needed in Laputa — Working Copy handles sync
* **Pro:** Works immediately, robust git implementation
* **Con:** Requires separate app, split UX for sync
### Phase 2: isomorphic-git (Production)
* Pure JS git implementation running in the WebView
* Replace `invoke("git_commit")` etc. with JS-side git operations
* **Pro:** Integrated UX, no external dependency
* **Con:** Slower on large vaults (~9200 files), limited advanced git features
### Phase 3: git2-rs / gitoxide (Future)
* Pure Rust git library compiled into the Tauri binary
* Best performance, no JS bridge overhead
* **Con:** Larger binary size, more integration work
## Next Steps
1. **Install iOS simulator runtime**`xcodebuild -downloadPlatform iOS` (downloading ~7GB)
2. **Full Xcode build**`npx tauri ios build --target aarch64-sim`
3. **Launch on iPad simulator**`npx tauri ios dev`
4. **Test vault read/write** — open a vault, read/edit a note
5. **Test AI chat** — verify Anthropic API calls work from iOS WebView
6. **Evaluate touch UX** — identify layout issues on iPad screen size
7. **File Provider integration** — test opening vaults from Working Copy via iOS Files
## Prerequisites Installed
* Rust iOS targets: `aarch64-apple-ios`, `aarch64-apple-ios-sim`, `x86_64-apple-ios`
* Xcode 16.2 with iOS 18.3.1 simulator runtime (downloading)
* CocoaPods 1.16.2, xcodegen 2.45.3, libimobiledevice 1.4.0
* Tauri CLI 2.10.0 with iOS support

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 141 KiB

View File

@@ -0,0 +1,81 @@
# AGENTS.md — Laputa Vault
This is a [Laputa](https://github.com/refactoringhq/laputa-app) vault — a folder of markdown files with YAML frontmatter forming a personal knowledge graph.
## Note structure
Every note is a markdown file. The **first H1 heading in the body is the title** — there is no `title:` frontmatter field.
```yaml
---
is_a: TypeName # the note's type (must match the title of a type file in the vault)
url: https://... # example property
belongs_to: "[[other-note]]"
related_to:
- "[[note-a]]"
- "[[note-b]]"
---
# Note Title
Body content in markdown.
```
System properties are prefixed with `_` (e.g. `_organized`, `_pinned`, `_icon`) — these are app-managed, do not set or show them to users unless specifically asked.
## Types
A type is a note with `is_a: Type`. Type files live in the vault root:
```yaml
---
is_a: Type
_icon: books # Phosphor icon name in kebab-case
_color: "#8b5cf6" # hex color
---
# TypeName
```
To find what types exist: look for files with `is_a: Type` in the vault root.
## Relationships
Any frontmatter property whose value is a wikilink is a relationship. Backlinks are computed automatically.
Standard names: `belongs_to`, `related_to`, `has`. Custom names are valid.
## Wikilinks
- `[[filename]]` or `[[Note Title]]` — link by filename or title
- `[[filename|display text]]` — with custom display text
- Works in frontmatter values and markdown body
## Views
Saved filters live in `views/` as `.view.json` files:
```json
{
"title": "Active Notes",
"filters": [
{"property": "is_a", "operator": "equals", "value": "Note"},
{"property": "status", "operator": "equals", "value": "Active"}
],
"sort": {"property": "title", "direction": "asc"}
}
```
## Filenames
Use kebab-case: `my-note-title.md`. One note per file.
## What you can do
- Create/edit notes with correct frontmatter and H1 title
- Create new type files
- Add or modify relationships
- Create/edit views in `views/`
- Edit `AGENTS.md` (this file)
Do not modify app configuration files — those are local to each installation.

View File

@@ -1,89 +1,3 @@
# CLAUDE.md — Laputa Vault Guide
@AGENTS.md
This file explains how Laputa vaults work so you can create and edit notes correctly.
## Note structure
Every note is a markdown file with YAML frontmatter:
```yaml
---
title: My Note Title # required — do NOT use H1 in the body
is_a: TypeName # the note's type (must match a type file in the vault)
status: Active # example property
url: https://example.com # example property
belongs_to: "[[Other Note]]" # relationship via wikilink
related_to:
- "[[Note A]]"
- "[[Note B]]"
---
Body content in markdown. No H1 — the title is in the frontmatter.
```
**Key rules:**
- `title` is the note's display name — never use `# H1` in the body
- `is_a` must match the `title` of an existing type file
- Properties are any YAML key-value pairs in the frontmatter
- System properties are prefixed with `_` (e.g. `_pinned`, `_organized`, `_icon`) — don't show these to users
## Types
A type is a note with `is_a: Type` in the frontmatter. It lives in the vault root:
```yaml
---
title: Book
is_a: Type
_icon: BookOpen # Phosphor icon name
_color: "#8b5cf6" # hex color for sidebar
---
Description of the type.
```
To create a new type: create a markdown file with `is_a: Type`.
## Relationships
Relationships are frontmatter properties whose values are wikilinks:
```yaml
belongs_to: "[[Project Name]]"
related_to:
- "[[Note A]]"
- "[[Note B]]"
has:
- "[[Child Note]]"
```
Standard names: `belongs_to`, `related_to`, `has`. Custom names are allowed.
## Wikilinks
Syntax: `[[Note Title]]` or `[[filename]]`. Used for relationships and inline references.
## Views
Saved filters stored as `.view.json` in the `views/` folder:
```json
{
"title": "Active Notes",
"filters": [
{"property": "is_a", "operator": "equals", "value": "Note"},
{"property": "status", "operator": "equals", "value": "Active"}
],
"sort": {"property": "title", "direction": "asc"}
}
```
## What you can do on this vault
- Create/edit notes with correct frontmatter
- Create new type files
- Add or modify relationships between notes
- Create/edit views in `views/`
- Change `_icon` and `_color` on type files
- Edit `CLAUDE.md` (this file)
**Do not** modify app configuration files — those are local to each installation.
This file is a Claude Code compatibility shim. Keep shared vault instructions in `AGENTS.md`.

View File

@@ -12,7 +12,7 @@ Laputa integrates with [Claude Code](https://docs.anthropic.com/claude-code) —
claude "Create a note for the book Zero to One by Peter Thiel, with a rating and a topic"
```
Claude understands Laputa's format (frontmatter, types, wikilinks, relationships) and creates or edits files accordingly. Your vault's `CLAUDE.md` file gives it full context.
Claude understands Laputa's format (frontmatter, types, wikilinks, relationships) and creates or edits files accordingly. Your vault's `AGENTS.md` file gives any coding agent full context, and `CLAUDE.md` imports it for Claude Code compatibility.
## Git sync

View File

@@ -13,7 +13,8 @@
"test": "vitest run",
"test:watch": "vitest",
"test:e2e": "playwright test",
"playwright:smoke": "playwright test tests/smoke/",
"playwright:smoke": "playwright test --config playwright.smoke.config.ts tests/smoke/example.spec.ts tests/smoke/fix-ai-chat-empty-body-v3.spec.ts tests/smoke/raw-editor-sync-to-blocknote.spec.ts tests/integration/vault-workflows.spec.ts",
"playwright:regression": "playwright test tests/smoke/",
"playwright:integration": "playwright test --config playwright.integration.config.ts",
"test:coverage": "vitest run --coverage",
"prepare": "husky"

View File

@@ -0,0 +1,22 @@
import { defineConfig } from '@playwright/test'
const baseURL = process.env.BASE_URL || 'http://localhost:5201'
const port = process.env.BASE_URL?.match(/:(\d+)/)?.[1] || '5201'
export default defineConfig({
testDir: './tests',
timeout: 30_000,
retries: 1,
workers: 1,
grep: /@smoke/,
use: {
baseURL,
headless: true,
},
projects: [{ name: 'chromium', use: { browserName: 'chromium' } }],
webServer: {
command: `pnpm dev --port ${port}`,
url: baseURL,
reuseExistingServer: true,
},
})

View File

@@ -1,61 +0,0 @@
Title/filename sync: derive title from filename, keep in sync via frontmatter
## Goal
Every note has a `title` field in frontmatter that stores the human-readable title with original casing and spacing. The filename is always the slug of the title. The two are kept in sync at all times within Laputa.
## Current state
`extract_title` reads the first H1 heading as the display title, with filename as fallback. This approach is fragile: H1 can diverge from the filename, and using filename directly loses casing information.
## Expected behavior
### Title/filename contract
- `title` frontmatter = human-readable title (e.g. `Career Tracks Depend on Company Shape`)
- filename = slug of title (e.g. `career-tracks-depend-on-company-shape.md`)
- The two are always kept in sync within Laputa
### On note open (sync check)
When Laputa opens a note, it checks for desync:
- If `title` frontmatter is absent → derive title from filename (hyphens → spaces), write it to frontmatter
- If `title` frontmatter is present but its slug doesn't match the filename → **filename wins**: overwrite `title` with the filename-derived value
- If both are in sync → no-op
This means: edits made outside Laputa that change only the filename or only the title frontmatter are auto-corrected on next open. **Filename is the source of truth.**
### On title edit (inside Laputa)
When the user renames a note inside Laputa:
- Update `title` frontmatter to the new value
- Rename the file to the new slug
- Update all wikilinks in the vault (existing rename flow)
### Title display
`extract_title` should read `title` from frontmatter (never from H1). H1 in the body is just content.
## Keyboard access
- No new keyboard interactions — title editing is part of the existing rename flow
- QA: Cmd+P → open note → verify title in header matches frontmatter `title` field
## Edge cases
1. Note has no `title` frontmatter → derive from filename on open (silent, idempotent)
2. `title` frontmatter desync from filename (edited outside Laputa) → filename wins, title overwritten
3. Filename has hyphens that are actual content (e.g. `e2e-test.md`) → becomes `E2e Test` — acceptable tradeoff
4. Fresh note created in Laputa → title set immediately from user input, filename = slug
5. Note renamed outside Laputa (filename changed, title not) → title updated to match new filename on next open
## Acceptance criteria
- [ ] Every note has `title` in frontmatter after being opened in Laputa
- [ ] Filename = slug of `title` at all times within Laputa
- [ ] On open: desync is detected and resolved (filename wins)
- [ ] `extract_title` reads from frontmatter `title`, never H1
- [ ] Rename flow updates both `title` frontmatter and filename atomically
- [ ] **Keyboard access:** open note → rename via title field → file renamed + wikilinks updated
- [ ] No regressions (`pnpm test` + `cargo test` pass)
- [ ] **Native app QA (keyboard only):** Open note → edit title → confirm filename changed + wikilinks updated; then manually desync title in a file → reopen in Laputa → confirm title auto-corrected
---
CONTEXT:
- Worktree: /Users/luca/Workspace/laputa-worktrees/title-filename-sync
- Dev port: 5393 (use --port 5393 when running pnpm dev)
- Run pnpm test before finishing
- Push directly to main when done: git push origin HEAD:main — NEVER open PRs, NEVER --no-verify
- Finish signal: openclaw system event --text 'laputa-task-done:6g9hCFpjP7qRRhqv:title-filename-sync' --mode now
- See CLAUDE.md for all coding guidelines

View File

@@ -48,6 +48,7 @@ pub fn update_menu_state(
has_active_note: bool,
has_modified_files: Option<bool>,
has_conflicts: Option<bool>,
has_restorable_deleted_note: Option<bool>,
) -> Result<(), String> {
menu::set_note_items_enabled(&app_handle, has_active_note);
if let Some(v) = has_modified_files {
@@ -56,6 +57,9 @@ pub fn update_menu_state(
if let Some(v) = has_conflicts {
menu::set_git_conflict_items_enabled(&app_handle, v);
}
if let Some(v) = has_restorable_deleted_note {
menu::set_restore_deleted_item_enabled(&app_handle, v);
}
Ok(())
}
@@ -66,6 +70,7 @@ pub fn update_menu_state(
_has_active_note: bool,
_has_modified_files: Option<bool>,
_has_conflicts: Option<bool>,
_has_restorable_deleted_note: Option<bool>,
) -> Result<(), String> {
Ok(())
}

View File

@@ -38,6 +38,7 @@ const GO_INBOX: &str = "go-inbox";
const NOTE_ARCHIVE: &str = "note-archive";
const NOTE_DELETE: &str = "note-delete";
const NOTE_OPEN_IN_NEW_WINDOW: &str = "note-open-in-new-window";
const NOTE_RESTORE_DELETED: &str = "note-restore-deleted";
const VAULT_OPEN: &str = "vault-open";
const VAULT_REMOVE: &str = "vault-remove";
@@ -79,6 +80,7 @@ const CUSTOM_IDS: &[&str] = &[
NOTE_ARCHIVE,
NOTE_DELETE,
NOTE_OPEN_IN_NEW_WINDOW,
NOTE_RESTORE_DELETED,
VAULT_OPEN,
VAULT_REMOVE,
VAULT_RESTORE_GETTING_STARTED,
@@ -102,6 +104,9 @@ const NOTE_DEPENDENT_IDS: &[&str] = &[
NOTE_OPEN_IN_NEW_WINDOW,
];
/// IDs of menu items that depend on a deleted-note preview being active.
const RESTORE_DELETED_DEPENDENT_IDS: &[&str] = &[NOTE_RESTORE_DELETED];
/// IDs of menu items that depend on having uncommitted changes.
const GIT_COMMIT_DEPENDENT_IDS: &[&str] = &[VAULT_COMMIT_PUSH];
@@ -276,6 +281,10 @@ fn build_note_menu(app: &App) -> MenuResult {
.id(NOTE_DELETE)
.accelerator("CmdOrCtrl+Backspace")
.build(app)?;
let restore_deleted_note = MenuItemBuilder::new("Restore Deleted Note")
.id(NOTE_RESTORE_DELETED)
.enabled(false)
.build(app)?;
let open_new_window = MenuItemBuilder::new("Open in New Window")
.id(NOTE_OPEN_IN_NEW_WINDOW)
.accelerator("CmdOrCtrl+Shift+O")
@@ -295,6 +304,7 @@ fn build_note_menu(app: &App) -> MenuResult {
Ok(SubmenuBuilder::new(app, "Note")
.item(&archive_note)
.item(&delete_note)
.item(&restore_deleted_note)
.separator()
.item(&open_new_window)
.separator()
@@ -421,6 +431,11 @@ pub fn set_git_conflict_items_enabled(app_handle: &AppHandle, enabled: bool) {
set_items_enabled(app_handle, GIT_CONFLICT_DEPENDENT_IDS, enabled);
}
/// Enable or disable menu items that depend on a deleted note preview being active.
pub fn set_restore_deleted_item_enabled(app_handle: &AppHandle, enabled: bool) {
set_items_enabled(app_handle, RESTORE_DELETED_DEPENDENT_IDS, enabled);
}
#[cfg(test)]
mod tests {
use super::*;

View File

@@ -159,7 +159,7 @@ mod tests {
assert!(vault.join("AGENTS.md").exists());
let content = fs::read_to_string(vault.join("AGENTS.md")).unwrap();
assert!(content.contains("Vault Instructions for AI Agents"));
assert!(content.contains("Laputa Vault"));
// Must NOT create config/ directory
assert!(!vault.join("config").exists());
}
@@ -205,7 +205,7 @@ mod tests {
seed_config_files(vault.to_str().unwrap());
let content = fs::read_to_string(vault.join("AGENTS.md")).unwrap();
assert!(content.contains("Vault Instructions for AI Agents"));
assert!(content.contains("Laputa Vault"));
}
#[test]
@@ -272,7 +272,7 @@ mod tests {
assert!(vault.join("AGENTS.md").exists());
let root = fs::read_to_string(vault.join("AGENTS.md")).unwrap();
assert!(root.contains("Vault Instructions"));
assert!(root.contains("Laputa Vault"));
}
#[test]
@@ -305,7 +305,7 @@ mod tests {
assert!(!vault.join("config").exists());
let agents = fs::read_to_string(vault.join("AGENTS.md")).unwrap();
assert!(agents.contains("Vault Instructions for AI Agents"));
assert!(agents.contains("Laputa Vault"));
}
#[test]

View File

@@ -18,103 +18,91 @@ struct SampleFile {
content: &'static str,
}
/// Content for config/agents.md — vault instructions for AI agents.
/// This file has no YAML frontmatter — it is a convention file for AI agents,
/// not a vault note. The vault scanner will still pick it up as a regular entry.
pub(super) const AGENTS_MD: &str = r#"# AGENTS.md — Vault Instructions for AI Agents
/// Default AGENTS.md content — vault instructions for AI agents.
/// Describes Laputa vault mechanics only; no vault-specific structure.
/// The vault scanner will pick this up as a regular entry.
pub(super) const AGENTS_MD: &str = r##"# AGENTS.md — Laputa Vault
This is a [Laputa](https://github.com/refactoring-ai/laputa) vault — a folder of markdown files with YAML frontmatter that form a personal knowledge graph.
This is a [Laputa](https://github.com/refactoringhq/laputa-app) vault — a folder of markdown files with YAML frontmatter forming a personal knowledge graph.
## Structure
## Note structure
Files are organized in folders by type:
| Folder | Type | Purpose |
|--------|------|---------|
| `note/` | Note | General-purpose documents, research, meeting notes |
| `project/` | Project | Time-bounded efforts with clear goals |
| `person/` | Person | People — colleagues, collaborators, contacts |
| `topic/` | Topic | Subject areas that group related notes |
| `responsibility/` | Responsibility | Long-running duties with KPIs |
| `procedure/` | Procedure | Recurring workflows (weekly, monthly) |
| `event/` | Event | Something that happened on a specific date |
| `quarter/` | Quarter | Time containers (e.g. 24Q1) |
| `measure/` | Measure | Trackable metrics tied to responsibilities |
| `target/` | Target | Time-bound goals for a measure |
| `type/` | Type | Type definitions — icon, color, ordering |
Custom folders are valid — the folder name becomes the type (capitalized).
## Frontmatter
YAML frontmatter between `---` delimiters defines metadata:
Every note is a markdown file. The **first H1 heading in the body is the title** — there is no `title:` frontmatter field.
```yaml
---
type: Project
Status: Active
Owner: "[[person/jane-doe]]"
Belongs to: "[[quarter/24q1]]"
Related to:
- "[[topic/growth]]"
- "[[note/research-findings]]"
is_a: TypeName # the note's type (must match the title of a type file in the vault)
url: https://... # example property
belongs_to: "[[other-note]]"
related_to:
- "[[note-a]]"
- "[[note-b]]"
---
# Note Title
Body content in markdown.
```
### Standard fields
System properties are prefixed with `_` (e.g. `_organized`, `_pinned`, `_icon`) — these are app-managed, do not set or show them to users unless specifically asked.
| Field | Purpose |
|-------|---------|
| `type` | Entity type (usually inferred from folder) |
| `Status` | Active, Done, Paused, Archived, Dropped |
| `Owner` | Person responsible (wikilink) |
| `Belongs to` | Parent relationship(s) |
| `Related to` | Lateral associations |
| `Cadence` | For Procedures: Weekly, Monthly, etc. |
| `aliases` | Alternative names for wikilink resolution |
## Types
### Custom fields
Any YAML field containing `[[wikilinks]]` becomes a navigable relationship:
A type is a note with `is_a: Type`. Type files live in the vault root:
```yaml
Has Measures: ["[[measure/revenue]]", "[[measure/churn]]"]
Resources: "[[note/api-docs]]"
---
is_a: Type
_icon: books # Phosphor icon name in kebab-case
_color: "#8b5cf6" # hex color
---
# TypeName
```
To find what types exist: look for files with `is_a: Type` in the vault root.
## Relationships
Any frontmatter property whose value is a wikilink is a relationship. Backlinks are computed automatically.
Standard names: `belongs_to`, `related_to`, `has`. Custom names are valid.
## Wikilinks
Connect notes with double-bracket syntax:
- `[[filename]]` or `[[Note Title]]` — link by filename or title
- `[[filename|display text]]` — with custom display text
- Works in frontmatter values and markdown body
- `[[note/my-note]]` — link by path
- `[[My Note Title]]` — link by title or alias
- `[[note/my-note|display text]]` — link with custom display text
## Views
Wikilinks work in both frontmatter values and markdown body. Backlinks are computed automatically — linking A to B makes B show a backlink to A.
Saved filters live in `views/` as `.view.json` files:
## Type definitions
Files in `type/` define entity types and control how they appear in the sidebar:
```yaml
---
type: Type
icon: rocket-launch
color: purple
order: 1
---
```json
{
"title": "Active Notes",
"filters": [
{"property": "is_a", "operator": "equals", "value": "Note"},
{"property": "status", "operator": "equals", "value": "Active"}
],
"sort": {"property": "title", "direction": "asc"}
}
```
Available colors: red, purple, blue, green, yellow, orange. Icons are Phosphor names in kebab-case.
## Filenames
## Conventions
Use kebab-case: `my-note-title.md`. One note per file.
- First `# Heading` in a file becomes its title
- One entity per file
- Filenames use kebab-case: `my-note-title.md`
- Type is inferred from parent folder if not set in frontmatter
- Relationships are bidirectional via automatic backlinks
"#;
## What you can do
- Create/edit notes with correct frontmatter and H1 title
- Create new type files
- Add or modify relationships
- Create/edit views in `views/`
- Edit `AGENTS.md` (this file)
Do not modify app configuration files — those are local to each installation.
"##;
const SAMPLE_FILES: &[SampleFile] = &[
SampleFile {
@@ -519,12 +507,12 @@ mod tests {
assert!(agents_path.exists(), "AGENTS.md should exist at vault root");
let content = fs::read_to_string(&agents_path).unwrap();
assert!(content.contains("Vault Instructions for AI Agents"));
assert!(content.contains("## Structure"));
assert!(content.contains("## Frontmatter"));
assert!(content.contains("Laputa Vault"));
assert!(content.contains("## Note structure"));
assert!(content.contains("## Types"));
assert!(content.contains("## Wikilinks"));
assert!(content.contains("## Type definitions"));
assert!(content.contains("## Conventions"));
assert!(content.contains("## Relationships"));
assert!(content.contains("## Views"));
// Must NOT be a stub
assert!(
!content.contains("See config/agents.md"),
@@ -540,10 +528,7 @@ mod tests {
let entry = crate::vault::parse_md_file(&vault_path.join("AGENTS.md"), None).unwrap();
// H1 is now the primary title source
assert_eq!(
entry.title,
"AGENTS.md \u{2014} Vault Instructions for AI Agents"
);
assert_eq!(entry.title, "AGENTS.md \u{2014} Laputa Vault");
// Config files have no frontmatter type field — type is None
assert_eq!(entry.is_a, None);
}

View File

@@ -1,6 +1,7 @@
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Sidebar } from './components/Sidebar'
import { NoteList } from './components/NoteList'
import type { DeletedNoteEntry } from './components/note-list/noteListUtils'
import { Editor } from './components/Editor'
import { ResizeHandle } from './components/ResizeHandle'
import { CreateTypeDialog } from './components/CreateTypeDialog'
@@ -59,6 +60,7 @@ import { isNoteWindow, getNoteWindowParams } from './utils/windowMode'
import { GitRequiredModal } from './components/GitRequiredModal'
import { RenameDetectedBanner, type DetectedRename } from './components/RenameDetectedBanner'
import { trackEvent } from './lib/telemetry'
import { extractDeletedContentFromDiff } from './components/note-list/noteListUtils'
import './App.css'
// Type declarations for mock content storage and test overrides
@@ -313,18 +315,48 @@ function App() {
}, [resolvedPath])
const handleDiscardFile = useCallback(async (relativePath: string) => {
const targetFile = vault.modifiedFiles.find((file) => file.relativePath === relativePath)
const activePathBefore = notes.activeTabPath
try {
if (isTauri()) {
await invoke('git_discard_file', { vaultPath: resolvedPath, relativePath })
} else {
await mockInvoke('git_discard_file', { vaultPath: resolvedPath, relativePath })
}
await vault.loadModifiedFiles()
await vault.reloadVault()
const reloadedEntries = await vault.reloadVault()
const affectedActiveTab = !!activePathBefore
&& (activePathBefore === targetFile?.path || activePathBefore.endsWith('/' + relativePath))
if (!affectedActiveTab) return
const refreshedEntry = reloadedEntries.find((entry) =>
entry.path === targetFile?.path || entry.path.endsWith('/' + relativePath),
)
if (refreshedEntry) {
await notes.handleReplaceActiveTab(refreshedEntry)
} else {
notes.closeAllTabs()
}
} catch (err) {
setToastMessage(typeof err === 'string' ? err : 'Failed to discard changes')
}
}, [resolvedPath, vault, setToastMessage])
}, [resolvedPath, vault, notes, setToastMessage])
const handleOpenDeletedNote = useCallback(async (entry: DeletedNoteEntry) => {
let previewContent = 'Content not available (untracked)'
let hasDiff = false
try {
const diff = await vault.loadDiff(entry.path)
hasDiff = diff.length > 0
previewContent = extractDeletedContentFromDiff(diff) ?? previewContent
} catch (err) {
console.warn('Failed to load deleted note preview:', err)
}
notes.openTabWithContent(entry, previewContent)
if (hasDiff) {
setTimeout(() => diffToggleRef.current(), 50)
} else {
setToastMessage('Content not available (untracked)')
}
}, [vault, notes, setToastMessage])
const commitFlow = useCommitFlow({ savePending: appSave.savePending, loadModifiedFiles: vault.loadModifiedFiles, commitAndPush: vault.commitAndPush, setToastMessage, onPushRejected: autoSync.handlePushRejected })
const suggestedCommitMessage = useMemo(() => generateCommitMessage(vault.modifiedFiles), [vault.modifiedFiles])
@@ -398,17 +430,6 @@ function App() {
return [...builtIn, ...Array.from(customFields).sort()]
}, [vault.entries])
const valueSuggestionsForField = useCallback((field: string): string[] => {
if (!vault.entries?.length) return []
const values = new Set<string>()
for (const e of vault.entries) {
if (field === 'type' && e.isA) values.add(e.isA)
else if (field === 'status' && e.status) values.add(e.status)
else if (e.properties?.[field] != null) values.add(String(e.properties[field]))
}
return Array.from(values).sort()
}, [vault.entries])
const bulkActions = useBulkActions(entryActions, setToastMessage)
// Raw-toggle ref: Editor registers its handleToggleRaw here so the command palette can call it
@@ -451,6 +472,15 @@ function App() {
}
}, [resolvedPath, vault, setToastMessage])
const activeDeletedFile = useMemo(() => {
const activeTabPath = notes.activeTabPath
if (!activeTabPath) return null
return vault.modifiedFiles.find((file) =>
file.status === 'deleted'
&& (file.path === activeTabPath || activeTabPath.endsWith('/' + file.relativePath)),
) ?? null
}, [notes.activeTabPath, vault.modifiedFiles])
const commands = useAppCommands({
activeTabPath: notes.activeTabPath, activeTabPathRef: notes.activeTabPathRef,
entries: vault.entries,
@@ -473,7 +503,7 @@ function App() {
onSetViewMode: setViewMode,
onToggleInspector: () => layout.setInspectorCollapsed(c => !c),
onToggleDiff: () => diffToggleRef.current(),
onToggleRawEditor: () => rawToggleRef.current(),
onToggleRawEditor: activeDeletedFile ? undefined : () => rawToggleRef.current(),
onZoomIn: zoom.zoomIn, onZoomOut: zoom.zoomOut, onZoomReset: zoom.zoomReset,
zoomLevel: zoom.zoomLevel,
onSelect: handleSetSelection,
@@ -506,6 +536,8 @@ function App() {
onOpenInNewWindow: handleOpenInNewWindow,
onToggleFavorite: entryActions.handleToggleFavorite,
onToggleOrganized: entryActions.handleToggleOrganized,
onRestoreDeletedNote: activeDeletedFile ? () => { void handleDiscardFile(activeDeletedFile.relativePath) } : undefined,
canRestoreDeletedNote: !!activeDeletedFile,
})
const activeTab = notes.tabs.find((t) => t.entry.path === notes.activeTabPath) ?? null
@@ -518,7 +550,7 @@ function App() {
return filtered.map(e => ({
path: e.path, title: e.title, type: e.isA ?? 'Note',
}))
}, [vault.entries, selection, inboxPeriod])
}, [vault.entries, vault.views, selection, inboxPeriod])
const aiNoteListFilter = useMemo(() => {
if (selection.kind === 'sectionGroup') return { type: selection.type, query: '' }
@@ -585,7 +617,7 @@ function App() {
{selection.kind === 'filter' && selection.filter === 'pulse' ? (
<PulseView vaultPath={resolvedPath} onOpenNote={vaultBridge.handlePulseOpenNote} sidebarCollapsed={!sidebarVisible} onExpandSidebar={() => setViewMode('all')} />
) : (
<NoteList entries={vault.entries} selection={selection} selectedNote={activeTab?.entry ?? null} noteListFilter={noteListFilter} onNoteListFilterChange={setNoteListFilter} inboxPeriod={inboxPeriod} modifiedFiles={vault.modifiedFiles} modifiedFilesError={vault.modifiedFilesError} getNoteStatus={vault.getNoteStatus} sidebarCollapsed={!sidebarVisible} onSelectNote={notes.handleSelectNote} onReplaceActiveTab={notes.handleReplaceActiveTab} onCreateNote={notes.handleCreateNoteImmediate} onBulkArchive={bulkActions.handleBulkArchive} onBulkDeletePermanently={deleteActions.handleBulkDeletePermanently} onUpdateTypeSort={notes.handleUpdateFrontmatter} updateEntry={vault.updateEntry} onOpenInNewWindow={handleOpenEntryInNewWindow} onDiscardFile={handleDiscardFile} onAutoTriggerDiff={() => diffToggleRef.current()} views={vault.views} visibleNotesRef={visibleNotesRef} />
<NoteList entries={vault.entries} selection={selection} selectedNote={activeTab?.entry ?? null} noteListFilter={noteListFilter} onNoteListFilterChange={setNoteListFilter} inboxPeriod={inboxPeriod} modifiedFiles={vault.modifiedFiles} modifiedFilesError={vault.modifiedFilesError} getNoteStatus={vault.getNoteStatus} sidebarCollapsed={!sidebarVisible} onSelectNote={notes.handleSelectNote} onReplaceActiveTab={notes.handleReplaceActiveTab} onCreateNote={notes.handleCreateNoteImmediate} onBulkArchive={bulkActions.handleBulkArchive} onBulkDeletePermanently={deleteActions.handleBulkDeletePermanently} onUpdateTypeSort={notes.handleUpdateFrontmatter} updateEntry={vault.updateEntry} onOpenInNewWindow={handleOpenEntryInNewWindow} onDiscardFile={handleDiscardFile} onAutoTriggerDiff={() => diffToggleRef.current()} onOpenDeletedNote={handleOpenDeletedNote} views={vault.views} visibleNotesRef={visibleNotesRef} />
)}
</div>
<ResizeHandle onResize={layout.handleNoteListResize} />
@@ -618,14 +650,14 @@ function App() {
vaultPath={resolvedPath}
noteList={aiNoteList}
noteListFilter={aiNoteListFilter}
onToggleFavorite={entryActions.handleToggleFavorite}
onToggleOrganized={entryActions.handleToggleOrganized}
onDeleteNote={deleteActions.handleDeleteNote}
onArchiveNote={entryActions.handleArchiveNote}
onUnarchiveNote={entryActions.handleUnarchiveNote}
onToggleFavorite={activeDeletedFile ? undefined : entryActions.handleToggleFavorite}
onToggleOrganized={activeDeletedFile ? undefined : entryActions.handleToggleOrganized}
onDeleteNote={activeDeletedFile ? undefined : deleteActions.handleDeleteNote}
onArchiveNote={activeDeletedFile ? undefined : entryActions.handleArchiveNote}
onUnarchiveNote={activeDeletedFile ? undefined : entryActions.handleUnarchiveNote}
onContentChange={appSave.handleContentChange}
onSave={appSave.handleSave}
onTitleSync={appSave.handleTitleSync}
onTitleSync={activeDeletedFile ? undefined : appSave.handleTitleSync}
rawToggleRef={rawToggleRef}
diffToggleRef={diffToggleRef}
canGoBack={canGoBack}
@@ -636,8 +668,8 @@ function App() {
onFileCreated={vaultBridge.handleAgentFileCreated}
onFileModified={vaultBridge.handleAgentFileModified}
onVaultChanged={vaultBridge.handleAgentVaultChanged}
onSetNoteIcon={handleSetNoteIcon}
onRemoveNoteIcon={handleRemoveNoteIcon}
onSetNoteIcon={activeDeletedFile ? undefined : handleSetNoteIcon}
onRemoveNoteIcon={activeDeletedFile ? undefined : handleRemoveNoteIcon}
isConflicted={conflictFlow.isConflicted}
onKeepMine={conflictFlow.handleKeepMine}
onKeepTheirs={conflictFlow.handleKeepTheirs}
@@ -652,7 +684,7 @@ function App() {
<CommandPalette open={dialogs.showCommandPalette} commands={commands} onClose={dialogs.closeCommandPalette} />
<SearchPanel open={dialogs.showSearch} vaultPath={resolvedPath} entries={vault.entries} onSelectNote={notes.handleSelectNote} onClose={dialogs.closeSearch} />
<CreateTypeDialog open={dialogs.showCreateTypeDialog} onClose={dialogs.closeCreateType} onCreate={handleCreateType} />
<CreateViewDialog open={dialogs.showCreateViewDialog} onClose={dialogs.closeCreateView} onCreate={handleCreateOrUpdateView} availableFields={availableFields} valueSuggestions={valueSuggestionsForField} entries={vault.entries} editingView={dialogs.editingView?.definition ?? null} />
<CreateViewDialog open={dialogs.showCreateViewDialog} onClose={dialogs.closeCreateView} onCreate={handleCreateOrUpdateView} availableFields={availableFields} editingView={dialogs.editingView?.definition ?? null} />
<CommitDialog open={commitFlow.showCommitDialog} modifiedCount={vault.modifiedFiles.length} suggestedMessage={suggestedCommitMessage} onCommit={commitFlow.handleCommitPush} onClose={commitFlow.closeCommitDialog} />
<ConflictResolverModal
open={dialogs.showConflictResolver}

View File

@@ -1,49 +1,49 @@
import { useState, useRef, useEffect, useCallback } from 'react'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { FilterBuilder } from './FilterBuilder'
import { EmojiPicker } from './EmojiPicker'
import type { FilterGroup, ViewDefinition, VaultEntry } from '../types'
import type { FilterGroup, ViewDefinition } from '../types'
interface CreateViewDialogProps {
open: boolean
onClose: () => void
onCreate: (definition: ViewDefinition) => void
availableFields: string[]
/** Returns known values for a given field (for autocomplete). */
valueSuggestions?: (field: string) => string[]
/** Vault entries for wikilink autocomplete in filter value fields. */
entries?: VaultEntry[]
/** When provided, the dialog operates in edit mode with pre-populated fields. */
editingView?: ViewDefinition | null
}
export function CreateViewDialog({ open, onClose, onCreate, availableFields, valueSuggestions, entries, editingView }: CreateViewDialogProps) {
const [name, setName] = useState('')
const [icon, setIcon] = useState('')
interface CreateViewDialogFormProps {
availableFields: string[]
initialName: string
initialIcon: string
initialFilters: FilterGroup
isEditing: boolean
onClose: () => void
onCreate: (definition: ViewDefinition) => void
}
function CreateViewDialogForm({
availableFields,
initialName,
initialIcon,
initialFilters,
isEditing,
onClose,
onCreate,
}: CreateViewDialogFormProps) {
const [name, setName] = useState(initialName)
const [icon, setIcon] = useState(initialIcon)
const [showEmojiPicker, setShowEmojiPicker] = useState(false)
const [filters, setFilters] = useState<FilterGroup>({
all: [{ field: 'type', op: 'equals', value: '' }],
})
const [filters, setFilters] = useState<FilterGroup>(initialFilters)
const inputRef = useRef<HTMLInputElement>(null)
const isEditing = !!editingView
useEffect(() => {
if (open) {
if (editingView) {
setName(editingView.name) // eslint-disable-line react-hooks/set-state-in-effect -- populate on dialog open
setIcon(editingView.icon ?? '') // eslint-disable-line react-hooks/set-state-in-effect -- populate on dialog open
setFilters(editingView.filters) // eslint-disable-line react-hooks/set-state-in-effect -- populate on dialog open
} else {
setName('') // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
setIcon('') // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
setFilters({ all: [{ field: availableFields[0] ?? 'type', op: 'equals', value: '' }] }) // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
}
setShowEmojiPicker(false) // eslint-disable-line react-hooks/set-state-in-effect -- reset on dialog open
setTimeout(() => inputRef.current?.focus(), 50)
}
}, [open, availableFields, editingView])
const timeoutId = window.setTimeout(() => inputRef.current?.focus(), 50)
return () => window.clearTimeout(timeoutId)
}, [])
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
@@ -69,53 +69,77 @@ export function CreateViewDialog({ open, onClose, onCreate, availableFields, val
setShowEmojiPicker(false)
}, [])
const isCreateDisabled = !name.trim()
return (
<form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col gap-4">
<div className="flex gap-2">
<div className="w-16 space-y-1.5 relative">
<label className="text-xs font-medium text-muted-foreground">Icon</label>
<button
type="button"
className="flex h-9 w-full items-center justify-center rounded-md border border-input bg-background text-xl cursor-pointer hover:bg-accent transition-colors"
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
title="Pick icon"
>
{icon || <span className="text-sm text-muted-foreground">📋</span>}
</button>
{showEmojiPicker && (
<EmojiPicker onSelect={handleSelectEmoji} onClose={handleCloseEmojiPicker} />
)}
</div>
<div className="flex-1 space-y-1.5">
<label className="text-xs font-medium text-muted-foreground">Name</label>
<Input
ref={inputRef}
placeholder="e.g. Active Projects, Reading List..."
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
</div>
<div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto">
<label className="text-xs font-medium text-muted-foreground">Filters</label>
<FilterBuilder
group={filters}
onChange={setFilters}
availableFields={availableFields}
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
<Button type="submit" disabled={isCreateDisabled}>{isEditing ? 'Save' : 'Create'}</Button>
</DialogFooter>
</form>
)
}
export function CreateViewDialog({ open, onClose, onCreate, availableFields, editingView }: CreateViewDialogProps) {
const isEditing = !!editingView
const initialFilters = editingView?.filters ?? { all: [{ field: availableFields[0] ?? 'type', op: 'equals', value: '' }] }
const formKey = editingView ? `edit:${editingView.name}` : `create:${availableFields[0] ?? 'type'}`
return (
<Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
<DialogContent showCloseButton={false} className="flex max-h-[80vh] flex-col sm:max-w-[600px]">
<DialogHeader>
<DialogTitle>{isEditing ? 'Edit View' : 'Create View'}</DialogTitle>
<DialogDescription className="sr-only">
{isEditing ? 'Update the name, icon, and filters for this saved view.' : 'Create a saved view by choosing a name, icon, and filter rules.'}
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col gap-4">
<div className="flex gap-2">
<div className="w-16 space-y-1.5 relative">
<label className="text-xs font-medium text-muted-foreground">Icon</label>
<button
type="button"
className="flex h-9 w-full items-center justify-center rounded-md border border-input bg-background text-xl cursor-pointer hover:bg-accent transition-colors"
onClick={() => setShowEmojiPicker(!showEmojiPicker)}
title="Pick icon"
>
{icon || <span className="text-sm text-muted-foreground">📋</span>}
</button>
{showEmojiPicker && (
<EmojiPicker onSelect={handleSelectEmoji} onClose={handleCloseEmojiPicker} />
)}
</div>
<div className="flex-1 space-y-1.5">
<label className="text-xs font-medium text-muted-foreground">Name</label>
<Input
ref={inputRef}
placeholder="e.g. Active Projects, Reading List..."
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
</div>
<div className="min-h-0 flex-1 space-y-1.5 overflow-y-auto">
<label className="text-xs font-medium text-muted-foreground">Filters</label>
<FilterBuilder
group={filters}
onChange={setFilters}
availableFields={availableFields}
valueSuggestions={valueSuggestions}
entries={entries}
/>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
<Button type="submit" disabled={!name.trim()}>{isEditing ? 'Save' : 'Create'}</Button>
</DialogFooter>
</form>
{open && (
<CreateViewDialogForm
key={formKey}
availableFields={availableFields}
initialName={editingView?.name ?? ''}
initialIcon={editingView?.icon ?? ''}
initialFilters={initialFilters}
isEditing={isEditing}
onClose={onClose}
onCreate={onCreate}
/>
)}
</DialogContent>
</Dialog>
)

View File

@@ -617,6 +617,43 @@ describe('DynamicPropertiesPanel', () => {
fireEvent.click(screen.getByText('Status'))
expect(onAddProperty).toHaveBeenCalledWith('Status', '')
})
it('auto-opens editor when property appears after clicking suggested slot', () => {
const addProp = vi.fn()
const { rerender } = render(
<DynamicPropertiesPanel
entry={makeEntry()}
content=""
frontmatter={{}}
onAddProperty={addProp}
onUpdateProperty={onUpdateProperty}
/>
)
// Click the Status suggested slot
fireEvent.click(screen.getByText('Status'))
expect(addProp).toHaveBeenCalledWith('Status', '')
// Simulate the frontmatter being updated (as if the backend wrote it)
// The useEffect detects the new key in propertyEntries and sets editingKey
rerender(
<DynamicPropertiesPanel
entry={makeEntry()}
content=""
frontmatter={{ Status: '' }}
onAddProperty={addProp}
onUpdateProperty={onUpdateProperty}
/>
)
// The suggested slot for Status should be gone
const remainingSlots = screen.getAllByTestId('suggested-property')
expect(remainingSlots.length).toBe(2) // Date and URL remain
// Status dropdown is portaled to body — check for it there
const dropdown = document.querySelector('[data-testid="status-dropdown-popover"]')
expect(dropdown).toBeInTheDocument()
const searchInput = document.querySelector('[data-testid="status-search-input"]')
expect(searchInput).toBeInTheDocument()
})
})
describe('URL property rendering', () => {

View File

@@ -115,9 +115,9 @@ export function DynamicPropertiesPanel({
const handleSuggestedAdd = useCallback((key: string) => {
if (!onAddProperty) return
// Open the editor immediately - no need to wait for frontmatter to update
setEditingKey(key)
onAddProperty(key, '')
// Auto-focus the new property value
setTimeout(() => setEditingKey(key), 0)
}, [onAddProperty, setEditingKey])
return (

View File

@@ -361,13 +361,13 @@
margin-top: 2px;
}
/* When TitleField is shown (no H1 in body), hide the first H1 heading in
BlockNote to avoid duplicate title display. When hasH1 is set, the
TitleField is hidden and the H1 in the editor serves as the title. */
.title-section:not([data-has-h1]) ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child [data-content-type="heading"][data-level="1"] {
/* When the legacy title UI is shown, hide the first H1 heading in BlockNote
to avoid duplicate title display. Otherwise the editor's H1 remains visible
and serves as the title surface. */
.title-section[data-title-ui-visible] ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child [data-content-type="heading"][data-level="1"] {
display: none;
}
.title-section:not([data-has-h1]) ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child:has([data-content-type="heading"][data-level="1"]) {
.title-section[data-title-ui-visible] ~ .editor__blocknote-container [data-node-type="blockContainer"]:first-child:has([data-content-type="heading"][data-level="1"]) {
display: none;
}

View File

@@ -182,6 +182,33 @@ describe('Editor', () => {
expect(screen.getByTestId('blocknote-view')).toBeInTheDocument()
})
it('hides the legacy title field for untitled draft notes', () => {
const draftEntry: VaultEntry = {
...mockEntry,
path: '/vault/untitled-note-1700000000.md',
filename: 'untitled-note-1700000000.md',
title: 'Untitled Note 1700000000',
hasH1: false,
}
const draftTab = {
entry: draftEntry,
content: '---\ntype: Note\nstatus: Active\n---\n',
}
render(
<Editor
{...defaultProps}
tabs={[draftTab]}
activeTabPath={draftEntry.path}
entries={[draftEntry]}
getNoteStatus={() => 'unsaved'}
/>
)
expect(screen.queryByTestId('title-field-input')).not.toBeInTheDocument()
expect(screen.getByTestId('blocknote-view')).toBeInTheDocument()
})
it('renders diff toggle button when file is modified', () => {
render(
<Editor

View File

@@ -124,7 +124,7 @@ function bindPath(cb: ((path: string) => void) | undefined, path: string) {
function ActiveTabBreadcrumb({ activeTab, barRef, props }: {
activeTab: Tab
barRef: React.RefObject<HTMLDivElement | null>
props: Omit<EditorContentProps, 'activeTab' | 'isLoadingNewTab' | 'entries' | 'editor' | 'onNavigateWikilink' | 'onEditorChange' | 'onRawContentChange' | 'onSave'> & { forceRawMode?: boolean }
props: Omit<EditorContentProps, 'activeTab' | 'isLoadingNewTab' | 'entries' | 'editor' | 'onNavigateWikilink' | 'onEditorChange' | 'onRawContentChange' | 'onSave' | 'activeStatus'> & { forceRawMode?: boolean }
}) {
const wordCount = countWords(activeTab.content)
const path = activeTab.entry.path
@@ -157,6 +157,7 @@ export function EditorContent({
activeTab, isLoadingNewTab, entries, editor,
diffMode, diffContent, onToggleDiff,
rawMode, onToggleRaw, onRawContentChange, onSave,
activeStatus,
onNavigateWikilink, onEditorChange, vaultPath,
rawLatestContentRef, onTitleChange,
onSetNoteIcon, onRemoveNoteIcon,
@@ -167,12 +168,17 @@ export function EditorContent({
const freshEntry = activeTab ? entries.find(e => e.path === activeTab.entry.path) : undefined
const isArchived = freshEntry?.archived ?? activeTab?.entry.archived ?? false
const hasH1 = freshEntry?.hasH1 ?? activeTab?.entry.hasH1 ?? false
const isDeletedPreview = !!activeTab && !freshEntry
// Non-markdown text files always use the raw editor (no BlockNote)
const isNonMarkdownText = activeTab?.entry.fileKind === 'text'
const effectiveRawMode = rawMode || isNonMarkdownText
const showEditor = !diffMode && !effectiveRawMode
const entryIcon = activeTab?.entry.icon ?? null
const emojiIcon = entryIcon && isEmoji(entryIcon) ? entryIcon : null
const isUntitledDraft = !!activeTab
&& activeTab.entry.filename.startsWith('untitled-')
&& (activeStatus === 'new' || activeStatus === 'unsaved' || activeStatus === 'pendingSave')
const showTitleSection = !isDeletedPreview && !hasH1 && !isUntitledDraft
const titleSectionRef = useRef<HTMLDivElement | null>(null)
const breadcrumbBarRef = useRef<HTMLDivElement | null>(null)
@@ -217,7 +223,7 @@ export function EditorContent({
<ActiveTabBreadcrumb
activeTab={activeTab}
barRef={breadcrumbBarRef}
props={{ diffMode, diffContent, onToggleDiff, rawMode: effectiveRawMode, onToggleRaw, forceRawMode: isNonMarkdownText, ...breadcrumbProps }}
props={{ diffMode, diffContent, onToggleDiff, rawMode: effectiveRawMode, onToggleRaw, forceRawMode: isNonMarkdownText || isDeletedPreview, ...breadcrumbProps }}
/>
{isArchived && breadcrumbProps.onUnarchiveNote && (
<ArchivedNoteBanner onUnarchive={() => breadcrumbProps.onUnarchiveNote!(path)} />
@@ -233,8 +239,8 @@ export function EditorContent({
{showEditor && (
<div className="editor-scroll-area" style={cssVars as React.CSSProperties}>
<div className="editor-content-wrapper">
<div ref={titleSectionRef} className="title-section" data-has-h1={hasH1 || undefined}>
{!hasH1 && (
<div ref={titleSectionRef} className="title-section" data-title-ui-visible={showTitleSection || undefined}>
{showTitleSection && (
<>
{!emojiIcon && (
<div className="title-section__add-icon">
@@ -258,7 +264,7 @@ export function EditorContent({
</>
)}
</div>
<SingleEditorView editor={editor} entries={entries} onNavigateWikilink={onNavigateWikilink} onChange={onEditorChange} vaultPath={vaultPath} editable />
<SingleEditorView editor={editor} entries={entries} onNavigateWikilink={onNavigateWikilink} onChange={onEditorChange} vaultPath={vaultPath} editable={!isDeletedPreview} />
</div>
</div>
)}

View File

@@ -1,48 +1,16 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import { FilterBuilder } from './FilterBuilder'
import type { FilterGroup, VaultEntry } from '../types'
import type { FilterGroup } from '../types'
const makeEntry = (overrides: Partial<VaultEntry> = {}): VaultEntry => ({
path: '/vault/note/test.md',
filename: 'test.md',
title: 'Test Note',
isA: 'Note',
aliases: [],
belongsTo: [],
relatedTo: [],
status: 'Active',
owner: null,
cadence: null,
archived: false,
modifiedAt: 1700000000,
createdAt: 1700000000,
fileSize: 100,
snippet: '',
wordCount: 0,
relationships: {},
icon: null,
color: null,
order: null,
...overrides,
})
const entries: VaultEntry[] = [
makeEntry({ path: '/vault/project/alpha.md', filename: 'alpha.md', title: 'Alpha Project', isA: 'Project' }),
makeEntry({ path: '/vault/person/luca.md', filename: 'luca.md', title: 'Luca', isA: 'Person' }),
makeEntry({ path: '/vault/topic/ai.md', filename: 'ai.md', title: 'AI Research', isA: 'Topic' }),
makeEntry({ path: '/vault/note/plain.md', filename: 'plain.md', title: 'Plain Note', isA: null }),
makeEntry({ path: '/vault/person/alice.md', filename: 'alice.md', title: 'Alice Smith', isA: 'Person', aliases: ['Alice'] }),
]
describe('FilterBuilder wikilink autocomplete', () => {
describe('FilterBuilder value inputs', () => {
const onChange = vi.fn()
beforeEach(() => {
vi.clearAllMocks()
})
function renderWithEntries(group?: FilterGroup) {
function renderBuilder(group?: FilterGroup) {
const defaultGroup: FilterGroup = {
all: [{ field: 'title', op: 'contains', value: '' }],
}
@@ -51,159 +19,67 @@ describe('FilterBuilder wikilink autocomplete', () => {
group={group ?? defaultGroup}
onChange={onChange}
availableFields={['type', 'status', 'title']}
entries={entries}
/>,
)
}
it('renders value input with wikilink support when entries are provided', () => {
renderWithEntries()
it('renders a plain text input for text operators', () => {
renderBuilder()
expect(screen.getByTestId('filter-value-input')).toBeInTheDocument()
expect(screen.getByTestId('filter-value-input')).toHaveAttribute('placeholder', 'value')
})
it('does not show dropdown for plain text input', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: 'hello' }],
it('keeps wikilink-style values in the plain text input without opening a dropdown', () => {
renderBuilder({
all: [{ field: 'belongs to', op: 'contains', value: '[[Alpha Project]]' }],
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
expect(input).toHaveValue('[[Alpha Project]]')
expect(screen.queryByTestId('wikilink-dropdown')).not.toBeInTheDocument()
})
it('shows dropdown when value starts with [[', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[Al' }],
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
expect(screen.getByTestId('wikilink-dropdown')).toBeInTheDocument()
expect(screen.getByText('Alpha Project')).toBeInTheDocument()
expect(screen.getByText('Alice Smith')).toBeInTheDocument()
})
it('updates filter values as raw text strings', () => {
renderBuilder()
it('does not show dropdown for short queries after [[', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[A' }],
fireEvent.change(screen.getByTestId('filter-value-input'), {
target: { value: 'plain text' },
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
expect(screen.queryByTestId('wikilink-dropdown')).not.toBeInTheDocument()
})
it('inserts [[stem|title]] when a note is selected', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[Alpha' }],
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
fireEvent.click(screen.getByText('Alpha Project'))
expect(onChange).toHaveBeenCalledWith(
expect.objectContaining({
all: [{ field: 'title', op: 'contains', value: '[[alpha|Alpha Project]]' }],
all: [{ field: 'title', op: 'contains', value: 'plain text' }],
}),
)
})
it('navigates dropdown with arrow keys and selects with Enter', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[Al' }],
it('does not render a value input for empty-check operators', () => {
renderBuilder({
all: [{ field: 'title', op: 'is_empty' }],
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
fireEvent.keyDown(input, { key: 'ArrowDown' })
const selected = document.querySelector('.wikilink-menu__item--selected')
expect(selected).toBeTruthy()
fireEvent.keyDown(input, { key: 'Enter' })
expect(onChange).toHaveBeenCalled()
})
it('closes dropdown on Escape', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[Al' }],
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
expect(screen.getByTestId('wikilink-dropdown')).toBeInTheDocument()
fireEvent.keyDown(input, { key: 'Escape' })
expect(screen.queryByTestId('wikilink-dropdown')).not.toBeInTheDocument()
})
it('matches on aliases', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[Alice' }],
})
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
expect(screen.getByText('Alice Smith')).toBeInTheDocument()
})
it('shows type badge for typed entries', () => {
const personType = makeEntry({
path: '/vault/person.md', filename: 'person.md', title: 'Person',
isA: 'Type', color: 'yellow', icon: 'user',
})
const entriesWithType = [...entries, personType]
render(
<FilterBuilder
group={{ all: [{ field: 'title', op: 'contains', value: '[[Luca' }] }}
onChange={onChange}
availableFields={['type', 'status', 'title']}
entries={entriesWithType}
/>,
)
const input = screen.getByTestId('filter-value-input')
fireEvent.focus(input)
expect(screen.getByText('Person')).toBeInTheDocument()
})
it('opens dropdown on typing [[ in input', () => {
renderWithEntries({
all: [{ field: 'title', op: 'contains', value: '[[Al' }],
})
const input = screen.getByTestId('filter-value-input')
// Simulate the user typing [[ — dropdown opens when value starts with [[
fireEvent.change(input, { target: { value: '[[Al' } })
// The internal open state is set by onChange, verified via focus re-trigger
fireEvent.focus(input)
expect(screen.getByTestId('wikilink-dropdown')).toBeInTheDocument()
})
it('plain text without [[ still works as regular input', () => {
renderWithEntries()
const input = screen.getByTestId('filter-value-input')
fireEvent.change(input, { target: { value: 'some text' } })
expect(screen.queryByTestId('wikilink-dropdown')).not.toBeInTheDocument()
expect(onChange).toHaveBeenCalled()
})
it('falls back to plain input when no entries are provided', () => {
render(
<FilterBuilder
group={{ all: [{ field: 'title', op: 'contains', value: '' }] }}
onChange={onChange}
availableFields={['type', 'status', 'title']}
/>,
)
const input = screen.getByPlaceholderText('value')
expect(input).toBeInTheDocument()
expect(input).not.toHaveAttribute('data-testid', 'filter-value-input')
expect(screen.queryByTestId('filter-value-input')).not.toBeInTheDocument()
})
it('renders calendar date picker button for date operators', () => {
renderWithEntries({
renderBuilder({
all: [{ field: 'created', op: 'before', value: '2024-06-01' }],
})
const dateButton = screen.getByTestId('date-picker-trigger')
expect(dateButton).toBeInTheDocument()
expect(dateButton).toHaveTextContent('Jun 1, 2024')
// Should NOT have a native input type="date"
expect(screen.queryByDisplayValue('2024-06-01')).not.toBeInTheDocument()
})
it('renders date picker placeholder when no date is selected', () => {
renderWithEntries({
renderBuilder({
all: [{ field: 'created', op: 'after', value: '' }],
})
const dateButton = screen.getByTestId('date-picker-trigger')
expect(dateButton).toHaveTextContent('Pick a date')
expect(screen.getByTestId('date-picker-trigger')).toHaveTextContent('Pick a date')
})
it('shows body field in field dropdown separated from property fields', () => {
@@ -214,7 +90,7 @@ describe('FilterBuilder wikilink autocomplete', () => {
availableFields={['type', 'status', 'body']}
/>,
)
// Body field should be selected as the current value
expect(screen.getByText('body')).toBeInTheDocument()
})
})

View File

@@ -1,5 +1,3 @@
import { useState, useRef, useMemo, useEffect, useCallback } from 'react'
import { createPortal } from 'react-dom'
import { Plus, X, CalendarBlank } from '@phosphor-icons/react'
import { format, parseISO } from 'date-fns'
import { Button } from '@/components/ui/button'
@@ -7,10 +5,7 @@ import { Input } from '@/components/ui/input'
import { Calendar } from '@/components/ui/calendar'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from '@/components/ui/select'
import type { FilterCondition, FilterOp, FilterGroup, FilterNode, VaultEntry } from '../types'
import { buildTypeEntryMap, getTypeColor, getTypeLightColor } from '../utils/typeColors'
import { getTypeIcon } from './NoteItem'
import './WikilinkSuggestionMenu.css'
import type { FilterCondition, FilterOp, FilterGroup, FilterNode } from '../types'
const OPERATORS: { value: FilterOp; label: string }[] = [
{ value: 'equals', label: 'equals' },
@@ -100,210 +95,6 @@ function OperatorSelect({ value, onChange }: {
)
}
const MAX_WIKILINK_RESULTS = 10
const MIN_WIKILINK_QUERY = 2
function entryMatchesQuery(e: VaultEntry, lowerQuery: string): boolean {
return e.title.toLowerCase().includes(lowerQuery) ||
e.aliases.some(a => a.toLowerCase().includes(lowerQuery))
}
function toWikilinkMatch(e: VaultEntry, typeEntryMap: Record<string, VaultEntry>) {
const isA = e.isA
const te = typeEntryMap[isA ?? '']
const noteType = isA || undefined
const stem = e.filename.replace(/\.md$/, '')
return {
title: e.title,
stem,
noteType,
typeColor: noteType ? getTypeColor(isA, te?.color) : undefined,
typeLightColor: noteType ? getTypeLightColor(isA, te?.color) : undefined,
TypeIcon: noteType ? getTypeIcon(isA, te?.icon) : undefined,
}
}
function matchWikilinkEntries(entries: VaultEntry[], typeEntryMap: Record<string, VaultEntry>, query: string) {
if (query.length < MIN_WIKILINK_QUERY) return []
const lowerQuery = query.toLowerCase()
return entries
.filter(e => entryMatchesQuery(e, lowerQuery))
.slice(0, MAX_WIKILINK_RESULTS)
.map(e => toWikilinkMatch(e, typeEntryMap))
}
type WikilinkMatch = ReturnType<typeof toWikilinkMatch>
function extractWikilinkQuery(value: string): string | null {
return value.startsWith('[[') ? value.slice(2).replace(/]]$/, '') : null
}
function useOutsideClick(refs: React.RefObject<HTMLElement | null>[], onClose: () => void) {
useEffect(() => {
const handler = (e: MouseEvent) => {
const target = e.target as Node
if (refs.every(r => !r.current?.contains(target))) onClose()
}
document.addEventListener('mousedown', handler)
return () => document.removeEventListener('mousedown', handler)
}, [refs, onClose])
}
function WikilinkDropdown({ matches, selectedIndex, onSelect, onHover, menuRef, anchorRef }: {
matches: WikilinkMatch[]
selectedIndex: number
onSelect: (title: string, stem?: string) => void
onHover: (index: number) => void
menuRef: React.RefObject<HTMLDivElement | null>
anchorRef: React.RefObject<HTMLElement | null>
}) {
const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null)
useEffect(() => {
const el = anchorRef.current
if (!el) return
const rect = el.getBoundingClientRect()
setPos({ top: rect.bottom + 2, left: rect.left, width: rect.width })
}, [anchorRef, matches])
if (!pos) return null
return createPortal(
<div
className="wikilink-menu wikilink-menu--filter"
ref={menuRef}
style={{ position: 'fixed', top: pos.top, left: pos.left, width: pos.width }}
data-testid="wikilink-dropdown"
>
{matches.map((item, index) => (
<div
key={item.title}
className={`wikilink-menu__item${index === selectedIndex ? ' wikilink-menu__item--selected' : ''}`}
onMouseDown={e => e.preventDefault()}
onClick={() => onSelect(item.title, item.stem)}
onMouseEnter={() => onHover(index)}
>
<span className="wikilink-menu__title" style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
{item.TypeIcon && <item.TypeIcon width={12} height={12} style={{ color: item.typeColor, flexShrink: 0 }} />}
{item.title}
</span>
{item.noteType && (
<span className="wikilink-menu__type" style={{ color: item.typeColor, backgroundColor: item.typeLightColor, borderRadius: 9999, padding: '1px 6px' }}>
{item.noteType}
</span>
)}
</div>
))}
</div>,
document.body,
)
}
function useWikilinkMatches(entries: VaultEntry[], value: string, open: boolean) {
const typeEntryMap = useMemo(() => buildTypeEntryMap(entries), [entries])
const wikilinkQuery = extractWikilinkQuery(value)
return useMemo(
() => (open && wikilinkQuery !== null) ? matchWikilinkEntries(entries, typeEntryMap, wikilinkQuery) : [],
[entries, typeEntryMap, wikilinkQuery, open],
)
}
function useScrollSelectedIntoView(menuRef: React.RefObject<HTMLDivElement | null>, selectedIndex: number) {
useEffect(() => {
if (selectedIndex < 0 || !menuRef.current) return
const el = menuRef.current.children[selectedIndex] as HTMLElement | undefined
el?.scrollIntoView?.({ block: 'nearest' })
}, [selectedIndex, menuRef])
}
function useDropdownKeyboard(
matches: WikilinkMatch[],
open: boolean,
onSelect: (title: string, stem?: string) => void,
onClose: () => void,
) {
const [selectedIndex, setSelectedIndex] = useState(-1)
const resetIndex = useCallback(() => setSelectedIndex(-1), [])
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
if (!open || matches.length === 0) return
if (e.key === 'ArrowDown') {
e.preventDefault()
setSelectedIndex(i => (i + 1) % matches.length)
} else if (e.key === 'ArrowUp') {
e.preventDefault()
setSelectedIndex(i => (i <= 0 ? matches.length - 1 : i - 1))
} else if (e.key === 'Enter' && selectedIndex >= 0) {
e.preventDefault()
const m = matches[selectedIndex]
onSelect(m.title, m.stem)
} else if (e.key === 'Escape') {
e.preventDefault()
onClose()
}
}, [open, matches, selectedIndex, onSelect, onClose])
return { selectedIndex, setSelectedIndex, resetIndex, handleKeyDown }
}
function WikilinkValueInput({ value, entries, onChange }: {
value: string
entries: VaultEntry[]
onChange: (v: string) => void
}) {
const [open, setOpen] = useState(false)
const inputRef = useRef<HTMLInputElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const matches = useWikilinkMatches(entries, value, open)
const handleSelect = useCallback((title: string, stem?: string) => {
const wikilink = stem && stem !== title ? `[[${stem}|${title}]]` : `[[${title}]]`
onChange(wikilink)
setOpen(false)
}, [onChange])
const closeMenu = useCallback(() => setOpen(false), [])
useOutsideClick([inputRef, menuRef], closeMenu)
const { selectedIndex, setSelectedIndex, resetIndex, handleKeyDown } =
useDropdownKeyboard(matches, open, handleSelect, closeMenu)
useScrollSelectedIntoView(menuRef, selectedIndex)
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value)
setOpen(e.target.value.startsWith('[['))
resetIndex()
}, [onChange, resetIndex])
return (
<div className="flex-1 min-w-0">
<Input
ref={inputRef}
className="h-8 w-full text-sm"
placeholder="value"
value={value}
onChange={handleChange}
onFocus={() => { if (value.startsWith('[[')) setOpen(true) }}
onKeyDown={handleKeyDown}
data-testid="filter-value-input"
/>
{open && matches.length > 0 && (
<WikilinkDropdown
matches={matches}
selectedIndex={selectedIndex}
onSelect={handleSelect}
onHover={setSelectedIndex}
menuRef={menuRef}
anchorRef={inputRef}
/>
)}
</div>
)
}
function DateValueInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
const parsed = value ? parseISO(value) : undefined
const selected = parsed && !isNaN(parsed.getTime()) ? parsed : undefined
@@ -330,61 +121,27 @@ function DateValueInput({ value, onChange }: { value: string; onChange: (v: stri
)
}
function ValueInput({ value, suggestions, isDateOp, entries, onChange }: {
function TextValueInput({ value, onChange }: {
value: string
suggestions: string[]
isDateOp: boolean
entries: VaultEntry[]
onChange: (v: string) => void
}) {
if (isDateOp) {
return <DateValueInput value={value} onChange={onChange} />
}
if (suggestions.length > 0) {
return (
<Select value={value} onValueChange={onChange}>
<SelectTrigger
size="sm"
className="h-8 flex-1 min-w-0 gap-1 border-input bg-background px-2 text-sm shadow-none"
>
<SelectValue placeholder="value" />
</SelectTrigger>
<SelectContent position="popper">
{value !== '' && !suggestions.includes(value) && (
<SelectItem value={value}>{value}</SelectItem>
)}
{suggestions.map((s) => (
<SelectItem key={s} value={s}>{s}</SelectItem>
))}
</SelectContent>
</Select>
)
}
if (entries.length > 0) {
return <WikilinkValueInput value={value} entries={entries} onChange={onChange} />
}
return (
<Input
className="h-8 flex-1 min-w-0 text-sm"
placeholder="value"
value={value}
onChange={(e) => onChange(e.target.value)}
data-testid="filter-value-input"
/>
)
}
function FilterRow({ condition, fields, entries, valueSuggestions, onUpdate, onRemove }: {
function FilterRow({ condition, fields, onUpdate, onRemove }: {
condition: FilterCondition
fields: string[]
entries: VaultEntry[]
valueSuggestions: (field: string) => string[]
onUpdate: (c: FilterCondition) => void
onRemove: () => void
}) {
const suggestions = valueSuggestions(condition.field)
const isDateOp = DATE_OPS.has(condition.op)
return (
<div className="flex items-center gap-1.5">
@@ -398,13 +155,9 @@ function FilterRow({ condition, fields, entries, valueSuggestions, onUpdate, onR
onChange={(op) => onUpdate({ ...condition, op })}
/>
{!NO_VALUE_OPS.has(condition.op) && (
<ValueInput
value={String(condition.value ?? '')}
suggestions={suggestions}
isDateOp={isDateOp}
entries={entries}
onChange={(v) => onUpdate({ ...condition, value: v })}
/>
isDateOp
? <DateValueInput value={String(condition.value ?? '')} onChange={(v) => onUpdate({ ...condition, value: v })} />
: <TextValueInput value={String(condition.value ?? '')} onChange={(v) => onUpdate({ ...condition, value: v })} />
)}
<Button
type="button"
@@ -420,11 +173,9 @@ function FilterRow({ condition, fields, entries, valueSuggestions, onUpdate, onR
)
}
function FilterGroupView({ group, fields, entries, valueSuggestions, depth, onChange, onRemove }: {
function FilterGroupView({ group, fields, depth, onChange, onRemove }: {
group: FilterGroup
fields: string[]
entries: VaultEntry[]
valueSuggestions: (field: string) => string[]
depth: number
onChange: (g: FilterGroup) => void
onRemove?: () => void
@@ -492,8 +243,6 @@ function FilterGroupView({ group, fields, entries, valueSuggestions, depth, onCh
key={i}
group={child}
fields={fields}
entries={entries}
valueSuggestions={valueSuggestions}
depth={depth + 1}
onChange={(g) => updateChild(i, g)}
onRemove={() => removeChild(i)}
@@ -503,8 +252,6 @@ function FilterGroupView({ group, fields, entries, valueSuggestions, depth, onCh
key={i}
condition={child}
fields={fields}
entries={entries}
valueSuggestions={valueSuggestions}
onUpdate={(c) => updateChild(i, c)}
onRemove={() => removeChild(i)}
/>
@@ -527,22 +274,14 @@ export interface FilterBuilderProps {
group: FilterGroup
onChange: (group: FilterGroup) => void
availableFields: string[]
/** Returns known values for a given field (for autocomplete). */
valueSuggestions?: (field: string) => string[]
/** Vault entries for wikilink autocomplete in value fields. */
entries?: VaultEntry[]
}
const defaultSuggestions = () => [] as string[]
export function FilterBuilder({ group, onChange, availableFields, valueSuggestions, entries }: FilterBuilderProps) {
export function FilterBuilder({ group, onChange, availableFields }: FilterBuilderProps) {
const fields = availableFields.length > 0 ? availableFields : ['type']
return (
<FilterGroupView
group={group}
fields={fields}
entries={entries ?? []}
valueSuggestions={valueSuggestions ?? defaultSuggestions}
depth={0}
onChange={onChange}
/>

View File

@@ -162,6 +162,7 @@ export function NoteItem({ entry, isSelected, isMultiSelected = false, isHighlig
}) {
const isBinary = entry.fileKind === 'binary'
const isNonMarkdown = !!entry.fileKind && entry.fileKind !== 'markdown'
const isDeletedChange = changeStatus === 'deleted'
const te = typeEntryMap[entry.isA ?? '']
const typeColor = isBinary ? 'var(--muted-foreground)' : getTypeColor(entry.isA ?? 'Note', te?.color)
const typeLightColor = getTypeLightColor(entry.isA ?? 'Note', te?.color)
@@ -189,13 +190,22 @@ export function NoteItem({ entry, isSelected, isMultiSelected = false, isHighlig
onMouseEnter={!isBinary && onPrefetch ? () => onPrefetch(entry.path) : undefined}
data-testid={isMultiSelected ? 'multi-selected-item' : isBinary ? 'binary-file-item' : undefined}
data-highlighted={isHighlighted || undefined}
data-note-path={entry.path}
data-change-status={changeStatus}
title={isBinary ? 'Cannot open this file type' : undefined}
>
{changeStatus ? (
<>
<ChangeStatusIcon status={changeStatus} />
<div className="pr-5">
<div className={cn("truncate text-[13px] font-mono", isSelected ? "font-semibold" : "font-normal")} style={{ fontSize: 12 }}>
<div
className={cn(
"truncate text-[13px] font-mono",
isSelected ? "font-semibold" : "font-normal",
isDeletedChange && "text-muted-foreground line-through opacity-70",
)}
style={{ fontSize: 12 }}
>
{entry.filename}
</div>
</div>

View File

@@ -1,4 +1,4 @@
import { render, screen, fireEvent } from '@testing-library/react'
import { render, screen, fireEvent, act } from '@testing-library/react'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { NoteList } from './NoteList'
import { NoteItem } from './NoteItem'
@@ -924,7 +924,7 @@ describe('NoteList — virtual list with large datasets', () => {
expect(icons).toHaveLength(2)
})
it('shows deleted notes banner when files are deleted', () => {
it('shows deleted notes as individual rows when files are deleted', () => {
const filesWithDeleted = [
{ path: mockEntries[0].path, relativePath: 'project/26q1-laputa-app.md', status: 'modified' as const },
{ path: '/Users/luca/Laputa/note/gone.md', relativePath: 'note/gone.md', status: 'deleted' as const },
@@ -934,17 +934,20 @@ describe('NoteList — virtual list with large datasets', () => {
<NoteList {...defaultFilterProps} entries={mockEntries} selection={changesSelection} selectedNote={null} modifiedFiles={filesWithDeleted} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} onCreateNote={vi.fn()} />
)
expect(screen.getByText('26q1-laputa-app.md')).toBeInTheDocument()
expect(screen.getByText('2 notes deleted')).toBeInTheDocument()
expect(screen.getByText('gone.md')).toBeInTheDocument()
expect(screen.getByText('also-gone.md')).toBeInTheDocument()
expect(screen.queryByText(/notes? deleted/)).not.toBeInTheDocument()
})
it('shows singular form for single deleted note', () => {
it('renders deleted rows with dimmed strikethrough styling', () => {
const filesWithOneDeleted = [
{ path: '/Users/luca/Laputa/note/gone.md', relativePath: 'note/gone.md', status: 'deleted' as const },
]
render(
<NoteList {...defaultFilterProps} entries={mockEntries} selection={changesSelection} selectedNote={null} modifiedFiles={filesWithOneDeleted} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} onCreateNote={vi.fn()} />
)
expect(screen.getByText('1 note deleted')).toBeInTheDocument()
expect(screen.getByText('gone.md')).toHaveClass('line-through')
expect(screen.getByText('gone.md')).toHaveClass('opacity-70')
})
it('does not show deleted banner when no files are deleted', () => {
@@ -975,6 +978,20 @@ describe('NoteList — virtual list with large datasets', () => {
expect(screen.getByTestId('discard-changes-button')).toBeInTheDocument()
})
it('shows "Restore note" on deleted rows in the changes context menu', () => {
const onDiscard = vi.fn()
const filesWithDeleted = [
{ path: '/Users/luca/Laputa/note/gone.md', relativePath: 'note/gone.md', status: 'deleted' as const },
]
render(
<NoteList {...defaultFilterProps} entries={mockEntries} selection={changesSelection} selectedNote={null} modifiedFiles={filesWithDeleted} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} onCreateNote={vi.fn()} onDiscardFile={onDiscard} />
)
const noteItem = screen.getByText('gone.md').closest('[class*="border-b"]')!
fireEvent.contextMenu(noteItem)
expect(screen.getByTestId('changes-context-menu')).toBeInTheDocument()
expect(screen.getByTestId('restore-note-button')).toBeInTheDocument()
})
it('does not show context menu when onDiscardFile is not provided', () => {
render(
<NoteList {...defaultFilterProps} entries={mockEntries} selection={changesSelection} selectedNote={null} modifiedFiles={modifiedFiles} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} onCreateNote={vi.fn()} />
@@ -998,15 +1015,41 @@ describe('NoteList — virtual list with large datasets', () => {
expect(dialog.textContent).toContain('Build Laputa App')
})
it('opens the restore context menu action from Shift+F10 on a highlighted deleted row', () => {
const onDiscard = vi.fn()
const filesWithDeleted = [
{ path: '/Users/luca/Laputa/note/gone.md', relativePath: 'note/gone.md', status: 'deleted' as const },
]
render(
<NoteList {...defaultFilterProps} entries={mockEntries} selection={changesSelection} selectedNote={null} modifiedFiles={filesWithDeleted} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} onCreateNote={vi.fn()} onDiscardFile={onDiscard} />
)
const container = screen.getByTestId('note-list-container')
act(() => {
fireEvent.focus(container)
})
act(() => {
fireEvent.keyDown(container, { key: 'F10', shiftKey: true })
})
expect(screen.getByTestId('changes-context-menu')).toBeInTheDocument()
expect(screen.getByTestId('restore-note-button')).toBeInTheDocument()
})
it('calls onDiscardFile with relativePath when discard is confirmed', async () => {
const onDiscard = vi.fn().mockResolvedValue(undefined)
render(
<NoteList {...defaultFilterProps} entries={mockEntries} selection={changesSelection} selectedNote={null} modifiedFiles={modifiedFiles} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} onCreateNote={vi.fn()} onDiscardFile={onDiscard} />
)
const noteItem = screen.getByText('26q1-laputa-app.md').closest('[class*="border-b"]')!
fireEvent.contextMenu(noteItem)
fireEvent.click(screen.getByTestId('discard-changes-button'))
fireEvent.click(screen.getByTestId('discard-confirm-button'))
act(() => {
fireEvent.contextMenu(noteItem)
})
act(() => {
fireEvent.click(screen.getByTestId('discard-changes-button'))
})
await act(async () => {
fireEvent.click(screen.getByTestId('discard-confirm-button'))
await Promise.resolve()
})
expect(onDiscard).toHaveBeenCalledWith('project/26q1-laputa-app.md')
})

View File

@@ -10,8 +10,7 @@ import { useNoteListKeyboard } from '../hooks/useNoteListKeyboard'
import { NoteListHeader } from './note-list/NoteListHeader'
import { FilterPills } from './note-list/FilterPills'
import { EntityView, ListView } from './note-list/NoteListViews'
import { DeletedNotesBanner } from './note-list/TrashWarningBanner'
import { routeNoteClick, toggleSetMember, resolveHeaderTitle } from './note-list/noteListUtils'
import { type DeletedNoteEntry, isDeletedNoteEntry, routeNoteClick, toggleSetMember, resolveHeaderTitle } from './note-list/noteListUtils'
import {
useTypeEntryMap, useNoteListData, useNoteListSearch,
useNoteListSort, useMultiSelectKeyboard, useModifiedFilesState,
@@ -47,15 +46,29 @@ function useBulkActions(
function ChangesContextMenu({ isChangesView, onDiscardFile, modifiedFiles }: { isChangesView: boolean; onDiscardFile?: (relativePath: string) => Promise<void>; modifiedFiles?: ModifiedFile[] }) {
const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; entry: VaultEntry } | null>(null)
const [discardTarget, setDiscardTarget] = useState<VaultEntry | null>(null)
const [actionTarget, setActionTarget] = useState<{ entry: VaultEntry; action: 'discard' | 'restore'; relativePath: string } | null>(null)
const ctxMenuRef = useRef<HTMLDivElement>(null)
const handleNoteContextMenu = useCallback((entry: VaultEntry, e: React.MouseEvent) => {
const resolveActionTarget = useCallback((entry: VaultEntry) => {
const file = modifiedFiles?.find((modified) => modified.path === entry.path || entry.path.endsWith('/' + modified.relativePath))
if (!file) return null
return {
entry,
action: file.status === 'deleted' ? 'restore' as const : 'discard' as const,
relativePath: file.relativePath,
}
}, [modifiedFiles])
const openContextMenuForEntry = useCallback((entry: VaultEntry, point: { x: number; y: number }) => {
if (!isChangesView || !onDiscardFile) return
setCtxMenu({ x: point.x, y: point.y, entry })
}, [isChangesView, onDiscardFile])
const handleNoteContextMenu = useCallback((entry: VaultEntry, e: React.MouseEvent) => {
e.preventDefault()
e.stopPropagation()
setCtxMenu({ x: e.clientX, y: e.clientY, entry })
}, [isChangesView, onDiscardFile])
openContextMenuForEntry(entry, { x: e.clientX, y: e.clientY })
}, [openContextMenuForEntry])
const closeCtxMenu = useCallback(() => setCtxMenu(null), [])
@@ -68,44 +81,54 @@ function ChangesContextMenu({ isChangesView, onDiscardFile, modifiedFiles }: { i
return () => document.removeEventListener('mousedown', handler)
}, [ctxMenu, closeCtxMenu])
const handleDiscardConfirm = useCallback(async () => {
if (!discardTarget || !onDiscardFile) return
const mf = modifiedFiles?.find((f) => f.path === discardTarget.path)
if (!mf) return
await onDiscardFile(mf.relativePath)
setDiscardTarget(null)
}, [discardTarget, onDiscardFile, modifiedFiles])
const handleChangeConfirm = useCallback(async () => {
if (!actionTarget || !onDiscardFile) return
await onDiscardFile(actionTarget.relativePath)
setActionTarget(null)
}, [actionTarget, onDiscardFile])
const menuActionTarget = ctxMenu ? resolveActionTarget(ctxMenu.entry) : null
const menuActionLabel = menuActionTarget?.action === 'restore' ? 'Restore note' : 'Discard changes'
const contextMenuNode = ctxMenu ? (
<div ref={ctxMenuRef} className="fixed z-50 rounded-md border bg-popover p-1 shadow-md" style={{ left: ctxMenu.x, top: ctxMenu.y, minWidth: 180 }} data-testid="changes-context-menu">
<button
className="flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-default hover:bg-accent hover:text-accent-foreground transition-colors border-none bg-transparent text-left text-destructive"
onClick={() => { setDiscardTarget(ctxMenu.entry); closeCtxMenu() }}
data-testid="discard-changes-button"
onClick={() => {
if (!menuActionTarget) return
setActionTarget(menuActionTarget)
closeCtxMenu()
}}
data-testid={menuActionTarget?.action === 'restore' ? 'restore-note-button' : 'discard-changes-button'}
>
Discard changes
{menuActionLabel}
</button>
</div>
) : null
const dialogNode = (
<Dialog open={!!discardTarget} onOpenChange={(open) => { if (!open) setDiscardTarget(null) }}>
<DialogContent showCloseButton={false} data-testid="discard-confirm-dialog">
<Dialog open={!!actionTarget} onOpenChange={(open) => { if (!open) setActionTarget(null) }}>
<DialogContent showCloseButton={false} data-testid={actionTarget?.action === 'restore' ? 'restore-confirm-dialog' : 'discard-confirm-dialog'}>
<DialogHeader>
<DialogTitle>Discard changes</DialogTitle>
<DialogTitle>{actionTarget?.action === 'restore' ? 'Restore note' : 'Discard changes'}</DialogTitle>
<DialogDescription>
Discard changes to <strong>{discardTarget?.title ?? 'this file'}</strong>? This cannot be undone.
{actionTarget?.action === 'restore'
? <>Restore <strong>{actionTarget?.entry.filename ?? 'this file'}</strong> from Git?</>
: <>Discard changes to <strong>{actionTarget?.entry.title ?? 'this file'}</strong>? This cannot be undone.</>
}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => setDiscardTarget(null)}>Cancel</Button>
<Button variant="destructive" onClick={handleDiscardConfirm} data-testid="discard-confirm-button">Discard</Button>
<Button variant="outline" onClick={() => setActionTarget(null)}>Cancel</Button>
<Button variant={actionTarget?.action === 'restore' ? 'default' : 'destructive'} onClick={handleChangeConfirm} data-testid={actionTarget?.action === 'restore' ? 'restore-confirm-button' : 'discard-confirm-button'}>
{actionTarget?.action === 'restore' ? 'Restore' : 'Discard'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
return { handleNoteContextMenu, contextMenuNode, dialogNode }
return { handleNoteContextMenu, openContextMenuForEntry, contextMenuNode, dialogNode }
}
interface NoteListProps {
@@ -130,11 +153,12 @@ interface NoteListProps {
onOpenInNewWindow?: (entry: VaultEntry) => void
onDiscardFile?: (relativePath: string) => Promise<void>
onAutoTriggerDiff?: () => void
onOpenDeletedNote?: (entry: DeletedNoteEntry) => void
views?: ViewFile[]
visibleNotesRef?: React.MutableRefObject<VaultEntry[]>
}
function NoteListInner({ entries, selection, selectedNote, noteListFilter, onNoteListFilterChange, inboxPeriod = 'all', modifiedFiles, modifiedFilesError, getNoteStatus, sidebarCollapsed, onSelectNote, onReplaceActiveTab, onCreateNote, onBulkArchive, onBulkDeletePermanently, onUpdateTypeSort, updateEntry, onOpenInNewWindow, onDiscardFile, onAutoTriggerDiff, views, visibleNotesRef }: NoteListProps) {
function NoteListInner({ entries, selection, selectedNote, noteListFilter, onNoteListFilterChange, inboxPeriod = 'all', modifiedFiles, modifiedFilesError, getNoteStatus, sidebarCollapsed, onSelectNote, onReplaceActiveTab, onCreateNote, onBulkArchive, onBulkDeletePermanently, onUpdateTypeSort, updateEntry, onOpenInNewWindow, onDiscardFile, onAutoTriggerDiff, onOpenDeletedNote, views, visibleNotesRef }: NoteListProps) {
const { modifiedPathSet, modifiedSuffixes, resolvedGetNoteStatus } = useModifiedFilesState(modifiedFiles, getNoteStatus)
const { isSectionGroup, isFolderView, isInboxView, isAllNotesView, isChangesView, showFilterPills } = useViewFlags(selection)
@@ -160,35 +184,49 @@ function NoteListInner({ entries, selection, selectedNote, noteListFilter, onNot
}
return map
}, [isChangesView, modifiedFiles])
const { isEntityView, isArchivedView, searched, searchedGroups } = useNoteListData({ entries, selection, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod: isInboxView ? inboxPeriod : undefined, views })
const { isEntityView, isArchivedView, searched, searchedGroups } = useNoteListData({ entries, selection, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes, modifiedFiles, subFilter, inboxPeriod: isInboxView ? inboxPeriod : undefined, views })
// Keep the visible notes ref in sync for keyboard navigation (Cmd+Option+Arrow)
if (visibleNotesRef) {
visibleNotesRef.current = isEntityView
? searchedGroups.flatMap((g) => g.entries)
: searched
? searchedGroups.flatMap((g) => g.entries).filter((entry) => !isDeletedNoteEntry(entry))
: searched.filter((entry) => !isDeletedNoteEntry(entry))
}
const deletedCount = useMemo(
() => isChangesView ? (modifiedFiles ?? []).filter((f) => f.status === 'deleted').length : 0,
[isChangesView, modifiedFiles],
)
const entitySelection = isEntityView && selection.kind === 'entity' ? selection : null
const noteListKeyboard = useNoteListKeyboard({ items: searched, selectedNotePath: selectedNote?.path ?? null, onOpen: onReplaceActiveTab, enabled: !isEntityView })
const handleKeyboardOpen = useCallback((entry: VaultEntry) => {
if (isDeletedNoteEntry(entry)) {
onOpenDeletedNote?.(entry)
return
}
onReplaceActiveTab(entry)
}, [onOpenDeletedNote, onReplaceActiveTab])
const handleKeyboardPrefetch = useCallback((entry: VaultEntry) => {
if (!isDeletedNoteEntry(entry)) prefetchNoteContent(entry.path)
}, [])
const noteListKeyboard = useNoteListKeyboard({ items: searched, selectedNotePath: selectedNote?.path ?? null, onOpen: handleKeyboardOpen, onPrefetch: handleKeyboardPrefetch, enabled: !isEntityView })
const multiSelect = useMultiSelect(searched, selectedNote?.path ?? null)
useEffect(() => { multiSelect.clear() }, [selection, noteListFilter]) // eslint-disable-line react-hooks/exhaustive-deps -- clear on selection/filter change
const handleClickNote = useCallback((entry: VaultEntry, e: React.MouseEvent) => {
if (isDeletedNoteEntry(entry)) {
routeNoteClick(entry, e, {
onReplace: () => onOpenDeletedNote?.(entry),
onSelect: () => onOpenDeletedNote?.(entry),
multiSelect,
})
return
}
routeNoteClick(entry, e, { onReplace: onReplaceActiveTab, onSelect: onSelectNote, onOpenInNewWindow, multiSelect })
if (isChangesView && onAutoTriggerDiff) {
// Small delay to let the tab open before triggering diff
setTimeout(onAutoTriggerDiff, 50)
}
}, [onReplaceActiveTab, onSelectNote, onOpenInNewWindow, multiSelect, isChangesView, onAutoTriggerDiff])
}, [onOpenDeletedNote, onReplaceActiveTab, onSelectNote, onOpenInNewWindow, multiSelect, isChangesView, onAutoTriggerDiff])
const { handleBulkArchive, handleBulkDeletePermanently, handleBulkUnarchive, bulkArchiveOrUnarchive } = useBulkActions(multiSelect, onBulkArchive, onBulkDeletePermanently, isArchivedView)
useMultiSelectKeyboard(multiSelect, isEntityView, bulkArchiveOrUnarchive, handleBulkDeletePermanently)
const { handleNoteContextMenu, contextMenuNode, dialogNode } = ChangesContextMenu({ isChangesView, onDiscardFile, modifiedFiles })
const { handleNoteContextMenu, openContextMenuForEntry, contextMenuNode, dialogNode } = ChangesContextMenu({ isChangesView, onDiscardFile, modifiedFiles })
const getChangeStatus = useCallback((path: string) => {
if (!changeStatusMap) return undefined
@@ -201,8 +239,25 @@ function NoteListInner({ entries, selection, selectedNote, noteListFilter, onNot
return undefined
}, [changeStatusMap])
const handleListKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
if (isChangesView && onDiscardFile && e.shiftKey && e.key === 'F10' && noteListKeyboard.highlightedPath) {
const entry = searched.find((candidate) => candidate.path === noteListKeyboard.highlightedPath)
if (!entry) return
e.preventDefault()
e.stopPropagation()
const row = document.querySelector<HTMLElement>(`[data-note-path="${entry.path}"]`)
const rect = row?.getBoundingClientRect()
openContextMenuForEntry(entry, {
x: rect ? rect.left + 24 : 160,
y: rect ? rect.bottom - 8 : 160,
})
return
}
noteListKeyboard.handleKeyDown(e)
}, [isChangesView, onDiscardFile, noteListKeyboard, searched, openContextMenuForEntry])
const renderItem = useCallback((entry: VaultEntry) => (
<NoteItem key={entry.path} entry={entry} isSelected={selectedNote?.path === entry.path} isMultiSelected={multiSelect.selectedPaths.has(entry.path)} isHighlighted={entry.path === noteListKeyboard.highlightedPath} noteStatus={resolvedGetNoteStatus(entry.path)} changeStatus={getChangeStatus(entry.path)} typeEntryMap={typeEntryMap} onClickNote={handleClickNote} onPrefetch={prefetchNoteContent} onContextMenu={isChangesView && onDiscardFile ? handleNoteContextMenu : undefined} />
<NoteItem key={entry.path} entry={entry} isSelected={selectedNote?.path === entry.path} isMultiSelected={multiSelect.selectedPaths.has(entry.path)} isHighlighted={entry.path === noteListKeyboard.highlightedPath} noteStatus={resolvedGetNoteStatus(entry.path)} changeStatus={getChangeStatus(entry.path)} typeEntryMap={typeEntryMap} onClickNote={handleClickNote} onPrefetch={isDeletedNoteEntry(entry) ? undefined : prefetchNoteContent} onContextMenu={isChangesView && onDiscardFile ? handleNoteContextMenu : undefined} />
), [selectedNote?.path, handleClickNote, typeEntryMap, resolvedGetNoteStatus, getChangeStatus, multiSelect.selectedPaths, noteListKeyboard.highlightedPath, isChangesView, onDiscardFile, handleNoteContextMenu])
const handleCreateNote = useCallback(() => {
@@ -214,15 +269,14 @@ function NoteListInner({ entries, selection, selectedNote, noteListFilter, onNot
return (
<div className="flex flex-col select-none overflow-hidden border-r border-border bg-card text-foreground" style={{ height: '100%' }}>
<NoteListHeader title={title} typeDocument={typeDocument} isEntityView={isEntityView} listSort={listSort} listDirection={listDirection} customProperties={customProperties} sidebarCollapsed={sidebarCollapsed} searchVisible={searchVisible} search={search} isSectionGroup={isSectionGroup} entries={entries} onSortChange={handleSortChange} onCreateNote={handleCreateNote} onOpenType={onReplaceActiveTab} onToggleSearch={toggleSearch} onSearchChange={setSearch} onUpdateTypeProperty={onUpdateTypeSort} />
<div className="relative flex flex-1 flex-col overflow-hidden outline-none" style={{ minHeight: 0 }} tabIndex={0} onKeyDown={noteListKeyboard.handleKeyDown} onFocus={noteListKeyboard.handleFocus} data-testid="note-list-container">
<div className="relative flex flex-1 flex-col overflow-hidden outline-none" style={{ minHeight: 0 }} tabIndex={0} onKeyDown={handleListKeyDown} onFocus={noteListKeyboard.handleFocus} data-testid="note-list-container">
<div className="flex-1 overflow-hidden" style={{ minHeight: 0 }}>
{entitySelection ? (
<EntityView entity={entitySelection.entry} groups={searchedGroups} query={query} collapsedGroups={collapsedGroups} sortPrefs={sortPrefs} onToggleGroup={toggleGroup} onSortChange={handleSortChange} renderItem={renderItem} typeEntryMap={typeEntryMap} onClickNote={handleClickNote} />
) : (
<ListView isArchivedView={isArchivedView} isChangesView={isChangesView} isInboxView={isInboxView} changesError={modifiedFilesError} deletedCount={deletedCount} searched={searched} query={query} renderItem={renderItem} virtuosoRef={noteListKeyboard.virtuosoRef} />
<ListView isArchivedView={isArchivedView} isChangesView={isChangesView} isInboxView={isInboxView} changesError={modifiedFilesError} searched={searched} query={query} renderItem={renderItem} virtuosoRef={noteListKeyboard.virtuosoRef} />
)}
</div>
{isChangesView && deletedCount > 0 && <DeletedNotesBanner count={deletedCount} />}
{showFilterPills && <FilterPills active={noteListFilter} counts={filterCounts} onChange={onNoteListFilterChange} position="bottom" />}
</div>
{multiSelect.isMultiSelecting && (

View File

@@ -33,16 +33,15 @@ export function EntityView({ entity, groups, query, collapsedGroups, sortPrefs,
)
}
export function ListView({ isArchivedView, isChangesView, isInboxView, changesError, deletedCount = 0, searched, query, renderItem, virtuosoRef }: {
export function ListView({ isArchivedView, isChangesView, isInboxView, changesError, searched, query, renderItem, virtuosoRef }: {
isArchivedView?: boolean; isChangesView?: boolean; isInboxView?: boolean; changesError?: string | null
deletedCount?: number; searched: VaultEntry[]; query: string
searched: VaultEntry[]; query: string
renderItem: (entry: VaultEntry) => React.ReactNode
virtuosoRef?: React.RefObject<VirtuosoHandle | null>
}) {
const emptyText = resolveEmptyText(!!isChangesView, changesError ?? null, !!isArchivedView, !!isInboxView, query)
const hasDeletedOnly = !!isChangesView && deletedCount > 0 && searched.length === 0
if (searched.length === 0 && !hasDeletedOnly) {
if (searched.length === 0) {
return (
<div className="h-full overflow-y-auto">
<EmptyMessage text={emptyText} />
@@ -50,10 +49,6 @@ export function ListView({ isArchivedView, isChangesView, isInboxView, changesEr
)
}
if (hasDeletedOnly) {
return <div className="h-full" />
}
return (
<Virtuoso
ref={virtuosoRef}

View File

@@ -9,7 +9,7 @@ import {
} from '../../utils/noteListHelpers'
import type { InboxPeriod } from '../../types'
import { buildTypeEntryMap } from '../../utils/typeColors'
import { filterByQuery, filterGroupsByQuery, createNoteStatusResolver, isModifiedEntry } from './noteListUtils'
import { buildChangesEntries, filterByQuery, filterGroupsByQuery, createNoteStatusResolver, isModifiedEntry } from './noteListUtils'
import type { MultiSelectState } from '../../hooks/useMultiSelect'
// --- useTypeEntryMap ---
@@ -20,16 +20,19 @@ export function useTypeEntryMap(entries: VaultEntry[]) {
// --- useFilteredEntries ---
export function useFilteredEntries(entries: VaultEntry[], selection: SidebarSelection, modifiedPathSet: Set<string>, modifiedSuffixes: string[], subFilter?: NoteListFilter, inboxPeriod?: InboxPeriod, views?: ViewFile[]) {
export function useFilteredEntries(entries: VaultEntry[], selection: SidebarSelection, modifiedPathSet: Set<string>, modifiedSuffixes: string[], modifiedFiles?: ModifiedFile[], subFilter?: NoteListFilter, inboxPeriod?: InboxPeriod, views?: ViewFile[]) {
const isEntityView = selection.kind === 'entity'
const isChangesView = selection.kind === 'filter' && selection.filter === 'changes'
const isInboxView = selection.kind === 'filter' && selection.filter === 'inbox'
return useMemo(() => {
if (isEntityView) return []
if (isChangesView) return entries.filter((e) => isModifiedEntry(e.path, modifiedPathSet, modifiedSuffixes))
if (isChangesView) {
if (modifiedFiles) return buildChangesEntries(entries, modifiedFiles)
return entries.filter((e) => isModifiedEntry(e.path, modifiedPathSet, modifiedSuffixes))
}
if (isInboxView) return filterInboxEntries(entries, inboxPeriod ?? 'month')
return filterEntries(entries, selection, subFilter, views)
}, [entries, selection, isEntityView, isChangesView, isInboxView, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod, views])
}, [entries, selection, isEntityView, isChangesView, isInboxView, modifiedPathSet, modifiedSuffixes, modifiedFiles, subFilter, inboxPeriod, views])
}
// --- useNoteListData ---
@@ -38,16 +41,17 @@ interface NoteListDataParams {
entries: VaultEntry[]; selection: SidebarSelection
query: string; listSort: SortOption; listDirection: SortDirection
modifiedPathSet: Set<string>; modifiedSuffixes: string[]
modifiedFiles?: ModifiedFile[]
subFilter?: NoteListFilter
inboxPeriod?: InboxPeriod
views?: ViewFile[]
}
export function useNoteListData({ entries, selection, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod, views }: NoteListDataParams) {
export function useNoteListData({ entries, selection, query, listSort, listDirection, modifiedPathSet, modifiedSuffixes, modifiedFiles, subFilter, inboxPeriod, views }: NoteListDataParams) {
const isEntityView = selection.kind === 'entity'
const isArchivedView = (selection.kind === 'filter' && selection.filter === 'archived') || subFilter === 'archived'
const filteredEntries = useFilteredEntries(entries, selection, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod, views)
const filteredEntries = useFilteredEntries(entries, selection, modifiedPathSet, modifiedSuffixes, modifiedFiles, subFilter, inboxPeriod, views)
const searched = useMemo(() => {
const sorted = [...filteredEntries].sort(getSortComparator(listSort, listDirection))
@@ -160,7 +164,7 @@ export function useNoteListSort({ entries, selection, modifiedPathSet, modifiedS
}
}, [typeDocument, persistence])
const filteredEntries = useFilteredEntries(entries, selection, modifiedPathSet, modifiedSuffixes, subFilter, inboxPeriod)
const filteredEntries = useFilteredEntries(entries, selection, modifiedPathSet, modifiedSuffixes, undefined, subFilter, inboxPeriod)
const customProperties = useMemo(() => extractSortableProperties(filteredEntries), [filteredEntries])
const listSort = useMemo<SortOption>(() => deriveEffectiveSort(listConfig.option, customProperties), [listConfig.option, customProperties])
const listDirection = listSort === listConfig.option ? listConfig.direction : 'desc'

View File

@@ -1,6 +1,11 @@
import type { VaultEntry, SidebarSelection, ModifiedFile, NoteStatus, ViewFile } from '../../types'
import type { RelationshipGroup } from '../../utils/noteListHelpers'
export interface DeletedNoteEntry extends VaultEntry {
__deletedNotePreview: true
__deletedRelativePath: string
}
export function resolveHeaderTitle(selection: SidebarSelection, typeDocument: VaultEntry | null, views?: ViewFile[]): string {
if (selection.kind === 'view') {
const view = views?.find((v) => v.filename === selection.filename)
@@ -60,3 +65,84 @@ export function isModifiedEntry(path: string, pathSet: Set<string>, suffixes: st
if (pathSet.has(path)) return true
return suffixes.some((suffix) => path.endsWith(suffix))
}
export function isDeletedNoteEntry(entry: VaultEntry): entry is DeletedNoteEntry {
return '__deletedNotePreview' in entry && entry.__deletedNotePreview === true
}
function matchesModifiedFile(entry: VaultEntry, file: ModifiedFile): boolean {
return entry.path === file.path || entry.path.endsWith('/' + file.relativePath)
}
function createDeletedNoteEntry(file: ModifiedFile): DeletedNoteEntry {
const filename = file.relativePath.split('/').pop() ?? file.relativePath
return {
path: file.path,
filename,
title: filename.replace(/\.md$/, ''),
isA: 'Note',
aliases: [],
belongsTo: [],
relatedTo: [],
status: null,
archived: false,
modifiedAt: null,
createdAt: null,
fileSize: 0,
snippet: '',
wordCount: 0,
relationships: {},
icon: null,
color: null,
order: null,
sidebarLabel: null,
template: null,
sort: null,
view: null,
visible: null,
organized: false,
favorite: false,
favoriteIndex: null,
listPropertiesDisplay: [],
outgoingLinks: [],
properties: {},
hasH1: true,
fileKind: 'markdown',
__deletedNotePreview: true,
__deletedRelativePath: file.relativePath,
}
}
export function buildChangesEntries(entries: VaultEntry[], modifiedFiles: ModifiedFile[] | undefined): VaultEntry[] {
if (!modifiedFiles || modifiedFiles.length === 0) return []
const liveEntries = entries.filter((entry) =>
modifiedFiles.some((file) => file.status !== 'deleted' && matchesModifiedFile(entry, file)),
)
const deletedEntries = modifiedFiles
.filter((file) => file.status === 'deleted')
.filter((file) => !entries.some((entry) => matchesModifiedFile(entry, file)))
.map(createDeletedNoteEntry)
return [...liveEntries, ...deletedEntries]
}
export function extractDeletedContentFromDiff(diff: string): string | null {
const lines: string[] = []
let inHunk = false
for (const line of diff.split('\n')) {
if (line.startsWith('@@')) {
inHunk = true
continue
}
if (!inHunk) continue
if (line.startsWith('\\')) continue
if (line.startsWith('-') || line.startsWith(' ')) {
lines.push(line.slice(1))
}
}
return lines.length > 0 ? lines.join('\n') : null
}

View File

@@ -19,6 +19,8 @@ interface NoteCommandsConfig {
isFavorite?: boolean
onToggleOrganized?: (path: string) => void
isOrganized?: boolean
onRestoreDeletedNote?: () => void
canRestoreDeletedNote?: boolean
}
export function buildNoteCommands(config: NoteCommandsConfig): CommandAction[] {
@@ -29,6 +31,7 @@ export function buildNoteCommands(config: NoteCommandsConfig): CommandAction[] {
onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon,
onOpenInNewWindow, onToggleFavorite, isFavorite,
onToggleOrganized, isOrganized,
onRestoreDeletedNote, canRestoreDeletedNote,
} = config
return [
@@ -46,6 +49,12 @@ export function buildNoteCommands(config: NoteCommandsConfig): CommandAction[] {
keywords: ['archive'], enabled: hasActiveNote,
execute: () => { if (activeTabPath) (isArchived ? onUnarchiveNote : onArchiveNote)(activeTabPath) },
},
{
id: 'restore-deleted-note', label: 'Restore Deleted Note', group: 'Note',
keywords: ['restore', 'deleted', 'undelete', 'git', 'checkout'],
enabled: !!canRestoreDeletedNote && !!onRestoreDeletedNote,
execute: () => onRestoreDeletedNote?.(),
},
{
id: 'toggle-favorite', label: isFavorite ? 'Remove from Favorites' : 'Add to Favorites', group: 'Note', shortcut: '⌘D',
keywords: ['favorite', 'star', 'bookmark', 'pin'],

View File

@@ -37,9 +37,14 @@ function extractWikilinks(value: FrontmatterValue): string[] {
*/
export type RelationshipPatch = Record<string, string[] | null>
/** Properties patch: a partial update to merge into `entry.properties`.
* Keys map to their new scalar values. A `null` value means "remove this key". */
export type PropertiesPatch = Record<string, string | number | boolean | null>
export interface EntryPatchResult {
patch: Partial<VaultEntry>
relationshipPatch: RelationshipPatch | null
propertiesPatch: PropertiesPatch | null
}
/** Map a frontmatter key+value to the corresponding VaultEntry field(s). */
@@ -49,7 +54,8 @@ export function frontmatterToEntryPatch(
const k = key.toLowerCase().replace(/\s+/g, '_')
if (op === 'delete') {
const relPatch: RelationshipPatch = { [key]: null }
return { patch: ENTRY_DELETE_MAP[k] ?? {}, relationshipPatch: relPatch }
const propPatch: PropertiesPatch | null = !(k in ENTRY_DELETE_MAP) ? { [key]: null } : null
return { patch: ENTRY_DELETE_MAP[k] ?? {}, relationshipPatch: relPatch, propertiesPatch: propPatch }
}
const str = value != null ? String(value) : null
const arr = Array.isArray(value) ? value.map(String) : []
@@ -73,17 +79,24 @@ export function frontmatterToEntryPatch(
const wikilinks = value != null ? extractWikilinks(value) : []
const relationshipPatch: RelationshipPatch | null =
wikilinks.length > 0 ? { [key]: wikilinks } : null
return { patch: updates[k] ?? {}, relationshipPatch }
// For unknown keys (custom properties), produce a propertiesPatch
const isKnownKey = k in updates
const propertiesPatch: PropertiesPatch | null =
!isKnownKey && value != null ? { [key]: typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' ? value : String(value) } : null
return { patch: updates[k] ?? {}, relationshipPatch, propertiesPatch }
}
/** Parse frontmatter from full content and return a merged VaultEntry patch for all known fields. */
export function contentToEntryPatch(content: string): Partial<VaultEntry> {
const fm = parseFrontmatter(content)
const merged: Partial<VaultEntry> = {}
const customProps: Record<string, string | number | boolean | null> = {}
for (const [key, value] of Object.entries(fm)) {
const { patch } = frontmatterToEntryPatch('update', key, value)
const { patch, propertiesPatch } = frontmatterToEntryPatch('update', key, value)
Object.assign(merged, patch)
if (propertiesPatch) Object.assign(customProps, propertiesPatch)
}
if (Object.keys(customProps).length > 0) merged.properties = customProps
return merged
}
@@ -117,6 +130,18 @@ export interface FrontmatterOpOptions {
silent?: boolean
}
/** Apply a properties patch by merging into the existing properties map. */
export function applyPropertiesPatch(
existing: Record<string, string | number | boolean | null>, propPatch: PropertiesPatch,
): Record<string, string | number | boolean | null> {
const merged = { ...existing }
for (const [k, v] of Object.entries(propPatch)) {
if (v === null) delete merged[k]
else merged[k] = v
}
return merged
}
/** Apply a relationship patch by merging into the existing relationships map. */
export function applyRelationshipPatch(
existing: Record<string, string[]>, relPatch: RelationshipPatch,
@@ -144,12 +169,17 @@ export async function runFrontmatterAndApply(
try {
const newContent = await executeFrontmatterOp(op, path, key, value)
callbacks.updateTab(path, newContent)
const { patch, relationshipPatch } = frontmatterToEntryPatch(op, key, value)
const { patch, relationshipPatch, propertiesPatch } = frontmatterToEntryPatch(op, key, value)
const fullPatch = { ...patch }
if (relationshipPatch && callbacks.getEntry) {
if ((relationshipPatch || propertiesPatch) && callbacks.getEntry) {
const current = callbacks.getEntry(path)
if (current) {
fullPatch.relationships = applyRelationshipPatch(current.relationships, relationshipPatch)
if (relationshipPatch) {
fullPatch.relationships = applyRelationshipPatch(current.relationships, relationshipPatch)
}
if (propertiesPatch) {
fullPatch.properties = applyPropertiesPatch(current.properties, propertiesPatch)
}
}
}
if (Object.keys(fullPatch).length > 0) callbacks.updateEntry(path, fullPatch)

View File

@@ -67,6 +67,8 @@ interface AppCommandsConfig {
onOpenInNewWindow?: () => void
onToggleFavorite?: (path: string) => void
onToggleOrganized?: (path: string) => void
onRestoreDeletedNote?: () => void
canRestoreDeletedNote?: boolean
}
/** Sets up keyboard shortcuts, command registry, menu events, and keyboard navigation. */
@@ -149,9 +151,11 @@ export function useAppCommands(config: AppCommandsConfig): CommandAction[] {
onReloadVault: config.onReloadVault,
onRepairVault: config.onRepairVault,
onOpenInNewWindow: config.onOpenInNewWindow,
onRestoreDeletedNote: config.onRestoreDeletedNote,
activeTabPathRef: config.activeTabPathRef,
activeTabPath: config.activeTabPath,
modifiedCount: config.modifiedCount,
hasRestorableDeletedNote: config.canRestoreDeletedNote,
})
const commands = useCommandRegistry({
@@ -205,6 +209,8 @@ export function useAppCommands(config: AppCommandsConfig): CommandAction[] {
onOpenInNewWindow: config.onOpenInNewWindow,
onToggleFavorite: config.onToggleFavorite,
onToggleOrganized: config.onToggleOrganized,
onRestoreDeletedNote: config.onRestoreDeletedNote,
canRestoreDeletedNote: config.canRestoreDeletedNote,
})
useKeyboardNavigation({

View File

@@ -150,6 +150,21 @@ describe('useCommandRegistry', () => {
findCommand(result.current, 'set-note-icon')!.execute()
expect(onSetNoteIcon).toHaveBeenCalled()
})
it('includes restore deleted note command when provided', () => {
const config = makeConfig({ onRestoreDeletedNote: vi.fn(), canRestoreDeletedNote: true })
const { result } = renderHook(() => useCommandRegistry(config))
const cmd = findCommand(result.current, 'restore-deleted-note')
expect(cmd).toBeDefined()
expect(cmd!.enabled).toBe(true)
})
it('disables restore deleted note when there is no deleted preview', () => {
const config = makeConfig({ onRestoreDeletedNote: vi.fn(), canRestoreDeletedNote: false })
const { result } = renderHook(() => useCommandRegistry(config))
const cmd = findCommand(result.current, 'restore-deleted-note')
expect(cmd!.enabled).toBe(false)
})
})
describe('pluralizeType', () => {

View File

@@ -30,6 +30,8 @@ interface CommandRegistryConfig {
onOpenInNewWindow?: () => void
onToggleFavorite?: (path: string) => void
onToggleOrganized?: (path: string) => void
onRestoreDeletedNote?: () => void
canRestoreDeletedNote?: boolean
onQuickOpen: () => void
onCreateNote: () => void
onCreateNoteOfType: (type: string) => void
@@ -85,6 +87,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
onReloadVault, onRepairVault,
onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon,
onOpenInNewWindow, onToggleFavorite, onToggleOrganized,
onRestoreDeletedNote, canRestoreDeletedNote,
selection, noteListFilter, onSetNoteListFilter,
} = config
@@ -108,6 +111,7 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
onDeleteNote, onArchiveNote, onUnarchiveNote,
onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon, onOpenInNewWindow, onToggleFavorite, isFavorite,
onToggleOrganized, isOrganized: activeEntry?.organized ?? false,
onRestoreDeletedNote, canRestoreDeletedNote,
}),
...buildGitCommands({ modifiedCount, onCommitPush, onPull, onResolveConflicts, onSelect }),
...buildViewCommands({
@@ -137,6 +141,6 @@ export function useCommandRegistry(config: CommandRegistryConfig): import('./com
onSetNoteIcon, onRemoveNoteIcon, activeNoteHasIcon,
isSectionGroup, noteListFilter, onSetNoteListFilter,
onOpenInNewWindow, onToggleFavorite, isFavorite,
onToggleOrganized, activeEntry,
onToggleOrganized, onRestoreDeletedNote, canRestoreDeletedNote, activeEntry,
])
}

View File

@@ -35,8 +35,10 @@ function makeHandlers(): MenuEventHandlers {
onInstallMcp: vi.fn(),
onReloadVault: vi.fn(),
onOpenInNewWindow: vi.fn(),
onRestoreDeletedNote: vi.fn(),
activeTabPathRef: { current: '/vault/test.md' } as React.MutableRefObject<string | null>,
activeTabPath: '/vault/test.md',
hasRestorableDeletedNote: false,
}
}
@@ -199,6 +201,12 @@ describe('dispatchMenuEvent', () => {
expect(h.onToggleAIChat).toHaveBeenCalled()
})
it('note-restore-deleted triggers restore deleted note', () => {
const h = makeHandlers()
dispatchMenuEvent('note-restore-deleted', h)
expect(h.onRestoreDeletedNote).toHaveBeenCalled()
})
it('view-toggle-backlinks triggers toggle inspector', () => {
const h = makeHandlers()
dispatchMenuEvent('view-toggle-backlinks', h)

View File

@@ -37,10 +37,12 @@ export interface MenuEventHandlers {
onOpenInNewWindow?: () => void
onReloadVault?: () => void
onRepairVault?: () => void
onRestoreDeletedNote?: () => void
activeTabPathRef: React.MutableRefObject<string | null>
activeTabPath: string | null
modifiedCount?: number
conflictCount?: number
hasRestorableDeletedNote?: boolean
}
const VIEW_MODE_MAP: Record<string, ViewMode> = {
@@ -78,7 +80,7 @@ type OptionalHandler =
| 'onCreateType' | 'onToggleRawEditor' | 'onToggleDiff' | 'onToggleAIChat'
| 'onOpenVault' | 'onRemoveActiveVault' | 'onRestoreGettingStarted'
| 'onCommitPush' | 'onPull' | 'onResolveConflicts' | 'onViewChanges' | 'onInstallMcp' | 'onReloadVault' | 'onRepairVault'
| 'onOpenInNewWindow'
| 'onOpenInNewWindow' | 'onRestoreDeletedNote'
const OPTIONAL_EVENT_MAP: Record<string, OptionalHandler> = {
'view-go-back': 'onGoBack',
@@ -99,6 +101,7 @@ const OPTIONAL_EVENT_MAP: Record<string, OptionalHandler> = {
'vault-reload': 'onReloadVault',
'vault-repair': 'onRepairVault',
'note-open-in-new-window': 'onOpenInNewWindow',
'note-restore-deleted': 'onRestoreDeletedNote',
}
function dispatchActiveTabEvent(id: string, h: MenuEventHandlers): boolean {
@@ -162,7 +165,8 @@ export function useMenuEvents(handlers: MenuEventHandlers) {
hasActiveNote: handlers.activeTabPath !== null,
hasModifiedFiles: handlers.modifiedCount != null ? handlers.modifiedCount > 0 : undefined,
hasConflicts: handlers.conflictCount != null ? handlers.conflictCount > 0 : undefined,
hasRestorableDeletedNote: handlers.hasRestorableDeletedNote,
})
}).catch(() => {})
}, [handlers.activeTabPath, handlers.modifiedCount, handlers.conflictCount])
}, [handlers.activeTabPath, handlers.modifiedCount, handlers.conflictCount, handlers.hasRestorableDeletedNote])
}

View File

@@ -373,9 +373,10 @@ describe('frontmatterToEntryPatch', () => {
expect(result.relationshipPatch).toEqual({ 'Belongs to': ['[[x]]'] })
})
it('returns empty patch for unknown non-wikilink keys', () => {
it('returns propertiesPatch for unknown non-wikilink keys', () => {
const result = frontmatterToEntryPatch('update', 'custom_field', 'value')
expect(result.patch).toEqual({})
expect(result.propertiesPatch).toEqual({ custom_field: 'value' })
// Non-wikilink value → no relationship change
expect(result.relationshipPatch).toBeNull()
})
@@ -417,10 +418,11 @@ describe('frontmatterToEntryPatch', () => {
expect(result.patch).toEqual({ listPropertiesDisplay: [] })
})
it('returns empty patch for unknown key on delete, with relationship removal', () => {
it('returns empty patch for unknown key on delete, with relationship and properties removal', () => {
const result = frontmatterToEntryPatch('delete', 'unknown_key')
expect(result.patch).toEqual({})
expect(result.relationshipPatch).toEqual({ unknown_key: null })
expect(result.propertiesPatch).toEqual({ unknown_key: null })
})
it('delete of known key also produces relationship removal', () => {
@@ -490,9 +492,9 @@ describe('contentToEntryPatch', () => {
expect(contentToEntryPatch(content)).toEqual({ isA: 'Type', sidebarLabel: 'Projects' })
})
it('ignores unknown frontmatter keys', () => {
it('includes custom frontmatter keys in properties patch', () => {
const content = '---\ntype: Note\ncustom: value\n---\n'
expect(contentToEntryPatch(content)).toEqual({ isA: 'Note' })
expect(contentToEntryPatch(content)).toEqual({ isA: 'Note', properties: { custom: 'value' } })
})
it('preserves _favorite_index as a number (not null)', () => {

View File

@@ -1,17 +1,17 @@
import { useState, useCallback, useEffect, useRef } from 'react'
import type { VirtuosoHandle } from 'react-virtuoso'
import type { VaultEntry } from '../types'
import { prefetchNoteContent } from './useTabManagement'
interface NoteListKeyboardOptions {
items: VaultEntry[]
selectedNotePath: string | null
onOpen: (entry: VaultEntry) => void
onPrefetch?: (entry: VaultEntry) => void
enabled: boolean
}
export function useNoteListKeyboard({
items, selectedNotePath, onOpen, enabled,
items, selectedNotePath, onOpen, onPrefetch, enabled,
}: NoteListKeyboardOptions) {
const [highlightedIndex, setHighlightedIndex] = useState(-1)
const virtuosoRef = useRef<VirtuosoHandle>(null)
@@ -30,7 +30,7 @@ export function useNoteListKeyboard({
setHighlightedIndex(prev => {
const next = Math.min((prev < 0 ? -1 : prev) + 1, items.length - 1)
virtuosoRef.current?.scrollToIndex({ index: next, behavior: 'auto' })
if (next >= 0 && next < items.length) prefetchNoteContent(items[next].path)
if (next >= 0 && next < items.length) onPrefetch?.(items[next])
return next
})
} else if (e.key === 'ArrowUp') {
@@ -38,14 +38,14 @@ export function useNoteListKeyboard({
setHighlightedIndex(prev => {
const next = Math.max((prev < 0 ? items.length : prev) - 1, 0)
virtuosoRef.current?.scrollToIndex({ index: next, behavior: 'auto' })
if (next >= 0 && next < items.length) prefetchNoteContent(items[next].path)
if (next >= 0 && next < items.length) onPrefetch?.(items[next])
return next
})
} else if (e.key === 'Enter' && highlightedIndex >= 0 && highlightedIndex < items.length) {
e.preventDefault()
onOpen(items[highlightedIndex])
}
}, [enabled, items, highlightedIndex, onOpen])
}, [enabled, items, highlightedIndex, onOpen, onPrefetch])
const handleFocus = useCallback(() => {
if (highlightedIndex >= 0 || items.length === 0) return

View File

@@ -490,8 +490,8 @@ describe('resolveNoteStatus', () => {
expect(resolveNoteStatus('/vault/x.md', new Set(), [])).toBe('clean')
})
it('returns clean for deleted files', () => {
expect(resolveNoteStatus('/vault/x.md', new Set(), [mf('/vault/x.md', 'deleted')])).toBe('clean')
it('returns modified for deleted files so deleted previews keep diff affordances', () => {
expect(resolveNoteStatus('/vault/x.md', new Set(), [mf('/vault/x.md', 'deleted')])).toBe('modified')
})
it('newPaths takes priority over git modified', () => {

View File

@@ -83,7 +83,7 @@ export function resolveNoteStatus(
const gitEntry = modifiedFiles.find((f) => f.path === path)
if (!gitEntry) return 'clean'
if (gitEntry.status === 'untracked' || gitEntry.status === 'added') return 'new'
if (gitEntry.status === 'modified') return 'modified'
if (gitEntry.status === 'modified' || gitEntry.status === 'deleted') return 'modified'
return 'clean'
}

View File

@@ -35,6 +35,22 @@ function mockModifiedFiles(): ModifiedFile[] {
function mockFileDiff(path: string): string {
const filename = path.split('/').pop() ?? 'unknown'
if (filename === 'old-draft.md') {
return `diff --git a/${filename} b/${filename}
deleted file mode 100644
index abc1234..0000000
--- a/${filename}
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Old Draft
-type: Note
----
-
-# Old Draft
-
-This note was deleted.`
}
return `diff --git a/${filename} b/${filename}
index abc1234..def5678 100644
--- a/${filename}

View File

@@ -73,11 +73,21 @@ async function openNote(page: import('@playwright/test').Page, title: string) {
await page.waitForTimeout(300)
}
/** Helper: rename the active note through the stable TitleField. */
async function renameActiveNote(page: import('@playwright/test').Page, nextTitle: string) {
const titleInput = page.getByTestId('title-field-input')
await expect(titleInput).toBeVisible({ timeout: 5_000 })
await titleInput.click()
await titleInput.fill(nextTitle)
await titleInput.press('Enter')
await expect(titleInput).toHaveValue(nextTitle, { timeout: 5_000 })
}
// ---------------------------------------------------------------------------
// 1. Vault loads entries from real fixture files
// ---------------------------------------------------------------------------
test('vault loads entries from fixture files', async ({ page }) => {
test('vault loads entries from fixture files @smoke', async ({ page }) => {
const list = noteList(page)
await expect(list.getByText('Alpha Project', { exact: true })).toBeVisible()
await expect(list.getByText('Note B', { exact: true })).toBeVisible()
@@ -120,24 +130,27 @@ test('trashed note does not appear in All Notes', async ({ page }) => {
// 4. Create note saves file to disk with correct slug
// ---------------------------------------------------------------------------
test('create note saves file to disk with correct slug', async ({ page }) => {
test('create note saves file to disk with correct slug @smoke', async ({ page }) => {
const beforeFiles = new Set(fs.readdirSync(tempVaultDir))
// "Create new note" instantly creates "Untitled note" and opens in editor
await page.locator('button[title="Create new note"]').click()
await page.waitForTimeout(500)
// Verify the new note opens — H1 heading should appear in the WYSIWYG editor
await expect(page.getByRole('heading', { name: /Untitled note/i, level: 1 })).toBeVisible({ timeout: 5_000 })
await expect(noteList(page).getByText(/Untitled Note \d+/).first()).toBeVisible({ timeout: 5_000 })
// Save to disk via Cmd+S
await page.keyboard.press('Meta+s')
// Poll for the file to appear on disk
const expectedPath = path.join(tempVaultDir, 'note', 'untitled-note.md')
// Poll for the new timestamp-based file to appear on disk.
await expect(async () => {
expect(fs.existsSync(expectedPath)).toBe(true)
const afterFiles = fs.readdirSync(tempVaultDir)
const createdFiles = afterFiles.filter(name => !beforeFiles.has(name) && /^untitled-note-\d+\.md$/.test(name))
expect(createdFiles).toHaveLength(1)
}).toPass({ timeout: 5_000 })
const content = fs.readFileSync(expectedPath, 'utf-8')
const createdFile = fs.readdirSync(tempVaultDir).find(name => !beforeFiles.has(name) && /^untitled-note-\d+\.md$/.test(name))
expect(createdFile).toBeTruthy()
const content = fs.readFileSync(path.join(tempVaultDir, createdFile!), 'utf-8')
expect(content).not.toContain('# Untitled note')
expect(content).toContain('type: Note')
})
@@ -146,22 +159,11 @@ test('create note saves file to disk with correct slug', async ({ page }) => {
// 5. Rename note updates filename on disk
// ---------------------------------------------------------------------------
test('rename note updates filename on disk', async ({ page }) => {
test('rename note updates filename on disk @smoke', async ({ page }) => {
// Open Note B
await openNote(page, 'Note B')
// Double-click the tab title — scope to the draggable tab element to avoid
// matching the breadcrumb span that also has class "truncate".
await page.locator('[draggable="true"] span.truncate', { hasText: 'Note B' }).dblclick()
await page.waitForTimeout(200)
// In rename mode, draggable becomes false and an <input> appears in the tab.
// It's the only <input> element on the page at this point.
const input = page.locator('input').first()
await expect(input).toBeVisible({ timeout: 2_000 })
await input.fill('Note B Renamed')
await input.press('Enter')
await page.waitForTimeout(500)
await renameActiveNote(page, 'Note B Renamed')
// Verify filesystem: old file gone, new file exists
const oldPath = path.join(tempVaultDir, 'note', 'note-b.md')
@@ -180,17 +182,10 @@ test('rename note updates filename on disk', async ({ page }) => {
// 6. Wikilink update on rename — other files' [[Note B]] updated
// ---------------------------------------------------------------------------
test('rename note updates wikilinks in other files', async ({ page }) => {
test('rename note updates wikilinks in other files @smoke', async ({ page }) => {
// Open Note B and rename it
await openNote(page, 'Note B')
await page.locator('[draggable="true"] span.truncate', { hasText: 'Note B' }).dblclick()
await page.waitForTimeout(200)
const input = page.locator('input').first()
await expect(input).toBeVisible({ timeout: 2_000 })
await input.fill('Note B Updated')
await input.press('Enter')
await renameActiveNote(page, 'Note B Updated')
// Wait for rename to complete (file to be moved)
const newPath = path.join(tempVaultDir, 'note', 'note-b-updated.md')

View File

@@ -13,12 +13,12 @@ test.describe('Command Palette smoke tests', () => {
await page.waitForLoadState('networkidle')
})
test('Cmd+K opens the command palette', async ({ page }) => {
test('Cmd+K opens the command palette @smoke', async ({ page }) => {
await openCommandPalette(page)
await verifyVisible(page, 'input[placeholder="Type a command..."]')
})
test('Escape closes the command palette', async ({ page }) => {
test('Escape closes the command palette @smoke', async ({ page }) => {
await openCommandPalette(page)
await closeCommandPalette(page)
await expect(
@@ -26,7 +26,7 @@ test.describe('Command Palette smoke tests', () => {
).not.toBeVisible()
})
test('typing filters the command list', async ({ page }) => {
test('typing filters the command list @smoke', async ({ page }) => {
await openCommandPalette(page)
const found = await findCommand(page, 'reload')
expect(found).toBe(true)
@@ -53,7 +53,7 @@ test.describe('Keyboard shortcuts smoke tests', () => {
await page.waitForLoadState('networkidle')
})
test('Cmd+P opens quick open palette', async ({ page }) => {
test('Cmd+P opens quick open palette @smoke', async ({ page }) => {
await page.locator('body').click()
await sendShortcut(page, 'p', ['Control'])
await expect(

View File

@@ -12,64 +12,35 @@ async function openCreateViewDialog(page: Page) {
await expect(page.locator('text=Create View')).toBeVisible({ timeout: 5000 })
}
test.describe('Filter wikilink autocomplete', () => {
test.describe('Filter value input', () => {
test.beforeEach(async ({ page }) => {
await page.goto('/')
await page.waitForLoadState('networkidle')
})
test('typing [[ in filter value field shows wikilink autocomplete', async ({ page }) => {
test('default text filters use a plain text input instead of a dropdown', async ({ page }) => {
await openCreateViewDialog(page)
const dialog = page.getByRole('dialog')
// Default field is 'type' which has valueSuggestions (shows Select, not text input).
// Change to 'title' field which has no suggestions → renders WikilinkValueInput.
const fieldSelect = page.locator('button:has-text("type")').first()
await fieldSelect.click()
await page.locator('[role="option"]:has-text("title")').click()
// The filter value input has data-testid="filter-value-input"
const valueInput = page.getByTestId('filter-value-input')
const valueInput = dialog.getByTestId('filter-value-input')
await expect(valueInput).toBeVisible()
// Type [[ without enough chars - dropdown should not appear
await valueInput.fill('[[')
await expect(page.getByTestId('wikilink-dropdown')).not.toBeVisible()
// Type enough characters to trigger the dropdown
await valueInput.fill('[[un')
await expect(page.getByTestId('wikilink-dropdown')).toBeVisible({ timeout: 2000 })
// Verify dropdown contains note suggestions
const dropdownItems = page.locator('.wikilink-menu__item')
const count = await dropdownItems.count()
expect(count).toBeGreaterThan(0)
// Click a suggestion to select it
const firstItem = dropdownItems.first()
const itemText = await firstItem.locator('.wikilink-menu__title').textContent()
await firstItem.click()
// Verify the value was set to [[note-title]]
const inputValue = await valueInput.inputValue()
expect(inputValue).toMatch(/^\[\[.+\]\]$/)
expect(inputValue).toContain(itemText?.trim() ?? '')
// Verify dropdown closed after selection
await expect(page.getByTestId('wikilink-dropdown')).not.toBeVisible()
await valueInput.fill('Project')
await expect(valueInput).toHaveValue('Project')
await expect(dialog.getByTestId('wikilink-dropdown')).toHaveCount(0)
})
test('plain text in filter value does not trigger autocomplete', async ({ page }) => {
test('wikilink-like text stays raw input with no autocomplete', async ({ page }) => {
await openCreateViewDialog(page)
const dialog = page.getByRole('dialog')
// Change field to 'title' (no suggestions → WikilinkValueInput)
const fieldSelect = page.locator('button:has-text("type")').first()
const fieldSelect = dialog.locator('button:has-text("type")').first()
await fieldSelect.click()
await page.locator('[role="option"]:has-text("title")').click()
const valueInput = page.getByTestId('filter-value-input')
await valueInput.fill('some plain text')
const valueInput = dialog.getByTestId('filter-value-input')
await valueInput.fill('[[un')
// No dropdown should appear
await expect(page.getByTestId('wikilink-dropdown')).not.toBeVisible()
await expect(valueInput).toHaveValue('[[un')
await expect(dialog.getByTestId('wikilink-dropdown')).toHaveCount(0)
})
})

View File

@@ -1,25 +1,23 @@
import { test, expect } from '@playwright/test'
import { sendShortcut } from './helpers'
test.describe('AI chat empty body fix — no regression', () => {
test.beforeEach(async ({ page }) => {
await page.route('**/api/vault/ping', route => route.fulfill({ status: 503 }))
await page.goto('/')
await page.waitForTimeout(500)
await expect(page.locator('[data-testid="note-list-container"]')).toBeVisible({ timeout: 5_000 })
})
test('AI panel opens, note is selected, message can be sent and response renders', async ({ page }) => {
test('AI panel opens, note is selected, message can be sent and response renders @smoke', async ({ page }) => {
// Select a note so the AI panel has context
const noteItem = page.locator('.app__note-list .cursor-pointer').first()
await noteItem.click()
await page.waitForTimeout(500)
// Verify editor has content (note body is loaded)
const editor = page.locator('.bn-editor')
await expect(editor).toBeVisible({ timeout: 3000 })
// Open AI Chat with Ctrl+I
await sendShortcut(page, 'i', ['Control'])
// Open AI Chat from the editor toolbar
await page.getByTitle('Open AI Chat').click()
await expect(page.getByTestId('ai-panel')).toBeVisible({ timeout: 3000 })
// Send a message

View File

@@ -10,14 +10,19 @@ async function openFirstNote(page: Page) {
const noteList = page.locator('[data-testid="note-list-container"]')
await noteList.waitFor({ timeout: 5000 })
await noteList.locator('.cursor-pointer').first().click()
await page.waitForTimeout(500)
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5000 })
}
async function toggleRawMode(page: Page) {
async function openRawMode(page: Page) {
await openCommandPalette(page)
await executeCommand(page, 'Toggle Raw')
await page.waitForTimeout(500)
await expect(page.locator('.cm-content')).toBeVisible({ timeout: 5_000 })
}
async function openBlockNoteMode(page: Page) {
await openCommandPalette(page)
await executeCommand(page, 'Toggle Raw')
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5_000 })
}
/** Get the full text content from the CodeMirror raw editor. */
@@ -53,87 +58,65 @@ test.describe('Raw editor ↔ BlockNote sync', () => {
await page.waitForLoadState('networkidle')
})
test('editing in raw mode and switching to BlockNote shows updated content', async ({ page }) => {
test('editing in raw mode and switching to BlockNote shows updated content @smoke', async ({ page }) => {
await openFirstNote(page)
// Read the original H1 from the BlockNote editor
const h1Locator = page.locator('.bn-editor h1.bn-inline-content').first()
await expect(h1Locator).toBeVisible({ timeout: 5000 })
const originalH1 = await h1Locator.textContent()
expect(originalH1).toBeTruthy()
// Toggle to raw mode
await toggleRawMode(page)
await expect(page.locator('.cm-content')).toBeVisible()
await openRawMode(page)
// Read raw content and verify it contains the original title
// Append unique text in raw mode, then verify it appears in BlockNote.
const rawContent = await getRawEditorContent(page)
expect(rawContent).toContain(originalH1!)
// Replace the H1 line with a new heading via CodeMirror dispatch
const newTitle = 'Updated By Raw Editor'
const updatedContent = rawContent.replace(
new RegExp(`# ${originalH1!.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`),
`# ${newTitle}`,
)
expect(rawContent).toBeTruthy()
const appendedText = `Raw editor sync ${Date.now()}`
const updatedContent = `${rawContent}\n\n${appendedText}`
await setRawEditorContent(page, updatedContent)
await page.waitForTimeout(600) // Wait for debounce (500ms)
// Toggle back to BlockNote
await toggleRawMode(page)
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5000 })
await page.waitForTimeout(500)
await openBlockNoteMode(page)
// Verify the BlockNote editor shows the updated heading
const updatedH1 = page.locator('.bn-editor h1.bn-inline-content').first()
await expect(updatedH1).toContainText(newTitle, { timeout: 5000 })
// Verify the BlockNote editor shows the appended text.
await expect(page.locator('.bn-editor')).toContainText(appendedText, { timeout: 5000 })
})
test('switching BlockNote → raw → BlockNote multiple times preserves content', async ({ page }) => {
test('switching BlockNote → raw → BlockNote multiple times preserves content @smoke', async ({ page }) => {
await openFirstNote(page)
// Cycle 1: toggle to raw, edit, toggle back
await toggleRawMode(page)
await expect(page.locator('.cm-content')).toBeVisible()
await openRawMode(page)
const rawContent1 = await getRawEditorContent(page)
const edit1 = rawContent1.replace(/# .+/, '# Cycle One Title')
const cycleOneText = `Cycle one ${Date.now()}`
const edit1 = `${rawContent1}\n\n${cycleOneText}`
await setRawEditorContent(page, edit1)
await page.waitForTimeout(600)
await toggleRawMode(page)
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5000 })
await page.waitForTimeout(500)
await openBlockNoteMode(page)
await expect(
page.locator('.bn-editor h1.bn-inline-content').first(),
).toContainText('Cycle One Title', { timeout: 5000 })
await expect(page.locator('.bn-editor')).toContainText(cycleOneText, { timeout: 5000 })
// Cycle 2: toggle to raw again, verify content persisted, edit again
await toggleRawMode(page)
await expect(page.locator('.cm-content')).toBeVisible()
await openRawMode(page)
const rawContent2 = await getRawEditorContent(page)
expect(rawContent2).toContain('Cycle One Title')
expect(rawContent2).toContain(cycleOneText)
const edit2 = rawContent2.replace(/# .+/, '# Cycle Two Title')
const cycleTwoText = `Cycle two ${Date.now()}`
const edit2 = `${rawContent2}\n\n${cycleTwoText}`
await setRawEditorContent(page, edit2)
await page.waitForTimeout(600)
await toggleRawMode(page)
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5000 })
await page.waitForTimeout(500)
await openBlockNoteMode(page)
await expect(
page.locator('.bn-editor h1.bn-inline-content').first(),
).toContainText('Cycle Two Title', { timeout: 5000 })
await expect(page.locator('.bn-editor')).toContainText(cycleOneText, { timeout: 5000 })
await expect(page.locator('.bn-editor')).toContainText(cycleTwoText, { timeout: 5000 })
})
test('appended text in raw mode appears in BlockNote after switch', async ({ page }) => {
await openFirstNote(page)
// Toggle to raw and append text via CodeMirror dispatch
await toggleRawMode(page)
await openRawMode(page)
await expect(page.locator('.cm-content')).toBeVisible()
const content = await getRawEditorContent(page)
@@ -141,7 +124,7 @@ test.describe('Raw editor ↔ BlockNote sync', () => {
await page.waitForTimeout(600) // Wait for debounce
// Toggle back to BlockNote
await toggleRawMode(page)
await openBlockNoteMode(page)
await expect(page.locator('.bn-editor')).toBeVisible({ timeout: 5000 })
await page.waitForTimeout(500)

View File

@@ -13,25 +13,24 @@ test.describe('Show deleted notes in Changes view', () => {
await page.waitForLoadState('networkidle')
})
test('changes view shows deleted notes banner', async ({ page }) => {
test('changes view shows deleted notes as rows instead of a banner', async ({ page }) => {
await navigateToChanges(page)
const banner = page.locator('[data-testid="deleted-notes-banner"]')
await expect(banner).toBeVisible({ timeout: 5000 })
await expect(banner).toContainText('1 note deleted')
const deletedRow = page.locator('[data-change-status="deleted"]').filter({ hasText: 'old-draft.md' })
await expect(deletedRow).toBeVisible({ timeout: 5000 })
await expect(page.locator('[data-testid="deleted-notes-banner"]')).toHaveCount(0)
})
test('deleted banner is visually distinct from note items', async ({ page }) => {
test('clicking a deleted row opens its deleted diff preview', async ({ page }) => {
await navigateToChanges(page)
const banner = page.locator('[data-testid="deleted-notes-banner"]')
await expect(banner).toBeVisible({ timeout: 5000 })
// Banner should have reduced opacity (visually distinct)
const opacity = await banner.evaluate((el) => window.getComputedStyle(el).opacity)
expect(parseFloat(opacity)).toBeLessThan(1)
await page.getByText('old-draft.md').click()
await expect(page.getByText('Back to editor')).toBeVisible({ timeout: 5000 })
await expect(page.getByText('This note was deleted.')).toBeVisible({ timeout: 5000 })
})
test('changes counter in sidebar matches list items plus deleted count', async ({ page }) => {
// The sidebar badge should show the total count (modified + added + deleted)
const changesBadge = page.locator('text=Changes').locator('..')
await expect(changesBadge).toBeVisible({ timeout: 5000 })
test('deleted rows expose a restore action from the context menu', async ({ page }) => {
await navigateToChanges(page)
await page.getByText('old-draft.md').click({ button: 'right' })
await expect(page.locator('[data-testid="changes-context-menu"]')).toBeVisible({ timeout: 5000 })
await expect(page.locator('[data-testid="restore-note-button"]')).toBeVisible({ timeout: 5000 })
})
})

View File

@@ -1,8 +0,0 @@
---
title: Untitled key result
type: Key Result
status: Active
---
# Untitled key result

View File

@@ -1,6 +0,0 @@
---
title: Untitled note 134
type: Note
status: Active
---
# Untitled note 130

Some files were not shown because too many files have changed in this diff Show More