plugin-gentleman 1.0.0 → 1.0.1

package/README.md

@@ -5,23 +5,43 @@ OpenCode TUI plugin featuring **Mustachi** — an animated ASCII mascot with eye
 ## What This Is
 
 A TUI plugin for OpenCode that:
-- 🎭 Shows **Mustachi** (ASCII mascot) in your home logo
-- 👀 Subtle **eye animations** (optional, low-frequency)
-- 💬 **Motivational phrases** during busy/loading states (Rioplatense Spanish style)
+- 🎭 Shows a prominent **ASCII mustache** on the home screen
+- 👤 Shows the full **Mustachi face** with eyes in the sidebar
+- 👀 Subtle **eye animations** in sidebar (optional, low-frequency)
+- 💬 **Motivational phrases** during busy/loading states in sidebar (Rioplatense Spanish style)
 - 🎨 Installs and applies the **Gentleman theme** automatically
-- 🖥️ Detects and displays your **OS and LLM providers**
+- 🖥️ Detects and displays your **OS and LLM providers** below the prompt
 - ⚙️ Fully **configurable** via `opencode.json`
 
 ## Installation
 
-### Method 1: Local Testing with Tarball (Recommended First)
+### Recommended: Global Plugin Installation
+
+This is the real, verified flow.
+
+1. Install the plugin with OpenCode:
 
 ```bash
-npm pack
-npm install -g ./plugin-gentleman-1.0.0.tgz
+opencode plugin plugin-gentleman --global
 ```
 
-Add to `~/.config/opencode/opencode.json`:
+2. OpenCode will download the package and update your global TUI config automatically.
+
+3. Restart OpenCode:
+
+```bash
+opencode
+```
+
+4. You should see:
+   - a prominent ASCII mustache on the home screen
+   - `OpenCode` below it
+   - `Detected: <OS> | <providers>` below the prompt area
+   - full Mustachi in the sidebar
+
+### Manual Config (only if you prefer editing config yourself)
+
+If you want to manage the config manually instead of using `opencode plugin`, add this to `~/.config/opencode/opencode.json`:
 
 ```json
 {
@@ -30,19 +50,17 @@ Add to `~/.config/opencode/opencode.json`:
 }
 ```
 
-Restart OpenCode:
+OpenCode will install npm plugins listed there automatically on startup.
 
-```bash
-opencode
-```
+### Development: Local Testing with npm link
 
-### Method 2: Development with npm link
+For plugin development:
 
 ```bash
 npm link
 ```
 
-Add to `~/.config/opencode/opencode.json`:
+Then add to `~/.config/opencode/opencode.json`:
 
 ```json
 {
@@ -51,24 +69,40 @@ Add to `~/.config/opencode/opencode.json`:
 }
 ```
 
-Restart OpenCode.
+Restart OpenCode to see changes.
 
-### Method 3: npm Registry (After Publishing)
+### Development: Local Testing with Tarball
+
+For testing the packed artifact locally:
 
 ```bash
-npm install -g plugin-gentleman
-opencode plugin install plugin-gentleman
+npm pack
+opencode plugin ./plugin-gentleman-<version>.tgz --global
 ```
 
+If your OpenCode version does not accept a tarball path there, use the recommended published-package flow instead.
+
 ## Features
 
+### Visual Layout
+
+**Home Screen:**
+- Prominent ASCII mustache (no face, just the mustache)
+- "OpenCode" branding text
+- Environment detection line below the prompt area showing OS and providers
+
+**Sidebar:**
+- Full Mustachi face with eyes and mustache
+- Animated eyes that occasionally look around (when animations enabled)
+- Tongue and motivational phrases during busy states (when animations enabled)
+
 ### Mustachi Mascot
 
 Mustachi is an ASCII character with:
-- Two large eyes that occasionally look in different directions
-- A prominent mustache rendered in theme colors
-- A tongue that appears during busy/loading states
-- Motivational phrases in Rioplatense Spanish style
+- Two large eyes that occasionally look in different directions (sidebar only)
+- A prominent mustache rendered in theme colors (both home and sidebar)
+- A tongue that appears during busy/loading states (sidebar only)
+- Motivational phrases in Rioplatense Spanish style (sidebar only)
 
 Example phrases shown during busy states:
 - "Ponete las pilas, hermano..."
