sync: port upstream terminal font reliability, late UI polish, and faster post-update reconnect (#5348–#5444)

.github/workflows/release.yml

@@ -793,7 +793,12 @@ jobs:
     if: ${{ !failure() && !cancelled() && needs.preflight.result == 'success' && needs.build.result == 'success' }}
     runs-on: ubuntu-24.04 # blacksmith-8vcpu-ubuntu-2404
     timeout-minutes: 10
+    permissions:
+      contents: write
     steps:
+      # Fork: keep publishing GitHub Releases with the Release App token rather
+      # than github.token from upstream #5394. This fork's RELEASE_APP_* secrets
+      # are the established publish path for assets and release notes.
       - id: app_token
         name: Mint release app token
         uses: actions/create-github-app-token@v2
@@ -883,7 +888,7 @@ jobs:
 
       - name: Publish release
         if: needs.preflight.outputs.previous_tag != ''
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@v3
         with:
           tag_name: ${{ needs.preflight.outputs.tag }}
           target_commitish: ${{ needs.preflight.outputs.ref }}
@@ -905,7 +910,7 @@ jobs:
 
       - name: Publish first release
         if: needs.preflight.outputs.previous_tag == ''
-        uses: softprops/action-gh-release@v2
+        uses: softprops/action-gh-release@v3
         with:
           tag_name: ${{ needs.preflight.outputs.tag }}
           target_commitish: ${{ needs.preflight.outputs.ref }}

apps/mobile/src/features/home/HomeScreen.tsx

@@ -698,7 +698,11 @@ export function HomeScreen(props: HomeScreenProps) {
   );
 
   const renderV2Item = useCallback(
-    ({ item }: { readonly item: ThreadListV2ListItem }) => {
+    ({ item, index }: { readonly item: ThreadListV2ListItem; readonly index: number }) => {
+      const nextItem = threadListV2Items[index + 1];
+      const showTrailingDivider =
+        nextItem?.type === "v2-thread" ||
+        (nextItem?.type === "v2-pending" && !nextItem.showPendingDivider);
       if (item.type === "v2-pending") {
         const pendingScopeKey = scopedProjectKey(
           item.pendingTask.message.environmentId,
@@ -716,6 +720,7 @@ export function HomeScreen(props: HomeScreenProps) {
                 : null
             }
             showPendingDivider={item.showPendingDivider}
+            showTrailingDivider={showTrailingDivider}
             onSelectPendingTask={props.onSelectPendingTask}
             onDeletePendingTask={props.onDeletePendingTask}
           />
@@ -748,6 +753,7 @@ export function HomeScreen(props: HomeScreenProps) {
           pinned={item.item.pinned}
           snoozePresetMinute={nowMinute}
           snoozeWakeLabelText={item.snoozeWakeLabelText}
+          showTrailingDivider={showTrailingDivider}
           project={
             projectByKey.get(scopedProjectKey(thread.environmentId, thread.projectId)) ?? null
           }
@@ -818,6 +824,7 @@ export function HomeScreen(props: HomeScreenProps) {
       serverConfigs,
       settlementEnvironmentIds,
       snoozeEnvironmentIds,
+      threadListV2Items,
       threadSearchMatchByKey,
       toggleSettledShelf,
       toggleSnoozedShelf,

apps/mobile/src/features/settings/appearance/components/AppearancePreviews.tsx

@@ -1,4 +1,11 @@
-import { Platform, ScrollView, View, useColorScheme } from "react-native";
+import {
+  Platform,
+  ScrollView,
+  type StyleProp,
+  type TextStyle,
+  View,
+  useColorScheme,
+} from "react-native";
 
 import { AppText as Text } from "../../../../components/AppText";
 import {
@@ -54,14 +61,48 @@ export function TerminalAppearancePreview(props: { readonly fontSize: number })
     fontSize: props.fontSize,
     lineHeight,
   } as const;
+  // AppText stamps the sans font on every node, so nested spans must
+  // re-apply the terminal font instead of relying on inheritance, exactly
+  // like the code preview's tokens below.
+  const span = (color: string, extra?: TextStyle): StyleProp<TextStyle> => [
+    lineStyle,
+    { color, ...extra },
+  ];
 
   return (
     <View className="p-4">
-      <Text style={[lineStyle, { color: theme.foreground }]}>$ npm run dev</Text>
-      <Text style={[lineStyle, { color: theme.palette[2] }]}>✓ Ready in 430ms</Text>
-      <Text style={[lineStyle, { color: theme.foreground }]}>
-        Local: http://localhost:3000{" "}
-        <Text style={[lineStyle, { color: theme.cursorForeground }]}>▏</Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>→ </Text>
+        <Text style={span(theme.palette[6])}>t3code </Text>
+        <Text style={span(theme.palette[4])}>git:(</Text>
+        <Text style={span(theme.palette[1])}>main</Text>
+        <Text style={span(theme.palette[4])}>)</Text>
+        <Text style={span(theme.palette[3])}> ✗</Text>
+        <Text style={span(theme.foreground)}> vpr dev</Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>VITE v7.1.1</Text>
+        <Text style={span(theme.mutedForeground)}> ready in</Text>
+        <Text style={span(theme.foreground)}> 1.24s</Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>→ </Text>
+        <Text style={span(theme.mutedForeground)}>Local: </Text>
+        <Text style={span(theme.palette[6], { textDecorationLine: "underline" })}>
+          http://127.0.0.1:5173/
+        </Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.palette[2])}>✓ 85 passed</Text>
+        <Text style={span(theme.palette[3])}> △ 2 warnings</Text>
+        <Text style={span(theme.palette[1])}> ✗ 0 failed</Text>
+      </Text>
+      <Text style={span(theme.foreground)}>
+        <Text style={span(theme.background, { backgroundColor: theme.palette[2] })}>
+          {" READY "}
+        </Text>
+        <Text style={span(theme.mutedForeground)}> watching for changes</Text>{" "}
+        <Text style={span(theme.cursorForeground)}>▏</Text>
       </Text>
     </View>
   );

apps/mobile/src/features/threads/thread-list-v2-items.tsx

@@ -204,6 +204,8 @@ export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props
   readonly pane?: "screen" | "sidebar";
   /** Draws the "Pending" divider above the first queued row. */
   readonly showPendingDivider: boolean;
+  /** Keeps row hairlines inside a section; section headers draw their own rule. */
+  readonly showTrailingDivider?: boolean;
   readonly onSelectPendingTask: (pendingTask: PendingNewTask) => void;
   readonly onDeletePendingTask: (pendingTask: PendingNewTask) => void;
 }) {
@@ -291,7 +293,9 @@ export const ThreadListV2PendingRow = memo(function ThreadListV2PendingRow(props
           ) : (
             <View className="bg-screen">
               <View className="px-5 py-2.5">{rowContent}</View>
-              <View className="ml-5 h-px bg-border-subtle" />
+              {props.showTrailingDivider !== false ? (
+                <View className="ml-5 h-px bg-border-subtle" />
+              ) : null}
             </View>
           )}
         </Pressable>
@@ -327,6 +331,8 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
       into the drawer surface, selection filled with the accent color —
       matching the v1 sidebar rows. */
   readonly pane?: "screen" | "sidebar";
+  /** Keeps row hairlines inside a section; section headers draw their own rule. */
+  readonly showTrailingDivider?: boolean;
   /** Highlights the thread open in the detail pane (iPad split view). The
       compact Home list never sets it — phones navigate away on select. */
   readonly selected?: boolean;
@@ -728,7 +734,9 @@ export const ThreadListV2Row = memo(function ThreadListV2Row(props: {
              actions reveal behind the row. */
           <View className="bg-screen">
             <View className="px-5 py-2.5">{cardContent}</View>
-            <View className="ml-5 h-px bg-border-subtle" />
+            {props.showTrailingDivider !== false ? (
+              <View className="ml-5 h-px bg-border-subtle" />
+            ) : null}
           </View>
         )}
       </Pressable>

apps/server/src/server.ts

@@ -583,8 +583,13 @@ export const makeServerLayer = Layer.unwrap(
             const server = yield* HttpServer.HttpServer;
             const address = server.address;
             if (typeof address === "string" || !("port" in address)) return;
-            yield* Effect.sleep("250 millis").pipe(
-              Effect.andThen(reconcileDesiredCloudLink(`http://127.0.0.1:${address.port}`)),
+            // No settling delay before the first attempt: routes are already
+            // serving by the time activation opens this gate (the startup
+            // sequence awaits routesReady), and the retry schedule below
+            // covers anything this sleep used to hedge against. Every
+            // millisecond here is dead time on the path to remote
+            // reachability after a restart.
+            yield* reconcileDesiredCloudLink(`http://127.0.0.1:${address.port}`).pipe(
               Effect.retry({
                 while: (error) =>
                   error._tag !== "EnvironmentHttpBadRequestError" &&

apps/web/src/appearanceFonts.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vite-plus/test";
 
 import {
+  areFontAdvancesMonospace,
   clampCodeFontSize,
   clampInterfaceFontSize,
   clampPromptFontSize,
@@ -9,8 +10,22 @@ import {
   appearanceFontStack,
   cssFontFamilies,
   resolveDefaultFamilyLabel,
+  resolveTerminalFontPreference,
 } from "./appearanceFonts";
 
+describe("areFontAdvancesMonospace", () => {
+  it("accepts a fixed advance and rejects any proportional glyph", () => {
+    expect(areFontAdvancesMonospace([10, 10, 10, 10])).toBe(true);
+    expect(areFontAdvancesMonospace([10, 10, 7, 10])).toBe(false);
+    expect(areFontAdvancesMonospace([10, 10.02])).toBe(false);
+  });
+
+  it("fails open when canvas metrics are unavailable", () => {
+    expect(areFontAdvancesMonospace([])).toBe(true);
+    expect(areFontAdvancesMonospace([Number.NaN, Number.NaN])).toBe(true);
+  });
+});
+
 describe("cssFontFamilies", () => {
   it("returns null for effectively empty input", () => {
     expect(cssFontFamilies("")).toBeNull();
@@ -54,6 +69,34 @@ describe("appearanceFontStack", () => {
   });
 });
 
+describe("resolveTerminalFontPreference", () => {
+  it("inherits the code font in simple mode", () => {
+    expect(
+      resolveTerminalFontPreference({ advanced: false, code: "Fira Code", terminal: "" }),
+    ).toBe("Fira Code");
+    expect(
+      resolveTerminalFontPreference({
+        advanced: false,
+        code: "Fira Code",
+        terminal: "Berkeley Mono",
+      }),
+    ).toBe("Fira Code");
+  });
+
+  it("keeps code and terminal fonts independent in advanced mode", () => {
+    expect(resolveTerminalFontPreference({ advanced: true, code: "Fira Code", terminal: "" })).toBe(
+      "",
+    );
+    expect(
+      resolveTerminalFontPreference({
+        advanced: true,
+        code: "Fira Code",
+        terminal: "Berkeley Mono",
+      }),
+    ).toBe("Berkeley Mono");
+  });
+});
+
 describe("font size clamping", () => {
   it("keeps sizes inside the ranges the UI can absorb", () => {
     expect(clampInterfaceFontSize(16)).toBe(16);

apps/web/src/appearanceFonts.ts

@@ -25,6 +25,22 @@ export const DEFAULT_SANS_FONT_STACK =
 export const DEFAULT_CODE_FONT_STACK =
   '"SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace';
 
+export const TYPOGRAPHY_ADVANCED_STORAGE_KEY = "t3code:typography-advanced";
+
+/**
+ * Simple typography treats the terminal as another monospace surface. In
+ * Advanced mode an empty terminal preference means the terminal default,
+ * keeping later code-font changes isolated to code surfaces.
+ */
+export function resolveTerminalFontPreference(input: {
+  readonly advanced: boolean;
+  readonly code: string;
+  readonly terminal: string;
+}): string {
+  if (input.advanced) return input.terminal;
+  return input.code;
+}
+
 function quoteFontFamilyName(name: string): string {
   const bare = name.trim();
   if (bare.length === 0) return "";
@@ -165,6 +181,22 @@ export function isFontFamilyAvailable(family: string): boolean {
   }
 }
 
+const MONOSPACE_PROBE_VARIANTS = ["normal 400", "normal 700", "italic 400", "italic 700"] as const;
+const MONOSPACE_PROBE_GLYPHS = ["i", "M", "W", "0", "@", "#", ".", " "] as const;
+const MONOSPACE_ADVANCE_TOLERANCE = 0.01;
+
+export function areFontAdvancesMonospace(advances: readonly number[]): boolean {
+  const reference = advances[0];
+  if (
+    reference === undefined ||
+    reference <= 0 ||
+    advances.some((advance) => !Number.isFinite(advance) || advance <= 0)
+  ) {
+    return true;
+  }
+  return advances.every((advance) => Math.abs(advance - reference) < MONOSPACE_ADVANCE_TOLERANCE);
+}
+
 /**
  * Whether a family renders every character on the same advance. Cell-grid
  * surfaces (the terminal) require this: a proportional face draws its text
@@ -182,13 +214,15 @@ export function isMonospaceFamily(family: string): boolean {
       fontProbeContext = document.createElement("canvas").getContext("2d");
     }
     if (fontProbeContext === null) return true;
+    const context = fontProbeContext;
     // Fall back to a generic mono so an absent face measures as monospace and
     // is left for the normal fallback chain to resolve.
-    fontProbeContext.font = `32px ${families}, monospace`;
-    const narrow = fontProbeContext.measureText("i").width;
-    const wide = fontProbeContext.measureText("M").width;
-    if (!Number.isFinite(narrow) || !Number.isFinite(wide) || wide === 0) return true;
-    return Math.abs(wide - narrow) < 0.5;
+    for (const variant of MONOSPACE_PROBE_VARIANTS) {
+      context.font = `${variant} 32px ${families}, monospace`;
+      const advances = MONOSPACE_PROBE_GLYPHS.map((glyph) => context.measureText(glyph).width);
+      if (!areFontAdvancesMonospace(advances)) return false;
+    }
+    return true;
   } catch {
     return true;
   }