opencode-mask-j0k3r-dev-rgl 2.0.0

package/ascii-frames.ts

@@ -0,0 +1,81 @@
+// ─── Arch Linux ASCII Art Assets ──────────────────────────────────────────────
+
+// Zone colors for semantic coloring (sidebar)
+export const zoneColors = {
+  spike:   "#ff2d78",  // hot pink — top spike
+  arch:    "#00c8ff",  // neon blue — upper arch
+  bridge:  "#9d4edd",  // purple — lower bridge
+  base:    "#4dd8ff",  // neon blue2 — base feet
+} as const
+
+// ─── Home screen logo (large, prominent) ──────────────────────────────────────
+//
+//              /\
+//             /  \
+//            / /  \
+//           / /    \
+//          / /      \
+//         /_/        \
+//        _/            \_
+//       /                \
+//      /     .______,     \
+//     /      |      |      \
+//    /       |______|       \
+//   /                       \
+//  /                         \
+// /____________________________\
+//
+export const archLogoHome: string[] = [
+  "                /\\",
+  "               /  \\",
+  "              / /  \\",
+  "             / /    \\",
+  "            / /      \\",
+  "           /_/        \\",
+  "          _/            \\_",
+  "         /                \\",
+  "        /     .______,     \\",
+  "       /      |      |      \\",
+  "      /       |______|       \\",
+  "     /                       \\",
+  "    /                         \\",
+  "   /____________________________\\",
+]
+
+// Line-to-zone mapping for home logo coloring
+export const homeLogoZones: ("spike" | "arch" | "bridge" | "base")[] = [
+  "spike",  // line 0:  /\
+  "spike",  // line 1:  /  \
+  "arch",   // line 2:  / /  \
+  "arch",   // line 3:  / /    \
+  "arch",   // line 4:  / /      \
+  "arch",   // line 5:  /_/        \
+  "bridge", // line 6:  _/            \_
+  "bridge", // line 7:  /                \
+  "bridge", // line 8:  /     .______,     \
+  "bridge", // line 9:  /      |      |      \
+  "bridge", // line 10: /       |______|       \
+  "base",   // line 11: /                       \
+  "base",   // line 12: /                         \
+  "base",   // line 13: /____________________________\
+]
+
+// ─── Sidebar logo (compact) ──────────────────────────────────────────────────
+export const archLogoSidebar: string[] = [
+  "      /\\",
+  "     /  \\",
+  "    / /\\ \\",
+  "   / /  \\ \\",
+  "  / /    \\ \\",
+  " /_/      \\_\\",
+]
+
+// Line-to-zone mapping for sidebar logo
+export const sidebarLogoZones: ("spike" | "arch" | "bridge")[] = [
+  "spike",  // line 0
+  "spike",  // line 1
+  "arch",   // line 2
+  "arch",   // line 3
+  "bridge", // line 4
+  "bridge", // line 5
+]

package/components.tsx

