fix: respect terminal ansi colors

Author: damassi

src/agent_chat_cli/app.py

@@ -31,7 +31,7 @@ class AgentChatCLIApp(App):
     ]
 
     def __init__(self) -> None:
-        super().__init__()
+        super().__init__(ansi_color=True)
 
         self.actions = Actions(app=self)
         self.agent_loop = AgentLoop(app=self)

src/agent_chat_cli/components/caret.py

@@ -5,4 +5,4 @@
 
 class Caret(Widget):
     def compose(self) -> ComposeResult:
-        yield Label("▷")
+        yield Label("▷", classes="dim")

src/agent_chat_cli/components/header.py

@@ -2,6 +2,7 @@
 from textual.widget import Widget
 from textual.widgets import Label
 
+from agent_chat_cli.components.flex import Flex
 from agent_chat_cli.components.spacer import Spacer
 from agent_chat_cli.utils.config import load_config
 from agent_chat_cli.utils.mcp_server_status import MCPServerStatus
@@ -18,24 +19,20 @@ def compose(self) -> ComposeResult:
             "[bold]@ Agent CLI[/bold]",
         )
 
-        yield Label(
-            f"[dim]Available MCP Servers: {mcp_servers}[/dim]",
-            id="header-mcp-servers",
-        )
+        with Flex():
+            yield Label("Available MCP Servers:", classes="dim")
+            yield Label(f" {mcp_servers}", id="header-mcp-servers")
 
         if agents:
-            yield Label(
-                f"[dim]Agents:[/dim] {agents}",
-                id="header-agents",
-                classes="header-agents",
-            )
+            with Flex():
+                yield Label("Agents:", classes="dim")
+                yield Label(f" {agents}")
 
         yield Spacer()
 
         yield Label(
-            "[dim]Type your message and press Enter. Press / for commands.[/dim]",
-            id="header-instructions",
-            classes="header-instructions",
+            "Type your message and press Enter. Press / for commands.",
+            classes="dim",
         )
 
     def on_mount(self) -> None:
@@ -59,7 +56,6 @@ def _handle_mcp_server_status(self) -> None:
                 server_parts.append(f"[#ffa2dc][strike]{name}[/strike][/]")
 
         mcp_servers = ", ".join(server_parts)
-        markup = f"[dim]Available MCP Servers:[/dim] {mcp_servers}"
 
         label = self.query_one("#header-mcp-servers", Label)
-        label.update(markup)
+        label.update(f" {mcp_servers}")

src/agent_chat_cli/components/messages.py

@@ -47,7 +47,7 @@ class SystemMessage(Widget):
 
     def compose(self) -> ComposeResult:
         yield Label("[bold][#debd00]System:[/][/bold]")
-        yield Label(f"[dim]{self.message}[/dim]")
+        yield Label(self.message, classes="dim")
 
 
 class UserMessage(Widget):
@@ -80,4 +80,4 @@ def compose(self) -> ComposeResult:
             label = f"[#FFD281]{escape('[tool]')} {self.tool_name}[/]"
 
         yield Label(label)
-        yield Label(f"[dim]{formatted_input}[/dim]", classes="tool-message")
+        yield Label(formatted_input, classes="tool-message dim")

src/agent_chat_cli/components/thinking_indicator.py

@@ -13,7 +13,7 @@ class ThinkingIndicator(Widget):
     def compose(self) -> ComposeResult:
         with Flex():
             yield BalloonSpinner()
-            yield Label("[dim]Agent is thinking...[/dim]")
+            yield Label("Agent is thinking...", classes="dim")
 
     def on_mount(self) -> None:
         self.display = False

src/agent_chat_cli/components/tool_permission_prompt.py

@@ -32,7 +32,9 @@ def __init__(self, actions: "Actions") -> None:
 
     def compose(self) -> ComposeResult:
         yield Label("", id="tool-display")
-        yield Label("  [dim]Allow? (Enter=yes, ESC=no, or ask another question):[/dim]")
+        yield Label(
+            "  Allow? (Enter=yes, ESC=no, or ask another question):", classes="dim"
+        )
 
         yield Spacer()
 

src/agent_chat_cli/core/styles.tcss

@@ -10,7 +10,7 @@ MarkdownH6 {
 }
 
 Screen {
-    background: #222;
+    background: transparent;
 }
 
 Spacer {
@@ -21,6 +21,7 @@ Flex {
     layout: horizontal;
     width: 100%;
     height: auto;
+    background: transparent;
 }
 
 VerticalScroll {
@@ -76,7 +77,6 @@ Caret {
     height: 1;
     width: auto;
     margin-right: 1;
-    opacity: 0.5;
 }
 
 TextArea {
@@ -91,6 +91,19 @@ TextArea {
     margin: 0;
 }
 
+TextArea:focus {
+    background: transparent;
+}
+
+TextArea > * {
+    background: transparent;
+}
+
+TextArea .text-area--cursor {
+    background: white;
+    color: $text;
+}
+
 .tool-message {
     padding-left: 2;
 }
@@ -111,3 +124,8 @@ SlashCommandMenu OptionList {
     border: solid $primary;
     background: $surface;
 }
+
+
+.dim {
+    color: #888;
+}