@@ -204,10 +238,11 @@ Shows only Mustachi and the OpenCode branding, no OS/provider info.
 
 1. **Theme Installation**: On load, installs `gentleman.json` into OpenCode themes
 2. **Theme Activation**: If `set_theme: true`, switches to the gentleman theme
-3. **Logo Slot**: Registers `home_logo` slot with Mustachi ASCII art
-4. **Environment Detection Slot**: Registers `home_prompt_after` slot with OS/provider info
-5. **Animation Loop**: If `animations: true`, starts interval timers for eye variations and busy-state detection
-6. **Busy State Detection**: Attempts to read `api.state.session.running` (best-effort; may not be exposed by all OpenCode versions)
+3. **Home Logo Slot**: Registers `home_logo` slot with mustache-only ASCII art
+4. **Environment Detection Slot**: Registers `home_bottom` slot with OS/provider info below the prompt
+5. **Sidebar Slot**: Registers `sidebar_content` slot with full Mustachi face and animations
+6. **Animation Loop**: If `animations: true`, starts interval timers for eye variations and busy-state detection (sidebar only)
+7. **Busy State Detection**: Attempts to read `api.state.session.running` (best-effort; may not be exposed by all OpenCode versions)
 
 ### Technical Details
 
@@ -272,23 +307,17 @@ oc-plugin-gentleman/
 - `gentleman-local.ts` — legacy local system plugin with limited features
 - `install-local-real.sh`, `install-local.sh` — local installation scripts
 - `mustachi examples/` — reference images
