feat: vscode extension (#59)

* feat: add initial VS Code extension plan and implementation tasks

* feat(vscode): added initial version of an Openchamber VSCode extension

* feat(vscode): enhance VS Code extension with theme integration and session management

* feat(vscode): implement connection status handling and overlay in VSCode layout

* feat: move extension to secondary sidebar

* chore: upgrade @opencode-ai/sdk to 1.0.150

* vscode: editor bridge, file picker, click-to-open in tool parts

* vscode: layout session lifecycle, theme sync, typography overrides

* ui: compact mode for vscode, model search, autocomplete width fixes

* perf: scroll force flag, raf placeholder, git polling backoff

* ui: tool output styling, markdown code block fix, gitignore

* refactor: update typography handling for VSCode runtime, remove unused styles

* docs: update README with VS Code extension details and add extension image

* docs: update changelog with new features and performance improvements

packages/ui/src/lib/typographyWatcher.ts

@@ -2,15 +2,29 @@ import { SEMANTIC_TYPOGRAPHY } from '@/lib/typography';
 
 let started = false;
 
+const TYPOGRAPHY_STYLE_ID = 'openchamber-typography-base';
+
 const applySemanticTypography = (): void => {
   if (typeof document === 'undefined') {
     return;
   }
-  const root = document.documentElement;
-  Object.entries(SEMANTIC_TYPOGRAPHY).forEach(([key, value]) => {
-    const cssVarName = `--text-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
-    root.style.setProperty(cssVarName, value);
-  });
+
+  const cssVars = Object.entries(SEMANTIC_TYPOGRAPHY)
+    .map(([key, value]) => `  --text-${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)
+    .join('\n');
+
+  const styleContent = `:root {\n${cssVars}\n}\n`;
+
+  const existing = document.getElementById(TYPOGRAPHY_STYLE_ID);
+  if (existing) {
+    existing.textContent = styleContent;
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.id = TYPOGRAPHY_STYLE_ID;
+  style.textContent = styleContent;
+  document.head.appendChild(style);
 };
 
 export const startTypographyWatcher = (): void => {