system prompt

src/workspaces/widgets/Chat/MessageBubble.tsx

@@ -11,7 +11,6 @@ type MessageBubbleProps = {
 };
 
 export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
-  const text = formatText(message.text);
   switch (message.role) {
     case 'user':
       return (
@@ -20,18 +19,32 @@ export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
             {message.images?.map((img, i) => (
               <img key={i} src={img.dataUrl} alt={img.filename} className="max-w-full max-h-64 rounded-lg mb-2" />
             ))}
-            <div className="whitespace-pre-wrap">{text}</div>
+            <div className="whitespace-pre-wrap">{message.text}</div>
           </div>
         </div>
       );
 
+    case 'system':
+      return (
+        <div className="flex justify-center">
+          <details className="max-w-[85%] rounded-2xl bg-duck-dark/5 border border-duck-dark/10 px-4 py-2 text-sm">
+            <summary className="text-xs text-duck-dark/40 hover:text-duck-dark/60 cursor-pointer select-none">
+              System prompt
+            </summary>
+            <div className="mt-1.5 text-xs text-duck-dark/40 whitespace-pre-wrap border-l-2 border-duck-dark/10 pl-2 max-h-48 overflow-y-auto">
+              {message.text}
+            </div>
+          </details>
+        </div>
+      );
+
     case 'assistant':
-      if (!text) return null;
+      if (!message.text) return null;
       return (
         <div className="flex justify-start">
           <div className="max-w-[85%] rounded-2xl rounded-tl-sm bg-white/80 border border-duck-dark/10 px-4 py-2.5 text-sm text-duck-dark prose prose-sm max-w-none prose-pre:bg-gray-900 prose-pre:text-green-400 prose-code:text-duck-teal prose-code:before:content-none prose-code:after:content-none">
             <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
-              {text}
+              {message.text}
             </ReactMarkdown>
           </div>
         </div>
@@ -58,23 +71,13 @@ export const MessageBubble = ({ message, onAnswer }: MessageBubbleProps) => {
       return (
         <div className="flex justify-start">
           <div className="max-w-[80%] rounded-2xl bg-red-50 border border-red-200 px-4 py-2.5 text-sm text-red-700">
-            {text}
+            {message.text}
           </div>
         </div>
       );
   }
 };
 
-function formatText(value: unknown): string {
-  if (typeof value === 'string') return value;
-  if (value == null) return '';
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-
 type StreamingBubbleProps = {
   text: string;
 };

src/workspaces/widgets/Chat/types.ts

@@ -9,6 +9,7 @@ export type SessionEntry = {
 export type ChatMessage =
   | { role: 'user'; text: string; images?: { filename: string; dataUrl: string }[] }
   | { role: 'assistant'; text: string }
+  | { role: 'system'; text: string }
   | {
       role: 'tool';
       toolName: string;
@@ -29,6 +30,7 @@ export type TaskInfo = {
 
 export type ServerMessage =
   | { type: 'session:init'; sessionId: string; model: string }
+  | { type: 'system:prompt'; text: string }
   | { type: 'assistant:text'; text: string }
   | { type: 'assistant:partial'; text: string }
   | { type: 'tool:use'; toolName: string; toolInput: Record<string, unknown>; toolUseId: string }