Refactor code structure for improved readability and maintainability

winfunc · thedotmack · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
commit 763b40fced17f404b122b9a250ee63ed5a2f886e
diff --git a/bun.lock b/bun.lock
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "react-markdown": "^9.0.3",
     "react-syntax-highlighter": "^15.6.1",
     "recharts": "^2.14.1",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^4.1.8",

diff --git a/reg-think.jpg b/reg-think.jpg
diff --git a/seq-think.jpg b/seq-think.jpg
diff --git a/src/components/StreamMessage.tsx b/src/components/StreamMessage.tsx
@@ -4,6 +4,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { cn } from "@/lib/utils";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { getClaudeSyntaxTheme } from "@/lib/claudeSyntaxTheme";
 import { useTheme } from "@/hooks";
@@ -666,10 +667,10 @@ const StreamMessageComponent: React.FC<StreamMessageProps> = ({
                             </div>
 
                             {beforeReminder && (
-                              <div className="ml-6 p-2 bg-background rounded-md border">
-                                <pre className="text-xs font-mono overflow-x-auto whitespace-pre-wrap">
+                              <div className="ml-6 p-2 bg-background rounded-md border prose prose-sm dark:prose-invert max-w-none">
+                                <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                                   {beforeReminder}
-                                </pre>
+                                </ReactMarkdown>
                               </div>
                             )}
 
@@ -678,10 +679,10 @@ const StreamMessageComponent: React.FC<StreamMessageProps> = ({
                             </div>
 
                             {afterReminder && (
-                              <div className="ml-6 p-2 bg-background rounded-md border">
-                                <pre className="text-xs font-mono overflow-x-auto whitespace-pre-wrap">
+                              <div className="ml-6 p-2 bg-background rounded-md border prose prose-sm dark:prose-invert max-w-none">
+                                <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
                                   {afterReminder}
-                                </pre>
+                                </ReactMarkdown>
                               </div>
                             )}
                           </div>
@@ -849,6 +850,90 @@ const StreamMessageComponent: React.FC<StreamMessageProps> = ({
                         );
                       }
 
+                      // Check if this is thinking content that should be rendered with markdown
+                      const isThinkingResult = (() => {
+                        if (!content.tool_use_id || typeof contentText !== "string") return false;
+
+                        // Check if this result came from a thinking-related tool or contains thinking patterns
+                        let isFromThinkingTool = false;
+
+                        // Search in previous assistant messages for the matching tool_use
+                        if (streamMessages) {
+                          for (let i = streamMessages.length - 1; i >= 0; i--) {
+                            const prevMsg = streamMessages[i];
+                            if (
+                              prevMsg.type === "assistant" &&
+                              prevMsg.message?.content &&
+                              Array.isArray(prevMsg.message.content)
+                            ) {
+                              const toolUse = prevMsg.message.content.find(
+                                (c: any) =>
+                                  c.type === "tool_use" &&
+                                  c.id === content.tool_use_id &&
+                                  (c.name?.toLowerCase().includes("thinking") || 
+                                   c.name?.toLowerCase().includes("sequential"))
+                              );
+                              if (toolUse) {
+                                isFromThinkingTool = true;
+                                break;
+                              }
+                            }
+                          }
+                        }
+
+                        // Also check if content looks like thinking content (has markdown patterns)
+                        const hasMarkdownPatterns = contentText.includes('**') || 
+                                                  contentText.includes('```') || 
+                                                  contentText.includes('##') ||
+                                                  contentText.includes('- ') ||
+                                                  contentText.includes('1. ');
+
+                        return isFromThinkingTool || hasMarkdownPatterns;
+                      })();
+
+                      if (isThinkingResult) {
+                        renderedSomething = true;
+                        return (
+                          <div key={idx} className="space-y-2">
+                            <div className="flex items-center gap-2">
+                              <CheckCircle2 className="h-4 w-4 text-purple-500" />
+                              <span className="text-sm font-medium">
+                                Thinking Result
+                              </span>
+                            </div>
+                            <div className="ml-6 p-4 bg-gradient-to-br from-purple-50/80 to-indigo-50/60 dark:from-purple-950/20 dark:to-indigo-950/10 rounded-xl border border-purple-200/40 dark:border-purple-700/20">
+                              <div className="prose prose-sm dark:prose-invert max-w-none">
+                                <ReactMarkdown
+                                  remarkPlugins={[remarkGfm]}
+                                  rehypePlugins={[rehypeRaw]}
+                                  components={{
+                                    code({ node, inline, className, children, ...props }: any) {
+                                      const match = /language-(\w+)/.exec(className || "");
+                                      return !inline && match ? (
+                                        <SyntaxHighlighter
+                                          style={syntaxTheme}
+                                          language={match[1]}
+                                          PreTag="div"
+                                          {...props}
+                                        >
+                                          {String(children).replace(/\n$/, "")}
+                                        </SyntaxHighlighter>
+                                      ) : (
+                                        <code className={className} {...props}>
+                                          {children}
+                                        </code>
+                                      );
+                                    },
+                                  }}
+                                >
+                                  {contentText}
+                                </ReactMarkdown>
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      }
+
                       // Handle empty tool results
                       if (!contentText || contentText.trim() === "") {
                         renderedSomething = true;
@@ -880,10 +965,32 @@ const StreamMessageComponent: React.FC<StreamMessageProps> = ({
                               Tool Result
                             </span>
                           </div>
-                          <div className="ml-6 p-2 bg-background rounded-md border">
-                            <pre className="text-xs font-mono overflow-x-auto whitespace-pre-wrap">
+                          <div className="ml-6 p-2 bg-background rounded-md border prose prose-sm dark:prose-invert max-w-none">
+                            <ReactMarkdown
+                              remarkPlugins={[remarkGfm]}
+                              rehypePlugins={[rehypeRaw]}
+                              components={{
+                                code({ node, inline, className, children, ...props }: any) {
+                                  const match = /language-(\w+)/.exec(className || "");
+                                  return !inline && match ? (
+                                    <SyntaxHighlighter
+                                      style={syntaxTheme}
+                                      language={match[1]}
+                                      PreTag="div"
+                                      {...props}
+                                    >
+                                      {String(children).replace(/\n$/, "")}
+                                    </SyntaxHighlighter>
+                                  ) : (
+                                    <code className={className} {...props}>
+                                      {children}
+                                    </code>
+                                  );
+                                },
+                              }}
+                            >
                               {contentText}
-                            </pre>
+                            </ReactMarkdown>
                           </div>
                         </div>
                       );

diff --git a/src/components/ToolWidgets.tsx b/src/components/ToolWidgets.tsx
@@ -60,8 +60,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { detectLinks, makeLinksClickable } from "@/lib/linkDetector";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import { getClaudeSyntaxTheme } from "@/lib/claudeSyntaxTheme";
+import rehypeRaw from "rehype-raw";
 import { open } from "@tauri-apps/plugin-shell";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Input } from "@/components/ui/input";
@@ -2483,11 +2482,16 @@ export const ThinkingWidget: React.FC<{
   signature?: string;
 }> = ({ thinking }) => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const { theme } = useTheme();
+  // theme not needed here
 
   // Process thinking content similar to sequential thinking
   const formattedThinking = thinking
     .replace(/\\n/g, '\n')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&')
+    .replace(/&quot;/g, '"')
+    .replace(/&#x27;/g, "'")
     .trim();
 
   // Determine if content is long and should be collapsible
@@ -2543,30 +2547,18 @@ export const ThinkingWidget: React.FC<{
             !isExpanded && isLongThinking && "max-h-32 overflow-hidden"
           )}>
             <div className="text-sm text-slate-700 dark:text-slate-300 leading-relaxed prose prose-sm dark:prose-invert max-w-none">
-              <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                components={{
-                  code({ node, inline, className, children, ...props }: any) {
-                    const match = /language-(\w+)/.exec(className || "");
-                    return !inline && match ? (
-                      <SyntaxHighlighter
-                        style={getClaudeSyntaxTheme(theme)}
-                        language={match[1]}
-                        PreTag="div"
-                        {...props}
-                      >
-                        {String(children).replace(/\n$/, "")}
-                      </SyntaxHighlighter>
-                    ) : (
-                      <code className={className} {...props}>
-                        {children}
-                      </code>
-                    );
-                  },
-                }}
-              >
-                {formattedThinking}
-              </ReactMarkdown>
+              {formattedThinking ? (
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeRaw]}
+                >
+                  {formattedThinking}
+                </ReactMarkdown>
+              ) : (
+                <span className="italic text-slate-500 dark:text-slate-400">
+                  Thinking...
+                </span>
+              )}
             </div>
             {!isExpanded && isLongThinking && (
               <div className="text-xs text-purple-600 dark:text-purple-400 italic text-center pt-2 border-t border-purple-200/20 dark:border-purple-700/20">
@@ -2683,6 +2675,7 @@ export const SequentialThinkingWidget: React.FC<{
               {formattedThought ? (
                 <ReactMarkdown
                   remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeRaw]}
                   components={{
                     code({ node, inline, className, children, ...props }: any) {
                       const match = /language-(\w+)/.exec(className || "");