brew-tui 1.0.0 → 1.1.0

package/build/index.js

@@ -66,7 +66,7 @@ import { rm as rm2 } from "fs/promises";
 import { render } from "ink";
 
 // src/app.tsx
-import { useEffect as useEffect23, useState as useState20 } from "react";
+import { useEffect as useEffect23, useState as useState21 } from "react";
 import { useApp } from "ink";
 
 // src/components/layout/app-layout.tsx
@@ -74,7 +74,32 @@ import { useRef } from "react";
 import { Box as Box3 } from "ink";
 
 // src/components/layout/header.tsx
-import { Box, Text as Text3, useStdout } from "ink";
+import { Box, Text as Text3 } from "ink";
+
+// src/hooks/use-terminal-size.ts
+import { useEffect, useState } from "react";
+import { useStdout } from "ink";
+function useTerminalSize() {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState(() => ({
+    columns: stdout?.columns ?? 80,
+    rows: stdout?.rows ?? 24
+  }));
+  useEffect(() => {
+    if (!stdout) return;
+    const onResize = () => {
+      setSize({
+        columns: stdout.columns ?? 80,
+        rows: stdout.rows ?? 24
+      });
+    };
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  return size;
+}
 
 // src/stores/navigation-store.ts
 import { create } from "zustand";
@@ -297,7 +322,7 @@ var GRADIENTS = {
 };
 
 // src/components/common/blinking-text.tsx
-import { useEffect, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { Text as Text2 } from "ink";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function BlinkingText({
@@ -306,8 +331,8 @@ function BlinkingText({
   bold = true,
   children
 }) {
-  const [bright, setBright] = useState(true);
-  useEffect(() => {
+  const [bright, setBright] = useState2(true);
+  useEffect2(() => {
     const id = setInterval(() => setBright((b) => !b), intervalMs);
     return () => clearInterval(id);
   }, [intervalMs]);
@@ -389,9 +414,11 @@ function Header() {
   const menuMode = useNavigationStore((s) => s.menuMode);
   const menuCursor = useNavigationStore((s) => s.menuCursor);
   useLocaleStore((s) => s.locale);
-  const { stdout } = useStdout();
-  const cols = stdout?.columns ?? 80;
-  const isNarrow = cols < 95;
+  const { columns, rows } = useTerminalSize();
+  const isNarrow = columns < 95;
+  const hideLogoByWidth = columns < 45;
+  const hideLogoByHeight = rows < 32;
+  const collapseMenu = rows < 22 && !menuMode;
   const cursorView = menuMode ? MENU_VIEWS[menuCursor] ?? null : null;
   const logoBlock = /* @__PURE__ */ jsx3(Box, { flexDirection: "column", flexShrink: 0, children: LOGO_BREW.map((brew, i) => /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx3(GradientText, { colors: GRADIENTS.gold, children: brew }),
@@ -412,12 +439,30 @@ function Header() {
       t("hint_menuOpen_suffix")
     ] }) })
   ] });
+  if (collapseMenu) {
+    const currentLabel = t(VIEW_LABEL_KEYS[currentView]);
+    const currentIsPro = isProView(currentView) || isTeamView(currentView);
+    return /* @__PURE__ */ jsxs(Box, { paddingX: SPACING.xs, children: [
+      /* @__PURE__ */ jsx3(Text3, { color: COLORS.success, bold: true, children: "\u25B6 " }),
+      /* @__PURE__ */ jsx3(Text3, { color: COLORS.success, bold: true, children: currentLabel }),
+      currentIsPro && /* @__PURE__ */ jsxs(Text3, { color: COLORS.brand, bold: true, children: [
+        " ",
+        t("pro_badge")
+      ] }),
+      /* @__PURE__ */ jsx3(Text3, { color: COLORS.textSecondary, children: "  " }),
+      /* @__PURE__ */ jsx3(BlinkingText, { color: COLORS.brand, children: "M" }),
+      /* @__PURE__ */ jsx3(Text3, { color: COLORS.textSecondary, children: t("hint_menuOpen_suffix") })
+    ] });
+  }
   if (isNarrow) {
     return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: SPACING.xs, children: [
-      logoBlock,
-      /* @__PURE__ */ jsx3(Box, { marginTop: SPACING.xs, children: menuBlock })
+      !hideLogoByWidth && !hideLogoByHeight && logoBlock,
+      /* @__PURE__ */ jsx3(Box, { marginTop: hideLogoByWidth || hideLogoByHeight ? SPACING.none : SPACING.xs, children: menuBlock })
     ] });
   }
+  if (hideLogoByHeight) {
+    return /* @__PURE__ */ jsx3(Box, { flexDirection: "column", paddingX: SPACING.xs, children: menuBlock });
+  }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", paddingX: SPACING.xs, alignItems: "center", children: [
     logoBlock,
     /* @__PURE__ */ jsx3(Box, { marginLeft: SPACING.sm, children: menuBlock })
@@ -460,8 +505,9 @@ function Footer() {
   const currentView = useNavigationStore((s) => s.currentView);
   const menuMode = useNavigationStore((s) => s.menuMode);
   const locale = useLocaleStore((s) => s.locale);
+  const { rows } = useTerminalSize();
   const defs = VIEW_HINT_DEFS[currentView] ?? [];
-  const showChoose = hasNumberedActions(defs) && !menuMode;
+  const showChoose = hasNumberedActions(defs) && !menuMode && rows >= 26;
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
     showChoose && /* @__PURE__ */ jsx4(Box2, { paddingX: SPACING.xs, children: /* @__PURE__ */ jsx4(Text4, { color: COLORS.text, children: t("hint_chooseNumber") }) }),
     /* @__PURE__ */ jsxs2(Box2, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: COLORS.gold, paddingX: SPACING.xs, flexWrap: "wrap", children: [
@@ -506,31 +552,6 @@ function Footer() {
   ] });
 }
 
-// src/hooks/use-terminal-size.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { useStdout as useStdout2 } from "ink";
-function useTerminalSize() {
-  const { stdout } = useStdout2();
-  const [size, setSize] = useState2(() => ({
-    columns: stdout?.columns ?? 80,
-    rows: stdout?.rows ?? 24
-  }));
-  useEffect2(() => {
-    if (!stdout) return;
-    const onResize = () => {
-      setSize({
-        columns: stdout.columns ?? 80,
-        rows: stdout.rows ?? 24
-      });
-    };
-    stdout.on("resize", onResize);
-    return () => {
-      stdout.off("resize", onResize);
-    };
-  }, [stdout]);
-  return size;
-}
-
 // src/hooks/use-container-size.ts
 import { useEffect as useEffect3, useState as useState3 } from "react";
 import { measureElement } from "ink";
@@ -837,12 +858,12 @@ function WelcomeView({ onContinue }) {
       void markOnboardingComplete().finally(onContinue);
     }
   });
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingY: SPACING.md, paddingX: SPACING.lg, children: [
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingY: SPACING.xs, paddingX: SPACING.sm, flexShrink: 1, children: [
     /* @__PURE__ */ jsx7(Box4, { children: /* @__PURE__ */ jsx7(GradientText, { colors: GRADIENTS.gold, bold: true, children: t("welcome_title") }) }),
-    /* @__PURE__ */ jsx7(Box4, { marginTop: SPACING.sm, children: /* @__PURE__ */ jsx7(Text5, { color: COLORS.text, children: t("welcome_intro") }) }),
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: SPACING.sm, children: [
+    /* @__PURE__ */ jsx7(Box4, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsx7(Text5, { color: COLORS.text, wrap: "wrap", children: t("welcome_intro") }) }),
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: SPACING.xs, children: [
       /* @__PURE__ */ jsx7(Text5, { color: COLORS.muted, children: t("welcome_keysHeader") }),
-      /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingLeft: SPACING.sm, marginTop: SPACING.xs, children: [
+      /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", paddingLeft: SPACING.sm, children: [
         /* @__PURE__ */ jsxs4(Text5, { children: [
           /* @__PURE__ */ jsx7(Text5, { color: COLORS.gold, bold: true, children: "m" }),
           "       ",
@@ -885,11 +906,11 @@ function WelcomeView({ onContinue }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: SPACING.sm, children: [
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: SPACING.xs, children: [
       /* @__PURE__ */ jsx7(Text5, { color: COLORS.muted, children: t("welcome_proHeader") }),
-      /* @__PURE__ */ jsx7(Box4, { paddingLeft: SPACING.sm, children: /* @__PURE__ */ jsx7(Text5, { color: COLORS.textSecondary, children: t("welcome_proIntro") }) })
+      /* @__PURE__ */ jsx7(Box4, { paddingLeft: SPACING.sm, children: /* @__PURE__ */ jsx7(Text5, { color: COLORS.textSecondary, wrap: "wrap", children: t("welcome_proIntro") }) })
     ] }),
-    /* @__PURE__ */ jsx7(Box4, { marginTop: SPACING.md, children: /* @__PURE__ */ jsx7(Text5, { color: COLORS.success, bold: true, children: t("welcome_continueHint") }) })
+    /* @__PURE__ */ jsx7(Box4, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsx7(Text5, { color: COLORS.success, bold: true, children: t("welcome_continueHint") }) })
   ] });
 }
 
@@ -915,15 +936,16 @@ function UpgradePrompt({ viewId }) {
   const pricingKey = team ? "upgrade_teamPricing" : "upgrade_pricing";
   const buyUrlKey = team ? "upgrade_buyUrlTeam" : "upgrade_buyUrl";
   const labelKey = team ? "upgrade_teamLabel" : "upgrade_proLabel";
-  return /* @__PURE__ */ jsx8(Box5, { flexDirection: "column", alignItems: "center", paddingY: SPACING.sm, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx8(Box5, { flexDirection: "column", alignItems: "center", paddingY: SPACING.xs, children: /* @__PURE__ */ jsxs5(
     Box5,
     {
       borderStyle: "double",
       borderColor: COLORS.brand,
-      paddingX: SPACING.md,
-      paddingY: SPACING.sm,
+      paddingX: SPACING.sm,
+      paddingY: SPACING.none,
       flexDirection: "column",
       alignItems: "center",
+      flexShrink: 1,
       width: "80%",
       children: [
         /* @__PURE__ */ jsxs5(Text6, { bold: true, color: COLORS.brand, children: [
@@ -931,24 +953,13 @@ function UpgradePrompt({ viewId }) {
           " ",
           t(headerKey, { title })
         ] }),
-        /* @__PURE__ */ jsx8(Text6, { children: " " }),
         /* @__PURE__ */ jsx8(Text6, { color: COLORS.text, wrap: "wrap", children: t(keys.desc) }),
-        /* @__PURE__ */ jsx8(Text6, { children: " " }),
-        /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", alignItems: "center", marginTop: SPACING.xs, children: [
           /* @__PURE__ */ jsx8(Text6, { color: COLORS.info, bold: true, children: t(pricingKey) }),
-          /* @__PURE__ */ jsx8(Text6, { children: " " }),
           /* @__PURE__ */ jsx8(Text6, { color: COLORS.muted, children: t("upgrade_buyAt") }),
-          /* @__PURE__ */ jsxs5(Text6, { color: COLORS.sky, bold: true, children: [
-            "  ",
-            t(buyUrlKey)
-          ] }),
-          /* @__PURE__ */ jsx8(Text6, { children: " " }),
+          /* @__PURE__ */ jsx8(Text6, { color: COLORS.sky, bold: true, children: t(buyUrlKey) }),
           /* @__PURE__ */ jsx8(Text6, { color: COLORS.muted, children: t("upgrade_activateWith") }),
-          /* @__PURE__ */ jsxs5(Text6, { color: COLORS.success, bold: true, children: [
-            "  ",
-            t("upgrade_activateCmd")
-          ] }),
-          /* @__PURE__ */ jsx8(Text6, { children: " " }),
+          /* @__PURE__ */ jsx8(Text6, { color: COLORS.success, bold: true, children: t("upgrade_activateCmd") }),
           /* @__PURE__ */ jsx8(Text6, { color: COLORS.brand, children: t(labelKey) })
         ] })
       ]
@@ -958,7 +969,19 @@ function UpgradePrompt({ viewId }) {
 
 // src/views/dashboard.tsx
 import { useEffect as useEffect5, useMemo as useMemo2 } from "react";
-import { Box as Box9, Text as Text12, useStdout as useStdout4 } from "ink";
+import { Box as Box9, Text as Text12 } from "ink";
+
+// src/hooks/use-visible-rows.ts
+function useVisibleRows({
+  reservedRows,
+  fallbackReservedRows = reservedRows,
+  minRows = 3
+}) {
+  const { height: contentHeight } = useContentSize();
+  const { rows: terminalRows } = useTerminalSize();
+  const availableRows = contentHeight > 0 ? contentHeight - reservedRows : terminalRows - fallbackReservedRows;
+  return Math.max(minRows, Math.floor(availableRows));
+}
 
 // src/stores/brew-store.ts
 import { create as create4 } from "zustand";
@@ -1924,12 +1947,11 @@ var useComplianceStore = create8((set, get) => ({
 }));
 
 // src/components/common/stat-card.tsx
-import { Box as Box6, Text as Text7, useStdout as useStdout3 } from "ink";
+import { Box as Box6, Text as Text7 } from "ink";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function StatCard({ label, value, color = COLORS.white }) {
-  const { stdout } = useStdout3();
-  const cols = stdout?.columns ?? 80;
-  const minW = cols < 60 ? 12 : cols < 100 ? 14 : 16;
+  const { columns } = useTerminalSize();
+  const minW = columns < 60 ? 12 : columns < 100 ? 14 : 16;
   return /* @__PURE__ */ jsxs6(
     Box6,
     {
@@ -1939,6 +1961,7 @@ function StatCard({ label, value, color = COLORS.white }) {
       paddingY: SPACING.none,
       flexDirection: "column",
       alignItems: "center",
+      flexShrink: 1,
       minWidth: minW,
       children: [
         /* @__PURE__ */ jsx9(Text7, { bold: true, color, children: value }),
@@ -2103,8 +2126,13 @@ function DashboardView() {
   const lastFetchedAt = useBrewStore((s) => s.lastFetchedAt);
   const fetchAll = useBrewStore((s) => s.fetchAll);
   const isPro = useLicenseStore((s) => s.isPro);
-  const { stdout } = useStdout4();
-  const columns = stdout?.columns ?? 80;
+  const { columns } = useTerminalSize();
+  const splitRows = useVisibleRows({
+    reservedRows: 18,
+    fallbackReservedRows: 22,
+    minRows: 2
+  });
+  const halfRows = Math.max(1, Math.floor(splitRows / 2));
   useEffect5(() => {
     fetchAll();
   }, []);
@@ -2195,20 +2223,23 @@ function DashboardView() {
     !errors.outdated && outdated.formulae.length > 0 && /* @__PURE__ */ jsxs11(Box9, { flexDirection: "column", marginTop: SPACING.xs, children: [
       /* @__PURE__ */ jsx13(SectionHeader, { emoji: "\u{1F4E6}", title: t("dashboard_outdatedPackages"), gradient: GRADIENTS.fire }),
       /* @__PURE__ */ jsxs11(Box9, { paddingLeft: SPACING.sm, flexDirection: "column", children: [
-        outdated.formulae.slice(0, 10).map((pkg) => /* @__PURE__ */ jsxs11(Box9, { gap: SPACING.xs, children: [
+        outdated.formulae.slice(0, halfRows).map((pkg) => /* @__PURE__ */ jsxs11(Box9, { gap: SPACING.xs, children: [
           /* @__PURE__ */ jsx13(Text12, { color: COLORS.text, children: pkg.name }),
           /* @__PURE__ */ jsx13(VersionArrow, { current: pkg.installed_versions[0] ?? "", latest: pkg.current_version })
         ] }, pkg.name)),
-        outdated.formulae.length > 10 && /* @__PURE__ */ jsx13(Text12, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: outdated.formulae.length - 10 }) })
+        outdated.formulae.length > halfRows && /* @__PURE__ */ jsx13(Text12, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: outdated.formulae.length - halfRows }) })
       ] })
     ] }),
     !errors.services && errorServices > 0 && /* @__PURE__ */ jsxs11(Box9, { flexDirection: "column", marginTop: SPACING.xs, children: [
       /* @__PURE__ */ jsx13(SectionHeader, { emoji: "\u26A0\uFE0F", title: t("dashboard_serviceErrors"), color: COLORS.error }),
-      /* @__PURE__ */ jsx13(Box9, { paddingLeft: SPACING.sm, flexDirection: "column", children: errorServiceList.map((s) => /* @__PURE__ */ jsxs11(Box9, { gap: SPACING.xs, children: [
-        /* @__PURE__ */ jsx13(StatusBadge, { label: t("badge_error"), variant: "error" }),
-        /* @__PURE__ */ jsx13(Text12, { children: s.name }),
-        s.exit_code != null && /* @__PURE__ */ jsx13(Text12, { color: COLORS.muted, children: t("common_exit", { code: s.exit_code }) })
-      ] }, s.name)) })
+      /* @__PURE__ */ jsxs11(Box9, { paddingLeft: SPACING.sm, flexDirection: "column", children: [
+        errorServiceList.slice(0, halfRows).map((s) => /* @__PURE__ */ jsxs11(Box9, { gap: SPACING.xs, children: [
+          /* @__PURE__ */ jsx13(StatusBadge, { label: t("badge_error"), variant: "error" }),
+          /* @__PURE__ */ jsx13(Text12, { children: s.name }),
+          s.exit_code != null && /* @__PURE__ */ jsx13(Text12, { color: COLORS.muted, children: t("common_exit", { code: s.exit_code }) })
+        ] }, s.name)),
+        errorServiceList.length > halfRows && /* @__PURE__ */ jsx13(Text12, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: errorServiceList.length - halfRows }) })
+      ] })
     ] }),
     isPro() && /* @__PURE__ */ jsx13(ProStatusPanel, {})
   ] });
@@ -2347,8 +2378,8 @@ function ConfirmDialog({ message, onConfirm, onCancel }) {
     else if (input === "n" || input === "N") onCancel();
     else if (key.escape) onCancel();
   });
-  return /* @__PURE__ */ jsxs13(Box11, { borderStyle: "double", borderColor: COLORS.purple, paddingX: SPACING.sm, paddingY: SPACING.xs, flexDirection: "column", children: [
-    /* @__PURE__ */ jsx15(Text14, { bold: true, color: COLORS.text, children: message }),
+  return /* @__PURE__ */ jsxs13(Box11, { borderStyle: "double", borderColor: COLORS.purple, paddingX: SPACING.sm, paddingY: SPACING.xs, flexDirection: "column", flexShrink: 1, children: [
+    /* @__PURE__ */ jsx15(Text14, { bold: true, color: COLORS.text, wrap: "wrap", children: message }),
     /* @__PURE__ */ jsxs13(Box11, { marginTop: SPACING.xs, children: [
       /* @__PURE__ */ jsx15(Text14, { color: COLORS.success, children: t("confirm_yes") }),
       /* @__PURE__ */ jsx15(Text14, { children: " / " }),
@@ -2405,18 +2436,6 @@ function SelectableRow({ isCurrent, children, gap = 1 }) {
   ] });
 }
 
-// src/hooks/use-visible-rows.ts
-function useVisibleRows({
-  reservedRows,
-  fallbackReservedRows = reservedRows,
-  minRows = 3
-}) {
-  const { height: contentHeight } = useContentSize();
-  const { rows: terminalRows } = useTerminalSize();
-  const availableRows = contentHeight > 0 ? contentHeight - reservedRows : terminalRows - fallbackReservedRows;
-  return Math.max(minRows, Math.floor(availableRows));
-}
-
 // src/views/installed.tsx
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function InstalledView() {
@@ -2431,8 +2450,9 @@ function InstalledView() {
   const containerRef = useRef3(null);
   const { width: containerWidth } = useContainerSize(containerRef);
   const columns = containerWidth > 0 ? containerWidth : 80;
-  const nameWidth = Math.floor(columns * 0.35);
-  const versionWidth = Math.floor(columns * 0.15);
+  const nameWidth = Math.max(12, Math.floor(columns * 0.35));
+  const versionWidth = Math.max(8, Math.floor(columns * 0.15));
+  const descWidth = Math.max(10, columns - nameWidth - versionWidth - 8);
   const [filter, setFilter] = useState6("");
   const [cursor, setCursor] = useState6(0);
   const [tab, setTab] = useState6("formulae");
@@ -2617,7 +2637,7 @@ function InstalledView() {
           item.pinned && /* @__PURE__ */ jsx19(StatusBadge, { label: t("badge_pinned"), variant: "info" }),
           item.kegOnly && /* @__PURE__ */ jsx19(StatusBadge, { label: t("badge_kegOnly"), variant: "muted" }),
           item.installedAsDependency && /* @__PURE__ */ jsx19(StatusBadge, { label: t("badge_dep"), variant: "muted" }),
-          !item.outdated && !item.pinned && !item.kegOnly && !item.installedAsDependency && /* @__PURE__ */ jsx19(Text18, { color: COLORS.textSecondary, dimColor: true, children: truncate(item.desc, 30) })
+          !item.outdated && !item.pinned && !item.kegOnly && !item.installedAsDependency && /* @__PURE__ */ jsx19(Text18, { color: COLORS.textSecondary, dimColor: true, children: truncate(item.desc, descWidth) })
         ] }, item.name);
       }),
       start + MAX_VISIBLE_ROWS < allItems.length && /* @__PURE__ */ jsxs16(Text18, { color: COLORS.textSecondary, dimColor: true, children: [
@@ -3259,11 +3279,14 @@ function PackageInfoView() {
       ] }),
       formula.dependencies.length > 0 && /* @__PURE__ */ jsxs19(Box18, { flexDirection: "column", children: [
         /* @__PURE__ */ jsx22(SectionHeader, { emoji: "\u{1F517}", title: t("pkgInfo_dependencies", { count: formula.dependencies.length }), gradient: GRADIENTS.ocean }),
-        /* @__PURE__ */ jsx22(Box18, { paddingLeft: SPACING.sm, flexWrap: "wrap", columnGap: 2, children: formula.dependencies.map((dep) => /* @__PURE__ */ jsx22(Text21, { color: COLORS.muted, children: dep }, dep)) })
+        /* @__PURE__ */ jsxs19(Box18, { paddingLeft: SPACING.sm, flexWrap: "wrap", columnGap: 2, children: [
+          formula.dependencies.slice(0, 30).map((dep) => /* @__PURE__ */ jsx22(Text21, { color: COLORS.muted, children: dep }, dep)),
+          formula.dependencies.length > 30 && /* @__PURE__ */ jsx22(Text21, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: formula.dependencies.length - 30 }) })
+        ] })
       ] }),
       formula.caveats && /* @__PURE__ */ jsxs19(Box18, { flexDirection: "column", children: [
         /* @__PURE__ */ jsx22(SectionHeader, { emoji: "\u26A0\uFE0F", title: t("pkgInfo_caveats"), color: COLORS.warning }),
-        /* @__PURE__ */ jsx22(Box18, { borderStyle: "round", borderColor: COLORS.warning, paddingX: SPACING.sm, children: /* @__PURE__ */ jsx22(Text21, { color: COLORS.warning, children: formula.caveats }) })
+        /* @__PURE__ */ jsx22(Box18, { borderStyle: "round", borderColor: COLORS.warning, paddingX: SPACING.sm, children: /* @__PURE__ */ jsx22(Text21, { color: COLORS.warning, wrap: "wrap", children: formula.caveats }) })
       ] })
     ] }),
     /* @__PURE__ */ jsx22(Box18, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs19(Text21, { color: COLORS.textSecondary, children: [
@@ -3275,8 +3298,8 @@ function PackageInfoView() {
 }
 
 // src/views/services.tsx
-import { useEffect as useEffect13, useState as useState10 } from "react";
-import { Box as Box19, Text as Text22, useStdout as useStdout5 } from "ink";
+import { useEffect as useEffect13, useRef as useRef7, useState as useState10 } from "react";
+import { Box as Box19, Text as Text22 } from "ink";
 import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
 var STATUS_VARIANTS = {
   started: "success",
@@ -3296,10 +3319,11 @@ function ServicesView() {
   const [actionInProgress, setActionInProgress] = useState10(false);
   const [confirmAction, setConfirmAction] = useState10(null);
   const [lastError, setLastError] = useState10(null);
-  const { stdout } = useStdout5();
-  const cols = stdout?.columns ?? 80;
-  const svcNameWidth = Math.floor(cols * 0.35);
-  const svcStatusWidth = Math.floor(cols * 0.15);
+  const containerRef = useRef7(null);
+  const { width: containerWidth } = useContainerSize(containerRef);
+  const cols = containerWidth > 0 ? containerWidth : 80;
+  const svcNameWidth = Math.max(12, Math.floor(cols * 0.35));
+  const svcStatusWidth = Math.max(8, Math.floor(cols * 0.15));
   const MAX_VISIBLE_ROWS = useVisibleRows({
     reservedRows: lastError || actionInProgress ? 8 : 6,
     fallbackReservedRows: lastError || actionInProgress ? 16 : 14,
@@ -3347,7 +3371,7 @@ function ServicesView() {
   }
   const start = Math.max(0, cursor - Math.floor(MAX_VISIBLE_ROWS / 2));
   const visible = services.slice(start, start + MAX_VISIBLE_ROWS);
-  return /* @__PURE__ */ jsxs20(Box19, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs20(Box19, { flexDirection: "column", ref: containerRef, children: [
     /* @__PURE__ */ jsx23(SectionHeader, { emoji: "\u2699\uFE0F", title: t("services_titleCount", { count: services.length }), gradient: GRADIENTS.ocean }),
     confirmAction && /* @__PURE__ */ jsx23(Box19, { marginY: SPACING.xs, children: /* @__PURE__ */ jsx23(
       ConfirmDialog,
@@ -3385,7 +3409,7 @@ function ServicesView() {
         const idx = start + i;
         const isCurrent = idx === cursor;
         return /* @__PURE__ */ jsxs20(SelectableRow, { isCurrent, children: [
-          /* @__PURE__ */ jsx23(Text22, { bold: isCurrent, inverse: isCurrent, color: isCurrent ? COLORS.text : COLORS.muted, children: svc.name.padEnd(svcNameWidth - 2) }),
+          /* @__PURE__ */ jsx23(Text22, { bold: isCurrent, inverse: isCurrent, color: isCurrent ? COLORS.text : COLORS.muted, children: truncate(svc.name, svcNameWidth - 2).padEnd(svcNameWidth - 2) }),
           /* @__PURE__ */ jsx23(StatusBadge, { label: svc.status, variant: STATUS_VARIANTS[svc.status] }),
           /* @__PURE__ */ jsx23(Text22, { color: COLORS.muted, children: svc.user ?? "-" }),
           svc.exit_code != null && svc.exit_code !== 0 && /* @__PURE__ */ jsx23(Text22, { color: COLORS.error, children: t("common_exit", { code: svc.exit_code }) })
@@ -3407,12 +3431,18 @@ function ServicesView() {
 }
 
 // src/views/doctor.tsx
-import { useEffect as useEffect14, useRef as useRef7 } from "react";
+import { useEffect as useEffect14, useRef as useRef8, useState as useState11 } from "react";
 import { Box as Box20, Text as Text23 } from "ink";
 import { jsx as jsx24, jsxs as jsxs21 } from "react/jsx-runtime";
 function DoctorView() {
   const { doctorWarnings, doctorClean, loading, errors, fetchDoctor } = useBrewStore();
-  const mountedRef = useRef7(true);
+  const [cursor, setCursor] = useState11(0);
+  const visibleWarnings = useVisibleRows({
+    reservedRows: 6,
+    fallbackReservedRows: 14,
+    minRows: 1
+  });
+  const mountedRef = useRef8(true);
   useEffect14(() => {
     mountedRef.current = true;
     return () => {
@@ -3422,27 +3452,42 @@ function DoctorView() {
   useEffect14(() => {
     fetchDoctor();
   }, []);
-  useViewInput((input) => {
-    if (input === "r" || input === "1") void fetchDoctor();
+  useViewInput((input, key) => {
+    if (input === "r" || input === "1") {
+      void fetchDoctor();
+      return;
+    }
+    if (input === "j" || key.downArrow) setCursor((c) => Math.min(c + 1, Math.max(0, doctorWarnings.length - 1)));
+    else if (input === "k" || key.upArrow) setCursor((c) => Math.max(c - 1, 0));
   });
   if (loading.doctor) return /* @__PURE__ */ jsx24(Loading, { message: t("loading_doctor") });
   if (errors.doctor) return /* @__PURE__ */ jsx24(ErrorMessage, { message: errors.doctor });
+  const start = Math.max(0, cursor - Math.floor(visibleWarnings / 2));
+  const visible = doctorWarnings.slice(start, start + visibleWarnings);
   return /* @__PURE__ */ jsxs21(Box20, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx24(SectionHeader, { emoji: "\u{1FA7A}", title: t("doctor_title"), gradient: GRADIENTS.emerald }),
     /* @__PURE__ */ jsxs21(Box20, { flexDirection: "column", marginTop: SPACING.xs, children: [
       doctorClean && /* @__PURE__ */ jsx24(ResultBanner, { status: "success", message: `\u2714 ${t("doctor_clean")}` }),
       doctorClean === false && doctorWarnings.length === 0 && /* @__PURE__ */ jsx24(Text23, { color: COLORS.warning, children: t("doctor_warningsNotCaptured") }),
-      doctorWarnings.map((warning, i) => (
-        // FE-004: Improved React key
-        /* @__PURE__ */ jsx24(Box20, { flexDirection: "column", marginBottom: SPACING.xs, borderStyle: "single", borderColor: COLORS.warning, paddingX: SPACING.xs, children: warning.split("\n").map((line, j) => /* @__PURE__ */ jsx24(Text23, { color: j === 0 ? COLORS.warning : COLORS.muted, children: line }, `warning-${i}-${j}-${line.slice(0, 20)}`)) }, `warning-${i}-${warning.slice(0, 20)}`)
-      ))
+      start > 0 && /* @__PURE__ */ jsxs21(Text23, { color: COLORS.textSecondary, dimColor: true, children: [
+        "  ",
+        t("scroll_moreAbove", { count: start })
+      ] }),
+      visible.map((warning, i) => {
+        const idx = start + i;
+        return /* @__PURE__ */ jsx24(Box20, { flexDirection: "column", marginBottom: SPACING.xs, borderStyle: "single", borderColor: idx === cursor ? COLORS.gold : COLORS.warning, paddingX: SPACING.xs, children: warning.split("\n").map((line, j) => /* @__PURE__ */ jsx24(Text23, { color: j === 0 ? COLORS.warning : COLORS.muted, wrap: "wrap", children: line }, `warning-${idx}-${j}-${line.slice(0, 20)}`)) }, `warning-${idx}-${warning.slice(0, 20)}`);
+      }),
+      start + visibleWarnings < doctorWarnings.length && /* @__PURE__ */ jsxs21(Text23, { color: COLORS.textSecondary, dimColor: true, children: [
+        "  ",
+        t("scroll_moreBelow", { count: doctorWarnings.length - start - visibleWarnings })
+      ] })
     ] }),
     /* @__PURE__ */ jsx24(Box20, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsx24(Text23, { color: COLORS.text, bold: true, children: doctorWarnings.length > 0 ? tp("plural_warnings", doctorWarnings.length) : "" }) })
   ] });
 }
 
 // src/views/profiles.tsx
-import { useEffect as useEffect15, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect15, useRef as useRef9, useState as useState12 } from "react";
 import { Box as Box25 } from "ink";
 
 // src/stores/profile-store.ts
@@ -3705,18 +3750,33 @@ function ProfileListMode({ profileNames, cursor, confirmDelete, loadError, onCon
 import { Box as Box22, Text as Text25 } from "ink";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 function ProfileDetailMode({ profile }) {
+  const totalRows = useVisibleRows({
+    reservedRows: 7,
+    fallbackReservedRows: 14,
+    minRows: 2
+  });
+  const total = profile.formulae.length + profile.casks.length;
+  const formulaeBudget = total === 0 ? 0 : Math.min(profile.formulae.length, Math.max(1, Math.round(profile.formulae.length / total * totalRows)));
+  const casksBudget = Math.max(0, totalRows - formulaeBudget);
+  const visibleFormulae = profile.formulae.slice(0, formulaeBudget);
+  const visibleCasks = profile.casks.slice(0, casksBudget);
+  const formulaeHidden = profile.formulae.length - visibleFormulae.length;
+  const casksHidden = profile.casks.length - visibleCasks.length;
   return /* @__PURE__ */ jsxs23(Box22, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx26(Text25, { bold: true, color: COLORS.gold, children: profile.name }),
-    /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, children: profile.description }),
+    /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, wrap: "wrap", children: profile.description }),
     /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, children: t("profiles_created", { date: formatDate(profile.createdAt) }) }),
     /* @__PURE__ */ jsxs23(Box22, { marginTop: SPACING.xs, flexDirection: "column", children: [
       /* @__PURE__ */ jsx26(Text25, { bold: true, children: t("profiles_formulaeCount", { count: profile.formulae.length }) }),
       /* @__PURE__ */ jsxs23(Box22, { paddingLeft: SPACING.sm, flexDirection: "column", children: [
-        profile.formulae.slice(0, 30).map((f) => /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, children: f }, f)),
-        profile.formulae.length > 30 && /* @__PURE__ */ jsx26(Text25, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: profile.formulae.length - 30 }) })
+        visibleFormulae.map((f) => /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, children: f }, f)),
+        formulaeHidden > 0 && /* @__PURE__ */ jsx26(Text25, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: formulaeHidden }) })
       ] }),
       /* @__PURE__ */ jsx26(Text25, { bold: true, children: t("profiles_casksCount", { count: profile.casks.length }) }),
-      /* @__PURE__ */ jsx26(Box22, { paddingLeft: SPACING.sm, flexDirection: "column", children: profile.casks.map((c) => /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, children: c }, c)) })
+      /* @__PURE__ */ jsxs23(Box22, { paddingLeft: SPACING.sm, flexDirection: "column", children: [
+        visibleCasks.map((c) => /* @__PURE__ */ jsx26(Text25, { color: COLORS.muted, children: c }, c)),
+        casksHidden > 0 && /* @__PURE__ */ jsx26(Text25, { color: COLORS.textSecondary, italic: true, children: t("common_andMore", { count: casksHidden }) })
+      ] })
     ] }),
     /* @__PURE__ */ jsx26(Box22, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs23(Text25, { color: COLORS.textSecondary, children: [
       "esc:",
@@ -3799,19 +3859,19 @@ function ProfileEditDesc({ name, defaultDesc, loadError, onSubmit }) {
 import { jsx as jsx29, jsxs as jsxs26 } from "react/jsx-runtime";
 function ProfilesView() {
   const { profileNames, selectedProfile, loading, loadError, fetchProfiles, loadProfile: loadProfile2, exportCurrent, deleteProfile: deleteProfile2, updateProfile: updateProfile2 } = useProfileStore();
-  const [cursor, setCursor] = useState11(0);
-  const [mode, setMode] = useState11("list");
-  const [newName, setNewName] = useState11("");
-  const [confirmDelete, setConfirmDelete] = useState11(false);
-  const [editName, setEditName] = useState11("");
-  const [editDesc, setEditDesc] = useState11("");
-  const [importLines, setImportLines] = useState11([]);
-  const [importRunning, setImportRunning] = useState11(false);
-  const [importHadError, setImportHadError] = useState11(false);
-  const [importProfile2, setImportProfile] = useState11(null);
+  const [cursor, setCursor] = useState12(0);
+  const [mode, setMode] = useState12("list");
+  const [newName, setNewName] = useState12("");
+  const [confirmDelete, setConfirmDelete] = useState12(false);
+  const [editName, setEditName] = useState12("");
+  const [editDesc, setEditDesc] = useState12("");
+  const [importLines, setImportLines] = useState12([]);
+  const [importRunning, setImportRunning] = useState12(false);
+  const [importHadError, setImportHadError] = useState12(false);
+  const [importProfile2, setImportProfile] = useState12(null);
   const { openModal, closeModal } = useModalStore();
-  const importGenRef = useRef8(null);
-  const mountedRef = useRef8(true);
+  const importGenRef = useRef9(null);
+  const mountedRef = useRef9(true);
   useEffect15(() => {
     fetchProfiles();
   }, []);
@@ -3999,7 +4059,7 @@ function ProfilesView() {
 }
 
 // src/views/smart-cleanup.tsx
-import { useEffect as useEffect16, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect16, useRef as useRef10, useState as useState13 } from "react";
 import { Box as Box26, Text as Text28 } from "ink";
 
 // src/stores/cleanup-store.ts
@@ -4123,12 +4183,17 @@ var useCleanupStore = create10((set, get) => ({
 import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 function SmartCleanupView() {
   const { summary, selected, loading, error, analyze, toggleSelect, selectAll } = useCleanupStore();
-  const [cursor, setCursor] = useState12(0);
-  const [confirmClean, setConfirmClean] = useState12(false);
-  const [confirmForce, setConfirmForce] = useState12(false);
-  const [failedNames, setFailedNames] = useState12([]);
+  const [cursor, setCursor] = useState13(0);
+  const [confirmClean, setConfirmClean] = useState13(false);
+  const [confirmForce, setConfirmForce] = useState13(false);
+  const [failedNames, setFailedNames] = useState13([]);
   const stream = useBrewStream();
-  const hasRefreshed = useRef9(false);
+  const hasRefreshed = useRef10(false);
+  const listRows = useVisibleRows({
+    reservedRows: confirmClean || confirmForce ? 12 : 9,
+    fallbackReservedRows: confirmClean || confirmForce ? 18 : 14,
+    minRows: 1
+  });
   useEffect16(() => {
     analyze();
   }, []);
@@ -4230,32 +4295,45 @@ function SmartCleanupView() {
       )
     ] }),
     candidates.length === 0 && !confirmClean && /* @__PURE__ */ jsx30(ResultBanner, { status: "success", message: `\u2714 ${t("cleanup_systemClean")}` }),
-    candidates.length > 0 && !confirmClean && /* @__PURE__ */ jsxs27(Box26, { flexDirection: "column", children: [
-      candidates.map((c, i) => {
-        const isCurrent = i === cursor;
-        const isSelected = selected.has(c.name);
-        return /* @__PURE__ */ jsxs27(SelectableRow, { isCurrent, children: [
-          /* @__PURE__ */ jsx30(Text28, { color: isSelected ? COLORS.success : COLORS.muted, children: isSelected ? "\u2611" : "\u2610" }),
-          /* @__PURE__ */ jsx30(Text28, { bold: isCurrent, inverse: isCurrent, color: isCurrent ? COLORS.text : COLORS.muted, children: c.name }),
-          /* @__PURE__ */ jsx30(Text28, { color: COLORS.warning, children: c.diskUsageFormatted }),
-          /* @__PURE__ */ jsxs27(Text28, { color: COLORS.textSecondary, children: [
-            "[",
-            c.reason,
-            "]"
-          ] })
-        ] }, c.name);
-      }),
-      /* @__PURE__ */ jsx30(Box26, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs27(Text28, { color: COLORS.text, bold: true, children: [
-        cursor + 1,
-        "/",
-        candidates.length
-      ] }) })
-    ] })
+    candidates.length > 0 && !confirmClean && (() => {
+      const start = Math.max(0, cursor - Math.floor(listRows / 2));
+      const visible = candidates.slice(start, start + listRows);
+      return /* @__PURE__ */ jsxs27(Box26, { flexDirection: "column", children: [
+        start > 0 && /* @__PURE__ */ jsxs27(Text28, { color: COLORS.textSecondary, dimColor: true, children: [
+          "  ",
+          t("scroll_moreAbove", { count: start })
+        ] }),
+        visible.map((c, i) => {
+          const idx = start + i;
+          const isCurrent = idx === cursor;
+          const isSelected = selected.has(c.name);
+          return /* @__PURE__ */ jsxs27(SelectableRow, { isCurrent, children: [
+            /* @__PURE__ */ jsx30(Text28, { color: isSelected ? COLORS.success : COLORS.muted, children: isSelected ? "\u2611" : "\u2610" }),
+            /* @__PURE__ */ jsx30(Text28, { bold: isCurrent, inverse: isCurrent, color: isCurrent ? COLORS.text : COLORS.muted, children: c.name }),
+            /* @__PURE__ */ jsx30(Text28, { color: COLORS.warning, children: c.diskUsageFormatted }),
+            /* @__PURE__ */ jsxs27(Text28, { color: COLORS.textSecondary, children: [
+              "[",
+              c.reason,
+              "]"
+            ] })
+          ] }, c.name);
+        }),
+        start + listRows < candidates.length && /* @__PURE__ */ jsxs27(Text28, { color: COLORS.textSecondary, dimColor: true, children: [
+          "  ",
+          t("scroll_moreBelow", { count: candidates.length - start - listRows })
+        ] }),
+        /* @__PURE__ */ jsx30(Box26, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs27(Text28, { color: COLORS.text, bold: true, children: [
+          cursor + 1,
+          "/",
+          candidates.length
+        ] }) })
+      ] });
+    })()
   ] });
 }
 
 // src/views/history.tsx
-import { useEffect as useEffect17, useState as useState13, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect17, useState as useState14, useMemo as useMemo5 } from "react";
 import { Box as Box27, Text as Text29 } from "ink";
 
 // src/stores/history-store.ts
@@ -4308,12 +4386,12 @@ var ACTION_LABEL_KEYS = {
 var FILTERS = ["all", "install", "uninstall", "upgrade", "upgrade-all"];
 function HistoryView() {
   const { entries, loading, error, fetchHistory, clearHistory: clearHistory2 } = useHistoryStore();
-  const [cursor, setCursor] = useState13(0);
-  const [filter, setFilter] = useState13("all");
-  const [searchQuery, setSearchQuery] = useState13("");
-  const [isSearching, setIsSearching] = useState13(false);
-  const [confirmClear, setConfirmClear] = useState13(false);
-  const [confirmReplay, setConfirmReplay] = useState13(null);
+  const [cursor, setCursor] = useState14(0);
+  const [filter, setFilter] = useState14("all");
+  const [searchQuery, setSearchQuery] = useState14("");
+  const [isSearching, setIsSearching] = useState14(false);
+  const [confirmClear, setConfirmClear] = useState14(false);
+  const [confirmReplay, setConfirmReplay] = useState14(null);
   const stream = useBrewStream();
   const debouncedQuery = useDebounce(searchQuery, 200);
   const { openModal, closeModal } = useModalStore();
@@ -4471,7 +4549,7 @@ function HistoryView() {
 }
 
 // src/views/security-audit.tsx
-import { useEffect as useEffect18, useState as useState14 } from "react";
+import { useEffect as useEffect18, useState as useState15 } from "react";
 import { Box as Box28, Text as Text30 } from "ink";
 import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 var SEVERITY_COLORS = {
@@ -4494,9 +4572,9 @@ function isNetworkError(msg) {
 function SecurityAuditView() {
   const { summary, loading, error, scan, cachedAt } = useSecurityStore();
   const navigate = useNavigationStore((s) => s.navigate);
-  const [cursor, setCursor] = useState14(0);
-  const [expandedPkg, setExpandedPkg] = useState14(null);
-  const [confirmUpgrade, setConfirmUpgrade] = useState14(null);
+  const [cursor, setCursor] = useState15(0);
+  const [expandedPkg, setExpandedPkg] = useState15(null);
+  const [confirmUpgrade, setConfirmUpgrade] = useState15(null);
   const stream = useBrewStream();
   useEffect18(() => {
     scan();
@@ -4603,7 +4681,7 @@ function SecurityAuditView() {
 }
 
 // src/views/account.tsx
-import { useState as useState15 } from "react";
+import { useState as useState16 } from "react";
 import { Box as Box29, Text as Text31 } from "ink";
 import { TextInput as TextInput5 } from "@inkjs/ui";
 
@@ -4685,13 +4763,13 @@ async function redeemPromoCode(code) {
 import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 function AccountView() {
   const { status, license, deactivate: deactivate2, revalidate: revalidate2, degradation } = useLicenseStore();
-  const [confirmDeactivate, setConfirmDeactivate] = useState15(false);
-  const [deactivating, setDeactivating] = useState15(false);
-  const [deactivateError, setDeactivateError] = useState15(null);
-  const [promoMode, setPromoMode] = useState15(false);
-  const [promoLoading, setPromoLoading] = useState15(false);
-  const [promoResult, setPromoResult] = useState15(null);
-  const [revalidating, setRevalidating] = useState15(false);
+  const [confirmDeactivate, setConfirmDeactivate] = useState16(false);
+  const [deactivating, setDeactivating] = useState16(false);
+  const [deactivateError, setDeactivateError] = useState16(null);
+  const [promoMode, setPromoMode] = useState16(false);
+  const [promoLoading, setPromoLoading] = useState16(false);
+  const [promoResult, setPromoResult] = useState16(null);
+  const [revalidating, setRevalidating] = useState16(false);
   useViewInput((input, key) => {
     if (confirmDeactivate || deactivating || promoMode || revalidating) {
       if (key.escape && promoMode) {
@@ -4776,16 +4854,14 @@ function AccountView() {
           /* @__PURE__ */ jsx33(Text31, { children: formatDate(license.activatedAt) })
         ] })
       ] }),
-      status === "free" && /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", marginTop: SPACING.sm, borderStyle: "round", borderColor: COLORS.brand, paddingX: SPACING.sm, paddingY: SPACING.xs, children: [
+      status === "free" && /* @__PURE__ */ jsxs30(Box29, { flexDirection: "column", marginTop: SPACING.xs, borderStyle: "round", borderColor: COLORS.brand, paddingX: SPACING.sm, paddingY: SPACING.none, flexShrink: 1, children: [
         /* @__PURE__ */ jsxs30(Text31, { bold: true, color: COLORS.brand, children: [
           "\u2B50",
           " ",
           t("account_upgradeTitle")
         ] }),
-        /* @__PURE__ */ jsx33(Text31, { children: " " }),
-        /* @__PURE__ */ jsx33(Text31, { children: t("account_unlockDesc") }),
+        /* @__PURE__ */ jsx33(Text31, { wrap: "wrap", children: t("account_unlockDesc") }),
         /* @__PURE__ */ jsx33(Text31, { color: COLORS.info, bold: true, children: t("account_pricing") }),
-        /* @__PURE__ */ jsx33(Text31, { children: " " }),
         /* @__PURE__ */ jsxs30(Text31, { color: COLORS.muted, children: [
           t("upgrade_buyAt"),
           " ",
@@ -4837,13 +4913,13 @@ function AccountView() {
       status === "pro" || status === "team" || status === "expired" ? `v ${t("hint_revalidate")}  ` : "",
       revalidating ? t("account_revalidating") : "",
       " ",
-      t("app_version", { version: "1.0.0" })
+      t("app_version", { version: "1.1.0" })
     ] }) })
   ] });
 }
 
 // src/views/rollback.tsx
-import { useCallback as useCallback3, useEffect as useEffect19, useRef as useRef10, useState as useState16 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect19, useRef as useRef11, useState as useState17 } from "react";
 import { Box as Box30, Text as Text32 } from "ink";
 
 // src/stores/rollback-store.ts
@@ -5082,6 +5158,14 @@ function actionPrefix(action) {
 }
 function PlanView({ plan }) {
   const executableCount = plan.actions.filter((a) => a.strategy !== "unavailable" && a.action !== "remove").length;
+  const reservedForWarnings = Math.min(plan.warnings.length, 3) * 2;
+  const actionsBudget = useVisibleRows({
+    reservedRows: 6 + reservedForWarnings,
+    fallbackReservedRows: 14 + reservedForWarnings,
+    minRows: 2
+  });
+  const visibleActions = plan.actions.slice(0, actionsBudget);
+  const hiddenActions = plan.actions.length - visibleActions.length;
   return /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", marginTop: SPACING.xs, children: [
     /* @__PURE__ */ jsxs31(Box30, { marginBottom: SPACING.xs, children: [
       /* @__PURE__ */ jsxs31(Text32, { color: COLORS.text, bold: true, children: [
@@ -5091,7 +5175,7 @@ function PlanView({ plan }) {
       /* @__PURE__ */ jsx34(Text32, { color: COLORS.textSecondary, children: plan.snapshotDate })
     ] }),
     plan.actions.length === 0 && /* @__PURE__ */ jsx34(ResultBanner, { status: "success", message: t("rollback_diff_empty") }),
-    plan.actions.map((a) => /* @__PURE__ */ jsxs31(Box30, { children: [
+    visibleActions.map((a) => /* @__PURE__ */ jsxs31(Box30, { children: [
       /* @__PURE__ */ jsxs31(Text32, { color: actionColor(a), children: [
         actionPrefix(a),
         " "
@@ -5114,10 +5198,18 @@ function PlanView({ plan }) {
         "]"
       ] })
     ] }, a.packageName + a.action)),
-    plan.warnings.map((w) => /* @__PURE__ */ jsx34(Box30, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs31(Text32, { color: COLORS.warning, children: [
+    hiddenActions > 0 && /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, dimColor: true, children: [
+      "  ",
+      t("scroll_moreBelow", { count: hiddenActions })
+    ] }),
+    plan.warnings.slice(0, 3).map((w) => /* @__PURE__ */ jsx34(Box30, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs31(Text32, { color: COLORS.warning, wrap: "wrap", children: [
       "\u26A0 ",
       w
     ] }) }, w)),
+    plan.warnings.length > 3 && /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, dimColor: true, children: [
+      "  ",
+      t("common_andMore", { count: plan.warnings.length - 3 })
+    ] }),
     /* @__PURE__ */ jsx34(Box30, { marginTop: SPACING.xs, children: plan.canExecute ? /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, children: [
       "enter:",
       t("rollback_confirm", { count: String(executableCount) }),
@@ -5133,13 +5225,18 @@ function PlanView({ plan }) {
 function RollbackView() {
   const isPro = useLicenseStore((s) => s.isPro);
   const { snapshots, loading, error, plan, planLoading, planError, fetchSnapshots, selectSnapshot, clearPlan } = useRollbackStore();
-  const [cursor, setCursor] = useState16(0);
-  const [phase, setPhase] = useState16("list");
-  const [streamLines, setStreamLines] = useState16([]);
-  const [streamRunning, setStreamRunning] = useState16(false);
-  const [streamError, setStreamError] = useState16(null);
-  const generatorRef = useRef10(null);
-  const mountedRef = useRef10(true);
+  const [cursor, setCursor] = useState17(0);
+  const [phase, setPhase] = useState17("list");
+  const [streamLines, setStreamLines] = useState17([]);
+  const [streamRunning, setStreamRunning] = useState17(false);
+  const [streamError, setStreamError] = useState17(null);
+  const generatorRef = useRef11(null);
+  const mountedRef = useRef11(true);
+  const snapshotRows = useVisibleRows({
+    reservedRows: 6,
+    fallbackReservedRows: 14,
+    minRows: 1
+  });
   useEffect19(() => {
     mountedRef.current = true;
     return () => {
@@ -5232,22 +5329,39 @@ function RollbackView() {
   return /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", children: [
     /* @__PURE__ */ jsx34(SectionHeader, { emoji: "\u23EA", title: t("rollback_title"), gradient: GRADIENTS.gold }),
     snapshots.length === 0 && /* @__PURE__ */ jsx34(Box30, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsx34(ResultBanner, { status: "info", message: t("rollback_no_snapshots") }) }),
-    phase === "list" && snapshots.length > 0 && /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", marginTop: SPACING.xs, children: [
-      /* @__PURE__ */ jsx34(Text32, { color: COLORS.textSecondary, dimColor: true, children: t("rollback_select_snapshot") }),
-      /* @__PURE__ */ jsx34(Box30, { flexDirection: "column", marginTop: SPACING.xs, children: snapshots.map((s, i) => /* @__PURE__ */ jsxs31(SelectableRow, { isCurrent: i === cursor, children: [
-        /* @__PURE__ */ jsx34(Text32, { bold: i === cursor, color: i === cursor ? COLORS.text : COLORS.muted, children: s.label ?? t("rollback_snapshot_auto") }),
-        /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, children: [
-          " \u2014 ",
-          new Date(s.capturedAt).toLocaleString()
-        ] }),
-        /* @__PURE__ */ jsxs31(Text32, { color: COLORS.muted, dimColor: true, children: [
-          " ",
-          "(",
-          tp("packages", s.formulae.length + s.casks.length),
-          ")"
+    phase === "list" && snapshots.length > 0 && (() => {
+      const start = Math.max(0, cursor - Math.floor(snapshotRows / 2));
+      const visible = snapshots.slice(start, start + snapshotRows);
+      return /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", marginTop: SPACING.xs, children: [
+        /* @__PURE__ */ jsx34(Text32, { color: COLORS.textSecondary, dimColor: true, children: t("rollback_select_snapshot") }),
+        /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", marginTop: SPACING.xs, children: [
+          start > 0 && /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, dimColor: true, children: [
+            "  ",
+            t("scroll_moreAbove", { count: start })
+          ] }),
+          visible.map((s, vi) => {
+            const i = start + vi;
+            return /* @__PURE__ */ jsxs31(SelectableRow, { isCurrent: i === cursor, children: [
+              /* @__PURE__ */ jsx34(Text32, { bold: i === cursor, color: i === cursor ? COLORS.text : COLORS.muted, children: s.label ?? t("rollback_snapshot_auto") }),
+              /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, children: [
+                " \u2014 ",
+                new Date(s.capturedAt).toLocaleString()
+              ] }),
+              /* @__PURE__ */ jsxs31(Text32, { color: COLORS.muted, dimColor: true, children: [
+                " ",
+                "(",
+                tp("packages", s.formulae.length + s.casks.length),
+                ")"
+              ] })
+            ] }, s.capturedAt);
+          }),
+          start + snapshotRows < snapshots.length && /* @__PURE__ */ jsxs31(Text32, { color: COLORS.textSecondary, dimColor: true, children: [
+            "  ",
+            t("scroll_moreBelow", { count: snapshots.length - start - snapshotRows })
+          ] })
         ] })
-      ] }, s.capturedAt)) })
-    ] }),
+      ] });
+    })(),
     phase === "plan" && /* @__PURE__ */ jsxs31(Box30, { flexDirection: "column", children: [
       planLoading && /* @__PURE__ */ jsx34(Loading, { message: t("rollback_capturing") }),
       planError && /* @__PURE__ */ jsx34(ErrorMessage, { message: planError }),
@@ -5267,7 +5381,7 @@ function RollbackView() {
 }
 
 // src/views/brewfile.tsx
-import { useCallback as useCallback4, useEffect as useEffect20, useRef as useRef11, useState as useState17 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect20, useRef as useRef12, useState as useState18 } from "react";
 import { Box as Box31, Text as Text33 } from "ink";
 import { TextInput as TextInput6 } from "@inkjs/ui";
 import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -5313,13 +5427,13 @@ function DriftSummary({ drift }) {
 function BrewfileView() {
   const isPro = useLicenseStore((s) => s.isPro);
   const { schema, drift, loading, driftLoading, error, load, createFromCurrent } = useBrewfileStore();
-  const [phase, setPhase] = useState17("overview");
-  const [streamLines, setStreamLines] = useState17([]);
-  const [streamRunning, setStreamRunning] = useState17(false);
-  const [streamError, setStreamError] = useState17(null);
-  const [resultMessage, setResultMessage] = useState17("");
-  const generatorRef = useRef11(null);
-  const mountedRef = useRef11(true);
+  const [phase, setPhase] = useState18("overview");
+  const [streamLines, setStreamLines] = useState18([]);
+  const [streamRunning, setStreamRunning] = useState18(false);
+  const [streamError, setStreamError] = useState18(null);
+  const [resultMessage, setResultMessage] = useState18("");
+  const generatorRef = useRef12(null);
+  const mountedRef = useRef12(true);
   useEffect20(() => {
     mountedRef.current = true;
     void load();
@@ -5496,7 +5610,7 @@ function BrewfileView() {
 }
 
 // src/views/sync.tsx
-import { useCallback as useCallback5, useEffect as useEffect21, useState as useState18 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect21, useState as useState19 } from "react";
 import { Box as Box32, Text as Text34 } from "ink";
 import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
 function OverviewSection({
@@ -5547,8 +5661,22 @@ function ConflictsList({
   entries,
   cursor
 }) {
+  const availableRows = useVisibleRows({
+    reservedRows: 8,
+    fallbackReservedRows: 14,
+    minRows: 4
+  });
+  const perEntryRows = 4;
+  const maxEntries = Math.max(1, Math.floor(availableRows / perEntryRows));
+  const start = Math.max(0, cursor - Math.floor(maxEntries / 2));
+  const visible = entries.slice(start, start + maxEntries);
   return /* @__PURE__ */ jsxs33(Box32, { flexDirection: "column", marginTop: SPACING.xs, children: [
-    entries.map((entry, i) => {
+    start > 0 && /* @__PURE__ */ jsxs33(Text34, { color: COLORS.textSecondary, dimColor: true, children: [
+      "  ",
+      t("scroll_moreAbove", { count: start })
+    ] }),
+    visible.map((entry, vi) => {
+      const i = start + vi;
       const { conflict, resolution } = entry;
       const isActive = i === cursor;
       return /* @__PURE__ */ jsxs33(Box32, { flexDirection: "column", marginBottom: SPACING.xs, children: [
@@ -5586,6 +5714,10 @@ function ConflictsList({
         ] })
       ] }, `${conflict.packageName}-${conflict.remoteMachine}`);
     }),
+    start + maxEntries < entries.length && /* @__PURE__ */ jsxs33(Text34, { color: COLORS.textSecondary, dimColor: true, children: [
+      "  ",
+      t("scroll_moreBelow", { count: entries.length - start - maxEntries })
+    ] }),
     /* @__PURE__ */ jsx36(Box32, { marginTop: SPACING.xs, children: /* @__PURE__ */ jsxs33(Text34, { color: COLORS.textSecondary, children: [
       "j/k:",
       t("hint_navigate"),
@@ -5604,10 +5736,10 @@ function SyncView() {
   const isPro = useLicenseStore((s) => s.isPro);
   const navigate = useNavigationStore((s) => s.navigate);
   const { config, lastResult, conflicts, loading, error, initialize, syncNow, resolveConflicts } = useSyncStore();
-  const [phase, setPhase] = useState18("overview");
-  const [syncError, setSyncError] = useState18(null);
-  const [conflictEntries, setConflictEntries] = useState18([]);
-  const [cursor, setCursor] = useState18(0);
+  const [phase, setPhase] = useState19("overview");
+  const [syncError, setSyncError] = useState19(null);
+  const [conflictEntries, setConflictEntries] = useState19([]);
+  const [cursor, setCursor] = useState19(0);
   useEffect21(() => {
     void initialize(isPro());
   }, []);
@@ -5776,7 +5908,7 @@ function SyncView() {
 }
 
 // src/views/compliance.tsx
-import { useCallback as useCallback6, useEffect as useEffect22, useRef as useRef12, useState as useState19 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect22, useRef as useRef13, useState as useState20 } from "react";
 import { Box as Box33, Text as Text35 } from "ink";
 import { TextInput as TextInput7 } from "@inkjs/ui";
 
@@ -5857,38 +5989,58 @@ function ViolationItem({ violation }) {
       prefix,
       " "
     ] }),
-    /* @__PURE__ */ jsx37(Text35, { color, children: violation.detail })
+    /* @__PURE__ */ jsx37(Text35, { color, wrap: "wrap", children: violation.detail })
   ] });
 }
 function ViolationList({ violations }) {
   const errors = violations.filter((v) => v.severity === "error");
   const warnings = violations.filter((v) => v.severity === "warning");
+  const totalRows = useVisibleRows({
+    reservedRows: 11,
+    fallbackReservedRows: 18,
+    minRows: 2
+  });
+  const total = errors.length + warnings.length;
+  const errorBudget = total === 0 ? 0 : Math.min(errors.length, Math.max(1, Math.round(errors.length / total * totalRows)));
+  const warningBudget = Math.max(0, totalRows - errorBudget);
+  const visibleErrors = errors.slice(0, errorBudget);
+  const visibleWarnings = warnings.slice(0, warningBudget);
+  const errorsHidden = errors.length - visibleErrors.length;
+  const warningsHidden = warnings.length - visibleWarnings.length;
   return /* @__PURE__ */ jsxs34(Box33, { flexDirection: "column", marginTop: SPACING.xs, children: [
     errors.length > 0 && /* @__PURE__ */ jsxs34(Box33, { flexDirection: "column", marginBottom: SPACING.xs, children: [
       /* @__PURE__ */ jsxs34(Text35, { color: COLORS.error, bold: true, children: [
         t("compliance_violations", { count: String(errors.length) }),
         " (errors)"
       ] }),
-      errors.map((v) => /* @__PURE__ */ jsx37(ViolationItem, { violation: v }, `${v.type}-${v.packageName}`))
+      visibleErrors.map((v) => /* @__PURE__ */ jsx37(ViolationItem, { violation: v }, `${v.type}-${v.packageName}`)),
+      errorsHidden > 0 && /* @__PURE__ */ jsxs34(Text35, { color: COLORS.textSecondary, dimColor: true, children: [
+        "  ",
+        t("scroll_moreBelow", { count: errorsHidden })
+      ] })
     ] }),
     warnings.length > 0 && /* @__PURE__ */ jsxs34(Box33, { flexDirection: "column", children: [
       /* @__PURE__ */ jsxs34(Text35, { color: COLORS.warning, bold: true, children: [
         t("compliance_violations", { count: String(warnings.length) }),
         " (warnings)"
       ] }),
-      warnings.map((v) => /* @__PURE__ */ jsx37(ViolationItem, { violation: v }, `${v.type}-${v.packageName}`))
+      visibleWarnings.map((v) => /* @__PURE__ */ jsx37(ViolationItem, { violation: v }, `${v.type}-${v.packageName}`)),
+      warningsHidden > 0 && /* @__PURE__ */ jsxs34(Text35, { color: COLORS.textSecondary, dimColor: true, children: [
+        "  ",
+        t("scroll_moreBelow", { count: warningsHidden })
+      ] })
     ] })
   ] });
 }
 function ComplianceView() {
   const isPro = useLicenseStore((s) => s.isPro);
   const { policy, report, loading, error, importPolicy, runCheck } = useComplianceStore();
-  const [phase, setPhase] = useState19("overview");
-  const [resultMessage, setResultMessage] = useState19(null);
-  const [streamLines, setStreamLines] = useState19([]);
-  const [streamRunning, setStreamRunning] = useState19(false);
-  const generatorRef = useRef12(null);
-  const mountedRef = useRef12(true);
+  const [phase, setPhase] = useState20("overview");
+  const [resultMessage, setResultMessage] = useState20(null);
+  const [streamLines, setStreamLines] = useState20([]);
+  const [streamRunning, setStreamRunning] = useState20(false);
+  const generatorRef = useRef13(null);
+  const mountedRef = useRef13(true);
   useEffect22(() => {
     mountedRef.current = true;
     return () => {
@@ -6147,7 +6299,7 @@ function App() {
   const { exit } = useApp();
   const currentView = useNavigationStore((s) => s.currentView);
   const isTestEnv = typeof process !== "undefined" && false;
-  const [showWelcome, setShowWelcome] = useState20(isTestEnv ? false : null);
+  const [showWelcome, setShowWelcome] = useState21(isTestEnv ? false : null);
   useEffect23(() => {
     if (isTestEnv) return;
     void hasCompletedOnboarding().then((done) => setShowWelcome(!done));
@@ -6245,7 +6397,7 @@ async function reportError(err, context = {}) {
   const config = await resolveConfig();
   if (!config.enabled || !config.endpoint) return;
   const machineId = await getMachineId();
-  const version = true ? "1.0.0" : "unknown";
+  const version = true ? "1.1.0" : "unknown";
   await postReport(buildReport("error", err, context, machineId, version), config);
 }
 async function installCrashReporter() {
@@ -6254,7 +6406,7 @@ async function installCrashReporter() {
   if (!config.enabled || !config.endpoint) return;
   _installed = true;
   const machineId = await getMachineId();
-  const version = true ? "1.0.0" : "unknown";
+  const version = true ? "1.1.0" : "unknown";
   process.on("uncaughtException", (err) => {
     void postReport(buildReport("fatal", err, { kind: "uncaughtException" }, machineId, version), config);
   });
@@ -6269,7 +6421,7 @@ import { jsx as jsx39 } from "react/jsx-runtime";
 var [, , command, arg] = process.argv;
 async function runCli() {
   if (command === "--version" || command === "-v" || command === "version") {
-    process.stdout.write("1.0.0\n");
+    process.stdout.write("1.1.0\n");
     return;
   }
   await ensureDataDirs();
@@ -6452,7 +6604,7 @@ async function ensureBrewBarRunning() {
   await useLicenseStore.getState().initialize();
   if (!useLicenseStore.getState().isPro()) return;
   const { isBrewBarInstalled, installBrewBar, launchBrewBar } = await import("./brewbar-installer-GWJ76J6G.js");
-  const { checkBrewBarVersion } = await import("./version-check-J6PTTQ7M.js");
+  const { checkBrewBarVersion } = await import("./version-check-LVSQFXZU.js");
   try {
     if (!await isBrewBarInstalled()) {
       console.log(t("cli_brewbarInstalling"));