Align dev workflow with node-based electron-vite dev and tighten assistant markdown layout

src/components/markdown.tsx

@@ -5,6 +5,7 @@ import type { TextPart } from "../types/message"
 interface MarkdownProps {
   part: TextPart
   isDark?: boolean
+  size?: "base" | "sm" | "tight"
 }
 
 export function Markdown(props: MarkdownProps) {
@@ -94,5 +95,17 @@ export function Markdown(props: MarkdownProps) {
     })
   })
 
-  return <div ref={containerRef} class="prose prose-sm dark:prose-invert max-w-none" innerHTML={html()} />
+  const proseClass = () => {
+    const classes = ["prose", "dark:prose-invert", "max-w-none"]
+
+    if (props.size === "tight") {
+      classes.push("prose-sm", "prose-tight")
+    } else if (props.size === "sm") {
+      classes.push("prose-sm")
+    }
+
+    return classes.join(" ")
+  }
+
+  return <div ref={containerRef} class={proseClass()} innerHTML={html()} />
 }

src/components/message-item.tsx

@@ -58,32 +58,33 @@ export default function MessageItem(props: MessageItemProps) {
     }
   }
 
+  const containerClass = () =>
+    isUser()
+      ? "message-item-base bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]"
+      : "message-item-base assistant-message bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
+
   return (
-    <div 
-      class={`message-item-base ${
-        isUser() 
-          ? "bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]" 
-          : "bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
-      }`}
-    >
-      <div class="flex justify-between items-center gap-3">
-        <span class="font-semibold text-sm text-[var(--text-muted)]">
+    <div class={containerClass()}>
+      <div class="flex justify-between items-center gap-2.5 pb-0.5">
+        <span class="font-semibold text-xs text-[var(--text-muted)]">
           {isUser() ? "You" : "Assistant"}
         </span>
-        <span class="text-xs text-[var(--text-muted)]">{timestamp()}</span>
-        <Show when={isUser() && props.onRevert}>
-          <button
-            class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-2 py-0.5 rounded text-base leading-none transition-all duration-200 flex items-center justify-center min-w-7 h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
-            onClick={handleRevert}
-            title="Revert to this message"
-            aria-label="Revert to this message"
-          >
-            ↶
-          </button>
-        </Show>
+        <div class="flex items-center gap-2">
+          <span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
+          <Show when={isUser() && props.onRevert}>
+            <button
+              class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-2 py-0.5 rounded text-sm leading-none transition-all duration-200 flex items-center justify-center min-w-7 h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
+              onClick={handleRevert}
+              title="Revert to this message"
+              aria-label="Revert to this message"
+            >
+              ↶
+            </button>
+          </Show>
+        </div>
       </div>
 
-      <div class="pt-1.5 leading-relaxed whitespace-pre-wrap break-words">
+      <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]">
         <Show when={props.isQueued && isUser()}>
           <div class="message-queued-badge">QUEUED</div>
         </Show>
@@ -98,7 +99,7 @@ export default function MessageItem(props: MessageItemProps) {
           </div>
         </Show>
 
-        <For each={messageParts()}>{(part) => <MessagePart part={part} />}</For>
+        <For each={messageParts()}>{(part) => <MessagePart part={part} messageType={props.message.type} />}</For>
       </div>
 
       <Show when={props.message.status === "sending"}>

src/components/message-part.tsx

@@ -8,13 +8,15 @@ import { partHasRenderableText } from "../types/message"
 
 interface MessagePartProps {
   part: any
+  messageType?: "user" | "assistant"
 }
-
 export default function MessagePart(props: MessagePartProps) {
   const { isDark } = useTheme()
   const partType = () => props.part?.type || ""
   const reasoningId = () => `reasoning-${props.part?.id || ""}`
   const isReasoningExpanded = () => isItemExpanded(reasoningId())
+  const isAssistantMessage = () => props.messageType === "assistant"
+  const textContainerClass = () => (isAssistantMessage() ? "message-text message-text-assistant" : "message-text")
 
   function handleReasoningClick(e: Event) {
     e.preventDefault()
@@ -25,8 +27,8 @@ export default function MessagePart(props: MessagePartProps) {
     <Switch>
       <Match when={partType() === "text"}>
         <Show when={!props.part.synthetic && partHasRenderableText(props.part)}>
-          <div class="message-text">
-            <Markdown part={props.part} isDark={isDark()} />
+          <div class={textContainerClass()}>
+            <Markdown part={props.part} isDark={isDark()} size={isAssistantMessage() ? "tight" : "base"} />
           </div>
         </Show>
       </Match>
@@ -48,8 +50,8 @@ export default function MessagePart(props: MessagePartProps) {
                 <span class="reasoning-label">Reasoning</span>
               </div>
               <Show when={isReasoningExpanded()}>
-                <div class="message-text mt-2">
-                  <Markdown part={props.part} isDark={isDark()} />
+                <div class={`${textContainerClass()} mt-2`}>
+                  <Markdown part={props.part} isDark={isDark()} size={isAssistantMessage() ? "tight" : "base"} />
                 </div>
               </Show>
             </div>