- 
- 
+ })
+ })
`
- } else if (c.screenshotB64) {
- visual = `⇔
BASELINE
NOW
No screenshot
`
}
@@ -149,13 +155,12 @@ function buildHtml(cases: TestCase[], timestamp: string): string {
return buildPage('Keybase Electron E2E Tests', allPassed, totalPassed, totalFailed, cases.length, hasDiff, timestamp, cards)
}
-// Save baseline: write current screenshots as PNGs to prevDir
function saveBaseline(cases: TestCase[]) {
fs.mkdirSync(prevDir, {recursive: true})
let saved = 0
for (const c of cases) {
- if (!c.screenshotB64) continue
- fs.writeFileSync(path.join(prevDir, `${c.key}.png`), Buffer.from(c.screenshotB64, 'base64'))
+ if (!c.screenshotPath || !fs.existsSync(c.screenshotPath)) continue
+ fs.copyFileSync(c.screenshotPath, path.join(prevDir, `${c.key}.png`))
saved++
}
console.log(`Baseline saved: ${saved} screenshots to ${prevDir}/`)
diff --git a/shared/tests/e2e/generate-ios-report.mts b/shared/tests/e2e/generate-ios-report.mts
index 27a9ac8fddbc..cb31786dc9b1 100644
--- a/shared/tests/e2e/generate-ios-report.mts
+++ b/shared/tests/e2e/generate-ios-report.mts
@@ -68,10 +68,6 @@ function computeDiff(pathA: string, pathB: string): DiffResult | null {
}
}
-function imageToDataUrl(filePath: string): string {
- return `data:image/png;base64,${fs.readFileSync(filePath).toString('base64')}`
-}
-
function parseFlow(name: string): ScreenshotResult[] {
const commands = readCommandsFile(name)
const failed = commands?.find(c => c.metadata.status === 'FAILED')
@@ -161,19 +157,20 @@ function buildHtml(results: ScreenshotResult[], timestamp: string, title: string
: ''
const durStr = r.durationMs > 0 ? formatDuration(r.durationMs) : ''
+ const rel = (p: string) => path.relative(path.dirname(outputPath), p)
let visual: string
if (r.screenshotPath && r.prevScreenshotPath) {
visual = `
- })
- })
+ })
+ })
`
} else if (r.screenshotPath) {
- visual = `⇔
BASELINE
NOW
No screenshot
`
}
diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx
index af8ed8898903..dd09f151610e 100644
--- a/shared/tracker/assertion.tsx
+++ b/shared/tracker/assertion.tsx
@@ -222,24 +222,29 @@ const Container = (ownProps: OwnProps) => {
)}
- ` with the Box2 CSS class system plus `clickable-box2` cursor. On mobile it uses `Pressable` + `box2SharedProps` for layout.
-Type: `Omit & {direction?: ..., onClick?, onLongPress?, onMouseOver?, hitSlop?}`
+Type: `Box2Props & {onClick?, onLongPress?, hitSlop?}` — **`direction` is required.**
-When `direction` is omitted: no flex layout — behaves like CB2 (plain clickable wrapper).
-When `direction` is provided: Box2 layout is applied — **eliminates the inner Box2**.
+`Box2Props` includes desktop mouse events: `onMouseDown`, `onMouseUp`, `onMouseLeave`, `onMouseMove`, `onMouseOver`, `onMouseEnter`, `onContextMenu`. CB3 passes all of these through to the desktop `
`. They are **not** forwarded on mobile (Pressable doesn't support them).
+
+`direction` is always required. For Pattern B swaps (plain clickable wrapper, no layout needed), pass the direction that matches how children are stacked — usually `"vertical"` for a single child or vertically-stacked children.
## Process
@@ -79,14 +80,16 @@ Read each matched file fully before classifying.
```
-**Action:** Simple swap to CB3 with no layout props.
+**Action:** Swap to CB3. Always provide `direction`. Add `fullWidth={true}` if the original CB was filling its parent's width (e.g., list rows, banners, full-width wrappers).
```tsx
-
+
```
+**⚠️ `box2_centered` / `alignSelf: center` gotcha:** CB3 applies `align-self: center` (desktop: `box2_centered` CSS class; mobile: `nativeStyles.centered = {alignSelf: 'center'}`) whenever neither `fullWidth` nor `fullHeight` is set. CB1 did NOT do this. This affects **both platforms**. If the original CB was expected to fill its parent (e.g. list rows, banners, full-width wrappers), omitting `fullWidth={true}` will shrink it to content-width. Always check the parent layout context — when in doubt, add `fullWidth={true}`.
+
### Pattern C — CB with style that encodes flex layout
```tsx
@@ -109,11 +112,12 @@ These CB1 props have no CB3 equivalent:
- `hoverColor`, `underlayColor` → add `hover_background_color_*` CSS className to CB3 instead
- `feedback={false}` → drop (Pressable doesn't have this)
- `activeOpacity` → drop
-- `onMouseEnter` / `onMouseLeave` → rare; use a wrapper div if truly needed
- `onPressIn` / `onPressOut` → not in CB3; leave as CB1 and note it
- `tooltip` → wrap with `` outside CB3
- `onLongPress={(e) => ...}` → remove the `e` param (CB3 signature is `() => void`)
+Note: `onMouseDown`, `onMouseUp`, `onMouseLeave`, `onMouseMove`, `onMouseOver`, `onMouseEnter` are **fully supported** in CB3 via `Box2Props` — these are NOT Pattern D cases.
+
## Step 3: Present Changes Before Touching Anything
For each usage show: file, line, pattern (A/B/C/D), proposed change.
@@ -132,7 +136,7 @@ From `shared/`:
```
yarn lint && yarn tsc
```
-Fix errors before reporting done.
+**Both must pass with zero errors before reporting done.** Fix any failures — including lint errors in files we touched or that were broken in a prior session. Do not skip lint or treat failures as pre-existing without verifying via `git stash`.
## Step 6: Update Checklist
@@ -165,9 +169,9 @@ Keep in the style object: fixed `height`, `width` values, `padding`, `margin`, `
CB3 on RN does NOT add `borderRadius: 3` (CB1's old default). Remove it from styles only if it was purely inherited from CB1, not a design intent.
-### Note: CB3 does NOT have a `direction` default
+### Note: `direction` is required in CB3
-When `direction` is omitted, CB3 is a block-level clickable wrapper (no flex). If you need flex, always pass `direction`.
+Always pass `direction`. For plain wrapper cases (Pattern B) with no layout need, use `"vertical"` as the default. Remember to add `fullWidth={true}` if the element should fill its parent.
## What NOT to Do
diff --git a/skill/simplify-ui-section/SKILL.md b/skill/simplify-ui-section/SKILL.md
index d85aa4a40238..e51d18c43994 100644
--- a/skill/simplify-ui-section/SKILL.md
+++ b/skill/simplify-ui-section/SKILL.md
@@ -23,15 +23,20 @@ digraph simplify {
"Ask: proceed, skip, or adjust?" [shape=box];
"User approves?" [shape=diamond];
"Implement changes" [shape=box];
+ "Any meaningful findings?" [shape=diamond];
"Read all files in scope" -> "Analyze across categories";
"Analyze across categories" -> "Ask clarifying questions";
"Ask clarifying questions" -> "Present findings by category";
"Present findings by category" -> "Show flat numbered list of ALL changes";
"Show flat numbered list of ALL changes" -> "Ask: proceed, skip, or adjust?";
- "Ask: proceed, skip, or adjust?" -> "User approves?" ;
+ "Ask: proceed, skip, or adjust?" -> "User approves?";
"User approves?" -> "Implement changes" [label="yes"];
"User approves?" -> "Present findings by category" [label="revise"];
+ "Implement changes" -> "Read all files in scope" [label="re-read simplified files"];
+ "Analyze across categories" -> "Any meaningful findings?";
+ "Any meaningful findings?" -> "Ask clarifying questions" [label="yes"];
+ "Any meaningful findings?" -> "Done" [label="no"];
}
```
@@ -61,6 +66,17 @@ Read **every file** in scope before forming opinions. Patterns only become visib
- Components split across files for no structural reason — candidate for collocating
- Deeply nested JSX that could flatten via composition
+### Nested Boxes (high-signal smell)
+
+Two or more `Box2` (or `Kb.Box2`) components nested directly inside each other is a reliable sign something can be simplified. When you see this pattern, investigate:
+
+- **Redundant wrapper**: the outer box exists only to pass a `style` or `direction` that the inner box could absorb — collapse them into one
+- **Props can merge**: both boxes carry layout props (`alignItems`, `gap`, `fullWidth`, etc.) with no conflicting values — merge onto a single box
+- **Composition opportunity**: the nesting reflects a structural concern (header + body) that could be expressed as named sub-components instead of anonymous nested boxes
+- **Unnecessary intermediate container**: an outer box wraps a single child box with no additional siblings or layout purpose — remove the outer layer
+
+A long chain of `` almost always means something went wrong at the design level. Trace back to why each layer exists before proposing a fix; the root cause is usually one of the above.
+
### Props and Styles
- Components with large prop lists where many props just pass through — consider composition or context
- Repeated style patterns across components that could become a shared style helper or `Kb.Styles` utility call
@@ -178,6 +194,16 @@ Wait for the user's response. Do not begin any edits until they reply.
Make all approved changes. Remove unused imports, styles, and variables left behind. Run lint and tsc after.
+## Step 6: Iterate
+
+**Simplification is not a single pass.** After implementing changes, the simplified code often reveals new opportunities that were hidden by the original clutter. Always do at least one more pass.
+
+Go back to **Step 1** and re-read all files in scope. Then repeat Steps 2–5 with fresh eyes.
+
+**Stop iterating when:** a full pass produces no meaningful findings — every category comes up empty or yields only borderline cases the user opts to skip.
+
+**Never stop after the first pass.** The first pass removes the obvious problems. The second pass finds what those problems were hiding. The third pass is usually final.
+
## The Hard Line: No Unilateral Visual Changes
**This skill is structural by default. Zero UX or behavior changes without explicit user sign-off.**