@@ -0,0 +1,94 @@
+// @ts-nocheck
+/** @jsxImportSource @opentui/solid */
+import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
+import type { Cfg } from "./config"
+import { getOSName, getProviders } from "./detection"
+import {
+  archLogoHome,
+  homeLogoZones,
+  archLogoSidebar,
+  sidebarLogoZones,
+  zoneColors,
+} from "./ascii-frames"
+
+// ─── Home screen: Large Arch Linux logo + legend ─────────────────────────────
+export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
+  const t = props.theme
+
+  return (
+    <box flexDirection="column" alignItems="center">
+      {/* Arch Linux logo — zone-colored */}
+      {archLogoHome.map((line, i) => {
+        const zone = homeLogoZones[i]
+        const color = zoneColors[zone] || t.primary
+        return <text fg={color}>{line}</text>
+      })}
+
+      {/* Legend: j0k3r-dev-rgl@latest */}
+      <text> </text>
+      <box flexDirection="row" gap={0}>
+        <text fg="#ff2d78" bold={true}>j0k3r</text>
+        <text fg="#9d4edd">-</text>
+        <text fg="#00c8ff" bold={true}>dev</text>
+        <text fg="#9d4edd">-</text>
+        <text fg="#4dd8ff" bold={true}>rgl</text>
+        <text fg="#9d4edd">@</text>
+        <text fg="#ffd166" bold={true}>latest</text>
+      </box>
+
+      {/* Subtle separator */}
+      <box flexDirection="row" gap={0} marginTop={1}>
+        <text fg={t.textMuted} dimColor={true}>╭ </text>
+        <text fg={t.textMuted}>arch linux </text>
+        <text fg={t.textMuted} dimColor={true}>·</text>
+        <text fg={t.textMuted}> opencode </text>
+        <text fg={t.textMuted} dimColor={true}>╮</text>
+      </box>
+
+      <text> </text>
+    </box>
+  )
+}
+
+// ─── Sidebar: Compact Arch logo ──────────────────────────────────────────────
+export const SidebarArch = (props: { theme: TuiThemeCurrent; config: Cfg }) => {
+  if (!props.config.show_sidebar) return null
+
+  return (
+    <box flexDirection="column" alignItems="center">
+      {/* Compact Arch logo — zone-colored */}
+      {archLogoSidebar.map((line, i) => {
+        const zone = sidebarLogoZones[i]
+        const color = zoneColors[zone] || props.theme.primary
+        return <text fg={color}>{line.padEnd(14, " ")}</text>
+      })}
+
+      {/* Compact label */}
+      <text fg={props.theme.textMuted}>j0k3r@latest</text>
+      <text> </text>
+    </box>
+  )
+}
+
+// ─── Environment detection line ──────────────────────────────────────────────
+export const DetectedEnv = (props: {
+  theme: TuiThemeCurrent
+  providers: ReadonlyArray<{ id: string; name: string }> | undefined
+  config: Cfg
+}) => {
+  if (!props.config.show_detected) return null
+
+  const os = props.config.show_os ? getOSName() : null
+  const providers = props.config.show_providers ? getProviders(props.providers) : null
+
+  if (!os && !providers) return null
+
+  return (
+    <box flexDirection="row" gap={1}>
+      <text fg={props.theme.textMuted}>detected:</text>
+      {os && <text fg={props.theme.text}>{os}</text>}
+      {os && providers && <text fg={props.theme.textMuted}>·</text>}
+      {providers && <text fg={props.theme.text}>{providers}</text>}
+    </box>
+  )
+}

package/config.ts

@@ -0,0 +1,34 @@
+// ─── Configuration types and parsing helpers ──────────────────────────────────
+
+export type Cfg = {
+  enabled: boolean
+  theme: string
+  set_theme: boolean
+  show_detected: boolean
+  show_os: boolean
+  show_providers: boolean
+  show_sidebar: boolean
+}
+
+const pick = (value: unknown, fallback: string): string => {
+  if (typeof value !== "string") return fallback
+  if (!value.trim()) return fallback
+  return value
+}
+
+const bool = (value: unknown, fallback: boolean): boolean => {
+  if (typeof value !== "boolean") return fallback
+  return value
+}
+
+export const cfg = (opts: Record<string, unknown> | undefined): Cfg => {
+  return {
+    enabled:       bool(opts?.enabled, true),
+    theme:         pick(opts?.theme, "j0k3r-dev-rgl"),
+    set_theme:     bool(opts?.set_theme, true),
+    show_detected: bool(opts?.show_detected, true),
+    show_os:       bool(opts?.show_os, true),
+    show_providers: bool(opts?.show_providers, true),
+    show_sidebar:  bool(opts?.show_sidebar, true),
+  }
+}

package/detection.ts

