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

.living_spec/specs/functional/UI_UX.md

@@ -82,3 +82,78 @@ Scroll bars should be hidden while maintaining full scroll functionality.
 *   Maintain `overflow: auto` or `overflow-y: scroll` to preserve scroll functionality
 *   Ensure `overflow-x: hidden` where horizontal scroll is not needed
 *   Test with very long messages and large tool outputs to ensure no layout breaking
+
+## Text Alignment and Readability
+
+### Problem
+Center-aligned text in a chat interface is unconventional and reduces readability, especially for code blocks and long-form content. Standard chat UIs align messages differently based on the sender.
+
+### Solution: Context-Appropriate Text Alignment
+Messages should follow standard chat UI conventions with proper alignment based on message type.
+
+### Requirements
+
+1. **User Messages:** Right-aligned (standard pattern showing messages sent by the user)
+2. **Assistant Messages:** Left-aligned (standard pattern showing messages received)
+3. **Tool Outputs:** Left-aligned (part of the system/assistant response flow)
+4. **Code Blocks:** Always left-aligned regardless of message type (for readability)
+5. **Container:** Remove any center-alignment from the chat container
+6. **Max-Width:** Maintain current max-width constraint (e.g., 768px) for optimal readability
+7. **Spacing:** Maintain proper padding and visual hierarchy between messages
+
+### Implementation Notes
+*   Check for `textAlign: "center"` in inline styles and remove
+*   Check for `text-align: center` in CSS and remove from chat-related classes
+*   Ensure flexbox alignment is set appropriately:
+    *   User messages: `alignItems: "flex-end"`
+    *   Assistant/Tool messages: `alignItems: "flex-start"`
+*   Code blocks should have `text-align: left` explicitly set
+
+## Syntax Highlighting
+
+### Problem
+Code blocks in assistant responses currently lack syntax highlighting, making them harder to read and understand. Developers expect colored syntax highlighting similar to their code editors.
+
+### Solution: Syntax Highlighting for Code Blocks
+Integrate syntax highlighting into markdown code blocks rendered by the assistant.
+
+### Requirements
+
+1. **Languages Supported:** At minimum:
+   - JavaScript/TypeScript
+   - Rust
+   - Python
+   - JSON
+   - Markdown
+   - Shell/Bash
+   - HTML/CSS
+   - SQL
+2. **Theme:** Use a dark theme that complements the existing dark UI (e.g., `oneDark`, `vsDark`, `dracula`)
+3. **Integration:** Work seamlessly with `react-markdown` component
+4. **Performance:** Should not significantly impact rendering performance
+5. **Fallback:** Plain monospace text for unrecognized languages
+6. **Inline Code:** Inline code (single backticks) should maintain simple styling without full syntax highlighting
+
+### Implementation Notes
+*   Use `react-syntax-highlighter` library with `react-markdown`
+*   Or use `rehype-highlight` plugin for `react-markdown`
+*   Configure with a dark theme preset (e.g., `oneDark` from `react-syntax-highlighter/dist/esm/styles/prism`)
+*   Apply to code blocks via `react-markdown` components prop:
+    ```tsx
+    <Markdown
+      components={{
+        code: ({node, inline, className, children, ...props}) => {
+          const match = /language-(\w+)/.exec(className || '');
+          return !inline && match ? (
+            <SyntaxHighlighter style={oneDark} language={match[1]} {...props}>
+              {String(children).replace(/\n$/, '')}
+            </SyntaxHighlighter>
+          ) : (
+            <code className={className} {...props}>{children}</code>
+          );
+        }
+      }}
+    />
+    ```
+*   Ensure syntax highlighted code blocks are left-aligned
+*   Test with various code samples to ensure proper rendering