@elliotsystems/eai 0.1.2 → 0.1.4

package/plugin/opencode-plugin/src/tui/sidebar.tsx

@@ -0,0 +1,184 @@
+/**
+ * The Elliot knowledge panel — `sidebar_content`, plus Elliot's identity in
+ * `sidebar_title` and `sidebar_footer`.
+ *
+ * It shows only what nothing else in the sidebar shows. Upstream's built-in
+ * sections already list MCP servers, LSP clients, todos and changed files, so
+ * restating any of them here would be exactly the duplication this redesign is
+ * removing. What is left — and what no stock sidebar can know — is the retrieval
+ * scope in force and the sources Elliot actually cited in this session.
+ *
+ * Knowledge health therefore earns a row only when it is NOT healthy. A problem
+ * explains a bad answer and is worth the space; "working normally" is already
+ * visible in the MCP section and is not.
+ */
+import { For, Show } from "solid-js"
+
+import type { SessionSlotProps, TuiPluginApi } from "./api.js"
+import {
+  collectKnowledgeResults,
+  distinctCitations,
+  elliotServerNames,
+  knowledgeConnection,
+  type Citation,
+  type KnowledgeResult,
+} from "./knowledge.js"
+
+/** A height-bounded panel: past this, rows push the built-in sections off. */
+const MAX_CITATIONS = 6
+
+/** A small-caps-style section label, matching upstream's sidebar rhythm. */
+function Label(props: { api: TuiPluginApi; children: string }) {
+  return (
+    <text fg={props.api.theme.current.border} selectable={false}>
+      {props.children}
+    </text>
+  )
+}
+
+/**
+ * Every knowledge lookup in this session.
+ *
+ * Reads the transcript rather than calling the backend — see `knowledge.ts` for
+ * why a fetch here would violate the no-second-credential-path rule.
+ */
+function resultsFor(api: TuiPluginApi, sessionID: string): KnowledgeResult[] {
+  const servers = elliotServerNames(api.state.mcp())
+  if (servers.length === 0) return []
+
+  const parts = api.state.session
+    .messages(sessionID)
+    .flatMap((message) => [...api.state.part(message.id)])
+  return collectKnowledgeResults(parts, servers)
+}
+
+/**
+ * The scope retrieval actually ran under.
+ *
+ * The backend echoes `repo_scope` in its envelope, so the most recent lookup is
+ * authoritative — that is the scope Elliot *used*, not the one we assume from
+ * the worktree. Falling back to the branch keeps the row useful before the first
+ * lookup, and a missing scope is reported as tenant-wide rather than left blank,
+ * because "unscoped" is a real and meaningful state.
+ */
+function scopeLabel(results: readonly KnowledgeResult[]): string | undefined {
+  for (const result of [...results].reverse()) {
+    if (result.repoScope) return result.repoScope
+  }
+  return undefined
+}
+
+function CitationRow(props: { api: TuiPluginApi; citation: Citation }) {
+  const theme = props.api.theme.current
+  return (
+    <box flexDirection="row" gap={1}>
+      <text fg={theme.textMuted} selectable={true}>
+        {props.citation.path}
+      </text>
+      <Show when={props.citation.symbol}>
+        <text fg={theme.border} selectable={false}>
+          {props.citation.symbol}
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+/** The one row that appears only on trouble. */
+function Trouble(props: { api: TuiPluginApi }) {
+  const theme = props.api.theme.current
+  const connection = () => knowledgeConnection(props.api.state.mcp())
+
+  return (
+    <Show when={connection().status === "failed" || connection().status === undefined}>
+      <box flexDirection="row" gap={1}>
+        <text fg={connection().status === "failed" ? theme.error : theme.warning} selectable={false}>
+          !
+        </text>
+        <text fg={theme.textMuted} selectable={false}>
+          {connection().status === "failed"
+            ? "knowledge unreachable — answers are unsourced"
+            : "no knowledge server configured"}
+        </text>
+      </box>
+    </Show>
+  )
+}
+
+export function SidebarContent(props: { api: TuiPluginApi; slot: SessionSlotProps }) {
+  const theme = props.api.theme.current
+  const results = () => resultsFor(props.api, props.slot.session_id)
+  const scope = () => scopeLabel(results())
+  const citations = () => distinctCitations(results(), MAX_CITATIONS)
+
+  return (
+    <box gap={1}>
+      <box>
+        <Label api={props.api}>KNOWLEDGE</Label>
+        <Trouble api={props.api} />
+        <Show
+          when={scope()}
+          fallback={
+            <text fg={theme.textMuted} selectable={false}>
+              organisation-wide
+            </text>
+          }
+        >
+          <text fg={theme.text} selectable={true}>
+            {scope()}
+          </text>
+        </Show>
+      </box>
+
+      <Show when={citations().length > 0}>
+        <box>
+          <Label api={props.api}>SOURCES CITED</Label>
+          <For each={citations()}>
+            {(citation) => <CitationRow api={props.api} citation={citation} />}
+          </For>
+        </box>
+      </Show>
+    </box>
+  )
+}
+
+/**
+ * The session title, with Elliot's mark ahead of it.
+ *
+ * `sidebar_title` is `single_winner`, so this replaces upstream's title block
+ * rather than stacking with it — which is why the title itself is reproduced
+ * here instead of only the branding.
+ */
+export function SidebarTitle(props: { api: TuiPluginApi; slot: SessionSlotProps & { title: string } }) {
+  const theme = props.api.theme.current
+  return (
+    <box paddingRight={1}>
+      <box flexDirection="row" gap={1}>
+        <text fg={theme.primary} selectable={false}>
+          ●
+        </text>
+        <text fg={theme.text} selectable={true}>
+          {props.slot.title}
+        </text>
+      </box>
+    </box>
+  )
+}
+
+/** Replaces upstream's "OpenCode <version>" line; the build is Elliot's. */
+export function SidebarFooter(props: { api: TuiPluginApi }) {
+  const theme = props.api.theme.current
+  return (
+    <box flexDirection="row" gap={1}>
+      <text fg={theme.primary} selectable={false}>
+        ●
+      </text>
+      <text fg={theme.text} selectable={false}>
+        Elliot AI
+      </text>
+      <text fg={theme.border} selectable={false}>
+        {props.api.app.version}
+      </text>
+    </box>
+  )
+}

package/plugin/opencode-plugin/src/tui/wordmark.tsx

@@ -0,0 +1,109 @@
+/**
+ * The ELLIOT AI wordmark, filling `home_logo` (declared `mode="replace"`, so it
+ * supplants upstream's `<Logo/>`).
+ *
+ * Colour comes from the active theme, never from literals, so `themes/elliot.json`
+ * stays the single source of truth and the mark degrades correctly under another
+ * theme.
+ */
+import { For } from "solid-js"
+import { RGBA, TextAttributes } from "@opentui/core"
+
+import type { TuiPluginApi } from "./api.js"
+
+/**
+ * ELLIOT / AI, transcribed from the design's glyph grid.
+ *
+ * 4-column glyphs separated by one space, except `I` and `T` which are 3 — that
+ * is the design's own metric. `left` is 27 columns, `right` is 8.
+ *
+ * `_` and `^` are the host's shading marks (`packages/tui/src/logo.ts`): a cell
+ * painted on a tinted background, and `▀` on that same tint.
+ */
+const WORDMARK = {
+  left: [
+    "█▀▀▀ █    █    ▀▀▀ █▀▀█ ▀▀▀",
+    "█^^^ █    █     █  █__█  █ ",
+    "▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀ ▀▀▀▀  ▀ ",
+  ],
+  right: ["█▀▀█ ▀▀▀", "█^^█  █ ", "▀  ▀ ▀▀▀"],
+} as const
+
+/** The design sets ELLIOT and AI two columns apart, not one. */
+const WORDMARK_GAP = 2
+
+/**
+ * Tint a shadow from the theme, mirroring the host's `tint(background, fg, 0.25)`
+ * so a plugin-rendered wordmark shades identically to a host-rendered one.
+ * Reimplemented rather than imported because the host's theme context is not a
+ * shared module.
+ *
+ * It must return a real `RGBA`, not a matching plain object. The renderer hands
+ * colours to opentui's FFI (`textBufferSetDefaultBg`), which needs the
+ * Float32Array an `RGBA` carries; a structurally identical literal reaches the
+ * boundary and dies with "Expected ArrayBufferView but received Cell to a
+ * pointer", taking the whole TUI down. That crash was latent for as long as this
+ * plugin never loaded -- fixing the loader is what surfaced it.
+ */
+function shadowOf(background: RGBA, fg: RGBA): RGBA {
+  const mix = (a: number, b: number) => a + (b - a) * 0.25
+  return RGBA.fromValues(
+    mix(background.r, fg.r),
+    mix(background.g, fg.g),
+    mix(background.b, fg.b),
+    background.a ?? 1,
+  )
+}
+
+function Glyphs(props: { line: string; fg: RGBA; shadow: RGBA; bold: boolean }) {
+  const attrs = props.bold ? TextAttributes.BOLD : undefined
+  return (
+    <box flexDirection="row">
+      {Array.from(props.line).map((char) => {
+        if (char === "_")
+          return (
+            <text fg={props.fg} bg={props.shadow} attributes={attrs} selectable={false}>
+              {" "}
+            </text>
+          )
+        if (char === "^")
+          return (
+            <text fg={props.fg} bg={props.shadow} attributes={attrs} selectable={false}>
+              ▀
+            </text>
+          )
+        return (
+          <text fg={props.fg} attributes={attrs} selectable={false}>
+            {char}
+          </text>
+        )
+      })}
+    </box>
+  )
+}
+
+export function Wordmark(props: { api: TuiPluginApi }) {
+  const theme = props.api.theme.current
+  return (
+    <box>
+      <For each={WORDMARK.left}>
+        {(line, index) => (
+          <box flexDirection="row" gap={WORDMARK_GAP}>
+            <Glyphs
+              line={line}
+              fg={theme.textMuted}
+              shadow={shadowOf(theme.background, theme.textMuted)}
+              bold={false}
+            />
+            <Glyphs
+              line={WORDMARK.right[index()] ?? ""}
+              fg={theme.primary}
+              shadow={shadowOf(theme.background, theme.primary)}
+              bold={true}
+            />
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}

package/plugin/opencode-plugin/themes/elliot.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "brandOrange": "#FF6600",
+    "accentOrange": "#FF7A2E",
+    "accentOrangeLit": "#FF9354",
+    "accentOrangeSoft": "#FFB07A",
+    "accentOrangeDeep": "#C2410C",
+    "accentOrangeInk": "#7C2D12",
+
+    "ground": "#0B0C0E",
+    "panel": "#121315",
+    "elevated": "#191B1D",
+    "elevated2": "#212325",
+    "border": "#262829",
+    "borderSoft": "#1C1E20",
+
+    "text": "#F5F6F8",
+    "textFaint": "#A0A3A8",
+    "textDim": "#8E9297",
+    "textGhost": "#3A3D3F",
+
+    "success": "#5DD89B",
+    "warning": "#E8C33A",
+    "error": "#F7768E",
+    "teal": "#5EEAD4",
+
+    "lightGround": "#FFFFFF",
+    "lightPanel": "#FAFAFA",
+    "lightElevated": "#F2F2F4",
+    "lightElevated2": "#E9E9EC",
+    "lightBorder": "#D9D9DE",
+    "lightBorderSoft": "#EDEDF0",
+    "lightText": "#0B0C0E",
+    "lightTextDim": "#6B6E73",
+    "lightTextFaint": "#8E9297",
+    "lightTextGhost": "#C4C6CA",
+    "lightSuccess": "#1B7F4F",
+    "lightWarning": "#8A6D0B",
+    "lightError": "#C2334C",
+    "lightTeal": "#0F766E"
+  },
+  "theme": {
+    "primary": { "dark": "brandOrange", "light": "brandOrange" },
+    "accent": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "secondary": { "dark": "teal", "light": "lightTeal" },
+    "info": { "dark": "accentOrangeSoft", "light": "accentOrangeDeep" },
+
+    "error": { "dark": "error", "light": "lightError" },
+    "warning": { "dark": "warning", "light": "lightWarning" },
+    "success": { "dark": "success", "light": "lightSuccess" },
+
+    "text": { "dark": "text", "light": "lightText" },
+    "textMuted": { "dark": "textDim", "light": "lightTextDim" },
+
+    "selectedListItemText": { "dark": "ground", "light": "lightGround" },
+
+    "background": { "dark": "ground", "light": "lightGround" },
+    "backgroundPanel": { "dark": "panel", "light": "lightPanel" },
+    "backgroundElement": { "dark": "elevated", "light": "lightElevated" },
+    "backgroundMenu": { "dark": "elevated2", "light": "lightElevated2" },
+
+    "border": { "dark": "border", "light": "lightBorder" },
+    "borderActive": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "borderSubtle": { "dark": "borderSoft", "light": "lightBorderSoft" },
+
+    "diffAdded": { "dark": "success", "light": "lightSuccess" },
+    "diffRemoved": { "dark": "error", "light": "lightError" },
+    "diffContext": { "dark": "textDim", "light": "lightTextDim" },
+    "diffHunkHeader": { "dark": "textFaint", "light": "lightTextFaint" },
+    "diffHighlightAdded": { "dark": "#8DE8B8", "light": "#12603B" },
+    "diffHighlightRemoved": { "dark": "#FF9BAC", "light": "#A62740" },
+    "diffAddedBg": { "dark": "#0F2018", "light": "#E4F5EB" },
+    "diffRemovedBg": { "dark": "#241318", "light": "#FBE4E9" },
+    "diffContextBg": { "dark": "panel", "light": "lightPanel" },
+    "diffLineNumber": { "dark": "textGhost", "light": "lightTextGhost" },
+    "diffAddedLineNumberBg": { "dark": "#0C1913", "light": "#D6EDDF" },
+    "diffRemovedLineNumberBg": { "dark": "#1D0F13", "light": "#F6D8DF" },
+
+    "markdownText": { "dark": "text", "light": "lightText" },
+    "markdownHeading": { "dark": "brandOrange", "light": "accentOrangeDeep" },
+    "markdownLink": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "markdownLinkText": { "dark": "accentOrangeSoft", "light": "accentOrangeDeep" },
+    "markdownCode": { "dark": "accentOrangeSoft", "light": "accentOrangeDeep" },
+    "markdownBlockQuote": { "dark": "textFaint", "light": "lightTextFaint" },
+    "markdownEmph": { "dark": "accentOrangeLit", "light": "accentOrangeDeep" },
+    "markdownStrong": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "markdownHorizontalRule": { "dark": "borderSoft", "light": "lightBorderSoft" },
+    "markdownListItem": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "markdownListEnumeration": { "dark": "accentOrangeLit", "light": "accentOrangeDeep" },
+    "markdownImage": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "markdownImageText": { "dark": "textFaint", "light": "lightTextFaint" },
+    "markdownCodeBlock": { "dark": "text", "light": "lightText" },
+
+    "syntaxComment": { "dark": "textGhost", "light": "lightTextGhost" },
+    "syntaxKeyword": { "dark": "accentOrange", "light": "accentOrangeDeep" },
+    "syntaxFunction": { "dark": "accentOrangeLit", "light": "accentOrangeInk" },
+    "syntaxVariable": { "dark": "text", "light": "lightText" },
+    "syntaxString": { "dark": "success", "light": "lightSuccess" },
+    "syntaxNumber": { "dark": "accentOrangeSoft", "light": "accentOrangeDeep" },
+    "syntaxType": { "dark": "teal", "light": "lightTeal" },
+    "syntaxOperator": { "dark": "textFaint", "light": "lightTextFaint" },
+    "syntaxPunctuation": { "dark": "textDim", "light": "lightTextDim" }
+  }
+}

package/plugin/opencode-plugin/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022"
+    ],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src/**/*",
+    "test/**/*"
+  ]
+}