@@ -0,0 +1,56 @@
+// ─── OS and provider detection ────────────────────────────────────────────────
+
+/**
+ * Detects the OS name. On Linux, reads /etc/os-release for distro name.
+ */
+export function getOSName(): string {
+  try {
+    // @ts-ignore — bun/node runtime only
+    const platform = process.platform
+    if (platform === "darwin") return "macOS"
+    if (platform === "win32") return "Windows"
+
+    // Linux — try to read distro name
+    // @ts-ignore
+    const fs = require("fs")
+    const osRelease = fs.readFileSync("/etc/os-release", "utf8")
+    const nameLine = osRelease.split("\n").find((l: string) => l.startsWith("NAME="))
+    if (nameLine) {
+      return nameLine
+        .replace("NAME=", "")
+        .replace(/"/g, "")
+        .trim()
+    }
+    return "Linux"
+  } catch {
+    return "Unknown"
+  }
+}
+
+// Friendly name mapping for LLM providers
+const PROVIDER_NAMES: Record<string, string> = {
+  openai:         "OpenAI",
+  google:         "Google",
+  "github-copilot": "Copilot",
+  "opencode-go":  "OpenCode GO",
+  anthropic:      "Claude",
+  deepseek:       "DeepSeek",
+  openrouter:     "OpenRouter",
+  mistral:        "Mistral",
+  groq:           "Groq",
+  cohere:         "Cohere",
+  together:       "Together",
+  perplexity:     "Perplexity",
+}
+
+/**
+ * Returns a comma-separated list of active provider display names.
+ */
+export function getProviders(
+  providers: ReadonlyArray<{ id: string; name: string }> | undefined
+): string | null {
+  if (!providers || providers.length === 0) return null
+
+  const names = providers.map((p) => PROVIDER_NAMES[p.id] ?? p.name ?? p.id)
+  return names.join(", ")
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "opencode-mask-j0k3r-dev-rgl",
+  "version": "2.0.0",
+  "description": "Arch Linux TUI mask for OpenCode — neon blue + hot pink theme with prominent ASCII logo and j0k3r-dev-rgl@latest legend",
+  "type": "module",
+  "exports": {
+    "./tui": {
+      "import": "./tui.tsx",
+      "config": {
+        "enabled": true,
+        "theme": "j0k3r-dev-rgl",
+        "set_theme": true,
+        "show_detected": true,
+        "show_os": true,
+        "show_providers": true,
+        "show_sidebar": true
+      }
+    }
+  },
+  "files": [
+    "tui.tsx",
+    "config.ts",
+    "detection.ts",
+    "ascii-frames.ts",
+    "components.tsx",
+    "themes/j0k3r-dev-rgl.json"
+  ],
+  "engines": {
+    "opencode": ">=1.3.13"
+  },
+  "peerDependencies": {
+    "@opencode-ai/plugin": "*",
+    "@opentui/core": "*",
+    "@opentui/solid": "*",
+    "solid-js": "*"
+  },
+  "keywords": [
+    "opencode",
+    "plugin",
+    "theme",
+    "arch-linux",
+    "tui",
+    "ascii"
+  ],
+  "author": "j0k3r",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/j0k3r/opencode-mask.git"
+  }
+}

package/themes/j0k3r-dev-rgl.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "bg0":     "#0a0b18",
+    "bg1":     "#0f1128",
+    "bg2":     "#161830",
+    "bg3":     "#1d1f3a",
+    "bg4":     "#252847",
+
+    "nBlue":   "#00c8ff",
+    "nBlue2":  "#4dd8ff",
+    "nBlue3":  "#99e9ff",
+
+    "hPink":   "#ff2d78",
+    "hPink2":  "#ff6b9d",
+    "hPink3":  "#ffb3cc",
+
+    "purple":  "#9d4edd",
+    "purple2": "#c77dff",
+    "purple3": "#e0b3ff",
+
+    "fg0":     "#e8eaf6",
+    "fg1":     "#9399c9",
+    "fg2":     "#5c6bc0",
+
+    "success": "#00e5a0",
+    "warning": "#ffd166",
+    "error":   "#ff2d78"
+  },
+  "theme": {
+    "primary":           { "dark": "nBlue",   "light": "nBlue"   },
+    "secondary":         { "dark": "hPink",   "light": "hPink"   },
+    "accent":            { "dark": "purple",  "light": "purple"  },
+    "error":             { "dark": "error",   "light": "error"   },
+    "warning":           { "dark": "warning", "light": "warning" },
+    "success":           { "dark": "success", "light": "success" },
+    "info":              { "dark": "nBlue",   "light": "nBlue"   },
+
+    "text":              { "dark": "fg0",     "light": "bg0"     },
+    "textMuted":         { "dark": "fg1",     "light": "fg2"     },
+
+    "background":        { "dark": "bg0",     "light": "#f5f6ff" },
+    "backgroundPanel":   { "dark": "bg1",     "light": "#ecedff" },
+    "backgroundElement": { "dark": "bg2",     "light": "#e2e4ff" },
+
+    "border":            { "dark": "bg3",     "light": "#c5c8e8" },
+    "borderActive":      { "dark": "nBlue",   "light": "nBlue"   },
+    "borderSubtle":      { "dark": "bg2",     "light": "#d5d8f0" },
+
+    "diffAdded":               { "dark": "success", "light": "success" },
+    "diffRemoved":             { "dark": "error",   "light": "error"   },
+    "diffContext":             { "dark": "fg1",     "light": "fg2"     },
+    "diffHunkHeader":          { "dark": "purple",  "light": "purple"  },
+    "diffHighlightAdded":      { "dark": "success", "light": "success" },
+    "diffHighlightRemoved":    { "dark": "error",   "light": "error"   },
+    "diffAddedBg":             { "dark": "bg2",     "light": "#d0fff0" },
+    "diffRemovedBg":           { "dark": "bg2",     "light": "#ffd0e0" },
+    "diffContextBg":           { "dark": "bg1",     "light": "#ecedff" },
+    "diffLineNumber":          { "dark": "fg2",     "light": "fg2"     },
+    "diffAddedLineNumberBg":   { "dark": "bg3",     "light": "#b0ffe0" },
+    "diffRemovedLineNumberBg": { "dark": "bg3",     "light": "#ffb0cc" },
+
+    "markdownText":            { "dark": "fg0",     "light": "bg0"    },
+    "markdownHeading":         { "dark": "nBlue",   "light": "nBlue"  },
+    "markdownLink":            { "dark": "hPink",   "light": "hPink"  },
+    "markdownLinkText":        { "dark": "nBlue2",  "light": "nBlue"  },
+    "markdownCode":            { "dark": "purple2", "light": "purple" },
+    "markdownBlockQuote":      { "dark": "fg2",     "light": "fg2"    },
+    "markdownEmph":            { "dark": "hPink2",  "light": "hPink"  },
+    "markdownStrong":          { "dark": "nBlue",   "light": "nBlue"  },
+    "markdownHorizontalRule":  { "dark": "bg4",     "light": "fg2"    },
+    "markdownListItem":        { "dark": "nBlue",   "light": "nBlue"  },
+    "markdownListEnumeration": { "dark": "purple",  "light": "purple" },
+    "markdownImage":           { "dark": "hPink",   "light": "hPink"  },
+    "markdownImageText":       { "dark": "nBlue2",  "light": "nBlue"  },
+    "markdownCodeBlock":       { "dark": "fg0",     "light": "bg0"    },
+
+    "syntaxComment":     { "dark": "fg2",     "light": "fg2"    },
+    "syntaxKeyword":     { "dark": "hPink",   "light": "hPink"  },
+    "syntaxFunction":    { "dark": "nBlue",   "light": "nBlue"  },
+    "syntaxVariable":    { "dark": "fg0",     "light": "bg0"    },
+    "syntaxString":      { "dark": "nBlue2",  "light": "nBlue"  },
+    "syntaxNumber":      { "dark": "purple2", "light": "purple" },
+    "syntaxType":        { "dark": "hPink2",  "light": "hPink"  },
+    "syntaxOperator":    { "dark": "hPink",   "light": "hPink"  },
+    "syntaxPunctuation": { "dark": "fg1",     "light": "fg2"    }
+  }
+}

