jj-dojo

jj-dojo architecture

A detailed, source-linked map of how Jujutsu Dojo, the VS Code extension for jj, works inside: its activation and wiring, the commit graph webview and its protocol, the graph layout algorithms, merge-conflict support, and what's still only planned.

On this page
  1. The whole extension on one page
  2. The layers
  3. VS Code contributions
  4. Extension host
  5. The message boundary
  6. Commit graph webview
  7. Planned API and client layers
  8. Repository map
  9. Implemented vs planned
  10. Pages

For jj itself (commits, operations, conflicts and every command), see the jj architecture reference.

The whole extension on one page

Top to bottom: what the extension adds to VS Code, the extension host code behind it, the commit graph webview on the far side of a message boundary, the layers Google plans to add while open-sourcing the extension (dashed), and jj itself. Every box links to the page that explains it, or to the pinned source while that page is still being written.

jj-dojo architecture VS Code activates the extension on startup or when the workspace contains a .jj directory. The extension contributes a JJ Graph webview in the source control view, two merge-conflict commands, a conflict colour, and editor decorations. In the extension host, extension.ts sets up logging and creates JjUi from ui.ts, which registers merge-conflict support and the commit graph view provider. The icon theme service and the shared utilities sit alongside. The provider talks to the commit graph webview over a postMessage RPC channel. The host implements ExtensionShape and the webview implements WebviewShape. Inside the webview, JjApp runs focus mode and the layout algorithm and renders the components. Below that, drawn dashed because they are only planned, are the API layer (state managers, actions queue, file watching, op-head pubsub and forge manager) and the client layer (a jj subprocess client using templates). At the bottom is the jj CLI and repository. At this pin the host sends the webview fake data instead of reading jj. VS Code activation onStartupFinished, .jj SCM view JJ Graph (webview) commands accept one / all sides editors highlights and CodeLens file icon theme read for webviews Extension host extension.ts activate / deactivate ui.ts JjUi: registers features logging, error output channel logger merge_conflict parser, tracker, decorator CommitGraphViewProvider creates the webview icon_theme_service not wired in yet utils HashMap, topology, time ExtensionShapeImpl host side ($webviewReady …) rpc_protocol postMessage RPC channel webview_module.ts webview side ($setState …) webview boundary Commit graph webview JjApp.setState one pass per repo state focus mode + layout createCommitNodes Lit components rows, tiles, chips, search Planned (docs/intro.md) API layer state managers, actions queue, file watcher, op-head pubsub, forge client layer jj subprocess client (in progress) jj CLI and repository see the jj architecture reference

At this pin the commit graph is the only open-sourced feature with a real UI, and nothing reads a jj repository yet. The host side of the webview protocol, createFakeWebviewState, answers $webviewReady with one hard-coded commit and is marked // TODO - Replace with a real implementation. The API and client layers that would fill it are planned in docs/intro.md.

The layers

VS Code contributions

package.json activates the extension on onStartupFinished and workspaceContains:.jj, runs it in the workspace extension host (extensionKind: ["workspace"]), and contributes one webview view, jj-dojo.commit-graph ("JJ Graph"), in the source control container, the commands jj.mergeConflict.acceptAllSides and jj.mergeConflict.acceptOneSide, and the colour jj.mergeConflict.thirdSideBackground. The configuration and menus blocks are empty. See activation.

Extension host

activate installs an output-channel logger as the global logger, logs the build version, and creates JjUi, pushing both onto context.subscriptions. JjUi is split in two: JjUiBase holds what Google's internal build shares (merge-conflict support), and JjUi adds the commit graph view provider with retainContextWhenHidden. The icon theme service and the utilities are compiled in, but nothing outside their own directories imports the icon theme service yet.

The message boundary

The host and the webview share no memory. Each side wraps postMessage in a Channel and hands it to VS Code's own RPC helper, vendored under third_party/vscode/rpc_protocol. The host gets a proxy for WebviewShape ($setState, $openSearchBox), and the webview a proxy for ExtensionShape ($webviewReady, $informNewOrder, $executeCommand, clicks, context menus, callouts). The webview calls $webviewReady as soon as it boots, and the host answers with state. See the graph webview protocol.

Commit graph webview

