feat: v0.7.0 files pane: browse, preview, diff, Claude's edits
- devdesk attach --fs-list/--fs-read/--git-status/--git-show/--asset (libexec/devdesk-files.sh), confined to the session folder. - The state hook records files Claude edits (Edit/Write/MultiEdit/ NotebookEdit) for the Changes tab's "C" badge; rename/end carry it. - Files pane: folders, CodeMirror read-only view, sanitized markdown preview in a sandboxed iframe with inlined relative images, images, Changes tab with line counts and diff against HEAD, "→ Claude" @path, resizable split. - The editor bundle ships as /usr/share/devdesk/assets/editor.js, is fetched over ttyd on first use, verified against the page's SHA-256 and cached in IndexedDB. - Fix: the state hook's field split collapsed empty fields. Closes #19 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -8,7 +8,7 @@ SHAREDIR := $(PREFIX)/share/devdesk
|
||||
TTYD_ARCH ?= x86_64
|
||||
|
||||
SHELL_SCRIPTS := bin/devdesk $(wildcard libexec/devdesk-*) scripts/fetch-ttyd.sh debian/devdesk.postinst debian/devdesk.postrm
|
||||
WEB_SOURCES := web/build.mjs web/index.template.html web/styles.css $(wildcard web/src/*.js) \
|
||||
WEB_SOURCES := web/build.mjs web/index.template.html web/styles.css $(wildcard web/src/*.js) $(wildcard web/editor/*.js) \
|
||||
vendor/web_template/base.css debian/changelog
|
||||
|
||||
.PHONY: all lint test install clean sync-template
|
||||
@@ -26,7 +26,7 @@ build/ttyd: vendor/ttyd/VERSION vendor/ttyd/SHA256SUMS scripts/fetch-ttyd.sh
|
||||
@touch $@
|
||||
|
||||
lint: node_modules/.package-lock.json
|
||||
npx eslint --max-warnings 0 --ext .js,.mjs web/src web/build.mjs tests/protocol.test.mjs
|
||||
npx eslint --max-warnings 0 --ext .js,.mjs web/src web/editor web/build.mjs tests/protocol.test.mjs
|
||||
shellcheck -x $(SHELL_SCRIPTS)
|
||||
jq empty share/claude-settings.json
|
||||
|
||||
@@ -41,8 +41,11 @@ install: all
|
||||
install -m 0755 libexec/devdesk-picker libexec/devdesk-claude-run libexec/devdesk-session-hook \
|
||||
libexec/devdesk-tmux-ready libexec/devdesk-serve libexec/devdesk-statusline \
|
||||
libexec/devdesk-deploy libexec/devdesk-state-hook libexec/devdesk-notify-matrix $(DESTDIR)$(LIBDIR)/
|
||||
install -m 0644 libexec/devdesk-files.sh $(DESTDIR)$(LIBDIR)/devdesk-files.sh
|
||||
install -m 0755 build/ttyd $(DESTDIR)$(LIBDIR)/bin/ttyd
|
||||
install -m 0644 dist/index.html share/tmux.conf share/claude-settings.json $(DESTDIR)$(SHAREDIR)/
|
||||
install -d $(DESTDIR)$(SHAREDIR)/assets
|
||||
install -m 0644 dist/assets/editor.js $(DESTDIR)$(SHAREDIR)/assets/editor.js
|
||||
install -m 0644 etc/env $(DESTDIR)$(SYSCONFDIR)/devdesk/env
|
||||
|
||||
clean:
|
||||
|
||||
@@ -46,6 +46,7 @@ The tmux server runs in its own unit, so every Claude process lives in **that**
|
||||
- **Ask Claude** types an investigation prompt into the current session without sending it.
|
||||
- Configure `DEVDESK_GRAFANA_URL`, plus a Viewer token in `DEVDESK_GRAFANA_TOKEN_FILE`.
|
||||
- **Repo / CI panel:** branch, ahead/behind, uncommitted changes, HEAD's Gitea CI status and open PRs for the session's folder. When CI fails, **Ask Claude to fix CI** types a prompt to read the failed job's log.
|
||||
- **Files** (Ctrl+Shift+E): browse the session's folder beside the terminal, read files with syntax highlighting, preview markdown (sanitized, with its relative images) and images, and review uncommitted changes: git status with line counts, a **C** badge on files Claude edited, and a diff against HEAD. **→ Claude** types `@path` into the prompt. Read-only for now. Paths can't leave the session folder. The editor bundle (`/usr/share/devdesk/assets/editor.js`) loads over ttyd the first time and is cached by the browser.
|
||||
- **Context:** a Claude `statusLine` command (`devdesk-statusline`) snapshots each session's model, context-window use and cost to `/var/lib/devdesk/context/<session>.json`. The Sessions panel shows it as a bar (cost in the tooltip), and Claude's own footer shows a one-line summary.
|
||||
- **Light mode:** the terminal switches palettes with the page. DevDesk starts Claude with its `dark-ansi` theme so Claude draws with the terminal's 16 colours, and the light palette maps bright white to ink; tmux and the status line use ANSI colours too. A session picks up Claude's theme the next time Claude starts in it (`/exit`, then ⏎ resumes the same conversation).
|
||||
- **Phone:** a key bar replaces the shortcut hints (Esc, Tab, ⇧Tab, ^C, ↑, ↓, ⏎, Claude/Shell window), and the panels open as a drawer.
|
||||
@@ -62,6 +63,7 @@ The tmux server runs in its own unit, so every Claude process lives in **that**
|
||||
| Shift+drag | Native browser selection (plain drag goes to tmux copy-mode, which copies via OSC 52) |
|
||||
| Ctrl+Shift+C / V | Copy selection / paste |
|
||||
| Ctrl+Shift+P | Command palette (also the ⌕ button) |
|
||||
| Ctrl+Shift+E | Files pane (Esc: back, then close) |
|
||||
|
||||
The **☀/◐** button switches light and dark mode (saved per browser, shared with the other web_template apps' `lt_theme` preference). Text size, desktop notifications (with a mute), the keyboard shortcuts sheet and fullscreen are in the **⋯** menu; everything is also in the command palette. In Chromium, fullscreen also captures Ctrl+W/Ctrl+T, which browsers otherwise keep for themselves.
|
||||
|
||||
|
||||
@@ -17,6 +17,8 @@ set -euo pipefail
|
||||
|
||||
# shellcheck source=libexec/devdesk-lib.sh
|
||||
. "${DEVDESK_LIBEXEC:-/usr/lib/devdesk}/devdesk-lib.sh"
|
||||
# shellcheck source=libexec/devdesk-files.sh
|
||||
. "$DEVDESK_LIBEXEC/devdesk-files.sh"
|
||||
|
||||
usage() {
|
||||
sed -n '2,12s/^# \{0,1\}//p' "$0"
|
||||
@@ -316,6 +318,13 @@ cmd_attach() {
|
||||
dd_linger
|
||||
return
|
||||
;;
|
||||
--fs-list | --fs-read | --git-status | --git-show | --asset)
|
||||
local action=${1#--}
|
||||
shift
|
||||
"cmd_${action//-/_}" "$@"
|
||||
dd_linger
|
||||
return
|
||||
;;
|
||||
--new | --rename | --end)
|
||||
local action=${1#--}
|
||||
shift
|
||||
|
||||
Vendored
+24
@@ -1,3 +1,27 @@
|
||||
devdesk (0.7.0) bookworm; urgency=medium
|
||||
|
||||
* Files pane (#19): a Files button (Ctrl+Shift+E) next to Panels opens the
|
||||
session's folder beside the terminal (a drag-resizable split on wide
|
||||
screens, an overlay on narrow ones and phones).
|
||||
- Browse folders; read files with syntax highlighting (CodeMirror,
|
||||
read-only, Ctrl+F search, line wrap toggle), markdown rendered as a
|
||||
sanitized preview with its relative images, images shown inline.
|
||||
- Changes tab: uncommitted git changes with line counts and a "C" badge
|
||||
on files Claude edited (recorded by the state hook from Edit/Write);
|
||||
diff against HEAD for any changed file. Non-git sessions list the files
|
||||
Claude edited there.
|
||||
- "→ Claude" types @path into the prompt; Copy path.
|
||||
- After Claude's turn the list refreshes, and an open file that changed
|
||||
on disk offers a reload.
|
||||
- Paths stay inside the session folder (no absolute paths, no symlink
|
||||
escapes). Read-only for now; editing is v0.8.0.
|
||||
- The editor (~600 KB) is not in the page: it ships in
|
||||
/usr/share/devdesk/assets, is fetched over ttyd the first time Files
|
||||
opens, checked against the page's SHA-256 and cached in the browser.
|
||||
* Fix: the state hook mis-read hook fields when Claude's message was empty.
|
||||
|
||||
-- Jared Vititoe <jjvititoe1@gmail.com> Thu, 08 Oct 2026 01:16:26 -0400
|
||||
|
||||
devdesk (0.6.1) bookworm; urgency=medium
|
||||
|
||||
* Inbox bell (#36): sessions waiting on you, firing alerts, and what
|
||||
|
||||
Vendored
+5
@@ -35,6 +35,11 @@ Comment: Bundled into index.html at build time:
|
||||
2014-2016 SourceLair Private Company, 2012-2013 Christopher Jeffrey);
|
||||
JetBrains Mono via @fontsource/jetbrains-mono (OFL-1.1,
|
||||
Copyright 2020 The JetBrains Mono Project Authors).
|
||||
Bundled into assets/editor.js (the file viewer) at build time:
|
||||
CodeMirror 6 and @lezer/highlight (MIT, Copyright 2018-2021 Marijn Haverbeke
|
||||
and others); marked (MIT, Copyright 2018+ MarkedJS, 2011-2018 Christopher
|
||||
Jeffrey); DOMPurify (Apache-2.0 or MPL-2.0 at the recipient's choice, here
|
||||
Apache-2.0, Copyright 2025 Dr.-Ing. Mario Heiderich, Cure53).
|
||||
|
||||
License: MIT
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
# shellcheck shell=bash disable=SC2016 # single-quoted jq filters use jq variables
|
||||
# File viewer commands (devdesk#19), sourced by bin/devdesk. Every path is
|
||||
# relative to the session's folder and must stay inside it: no absolute paths,
|
||||
# no newlines, no symlink escapes. Reached through `devdesk attach --fs-*`.
|
||||
|
||||
: "${DEVDESK_FS_MAX:=2097152}" # bytes the viewer opens
|
||||
: "${DEVDESK_FS_LIST_MAX:=2000}" # entries per directory listing
|
||||
: "${DEVDESK_ASSETS:=$DEVDESK_SHARE/assets}"
|
||||
|
||||
# Blob replies: a JSON header line, then base64 between markers (no body for
|
||||
# binary files the viewer can't show). The client waits for the END marker.
|
||||
DD_BLOB_BEGIN=DEVDESK-BLOB-BEGIN
|
||||
DD_BLOB_END=DEVDESK-BLOB-END
|
||||
|
||||
dd_session_root() {
|
||||
dd_valid_name "$1" || dd_die "invalid session name: $1"
|
||||
realpath -e -- "$(dd_resolve_dir "$1")" 2>/dev/null || dd_die "the folder of session '$1' is missing"
|
||||
}
|
||||
|
||||
# dd_fs_path ROOT REL -> the real path of REL inside ROOT, or die.
|
||||
dd_fs_path() {
|
||||
local root=$1 rel=${2:-.} p
|
||||
case $rel in
|
||||
/* | *$'\n'* | *$'\r'*) dd_die "bad path: $rel" ;;
|
||||
esac
|
||||
[ -n "$rel" ] || rel=.
|
||||
p=$(realpath -e -- "$root/$rel" 2>/dev/null) || dd_die "no such file: $rel"
|
||||
case "$p/" in
|
||||
"$root"/*) printf '%s\n' "$p" ;;
|
||||
*) dd_die "outside the session folder: $rel" ;;
|
||||
esac
|
||||
}
|
||||
|
||||
dd_mime() {
|
||||
case ${1,,} in
|
||||
*.png) echo image/png ;;
|
||||
*.jpg | *.jpeg) echo image/jpeg ;;
|
||||
*.gif) echo image/gif ;;
|
||||
*.webp) echo image/webp ;;
|
||||
*.svg) echo image/svg+xml ;;
|
||||
*.ico) echo image/x-icon ;;
|
||||
*.bmp) echo image/bmp ;;
|
||||
*.pdf) echo application/pdf ;;
|
||||
*) echo "" ;;
|
||||
esac
|
||||
}
|
||||
|
||||
# dd_blob FILE LABEL: header + body for one file on disk.
|
||||
dd_blob() {
|
||||
local f=$1 label=$2 size mtime sha mime binary=false utf8=true body=true
|
||||
read -r size mtime < <(stat -c '%s %Y' -- "$f")
|
||||
mime=$(dd_mime "$f")
|
||||
if [ "$size" -gt "$DEVDESK_FS_MAX" ]; then
|
||||
jq -cMn --arg p "$label" --argjson s "$size" --argjson m "$mtime" --argjson max "$DEVDESK_FS_MAX" \
|
||||
'{path: $p, size: $s, mtime: $m, tooLarge: true, max: $max}'
|
||||
return
|
||||
fi
|
||||
if head -c 8192 -- "$f" | grep -qaP '\x00'; then
|
||||
binary=true
|
||||
[ -n "$mime" ] || body=false
|
||||
elif ! iconv -f UTF-8 -t UTF-8 -- "$f" >/dev/null 2>&1; then
|
||||
utf8=false
|
||||
fi
|
||||
sha=$(sha256sum -- "$f" | cut -d' ' -f1)
|
||||
jq -cMn --arg p "$label" --argjson s "$size" --argjson m "$mtime" --arg h "$sha" \
|
||||
--argjson b "$binary" --argjson u "$utf8" --arg mime "$mime" --argjson body "$body" \
|
||||
'{path: $p, size: $s, mtime: $m, sha: $h, binary: $b, utf8: $u, body: $body,
|
||||
mime: (if $mime == "" then null else $mime end)}'
|
||||
printf '%s\n' "$DD_BLOB_BEGIN"
|
||||
if $body; then base64 -w0 -- "$f"; fi
|
||||
printf '\n%s\n' "$DD_BLOB_END"
|
||||
}
|
||||
|
||||
# --fs-list SESSION [REL]: one directory level, folders first, .git skipped.
|
||||
cmd_fs_list() {
|
||||
if [ $# -lt 1 ] || [ $# -gt 2 ]; then dd_die "usage: devdesk attach --fs-list SESSION [PATH]"; fi
|
||||
local root dir rel=${2:-.}
|
||||
root=$(dd_session_root "$1")
|
||||
dir=$(dd_fs_path "$root" "$rel")
|
||||
[ -d "$dir" ] || dd_die "not a folder: $rel"
|
||||
# %y: type, %Y: type behind a symlink, %s: size, %T@: mtime, %f: name.
|
||||
find "$dir" -mindepth 1 -maxdepth 1 ! -name .git -printf '%y\t%Y\t%s\t%T@\t%f\0' 2>/dev/null |
|
||||
head -z -n "$((DEVDESK_FS_LIST_MAX + 1))" |
|
||||
jq -cMRs --arg root "$root" --arg rel "${dir#"$root"}" --argjson max "$DEVDESK_FS_LIST_MAX" '
|
||||
(split("\u0000") | map(select(length > 0) | split("\t") |
|
||||
{t: .[0], to: .[1], s: (.[2] | tonumber), m: (.[3] | tonumber | floor), n: (.[4:] | join("\t"))})) as $all
|
||||
| {root: $root, dir: ($rel | ltrimstr("/")), truncated: ($all | length > $max),
|
||||
entries: ($all[:$max] | sort_by([(if .t == "d" or .to == "d" then 0 else 1 end), (.n | ascii_downcase)]))}'
|
||||
}
|
||||
|
||||
# --fs-read SESSION REL
|
||||
cmd_fs_read() {
|
||||
[ $# -eq 2 ] || dd_die "usage: devdesk attach --fs-read SESSION PATH"
|
||||
local root f
|
||||
root=$(dd_session_root "$1")
|
||||
f=$(dd_fs_path "$root" "$2")
|
||||
[ -f "$f" ] || dd_die "not a file: $2"
|
||||
dd_blob "$f" "${f#"$root"/}"
|
||||
}
|
||||
|
||||
# --git-status SESSION: changed files under the session folder, with line counts
|
||||
# and whether Claude edited them (from devdesk-state-hook's edit log).
|
||||
cmd_git_status() {
|
||||
[ $# -eq 1 ] || dd_die "usage: devdesk attach --git-status SESSION"
|
||||
local root g top prefix branch edits
|
||||
root=$(dd_session_root "$1")
|
||||
edits="$DEVDESK_STATE_DIR/edits/$1.txt"
|
||||
g=(git --no-optional-locks -C "$root")
|
||||
if ! top=$("${g[@]}" rev-parse --show-toplevel 2>/dev/null); then
|
||||
# Not a repository: only what Claude edited.
|
||||
jq -cMn --arg root "$root" --rawfile e <(cat -- "$edits" 2>/dev/null || true) '
|
||||
{git: false, root: $root, files: [$e | split("\n")[] | select(length > 0) | select(startswith($root + "/"))
|
||||
| {path: ltrimstr($root + "/"), x: " ", y: " ", claude: true}]}'
|
||||
return
|
||||
fi
|
||||
prefix=$("${g[@]}" rev-parse --show-prefix)
|
||||
branch=$("${g[@]}" symbolic-ref --short -q HEAD || echo "(detached)")
|
||||
{
|
||||
printf 'S\n'
|
||||
"${g[@]}" status --porcelain=v1 -z --untracked-files=all -- . 2>/dev/null | head -z -n 1000 | tr '\0' '\n'
|
||||
printf 'N\n'
|
||||
"${g[@]}" diff --numstat HEAD -- . 2>/dev/null | head -n 1000
|
||||
} | jq -cMRs --arg root "$root" --arg top "$top" --arg prefix "$prefix" --arg branch "$branch" \
|
||||
--rawfile e <(cat -- "$edits" 2>/dev/null || true) '
|
||||
(split("\nN\n") | .[0] | ltrimstr("S\n") | split("\n") | map(select(length > 2))) as $st
|
||||
| (split("\nN\n") | .[1] // "" | split("\n") | map(select(length > 0) | split("\t")
|
||||
| {key: .[2:] | join("\t"), value: {add: (.[0] | tonumber? // null), del: (.[1] | tonumber? // null)}}) | from_entries) as $num
|
||||
| ($e | split("\n") | map(select(length > 0))) as $claude
|
||||
# porcelain -z: "XY path", and after a rename/copy entry the next item is the old path.
|
||||
| reduce range(0; $st | length) as $i ({skip: false, files: []};
|
||||
if .skip then .skip = false
|
||||
else ($st[$i]) as $line | ($line[3:]) as $p
|
||||
| .files += [{repoPath: $p, x: $line[0:1], y: $line[1:2],
|
||||
from: (if ($line[0:1] | test("[RC]")) then $st[$i + 1] else null end)}]
|
||||
| .skip = ($line[0:1] | test("[RC]"))
|
||||
end)
|
||||
| .files | map(. + {path: (if (.repoPath | startswith($prefix)) then .repoPath | ltrimstr($prefix) else null end),
|
||||
add: $num[.repoPath].add, del: $num[.repoPath].del,
|
||||
claude: (($top + "/" + .repoPath) as $abs | any($claude[]; . == $abs))}) as $files
|
||||
| {git: true, root: $root, branch: $branch,
|
||||
files: ($files + [$claude[] | select(startswith($root + "/")) | ltrimstr($root + "/") as $p
|
||||
| select(any($files[]; .path == $p) | not)
|
||||
| {path: $p, repoPath: null, x: " ", y: " ", claude: true}])}'
|
||||
}
|
||||
|
||||
# --git-show SESSION REL: the HEAD version of a file, for diffs. An empty body
|
||||
# when HEAD doesn't have it (new file).
|
||||
cmd_git_show() {
|
||||
[ $# -eq 2 ] || dd_die "usage: devdesk attach --git-show SESSION PATH"
|
||||
local root g top prefix tmp rel=$2
|
||||
root=$(dd_session_root "$1")
|
||||
case $rel in /* | *$'\n'* | *..*) dd_die "bad path: $rel" ;; esac
|
||||
g=(git --no-optional-locks -C "$root")
|
||||
top=$("${g[@]}" rev-parse --show-toplevel 2>/dev/null) || dd_die "not a git repository"
|
||||
prefix=$("${g[@]}" rev-parse --show-prefix)
|
||||
tmp=$(mktemp)
|
||||
"${g[@]}" show "HEAD:$prefix$rel" >"$tmp" 2>/dev/null || : >"$tmp"
|
||||
dd_blob "$tmp" "$rel"
|
||||
rm -f "$tmp"
|
||||
}
|
||||
|
||||
# --asset NAME: a lazily loaded part of the web UI (the file viewer's editor),
|
||||
# shipped in $DEVDESK_ASSETS and cached by the browser.
|
||||
cmd_asset() {
|
||||
if [ $# -ne 1 ] || ! [[ $1 =~ ^[a-z0-9-]+\.js$ ]]; then dd_die "usage: devdesk attach --asset NAME.js"; fi
|
||||
[ -f "$DEVDESK_ASSETS/$1" ] || dd_die "no such asset: $1"
|
||||
dd_blob "$DEVDESK_ASSETS/$1" "$1"
|
||||
}
|
||||
@@ -132,7 +132,7 @@ dd_registry_set_claude() {
|
||||
|
||||
dd_registry_remove() {
|
||||
dd_registry_update 'del(.sessions[$n])' --arg n "$1"
|
||||
rm -f "$DEVDESK_CONTEXT_DIR/$1.json" "$DEVDESK_STATUS_DIR/$1.json"
|
||||
rm -f "$DEVDESK_CONTEXT_DIR/$1.json" "$DEVDESK_STATUS_DIR/$1.json" "$DEVDESK_STATE_DIR/edits/$1.txt"
|
||||
}
|
||||
|
||||
dd_registry_rename() {
|
||||
@@ -144,6 +144,9 @@ dd_registry_rename() {
|
||||
mv -f "$d/$1.json" "$d/$2.json"
|
||||
fi
|
||||
done
|
||||
if [ -f "$DEVDESK_STATE_DIR/edits/$1.txt" ]; then
|
||||
mv -f "$DEVDESK_STATE_DIR/edits/$1.txt" "$DEVDESK_STATE_DIR/edits/$2.txt"
|
||||
fi
|
||||
}
|
||||
|
||||
# Project name (directory or its slug) -> absolute directory inside the projects root.
|
||||
|
||||
@@ -16,7 +16,23 @@ outer=${TMUX:-}
|
||||
session=$(tmux display-message -p -t "$TMUX_PANE" '#S' 2>/dev/null)
|
||||
[[ $session =~ ^[A-Za-z0-9][A-Za-z0-9_-]{0,63}$ ]] || exit 0
|
||||
|
||||
IFS=$'\t' read -r event message < <(jq -rM '[.hook_event_name // "", (.message // "" | gsub("[\t\n]"; " "))] | @tsv' <<<"$input" 2>/dev/null)
|
||||
# Unit separator, not tab: read collapses runs of whitespace delimiters, so an
|
||||
# empty field would shift the ones after it.
|
||||
IFS=$'\x1f' read -r event message tool file < <(jq -rM '[.hook_event_name // "", (.message // "" | gsub("[\u001f\n]"; " ")),
|
||||
.tool_name // "", (.tool_input.file_path // .tool_input.notebook_path // "" | gsub("[\u001f\n]"; " "))] | join("\u001f")' <<<"$input" 2>/dev/null)
|
||||
|
||||
# Files Claude edits, for the file viewer's "Claude" badge (devdesk#19).
|
||||
case $event:$tool in
|
||||
PostToolUse:Edit | PostToolUse:Write | PostToolUse:MultiEdit | PostToolUse:NotebookEdit)
|
||||
if [[ $file == /* ]]; then
|
||||
log="${DEVDESK_STATE_DIR:-/var/lib/devdesk}/edits/$session.txt"
|
||||
mkdir -p "${log%/*}" 2>/dev/null
|
||||
if ! grep -qxF -- "$file" "$log" 2>/dev/null && [ "$(wc -l <"$log" 2>/dev/null || echo 0)" -lt 1000 ]; then
|
||||
printf '%s\n' "$file" >>"$log"
|
||||
fi
|
||||
fi
|
||||
;;
|
||||
esac
|
||||
case $event in
|
||||
UserPromptSubmit | PostToolUse) state=working ;;
|
||||
Notification) state=waiting ;;
|
||||
|
||||
Generated
+329
-1
@@ -7,20 +7,215 @@
|
||||
"name": "devdesk",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@codemirror/commands": "6.11.1",
|
||||
"@codemirror/lang-markdown": "6.5.2",
|
||||
"@codemirror/language": "6.13.1",
|
||||
"@codemirror/legacy-modes": "6.5.5",
|
||||
"@codemirror/merge": "6.12.2",
|
||||
"@codemirror/search": "6.7.2",
|
||||
"@codemirror/state": "6.7.6",
|
||||
"@codemirror/view": "6.43.14",
|
||||
"@fontsource/jetbrains-mono": "5.3.0",
|
||||
"@lezer/highlight": "1.2.5",
|
||||
"@xterm/addon-clipboard": "0.2.0",
|
||||
"@xterm/addon-fit": "0.11.0",
|
||||
"@xterm/addon-unicode11": "0.9.0",
|
||||
"@xterm/addon-web-links": "0.12.0",
|
||||
"@xterm/addon-webgl": "0.19.0",
|
||||
"@xterm/xterm": "6.0.0",
|
||||
"dompurify": "3.4.16",
|
||||
"esbuild": "0.28.2",
|
||||
"eslint": "8.57.1"
|
||||
"eslint": "8.57.1",
|
||||
"marked": "18.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/autocomplete": {
|
||||
"version": "6.20.3",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.20.3.tgz",
|
||||
"integrity": "sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/commands": {
|
||||
"version": "6.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.11.1.tgz",
|
||||
"integrity": "sha512-O/4hG3SC1YwcmQ0d2UVNDs+AsaNWd1iHVxbTeEBuqH+6bExAiPK3iS/BvpY6rZGURALv4ZD3sIgcCmRvw3ehBg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.7.0",
|
||||
"@codemirror/view": "^6.27.0",
|
||||
"@lezer/common": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-css": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-css/-/lang-css-6.3.1.tgz",
|
||||
"integrity": "sha512-kr5fwBGiGtmz6l0LSJIbno9QrifNMUusivHbnA1H6Dmqy4HZFte3UAICix1VuKo0lMPKQr2rqB+0BkKi/S3Ejg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@lezer/common": "^1.0.2",
|
||||
"@lezer/css": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-html": {
|
||||
"version": "6.4.12",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.12.tgz",
|
||||
"integrity": "sha512-pw2ReWKUqSkbvh76RAT4NYxiogRu+PWkR2ukAwO9uOgrm8uipkzjtKKtNpyeAQwHOqxEeSvAXZ6vr3AfyB9y/w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/lang-css": "^6.0.0",
|
||||
"@codemirror/lang-javascript": "^6.0.0",
|
||||
"@codemirror/language": "^6.4.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/css": "^1.1.0",
|
||||
"@lezer/html": "^1.3.12"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-javascript": {
|
||||
"version": "6.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.5.tgz",
|
||||
"integrity": "sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.0.0",
|
||||
"@codemirror/language": "^6.6.0",
|
||||
"@codemirror/lint": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/common": "^1.0.0",
|
||||
"@lezer/javascript": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lang-markdown": {
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lang-markdown/-/lang-markdown-6.5.2.tgz",
|
||||
"integrity": "sha512-AwBOdkWYuA//WcM0xO5PfHPUcmz/O2i5o0Nsg1U69SII/loCJlFI1Romd9xp2HYb1kYJRGZotyqRghuHH5n8Kw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.7.1",
|
||||
"@codemirror/lang-html": "^6.0.0",
|
||||
"@codemirror/language": "^6.3.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.0.0",
|
||||
"@lezer/common": "^1.2.1",
|
||||
"@lezer/markdown": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/language": {
|
||||
"version": "6.13.1",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.13.1.tgz",
|
||||
"integrity": "sha512-zfvU2r3TyylQLMj/te+5CnQ0rSqZi8B1oTCBbQkagcLW4Xc6imab6qN+pEJhsuNOLaJqiRyBXp9UhWA1DhVvDw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/streamparser": "^6.0.0",
|
||||
"@codemirror/view": "^6.23.0",
|
||||
"@lezer/common": "^1.5.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0",
|
||||
"style-mod": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/legacy-modes": {
|
||||
"version": "6.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.5.5.tgz",
|
||||
"integrity": "sha512-9ltT214oMb3Y1w5eAZMSigzrjzZnMI2Wa3Feq73rU/i4C56MkwrpfswfQYOr28C5pXr6dWwspNTMyeHXlzWMxg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/streamparser": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/lint": {
|
||||
"version": "6.9.7",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.7.tgz",
|
||||
"integrity": "sha512-28/+iWLYxKxsvGYhSYL7zaCZqLz5+FFFDq9tVsvGv9kv8RY4fFAchJ5WX9M3YrrRlTIsECjsXPqeNgnSmNP2dg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.42.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/merge": {
|
||||
"version": "6.12.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/merge/-/merge-6.12.2.tgz",
|
||||
"integrity": "sha512-V8JvyAPjHbPupqP7BeMcsdsYCbyPij74jxIbaIJDORI+VZzW44zFmon8bF+oxGWvOKhcRmkiUMXd8MxHr3YA2w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/language": "^6.0.0",
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.17.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"style-mod": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/search": {
|
||||
"version": "6.7.2",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.7.2.tgz",
|
||||
"integrity": "sha512-gUYkYhT2+n/+VGZ+8EzE5WFkYZUZYm1VOKDudIsNqh42uRVQJ0a6Yss9sdKT3MeOYfuL1N6AZA57oza0Oyr0LA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.0.0",
|
||||
"@codemirror/view": "^6.37.0",
|
||||
"crelt": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/state": {
|
||||
"version": "6.7.6",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.7.6.tgz",
|
||||
"integrity": "sha512-kAz+AncRtKuIknedxT1bq4XwXv4UowhbkHU1myPrtVb/jZtImWuV5BXzv5vK6i3kYACsdiZiQKFQQ5Mq7elW8w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@marijn/find-cluster-break": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@codemirror/streamparser": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/streamparser/-/streamparser-6.0.0.tgz",
|
||||
"integrity": "sha512-JTFPF6xrfjt0mnfGPgzcLiMwYmvIyNaoizp8BYzv8FE8KrT6GBGDZ190rtt+O7Wke3gG/MFHyiY9YGNeimof4w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@codemirror/view": {
|
||||
"version": "6.43.14",
|
||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.43.14.tgz",
|
||||
"integrity": "sha512-hC45YnmJNR1rz42OF57BLoQNFMV12/13drnvibDsR2quNDmldcb4WvYVV81hFQg56i9lcqQMEDqilhX2QDcGQQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@codemirror/state": "^6.7.0",
|
||||
"crelt": "^1.0.6",
|
||||
"style-mod": "^4.1.0",
|
||||
"w3c-keyname": "^2.2.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.28.2",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
|
||||
@@ -574,6 +769,87 @@
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/@lezer/common": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.3.tgz",
|
||||
"integrity": "sha512-H0iErY4e43LpXbYDyBci5W4v/RwTgGV3YzYOlJPiGZ8RY8w51kVE+xLn1tg3Z6UmSfyETvtsUK3r7YsgDQEI7Q==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@lezer/css": {
|
||||
"version": "1.3.9",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.9.tgz",
|
||||
"integrity": "sha512-ZmzgvTOBdJWGIsY/ItAfN7UW8DV802oZG+jeG6E508SwEzz5YhuAajptpWPICvIyqYAD2+VjMdOS40GgGkyEOQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/highlight": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.5.tgz",
|
||||
"integrity": "sha512-O1GMVKgtf5YspFaRzpmqkVgMtIk2HG9uMAbH6wdAIdNh3TVzCsch/+cRi+6l2//UGDKe6NB9BW3cvuR5ezMQ0w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/html": {
|
||||
"version": "1.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.13.tgz",
|
||||
"integrity": "sha512-oI7n6NJml729m7pjm9lvLvmXbdoMoi2f+1pwSDJkl9d68zGr7a9Btz8NdHTGQZtW2DA25ybeuv/SyDb9D5tseg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.0.0",
|
||||
"@lezer/lr": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/javascript": {
|
||||
"version": "1.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.6.tgz",
|
||||
"integrity": "sha512-sEvOqpl4vJQca0NugSQK02vQPbc5KrvoojnYGoqqFgFO0MtcYhwGiHKVEB+LuXYJnfyXo4QPA8ztbrEa4Fw5NA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.2.0",
|
||||
"@lezer/highlight": "^1.1.3",
|
||||
"@lezer/lr": "^1.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/lr": {
|
||||
"version": "1.4.11",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.11.tgz",
|
||||
"integrity": "sha512-UwgZcl1R66H2hDzBrA7kWyYmX6s8p5TQ+e/t7CuvgCtBEPxbEPaHYHu+pJBvTvDotEJpuQkJjbXuHiw5Cixxgw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@lezer/markdown": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@lezer/markdown/-/markdown-1.8.0.tgz",
|
||||
"integrity": "sha512-X6w3A2NpyhdtGqTWRJB8gR4QDXBaFMbTOs780ZdZ15KKCfBXOQTKcB3Vr+W6tqJHVlealt53tLmHRvOqPTQgYA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@lezer/common": "^1.5.0",
|
||||
"@lezer/highlight": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@marijn/find-cluster-break": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.4.tgz",
|
||||
"integrity": "sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@@ -612,6 +888,14 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/trusted-types": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/@ungap/structured-clone": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.4.0.tgz",
|
||||
@@ -812,6 +1096,13 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/crelt": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.7.tgz",
|
||||
"integrity": "sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/cross-spawn": {
|
||||
"version": "7.0.6",
|
||||
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
|
||||
@@ -865,6 +1156,16 @@
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dompurify": {
|
||||
"version": "3.4.16",
|
||||
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.16.tgz",
|
||||
"integrity": "sha512-sqo+pNp3qRhCIpbgRi1y8Tgk27Bo2Ry7w0dC1NBeNTdZChWjz9Xb/KOoZbRP/R6pQZ80Qw8YhXw13hWWBbMRnQ==",
|
||||
"dev": true,
|
||||
"license": "(MPL-2.0 OR Apache-2.0)",
|
||||
"optionalDependencies": {
|
||||
"@types/trusted-types": "^2.0.7"
|
||||
}
|
||||
},
|
||||
"node_modules/esbuild": {
|
||||
"version": "0.28.2",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
|
||||
@@ -1423,6 +1724,19 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "18.1.0",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-18.1.0.tgz",
|
||||
"integrity": "sha512-PamYXWWWg2nboG3oX5Ffzpy3EFZROqZJK9hSlMmUnekp7TxPs5DcT95vwd46m73/exfKCRVMtgXoPMI4FEJL6w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 20"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
|
||||
@@ -1705,6 +2019,13 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/style-mod": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.4.tgz",
|
||||
"integrity": "sha512-XXWIQt633/EpAFx8aZDOTjBzrCaGmhvEQlQo6MVPfa2OzO2cWo+4hV9h+6UkHYlXGfy+ODXKUdP7Pthmcu5ATw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
@@ -1761,6 +2082,13 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-keyname": {
|
||||
"version": "2.2.8",
|
||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||
"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/which": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
|
||||
|
||||
+16
-3
@@ -4,21 +4,34 @@
|
||||
"description": "Persistent browser terminal for Claude Code (ttyd + tmux), LotusGuild TDS styling",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"engines": { "node": ">=18" },
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "node web/build.mjs",
|
||||
"lint": "eslint --ext .js,.mjs web/src web/build.mjs tests/protocol.test.mjs",
|
||||
"lint": "eslint --ext .js,.mjs web/src web/editor web/build.mjs tests/protocol.test.mjs",
|
||||
"test": "node --test tests/*.test.mjs"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@codemirror/commands": "6.11.1",
|
||||
"@codemirror/lang-markdown": "6.5.2",
|
||||
"@codemirror/language": "6.13.1",
|
||||
"@codemirror/legacy-modes": "6.5.5",
|
||||
"@codemirror/merge": "6.12.2",
|
||||
"@codemirror/search": "6.7.2",
|
||||
"@codemirror/state": "6.7.6",
|
||||
"@codemirror/view": "6.43.14",
|
||||
"@fontsource/jetbrains-mono": "5.3.0",
|
||||
"@lezer/highlight": "1.2.5",
|
||||
"@xterm/addon-clipboard": "0.2.0",
|
||||
"@xterm/addon-fit": "0.11.0",
|
||||
"@xterm/addon-unicode11": "0.9.0",
|
||||
"@xterm/addon-web-links": "0.12.0",
|
||||
"@xterm/addon-webgl": "0.19.0",
|
||||
"@xterm/xterm": "6.0.0",
|
||||
"dompurify": "3.4.16",
|
||||
"esbuild": "0.28.2",
|
||||
"eslint": "8.57.1"
|
||||
"eslint": "8.57.1",
|
||||
"marked": "18.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -491,3 +491,106 @@ posts() { [ -f "$TMP/posts" ] && wc -l <"$TMP/posts" || echo 0; }
|
||||
run claude_args alpha
|
||||
[ "$output" = "-n alpha --settings $REPO/share/claude-settings.json --remote-control devdesk-alpha" ]
|
||||
}
|
||||
|
||||
# Decode a blob reply (header line, base64 between markers) into $TMP/blob.
|
||||
blob_body() {
|
||||
sed -n '/^DEVDESK-BLOB-BEGIN$/,/^DEVDESK-BLOB-END$/p' <<<"$1" | sed '1d;$d' | base64 -d >"$TMP/blob"
|
||||
}
|
||||
|
||||
@test "fs-list lists one level, folders first, and stays inside the session folder (#19)" {
|
||||
p="$DEVDESK_PROJECTS_ROOT/alpha"
|
||||
mkdir -p "$p/src/deep" "$p/.git"
|
||||
echo hi >"$p/README.md"
|
||||
echo x >"$p/src/a.sh"
|
||||
ln -s "$TMP/outside" "$p/escape-link"
|
||||
ln -s src "$p/src-link"
|
||||
run devdesk attach --fs-list alpha
|
||||
[ "$status" -eq 0 ]
|
||||
# Folders first (a symlink to a folder counts, even one that escapes: opening it fails).
|
||||
[ "$(jq -r '[.entries[].n] | join(",")' <<<"$output")" = "escape-link,src,src-link,README.md" ]
|
||||
run devdesk attach --fs-list alpha src
|
||||
[ "$(jq -r '.dir + ":" + ([.entries[].n] | join(","))' <<<"$output")" = "src:deep,a.sh" ]
|
||||
for bad in ../ /etc escape-link "src/../../alpha/../../outside"; do
|
||||
run devdesk attach --fs-list alpha "$bad"
|
||||
[ "$status" -ne 0 ]
|
||||
done
|
||||
run devdesk attach --fs-list alpha src-link
|
||||
[ "$status" -eq 0 ]
|
||||
}
|
||||
|
||||
@test "fs-read returns text, images and refuses binaries, big files and escapes (#19)" {
|
||||
p="$DEVDESK_PROJECTS_ROOT/alpha"
|
||||
printf 'line 1\r\nüñí\n' >"$p/notes.md"
|
||||
printf '\x89PNG\r\n\x1a\n\0\0\0' >"$p/pic.png"
|
||||
head -c 100 /dev/zero >"$p/blob.bin"
|
||||
head -c 3000 /dev/zero | tr '\0' a >"$p/big.txt"
|
||||
run devdesk attach --fs-read alpha notes.md
|
||||
[ "$status" -eq 0 ]
|
||||
[ "$(head -n1 <<<"$output" | jq -r '[.path, .binary, .utf8, .body] | @tsv')" = "$(printf 'notes.md\tfalse\ttrue\ttrue')" ]
|
||||
blob_body "$output"
|
||||
cmp "$TMP/blob" "$p/notes.md"
|
||||
run devdesk attach --fs-read alpha pic.png
|
||||
[ "$(head -n1 <<<"$output" | jq -r '[.mime, .body] | @tsv')" = "$(printf 'image/png\ttrue')" ]
|
||||
run devdesk attach --fs-read alpha blob.bin
|
||||
[ "$(head -n1 <<<"$output" | jq -r '[.binary, .body] | @tsv')" = "$(printf 'true\tfalse')" ]
|
||||
run env DEVDESK_FS_MAX=1000 "$REPO/bin/devdesk" attach --fs-read alpha big.txt
|
||||
[ "$(head -n1 <<<"$output" | jq -r '.tooLarge')" = true ]
|
||||
run devdesk attach --fs-read alpha ../alpha/../../outside
|
||||
[ "$status" -ne 0 ]
|
||||
}
|
||||
|
||||
@test "git-status and git-show report changes, line counts and Claude's edits (#19)" {
|
||||
p="$DEVDESK_PROJECTS_ROOT/alpha"
|
||||
git -C "$p" init -q -b main
|
||||
git -C "$p" -c user.name=t -c user.email=t@t commit -q --allow-empty -m init
|
||||
printf 'one\ntwo\n' >"$p/kept.txt"
|
||||
printf 'old\n' >"$p/moved.txt"
|
||||
git -C "$p" add . && git -C "$p" -c user.name=t -c user.email=t@t commit -q -m files
|
||||
printf 'one\nTWO\nthree\n' >"$p/kept.txt"
|
||||
git -C "$p" mv moved.txt renamed.txt
|
||||
echo new >"$p/fresh.txt"
|
||||
mkdir -p "$DEVDESK_STATE_DIR/edits"
|
||||
printf '%s\n' "$p/kept.txt" "$p/notes-outside-git.txt" >"$DEVDESK_STATE_DIR/edits/alpha.txt"
|
||||
run devdesk attach --git-status alpha
|
||||
[ "$status" -eq 0 ]
|
||||
[ "$(jq -r '.files | map("\(.x)\(.y) \(.path) +\(.add) -\(.del) \(.claude)") | sort | join("|")' <<<"$output")" = \
|
||||
" notes-outside-git.txt +null -null true| M kept.txt +2 -1 true|?? fresh.txt +null -null false|R renamed.txt +null -null false" ]
|
||||
[ "$(jq -r '.files[] | select(.path == "renamed.txt") | .from' <<<"$output")" = moved.txt ]
|
||||
run devdesk attach --git-show alpha kept.txt
|
||||
blob_body "$output"
|
||||
[ "$(cat "$TMP/blob")" = "$(printf 'one\ntwo')" ]
|
||||
run devdesk attach --git-show alpha fresh.txt
|
||||
[ "$(head -n1 <<<"$output" | jq -r '.size')" = 0 ]
|
||||
run devdesk attach --git-status alpha
|
||||
run env DEVDESK_PROJECTS_ROOT="$TMP/outside" "$REPO/bin/devdesk" attach --git-status alpha
|
||||
[ "$status" -eq 0 ]
|
||||
}
|
||||
|
||||
@test "the state hook logs Claude's edits; rename moves and end removes the log (#19)" {
|
||||
start_server
|
||||
devdesk new alpha
|
||||
pane=$(tmux -S "$DEVDESK_SOCKET" display -p -t =alpha:shell '#{pane_id}')
|
||||
hook() { TMUX="$DEVDESK_SOCKET,1,0" TMUX_PANE="$pane" "$REPO/libexec/devdesk-state-hook"; }
|
||||
echo '{"hook_event_name":"PostToolUse","tool_name":"Edit","tool_input":{"file_path":"/x/a.txt"}}' | hook
|
||||
echo '{"hook_event_name":"PostToolUse","tool_name":"Write","tool_input":{"file_path":"/x/a.txt"}}' | hook
|
||||
echo '{"hook_event_name":"PostToolUse","tool_name":"Bash","tool_input":{"command":"ls"}}' | hook
|
||||
echo '{"hook_event_name":"PostToolUse","tool_name":"NotebookEdit","tool_input":{"notebook_path":"/x/n.ipynb"}}' | hook
|
||||
[ "$(cat "$DEVDESK_STATE_DIR/edits/alpha.txt")" = "$(printf '/x/a.txt\n/x/n.ipynb')" ]
|
||||
devdesk rename alpha beta
|
||||
[ -f "$DEVDESK_STATE_DIR/edits/beta.txt" ] && [ ! -e "$DEVDESK_STATE_DIR/edits/alpha.txt" ]
|
||||
devdesk end beta
|
||||
[ ! -e "$DEVDESK_STATE_DIR/edits/beta.txt" ]
|
||||
}
|
||||
|
||||
@test "asset serves only named .js files from the assets folder (#19)" {
|
||||
mkdir -p "$TMP/assets"
|
||||
echo 'window.X = 1;' >"$TMP/assets/editor.js"
|
||||
run env DEVDESK_ASSETS="$TMP/assets" "$REPO/bin/devdesk" attach --asset editor.js
|
||||
[ "$status" -eq 0 ]
|
||||
blob_body "$output"
|
||||
cmp "$TMP/blob" "$TMP/assets/editor.js"
|
||||
for bad in ../etc/passwd editor.css nope.js; do
|
||||
run env DEVDESK_ASSETS="$TMP/assets" "$REPO/bin/devdesk" attach --asset "$bad"
|
||||
[ "$status" -ne 0 ]
|
||||
done
|
||||
}
|
||||
|
||||
+27
-1
@@ -2,6 +2,7 @@
|
||||
// file and nothing else), with CSS, JS, fonts and the favicon all inlined.
|
||||
import { build, transform } from 'esbuild';
|
||||
import { readFile, writeFile, mkdir } from 'node:fs/promises';
|
||||
import { createHash } from 'node:crypto';
|
||||
import { dirname, join } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
@@ -33,8 +34,29 @@ async function fontFaces(weights) {
|
||||
return faces.join('\n');
|
||||
}
|
||||
|
||||
// The file viewer's editor (devdesk#19): its own IIFE, served over the ttyd
|
||||
// channel by `devdesk attach --asset editor.js` and cached by the browser. The
|
||||
// page carries its SHA-256, which is both the integrity check and the cache key.
|
||||
async function editorBundle() {
|
||||
const out = await build({
|
||||
entryPoints: [at('web', 'editor', 'index.js')],
|
||||
bundle: true,
|
||||
minify: true,
|
||||
format: 'iife',
|
||||
globalName: 'DevDeskEditor',
|
||||
target: ['es2020'],
|
||||
write: false,
|
||||
legalComments: 'eof',
|
||||
});
|
||||
const code = out.outputFiles[0].text;
|
||||
await mkdir(at('dist', 'assets'), { recursive: true });
|
||||
await writeFile(at('dist', 'assets', 'editor.js'), code);
|
||||
return { sha: createHash('sha256').update(code).digest('hex'), size: Buffer.byteLength(code) };
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const ver = await version();
|
||||
const editor = await editorBundle();
|
||||
|
||||
const js = await build({
|
||||
entryPoints: [at('web', 'src', 'main.js')],
|
||||
@@ -44,7 +66,10 @@ async function main() {
|
||||
target: ['es2020'],
|
||||
write: false,
|
||||
legalComments: 'eof',
|
||||
define: { __DEVDESK_VERSION__: JSON.stringify(ver) },
|
||||
define: {
|
||||
__DEVDESK_VERSION__: JSON.stringify(ver),
|
||||
__EDITOR_SHA__: JSON.stringify(editor.sha),
|
||||
},
|
||||
});
|
||||
|
||||
const css = await transform([
|
||||
@@ -67,6 +92,7 @@ async function main() {
|
||||
await mkdir(at('dist'), { recursive: true });
|
||||
await writeFile(at('dist', 'index.html'), html);
|
||||
console.log(`dist/index.html ${(html.length / 1024).toFixed(0)} KiB (devdesk ${ver})`);
|
||||
console.log(`dist/assets/editor.js ${(editor.size / 1024).toFixed(0)} KiB sha256 ${editor.sha.slice(0, 12)}`);
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
// The file viewer's editor bundle (devdesk#19): CodeMirror 6 with stream-mode
|
||||
// languages, a unified diff view, and markdown rendering. Built separately to
|
||||
// dist/assets/editor.js (window.DevDeskEditor) and loaded over the ttyd channel
|
||||
// the first time the Files pane opens, so the page itself stays small.
|
||||
import { EditorView, keymap, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, highlightSpecialChars } from '@codemirror/view';
|
||||
import { EditorState } from '@codemirror/state';
|
||||
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
|
||||
import { syntaxHighlighting, HighlightStyle, StreamLanguage, bracketMatching, foldGutter, foldKeymap } from '@codemirror/language';
|
||||
import { search, searchKeymap, highlightSelectionMatches } from '@codemirror/search';
|
||||
import { markdownLanguage } from '@codemirror/lang-markdown';
|
||||
import { unifiedMergeView } from '@codemirror/merge';
|
||||
import { tags as t } from '@lezer/highlight';
|
||||
import { shell } from '@codemirror/legacy-modes/mode/shell';
|
||||
import { python } from '@codemirror/legacy-modes/mode/python';
|
||||
import { javascript, json, typescript } from '@codemirror/legacy-modes/mode/javascript';
|
||||
import { yaml } from '@codemirror/legacy-modes/mode/yaml';
|
||||
import { toml } from '@codemirror/legacy-modes/mode/toml';
|
||||
import { properties } from '@codemirror/legacy-modes/mode/properties';
|
||||
import { nginx } from '@codemirror/legacy-modes/mode/nginx';
|
||||
import { diff as diffMode } from '@codemirror/legacy-modes/mode/diff';
|
||||
import { css } from '@codemirror/legacy-modes/mode/css';
|
||||
import { xml, html } from '@codemirror/legacy-modes/mode/xml';
|
||||
import { go } from '@codemirror/legacy-modes/mode/go';
|
||||
import { rust } from '@codemirror/legacy-modes/mode/rust';
|
||||
import { standardSQL } from '@codemirror/legacy-modes/mode/sql';
|
||||
import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
|
||||
import { lua } from '@codemirror/legacy-modes/mode/lua';
|
||||
import { perl } from '@codemirror/legacy-modes/mode/perl';
|
||||
import { ruby } from '@codemirror/legacy-modes/mode/ruby';
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
const MODES = {
|
||||
shell, python, javascript, json, typescript, yaml, toml, properties, nginx, diff: diffMode, css, xml, html,
|
||||
go, rust, sql: standardSQL, dockerfile: dockerFile, lua, perl, ruby,
|
||||
};
|
||||
|
||||
const BY_EXT = {
|
||||
md: 'markdown', markdown: 'markdown', mdx: 'markdown',
|
||||
sh: 'shell', bash: 'shell', zsh: 'shell', ksh: 'shell', env: 'shell', bats: 'shell',
|
||||
py: 'python', pyi: 'python',
|
||||
js: 'javascript', mjs: 'javascript', cjs: 'javascript', jsx: 'javascript',
|
||||
ts: 'typescript', tsx: 'typescript', mts: 'typescript',
|
||||
json: 'json', jsonc: 'json', webmanifest: 'json',
|
||||
yml: 'yaml', yaml: 'yaml',
|
||||
toml: 'toml',
|
||||
ini: 'properties', cfg: 'properties', conf: 'properties', properties: 'properties',
|
||||
service: 'properties', timer: 'properties', socket: 'properties', mount: 'properties', network: 'properties',
|
||||
diff: 'diff', patch: 'diff',
|
||||
css: 'css', scss: 'css',
|
||||
xml: 'xml', svg: 'xml', plist: 'xml',
|
||||
html: 'html', htm: 'html', php: 'html', j2: 'html', jinja: 'html',
|
||||
go: 'go', rs: 'rust', sql: 'sql', lua: 'lua', pl: 'perl', pm: 'perl', rb: 'ruby',
|
||||
};
|
||||
|
||||
// Language for a path: extension, a few well-known names, else none.
|
||||
export function languageFor(path) {
|
||||
const name = path.split('/').pop().toLowerCase();
|
||||
if (name === 'dockerfile' || name.startsWith('dockerfile.') || name.endsWith('.dockerfile')) return 'dockerfile';
|
||||
if (name === 'makefile' || name === 'gnumakefile') return 'shell';
|
||||
if (/(^|\/)nginx\//.test(path) || name === 'nginx.conf') return 'nginx';
|
||||
if (['.bashrc', '.profile', '.bash_profile', '.zshrc', 'pkgbuild'].includes(name)) return 'shell';
|
||||
if (name.startsWith('.env')) return 'shell';
|
||||
const ext = name.includes('.') ? name.split('.').pop() : '';
|
||||
return BY_EXT[ext] ?? null;
|
||||
}
|
||||
|
||||
function languageExtension(lang) {
|
||||
if (lang === 'markdown') return markdownLanguage;
|
||||
if (lang && MODES[lang]) return StreamLanguage.define(MODES[lang]);
|
||||
return [];
|
||||
}
|
||||
|
||||
// Colours come from the page's TDS variables, so dark/light mode just works.
|
||||
const highlight = HighlightStyle.define([
|
||||
{ tag: [t.keyword, t.controlKeyword, t.operatorKeyword, t.modifier], color: 'var(--accent-orange)' },
|
||||
{ tag: [t.string, t.special(t.string), t.regexp], color: 'var(--accent-green)' },
|
||||
{ tag: [t.comment, t.lineComment, t.blockComment, t.meta], color: 'var(--text-muted)', fontStyle: 'italic' },
|
||||
{ tag: [t.number, t.bool, t.atom, t.null], color: 'var(--accent-purple)' },
|
||||
{ tag: [t.typeName, t.className, t.namespace], color: 'var(--accent-amber)' },
|
||||
{ tag: [t.function(t.variableName), t.function(t.propertyName), t.definition(t.variableName)], color: 'var(--accent-cyan)' },
|
||||
{ tag: [t.propertyName, t.attributeName], color: 'var(--accent-cyan)' },
|
||||
{ tag: [t.tagName], color: 'var(--accent-orange)' },
|
||||
{ tag: [t.heading, t.heading1, t.heading2, t.heading3], color: 'var(--accent-cyan)', fontWeight: 'bold' },
|
||||
{ tag: t.strong, fontWeight: 'bold' },
|
||||
{ tag: t.emphasis, fontStyle: 'italic' },
|
||||
{ tag: t.strikethrough, textDecoration: 'line-through' },
|
||||
{ tag: [t.link, t.url], color: 'var(--accent-cyan)', textDecoration: 'underline' },
|
||||
{ tag: [t.monospace], color: 'var(--accent-amber)' },
|
||||
{ tag: [t.quote], color: 'var(--text-secondary)', fontStyle: 'italic' },
|
||||
{ tag: t.inserted, color: 'var(--accent-green)' },
|
||||
{ tag: t.deleted, color: 'var(--accent-red)' },
|
||||
{ tag: t.invalid, color: 'var(--accent-red)' },
|
||||
]);
|
||||
|
||||
const theme = EditorView.theme({
|
||||
'&': { height: '100%', color: 'var(--text-primary)', backgroundColor: 'var(--bg-terminal)', fontSize: 'var(--dd-editor-font, 13px)' },
|
||||
'.cm-scroller': { fontFamily: 'var(--font-mono)', lineHeight: '1.5' },
|
||||
'.cm-content': { caretColor: 'var(--accent-orange)' },
|
||||
'.cm-cursor': { borderLeftColor: 'var(--accent-orange)' },
|
||||
'.cm-gutters': { backgroundColor: 'var(--bg-secondary)', color: 'var(--text-dim)', border: 'none', borderRight: '1px solid var(--border-dim)' },
|
||||
'.cm-activeLine': { backgroundColor: 'var(--accent-cyan-dim)' },
|
||||
'.cm-activeLineGutter': { backgroundColor: 'var(--accent-cyan-dim)', color: 'var(--accent-cyan)' },
|
||||
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': { backgroundColor: 'rgba(0, 150, 220, 0.28) !important' },
|
||||
'.cm-searchMatch': { backgroundColor: 'var(--accent-amber-dim)', outline: '1px solid var(--accent-amber)' },
|
||||
'.cm-searchMatch.cm-searchMatch-selected': { backgroundColor: 'var(--accent-orange-dim)' },
|
||||
'.cm-selectionMatch': { backgroundColor: 'var(--accent-cyan-dim)' },
|
||||
'.cm-panels': { backgroundColor: 'var(--bg-secondary)', color: 'var(--text-primary)', borderColor: 'var(--border-color)' },
|
||||
'.cm-panel input, .cm-panel button': { fontFamily: 'var(--font-mono)', fontSize: '12px' },
|
||||
'.cm-textfield': { backgroundColor: 'var(--bg-input)', color: 'var(--text-primary)', border: '1px solid var(--border-color)' },
|
||||
'.cm-button': { backgroundImage: 'none', backgroundColor: 'var(--bg-tertiary)', color: 'var(--text-primary)', border: '1px solid var(--border-color)' },
|
||||
'.cm-foldGutter span': { color: 'var(--text-dim)' },
|
||||
// unified diff
|
||||
'.cm-changedLine': { backgroundColor: 'var(--accent-green-dim) !important' },
|
||||
'.cm-changedText': { backgroundColor: 'rgba(0, 200, 120, 0.22) !important' },
|
||||
'.cm-deletedChunk': { backgroundColor: 'var(--accent-red-dim) !important' },
|
||||
'.cm-deletedChunk .cm-deletedText, .cm-deletedChunk del': { backgroundColor: 'rgba(255, 45, 85, 0.22)', textDecoration: 'none' },
|
||||
'.cm-insertedLine': { backgroundColor: 'var(--accent-green-dim)' },
|
||||
'.cm-changeGutter': { width: '3px' },
|
||||
'.cm-changedLineGutter': { backgroundColor: 'var(--accent-green)' },
|
||||
'.cm-deletedLineGutter': { backgroundColor: 'var(--accent-red)' },
|
||||
});
|
||||
|
||||
function baseExtensions(path, { readOnly = true, wrap = false } = {}) {
|
||||
return [
|
||||
lineNumbers(), foldGutter(), highlightSpecialChars(), highlightActiveLine(), highlightActiveLineGutter(),
|
||||
drawSelection(), history(), search({ top: true }), highlightSelectionMatches(), bracketMatching(),
|
||||
syntaxHighlighting(highlight), theme, languageExtension(languageFor(path)),
|
||||
// Read-only document in an editable view: the caret, selection, arrow keys
|
||||
// and Ctrl+F work, typing doesn't; no on-screen keyboard on phones.
|
||||
EditorState.readOnly.of(readOnly),
|
||||
readOnly ? EditorView.contentAttributes.of({ inputmode: 'none' }) : [],
|
||||
keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, ...foldKeymap]),
|
||||
wrap ? EditorView.lineWrapping : [],
|
||||
];
|
||||
}
|
||||
|
||||
// Read-only (v1) view of a file.
|
||||
export function viewer(parent, { doc, path, wrap }) {
|
||||
const view = new EditorView({ parent, state: EditorState.create({ doc, extensions: baseExtensions(path, { wrap }) }) });
|
||||
return { view, destroy: () => view.destroy() };
|
||||
}
|
||||
|
||||
// Unified diff of the HEAD version against the working copy.
|
||||
export function diff(parent, { original, modified, path, wrap }) {
|
||||
const view = new EditorView({
|
||||
parent,
|
||||
state: EditorState.create({
|
||||
doc: modified,
|
||||
extensions: [baseExtensions(path, { wrap }), unifiedMergeView({ original, mergeControls: false, highlightChanges: true, gutter: true })],
|
||||
}),
|
||||
});
|
||||
return { view, destroy: () => view.destroy() };
|
||||
}
|
||||
|
||||
// Markdown to sanitized HTML (shown in a sandboxed iframe on top of this).
|
||||
export function markdown(text) {
|
||||
return DOMPurify.sanitize(marked.parse(text, { gfm: true, breaks: false }), { USE_PROFILES: { html: true } });
|
||||
}
|
||||
@@ -63,11 +63,13 @@
|
||||
</div>
|
||||
<button type="button" class="dd-menu-item" id="theme-menu" role="menuitem">Light mode</button>
|
||||
<button type="button" class="dd-menu-item" id="notify-toggle" role="menuitem">Desktop notifications</button>
|
||||
<button type="button" class="dd-menu-item" id="palette-menu" role="menuitem">Command palette</button>
|
||||
<button type="button" class="dd-menu-item" id="help-open" role="menuitem">Keyboard shortcuts</button>
|
||||
<button type="button" class="dd-menu-item" id="fullscreen-toggle" role="menuitem" title="In Chromium, fullscreen also captures Ctrl+W/Ctrl+T for the terminal">Fullscreen</button>
|
||||
<div class="dd-menu-foot" id="version">devdesk</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="lt-btn lt-btn-sm dd-files-toggle" id="files-toggle" aria-controls="files" aria-expanded="false" title="Files: browse, preview and diff this session's folder (Ctrl+Shift+E)"><span class="dd-panels-label">Files</span><span class="dd-panels-icon" aria-hidden="true">🗀</span></button>
|
||||
<button type="button" class="lt-btn lt-btn-sm dd-panels" id="sidebar-toggle" aria-controls="sidebar" aria-expanded="false"><span class="dd-panels-label">Panels</span><span class="dd-panels-icon" aria-hidden="true">▤</span></button>
|
||||
</div>
|
||||
</header>
|
||||
@@ -88,6 +90,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="lt-frame dd-files" id="files" aria-label="Files" hidden>
|
||||
<div class="dd-files-resizer" id="files-resizer" role="separator" aria-orientation="vertical" aria-label="Resize the files pane" tabindex="0"></div>
|
||||
<div class="dd-files-head">
|
||||
<div class="dd-files-tabs" role="tablist">
|
||||
<button type="button" role="tab" data-files-tab="files" aria-selected="true">Files</button>
|
||||
<button type="button" role="tab" data-files-tab="changes" aria-selected="false">Changes <span class="dd-files-count"></span></button>
|
||||
</div>
|
||||
<span class="dd-files-actions">
|
||||
<button type="button" class="dd-icon-btn dd-files-refresh" title="Refresh" aria-label="Refresh">↻</button>
|
||||
<button type="button" class="dd-icon-btn dd-files-close" title="Close (Esc)" aria-label="Close files">✕</button>
|
||||
</span>
|
||||
</div>
|
||||
<nav class="dd-files-crumbs" aria-label="Path"></nav>
|
||||
<div class="dd-files-body" tabindex="-1"></div>
|
||||
</section>
|
||||
|
||||
<div class="dd-backdrop" id="backdrop" hidden></div>
|
||||
<aside id="sidebar" class="dd-sidebar" aria-label="Panels">
|
||||
<section class="lt-frame dd-widget" id="widget-sessions" data-state="live">
|
||||
|
||||
@@ -258,6 +258,71 @@ async function uploadNow(session, file, onProgress) {
|
||||
});
|
||||
}
|
||||
|
||||
// Blob replies (`--fs-read`, `--git-show`, `--asset`): a JSON header line, then
|
||||
// base64 between DEVDESK-BLOB-BEGIN/END. Resolves { header, base64 }, base64
|
||||
// being null when the file has no body (too large, binary). Only the head and
|
||||
// the tail of the stream are decoded while it arrives, so megabytes stay cheap.
|
||||
export function runBlob(args, timeoutMs = 30000) {
|
||||
return limited(() => runBlobNow(args, timeoutMs));
|
||||
}
|
||||
|
||||
async function runBlobNow(args, timeoutMs) {
|
||||
const token = await fetchToken();
|
||||
return new Promise((resolve, reject) => {
|
||||
const socket = new WebSocket(wsUrl(window.location, args), ['tty']);
|
||||
socket.binaryType = 'arraybuffer';
|
||||
const chunks = [];
|
||||
const decoder = new TextDecoder();
|
||||
let head = '';
|
||||
let tail = '';
|
||||
let settled = false;
|
||||
const done = (fn, value) => {
|
||||
if (settled) return;
|
||||
settled = true;
|
||||
clearTimeout(timer);
|
||||
socket.close();
|
||||
fn(value);
|
||||
};
|
||||
const timer = setTimeout(() => done(reject, new Error('devdesk did not answer in time')), timeoutMs);
|
||||
const finish = () => {
|
||||
const text = stripAnsi(new TextDecoder().decode(concat(chunks)));
|
||||
const error = /^devdesk: (.*)$/m.exec(text);
|
||||
const line = text.split(/\r?\n/).find((l) => l.startsWith('{'));
|
||||
if (!line) {
|
||||
done(reject, new Error(error ? error[1] : 'no reply'));
|
||||
return;
|
||||
}
|
||||
let header;
|
||||
try {
|
||||
header = JSON.parse(line);
|
||||
} catch {
|
||||
done(reject, new Error('unreadable reply'));
|
||||
return;
|
||||
}
|
||||
const body = /DEVDESK-BLOB-BEGIN\r?\n([\s\S]*?)\r?\nDEVDESK-BLOB-END/.exec(text);
|
||||
done(resolve, { header, base64: body ? body[1].replace(/\s+/g, '') : null });
|
||||
};
|
||||
socket.onopen = () => socket.send(encodeInit(token, 240, 24));
|
||||
socket.onmessage = (event) => {
|
||||
const { type, payload } = decodeServer(event.data);
|
||||
if (type !== Server.OUTPUT) return;
|
||||
chunks.push(payload.slice());
|
||||
const piece = decoder.decode(payload, { stream: true });
|
||||
if (head.length < 4096) head += piece;
|
||||
tail = (tail + piece).slice(-256);
|
||||
const firstLine = /^\s*(\{.*\})\r?$/m.exec(head);
|
||||
if (tail.includes('DEVDESK-BLOB-END') || /^devdesk: .*\n/m.test(head)
|
||||
|| (firstLine && !head.includes('DEVDESK-BLOB-BEGIN') && /"tooLarge":true/.test(firstLine[1]))) {
|
||||
finish();
|
||||
}
|
||||
};
|
||||
socket.onerror = () => {};
|
||||
socket.onclose = () => {
|
||||
if (!settled) finish();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Git + Gitea CI status for a session's folder (`devdesk attach --repo NAME`).
|
||||
export async function fetchRepo(session) {
|
||||
return parseListOutput(await runCommand(['--repo', session]));
|
||||
|
||||
@@ -0,0 +1,552 @@
|
||||
/* global __EDITOR_SHA__ */
|
||||
// Files pane (devdesk#19): browse the session's folder, read files with syntax
|
||||
// highlighting, preview markdown and images, and review what changed (git
|
||||
// status + diff against HEAD, with a badge on files Claude edited). Read-only
|
||||
// in v1. Everything goes through `devdesk attach --fs-*` over ttyd.
|
||||
|
||||
import { runBlob, runCommand } from './connection.js';
|
||||
import { parseListOutput } from './protocol.js';
|
||||
import { el } from './dom.js';
|
||||
import { ago } from './sessions.js';
|
||||
import { toast } from './ui.js';
|
||||
|
||||
// ---------------------------------------------------------------- editor bundle
|
||||
|
||||
const DB = 'devdesk';
|
||||
const STORE = 'assets';
|
||||
|
||||
function idb(mode, run) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const open = indexedDB.open(DB, 1);
|
||||
open.onupgradeneeded = () => open.result.createObjectStore(STORE);
|
||||
open.onerror = () => reject(open.error);
|
||||
open.onsuccess = () => {
|
||||
const tx = open.result.transaction(STORE, mode);
|
||||
const request = run(tx.objectStore(STORE));
|
||||
tx.oncomplete = () => {
|
||||
open.result.close();
|
||||
resolve(request?.result);
|
||||
};
|
||||
tx.onerror = () => reject(tx.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async function sha256(text) {
|
||||
const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text));
|
||||
return [...new Uint8Array(digest)].map((b) => b.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
function decodeBase64(b64) {
|
||||
const bin = atob(b64);
|
||||
const bytes = new Uint8Array(bin.length);
|
||||
for (let i = 0; i < bin.length; i += 1) bytes[i] = bin.charCodeAt(i);
|
||||
return bytes;
|
||||
}
|
||||
|
||||
// The editor (~600 KB) is not in the page: it's fetched over ttyd the first time
|
||||
// the pane opens, checked against the hash this page was built with, cached in
|
||||
// IndexedDB under that hash, and run.
|
||||
let editorLoading = null;
|
||||
export function loadEditor() {
|
||||
editorLoading ??= (async () => {
|
||||
if (window.DevDeskEditor) return window.DevDeskEditor;
|
||||
let code = null;
|
||||
try {
|
||||
code = await idb('readonly', (store) => store.get(__EDITOR_SHA__));
|
||||
} catch {
|
||||
// No IndexedDB (private mode): fetch every time.
|
||||
}
|
||||
if (!code) {
|
||||
const { base64 } = await runBlob(['--asset', 'editor.js'], 60000);
|
||||
if (!base64) throw new Error('the editor bundle is missing on the server');
|
||||
code = new TextDecoder().decode(decodeBase64(base64));
|
||||
if (crypto.subtle && (await sha256(code)) !== __EDITOR_SHA__) {
|
||||
throw new Error('the server has a different DevDesk version: reload the page');
|
||||
}
|
||||
idb('readwrite', (store) => {
|
||||
store.clear();
|
||||
store.put(code, __EDITOR_SHA__);
|
||||
}).catch(() => {});
|
||||
}
|
||||
const script = document.createElement('script');
|
||||
script.textContent = code;
|
||||
document.head.append(script);
|
||||
script.remove();
|
||||
if (!window.DevDeskEditor) throw new Error('the editor failed to start');
|
||||
return window.DevDeskEditor;
|
||||
})().catch((error) => {
|
||||
editorLoading = null;
|
||||
throw error;
|
||||
});
|
||||
return editorLoading;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- helpers
|
||||
|
||||
const size = (n) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(1)} KB` : `${(n / 1048576).toFixed(1)} MB`);
|
||||
const join = (dir, name) => (dir ? `${dir}/${name}` : name);
|
||||
const parent = (path) => path.split('/').slice(0, -1).join('/');
|
||||
const isMarkdown = (path) => /\.(md|markdown|mdx)$/i.test(path);
|
||||
|
||||
const STATUS = {
|
||||
M: ['M', 'modified', 'amber'], A: ['A', 'added', 'green'], D: ['D', 'deleted', 'red'], R: ['R', 'renamed', 'cyan'],
|
||||
C: ['C', 'copied', 'cyan'], U: ['U', 'conflict', 'red'], '?': ['N', 'new', 'green'], ' ': ['·', 'edited by Claude', 'cyan'],
|
||||
};
|
||||
function statusOf(f) {
|
||||
const code = f.x === '?' ? '?' : f.x !== ' ' ? f.x : f.y;
|
||||
return STATUS[code] ?? STATUS.M;
|
||||
}
|
||||
|
||||
// Markdown preview document: sanitized HTML in a sandboxed iframe (no scripts,
|
||||
// no same-origin), styled from the page's current TDS colours.
|
||||
function previewDocument(html) {
|
||||
const css = getComputedStyle(document.documentElement);
|
||||
const v = (name) => css.getPropertyValue(name).trim();
|
||||
return `<!doctype html><html><head><meta charset="utf-8"><base target="_blank"><style>
|
||||
:root { color-scheme: ${document.documentElement.dataset.theme === 'light' ? 'light' : 'dark'}; }
|
||||
body { margin: 0; padding: 18px 22px 40px; background: ${v('--bg-terminal')}; color: ${v('--text-primary')};
|
||||
font: 14px/1.65 ${v('--font-mono') || 'monospace'}; overflow-wrap: anywhere; }
|
||||
h1, h2, h3, h4 { color: ${v('--accent-cyan')}; line-height: 1.3; margin: 1.4em 0 0.5em; }
|
||||
h1 { font-size: 1.45em; border-bottom: 1px solid ${v('--border-color')}; padding-bottom: 0.3em; }
|
||||
h2 { font-size: 1.2em; border-bottom: 1px solid ${v('--border-dim')}; padding-bottom: 0.2em; }
|
||||
a { color: ${v('--accent-orange')}; }
|
||||
code { background: ${v('--bg-tertiary')}; padding: 1px 5px; color: ${v('--accent-amber')}; font-family: inherit; }
|
||||
pre { background: ${v('--bg-secondary')}; border: 1px solid ${v('--border-dim')}; padding: 10px 12px; overflow-x: auto; }
|
||||
pre code { background: none; padding: 0; color: ${v('--text-primary')}; }
|
||||
blockquote { margin: 0.8em 0; padding: 2px 14px; border-left: 3px solid ${v('--accent-cyan')}; color: ${v('--text-secondary')}; }
|
||||
table { border-collapse: collapse; margin: 0.8em 0; } th, td { border: 1px solid ${v('--border-color')}; padding: 4px 10px; }
|
||||
th { background: ${v('--bg-secondary')}; } hr { border: 0; border-top: 1px solid ${v('--border-color')}; }
|
||||
img { max-width: 100%; } li { margin: 0.2em 0; } input[type=checkbox] { margin-right: 6px; }
|
||||
</style></head><body>${html}</body></html>`;
|
||||
}
|
||||
|
||||
// Relative <img> in a markdown file (e.g. docs/screenshot.png) can't load from
|
||||
// the sandboxed preview: fetch up to 10 of them over ttyd and inline them.
|
||||
async function inlineImages(html, session, mdPath) {
|
||||
const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
|
||||
const images = [...doc.querySelectorAll('img[src]')]
|
||||
.filter((img) => !/^([a-z][a-z0-9+.-]*:|\/\/|#)/i.test(img.getAttribute('src'))).slice(0, 10);
|
||||
if (!images.length) return html;
|
||||
const base = parent(mdPath);
|
||||
await Promise.all(images.map(async (img) => {
|
||||
const parts = [];
|
||||
for (const part of `${base}/${decodeURIComponent(img.getAttribute('src').split(/[?#]/)[0])}`.split('/')) {
|
||||
if (part === '..') parts.pop();
|
||||
else if (part && part !== '.') parts.push(part);
|
||||
}
|
||||
try {
|
||||
const { header, base64 } = await runBlob(['--fs-read', session, parts.join('/')]);
|
||||
if (header.mime?.startsWith('image/') && base64) img.setAttribute('src', `data:${header.mime};base64,${base64}`);
|
||||
} catch {
|
||||
// missing image: leave the broken link
|
||||
}
|
||||
}));
|
||||
return doc.body.innerHTML;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- pane
|
||||
|
||||
function readPref(key) {
|
||||
try {
|
||||
return localStorage.getItem(`devdesk.files.${key}`);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writePref(key, value) {
|
||||
try {
|
||||
localStorage.setItem(`devdesk.files.${key}`, value);
|
||||
} catch {
|
||||
// Private mode: the preference lasts until the tab closes.
|
||||
}
|
||||
}
|
||||
|
||||
export class FilesPane {
|
||||
// hooks: session() -> name, paste(text), onToggle(open), focusTerminal()
|
||||
constructor(root, hooks) {
|
||||
this.root = root;
|
||||
this.hooks = hooks;
|
||||
this.tab = 'files';
|
||||
this.dir = '';
|
||||
this.session = null;
|
||||
this.listing = null;
|
||||
this.changes = null;
|
||||
this.current = null; // { path, mode: 'view' | 'diff' | 'preview', sha }
|
||||
this.editorView = null;
|
||||
this.seq = 0;
|
||||
this.wrap = readPref('wrap') === '1';
|
||||
this.body = root.querySelector('.dd-files-body');
|
||||
this.crumbs = root.querySelector('.dd-files-crumbs');
|
||||
this.tabs = [...root.querySelectorAll('[data-files-tab]')];
|
||||
this.count = root.querySelector('.dd-files-count');
|
||||
for (const button of this.tabs) button.addEventListener('click', () => this.showTab(button.dataset.filesTab));
|
||||
root.querySelector('.dd-files-refresh').addEventListener('click', () => this.refresh({ force: true }));
|
||||
root.querySelector('.dd-files-close').addEventListener('click', () => this.close());
|
||||
}
|
||||
|
||||
// Esc: back from a file to the list, then close. main.js routes Esc here
|
||||
// whenever the pane is open and the terminal doesn't have the focus.
|
||||
escape() {
|
||||
if (this.current) this.back();
|
||||
else this.close();
|
||||
}
|
||||
|
||||
get isOpen() {
|
||||
return !this.root.hidden;
|
||||
}
|
||||
|
||||
open(tab) {
|
||||
if (tab) this.tab = tab;
|
||||
this.root.hidden = false;
|
||||
this.hooks.onToggle(true);
|
||||
this.syncSession();
|
||||
this.renderTabs();
|
||||
if (!this.current) this.refresh();
|
||||
loadEditor().catch(() => {}); // warm up while the list loads
|
||||
}
|
||||
|
||||
close() {
|
||||
this.root.hidden = true;
|
||||
this.hooks.onToggle(false);
|
||||
this.hooks.focusTerminal();
|
||||
}
|
||||
|
||||
toggle(tab) {
|
||||
if (this.isOpen && (!tab || tab === this.tab)) this.close();
|
||||
else this.open(tab);
|
||||
}
|
||||
|
||||
// The pane follows the current session; a different session starts at its root.
|
||||
syncSession() {
|
||||
const session = this.hooks.session();
|
||||
if (session === this.session) return false;
|
||||
this.session = session;
|
||||
this.dir = '';
|
||||
this.listing = null;
|
||||
this.changes = null;
|
||||
this.destroyEditor();
|
||||
this.current = null;
|
||||
return true;
|
||||
}
|
||||
|
||||
sessionChanged() {
|
||||
if (this.isOpen && this.syncSession()) this.refresh();
|
||||
}
|
||||
|
||||
showTab(tab) {
|
||||
this.tab = tab;
|
||||
this.destroyEditor();
|
||||
this.current = null;
|
||||
this.renderTabs();
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
renderTabs() {
|
||||
for (const button of this.tabs) button.setAttribute('aria-selected', String(button.dataset.filesTab === this.tab));
|
||||
}
|
||||
|
||||
// After Claude's turn: refresh what's visible; an open file that changed on
|
||||
// disk gets a reload notice instead of jumping under you.
|
||||
async claudeTurnEnded() {
|
||||
if (!this.isOpen) return;
|
||||
if (!this.current) {
|
||||
this.refresh();
|
||||
return;
|
||||
}
|
||||
this.loadChanges().catch(() => {});
|
||||
if (this.current.mode === 'view' || this.current.mode === 'preview') {
|
||||
try {
|
||||
const { header } = await runBlob(['--fs-read', this.session, this.current.path]);
|
||||
if (header.sha && header.sha !== this.current.sha) this.showStale();
|
||||
} catch {
|
||||
// deleted or unreadable: leave it
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async refresh({ force = false } = {}) {
|
||||
if (!this.session) {
|
||||
this.message('Open a session to browse its files.');
|
||||
return;
|
||||
}
|
||||
if (this.current && !force) return;
|
||||
if (this.current && force) {
|
||||
this.openFile(this.current.path, this.current.mode);
|
||||
return;
|
||||
}
|
||||
if (this.tab === 'files') await this.loadDir(this.dir);
|
||||
else await this.renderChanges(true);
|
||||
if (this.tab === 'files') this.loadChanges().catch(() => {});
|
||||
}
|
||||
|
||||
message(text, tone = '') {
|
||||
this.crumbs.replaceChildren();
|
||||
this.body.replaceChildren(el('div', { class: `dd-files-msg${tone ? ` is-${tone}` : ''}` }, text));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ files tab
|
||||
|
||||
async loadDir(dir) {
|
||||
const session = this.session;
|
||||
const seq = ++this.seq; // a newer navigation wins over a slower reply
|
||||
this.renderCrumbs(dir);
|
||||
if (!this.listing || this.listing.dir !== dir) this.body.replaceChildren(el('div', { class: 'dd-files-msg' }, 'Loading…'));
|
||||
try {
|
||||
const listing = parseListOutput(await runCommand(['--fs-list', session, dir || '.'], 15000));
|
||||
if (seq !== this.seq || session !== this.session || this.current || this.tab !== 'files') return;
|
||||
this.listing = listing;
|
||||
this.dir = listing.dir;
|
||||
this.renderDir();
|
||||
} catch (error) {
|
||||
if (seq !== this.seq) return;
|
||||
if (dir) {
|
||||
toast.error(`${dir}: ${error.message}`);
|
||||
this.dir = '';
|
||||
this.loadDir('');
|
||||
} else {
|
||||
this.message(error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderCrumbs(path, { file = false } = {}) {
|
||||
const parts = path ? path.split('/') : [];
|
||||
const nodes = [el('button', { type: 'button', class: 'dd-crumb', title: this.listing?.root, onclick: () => this.goDir('') }, this.session)];
|
||||
parts.forEach((part, i) => {
|
||||
nodes.push(el('span', { class: 'dd-crumb-sep' }, '/'));
|
||||
const target = parts.slice(0, i + 1).join('/');
|
||||
const last = i === parts.length - 1;
|
||||
nodes.push(last && file
|
||||
? el('span', { class: 'dd-crumb is-file' }, part)
|
||||
: el('button', { type: 'button', class: `dd-crumb${last ? ' is-current' : ''}`, onclick: () => this.goDir(target) }, part));
|
||||
});
|
||||
this.crumbs.replaceChildren(...nodes);
|
||||
}
|
||||
|
||||
goDir(dir) {
|
||||
this.destroyEditor();
|
||||
this.current = null;
|
||||
this.tab = 'files';
|
||||
this.renderTabs();
|
||||
this.loadDir(dir);
|
||||
}
|
||||
|
||||
changeFor(path) {
|
||||
return this.changes?.files?.find((f) => f.path === path) ?? null;
|
||||
}
|
||||
|
||||
renderDir() {
|
||||
const { entries, truncated } = this.listing;
|
||||
this.renderCrumbs(this.dir);
|
||||
const rows = [];
|
||||
if (this.dir) {
|
||||
rows.push(el('li', {}, el('button', { type: 'button', class: 'dd-file is-up', onclick: () => this.goDir(parent(this.dir)) },
|
||||
el('span', { class: 'dd-file-icon' }, '↰'), el('span', { class: 'dd-file-name' }, '..'))));
|
||||
}
|
||||
for (const e of entries) {
|
||||
const isDir = e.t === 'd' || e.to === 'd';
|
||||
const path = join(this.dir, e.n);
|
||||
const change = isDir ? null : this.changeFor(path);
|
||||
const dirty = isDir && this.changes?.files?.some((f) => f.path?.startsWith(`${path}/`));
|
||||
rows.push(el('li', {}, el('button', {
|
||||
type: 'button', class: `dd-file${isDir ? ' is-dir' : ''}${e.t === 'l' ? ' is-link' : ''}`,
|
||||
title: `${path}${e.t === 'l' ? ' (symlink)' : ''}`,
|
||||
onclick: () => (isDir ? this.goDir(path) : this.openFile(path)),
|
||||
},
|
||||
el('span', { class: 'dd-file-icon', 'aria-hidden': 'true' }, isDir ? '▸' : e.t === 'l' ? '↪' : '·'),
|
||||
el('span', { class: 'dd-file-name' }, e.n),
|
||||
change ? el('span', { class: `dd-file-status is-${statusOf(change)[2]}`, title: statusOf(change)[1] }, statusOf(change)[0]) : null,
|
||||
change?.claude ? el('span', { class: 'dd-claude-chip', title: 'Claude edited this file' }, 'C') : null,
|
||||
dirty ? el('span', { class: 'dd-file-status is-amber', title: 'contains changes' }, '•') : null,
|
||||
el('span', { class: 'dd-file-meta' }, isDir ? '' : size(e.s)),
|
||||
el('span', { class: 'dd-file-meta dd-file-age' }, ago(e.m)))));
|
||||
}
|
||||
if (!entries.length) rows.push(el('li', { class: 'dd-files-msg' }, 'Empty folder.'));
|
||||
if (truncated) rows.push(el('li', { class: 'dd-files-msg' }, `Only the first ${entries.length} entries are shown.`));
|
||||
this.body.replaceChildren(el('ul', { class: 'dd-file-list' }, ...rows));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ changes tab
|
||||
|
||||
async loadChanges() {
|
||||
const session = this.session;
|
||||
const changes = parseListOutput(await runCommand(['--git-status', session], 15000));
|
||||
if (session !== this.session) return null;
|
||||
this.changes = changes;
|
||||
const n = changes.files?.length ?? 0;
|
||||
this.count.textContent = n ? String(n) : '';
|
||||
if (this.tab === 'files' && !this.current && this.listing) this.renderDir();
|
||||
return changes;
|
||||
}
|
||||
|
||||
async renderChanges(reload) {
|
||||
this.crumbs.replaceChildren(el('span', { class: 'dd-crumb is-file' }, this.changes?.git === false ? 'Edited by Claude' : `${this.changes?.branch ?? ''} · uncommitted changes`));
|
||||
if (reload || !this.changes) {
|
||||
this.body.replaceChildren(el('div', { class: 'dd-files-msg' }, 'Loading…'));
|
||||
try {
|
||||
await this.loadChanges();
|
||||
} catch (error) {
|
||||
this.message(error.message, 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.tab !== 'changes' || this.current) return;
|
||||
const { files = [], git, branch } = this.changes;
|
||||
this.crumbs.replaceChildren(el('span', { class: 'dd-crumb is-file' }, git ? `${branch} · ${files.length} changed` : 'Not a git repository · files Claude edited'));
|
||||
if (!files.length) {
|
||||
this.body.replaceChildren(el('div', { class: 'dd-files-msg' }, git ? 'No uncommitted changes.' : 'Claude hasn\'t edited files in this folder yet.'));
|
||||
return;
|
||||
}
|
||||
const rows = files.map((f) => {
|
||||
const [letter, label, tone] = statusOf(f);
|
||||
const name = f.path ?? f.repoPath;
|
||||
const openable = f.path !== null && f.path !== undefined;
|
||||
return el('li', {}, el('button', {
|
||||
type: 'button', class: 'dd-file', disabled: !openable,
|
||||
title: `${label}${f.from ? ` from ${f.from}` : ''}${f.claude ? ' · edited by Claude' : ''}${openable ? '' : ' (outside this folder)'}`,
|
||||
onclick: () => this.openFile(f.path, git && f.x !== '?' && f.y !== '?' ? 'diff' : 'view'),
|
||||
},
|
||||
el('span', { class: `dd-file-status is-${tone}` }, letter),
|
||||
el('span', { class: 'dd-file-name' }, name),
|
||||
f.claude ? el('span', { class: 'dd-claude-chip', title: 'Claude edited this file' }, 'C') : null,
|
||||
el('span', { class: 'dd-file-meta' },
|
||||
f.add !== null && f.add !== undefined ? el('span', { class: 'dd-add' }, `+${f.add}`) : null,
|
||||
f.del !== null && f.del !== undefined ? el('span', { class: 'dd-del' }, ` −${f.del}`) : null)));
|
||||
});
|
||||
this.body.replaceChildren(el('ul', { class: 'dd-file-list' }, ...rows));
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ viewer
|
||||
|
||||
destroyEditor() {
|
||||
this.editorView?.destroy();
|
||||
this.editorView = null;
|
||||
}
|
||||
|
||||
back() {
|
||||
this.destroyEditor();
|
||||
this.current = null;
|
||||
if (this.tab === 'files') this.loadDir(this.dir);
|
||||
else this.renderChanges(false);
|
||||
this.body.focus();
|
||||
}
|
||||
|
||||
showStale() {
|
||||
const bar = this.body.querySelector('.dd-viewer-stale');
|
||||
if (bar) bar.hidden = false;
|
||||
}
|
||||
|
||||
async openFile(path, mode) {
|
||||
const session = this.session;
|
||||
this.destroyEditor();
|
||||
const change = this.changeFor(path);
|
||||
const wanted = mode ?? (isMarkdown(path) ? 'preview' : 'view');
|
||||
this.current = { path, mode: wanted, sha: null };
|
||||
this.seq += 1;
|
||||
this.renderCrumbs(path, { file: true });
|
||||
this.body.replaceChildren(el('div', { class: 'dd-files-msg' }, 'Loading…'));
|
||||
let blob;
|
||||
let original = null;
|
||||
let editor;
|
||||
try {
|
||||
const deleted = change && (change.x === 'D' || change.y === 'D');
|
||||
[blob, original, editor] = await Promise.all([
|
||||
deleted ? Promise.resolve({ header: { path, size: 0, utf8: true, body: true }, base64: '' }) : runBlob(['--fs-read', session, path]),
|
||||
wanted === 'diff' ? runBlob(['--git-show', session, path]) : Promise.resolve(null),
|
||||
loadEditor().catch((error) => ({ error })),
|
||||
]);
|
||||
} catch (error) {
|
||||
if (session === this.session) this.viewerMessage(path, error.message, 'error');
|
||||
return;
|
||||
}
|
||||
if (session !== this.session || this.current?.path !== path) return;
|
||||
const { header, base64 } = blob;
|
||||
this.current.sha = header.sha ?? null;
|
||||
|
||||
const text = (b64, utf8 = true) => new TextDecoder(utf8 ? 'utf-8' : 'latin1').decode(decodeBase64(b64 || ''));
|
||||
const content = el('div', { class: 'dd-viewer-content' });
|
||||
const actions = [];
|
||||
const action = (label, run, extra = {}) => actions.push(el('button', { type: 'button', class: 'dd-viewer-btn', onclick: run, ...extra }, label));
|
||||
|
||||
if (wanted !== 'diff' && isMarkdown(path)) {
|
||||
action(wanted === 'preview' ? 'Source' : 'Preview', () => this.openFile(path, wanted === 'preview' ? 'view' : 'preview'));
|
||||
}
|
||||
if (change && change.x !== '?' && change.y !== '?' && this.changes?.git) {
|
||||
action(wanted === 'diff' ? 'File' : 'Diff', () => this.openFile(path, wanted === 'diff' ? (isMarkdown(path) ? 'preview' : 'view') : 'diff'));
|
||||
}
|
||||
if (wanted === 'view' || wanted === 'diff') {
|
||||
action(this.wrap ? 'No wrap' : 'Wrap', () => {
|
||||
this.wrap = !this.wrap;
|
||||
writePref('wrap', this.wrap ? '1' : '0');
|
||||
this.openFile(path, wanted);
|
||||
}, { title: 'Wrap long lines' });
|
||||
}
|
||||
action('Copy path', () => navigator.clipboard?.writeText(path).then(() => toast.success('Path copied'), () => toast.error('Clipboard refused')));
|
||||
action('→ Claude', () => {
|
||||
this.hooks.paste(`@${path} `);
|
||||
toast.info(`Mentioned @${path} in the prompt`);
|
||||
}, { title: 'Type @path into the current prompt so Claude reads the file' });
|
||||
|
||||
if (header.tooLarge) {
|
||||
content.append(el('div', { class: 'dd-files-msg' }, `This file is ${size(header.size)}; the viewer opens files up to ${size(header.max)}.`));
|
||||
} else if (header.mime?.startsWith('image/') && base64) {
|
||||
content.classList.add('is-image');
|
||||
content.append(el('img', { src: `data:${header.mime};base64,${base64}`, alt: path }));
|
||||
} else if (header.binary || !header.body) {
|
||||
content.append(el('div', { class: 'dd-files-msg' }, `Binary file (${size(header.size)}).`));
|
||||
} else if (editor?.error) {
|
||||
content.append(el('pre', { class: 'dd-plain' }, text(base64, header.utf8)));
|
||||
toast.warning(`Plain view: ${editor.error.message}`);
|
||||
} else if (wanted === 'preview') {
|
||||
content.classList.add('is-preview');
|
||||
content.append(el('iframe', {
|
||||
class: 'dd-md-frame', title: `Preview of ${path}`,
|
||||
sandbox: 'allow-popups allow-popups-to-escape-sandbox', srcdoc: previewDocument(editor.markdown(text(base64))),
|
||||
}));
|
||||
const frame = content.lastChild;
|
||||
inlineImages(editor.markdown(text(base64)), session, path).then((html) => {
|
||||
if (frame.isConnected) frame.srcdoc = previewDocument(html);
|
||||
});
|
||||
} else if (wanted === 'diff') {
|
||||
this.editorView = editor.diff(content, { original: text(original?.base64), modified: text(base64), path, wrap: this.wrap });
|
||||
} else {
|
||||
this.editorView = editor.viewer(content, { doc: text(base64, header.utf8), path, wrap: this.wrap });
|
||||
}
|
||||
|
||||
const meta = [
|
||||
header.size !== undefined && !header.tooLarge ? size(header.size) : '',
|
||||
header.mtime ? `changed ${ago(header.mtime)}` : '',
|
||||
header.utf8 === false ? 'not UTF-8 (shown as Latin-1)' : '',
|
||||
wanted === 'diff' ? 'diff against HEAD' : '',
|
||||
change ? statusOf(change)[1] : '',
|
||||
change?.claude ? 'edited by Claude' : '',
|
||||
].filter(Boolean).join(' · ');
|
||||
const stale = el('div', { class: 'dd-viewer-stale', hidden: true },
|
||||
'This file changed on disk. ', el('button', { type: 'button', class: 'dd-viewer-btn', onclick: () => this.openFile(path, wanted) }, 'Reload'));
|
||||
this.body.replaceChildren(
|
||||
el('div', { class: 'dd-viewer-bar' },
|
||||
el('button', { type: 'button', class: 'dd-viewer-btn dd-viewer-back', title: 'Back (Esc)', onclick: () => this.back() }, '←'),
|
||||
el('span', { class: 'dd-viewer-meta' }, meta),
|
||||
el('span', { class: 'dd-viewer-actions' }, ...actions)),
|
||||
stale,
|
||||
content);
|
||||
// Keyboard straight into the file: arrows scroll, Ctrl+F searches, Esc goes back.
|
||||
if (this.editorView) this.editorView.view.focus();
|
||||
else this.body.focus();
|
||||
}
|
||||
|
||||
viewerMessage(path, text, tone) {
|
||||
this.body.replaceChildren(
|
||||
el('div', { class: 'dd-viewer-bar' },
|
||||
el('button', { type: 'button', class: 'dd-viewer-btn dd-viewer-back', title: 'Back (Esc)', onclick: () => this.back() }, '←'),
|
||||
el('span', { class: 'dd-viewer-meta' }, path)),
|
||||
el('div', { class: `dd-files-msg is-${tone}` }, text));
|
||||
}
|
||||
|
||||
// Theme switch: the editor follows CSS variables; the preview iframe needs a re-render.
|
||||
themeChanged() {
|
||||
if (this.current?.mode === 'preview') this.openFile(this.current.path, 'preview');
|
||||
}
|
||||
}
|
||||
+83
-1
@@ -12,6 +12,7 @@ import { bindAskClaude } from './widgets.js';
|
||||
import { heardWithin, onShared, share } from './shared.js';
|
||||
import { CommandPalette, dialogOpen, openDialog, toast } from './ui.js';
|
||||
import { Inbox } from './inbox.js';
|
||||
import { FilesPane } from './files.js';
|
||||
import { el } from './dom.js';
|
||||
import * as notify from './notify.js';
|
||||
|
||||
@@ -75,6 +76,7 @@ let fit;
|
||||
let sessionsPanel;
|
||||
let palette;
|
||||
let inbox;
|
||||
let files;
|
||||
let lastRepo = null;
|
||||
let lastAlerts = null;
|
||||
let waitingOthers = [];
|
||||
@@ -330,6 +332,7 @@ function connect(session, { reconnect = false } = {}) {
|
||||
paneTitleRaw = '';
|
||||
renderPaneTitle();
|
||||
onSessionData();
|
||||
files?.sessionChanged();
|
||||
hideOverlay();
|
||||
setWsState('connecting', 'connecting');
|
||||
state.openedAt = 0;
|
||||
@@ -465,6 +468,7 @@ function applyTitle() {
|
||||
sessionsPanel.setCurrent(parsed.session);
|
||||
onSessionData();
|
||||
refreshRepo();
|
||||
files?.sessionChanged();
|
||||
}
|
||||
paneTitleRaw = parsed.pane;
|
||||
renderPaneTitle();
|
||||
@@ -536,6 +540,7 @@ function setFontSize(size) {
|
||||
const clamped = Math.min(24, Math.max(10, size));
|
||||
term.options.fontSize = clamped;
|
||||
store.set('fontSize', clamped);
|
||||
document.documentElement.style.setProperty('--dd-editor-font', `${clamped - 1}px`);
|
||||
$('font-size').textContent = String(clamped);
|
||||
fit.fit();
|
||||
}
|
||||
@@ -607,6 +612,10 @@ function buildCommands() {
|
||||
add({ id: 'detach', group: 'Terminal', icon: '⏏', label: 'Detach (the session keeps running)', kbd: '^b d', run: () => sendKeys('\x02d') });
|
||||
}
|
||||
|
||||
if (state.session) {
|
||||
add({ id: 'files', group: 'Files', icon: '🗀', label: files.isOpen ? 'Close files' : 'Browse files', kbd: 'Ctrl+⇧E', keywords: 'explorer folder read open view', run: () => files.toggle('files') });
|
||||
add({ id: 'changes', group: 'Files', icon: '±', label: 'Review changes (git diff)', keywords: 'git status diff claude edits', run: () => files.open('changes') });
|
||||
}
|
||||
add({
|
||||
id: 'theme', group: 'View', icon: getTheme() === 'light' ? '◐' : '☀', keywords: 'theme light dark mode colour color',
|
||||
label: getTheme() === 'light' ? 'Switch to dark mode' : 'Switch to light mode', run: toggleTheme,
|
||||
@@ -666,6 +675,7 @@ const KEY_HELP = [
|
||||
]],
|
||||
['DevDesk', [
|
||||
['Ctrl+⇧ P', 'Command palette'],
|
||||
['Ctrl+⇧ E', 'Files: browse, preview, diff (Esc closes)'],
|
||||
['Ctrl+⇧ C / V', 'Copy selection / paste'],
|
||||
['⇧ drag', 'Select text in the browser'],
|
||||
['Drop or paste a file', 'Upload it and attach it for Claude'],
|
||||
@@ -681,6 +691,41 @@ function showHelp() {
|
||||
openDialog({ title: 'Keyboard shortcuts', body, actions: [{ label: 'Close', primary: true }] }).then(() => term.focus());
|
||||
}
|
||||
|
||||
// Drag the files pane's left edge (or use ←/→ on it). The terminal keeps at
|
||||
// least ~60 columns; the width is remembered per browser.
|
||||
function wireResizer() {
|
||||
const main = document.querySelector('.dd-main');
|
||||
const handle = $('files-resizer');
|
||||
const apply = (px) => {
|
||||
const max = main.clientWidth - 520;
|
||||
const width = Math.round(Math.max(340, Math.min(max, px)));
|
||||
main.style.setProperty('--dd-files-w', `${width}px`);
|
||||
return width;
|
||||
};
|
||||
const saved = Number(store.get('filesWidth', 0));
|
||||
if (saved) apply(saved);
|
||||
handle.addEventListener('pointerdown', (event) => {
|
||||
event.preventDefault();
|
||||
handle.setPointerCapture(event.pointerId);
|
||||
ui.body.classList.add('dd-resizing');
|
||||
const move = (e) => apply(main.getBoundingClientRect().right - e.clientX);
|
||||
const up = () => {
|
||||
ui.body.classList.remove('dd-resizing');
|
||||
handle.removeEventListener('pointermove', move);
|
||||
handle.removeEventListener('pointerup', up);
|
||||
store.set('filesWidth', $('files').getBoundingClientRect().width);
|
||||
};
|
||||
handle.addEventListener('pointermove', move);
|
||||
handle.addEventListener('pointerup', up);
|
||||
});
|
||||
handle.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
|
||||
event.preventDefault();
|
||||
const width = apply($('files').getBoundingClientRect().width + (event.key === 'ArrowLeft' ? 40 : -40));
|
||||
store.set('filesWidth', width);
|
||||
});
|
||||
}
|
||||
|
||||
async function toggleFullscreen() {
|
||||
if (document.fullscreenElement) {
|
||||
await document.exitFullscreen();
|
||||
@@ -704,6 +749,7 @@ function renderNotifyButton() {
|
||||
}
|
||||
|
||||
function setSidebar(open) {
|
||||
if (open && files?.isOpen) files.close();
|
||||
ui.body.classList.toggle('dd-sidebar-open', open);
|
||||
ui.sidebarButton.setAttribute('aria-expanded', String(open));
|
||||
ui.backdrop.hidden = !(open && isNarrow());
|
||||
@@ -765,10 +811,34 @@ function wireChrome() {
|
||||
showHelp();
|
||||
});
|
||||
$('footer-help').addEventListener('click', showHelp);
|
||||
$('palette-menu').addEventListener('click', () => {
|
||||
closeMenus();
|
||||
palette.open();
|
||||
});
|
||||
files = new FilesPane($('files'), {
|
||||
session: () => state.session,
|
||||
paste: (text) => {
|
||||
term.paste(text);
|
||||
},
|
||||
focusTerminal: () => term.focus(),
|
||||
onToggle: (open) => {
|
||||
ui.body.classList.toggle('dd-files-open', open);
|
||||
$('files-toggle').setAttribute('aria-expanded', String(open));
|
||||
if (open && ui.body.classList.contains('dd-sidebar-open')) setSidebar(false);
|
||||
},
|
||||
});
|
||||
$('files-toggle').addEventListener('click', () => files.toggle());
|
||||
wireResizer();
|
||||
palette = new CommandPalette(buildCommands);
|
||||
$('cmd-toggle').addEventListener('click', () => palette.open());
|
||||
// Ctrl+Shift+P (⌘⇧P): Ctrl+K belongs to the terminal (kill-line in Claude and bash).
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if ((event.ctrlKey || event.metaKey) && event.shiftKey && !event.altKey && event.code === 'KeyE') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (state.session) files.toggle();
|
||||
return;
|
||||
}
|
||||
if ((event.ctrlKey || event.metaKey) && event.shiftKey && !event.altKey && event.code === 'KeyP') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@@ -819,6 +889,14 @@ function wireChrome() {
|
||||
// Esc closes menus and the narrow-screen drawer before the terminal sees it.
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key !== 'Escape' || dialogOpen()) return;
|
||||
// Files pane: Esc goes back / closes, unless the terminal or CodeMirror's
|
||||
// own search panel has the focus.
|
||||
if (files?.isOpen && !event.target.closest?.('.xterm, .cm-panels') && !menus.some(({ menu }) => !menu.hidden) && !inbox.isOpen) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
files.escape();
|
||||
return;
|
||||
}
|
||||
const menuOpen = menus.some(({ menu }) => !menu.hidden) || inbox.isOpen;
|
||||
const drawerOpen = isNarrow() && ui.body.classList.contains('dd-sidebar-open');
|
||||
if (!menuOpen && !drawerOpen) return;
|
||||
@@ -901,7 +979,10 @@ async function boot() {
|
||||
theme: getTheme(),
|
||||
onShiftEnter: () => state.conn?.sendInput('\n'),
|
||||
}));
|
||||
onThemeChange((theme) => { term.options.theme = THEMES[theme]; });
|
||||
onThemeChange((theme) => {
|
||||
term.options.theme = THEMES[theme];
|
||||
files?.themeChanged();
|
||||
});
|
||||
$('theme-toggle').addEventListener('click', toggleTheme);
|
||||
term.onData((data) => state.conn?.sendInput(data));
|
||||
term.onBinary((data) => state.conn?.sendBinary(data));
|
||||
@@ -914,6 +995,7 @@ async function boot() {
|
||||
notify.ring(state.session, ui.paneTitle.textContent || 'Claude needs your attention');
|
||||
refreshSoon(); // Claude finished a turn: states and context just changed
|
||||
setTimeout(refreshRepo, 2000); // …and maybe committed or pushed
|
||||
setTimeout(() => files?.claudeTurnEnded(), 1200); // …or edited files
|
||||
});
|
||||
|
||||
let fitFrame = 0;
|
||||
|
||||
+131
@@ -699,3 +699,134 @@ html[data-theme="light"] .lt-notif-dot { box-shadow: none; }
|
||||
.dd-panels-icon { display: inline; font-size: 1rem; }
|
||||
.dd-inbox-panel { position: fixed; top: calc(var(--header-height) + 4px); right: 8px; left: 8px; width: auto; }
|
||||
}
|
||||
|
||||
/* ---- files pane (devdesk#19) -------------------------------------------------------- */
|
||||
.dd-files {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 var(--dd-files-w, 46%);
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
background: var(--bg-terminal);
|
||||
}
|
||||
.dd-files[hidden] { display: none; }
|
||||
body.dd-resizing { cursor: col-resize; user-select: none; }
|
||||
body.dd-resizing .dd-terminal { pointer-events: none; }
|
||||
.dd-files-resizer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: calc(-1 * var(--dd-gap) - 2px);
|
||||
width: calc(var(--dd-gap) + 6px);
|
||||
cursor: col-resize;
|
||||
z-index: 3;
|
||||
}
|
||||
.dd-files-resizer:hover,
|
||||
.dd-files-resizer:focus-visible,
|
||||
body.dd-resizing .dd-files-resizer { background: linear-gradient(90deg, transparent 40%, var(--accent-cyan) 40%, var(--accent-cyan) 60%, transparent 60%); outline: none; }
|
||||
#files-toggle[aria-expanded="true"] { color: var(--accent-orange); border-color: var(--accent-orange-border); }
|
||||
|
||||
.dd-files-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 2px 6px 0 6px; border-bottom: 1px solid var(--border-dim); }
|
||||
.dd-files-tabs { display: flex; }
|
||||
.dd-files-tabs button {
|
||||
padding: 7px 10px 6px;
|
||||
border: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dd-files-tabs button:hover { color: var(--text-primary); }
|
||||
.dd-files-tabs button[aria-selected="true"] { color: var(--accent-orange); border-bottom-color: var(--accent-orange); }
|
||||
.dd-files-count:not(:empty) { margin-left: 4px; padding: 0 5px; border-radius: 8px; background: var(--accent-amber-dim); color: var(--accent-amber); font-size: 0.62rem; }
|
||||
.dd-files-actions { display: flex; gap: 2px; padding-bottom: 4px; }
|
||||
|
||||
.dd-files-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; min-height: 28px; padding: 4px 10px; border-bottom: 1px solid var(--border-dim); font-family: var(--font-mono); font-size: 0.72rem; }
|
||||
.dd-crumb { padding: 1px 3px; border: 0; background: none; color: var(--accent-cyan); font: inherit; cursor: pointer; }
|
||||
.dd-crumb:hover { text-decoration: underline; }
|
||||
.dd-crumb.is-current,
|
||||
.dd-crumb.is-file { color: var(--text-primary); text-decoration: none; cursor: default; }
|
||||
.dd-crumb-sep { color: var(--text-dim); }
|
||||
|
||||
.dd-files-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: auto; outline: none; }
|
||||
.dd-file-list { margin: 0; padding: 4px 0; list-style: none; }
|
||||
.dd-file {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 4px 10px;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.76rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dd-file:hover:not(:disabled),
|
||||
.dd-file:focus-visible { background: var(--accent-cyan-dim); outline: none; }
|
||||
.dd-file:disabled { opacity: 0.55; cursor: default; }
|
||||
.dd-file-icon { flex: 0 0 12px; color: var(--text-dim); text-align: center; }
|
||||
.dd-file.is-dir .dd-file-icon,
|
||||
.dd-file.is-dir .dd-file-name { color: var(--accent-cyan); }
|
||||
.dd-file.is-up .dd-file-name { color: var(--text-muted); }
|
||||
.dd-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dd-file-meta { color: var(--text-muted); font-size: 0.66rem; white-space: nowrap; }
|
||||
.dd-file-age { flex: 0 0 2.6em; text-align: right; }
|
||||
.dd-file-status { flex: 0 0 1.2em; font-weight: 700; text-align: center; }
|
||||
.dd-file-status.is-amber { color: var(--accent-amber); }
|
||||
.dd-file-status.is-green { color: var(--accent-green); }
|
||||
.dd-file-status.is-red { color: var(--accent-red); }
|
||||
.dd-file-status.is-cyan { color: var(--accent-cyan); }
|
||||
.dd-claude-chip { padding: 0 4px; border: 1px solid var(--accent-orange-border); color: var(--accent-orange); font-size: 0.6rem; font-weight: 700; }
|
||||
.dd-add { color: var(--accent-green); }
|
||||
.dd-del { color: var(--accent-red); }
|
||||
.dd-files-msg { padding: 14px; color: var(--text-muted); font-size: 0.76rem; line-height: 1.5; }
|
||||
.dd-files-msg.is-error { color: var(--accent-red); }
|
||||
|
||||
.dd-viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 4px 8px; border-bottom: 1px solid var(--border-dim); }
|
||||
.dd-viewer-meta { flex: 1; min-width: 8em; color: var(--text-muted); font-size: 0.68rem; }
|
||||
.dd-viewer-actions { display: flex; flex-wrap: wrap; gap: 4px; }
|
||||
.dd-viewer-btn {
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: none;
|
||||
color: var(--accent-cyan);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dd-viewer-btn:hover { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
|
||||
.dd-viewer-back { font-size: 0.8rem; }
|
||||
.dd-viewer-stale { padding: 4px 10px; background: var(--accent-amber-dim); color: var(--accent-amber); font-size: 0.72rem; }
|
||||
.dd-viewer-stale[hidden] { display: none; }
|
||||
.dd-viewer-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
|
||||
.dd-viewer-content > .cm-editor { flex: 1; min-height: 0; }
|
||||
.dd-viewer-content .cm-editor.cm-focused { outline: none; }
|
||||
.dd-viewer-content.is-image {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
padding: 12px;
|
||||
background: repeating-conic-gradient(var(--bg-secondary) 0 25%, var(--bg-terminal) 0 50%) 0 0 / 20px 20px;
|
||||
}
|
||||
.dd-viewer-content.is-image img { max-width: 100%; height: auto; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); }
|
||||
.dd-md-frame { flex: 1; width: 100%; border: 0; background: var(--bg-terminal); }
|
||||
.dd-plain { flex: 1; margin: 0; padding: 10px; overflow: auto; font-size: 0.76rem; white-space: pre; }
|
||||
|
||||
@media (max-width: 1099px) {
|
||||
/* Narrow: the pane covers the terminal instead of squeezing it (squeezing
|
||||
would resize tmux for every client). */
|
||||
.dd-files { position: absolute; inset: var(--dd-gap); z-index: 18; flex: none; }
|
||||
.dd-files-resizer { display: none; }
|
||||
}
|
||||
@media (max-width: 719px) {
|
||||
.dd-cmd-btn { display: none; }
|
||||
.dd-file-age { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user