feat: Story 11 - Left-align text and add syntax highlighting

Implemented Story 11: Text Alignment and Syntax Highlighting
- Removed center-alignment from chat container (text-align: center)
- Added left-alignment to markdown body and code blocks
- Integrated react-syntax-highlighter with react-markdown
- Added syntax highlighting for code blocks using oneDark theme
- Supports JavaScript, TypeScript, Rust, Python, JSON, Markdown, Shell, and more
- Inline code maintains simple styling without full highlighting
- All code blocks are now left-aligned for better readability

Fixed: Agent over-aggressive file writing behavior
- Refined system prompt to distinguish between:
  * 'show/example/how does' → respond with code in chat
  * 'create/add/implement/fix' → use write_file tool
- Removed aggressive AGENT DIRECTIVE prefix from user messages
- Softened reminder message to reflect nuanced behavior
- Agent can now both teach (show examples) and implement (write files)

Updated Specs
- Added Text Alignment and Readability section to UI_UX.md
- Added Syntax Highlighting section with implementation details
- Updated SDSW workflow: acceptance criteria marked complete only after user acceptance

Dependencies
- Added react-syntax-highlighter and @types/react-syntax-highlighter

src/App.css

@@ -27,7 +27,6 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    text-align: center;
 }
 
 .logo {
@@ -138,6 +137,7 @@ details summary span:first-child {
 /* Markdown body styling for dark theme */
 .markdown-body {
     color: #ececec;
+    text-align: left;
 }
 
 .markdown-body code {
@@ -152,6 +152,7 @@ details summary span:first-child {
     padding: 12px;
     border-radius: 6px;
     overflow-x: auto;
+    text-align: left;
 }
 
 .markdown-body pre code {
@@ -159,6 +160,20 @@ details summary span:first-child {
     padding: 0;
 }
 
+/* Syntax highlighter styling */
+.markdown-body div[class*="language-"] {
+    margin: 0;
+    border-radius: 6px;
+    text-align: left;
+}
+
+.markdown-body pre[class*="language-"] {
+    margin: 0;
+    padding: 12px;
+    background: #1a1a1a;
+    text-align: left;
+}
+
 /* Hide scroll bars globally while maintaining scroll functionality */
 /* Firefox */
 * {

src/components/Chat.tsx

@@ -2,6 +2,8 @@ import { useState, useRef, useEffect } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import Markdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { Message, ProviderConfig } from "../types";
 
 interface ChatProps {
@@ -335,8 +337,29 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
                   </details>
                 ) : (
                   <div className="markdown-body">
-                    {/* Assuming global CSS handles standard markdown styling now */}
-                    <Markdown>{msg.content}</Markdown>
+                    <Markdown
+                      components={{
+                        code: ({ className, children, ...props }: any) => {
+                          const match = /language-(\w+)/.exec(className || "");
+                          const isInline = !className;
+                          return !isInline && match ? (
+                            <SyntaxHighlighter
+                              style={oneDark as any}
+                              language={match[1]}
+                              PreTag="div"
+                            >
+                              {String(children).replace(/\n$/, "")}
+                            </SyntaxHighlighter>
+                          ) : (
+                            <code className={className} {...props}>
+                              {children}
+                            </code>
+                          );
+                        },
+                      }}
+                    >
+                      {msg.content}
+                    </Markdown>
                   </div>
                 )}