master

Author: shmuel hizmi

bun.lock

@@ -0,0 +1,24 @@
+/** @jsxImportSource @opentui/react */
+import type { ReactNode } from "react";
+import { SyntaxStyle } from "@opentui/core";
+import { usePrefixContext } from "./FocusContext";
+
+const syntaxStyle = SyntaxStyle.create();
+
+interface WmuxMarkdownProps {
+  readonly id: string;
+  readonly name: string;
+  readonly content: string;
+  readonly children?: ReactNode;
+}
+
+export const WmuxMarkdown = ({ id, content }: WmuxMarkdownProps): ReactNode => {
+  const { activeTabId } = usePrefixContext();
+  if (activeTabId !== id) return null;
+
+  return (
+    <scrollbox flexGrow={1}>
+      <markdown content={content} syntaxStyle={syntaxStyle} conceal />
+    </scrollbox>
+  );
+};

packages/wmux-client-terminal/src/components/WmuxMarkdown.tsx

@@ -9,12 +9,14 @@ import { WmuxApp } from "./components/WmuxApp";
 import { WmuxTerminal } from "./components/WmuxTerminal";
 import { WmuxFileContent } from "./components/WmuxFileContent";
 import { WmuxIframe } from "./components/WmuxIframe";
+import { WmuxMarkdown } from "./components/WmuxMarkdown";
 
 const tuiViewComponents = {
   WmuxApp,
   WmuxTerminal,
   WmuxFileContent,
   WmuxIframe,
+  WmuxMarkdown,
 };
 
 export interface WmuxTUIOptions {

packages/wmux-client-terminal/src/tui.tsx

@@ -19,6 +19,7 @@
     "@xterm/xterm": "^5.5.0",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
+    "marked": "^15.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zod": "^4.3.6"

packages/wmux-client/package.json

@@ -0,0 +1,22 @@
+import { useMemo, type ReactElement, type ReactNode } from "react";
+import { marked } from "marked";
+
+interface WmuxMarkdownProps {
+  readonly id: string;
+  readonly name: string;
+  readonly content: string;
+  readonly children?: ReactNode;
+}
+
+export function WmuxMarkdown({ content }: WmuxMarkdownProps): ReactElement {
+  const html = useMemo(() => marked.parse(content, { async: false }) as string, [content]);
+
+  return (
+    <div className="w-full h-full overflow-auto">
+      <div
+        className="wmux-markdown max-w-3xl mx-auto px-8 py-6"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </div>
+  );
+}

packages/wmux-client/src/components/WmuxMarkdown.tsx

@@ -130,3 +130,100 @@ body {
   from { backdrop-filter: blur(0px); opacity: 0; }
   to { backdrop-filter: blur(12px); opacity: 1; }
 }
+
+/* ── Markdown content styles ────────────────────────────── */
+
+.wmux-markdown {
+  color: #e5e5ea;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.wmux-markdown h1, .wmux-markdown h2, .wmux-markdown h3,
+.wmux-markdown h4, .wmux-markdown h5, .wmux-markdown h6 {
+  color: #f5f5f7;
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.3;
+}
+
+.wmux-markdown h1 { font-size: 1.75em; border-bottom: 1px solid #38383a; padding-bottom: 0.3em; }
+.wmux-markdown h2 { font-size: 1.4em; border-bottom: 1px solid #38383a; padding-bottom: 0.25em; }
+.wmux-markdown h3 { font-size: 1.15em; }
+
+.wmux-markdown p { margin: 0.75em 0; }
+
+.wmux-markdown a { color: #0a84ff; text-decoration: none; }
+.wmux-markdown a:hover { text-decoration: underline; }
+
+.wmux-markdown strong { color: #f5f5f7; font-weight: 600; }
+.wmux-markdown em { font-style: italic; }
+
+.wmux-markdown code {
+  background: #2c2c2e;
+  border: 1px solid #38383a;
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+  color: #ff8170;
+}
+
+.wmux-markdown pre {
+  background: #1a1a1c;
+  border: 1px solid #38383a;
+  border-radius: 8px;
+  padding: 1em;
+  overflow-x: auto;
+  margin: 1em 0;
+}
+
+.wmux-markdown pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  color: #e5e5ea;
+  font-size: 13px;
+}
+
+.wmux-markdown blockquote {
+  border-left: 3px solid #48484a;
+  margin: 1em 0;
+  padding: 0.25em 1em;
+  color: #98989d;
+}
+
+.wmux-markdown ul, .wmux-markdown ol {
+  margin: 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.wmux-markdown li { margin: 0.25em 0; }
+.wmux-markdown li::marker { color: #636366; }
+
+.wmux-markdown hr {
+  border: none;
+  border-top: 1px solid #38383a;
+  margin: 1.5em 0;
+}
+
+.wmux-markdown table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+
+.wmux-markdown th, .wmux-markdown td {
+  border: 1px solid #38383a;
+  padding: 0.5em 0.75em;
+  text-align: left;
+}
+
+.wmux-markdown th {
+  background: #2c2c2e;
+  color: #f5f5f7;
+  font-weight: 600;
+}
+
+.wmux-markdown img { max-width: 100%; border-radius: 8px; }

packages/wmux-client/src/index.css

@@ -8,12 +8,14 @@ import { WmuxApp } from "./components/WmuxApp";
 import { WmuxTerminal } from "./components/WmuxTerminal";
 import { WmuxFileContent } from "./components/WmuxFileContent";
 import { WmuxIframe } from "./components/WmuxIframe";
+import { WmuxMarkdown } from "./components/WmuxMarkdown";
 
 const viewComponents = {
   WmuxApp,
   WmuxTerminal,
   WmuxFileContent,
   WmuxIframe,
+  WmuxMarkdown,
 };
 
 function TerminalLine({ text, delay, dimmed }: { readonly text: string; readonly delay: number; readonly dimmed?: boolean }): React.ReactElement {

packages/wmux-client/src/index.tsx

@@ -0,0 +1,10 @@
+import type { ReactElement } from "react";
+import { WmuxMarkdown } from "../views";
+
+export function MarkdownSession({ id, name, content }: {
+  readonly id: string;
+  readonly name: string;
+  readonly content: string;
+}): ReactElement {
+  return <WmuxMarkdown id={id} name={name} content={content} />;
+}