|
1 | 1 | # AGENTS.md |
2 | 2 |
|
3 | | -This document gives AI agents a practical map of the `editoro` codebase. |
| 3 | +This file is a practical operating guide for AI agents working on `editoro`. |
4 | 4 |
|
5 | | -## 1) Project Overview |
| 5 | +## 1. Product Summary |
6 | 6 |
|
7 | | -- Stack: `Nuxt 4`, `Nuxt UI 4`, `Pinia`, `@nuxtjs/i18n`. |
8 | | -- Purpose: local markdown workspace similar to Obsidian. |
9 | | -- Storage: all user files are on disk in `data/`. |
10 | | -- Main UI: |
11 | | - - left: file tree with DnD, create/rename/delete. |
12 | | - - right: editor / image preview / folder browser. |
13 | | -- Supported locales: `en` (default), `ru`. |
| 7 | +- App type: local-first markdown workspace (Obsidian-like UX). |
| 8 | +- Frontend stack: `Nuxt 4`, `Nuxt UI 4`, `Pinia`, `@nuxtjs/i18n`. |
| 9 | +- Storage: filesystem-backed content in `data/`. |
| 10 | +- Left panel: tree, DnD, create/rename/delete, hidden files toggle. |
| 11 | +- Right panel: markdown editor, image preview, folder browser. |
| 12 | +- Locales: `en` (default), `ru`. |
14 | 13 |
|
15 | | -## 2) Key Runtime Flows |
| 14 | +## 2. Runtime Architecture |
16 | 15 |
|
17 | | -1. App mounts `app/pages/index.vue` -> renders `EditoroWorkspace`. |
18 | | -2. `useEditoro()` (`app/composables/useEditoro.ts`) returns grouped API. |
19 | | -3. `useEditoroState()` composes stores + lifecycle + view model + actions. |
20 | | -4. Tree and route query `?file=...` are synchronized in `useEditoroFileSelection`. |
21 | | -5. Markdown content autosaves via editor persistence composable. |
22 | | -6. Image uploads go to sibling `.media` folder of current markdown file. |
| 16 | +### Composition Root |
23 | 17 |
|
24 | | -## 3) Architecture (Current) |
| 18 | +- `app/pages/index.vue` renders `EditoroWorkspace`. |
| 19 | +- `app/composables/useEditoro.ts` exposes grouped public API. |
| 20 | +- `app/composables/useEditoroState.ts` orchestrates stores + logic. |
25 | 21 |
|
26 | | -### UI Components |
| 22 | +### Core Components |
27 | 23 |
|
28 | | -- `app/components/editoro/Workspace.vue`: top-level layout composition. |
29 | | -- `app/components/editoro/Sidebar.vue`: tree panel + settings modal. |
30 | | -- `app/components/editoro/MainHeader.vue`: file/folder title + actions + save status. |
31 | | -- `app/components/editoro/MainContent.vue`: folder browser / image preview / editor. |
32 | | -- `app/components/editoro/Modals.vue`: create/rename/delete dialogs. |
| 24 | +- `app/components/editoro/Workspace.vue` - page-level layout shell. |
| 25 | +- `app/components/editoro/Sidebar.vue` - tree panel and sidebar controls. |
| 26 | +- `app/components/editoro/MainHeader.vue` - active item title, pinning, actions. |
| 27 | +- `app/components/editoro/MainContent.vue` - editor/browser/preview surface. |
| 28 | +- `app/components/editoro/Modals.vue` - create/rename/delete/settings modals. |
33 | 29 |
|
34 | 30 | ### Stores |
35 | 31 |
|
36 | | -- `app/stores/editoroTree.ts`: tree state, loading, selection, DnD. |
37 | | -- `app/stores/editoroEditor.ts`: editor content, mode, save state, upload API. |
38 | | -- `app/stores/editoroPreferences.ts`: locale, color mode, hidden entries. |
39 | | -- `app/stores/editoroUi.ts`: modals and other UI control state. |
40 | | - |
41 | | -### Composable Layers |
42 | | - |
43 | | -- `app/composables/useEditoroState.ts`: orchestration root. |
44 | | -- `app/composables/useEditoroContext.ts`: internal wiring of stores/actions/view-model. |
45 | | -- `app/composables/useEditoroLifecycle.ts`: SSR+mount hooks/watchers. |
46 | | -- `app/composables/useEditoroFileSelection.ts`: selected node <-> route file query logic. |
47 | | -- `app/composables/useEditoroEntryActions.ts`: create/rename/delete flows. |
48 | | -- `app/composables/useEditoroViewModel.ts`: computed UI-facing derived data. |
49 | | -- `app/composables/api/*`: builders of final public grouped API. |
50 | | -- `app/composables/workspace/*Bindings.ts`: binds state to component props/events. |
51 | | - |
52 | | -### Server |
53 | | - |
54 | | -- `server/utils/data-storage.ts`: all filesystem operations and invariants. |
55 | | -- `server/api/files/*.ts`: tree/content/create/move/delete/image/media endpoints. |
56 | | -- `app/services/files-api.ts`: client API wrappers for server endpoints. |
57 | | - |
58 | | -## 4) Critical Invariants (Do Not Break) |
59 | | - |
60 | | -1. Security/path safety: |
61 | | - - Any filesystem path must remain inside `data/`. |
62 | | - - Use existing helpers (`normalizeRelativePath`, `resolveDataPath`). |
63 | | -2. Markdown editing: |
64 | | - - Only markdown files are editable/savable (`.md`). |
65 | | - - Non-markdown files show unsupported format or preview (for images). |
66 | | -3. Route sync: |
67 | | - - Opened file must be reflected in `?file=...`. |
68 | | - - On refresh, restore selection if file exists; clear query if invalid. |
69 | | -4. Tree UX: |
70 | | - - Preserve expanded paths on reload. |
71 | | - - Keep selected node and ancestors expanded when possible. |
72 | | -5. Media handling: |
73 | | - - Uploaded images go to `<markdown-folder>/.media`. |
74 | | - - On markdown save, remove orphan media files. |
75 | | - - Remove empty `.media` directories after cleanup. |
76 | | -6. SSR/hydration: |
77 | | - - Avoid client-only state mismatches that cause hydration warnings. |
78 | | - - Keep lifecycle hooks inside proper setup/composable execution flow. |
79 | | - |
80 | | -## 5) File Map for Common Tasks |
81 | | - |
82 | | -- Change tree behavior/icons: `server/utils/data-storage.ts`, `Sidebar.vue`, `app/utils/editoro-tree.ts`. |
83 | | -- Change selection/query behavior: `useEditoroFileSelection.ts`, `useEditoroLifecycle.ts`. |
84 | | -- Change autosave/status: `useEditoroEditorPersistence.ts`, `useEditoroEditorStatus.ts`, `MainHeader.vue`. |
85 | | -- Change image upload/DnD in editor: `useEditoroMainContentMedia.ts`, `useEditoroEditorUploads.ts`, `server/api/files/image.post.ts`. |
86 | | -- Change i18n/settings: `editoroPreferences.ts`, `nuxt.config.ts`, `i18n/locales/*.json`. |
87 | | - |
88 | | -## 6) Development Commands |
89 | | - |
90 | | -Use `pnpm` in normal environment: |
| 32 | +- `app/stores/editoroTree.ts` - tree items, selection, expansion, tree loading. |
| 33 | +- `app/stores/editoroEditor.ts` - editor content, view mode, save state, media upload. |
| 34 | +- `app/stores/editoroPreferences.ts` - locale, theme, hidden files settings. |
| 35 | +- `app/stores/editoroUi.ts` - modal states and workspace UI flags. |
91 | 36 |
|
92 | | -```bash |
93 | | -pnpm install |
94 | | -pnpm dev |
95 | | -pnpm lint |
96 | | -pnpm typecheck |
97 | | -pnpm build |
98 | | -``` |
| 37 | +### Server Layer |
| 38 | + |
| 39 | +- `server/utils/data-storage.ts` - path validation + filesystem operations. |
| 40 | +- `server/api/files/*.ts` - content/tree/create/rename/delete/move/image endpoints. |
| 41 | +- `app/services/files-api.ts` - client wrappers for server API. |
99 | 42 |
|
100 | | -## 7) Change Checklist for Agents |
| 43 | +## 3. Non-Negotiable Invariants |
101 | 44 |
|
102 | | -Before coding: |
103 | | -- Identify impacted layer(s): component, store, composable, server API. |
104 | | -- Prefer existing abstractions over adding logic to `Workspace.vue`. |
| 45 | +1. Keep all file operations inside `data/`. |
| 46 | +2. Preserve `?file=...` sync with selected file. |
| 47 | +3. Keep SSR/hydration stable (no client-only mismatch regressions). |
| 48 | +4. Preserve tree expansion/selection behavior across refresh/actions. |
| 49 | +5. Markdown media rules: uploads go to sibling `.media`. |
| 50 | +6. Markdown media rules: orphan media is removed only when truly unreferenced. |
| 51 | +7. Markdown media rules: empty `.media` directory should be removed. |
105 | 52 |
|
106 | | -While coding: |
107 | | -- Keep strict TypeScript typing; avoid `any`. |
108 | | -- In composables/helpers, keep comments in English. |
109 | | -- Preserve existing public API shape of `useEditoro()` unless refactor requires migration everywhere. |
| 53 | +## 4. Release and Deployment Surface |
110 | 54 |
|
111 | | -After coding: |
112 | | -- Run `lint` + `typecheck`. |
113 | | -- Manually verify: |
114 | | - - tree selection and expansion, |
115 | | - - route `?file=...` restore on refresh, |
116 | | - - create/rename/delete for files and folders, |
117 | | - - markdown autosave indicator behavior, |
118 | | - - image upload, preview, and orphan cleanup. |
| 55 | +- `Dockerfile` builds and runs Nuxt production output. |
| 56 | +- `docker-compose.yml` runs app with `./data:/app/data`. |
| 57 | +- `deploy/lxc/lxd-editoro.yaml` provides LXD cloud-init profile. |
| 58 | +- `deploy/lxc/lxc.conf` provides classic LXC config example. |
| 59 | +- CI workflow: `.github/workflows/docker-publish.yml`. |
| 60 | +- Push to `main` publishes `ghcr.io/codewec/editoro:dev`. |
| 61 | +- Push tag publishes `ghcr.io/codewec/editoro:latest` and `:<tag>`. |
119 | 62 |
|
120 | | -## 8) Preferred Refactoring Direction |
| 63 | +## 5. Changelog Workflow |
121 | 64 |
|
122 | | -- Keep `Workspace.vue` declarative (bindings only). |
123 | | -- Move heavy logic from components to composables. |
124 | | -- Keep stores focused: |
125 | | - - tree-only concerns in tree store/composables, |
126 | | - - editor-only concerns in editor store/composables, |
127 | | - - preferences-only concerns in preferences store. |
128 | | -- Keep server filesystem logic centralized in `data-storage.ts`. |
| 65 | +- Tool: `changelogen`. |
| 66 | +- Config: `.changelogenrc`. |
| 67 | +- Commands: `pnpm changelog`, `pnpm changelog:release`. |
| 68 | +- Conventional commits are expected for clean release notes. |
129 | 69 |
|
130 | | -## 9) Notes About Existing UX Decisions |
| 70 | +## 6. Development Commands |
131 | 71 |
|
132 | | -- Default locale is English. |
133 | | -- Hidden entries toggle exists and hidden folders use a different folder icon. |
134 | | -- Sidebar width is persisted and restored. |
135 | | -- Rich/raw is handled as a toggle mode. |
136 | | -- For folders, right panel shows folder contents with navigation to parent. |
| 72 | +```bash |
| 73 | +pnpm install |
| 74 | +pnpm dev |
| 75 | +pnpm lint |
| 76 | +pnpm typecheck |
| 77 | +pnpm build |
| 78 | +pnpm changelog |
| 79 | +``` |
137 | 80 |
|
| 81 | +## 7. Agent Working Rules |
| 82 | + |
| 83 | +- Prefer existing composables/stores over adding logic into large UI components. |
| 84 | +- Keep strict TypeScript typing, avoid `any`. |
| 85 | +- Keep comments in English (especially in composables/helpers). |
| 86 | +- For refactors, preserve existing public contracts used by `useEditoro()` and workspace bindings. |
| 87 | +- Validate critical flows after changes: tree open/select/expand. |
| 88 | +- Validate critical flows after changes: route restore on refresh. |
| 89 | +- Validate critical flows after changes: create/rename/delete/move. |
| 90 | +- Validate critical flows after changes: markdown autosave and status indicator. |
| 91 | +- Validate critical flows after changes: image upload/preview/cleanup. |
0 commit comments