-oc-plugin-gentleman/
-├── tui.tsx              # TUI plugin entry point (main implementation)
-├── gentleman.json       # Gentleman theme definition
-├── package.json         # npm package manifest with exports
-├── gentleman-local.ts   # Legacy local system plugin (limited features)
-├── install-local-real.sh # Install script for local system plugin
-├── mustachi examples/   # PNG reference images (not used in final plugin)
-└── README.md            # This file
-```
 
-## Caveats Before Publishing
+## Caveats
 
-1. **Busy State Detection**: The plugin attempts to detect busy states via `api.state.session.running`, but this may not be exposed in all OpenCode versions. If unavailable, busy-state animations won't trigger (eye animations still work).
+1. **Busy State Detection**: The plugin attempts to detect busy states via `api.state.session.running`, but this may not be exposed in all OpenCode versions. If unavailable, busy-state animations won't trigger (eye animations still work in sidebar).
 
 2. **Animation Frequency**: Currently set to low frequency (4s for eyes, 3s for phrase rotation). If this feels too fast or too slow in real usage, adjust the intervals in `tui.tsx`.
 
-3. **Sidebar Support**: OpenCode TUI may or may not support sidebar slots. Currently, Mustachi only appears in the `home_logo` slot. If sidebar slots become available, this can be added in a future version.
+3. **Slot Usage**: The plugin uses these OpenCode TUI slots:
+   - `home_logo` — mustache-only ASCII art
+   - `home_bottom` — environment detection (OS + providers)
+   - `sidebar_content` — full Mustachi face with animations
 
 4. **Theme Compatibility**: The plugin installs and optionally activates the Gentleman theme. If the user has a custom theme they prefer, they should set `set_theme: false`.
 
@@ -302,13 +331,13 @@ To modify the plugin:
 4. Restart OpenCode to see changes
 
 To add new eye variations:
-- Edit the `eyeVariations` array in `tui.tsx`
+- Edit the `eyeVariations` array in `tui.tsx` (affects sidebar only)
 
 To add new busy phrases:
-- Edit the `busyPhrases` array in `tui.tsx`
+- Edit the `busyPhrases` array in `tui.tsx` (affects sidebar only)
 
 To change animation timings:
-- Adjust `setInterval` durations in the `Home` component
+- Adjust `setInterval` durations in the `SidebarMustachi` component
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "plugin-gentleman",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "OpenCode TUI plugin featuring Mustachi - an animated ASCII mascot with eyes, mustache, and optional motivational phrases during busy states",
   "type": "module",
   "exports": {

package/tui.tsx

@@ -6,32 +6,123 @@ import { createSignal, onCleanup, createEffect } from "solid-js"
 
 const id = "gentleman"
 
-// Mustachi ASCII art - inspired by mustachi examples (eyes, mustache, optional tongue)
-// Base state: neutral look
-const mustachiBase = [
+// Premium Mustachi ASCII art - full version for sidebar
+// Base structure with eyes that will be replaced dynamically
+const mustachiNeutralBase = [
+  "            ████████████               ████████████",
+  "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+  "         ██░░░░░░░░░░░░░░██         ██░░░░░░░░░░░░░░██",
+  "        ██░░░░████████░░░░██       ██░░░░░░░░░░░░░░░░██",
+  "        ██░░░░████████░░░░██       ██░░░░░░░░░░░░░░░░██",
+  "        ██░░░░████████░░░░██       ██░░░░░░░░░░░░░░░░██",
+  "         ██░░░░░░░░░░░░░░██         ██░░░░░░░░░░░░░░██",
+  "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+  "            ████████████               ████████████",
+]
+
+// Squinted eyes version for busy state
+const mustachiSquintedBase = [
+  "            ████████████               ████████████",
+  "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+  "         ██░░░████████░░░██         ██░░░░░░░░░░░░░░██",
+  "        ██░░████░░░░████░░██       ██░░░░░░░░░░░░░░░░██",
+  "        ██░░██░░░░░░░░██░░██       ██░░░░░░░░░░░░░░░░██",
+  "        ██░░░░░░░░░░░░░░░░██       ██░░░░░░░░░░░░░░░░██",
+  "         ██░░░░░░░░░░░░░░██         ██░░░░░░░░░░░░░░██",
+  "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+  "            ████████████               ████████████",
+]
+
+// Mustache section (shared by all states)
+const mustachiMustacheSection = [
+  "               ████████                 ████████",
+  "             ████████████             ████████████",
+  "    ██      ████████████████       ████████████████      ██",
+  "   ████    ████████████████████ ████████████████████    ████",
+  "  ██████  ███████████████████████████████████████████  ██████",
+  "  ███████████████████████████████████████████████████████████",
+  "  ███████████████████████████████████████████████████████████",
+  "  ███████████████████████████████████████████████████████████",
+  "   █████████████████████████████████████████████████████████",
+  "    ███████████████████████████████████████████████████████",
+  "      ▓▓█████████████████████     █████████████████████▓▓",
+  "        ▓▓▓███████████████           ███████████████▓▓▓",
+  "           ▓▓▓█████████                 █████████▓▓▓",
+  "              ▓▓▓▓▓▓▓                     ▓▓▓▓▓▓▓",
+]
+
+// Tongue animation frames (progressive)
+const tongueFrames = [
+  [],  // no tongue
+  ["                             ███████"],  // small tongue
+  ["                             ███████", "                              █████"],  // medium tongue
+  ["                             ███████", "                              █████", "                               ███"],  // full tongue
+]
+
+// Mustache-only ASCII art for home logo (prominent and simple)
+const mustachiMustacheOnly = [
   "",
-  "    ╭─────╮       ╭─────╮    ",
-  "   │ ● ● │       │ ○ ○ │    ",
-  "    ╰─────╯       ╰─────╯    ",
-  "       ╲           ╱         ",
-  "        ╲         ╱          ",
-  "   ╭─────═════════─────╮     ",
-  "  ╱   ╭───────────╮   ╲      ",
-  " ╱    │ ~~~~~~~~~ │    ╲     ",
-  "╱     ╰───────────╯     ╲    ",
-  "╲                       ╱    ",
-  " ╲                     ╱     ",
-  "  ╰───────────────────╯      ",
+  "               ████████                 ████████",
+  "             ████████████             ████████████",
+  "    ██      ████████████████       ████████████████      ██",
+  "   ████    ████████████████████ ████████████████████    ████",
+  "  ██████  ███████████████████████████████████████████  ██████",
+  "  ███████████████████████████████████████████████████████████",
+  "  ███████████████████████████████████████████████████████████",
+  "  ███████████████████████████████████████████████████████████",
+  "   █████████████████████████████████████████████████████████",
+  "    ███████████████████████████████████████████████████████",
+  "      ▓▓█████████████████████     █████████████████████▓▓",
+  "        ▓▓▓███████████████           ███████████████▓▓▓",
+  "           ▓▓▓█████████                 █████████▓▓▓",
+  "              ▓▓▓▓▓▓▓                     ▓▓▓▓▓▓▓",
   "",
 ]
 
-// Eye variations for subtle animation
-const eyeVariations = [
-  { left: "● ●", right: "○ ○" },  // neutral
-  { left: "◐ ●", right: "○ ○" },  // left eye looking left
-  { left: "● ◑", right: "○ ○" },  // left eye looking right
-  { left: "● ●", right: "◐ ○" },  // right eye looking left
-  { left: "● ●", right: "○ ◑" },  // right eye looking right
+// Left pupil positions for look-around animation (progressive)
+// Modifies only the left eye (white sclera with dark pupil)
+// Right eye is monocle/glass and remains static
+const leftPupilPositions = [
+  "████████",  // center (line 3 of eyes)
+  "██████  ",  // looking left
+  "  ██████",  // looking right
+  "████████",  // center again
+]
+
+// Blink animation frames (progressive) - affects both eyes
+const blinkFrames = [
+  // Open eyes (default state embedded in base arrays)
+  { left: mustachiNeutralBase, squinted: mustachiSquintedBase },
+  // Half closed
+  { 
+    left: [
+      "            ████████████               ████████████",
+      "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+      "         ██░░░░████░░░░░░██         ██░░░░░░░░░░░░░░██",
+      "        ██░░░░████████░░░░██       ██░░░░░░░░░░░░░░░░██",
+      "        ██░░░░████████░░░░██       ██░░░░░░░░░░░░░░░░██",
+      "        ██░░░░████████░░░░██       ██░░░░░░░░░░░░░░░░██",
+      "         ██░░░░░░░░░░░░░░██         ██░░░░░░░░░░░░░░██",
+      "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+      "            ████████████               ████████████",
+    ],
+    squinted: mustachiSquintedBase  // squinted stays squinted during blink
+  },
+  // Fully closed
+  {
+    left: [
+      "            ████████████               ████████████",
+      "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+      "         ██░░████████░░░░██         ██░░░░░░░░░░░░░░██",
+      "        ██░░████████████░░██       ██░░░░░░░░░░░░░░░░██",
+      "        ██░░████████████░░██       ██░░░░░░░░░░░░░░░░██",
+      "        ██░░████████████░░██       ██░░░░░░░░░░░░░░░░██",
+      "         ██░░░░░░░░░░░░░░██         ██░░░░░░░░░░░░░░██",
+      "          ██░░░░░░░░░░░░██           ██░░░░░░░░░░░░██",
+      "            ████████████               ████████████",
+    ],
+    squinted: mustachiSquintedBase
+  },
 ]
 
 // Busy/loading state with tongue and motivational phrases
@@ -144,73 +235,177 @@ const getProviders = (providers: ReadonlyArray<{ id: string; name: string }> | u
   return Array.from(names).sort().join(", ")
 }
 
-const Home = (props: { theme: TuiThemeCurrent; config: Cfg; isBusy?: boolean }) => {
-  const [eyeIndex, setEyeIndex] = createSignal(0)
-  const [showTongue, setShowTongue] = createSignal(false)
+// Home logo: Mustache-only (simple and prominent)
+const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
+  const topColor = props.theme.accent || "#E0C15A"
+  const midColor = props.theme.primary || "#7FB4CA"
+  const bottomColor = props.theme.error || "#CB7C94"
+  
+  return (
+    <box flexDirection="column" alignItems="center">
+      {/* Mustache-only with 3-tone gradient */}
+      {mustachiMustacheOnly.map((line, idx) => {
+        const totalLines = mustachiMustacheOnly.length
+        let color = midColor
+        if (idx < totalLines / 3) {
+          color = topColor
+        } else if (idx >= (2 * totalLines) / 3) {
+          color = bottomColor
+        }
+        return <text fg={color}>{line}</text>
+      })}
+      
+      {/* OpenCode branding */}
+      <box flexDirection="row" gap={0}>
+        <text fg={props.theme.textMuted} dimColor={true}>╭</text>
+        <text fg={props.theme.primary} dimColor={false}> OpenCode </text>
+        <text fg={props.theme.textMuted} dimColor={true}>╮</text>
+      </box>
+      
+      <text> </text>
+    </box>
+  )
+}
+
+// Sidebar: Full Mustachi face with progressive animations
+const SidebarMustachi = (props: { theme: TuiThemeCurrent; config: Cfg; isBusy?: boolean }) => {
+  const [pupilIndex, setPupilIndex] = createSignal(0)
+  const [blinkFrame, setBlinkFrame] = createSignal(0)
+  const [tongueFrame, setTongueFrame] = createSignal(0)
   const [busyPhrase, setBusyPhrase] = createSignal("")
   
-  // Animation: subtle eye variation every 3-5 seconds
+  // Animation: pupil movement (look around) - low frequency, progressive
+  createEffect(() => {
+    if (!props.config.animations || props.isBusy) {
+      setPupilIndex(0)
+      return
+    }
+    
+    const interval = setInterval(() => {
+      // Cycle through pupil positions progressively
+      setPupilIndex((prev) => {
+        // 80% chance to stay at center, 20% to move
+        if (Math.random() < 0.8) return 0
+        return (prev + 1) % leftPupilPositions.length
+      })
+    }, 3000)
+    
+    onCleanup(() => clearInterval(interval))
+  })
+  
+  // Animation: blink - occasional, progressive
   createEffect(() => {
     if (!props.config.animations) return
     
+    const blinkSequence = async () => {
+      // Open -> half -> closed -> half -> open
+      setBlinkFrame(0)
+      await new Promise(r => setTimeout(r, 150))
+      setBlinkFrame(1)
+      await new Promise(r => setTimeout(r, 100))
+      setBlinkFrame(2)
+      await new Promise(r => setTimeout(r, 100))
+      setBlinkFrame(1)
+      await new Promise(r => setTimeout(r, 100))
+      setBlinkFrame(0)
+    }
+    
     const interval = setInterval(() => {
-      // Randomly change eyes occasionally (20% chance)
-      if (Math.random() < 0.2) {
-        setEyeIndex((Math.floor(Math.random() * eyeVariations.length)))
-      } else {
-        setEyeIndex(0) // back to neutral
+      // Blink occasionally (15% chance every 4s)
+      if (Math.random() < 0.15) {
+        blinkSequence()
       }
-    }, 4000) // check every 4 seconds
+    }, 4000)
     
     onCleanup(() => clearInterval(interval))
   })
   
-  // Busy state animation: show tongue + rotate phrases
+  // Busy state animation: tongue grows progressively + rotate phrases
   createEffect(() => {
     if (!props.config.animations || !props.isBusy) {
-      setShowTongue(false)
+      setTongueFrame(0)
       setBusyPhrase("")
       return
     }
     
-    setShowTongue(true)
+    // Grow tongue progressively when entering busy state
+    let currentFrame = 0
+    let tongueTimeoutId: NodeJS.Timeout | undefined
+    const growTongue = () => {
+      if (currentFrame < tongueFrames.length - 1) {
+        currentFrame++
+        setTongueFrame(currentFrame)
+        tongueTimeoutId = setTimeout(growTongue, 200)
+      }
+    }
+    growTongue()
     
+    // Rotate busy phrases
     let phraseIdx = 0
     setBusyPhrase(busyPhrases[phraseIdx])
     
     const interval = setInterval(() => {
       phraseIdx = (phraseIdx + 1) % busyPhrases.length
       setBusyPhrase(busyPhrases[phraseIdx])
-    }, 3000) // rotate every 3 seconds
+    }, 3000)
     
-    onCleanup(() => clearInterval(interval))
+    onCleanup(() => {
+      clearInterval(interval)
+      if (tongueTimeoutId !== undefined) {
+        clearTimeout(tongueTimeoutId)
+      }
+    })
   })
   
-  // Build Mustachi with current eye state
-  const currentEyes = eyeVariations[eyeIndex()]
-  const mustachi = mustachiBase.map((line, idx) => {
-    // Replace eyes in line 2
-    if (idx === 2) {
-      return `   │ ${currentEyes.left} │       │ ${currentEyes.right} │    `
+  // Build the complete Mustachi face
+  const buildFace = () => {
+    const lines: string[] = []
+    
+    // Select eye base based on busy state
+    let eyeBase = props.isBusy ? mustachiSquintedBase : mustachiNeutralBase
+    
+    // Apply blink animation if active
+    if (blinkFrame() > 0 && blinkFrame() < blinkFrames.length) {
+      eyeBase = props.isBusy 
+        ? blinkFrames[blinkFrame()].squinted 
+        : blinkFrames[blinkFrame()].left
     }
-    return line
-  })
-  
-  // Add tongue if busy
-  if (showTongue()) {
-    mustachi.push("         ╲ ● ╱              ")
-    mustachi.push("           v                ")
+    
+    // Add eyes with pupil position (modify line 3 for left eye pupil)
+    eyeBase.forEach((line, idx) => {
+      if (idx === 3 && !props.isBusy && pupilIndex() >= 0) {
+        // Replace pupil in left eye (center of line 3)
+        const pupil = leftPupilPositions[pupilIndex()]
+        const modifiedLine = line.substring(0, 14) + pupil + line.substring(22)
+        lines.push(modifiedLine)
+      } else {
+        lines.push(line)
+      }
+    })
+    
+    // Add mustache section
+    mustachiMustacheSection.forEach(line => lines.push(line))
+    
+    // Add tongue if busy (progressive frames)
+    if (props.isBusy && tongueFrame() > 0) {
+      const tongueLines = tongueFrames[tongueFrame()]
+      tongueLines.forEach(line => lines.push(line))
+    }
+    
+    return lines
   }
   
+  const faceLines = buildFace()
+  
   const topColor = props.theme.accent || "#E0C15A"
   const midColor = props.theme.primary || "#7FB4CA"
   const bottomColor = props.theme.error || "#CB7C94"
   
   return (
     <box flexDirection="column" alignItems="center">
-      {/* Mustachi with 3-tone gradient */}
-      {mustachi.map((line, idx) => {
-        const totalLines = mustachi.length
+      {/* Full Mustachi face with 3-tone gradient */}
+      {faceLines.map((line, idx) => {
+        const totalLines = faceLines.length
         let color = midColor
         if (idx < totalLines / 3) {
           color = topColor
@@ -220,13 +415,6 @@ const Home = (props: { theme: TuiThemeCurrent; config: Cfg; isBusy?: boolean })
         return <text fg={color}>{line}</text>
       })}
       
-      {/* OpenCode branding */}
-      <box flexDirection="row" gap={0}>
-        <text fg={props.theme.textMuted} dimColor={true}>╭</text>
-        <text fg={props.theme.primary} dimColor={false}> OpenCode </text>
-        <text fg={props.theme.textMuted} dimColor={true}>╮</text>
-      </box>
-      
       {/* Busy phrase if loading */}
       {busyPhrase() && (
         <text fg={props.theme.warning}>{busyPhrase()}</text>
@@ -254,7 +442,7 @@ const DetectedEnv = (props: {
     <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>}
+      {os && providers && <text fg={props.theme.textMuted}>·</text>}
       {providers && <text fg={props.theme.text}>{providers}</text>}
     </box>
   )
@@ -288,11 +476,14 @@ const tui: TuiPlugin = async (api, options) => {
   api.slots.register({
     slots: {
       home_logo(ctx) {
-        return <Home theme={ctx.theme.current} config={value()} isBusy={isBusy()} />
+        return <HomeLogo theme={ctx.theme.current} />
       },
-      home_prompt_after(ctx) {
+      home_bottom(ctx) {
         return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={value()} />
       },
+      sidebar_content(ctx) {
+        return <SidebarMustachi theme={ctx.theme.current} config={value()} isBusy={isBusy()} />
+      },
     },
   })
 }