Keep the default-open terminal inside the viewport and the map labels inside their shapes.

The dock prompt and placeholder now meet contrast on the raised surface, and service nodes use the same rect geometry as the cases.

Co-authored-by: Cursor <cursoragent@cursor.com>

e2e/systems-map.e2e.ts

@@ -43,7 +43,9 @@ test.describe('Systems Map', () => {
             textBox.x + textBox.width <= shapeBox.x + shapeBox.width + 0.5 &&
             textBox.y + textBox.height <= shapeBox.y + shapeBox.height + 0.5;
 
-          return fits ? [] : [node.getAttribute('aria-label') ?? 'unnamed node'];
+          return fits
+            ? []
+            : [node.getAttribute('data-id') ?? node.getAttribute('aria-label') ?? 'unnamed node'];
         });
       });
 

e2e/terminal.e2e.ts

@@ -55,7 +55,8 @@ test.describe('terminal dock', () => {
 
     await input.fill('clear');
     await input.press('Enter');
-    await expect(session.locator('p')).toHaveText(copy.clearedMessage);
+    await expect(session).toContainText(copy.clearedMessage);
+    await expect(session.locator('p')).toHaveCount(1);
 
     await input.fill('navigate p');
     await input.press('Tab');

src/app/shared/case-study/case-study.scss

@@ -2,6 +2,7 @@
   padding: var(--space-6);
   border-radius: var(--radius-md);
   background: var(--color-surface-raised);
+  overflow-wrap: anywhere;
 }
 
 h2 {

src/app/shared/systems-map/systems-map.html

@@ -32,15 +32,13 @@
           tabindex="-1"
           class="systems-map-node"
           [attr.data-kind]="node.kind"
+          [attr.data-id]="node.id"
           [class.is-connected]="isConnectedNode(node.id)"
           [class.is-dimmed]="isDimmedNode(node.id)"
           (click)="onNodeActivate($event, node)"
           (mouseenter)="onNodeEnter(node.id)"
           (mouseleave)="onNodeLeave(node.id)"
         >
-          @if (node.kind === 'ai' || node.kind === 'platform') {
-            <circle [attr.cx]="node.x" [attr.cy]="node.y" r="28" />
-          } @else {
           <rect
             [attr.x]="node.x - node.shapeWidth / 2"
             [attr.y]="node.y - node.shapeHeight / 2"
@@ -48,7 +46,6 @@
             [attr.height]="node.shapeHeight"
             rx="8"
           />
-          }
           <text [attr.x]="node.x" [attr.y]="node.y">
             @for (line of node.labelLines; track $index) {
               <tspan [attr.x]="node.x" [attr.dy]="$index === 0 ? node.textStartDy : 14">

src/app/shared/systems-map/systems-map.scss

@@ -64,7 +64,6 @@
   color: var(--color-text);
 }
 
-.systems-map-node circle,
 .systems-map-node rect {
   fill: var(--color-surface-overlay);
   stroke: var(--color-accent);
@@ -79,7 +78,7 @@
   stroke: var(--color-accent-soft);
 }
 
-.systems-map-node[data-kind='ai'] circle,
+.systems-map-node[data-kind='ai'] rect,
 .systems-map-legend [data-kind='ai'] {
   stroke: var(--color-accent-strong);
 }
@@ -90,7 +89,6 @@
   text-anchor: middle;
 }
 
-.systems-map-node.is-connected circle,
 .systems-map-node.is-connected rect,
 .systems-map-edge.is-connected {
   stroke: var(--color-accent-strong);
@@ -131,7 +129,6 @@
   outline-offset: var(--focus-ring-offset);
 }
 
-.systems-map-node:focus-visible circle,
 .systems-map-node:focus-visible rect {
   stroke: var(--focus-ring-color);
   stroke-width: 3;
@@ -187,7 +184,6 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .systems-map-node:hover circle,
   .systems-map-node:hover rect {
     stroke: var(--color-accent-strong);
   }
@@ -199,7 +195,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   .systems-map-edge,
-  .systems-map-node circle,
   .systems-map-node rect {
     transition: none;
   }

src/app/shared/systems-map/systems-map.ts

@@ -295,7 +295,7 @@ export class SystemsMap {
       labelLines,
       summary,
       gist,
-      shapeWidth: Math.max(140, longest * 8 + 24),
+      shapeWidth: Math.max(160, longest * 9 + 32),
       shapeHeight: multiline ? 52 : 40,
       textStartDy: multiline ? -6 : 4,
       href: nodeHref(node, locale),

src/app/shared/terminal/terminal-dock.scss

@@ -12,6 +12,7 @@
   display: grid;
   justify-items: end;
   gap: var(--space-2);
+  max-width: 100%;
 }
 
 .terminal-dock-trigger {
@@ -41,6 +42,8 @@
   grid-template-rows: auto 1fr;
   gap: var(--space-3);
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
   max-height: min(70vh, 32rem);
   padding: var(--space-4);
   border: 1px solid var(--surface-glass-border);
@@ -101,11 +104,13 @@
 
 .terminal-dock-session {
   overflow: auto;
+  min-width: 0;
   min-height: 8rem;
   font-family: var(--font-mono);
   font-size: var(--text-sm);
   color: var(--color-text-muted);
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 .terminal-dock-session .echo {
@@ -114,18 +119,22 @@
 
 .terminal-dock-form {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
   align-items: center;
   gap: var(--space-2);
+  min-width: 0;
 }
 
 .terminal-dock-prompt {
   font-family: var(--font-mono);
   font-size: var(--text-sm);
-  color: var(--color-accent-cool);
+  color: var(--color-text);
+  overflow-wrap: anywhere;
 }
 
 .terminal-dock-form input {
+  min-width: 0;
+  width: 100%;
   min-height: 2.75rem;
   padding: var(--space-2) var(--space-3);
   border: 1px solid var(--surface-glass-border);
@@ -136,6 +145,11 @@
   font-size: var(--text-sm);
 }
 
+.terminal-dock-form input::placeholder {
+  color: var(--color-text-subtle);
+  opacity: 1;
+}
+
 @media (hover: hover) and (pointer: fine) {
   .terminal-dock-trigger:hover,
   .terminal-dock-control:hover {