Markdown parsing

Author: max-lt

bun.lock

@@ -27,6 +27,7 @@
     "@ng-icons/heroicons": "^33.0.0",
     "@openworkers/croner-wasm": "^0.3.1",
     "dexie": "^4.2.1",
+    "marked": "^17.0.1",
     "monaco-editor": "0.55.1",
     "rxjs": "^7.8.2",
     "tslib": "^2.8.1"

package.json

@@ -185,7 +185,7 @@
 }
 
 .cli-content {
-  white-space: pre-wrap;
+  white-space: unset;
   word-break: break-word;
 }
 
@@ -642,3 +642,122 @@
   border-color: var(--border);
   color: var(--text-hint);
 }
+
+/* Markdown content styling - ::ng-deep needed for innerHTML content */
+.cli-markdown {
+  display: block;
+}
+
+::ng-deep .cli-markdown > p {
+  margin: 0 0 8px 0;
+}
+
+::ng-deep .cli-markdown > p:last-child {
+  margin-bottom: 0;
+}
+
+::ng-deep .cli-markdown code {
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+::ng-deep .cli-markdown > pre {
+  background: var(--bg-secondary);
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+::ng-deep .cli-markdown > pre code {
+  background: none;
+  padding: 0;
+}
+
+::ng-deep .cli-markdown > ul,
+::ng-deep .cli-markdown > ol {
+  margin: 8px 0;
+  padding-left: 8px;
+  list-style: none;
+}
+
+::ng-deep .cli-markdown li {
+  margin: 4px 0;
+  position: relative;
+  padding-left: 16px;
+}
+
+::ng-deep .cli-markdown > ul > li::before {
+  content: '•';
+  position: absolute;
+  left: 0;
+  color: var(--text-muted);
+}
+
+::ng-deep .cli-markdown > ol {
+  counter-reset: list-counter;
+}
+
+::ng-deep .cli-markdown > ol > li {
+  counter-increment: list-counter;
+}
+
+::ng-deep .cli-markdown > ol > li::before {
+  content: counter(list-counter) '.';
+  position: absolute;
+  left: 0;
+  color: var(--text-muted);
+  font-size: 0.9em;
+}
+
+::ng-deep .cli-markdown strong {
+  font-weight: 600;
+}
+
+::ng-deep .cli-markdown a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+::ng-deep .cli-markdown a:hover {
+  text-decoration: underline;
+}
+
+::ng-deep .cli-markdown > blockquote {
+  border-left: 3px solid var(--border);
+  margin: 8px 0;
+  padding-left: 12px;
+  color: var(--text-muted);
+}
+
+::ng-deep .cli-markdown > h1,
+::ng-deep .cli-markdown > h2,
+::ng-deep .cli-markdown > h3,
+::ng-deep .cli-markdown > h4 {
+  margin: 8px 0 4px 0;
+  font-weight: 600;
+}
+
+::ng-deep .cli-markdown > h1 {
+  font-size: 1.15em;
+}
+
+::ng-deep .cli-markdown > h2 {
+  font-size: 1.1em;
+}
+
+::ng-deep .cli-markdown > h3 {
+  font-size: 1.05em;
+}
+
+::ng-deep .cli-markdown > h4 {
+  font-size: 1em;
+}
+
+::ng-deep .cli-markdown > hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 12px 0;
+}

src/app/modules/worker/pages/worker-edit/components/ai-chat/ai-chat.component.css

@@ -59,15 +59,19 @@
     @for (message of store.messages(); track $index) {
       <div class="cli-message" [class.cli-user]="message.role === 'user'">
         <span class="cli-prompt">{{ message.role === 'user' ? '>' : '◆' }}</span>
-        <span class="cli-content">{{ message.content }}</span>
+        @if (message.role === 'user') {
+          <span class="cli-content">{{ message.content }}</span>
+        } @else {
+          <span class="cli-content cli-markdown" [innerHTML]="message.content | markdown"></span>
+        }
       </div>
     }
 
     <!-- Streaming text with indicator -->
     @if (store.streamingText()) {
       <div class="cli-message">
         <span class="cli-prompt">◆</span>
-        <span class="cli-content">{{ store.streamingText() }}</span>
+        <span class="cli-content cli-markdown" [innerHTML]="store.streamingText() | markdown"></span>
         @if (store.isStreaming()) {
           <span class="streaming-indicator"> <span></span><span></span><span></span> </span>
         }

src/app/modules/worker/pages/worker-edit/components/ai-chat/ai-chat.component.html

@@ -16,12 +16,13 @@ import { EditorStateService } from '~/app/services/editor-state.service';
 import { firstValueFrom, Subscription } from 'rxjs';
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor';
 import { NgIconComponent } from '@ng-icons/core';
+import { MarkdownPipe } from '~/app/pipes/markdown.pipe';
 
 const CLAUDE_TOKEN_KEY = 'claude_token';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, FormsModule, RouterLink, MonacoEditorModule, NgIconComponent],
+  imports: [CommonModule, ReactiveFormsModule, FormsModule, RouterLink, MonacoEditorModule, NgIconComponent, MarkdownPipe],
   selector: 'app-ai-chat',
   templateUrl: './ai-chat.component.html',
   styleUrls: ['./ai-chat.component.css']

src/app/modules/worker/pages/worker-edit/components/ai-chat/ai-chat.component.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { marked } from 'marked';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'markdown',
+  standalone: true
+})
+export class MarkdownPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {
+    // Configure marked for inline rendering (no <p> wrapper for single lines)
+    marked.setOptions({
+      breaks: true,
+      gfm: true
+    });
+  }
+
+  transform(value: string | null | undefined): SafeHtml {
+    if (!value) return '';
+
+    const html = marked.parse(value, { async: false }) as string;
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}