A Lit app (<jj-app>) receives each WebviewState, optionally narrows it with focus mode, lays it out with createCommitNodes, reports the resulting order back to the host, and renders a row per commit: tiles for the graph on the left, then chips, IDs and the description. See commit graph layout and the graph webview UI.

Planned API and client layers

Google's internal extension sits on an API layer (an ApiStateManager combining a WorkspaceStateManager cache, a PendingSnapshotsManager, an ActionsQueue that serialises writes, a file-system watcher, an op-head pubsub and a forge manager) over a client that talks gRPC-web to Google's jj servers. The open-source plan swaps that client for one that runs the jj CLI with templates, keeping reads side-effect free with --ignore-working-copy and --no-integrate-operation. The first pieces are in the tree but not wired into activation: a subprocess client under src/client/ that reads the commit graph, the file-system watcher under src/file_system_watcher/, and bare interfaces for an op-head watcher, a network-reconnect watcher and telemetry. See the externalization plan.

Repository map

PathWhat's therePage
src/extension.ts, src/ui/ui.tsEntry point and feature registrationactivation
src/logging/, src/error/Global logger, output channel, error typesactivation
src/ui/commit_graph/api/, src/ui/commit_graph_provider/The webview protocol types and its host sidegraph-protocol
src/ui/commit_graph/algorithms/Layout, drawing, ranges, focus modegraph-layout
src/ui/commit_graph/components/, utils/Lit components of the webviewgraph-webview
src/ui/merge_conflict/Conflict-marker parsing, decorations, CodeLens, resolutionmerge-conflicts
src/ui/icon_theme_service/File-icon theme lookup for webviewsicon-theme
src/client/The Client interface and the jj subprocess client, not yet wired inroadmap
src/api/The commit and repository-state types the client returnsroadmap
src/op_head_watcher/, src/network_reconnect_watcher/, src/telemetry/One interface each, with no implementation yetroadmap
src/file_system_watcher/The planned API layer's file-system watcher: the interface and a @parcel/watcher implementationroadmap
src/utils/Hash collections, commit topology, checks, disposal, timeutils
src/testing/, spec/Fake VS Code API and the Jasmine configbuild-and-test
tools/bazel/, BUILD.bazel, MODULE.bazelThe Bazel build: TypeScript, Jasmine and addlicense rulesbuild-and-test
third_party/vscode/Vendored VS Code code: the RPC protocol and enumsgraph-protocol
scripts/A generator for third_party/vscode/vscode_enums.tsbuild-and-test
docs/The externalization plan and its architecture drawingroadmap

Implemented vs planned

PieceStatus at this pin
Commit graph webview, layout and protocolImplemented and tested. The upstream plan marks it done.
Data for the commit graphFake: one hard-coded commit.
Merge-conflict highlighting and resolutionImplemented and registered on activation.
Icon theme serviceImplemented and tested, not yet used by anything.
jj subprocess clientin progress per the plan. SubprocessClient snapshots the working copy without publishing an operation, reads the commits at that operation with a JSON jj log template, and reads file contents at a commit or by file ID. It has 28 tests against a real repository, but nothing in the extension calls it yet.
File-system watcherin progress per the plan. The FileSystemWatcher interface and a LocalFileSystemWatcher built on @parcel/watcher are in the tree and tested, but nothing constructs one yet.
Op-head watcher (the plan's JJ PubSub)in progress An interface only.
Other API-layer managers, mutating commands, commit dialog, split editor, forge integrationplanned

Pages

  • Activation and wiring

    What the extension contributes to VS Code, what happens when it activates, and how logging and errors are set up.

  • The graph webview protocol

    Every type and method in the contract between the extension host and the commit graph webview.

  • Commit graph layout

    How commits become lanes, edges, glyphs and rows: the preprocessing pipeline, drawing, ranges and focus mode.

  • The graph webview UI

    The component tree of the commit graph webview, from the app shell down to rows, chips, search and drag and drop.

  • Merge conflict support

    How conflict markers are parsed, tracked, decorated and resolved in the editor.

  • Icon theme service

    How the active file-icon theme is found, parsed and served to webviews.

  • Build, test and packaging

    The Bazel build, the test setup with its fake VS Code API, and CI.

  • Externalization plan

    The planned UI, API and client layers from the upstream design notes, and what has landed so far.

  • Shared utilities

    The small shared helpers the rest of the extension builds on.