@filipc77/cowrite 0.4.27 → 0.4.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipc77/cowrite",
-  "version": "0.4.27",
+  "version": "0.4.28",
   "description": "Live commenting plugin for coding agent sessions",
   "type": "module",
   "bin": {

package/ui/client.js

@@ -22,6 +22,7 @@ let currentFile = "";
 let currentContent = "";
 let ws = null;
 let selectionInfo = null;
+let currentHtml = "";
 
 // --- File Picker ---
 
@@ -95,8 +96,10 @@ function connect() {
       case "file_update":
         currentFile = msg.file;
         currentContent = msg.content;
+        currentHtml = msg.html;
         filePathEl.textContent = msg.file;
         fileContentEl.innerHTML = msg.html;
+        renderMermaidDiagrams();
         applyHighlights();
         break;
       case "comments_update":
@@ -493,6 +496,13 @@ function applyTheme(theme) {
   // Update toggle label
   const label = document.querySelector(".toggle-label");
   if (label) label.textContent = theme === "light" ? "Light" : "Dark";
+  // Re-render mermaid diagrams with matching theme
+  if (window.__mermaid && currentHtml) {
+    window.__mermaid.initialize({ startOnLoad: false, theme: theme === "light" ? "default" : "dark" });
+    fileContentEl.innerHTML = currentHtml;
+    renderMermaidDiagrams();
+    applyHighlights();
+  }
 }
 
 // Load saved preference, default to dark
@@ -516,5 +526,18 @@ document.addEventListener("selectionchange", () => {
   }
 });
 
+// --- Mermaid Rendering ---
+
+async function renderMermaidDiagrams() {
+  if (!window.__mermaid) return;
+  const blocks = fileContentEl.querySelectorAll("pre.mermaid");
+  if (blocks.length === 0) return;
+  try {
+    await window.__mermaid.run({ nodes: blocks });
+  } catch (err) {
+    console.error("Mermaid rendering failed:", err);
+  }
+}
+
 // --- Init ---
 connect();

package/ui/index.html

@@ -64,6 +64,11 @@
     </div>
   </div>
 
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: false, theme: 'dark' });
+    window.__mermaid = mermaid;
+  </script>
   <script src="client.js"></script>
 </body>
 </html>

package/ui/styles.css

@@ -302,9 +302,11 @@ main {
 }
 
 #fileContent {
-  max-width: 760px;
+  max-width: 860px;
   margin: 0 auto;
-  line-height: 1.8;
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
   animation: fade-in 0.3s ease;
 }
 
@@ -313,71 +315,160 @@ main {
   to { opacity: 1; transform: translateY(0); }
 }
 
-/* ---- Markdown styles ---- */
+/* ---- Markdown styles (GitHub-like) ---- */
+.markdown-body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.markdown-body > *:first-child { margin-top: 0; }
+.markdown-body > *:last-child { margin-bottom: 0; }
+
 .markdown-body h1, .markdown-body h2, .markdown-body h3,
 .markdown-body h4, .markdown-body h5, .markdown-body h6 {
-  margin: 1.5em 0 0.6em;
+  margin-top: 24px;
+  margin-bottom: 16px;
   font-weight: 600;
   color: var(--text);
-  line-height: 1.3;
-  letter-spacing: -0.3px;
+  line-height: 1.25;
 }
 
 .markdown-body h1 {
-  font-size: 1.75em;
+  font-size: 2em;
   border-bottom: 1px solid var(--border);
-  padding-bottom: 0.4em;
+  padding-bottom: 0.3em;
 }
 
 .markdown-body h2 {
-  font-size: 1.35em;
+  font-size: 1.5em;
   border-bottom: 1px solid var(--border);
   padding-bottom: 0.3em;
 }
 
-.markdown-body h3 { font-size: 1.15em; }
+.markdown-body h3 { font-size: 1.25em; }
+.markdown-body h4 { font-size: 1em; }
+.markdown-body h5 { font-size: 0.875em; }
+.markdown-body h6 { font-size: 0.85em; color: var(--text-dim); }
 
-.markdown-body p { margin: 0.8em 0; }
-.markdown-body ul, .markdown-body ol { margin: 0.8em 0; padding-left: 2em; }
-.markdown-body li { margin: 0.3em 0; }
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body ul, .markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 16px;
+  padding-left: 2em;
+}
+
+.markdown-body li {
+  margin-top: 0.25em;
+}
+
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
 
 .markdown-body code {
   font-family: var(--font-mono);
-  font-size: 0.85em;
+  font-size: 85%;
   background: var(--surface-hover);
-  padding: 2px 8px;
-  border-radius: 5px;
-  border: 1px solid var(--border);
+  padding: 0.2em 0.4em;
+  border-radius: 6px;
 }
 
 .markdown-body pre {
   background: var(--surface);
-  padding: 20px;
-  border-radius: var(--radius-md);
+  padding: 16px;
+  border-radius: 6px;
   overflow-x: auto;
-  margin: 1.2em 0;
+  margin-top: 0;
+  margin-bottom: 16px;
+  font-size: 85%;
+  line-height: 1.45;
   border: 1px solid var(--border);
 }
 
 .markdown-body pre code {
   background: none;
   padding: 0;
-  border: none;
+  border-radius: 0;
+  font-size: 100%;
+  word-break: normal;
+  white-space: pre;
 }
 
 .markdown-body blockquote {
-  border-left: 3px solid var(--accent);
-  padding-left: 16px;
+  border-left: 0.25em solid var(--border);
+  padding: 0 1em;
   color: var(--text-dim);
-  margin: 1em 0;
+  margin-top: 0;
+  margin-bottom: 16px;
 }
 
+.markdown-body blockquote > :first-child { margin-top: 0; }
+.markdown-body blockquote > :last-child { margin-bottom: 0; }
+
 .markdown-body a { color: var(--accent); text-decoration: none; }
 .markdown-body a:hover { text-decoration: underline; }
 
-.markdown-body table { border-collapse: collapse; margin: 1em 0; width: 100%; }
-.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
-.markdown-body th { background: var(--surface); }
+.markdown-body img {
+  max-width: 100%;
+  border-radius: 6px;
+}
+
+.markdown-body hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background: var(--border);
+  border: 0;
+  border-radius: 2px;
+}
+
+.markdown-body table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-top: 0;
+  margin-bottom: 16px;
+  width: auto;
+  display: block;
+  overflow-x: auto;
+}
+
+.markdown-body th, .markdown-body td {
+  border: 1px solid var(--border);
+  padding: 6px 13px;
+  text-align: left;
+}
+
+.markdown-body th {
+  font-weight: 600;
+  background: var(--surface);
+}
+
+.markdown-body tr:nth-child(2n) {
+  background: var(--bg-subtle);
+}
+
+.markdown-body dl {
+  padding: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body dl dt {
+  font-weight: 600;
+  margin-top: 16px;
+  padding: 0;
+  font-size: 1em;
+}
+
+.markdown-body dl dd {
+  padding: 0 16px;
+  margin-bottom: 16px;
+}
 
 /* Plain text */
 .plain-text {
@@ -838,3 +929,24 @@ main {
 [data-theme="light"] ::selection {
   background: rgba(176, 125, 46, 0.2);
 }
+
+/* ---- Mermaid diagrams ---- */
+.mermaid-container {
+  margin: 1.2em 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.mermaid-container pre.mermaid {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  display: flex;
+  justify-content: center;
+}
+
+.mermaid-container svg {
+  max-width: 100%;
+  height: auto;
+}