package/tui.tsx

@@ -0,0 +1,66 @@
+// @ts-nocheck
+/** @jsxImportSource @opentui/solid */
+import type { TuiPlugin, TuiPluginModule } from "@opencode-ai/plugin/tui"
+import { cfg } from "./config"
+import { HomeLogo, SidebarArch, DetectedEnv } from "./components"
+
+const id = "j0k3r-dev-rgl"
+
+const rec = (value: unknown) => {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return
+  return Object.fromEntries(Object.entries(value))
+}
+
+const tui: TuiPlugin = async (api, options) => {
+  const boot = cfg(rec(options))
+  if (!boot.enabled) return
+
+  // Theme setup (wrapped in try-catch)
+  try {
+    await api.theme.install("./themes/j0k3r-dev-rgl.json")
+    if (boot.set_theme) {
+      api.theme.set(boot.theme)
+    }
+  } catch (error) {
+    console.error("[j0k3r-dev-rgl] Theme setup failed:", error)
+  }
+
+  // Slot registration
+  api.slots.register({
+    slots: {
+      // Home screen: large Arch logo + j0k3r-dev-rgl@latest legend
+      home_logo(ctx) {
+        return <HomeLogo theme={ctx.theme.current} />
+      },
+
+      // Below the prompt: environment detection
+      home_bottom(ctx) {
+        return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={boot} />
+      },
+
+      // Sidebar: compact Arch logo
+      sidebar_content(ctx) {
+        return <SidebarArch theme={ctx.theme.current} config={boot} />
+      },
+
+      // Prompt bar right side: session info
+      session_prompt_right(ctx, value) {
+        const t = ctx.theme.current
+        return (
+          <text fg={t.textMuted}>
+            <span style={{ fg: "#ff2d78" }}>j0k3r</span>
+            <span style={{ fg: "#9d4edd" }}>@</span>
+            {(value.session_id ?? "").slice(0, 6)}
+          </text>
+        )
+      },
+    },
+  })
+}
+
+const plugin: TuiPluginModule & { id: string } = {
+  id,
+  tui,
+}
+
+export default plugin