Add formatter status display to TUI status dialog (#3701)

packages/opencode/src/cli/cmd/tui/component/dialog-status.tsx

@@ -1,7 +1,7 @@
 import { TextAttributes } from "@opentui/core"
 import { useTheme } from "../context/theme"
 import { useSync } from "@tui/context/sync"
-import { For, Match, Switch, Show } from "solid-js"
+import { For, Match, Switch, Show, createMemo } from "solid-js"
 
 export type DialogStatusProps = {}
 
@@ -9,6 +9,8 @@ export function DialogStatus() {
   const sync = useSync()
   const { theme } = useTheme()
 
+  const enabledFormatters = createMemo(() => sync.data.formatter.filter((f) => f.enabled))
+
   return (
     <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
       <box flexDirection="row" justifyContent="space-between">
@@ -73,6 +75,28 @@ export function DialogStatus() {
           </For>
         </box>
       )}
+      <Show when={enabledFormatters().length > 0} fallback={<text>No Formatters</text>}>
+        <box>
+          <text>{enabledFormatters().length} Formatters</text>
+          <For each={enabledFormatters()}>
+            {(item) => (
+              <box flexDirection="row" gap={1}>
+                <text
+                  flexShrink={0}
+                  style={{
+                    fg: theme.success,
+                  }}
+                >
+                  •
+                </text>
+                <text wrapMode="word">
+                  <b>{item.name}</b>
+                </text>
+              </box>
+            )}
+          </For>
+        </box>
+      </Show>
     </box>
   )
 }

packages/opencode/src/cli/cmd/tui/context/sync.tsx

@@ -10,6 +10,7 @@ import type {
   Permission,
   LspStatus,
   McpStatus,
+  FormatterStatus,
 } from "@opencode-ai/sdk"
 import { createStore, produce, reconcile } from "solid-js/store"
 import { useSDK } from "@tui/context/sdk"
@@ -42,6 +43,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       mcp: {
         [key: string]: McpStatus
       }
+      formatter: FormatterStatus[]
     }>({
       config: {},
       ready: false,
@@ -55,6 +57,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       part: {},
       lsp: [],
       mcp: {},
+      formatter: [],
     })
 
     const sdk = useSDK()
@@ -220,6 +223,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
       sdk.client.command.list().then((x) => setStore("command", x.data ?? [])),
       sdk.client.lsp.status().then((x) => setStore("lsp", x.data!)),
       sdk.client.mcp.status().then((x) => setStore("mcp", x.data!)),
+      sdk.client.formatter.status().then((x) => setStore("formatter", x.data!)),
     ])
 
     const result = {

packages/opencode/src/format/index.ts

@@ -2,6 +2,7 @@ import { Bus } from "../bus"
 import { File } from "../file"
 import { Log } from "../util/log"
 import path from "path"
+import z from "zod"
 
 import * as Formatter from "./formatter"
 import { Config } from "../config/config"
@@ -11,6 +12,17 @@ import { Instance } from "../project/instance"
 export namespace Format {
   const log = Log.create({ service: "format" })
 
+  export const Status = z
+    .object({
+      name: z.string(),
+      extensions: z.string().array(),
+      enabled: z.boolean(),
+    })
+    .meta({
+      ref: "FormatterStatus",
+    })
+  export type Status = z.infer<typeof Status>
+
   const state = Instance.state(async () => {
     const enabled: Record<string, boolean> = {}
     const cfg = await Config.get()
@@ -62,6 +74,20 @@ export namespace Format {
     return result
   }
 
+  export async function status() {
+    const s = await state()
+    const result: Status[] = []
+    for (const formatter of Object.values(s.formatters)) {
+      const enabled = await isEnabled(formatter)
+      result.push({
+        name: formatter.name,
+        extensions: formatter.extensions,
+        enabled,
+      })
+    }
+    return result
+  }
+
   export function init() {
     log.info("init")
     Bus.subscribe(File.Event.Edited, async (payload) => {

packages/opencode/src/server/server.ts

@@ -20,6 +20,7 @@ import { Ripgrep } from "../file/ripgrep"
 import { Config } from "../config/config"
 import { File } from "../file"
 import { LSP } from "../lsp"
+import { Format } from "../format"
 import { MessageV2 } from "../session/message-v2"
 import { TuiRoute } from "./tui"
 import { Permission } from "../permission"
@@ -1336,6 +1337,26 @@ export namespace Server {
           return c.json(await LSP.status())
         },
       )
+      .get(
+        "/formatter",
+        describeRoute({
+          description: "Get formatter status",
+          operationId: "formatter.status",
+          responses: {
+            200: {
+              description: "Formatter status",
+              content: {
+                "application/json": {
+                  schema: resolver(Format.Status.array()),
+                },
+              },
+            },
+          },
+        }),
+        async (c) => {
+          return c.json(await Format.status())
+        },
+      )
       .post(
         "/tui/append-prompt",
         describeRoute({