Fixes to sidebar so that it all fits

Author: pamelafox

app/frontend/src/components/AnalysisPanel/AnalysisPanel.module.css

@@ -55,13 +55,22 @@
     max-height: 18.75em;
 }
 
+.tPropRow {
+    flex-wrap: wrap;
+    gap: 5px;
+    max-width: 100%;
+    margin-bottom: 0.5em;
+}
+
 .tProp {
+    display: inline-block;
     background-color: #d7d7d7;
-    color: #333232;
-    font-size: 0.75em;
+    font-size: 0.95em;
     padding: 0.1875em 0.625em;
     border-radius: 0.625em;
-    margin-bottom: 0.5em;
+    margin-bottom: 0.3em;
+    word-break: break-word;
+    white-space: normal;
 }
 
 .citationImg {

app/frontend/src/components/AnalysisPanel/ThoughtProcess.tsx

@@ -15,26 +15,38 @@ interface Props {
     thoughts: Thoughts[];
 }
 
+// Helper to truncate URLs
+function truncateImageUrl(val: string) {
+    if (typeof val === "string" && val.startsWith("data:image/")) {
+        // Show only the first 30 chars and add ellipsis
+        return val.slice(0, 30) + "...";
+    } else if (typeof val === "string" && val.startsWith("http")) {
+        const blobIndex = val.indexOf(".blob.core.windows.net/");
+        return blobIndex !== -1 ? val.slice(blobIndex + ".blob.core.windows.net/".length) : val;
+    }
+    return val;
+}
+
 export const ThoughtProcess = ({ thoughts }: Props) => {
     return (
         <ul className={styles.tList}>
             {thoughts.map((t, ind) => {
                 return (
                     <li className={styles.tListItem} key={ind}>
                         <div className={styles.tStep}>{t.title}</div>
-                        <Stack horizontal tokens={{ childrenGap: 5 }}>
+                        <Stack horizontal tokens={{ childrenGap: 5 }} className={styles.tPropRow}>
                             {t.props &&
                                 (Object.keys(t.props).filter(k => k !== "token_usage" && k !== "query_plan") || []).map((k: any) => (
                                     <span className={styles.tProp} key={k}>
-                                        {k}: {JSON.stringify(t.props?.[k])}
+                                        {k}: {truncateImageUrl(JSON.stringify(t.props?.[k]))}
                                     </span>
                                 ))}
                         </Stack>
                         {t.props?.token_usage && <TokenUsageGraph tokenUsage={t.props.token_usage} reasoningEffort={t.props.reasoning_effort} />}
                         {t.props?.query_plan && <AgentPlan query_plan={t.props.query_plan} description={t.description} />}
                         {Array.isArray(t.description) ? (
-                            <SyntaxHighlighter language="json" wrapLongLines className={styles.tCodeBlock} style={a11yLight}>
-                                {JSON.stringify(t.description, null, 2)}
+                            <SyntaxHighlighter language="json" wrapLines wrapLongLines className={styles.tCodeBlock} style={a11yLight}>
+                                {JSON.stringify(t.description, (key, value) => truncateImageUrl(value), 2)}
                             </SyntaxHighlighter>
                         ) : (
                             <div>{t.description}</div>

todo.txt

@@ -1,11 +1,9 @@
 TODO:
 
-* Fix/add unit tests - check coverage
-* mypy
 * Test with integrated vectorization
 * Test with user upload feature
 * Update all TODOs in the code/docs
-* shall i truncate the image_urls to ".data:image/png;base64,asdsa...." for the JSON display
+* Fix/add unit tests - check coverage
 
 Decide:
 * In conftest, should I make a new env for vision? Currently I mashed it into the existing env, but it might be cleaner to have a separate one, as now I have to pass llm_inputs explicitly in the tests to turn off image responses.