Documentation
Workbench, editor and IntelliSense
The VS Code look, layout, editor, schema-aware IntelliSense, tabs, history and keybindings.
Look and feel: "as close to VS Code as possible"
This is a look-alike built from scratch, not a Code-OSS fork. Match VS Code 1.9x "Modern" themes pixel-for-pixel where practical.
- Colours: port the theme colour tokens from VS Code's
Dark Modern/Light Modern/Dark High Contrasttheme JSON (MIT; attribute it) into the app's theme format. The app's theme format is the VS Code colour theme JSON format (colors+tokenColors). Workbench CSS reads CSS variables generated from thecolorskeys (--vscode-editor-backgroundetc.), so any VS Code colour theme JSON can be imported or contributed by extensions unchanged. Unknown keys are ignored. - Default theme: the built-in Raml Dark / Raml Light themes (Raml brand colours, generated by
scripts/build-raml-themes.mjs) are the defaults and follow the OS appearance; the ported VS Code themes stay available (D-054). - Fonts:
- UI:
-apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", system-ui, Ubuntu, "Droid Sans", sans-serifat 13px. - Editor:
editor.fontFamilydefaultMenlo, Monaco, "Courier New", monospaceon mac,Consolas, "Courier New", monospaceon Windows,"Droid Sans Mono", "monospace", monospaceon Linux; 14px (mac 12px like VS Code), configurable.
- UI:
- Icons:
@vscode/codiconsonly. - Metrics to match VS Code:
- activity bar 48px wide
- tab height 35px
- status bar 22px
- list rows 22px
- sidebar title 35px
- panel title 35px
- 1px borders in
--vscode-*-bordercolours - focus outlines using
focusBorder
- Motion: none beyond VS Code's (no fancy animations).
- Title bar:
- macOS:
titleBarStyle: 'hiddenInset'with traffic lights, and a centred command-center-style search box ("Search queries, commands…") that opens quick open. - Windows/Linux: frameless custom title bar with menu (File, Edit, Selection, View, Query, Help) + window controls, like VS Code's custom title bar.
- macOS:
- Context menus, hovers, quick pick, notifications, dialogs: replicate VS Code's components (quick pick with fuzzy highlight, keyboard-first).
- Accessibility:
- Full keyboard navigation.
- ARIA roles on trees/lists/tabs.
- Respect OS reduced-motion and high contrast.
- Visible focus rings.
- Target WCAG 2.1 AA for contrast in the default themes (they already are).
Layout
┌ title bar ───────────────────────────────────────────────────────────────┐
│A│ PRIMARY SIDEBAR │ EDITOR GROUP(S): tabs [▶ Run] [time range ▾] │
│C│ (view per activity) │ ┌─────────────────────────────────────────────┐ │
│T│ │ │ Monaco (KQL) │ │
│I│ │ └─────────────────────────────────────────────┘ │
│V│ ├──────────────────────────────────────────────────┤
│I│ │ PANEL: Results | Chart | Run | Audit │
│T│ │ │
│Y│ │ │
└─┴──────────────────────┴──────────────────────────────────────────────────┘
status bar: account · 12 workspaces · 5 tenants · Aliased · rows · duration · Ln/Col · KQL
Activity bar views (top to bottom):
- Targets: workspace selection for the active tab (spec 03).
- Library: My Queries + installed query packs (spec 08).
- History.
- Extensions: installed, sources, and "Add from URL / file".
- Extension-contributed views.
Bottom of the bar: Accounts and Manage (gear: Settings, Keyboard Shortcuts, Themes, Check for Updates).
Results placement: VS Code puts output in the bottom panel, and so does the Log Analytics portal (under the editor). Default: results in the bottom panel of the editor area, per tab. Each tab owns its results; switching tabs switches the results. Setting results.location: "panel" (default) or "beside" (results as a split to the right).
Tabs and editor groups
- Tabs behave like VS Code:
- dirty dot
- middle-click close
- drag to reorder or to another group
- pin
- preview tabs (italic) when opening from Library/History with single click; double click keeps them
Ctrl/Cmd+Wclose,Ctrl+TabMRU switch
- Split:
Ctrl/Cmd+\splits the editor group. Each group has its own tabs; each tab has its own targets, time range and results. - Tab title: the query name or
Query 1,Query 2… A running tab shows a spinner codicon ($(loading~spin)). - Persistence: tabs, groups, cursor positions, targets, time range and unsaved text are saved to
state/tabs.json(debounced 500 ms and on quit). Result data is never saved (spec 04). - Saving a tab (
Ctrl/Cmd+S) writes it to My Queries as a.kqlfile (spec 08). Unsaved tabs are fine; they persist as drafts.
Editor (Monaco + monaco-kusto)
- Language
kustovia@kusto/monaco-kusto. Configure its workers for electron-vite (Vite worker imports). No CDN loaders; everything is bundled. - Defaults:
- minimap off (
editor.minimap.enabled) - word wrap off
- bracket colorization on
- format on demand (
Shift+Alt+F, using the Kusto formatter) Ctrl/Cmd+/toggle line comment
- minimap off (
- Semantic squiggles from monaco-kusto using the merged schema.
- Run behaviour (like the Log Analytics portal):
Shift+EnterorCtrl/Cmd+Enterruns the query block under the cursor (statements separated by blank lines, as in the portal), or the selection if there is one.- Setting
editor.runScope:"block"(default) |"all". Escin the editor while running, or the Stop button, cancels.
- Hover shows table and column docs (type, description where known) and "available in 7/9 selected workspaces".
- Snippets: common KQL patterns (summarize by bin, join template,
letparameters,parse_json,mv-expand). All useTimeGenerated.
Schema-aware IntelliSense
SchemaServicefetchesGET https://api.loganalytics.io/v1/workspaces/{customerId}/metadata(tables, columns, functions, solutions). If unavailable, fall back to agetschema-style query or the ARM tables endpoint; log the choice in DECISIONS.- Cache per workspace on disk (
state/schema-cache/<hash>.json; metadata only, no data), TTLschema.cacheHoursdefault 24. There is a manual "Refresh Schema" command. - Merged schema for the active tab's targets: union of tables and columns.
- Each table and column is annotated with its availability count.
- Completions show a subtle suffix
3/5when not available everywhere. - Setting
schema.hideTablesMissingEverywheredefaults totrue. - Custom
_CLtables and workspace functions are included.
- The merged schema updates when targets change (debounced) and is fed to monaco-kusto (
setSchemawith a synthetic database). - Built-in table descriptions: ship a small JSON of descriptions for common Sentinel/Log Analytics tables (write short original descriptions; do not copy Microsoft docs text).
Time range picker
- Next to Run: presets Last 30 min, 1 h, 4 h, 12 h, 24 h, 48 h, 3 d, 7 d, 30 d, Custom (start/end, local or UTC toggle; setting
time.displayZone"local"|"utc", defaultutcfor SOC work). - "Set in query": if the parsed query filters on
TimeGeneratedat the top level (e.g.where TimeGenerated > ago(...)orbetween), the picker shows "Set in query" and no API timespan is sent (portal behaviour). Detect this via the Kusto syntax tree, not regex.
History
- Every run appends an entry to
state/history.jsonl: timestamp, query text, targets (keys), group, time range, per-state counts, total rows, duration. No result data. - Setting
history.maxEntriesdefault 5000. - The History view groups by day, supports search (text, table names, tenant), and has actions "Open in new tab", "Run again" and "Copy query". There is a "Clear history" command.
Command palette, quick open, keybindings
F1/Ctrl/Cmd+Shift+P: commands, with categories (Query:,Targets:,Privacy:,Results:,Extensions:,Accounts:,Developer:).Ctrl/Cmd+P: quick open across My Queries, pack queries, history (prefix>switches to commands like VS Code;@for targets/groups,#for tables in the schema).- Keybindings: VS Code defaults where meaningful. Also:
Ctrl/Cmd+Shift+ETargetsCtrl/Cmd+Shift+LLibraryCtrl/Cmd+Shift+HHistoryCtrl/Cmd+Shift+XExtensionsCtrl/Cmd+,SettingsCtrl/Cmd+K Ctrl/Cmd+SKeyboard Shortcuts editor (VS Code-like: table, search, record keys)
when-clauses as in spec 01.keybindings.jsoncuses VS Code's format (key,command,when,-commandto remove).
Settings UI
- A VS Code-like settings editor: search, "Commonly Used", categories generated from the settings schema, and a modified indicator with "Reset".
- "Open Settings (JSON)" opens
settings.jsoncin a Monaco tab with JSON schema validation and completions. - Settings are defined once in a zod-based schema registry (spec 09). The UI, JSON schema and defaults are all generated from it.
Empty and first-run states
- Welcome tab, like VS Code's welcome page: Add account, Open demo mode, Import config, Add query pack source, Recent tabs, and links to docs.
- After the first sign-in, discovery runs and the user lands in Settings → Workspaces with a hint: "Choose which workspaces appear in the query view."
- A query tab is ready with a starter query:
SigninLogs
| where TimeGenerated > ago(1d)
| summarize SignIns = count(), FailedSignIns = countif(ResultType != "0") by UserPrincipalName
| top 20 by FailedSignIns