fix(app): align conversation typography

packages/app/src/composer/editor/editor.tsx

@@ -162,7 +162,7 @@ export function ComposerEditor(props: ComposerEditorProps) {
             spellcheck={state.mode === "normal"}
             // @ts-expect-error
             autocomplete="off"
-            class="relative z-10 block min-h-[60px] max-h-[180px] w-full overflow-y-auto whitespace-pre-wrap bg-transparent px-4 pt-4 pb-2 text-[13px] font-[440] leading-5 text-v2-text-text-base focus:outline-none [&_[data-mention=file]]:text-syntax-property [&_[data-mention=agent]]:text-syntax-type [&_[data-mention=reference]]:text-syntax-keyword"
+            class="relative z-10 block min-h-[60px] max-h-[180px] w-full overflow-y-auto whitespace-pre-wrap bg-transparent px-4 pt-4 pb-2 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-family:var(--v2-font-family-sans)] focus:outline-none [&_[data-mention=file]]:text-syntax-property [&_[data-mention=agent]]:text-syntax-type [&_[data-mention=reference]]:text-syntax-keyword"
             classList={{ "font-mono!": state.mode === "shell", "opacity-50": props.disabled }}
             style={{
               "unicode-bidi": state.mode === "normal" ? "plaintext" : undefined,

packages/session-ui/src/components/basic-tool.css

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   align-self: stretch;
-  gap: 0px;
+  gap: 6px;
   justify-content: flex-start;
 
   &[data-clickable="true"] {
@@ -19,7 +19,7 @@
     display: flex;
     align-items: center;
     align-self: stretch;
-    gap: 8px;
+    gap: 6px;
   }
 
   [data-slot="basic-tool-tool-indicator"] {
@@ -59,7 +59,7 @@
     flex: 0 1 auto;
     min-width: 0;
     max-width: 100%;
-    font-size: 14px;
+    font-size: 13px;
   }
 
   [data-slot="basic-tool-tool-info-structured"] {
@@ -69,26 +69,26 @@
     min-width: 0;
     display: inline-flex;
     align-items: center;
-    gap: 8px;
+    gap: 6px;
     justify-content: flex-start;
   }
 
   [data-slot="basic-tool-tool-info-main"] {
     display: flex;
     align-items: baseline;
-    gap: 8px;
+    gap: 6px;
     min-width: 0;
     overflow: hidden;
   }
 
   [data-slot="basic-tool-tool-title"] {
     flex-shrink: 0;
-    font-family: var(--font-family-sans);
-    font-size: 14px;
+    font-family: var(--v2-font-family-sans);
+    font-size: 13px;
     font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
+    font-weight: 530;
+    line-height: var(--v2-line-height-compact, 16px);
+    letter-spacing: -0.04px;
     color: var(--v2-text-text-base);
 
     &.capitalize {
@@ -107,13 +107,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-family: var(--font-family-sans);
+    font-family: var(--v2-font-family-sans);
     font-variant-numeric: tabular-nums;
-    font-size: 14px;
+    font-size: 13px;
     font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
+    font-weight: 440;
+    line-height: var(--v2-line-height-compact, 16px);
+    letter-spacing: -0.04px;
     color: var(--v2-text-text-muted);
 
     &.clickable:not(.webfetch-link) {
@@ -153,13 +153,13 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    font-family: var(--font-family-sans);
+    font-family: var(--v2-font-family-sans);
     font-variant-numeric: tabular-nums;
-    font-size: 14px;
+    font-size: 13px;
     font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
+    font-weight: 440;
+    line-height: var(--v2-line-height-compact, 16px);
+    letter-spacing: -0.04px;
     color: var(--v2-text-text-muted);
   }
 
@@ -170,29 +170,13 @@
   }
 }
 
-[data-component="collapsible"].tool-collapsible[data-compact="true"] > [data-slot="collapsible-trigger"] {
+[data-component="collapsible"].tool-collapsible > [data-slot="collapsible-trigger"] {
   height: 28px;
+}
 
-  [data-component="tool-trigger"],
-  [data-slot="basic-tool-tool-info-main"] {
-    gap: 6px;
-  }
-
-  [data-slot="basic-tool-tool-title"] {
-    font-family: var(--v2-font-family-sans);
-    font-size: 13px;
-    font-weight: 530;
-    line-height: var(--v2-line-height-compact, 16px);
-    letter-spacing: -0.04px;
-  }
-
-  [data-slot="basic-tool-tool-subtitle"] {
-    font-family: var(--v2-font-family-sans);
-    font-size: 13px;
-    font-weight: 440;
-    line-height: var(--v2-line-height-compact, 16px);
-    letter-spacing: -0.04px;
-  }
+[data-component="collapsible"].tool-collapsible
+  > [data-slot="collapsible-trigger"]:has([data-component="task-tool-card"]) {
+  height: auto;
 }
 
 [data-component="task-tool-card"] {

packages/session-ui/src/components/basic-tool.tsx

@@ -43,7 +43,6 @@ export interface BasicToolProps {
   triggerHref?: string
   triggerAsLink?: boolean
   clickable?: boolean
-  compact?: boolean
 }
 
 const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
@@ -261,7 +260,6 @@ export function BasicTool(props: BasicToolProps) {
       open={open()}
       onOpenChange={props.locked ? undefined : handleOpenChange}
       class="tool-collapsible"
-      data-compact={props.compact ? "true" : undefined}
       data-rail={props.rail === false ? "false" : undefined}
     >
       <Show

packages/session-ui/src/components/message-part.css

@@ -8,12 +8,12 @@
 }
 
 [data-component="user-message"] {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
+  font-family: var(--v2-font-family-sans);
+  font-size: 13px;
   font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large);
-  letter-spacing: var(--letter-spacing-normal);
+  font-weight: 440;
+  line-height: 20px;
+  letter-spacing: -0.04px;
   color: var(--v2-text-text-base);
   display: flex;
   flex-direction: column;
@@ -142,7 +142,7 @@
     background: var(--v2-background-bg-layer-02);
     border: none;
     padding: 8px 12px;
-    border-radius: 10px;
+    border-radius: 8px;
 
     [data-highlight="file"] {
       color: var(--syntax-property);
@@ -224,6 +224,14 @@
   width: 100%;
   margin-top: 24px;
 
+  [data-component="markdown"] {
+    font-family: var(--v2-font-family-sans);
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+  }
+
   [data-slot="text-part-body"] {
     margin-top: 0;
   }
@@ -659,6 +667,15 @@
   [data-slot="context-tool-group-title"] {
     flex-shrink: 1;
     min-width: 0;
+    font-family: var(--v2-font-family-sans);
+    font-size: 13px;
+    font-weight: 530;
+    line-height: 20px;
+    letter-spacing: -0.04px;
+  }
+
+  [data-slot="context-tool-group-summary"] {
+    font-weight: 440;
   }
 
   [data-slot="collapsible-arrow"] {
@@ -1242,7 +1259,7 @@
     position: sticky;
     top: var(--sticky-accordion-top, 0px);
     z-index: 20;
-    height: calc(32px + var(--tool-content-gap));
+    height: calc(28px + var(--tool-content-gap));
     padding-bottom: var(--tool-content-gap);
     background-color: var(--v2-background-bg-base);
   }
@@ -1251,6 +1268,12 @@
 [data-component="accordion"][data-scope="apply-patch"] {
   [data-slot="accordion-trigger"] {
     background-color: var(--v2-background-bg-base) !important;
+    padding: 8px;
+    font-family: var(--v2-font-family-sans);
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 13px;
+    letter-spacing: -0.04px;
   }
 
   [data-slot="apply-patch-trigger-content"] {
@@ -1265,7 +1288,7 @@
     flex-grow: 1;
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 8px;
     min-width: 0;
   }
 
@@ -1279,7 +1302,7 @@
   }
 
   [data-slot="apply-patch-directory"] {
-    color: var(--v2-text-text-muted);
+    color: var(--v2-text-text-faint);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -1298,15 +1321,18 @@
   [data-slot="apply-patch-trigger-actions"] {
     flex-shrink: 0;
     display: flex;
-    gap: 16px;
+    gap: 12px;
     align-items: center;
     justify-content: flex-end;
   }
 
   [data-slot="apply-patch-change"] {
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
+    font-family: var(--v2-font-family-sans);
+    font-size: 13px;
+    font-weight: 440;
+    line-height: 13px;
+    letter-spacing: -0.04px;
+    font-variant-numeric: tabular-nums;
   }
 
   [data-slot="apply-patch-change"][data-type="added"] {
@@ -1375,10 +1401,6 @@
 :root body [data-component="user-message"] {
   font-weight: 440;
 
-  [data-slot="user-message-text"] {
-    background: var(--v2-background-bg-layer-01);
-  }
-
   [data-slot="user-message-comments"] {
     display: flex;
     flex-direction: column;

packages/session-ui/src/tools/tool-renderer.tsx

@@ -498,7 +498,7 @@ export function CurrentContextToolGroup(props: {
         <div data-component="context-tool-group-trigger">
           <span
             data-slot="context-tool-group-title"
-            class="min-w-0 flex items-center gap-2 text-14-medium text-text-strong"
+            class="min-w-0 flex items-center gap-2 text-text-strong"
           >
             <span data-slot="context-tool-group-label" class="shrink-0">
               <ToolStatusTitle
@@ -510,7 +510,7 @@ export function CurrentContextToolGroup(props: {
             </span>
             <span
               data-slot="context-tool-group-summary"
-              class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap font-normal text-text-base"
+              class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-text-base"
             >
               <AnimatedCountList
                 items={[
@@ -723,7 +723,7 @@ function ToolFileAccordion(props: {
     <Accordion
       multiple
       data-scope="apply-patch"
-      style={{ "--sticky-accordion-offset": "calc(32px + var(--tool-content-gap))" }}
+      style={{ "--sticky-accordion-offset": "calc(28px + var(--tool-content-gap))" }}
       defaultValue={props.defaultOpen === false ? [] : [value()]}
     >
       <Accordion.Item value={value()}>
@@ -1288,7 +1288,6 @@ ToolRegistry.register({
         {...props}
         icon="console"
         rail={false}
-        compact
         allowOpenWhilePending
         trigger={(open) => (
           <div data-slot="basic-tool-tool-info-structured">
@@ -1581,7 +1580,7 @@ ToolRegistry.register({
             <Accordion
               multiple
               data-scope="apply-patch"
-              style={{ "--sticky-accordion-offset": "calc(32px + var(--tool-content-gap))" }}
+              style={{ "--sticky-accordion-offset": "calc(28px + var(--tool-content-gap))" }}
               value={open()}
               onChange={change}
             >