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 */
 * {