Răsfoiți Sursa

fix: style multiple commands in input

David Hill 3 luni în urmă
părinte
comite
db8b4ef1e9

+ 22 - 0
packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx

@@ -89,7 +89,9 @@ export function Prompt(props: PromptProps) {
   const fileStyleId = syntax().getStyleId("extmark.file")!
   const agentStyleId = syntax().getStyleId("extmark.agent")!
   const pasteStyleId = syntax().getStyleId("extmark.paste")!
+  const commandStyleId = syntax().getStyleId("extmark.command")!
   let promptPartTypeId: number
+  let commandHighlightRef = 0
 
   sdk.event.on(TuiEvent.PromptAppend.type, (evt) => {
     input.insertText(evt.properties.text)
@@ -397,6 +399,25 @@ export function Prompt(props: PromptProps) {
     )
   }
 
+  function highlightSlashCommands() {
+    // Remove previous command highlights
+    input.removeHighlightsByRef(commandHighlightRef)
+    commandHighlightRef++
+
+    const text = input.plainText
+    // Match all slash commands (e.g. /help, /status, /compact)
+    const regex = /\/[a-zA-Z_][a-zA-Z0-9_-]*/g
+    let match: RegExpExecArray | null
+    while ((match = regex.exec(text)) !== null) {
+      input.addHighlightByCharRange({
+        start: match.index,
+        end: match.index + match[0].length,
+        styleId: commandStyleId,
+        hlRef: commandHighlightRef,
+      })
+    }
+  }
+
   command.register(() => [
     {
       title: "Stash prompt",
@@ -772,6 +793,7 @@ export function Prompt(props: PromptProps) {
                 setStore("prompt", "input", value)
                 autocomplete.onInput(value)
                 syncExtmarksWithPromptParts()
+                highlightSlashCommands()
               }}
               keyBindings={textareaKeybindings()}
               onKeyDown={async (e) => {

+ 7 - 0
packages/opencode/src/cli/cmd/tui/context/theme.tsx

@@ -679,6 +679,13 @@ function getSyntaxRules(theme: Theme) {
         bold: true,
       },
     },
+    {
+      scope: ["extmark.command"],
+      style: {
+        foreground: theme.accent,
+        bold: true,
+      },
+    },
     {
       scope: ["comment"],
       style: {