@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

package/.tasks/SMART_EDITOR_UX_POLISH.md

@@ -1,383 +0,0 @@
-# SmartEditor / DpqlEditor / QonsoleSmartInput — UX polish
-
-Active task list for the UX work specified in
-[`design/SMART_EDITOR_UX.md`](../design/SMART_EDITOR_UX.md). Mirror
-of the qorus-ide `.tasks/*.md` convention: one task file per body of
-work, check off items as they land.
-
-**Status:** Phase 1 committed `6fb9bf3` · Phases 2–7 + 6 committed `a9b7f1b` and **verified in browser 2026-05-26** · Phase 8 deferred to end of full batch
-**Design doc:** [`design/SMART_EDITOR_UX.md`](../design/SMART_EDITOR_UX.md)
-
-**Workflow rule:** code changes land as **uncommitted** changes for
-user verification first. No commits until the user has confirmed the
-change behaves correctly in their own browser. See `.claude/CLAUDE.md`
-§ "Task & design docs workflow" for the full convention.
-
-## Status
-
-- **Phase 0 — design** done (locked 2026-05-25, revised 2026-05-26 for item 7)
-- **Phase 1** done — typing-trigger fix + Replace-mode chip click (committed)
-- **Phase 2** done pending user-verify — visual polish
-- **Phase 3** done pending user-verify — diagnostics surface
-- **Phase 4** done pending user-verify — loading state
-- **Phase 5** done pending user-verify — hover info
-- **Phase 7** done pending user-verify — LSP semantic tokens (replaces broken regex)
-- **Phase 6** done pending user-verify — server parse opt-in
-- **Phase 8** ready to start (release prep)
-
-## Phase 0 — design acceptance (DONE)
-
-- [x] User read `design/SMART_EDITOR_UX.md` end-to-end
-- [x] User confirmed no additional DpqlEditor concerns at this point — anything found during execution lands as new task items
-- [x] Theme direction — Reqore-native, borrow from qorus-ide conventions
-- [x] Decorate composition — merge in the wrapper (DpqlEditor combines)
-- [x] Hover positioning — token center
-- [x] Loading state — overlay spinner
-- [x] Version — single `0.10.0-beta` at end of batch
-- [x] Design doc locked — no further changes without explicit revision
-
-## Phase 1 — Trigger-on-typing-only fix (DONE)
-
-Reference: design doc §1. Surface area:
-`src/components/smartEditor/useLspAutocomplete.ts`,
-`src/components/smartEditor/SmartEditor.tsx`,
-`src/components/dpqlEditor/dpqlInserter.ts`,
-`src/components/dpqlEditor/DpqlEditor.tsx`.
-
-Ended up substantially larger than the original ~10-line estimate
-because the user reported chip-click bugs that required Replace mode,
-plus a stale-closure bug in Reqore's `renderElement`.
-
-- [x] Trigger-on-content-change (not selection-only) via
-      `editor.operations.some(op !== 'set_selection')`
-- [x] `slateValueRef` cache in SmartEditor — avoid round-trip
-      re-tokenisation while user types `@s`
-- [x] Replace mode for chip clicks — chip stays visible, popover
-      anchors at chip rect, atomic node swap on accept
-- [x] `openAtChip` + `pendingChipRequestRef` + deferred-request effect
-- [x] `popoverKey` bump per `openAtChip` to force `ReqorePopover`
-      remount (sync with internal open state)
-- [x] `handleExternalClose` filter — suppress popover-close events
-      within 300ms of `openAtChip` (mousedown-vs-click race)
-- [x] Same-chip click toggles closed
-- [x] "Connecting…" / "No alternatives available" stub in Replace mode
-- [x] Stable `onTagClick` via ref (Reqore `renderElement` memoizes over
-      deps that omit `onTagClick`)
-- [x] Removed space from `DPQL_TRIGGERS` (no more dropdown after `@chip<space>`)
-- [x] Reqore node_modules patch — `Textarea.handleBlur` null-check on
-      `relatedTarget.closest` (also filed as Reqore PR follow-up)
-- [x] Reqore PR follow-up filed — `renderElement` deps fix
-- [x] Run `yarn build:test:prod && yarn lint && yarn test` (252 pass)
-- [x] Run `yarn test-storybook --url http://localhost:6008` (148 pass)
-- [x] **User verified in browser**
-- [ ] Commit
-
-## Phase 2 — Dropdown visual polish (DONE pending user verify)
-
-Reference: design doc §2. Surface area:
-`useLspAutocomplete.ts` (kindLabel + documentation mapping),
-`SmartEditor.tsx` (badge + tooltip render + monospace),
-`SmartEditor.stories.tsx` (new stories),
-`DpqlEditor.stories.tsx` (enriched mock).
-
-### 2a. Caret positioning
-
-- [x] Popover anchored at caret via `ReactEditor.toDOMRange` + viewport
-      `position: fixed` (landed in Phase 1)
-- [x] Verified across single-line, multi-line, and chip-relative anchoring
-
-### 2b. Markdown rendering of documentation
-
-- [x] `react-markdown` imported (already a Reqraft direct dep — confirmed
-      in package.json: `^9.0.1`)
-- [x] `documentation` surfaced on `ICompletionDropdownItem`; `SmartEditor`
-      renders it via `buildDocTooltip`, branching on `kind: 'markdown'` vs
-      `kind: 'plaintext'` vs string
-- [x] Tooltip max-width 360px, max-height 240px, scrollable
-- [x] Tooltip placed right of the row (so it doesn't obscure the list)
-- [x] New story: `WithMarkdownDocs` on SmartEditor
-
-### 2c. Visual treatment (Reqore-native, per locked decision)
-
-- [x] Monospace label per row (matches editor body, makes `@field` /
-      `--flag` token shapes line up)
-- [x] Right-aligned kind chip via Reqore's `badge` (small + minimal)
-- [x] Tightened row heights via `compact`
-- [x] Focused row highlight via `ReqoreMenuItem.selected` (theme-aware)
-- [ ] Light + dark theme verification (deferred to in-browser visual
-      verification — no automated test)
-
-### 2d. Grouping + filtering
-
-- [x] `item.filterText` honored — `filteredItems` matches against
-      `item.raw.filterText ?? item.label` (already in Phase 1)
-- [x] `ReqoreMenuDivider` between groups when `groupMap.size > 1`
-- [x] New story: `WithGroupedKinds` (3 kinds → 3 sections with dividers)
-
-- [x] Run typecheck, lint, jest (252 pass)
-- [x] Run storybook play tests (149 pass — 2 added)
-- [ ] **STOP — user verifies in browser before commit**
-- [ ] Commit (per user preference — may accumulate into a single
-      end-of-batch commit instead)
-
-## Phase 3 — Diagnostics surface (DONE pending user verify)
-
-Surface area landed: new `useLspDiagnosticDecorations.ts`,
-`SmartEditor.tsx` (compose decorate + renderLeaf wrap + panel),
-new `__tests__/smartEditor/diagnosticDecorations.test.ts`,
-new `WithDiagnostics` story on QonsoleSmartInput.
-
-### 3a. Decorate-function hook
-
-- [x] `src/components/smartEditor/useLspDiagnosticDecorations.ts`
-- [x] Returns `(entry: NodeEntry) => Range[]`, intersects each
-      diagnostic with the leaf's plain-text span via the converter
-- [x] Emits `{ error, errorMessage, severity }` marks on the range
-- [x] 11 unit tests covering empty diags, non-text nodes, single span,
-      clamping, multiple overlapping, cross-line skip, severity default
-
-### 3b. Inline render
-
-- [x] `SmartEditor.tsx` exposes `renderLeafWithDiagnostics` that wraps
-      the caller's `customRenderLeaf` and draws a wavy underline +
-      `title` tooltip when `leaf.error`
-- [x] Severity drives colour: 1 red, 2 amber, 3+ blue
-
-### 3c. Error message panel
-
-- [x] Below the editor: `ReqoreControlGroup vertical` of
-      `ReqoreMessage`s, one per diagnostic
-- [x] Intent from `severityToIntent` (1 danger, 2 warning, 3+ info)
-- [x] Icon: ErrorWarningLine / AlertLine / InformationLine
-
-### 3d. DpqlEditor composes both decorators
-
-- [x] SmartEditor's `composedDecorate` combines the caller's `decorate`
-      (e.g. DPQL syntax-highlighting) with the diagnostic decorate from
-      `useLspDiagnosticDecorations` — no DpqlEditor changes needed; the
-      composition lives in SmartEditor.
-
-### 3e. Story
-
-- [x] `WithDiagnostics` on QonsoleSmartInput — mock pushes
-      `textDocument/publishDiagnostics` after didOpen with one Error
-      + one Warning span
-
-- [x] Typecheck, lint, jest (267), storybook play (151) all pass
-- [ ] **STOP — user verifies in browser before commit**
-
-## Phase 4 — Loading state (DONE pending user verify)
-
-- [x] `ReqoreSpinner` overlay with "Connecting to language server…"
-      while `!session.isReady` — absolutely positioned over the
-      editor body, semi-transparent backdrop, pointer-events: none
-- [x] `loadingIndicator?: React.ReactNode` prop — pass `null` to
-      suppress, pass any node to override
-- [x] Editor stays mounted underneath so the initial value is visible
-
-(Existing play tests pre-date this overlay and still pass — they
-sleep ≥200ms before typing which is enough for the mock LSP's
-`initialize` to complete and `isReady` to flip true. If we add play
-tests later that need the spinner to be gone, a `waitForElementToBeRemoved`
-pattern would work.)
-
-## Phase 5 — Hover info (DONE pending user verify)
-
-- [x] `src/components/smartEditor/useLspHover.ts` — new hook
-- [x] mousemove listener attached via `ReactEditor.toDOMNode(editor, editor)`
-- [x] Debounce 300ms (configurable via `debounceMs` option)
-- [x] On idle: `caretRangeFromPoint` → Slate `Point` → plain-text
-      offset (`selectionToOffset`) → LSP position
-      (`offsetToLspPosition`) → `client.getHover(line, character)`
-- [x] State: `{ hoverContent, hoverPosition, clearHover }`
-- [x] Stale-response guard via `requestIdRef` — a slow in-flight
-      request can't overwrite a newer one
-- [x] Pure-math `slatePointToLspPosition` extracted + unit tested
-      (4 tests covering offset 0, mid-line, multi-paragraph, end-of-leaf)
-- [x] Rendered as a `ReqorePopover` (placement `top`, markdown via
-      `react-markdown`, plaintext fallback)
-- [x] `enableHover?: boolean` prop on SmartEditor, default `true`
-- [x] Typecheck, lint, jest (267), storybook play (151) all pass
-- [ ] **STOP — user verifies in browser before commit**
-
-(Token-center positioning per design doc §5 deferred — currently
-anchors at the mouse cursor coordinates. Iterate if user wants the
-exact VS-Code-style center-of-token anchoring.)
-
-## Phase 6 — `dpql/toRichtext` opt-in (DONE pending user verify)
-
-Reference: design doc §6. Surface area: `DpqlEditor.tsx` (state +
-effect + custom converter), `dpqlHelpers.ts` (response decoder),
-`types.ts` (new prop), `SmartEditor.tsx` (new `isLoading` prop +
-overlay condition), `DpqlEditor.stories.tsx` (mock + new story).
-
-- [x] `useServerParse?: boolean` prop on `DpqlEditor` (default `false`)
-- [x] Effect: on mount + external `value` changes + session-ready,
-      call `client.customRequest('dpql/toRichtext', { text: value })`
-- [x] `richtextResponseToSlate()` helper in `dpqlHelpers.ts` decodes
-      the server's `{type: "richtext", value: [...]}` response into
-      `ISlateElement[]`; returns `null` for unknown shapes (caller
-      falls back)
-- [x] Custom converter in `DpqlEditor.tsx` overrides `toSlateNodes`
-      to return cached server-parsed nodes when text matches; falls
-      through to client `plainTextToSlate` otherwise
-- [x] `SmartEditor.isLoading` prop — overlay shows while either
-      `!session.isReady` OR `isLoading` is true; wrapper passes
-      `isLoading={isParsing}`
-- [x] Stale-response guard via `parseRequestIdRef` — slow responses
-      can't overwrite newer state
-- [x] On error / unrecognised shape → silently falls back to
-      client-side regex parser
-- [x] Mock `dpql/toRichtext` handler in DpqlEditor stories
-      (matches `$prefix:value` templates as tags, mirrors the real
-      server's regex)
-- [x] New story `WithServerParse` (`$static:input == "Alice" && $config:min_age > 18`)
-- [x] Typecheck (clean), lint (clean), jest (263 pass), storybook
-      play tests (152 of 153 pass; remaining failure is the
-      pre-existing FormEngine flake)
-- [ ] **STOP — user verifies in browser before commit**
-
-## Phase 7 — LSP semantic tokens replace the broken regex highlighting (DONE pending user verify)
-
-Reference: design doc §7 (revised 2026-05-26). Surface area: new
-hook + decoder, edits to `LspClient`, `useLspSession`, `SmartEditor`,
-removal of `useDpqlSyntaxHighlighting.ts`, fixed DPQL story values.
-
-### 7a. Surface the semantic-tokens legend
-
-- [x] `src/utils/lspClient.types.ts` — `ILspSemanticTokensLegend` +
-      `ILspSemanticToken` types
-- [x] `src/utils/lspClient.ts` — capture legend from initialize
-      response, expose as `semanticTokensLegend` public field
-- [x] `useLspSession.ts` — surface in result
-
-### 7b. The LSP int-array decoder
-
-- [x] `decodeSemanticTokens(data, legend) → ILspSemanticToken[]` —
-      delta re-base, type-index lookup, modifier-bitmask unpack
-- [x] 10 unit tests: null/empty, bad alignment, single token, live
-      spike sample, line-jump re-base, modifier bitmask, invalid
-      index skip, realistic DPQL expression
-
-### 7c. `useLspSemanticTokens` hook
-
-- [x] `src/components/smartEditor/useLspSemanticTokens.ts` — Slate
-      decorate function backed by debounced LSP request
-- [x] Watches document changes, 250ms debounce
-- [x] Stale-response guard via `requestIdRef`
-- [x] Keeps last-known tokens on error (no highlighting flash)
-- [x] Returns empty decorate while `!isReady || !legend`
-
-### 7d. Compose into SmartEditor
-
-- [x] `composedDecorate` now merges caller + semantic + diagnostic
-- [x] Renamed `renderLeafWithDiagnostics` → `renderLeafWithMarks`;
-      handles `tokenType`-based colours + `tokenModifiers` (italic
-      for `declaration`, dimmed for `deprecated`) + diagnostic
-      wavy-underline
-- [x] `SEMANTIC_TOKEN_COLORS` palette mapped to LSP-standard 16
-      types (keyword purple, operator cyan, string green, number
-      orange, variable/parameter/property red-pink, function/class
-      yellow, regexp cyan, comment grey, namespace/decorator/modifier
-      yellow/purple)
-
-### 7e. Remove the broken DPQL regex highlighter
-
-- [x] Deleted `src/components/dpqlEditor/useDpqlSyntaxHighlighting.ts`
-- [x] Deleted `__tests__/dpqlEditor/syntaxHighlighting.test.ts`
-- [x] `DpqlEditor.tsx` — dropped `useDpqlSyntaxHighlighting` import,
-      `decorate` prop, `customRenderLeaf` (SmartEditor handles it)
-- [x] `index.ts` — removed re-export
-
-### 7f. Fix misleading DPQL story values
-
-- [x] `WithPlainText` value `SELECT * FROM users WHERE name = "Alice"`
-      → `1 == 1 && "hello" != "world"` (valid DPQL)
-- [x] `WithMixedContent` `… AND …` → `… && …` (DPQL uses `&&`)
-
-### 7g. Story + mock for semantic tokens
-
-- [x] DpqlEditor mock: extended `initialize` response with
-      `semanticTokensProvider.legend` (standard LSP 16/6)
-- [x] DpqlEditor mock: handles `textDocument/semanticTokens/full`
-      by tokenizing `lastDocumentText` (tracked from
-      didOpen/didChange) with a minimal DPQL-correct regex
-- [x] New story `WithSemanticTokens` rendering a representative
-      DPQL expression touching every coloured token category
-- [ ] Mirror to QonsoleSmartInput stories — deferred; works
-      automatically against the live `/lsp` endpoint, so adding a
-      mock-side story isn't blocking for `0.10.0`
-
-### 7h. Documentation
-
-- [x] Design doc revised (item 7 added, decorate-composition
-      decision revised)
-- [x] Task file Phase 7 fleshed out
-- [ ] `README.md` — to be updated in Phase 8 (release prep)
-
-### 7i. Checks
-
-- [x] Typecheck (clean), lint (clean), jest (263 pass), storybook
-      play tests (152 pass — +1 for `WithSemanticTokens`)
-- [ ] **STOP — user verifies in browser before commit**
-
-## Phase 8 — Release prep (deferred — runs after all follow-up tasks)
-
-**Revised 2026-05-26.** Originally scoped to run immediately after
-phase 7, but research after phase 7 surfaced four follow-up tasks
-that should ship as part of the same `0.10.0` release (see
-[`INDEX.md`](./INDEX.md) for the full list). Cutting `0.10.0-beta`
-before those land would mean a release tag with no real consumer —
-qorus-ide alert-rule integration needs `alertPayloadContext` /
-`fsmContext` from `SMART_EDITOR_CONTEXT_AND_POLISH`.
-
-So Phase 8 runs at the **end** of the full task sequence, after:
-
-1. [`SMART_EDITOR_CONTEXT_AND_POLISH.md`](./SMART_EDITOR_CONTEXT_AND_POLISH.md)
-2. [`SMART_EDITOR_LSP_FEATURES.md`](./SMART_EDITOR_LSP_FEATURES.md)
-3. [`QONSOLE_ASSIST_FEATURES.md`](./QONSOLE_ASSIST_FEATURES.md)
-4. [`SMART_EDITOR_VISUAL_POLISH.md`](./SMART_EDITOR_VISUAL_POLISH.md)
-
-Phase 8 itself:
-
-- [ ] Bump Reqraft `package.json` version to `0.10.0`
-- [ ] Final `README.md` pass against the **complete** post-batch
-      API (covers all new props introduced across all five tasks).
-      Don't bother with a slimmer mid-batch README pass — wait for
-      this one
-- [ ] Update `qorus-frontend/DPQL_EXTRACTION_PROGRESS.md` execution log
-- [ ] Verify Reqore PRs (`Textarea.handleBlur`, `RichTextEditor.renderElement` deps)
-      have either shipped upstream OR a `patch-package` patch is
-      committed for the `node_modules` workaround
-- [ ] Final test pass: jest + storybook + manual smoke
-- [ ] **STOP — user does final review before push**
-- [ ] Tag + push
-
-## Follow-up tasks (part of `0.10.0`, not separate releases)
-
-See [`INDEX.md`](./INDEX.md) for sequencing and status. Brief
-summary:
-
-- [`SMART_EDITOR_CONTEXT_AND_POLISH.md`](./SMART_EDITOR_CONTEXT_AND_POLISH.md)
-  — `isContextReady` race fix, debounced loader, FSM /
-  alert-payload context props (qorus-ide alert-rule blocker),
-  README catch-up
-- [`SMART_EDITOR_LSP_FEATURES.md`](./SMART_EDITOR_LSP_FEATURES.md) —
-  unused LSP methods, primarily wiring `textDocument/signatureHelp`
-- [`QONSOLE_ASSIST_FEATURES.md`](./QONSOLE_ASSIST_FEATURES.md) —
-  `commitCharacters`, `sortText`, `warning`, `data`, wizard launch
-  via `command: qonsole.startWizard`, mode-type fix
-- [`SMART_EDITOR_VISUAL_POLISH.md`](./SMART_EDITOR_VISUAL_POLISH.md)
-  — Reqore styling-vocabulary alignment (lands last so it polishes
-  the final UI state)
-
-## Notes
-
-- Workflow change effective from this batch: code changes are left
-  uncommitted for user verification. The agent does not commit until
-  the user has confirmed the change in their own browser.
-- Each phase produces one commit. The order is the order of impact
-  (items 1, 2, 3 first — the visible-quality wins).
-- If any phase reveals a Reqore-side issue (e.g. the existing
-  `ReqoreTooltipComponent` ref warning), don't fix in Reqraft —
-  flag as a Reqore follow-up.

package/.tasks/SMART_EDITOR_VISUAL_POLISH.md

@@ -1,246 +0,0 @@
-# SmartEditor visual polish — Reqore vocabulary alignment
-
-Follow-up to the `0.10.0` UX batch (see
-[`SMART_EDITOR_UX_POLISH.md`](./SMART_EDITOR_UX_POLISH.md)). The editor
-stack ships visually minimal — bare `ReqoreMenu` chrome, no effects,
-no `customTheme`, hand-rolled CSS overlays. The rest of the Qore IDE
-uses a rich Reqore styling vocabulary (gradients, intents, frost,
-glow, relative-darken sub-surfaces). This task brings the editor up to
-parity.
-
-**Status:** done — committed in `c006a79`. Reqore styling vocabulary applied across completion / hover / signature popovers, kind chips, diagnostic messages, dividers, focused-row, loading overlay. **Awaiting browser verification.**
-**Scope:** styling-only — no behaviour or API changes.
-**Estimated size:** ~150 lines, 1 day.
-
-## Goal
-
-The completion popover, kind chips, diagnostic messages, hover popover,
-and loading overlay should be visually indistinguishable from a Qonsole
-chat sub-surface or an FSM detail panel. A consumer dropping the editor
-into the IDE should not need a single `<style>` block to make it
-"feel right".
-
-## Research findings
-
-Catalogued by the research pass at
-`design/SMART_EDITOR_UX.md` is not the right home for this — kept
-inline below. Source files (qorus-ide, since Reqraft has no design
-constants of its own yet):
-
-### Reusable effect constants
-
-In `qorus-frontend/qorus-ide/src/components/Field/multiPair.tsx`
-(lines 20-124):
-
-| Constant | Direction / colors |
-|---|---|
-| `FancyColorEffect` | plum `#12002f` lighten-2 → `#12002f` |
-| `QorusColorEffect` | `#6e1977:lighten:3` → `#6e1977` |
-| `SynthColorEffect` | `#13163a` → `#6e1977` (AI buttons) |
-| `PositiveColorEffect` | `info` → `info:darken:3` |
-| `WarningColorEffect` | `warning:lighten:2` → `warning:lighten:3` (animate: always) |
-| `PendingColorEffect` | `pending:lighten:3` → `#160437` |
-| `NegativeColorEffect` | `danger:lighten:3` → `danger:darken:3` |
-| `SaveColorEffect` | `success:lighten:3` → `success:darken:3` |
-| `SelectorColorEffect` | `main:lighten:3` → `main:darken:3` |
-
-In `qorus-frontend/qorus-ide/src/constants/util.ts`:
-
-```ts
-DRAWER_OPACITY = 0.6;
-DRAWER_CONTENT_EFFECT = { backgroundBlur: 20 } as const;
-DRAWER_STYLE = { opacity: DRAWER_OPACITY, contentEffect: DRAWER_CONTENT_EFFECT };
-QorusPurpleIntent = ReqoreIntents.CUSTOM1;
-AttentionIntent = ReqoreIntents.CUSTOM2;
-```
-
-Theme intents (from `defaultReqoreTheme`):
-- `success: '#4a7110'`
-- `custom1: '#762f7e'` (Qorus purple)
-- `custom2: '#b34e1d'` (attention orange)
-
-### `customTheme` palette in current use
-
-| Use | Token |
-|---|---|
-| Page card | `'#0a0a0a'` |
-| Metrics / history panels | `'#1a1a1a'` |
-| Focused editing overlays | `'#111111'` |
-| Header bars / tabs | `'#000000'` |
-| Dashboard status | `'#181818'` |
-| Sidebar | `'#262626'` |
-| Qonsole panel main | `'#190819'` |
-| Qonsole UI-component frames | `'#190e1955'` (note 55 alpha) |
-| Qonsole tables | `'#351e3556'` |
-| Qonsole input minimal | `'#1b1525'` |
-| Qonsole assistant bubble | `'#9a749a'` |
-| Sub-surface (nested form) | `'main:darken:1:0.5'`, `'main:darken:2'`, `` `main:darken:${level}` `` |
-
-### Reqore Effect / theming API confirmed
-
-`<ReqoreMenu>`, `<ReqoreMenuItem>`, and `<ReqorePopover>` all accept
-`effect`, `customTheme`, `intent`. `ReqorePopover` also accepts
-`blur: boolean`, `backgroundBlur: number`, `transparent: boolean`.
-Color tokens support `<base>:<lighten|darken>:<1-30>:<alpha 0-1>`.
-
-### Precedent for "intellisense" feel
-
-`qorus-frontend/qorus-ide/src/components/Qonsole/QonsoleCompletionPopup.tsx`
-is the existing precedent — a styled wrapper at `#1a1a1a` with a
-hairline border + custom scrollbar. Our SmartEditor popover is a
-candidate to subsume it (or at minimum match it).
-
-## Design decisions
-
-1. **Reqraft mirrors the qorus-ide constants — not imports them.**
-   Reqraft is meant to be standalone-usable. Cloning the constants
-   (with attribution comments) into `src/components/smartEditor/styling.ts`
-   keeps Reqraft a tier-1 library. Constants to mirror:
-   - `SMART_EDITOR_OVERLAY_EFFECT` (= `DRAWER_CONTENT_EFFECT` shape: `{ backgroundBlur: 20 }`)
-   - `SMART_EDITOR_OVERLAY_OPACITY` (= `0.6`)
-   - `SmartEditorIntents` map with `purple: 'custom1'`, `attention: 'custom2'` (caveat: only meaningful when the consuming app has registered those intents in its `ReqoreUIProvider` theme; we document this)
-
-2. **Pick a tone family for the popover container.** The completion
-   popover is "code-editor adjacent" — match the page-card tone
-   (`#0a0a0a` / `#1a1a1a`) rather than the Qonsole purple. Reason: the
-   editor lives inside arbitrary host pages (Alert Rule, FSM, ad-hoc
-   forms) — purple would clash. Use `customTheme={{ main: '#1a1a1a' }}`.
-
-3. **Use `backgroundBlur: 20`** on the popover and the hover popover
-   so they sit on the host page like a Reqore drawer would. Combined
-   with a `transparent` flag, it gives the frosted-glass feel.
-
-4. **Kind chips** — keep `badge` shape but stop using `minimal: true`
-   alone. Replace with subtle per-kind `intent`:
-   - `keyword` → `intent: 'info'`
-   - `function` / `method` / `class` → `intent: 'success'`
-   - `variable` / `field` / `property` → no intent (default chip)
-   - `constant` / `value` → `intent: 'warning'`
-   - `wizard` (Qonsole-specific) → `intent: 'pending'` + icon
-   Per-kind intent reads better against the dark surface than uniform
-   muted badges.
-
-5. **Diagnostic `ReqoreMessage`s** — always pair with `opaque={false}`
-   so they blend with the surface (matches every existing Qonsole
-   message). Apply a gradient effect:
-   - severity 1 (Error) → `NegativeColorEffect`
-   - severity 2 (Warning) → `WarningColorEffect`
-   - severity 3+ (Info) → `PendingColorEffect`
-
-6. **Loading overlay** — drop the hand-rolled `<div>` with `rgba(0,0,0,0.06)`.
-   Replace with `<ReqorePanel transparent backgroundBlur={20} ...>`
-   wrapping `<ReqoreSpinner>`. Native Reqore composition.
-
-7. **Focused row highlight** — use `intent='info'` on the focused
-   `ReqoreMenuItem` (instead of the default `selected={true}` purple)
-   for better contrast on the `#1a1a1a` surface.
-
-8. **Hover popover** — same frost treatment as the completion popover.
-   Border-radius and shadow inherited from Reqore — no overrides.
-
-9. **Group dividers** — `<ReqoreMenuDivider>` already accepts an
-   `intent` — set `intent='muted'` and reduce the label opacity so
-   sections separate visually but don't shout.
-
-## Surface area
-
-| File | Change |
-|---|---|
-| `src/components/smartEditor/styling.ts` | **new** — exports `SMART_EDITOR_OVERLAY_EFFECT`, `SMART_EDITOR_OVERLAY_OPACITY`, `SMART_EDITOR_POPOVER_CUSTOM_THEME`, kind-to-intent map, severity-to-effect map |
-| `src/components/smartEditor/SmartEditor.tsx` | apply: popover `customTheme` + `backgroundBlur` + `transparent`; per-kind chip intent; diagnostic message `opaque={false}` + per-severity effect; loading overlay rewritten via Reqore primitives; focused row `intent='info'`; divider `intent='muted'` |
-| `src/components/smartEditor/useLspAutocomplete.ts` | extend `ICompletionDropdownItem` with optional `kindIntent` resolved from the kind-to-intent map |
-| `src/components/dpqlEditor/DpqlEditor.tsx` | (no change — visual polish lands generic in SmartEditor) |
-| `src/components/qonsoleSmartInput/QonsoleSmartInput.tsx` | optional: add a `tone?: 'card' \| 'qonsole'` prop so the Qonsole wrapper can request the purple-tinted theme (`#190819`) when embedded in the chat panel instead of the default card tone |
-
-## Visual-spec verification
-
-Storybook is the verification harness. The following stories should
-exercise every visual surface:
-
-- `Components/DpqlEditor → WithSemanticTokens` — kind chips, popover container
-- `Components/DpqlEditor → WithMixedContent` — chips on a richly-coloured doc
-- `Components/QonsoleSmartInput → WithDiagnostics` — message panel + inline underlines
-- `Components/QonsoleSmartInput → LiveQonsole` — full live look
-- `Components/SmartEditor → WithMarkdownDocs` — hover doc tooltip
-
-Manual checks:
-
-- Light + dark theme — toggle in Storybook addon; the editor must
-  remain legible in both
-- Behind a Qonsole-tinted host (`'#190819'`) and behind a card host
-  (`'#0a0a0a'`) — pop both into Storybook decorators to confirm
-
-## Tasks
-
-### Setup
-
-- [ ] Create `src/components/smartEditor/styling.ts` with the constants
-      table from §design-decisions §1, §3, §4, §5. Inline the source
-      attribution as a comment pointing at the qorus-ide files.
-
-### Popover container
-
-- [ ] In `SmartEditor.tsx`, replace the bare `<ReqorePopover>` with
-      one that takes `customTheme={SMART_EDITOR_POPOVER_CUSTOM_THEME}`,
-      `transparent`, `backgroundBlur={20}`, `effect={{ glow: { color: 'custom1:darken:1:0.2', size: 0.05, blur: 30 } }}`
-- [ ] Same treatment for the hover popover
-- [ ] Verify the chip-anchored Replace-mode popover inherits
-
-### Menu items
-
-- [ ] Per-kind intent map — extend `ICompletionDropdownItem` with
-      `kindIntent?: TReqoreIntent`
-- [ ] Populate `kindIntent` in the mapping step of `performCompletionRequest`
-- [ ] Pass `intent={kindIntent}` to `<ReqoreMenuItem>`
-- [ ] Change focused-row to `intent='info'`
-- [ ] `<ReqoreMenuDivider intent='muted'>`
-
-### Diagnostic surface
-
-- [ ] `<ReqoreMessage>` per diagnostic gains `opaque={false}` and
-      `effect={severityToEffect(severity)}` from the new styling
-      module
-- [ ] Optional follow-up: hover on the inline wavy underline shows
-      a rich `<ReqorePopover>` instead of native browser `title=` —
-      defer if scope creeps
-
-### Loading overlay
-
-- [ ] Replace hand-rolled `<div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.06)' }}>`
-      with `<ReqoreControlGroup vertical wrap='center'>` or a styled
-      `<ReqorePanel transparent backgroundBlur={20} flat>` containing
-      `<ReqoreSpinner>` — confirm the editor body shows through
-- [ ] Confirm Phase 4's `loadingIndicator={null}` opt-out still works
-
-### Qonsole tone override
-
-- [ ] Add `tone?: 'card' | 'qonsole'` to `QonsoleSmartInput` props
-      (default `'card'` — preserves current behaviour)
-- [ ] When `'qonsole'`, pass `customTheme={{ main: '#190819' }}` to
-      `SmartEditor` (requires a new pass-through prop `customTheme?`
-      on `ISmartEditorProps`)
-
-### Tests
-
-- [ ] No new play tests required — visual-only
-- [ ] All existing 263 jest + 152 storybook play tests still pass
-- [ ] Run `yarn build:test:prod && yarn lint && yarn test`
-- [ ] Run `yarn test-storybook --url http://localhost:6008`
-
-### Verification
-
-- [ ] **STOP — user verifies in browser**: each story listed under
-      §visual-spec verification looks like the rest of the IDE
-- [ ] Commit
-
-## Out of scope
-
-- Animation tuning (`animate: 'hover'` on items / `animationSpeed`) —
-  saved for a separate pass if the user wants it
-- Scrollbar styling for the popover — defer; Reqore's default
-  scrollbar is fine
-- Light-theme tuning specifically — current palette is dark-first;
-  light-theme support is a separate batch
-- Touching the `ReqoreRichTextEditor` panel chrome itself (the editor
-  body) — that lives in Reqore upstream and any change should be a
-  Reqore PR