@youtyan/code-viewer 0.2.10 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +49 -12
- package/dist/code-viewer.js +353 -48
- package/package.json +1 -1
- package/web/app.js +12219 -10860
- package/web/index.html +2 -22
- package/web/style.css +341 -28
package/README.md
CHANGED
|
@@ -14,6 +14,12 @@ Requires Node.js 20 or newer when installed from npm. Development uses
|
|
|
14
14
|
pills" that copy `@path#start-end` for AI agents.
|
|
15
15
|
- Browse commit history per branch and open any commit's changed files and
|
|
16
16
|
diff, with shareable `/history?ref=<branch>&commit=<sha>` links.
|
|
17
|
+
- Open per-file Blame and History tabs on a file detail page (GitHub-style):
|
|
18
|
+
Blame groups consecutive lines from the same commit with an Older→Newer
|
|
19
|
+
colour bar and lets you jump to the originating commit; History embeds the
|
|
20
|
+
same commit list and diff renderer used by `/history` inside the file's
|
|
21
|
+
tab shell, filtered to that path. Both tabs keep the Repository sidebar
|
|
22
|
+
visible.
|
|
17
23
|
- Open files directly from the repository or diff view, including large
|
|
18
24
|
generated files (virtualized source viewer with copy/open-full-view).
|
|
19
25
|
- Preview Markdown with a table of contents, task lists, Mermaid diagrams
|
|
@@ -27,8 +33,9 @@ Requires Node.js 20 or newer when installed from npm. Development uses
|
|
|
27
33
|
viewer.
|
|
28
34
|
- Browse SQLite, PostgreSQL, MySQL, Redis, Elasticsearch, and S3-compatible
|
|
29
35
|
object storage (MinIO, LocalStack) with a built-in datastore viewer.
|
|
30
|
-
- Read the built-in Help page for
|
|
31
|
-
|
|
36
|
+
- Read the built-in Help page for getting started, the `.code-viewer/`
|
|
37
|
+
project files, AI annotations, datastores, the agent skill, and
|
|
38
|
+
keybindings.
|
|
32
39
|
- Open repository folders (and parent folders of files) in the OS file
|
|
33
40
|
manager, create folders, and trash/restore files from localhost-only
|
|
34
41
|
actions.
|
|
@@ -110,6 +117,15 @@ resolved inside the repository, code blocks are highlighted with Shiki, and
|
|
|
110
117
|
Mermaid diagrams are rendered lazily in the browser (click any diagram to
|
|
111
118
|
open it in a lightbox).
|
|
112
119
|
|
|
120
|
+
A file detail page lays out four tabs — **Preview**, **Code**, **Blame**,
|
|
121
|
+
**History** — modelled after the GitHub file view. `Code` is the default and
|
|
122
|
+
`?preview=1` opts in to the Markdown / media preview. `Blame` and `History`
|
|
123
|
+
each have their own canonical URL (`view=blame`, `view=history`), so deep
|
|
124
|
+
links and the browser back/forward stay in sync. The Blame tab reuses the
|
|
125
|
+
source view's row component, so line numbers, drag-selection of `line=`
|
|
126
|
+
ranges, syntax highlighting and the Viewer Settings code font size all match
|
|
127
|
+
the Code tab.
|
|
128
|
+
|
|
113
129
|
Very large text files use a virtualized source viewer. Only visible rows are
|
|
114
130
|
rendered, and the page includes controls to copy the full file or reopen it in
|
|
115
131
|
the full non-virtual view.
|
|
@@ -226,7 +242,9 @@ Open Datastores in the global navigation to access:
|
|
|
226
242
|
whether each entry came from the browser or the CLI.
|
|
227
243
|
- **ER diagram** — auto-generated entity-relationship diagram showing
|
|
228
244
|
foreign-key relationships between tables.
|
|
229
|
-
- **Schema view** — table columns
|
|
245
|
+
- **Schema view** — table columns (with column comments when the database
|
|
246
|
+
defines them), indexes, foreign keys, triggers, and DDL. Tables themselves
|
|
247
|
+
surface a comment column on the database table list.
|
|
230
248
|
- **Global search** — full-text search across all tables and text columns of
|
|
231
249
|
a database.
|
|
232
250
|
- **Snapshots and diffs** — take point-in-time snapshots of selected tables
|
|
@@ -239,9 +257,10 @@ Open Datastores in the global navigation to access:
|
|
|
239
257
|
|
|
240
258
|
### CLI
|
|
241
259
|
|
|
242
|
-
AI agents can read
|
|
243
|
-
|
|
244
|
-
|
|
260
|
+
AI agents can run read-only queries, search content across tables, and
|
|
261
|
+
capture snapshots / diffs from the command line. The same operations are
|
|
262
|
+
mirrored under the Datastores tab in the browser UI, and every CLI result is
|
|
263
|
+
written to the per-repository history visible in the browser.
|
|
245
264
|
|
|
246
265
|
```sh
|
|
247
266
|
code-viewer query exec --db data.db --sql "SELECT * FROM users LIMIT 10" \
|
|
@@ -252,6 +271,22 @@ code-viewer query exec --db app.db --sql "SELECT count(*) FROM orders" \
|
|
|
252
271
|
|
|
253
272
|
code-viewer query list --db app.db --json
|
|
254
273
|
code-viewer query clear --db app.db
|
|
274
|
+
|
|
275
|
+
code-viewer query search --db app.db --term "john@example.com" \
|
|
276
|
+
--tables users,orders --include-non-text --max-hits 20
|
|
277
|
+
|
|
278
|
+
code-viewer query snapshot create --db app.db --tables users,orders \
|
|
279
|
+
--note "Before user registration test"
|
|
280
|
+
code-viewer query snapshot list --db app.db --json
|
|
281
|
+
code-viewer query snapshot note --id snap-abc123 --note "Updated context"
|
|
282
|
+
code-viewer query snapshot delete --id snap-abc123
|
|
283
|
+
|
|
284
|
+
code-viewer query diff create --before snap-abc123 --after snap-def456 \
|
|
285
|
+
--note "User registration test"
|
|
286
|
+
code-viewer query diff tables --id diff-xyz789
|
|
287
|
+
code-viewer query diff rows --id diff-xyz789 --table users --type inserted
|
|
288
|
+
code-viewer query diff list --db app.db --json
|
|
289
|
+
code-viewer query diff delete --id diff-xyz789
|
|
255
290
|
```
|
|
256
291
|
|
|
257
292
|
`code-viewer query --help` shows all command syntax. `code-viewer query
|
|
@@ -307,9 +342,9 @@ with `--include-non-text` and `--run-search`. For AI agents,
|
|
|
307
342
|
|
|
308
343
|
Annotations are grouped into sessions and persisted in
|
|
309
344
|
`.code-viewer/annotations.json` at the repository root, so the walkthrough
|
|
310
|
-
survives reloads and server restarts.
|
|
311
|
-
|
|
312
|
-
|
|
345
|
+
survives reloads and server restarts. See **Uploads and Scope Settings**
|
|
346
|
+
above for how `.code-viewer/` is treated by the viewer and how to opt out of
|
|
347
|
+
sharing it through git.
|
|
313
348
|
|
|
314
349
|
In the browser, the annotation icon in the header opens the side panel. The
|
|
315
350
|
current explanation is rendered at the top of the panel while the code stays
|
|
@@ -341,9 +376,11 @@ write concise Markdown explanations, and how to install the bundled agent skill.
|
|
|
341
376
|
|
|
342
377
|
### Agent Skill
|
|
343
378
|
|
|
344
|
-
The package bundles [Agent Skills](https://agentskills.io)
|
|
345
|
-
open standard)
|
|
346
|
-
|
|
379
|
+
The package bundles three [Agent Skills](https://agentskills.io)
|
|
380
|
+
(the SKILL.md open standard) — `code-viewer-annotate`, `code-viewer-query`,
|
|
381
|
+
and `code-viewer-snapshot` — that teach AI coding agents when and how to use
|
|
382
|
+
`annotate`, read-only `query`, and snapshot / diff workflows. A single
|
|
383
|
+
`skill install` copies all three into the selected agent directories:
|
|
347
384
|
|
|
348
385
|
```sh
|
|
349
386
|
npx -y @youtyan/code-viewer skill install # Claude Code (.claude/skills/)
|