Skip to content

feat(dashboard): box table cleanup — drop region, tighten density, full image refs in onboarding#803

Merged
DorianZheng merged 3 commits into
mainfrom
feat/dashboard-box-table-image-onboarding
Jun 16, 2026
Merged

feat(dashboard): box table cleanup — drop region, tighten density, full image refs in onboarding#803
DorianZheng merged 3 commits into
mainfrom
feat/dashboard-box-table-image-onboarding

Conversation

@law-chain-hot

@law-chain-hot law-chain-hot commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

What

Box table

  • Remove the Region column (desktop table + compact mobile meta).
  • Drop the stale min-w-[1360px] (sized for now-removed columns) to min-w-[1120px] so the table fills the viewport instead of horizontally scrolling / stretching columns.
  • Tighten row vertical padding (py-2py-1, scoped to this table) so rows are ~41px instead of ~46px.
  • Remove the now-unused getRegionName plumbing from the box-table path and the stale region entry in persisted column visibility. useRegions/getRegionName stay for other consumers (Runners, Org Settings, Box details).

Responsive

  • Lower COMPACT_BREAKPOINT 1200→1024 (use-mobile) so the dashboard keeps the full table down to 1024px instead of switching to the compact card layout at 1200px. Shared by Sidebar / Pagination / BoxTableHeader / BoxTable.

Onboarding

  • Use the fully-qualified image reference ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3 across all four SDK snippets (JS/TS, Python, Go, Rust) instead of the short boxlite/base.

Scope

Frontend only. Two unrelated API errors seen during testing (/api/regions 500 dev DB drift; /api/admin/overview 403 admin-probe) tracked separately.

Summary by CodeRabbit

Release Notes

  • UI Updates

    • The Box table now focuses on box images instead of region information, with consistent presentation in both desktop and mobile views.
    • The “Region” column was removed.
    • Mobile/compact layout now activates at a lower screen width, and table sizing/padding were adjusted for improved readability.
    • Default column visibility was updated to align with the new image-focused layout.
  • Chores

    • Updated the Docker image reference used by onboarding code examples to a newer build.

@law-chain-hot law-chain-hot requested a review from a team as a code owner June 16, 2026 09:01
@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: e83e1eed-e8d1-4d6f-a24b-7f5719c02b12

📥 Commits

Reviewing files that changed from the base of the PR and between e50f76c and 7875dc8.

📒 Files selected for processing (1)
  • apps/dashboard/src/components/BoxTable/useBoxTable.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/dashboard/src/components/BoxTable/useBoxTable.ts

📝 Walkthrough

Walkthrough

The PR removes the getRegionName callback from BoxTableProps, UseBoxTableProps, and GetColumnsProps, replacing the Region column in BoxTable with an Image column that renders row.original.image. The hook updates columnVisibility defaults, and the table layout is tightened with a reduced minimum width and adjusted breakpoint. The Boxes page drops its useRegions dependency. Separately, onboarding code examples update the Docker image reference from boxlite/base to a versioned GHCR image.

Changes

BoxTable: Region → Image column replacement

Layer / File(s) Summary
Contract removals across BoxTable interfaces
apps/dashboard/src/components/BoxTable/types.ts, apps/dashboard/src/components/BoxTable/useBoxTable.ts, apps/dashboard/src/components/BoxTable/columns.tsx
BoxTableProps, UseBoxTableProps, and GetColumnsProps drop the required getRegionName callback parameter.
Column definition and hook state management
apps/dashboard/src/components/BoxTable/columns.tsx, apps/dashboard/src/components/BoxTable/useBoxTable.ts
Column definition switches from Region (using getRegionName/target) to Image (rendering row.original.image with fallback). Hook removes getRegionName from destructuring, updates columnVisibility defaults to enforce labels: false instead of region: true, and removes getRegionName from the getColumns call and its useMemo dependency array.
Component integration and table layout
apps/dashboard/src/components/BoxTable/index.tsx, apps/dashboard/src/hooks/use-mobile.tsx
BoxTable stops destructuring and passing getRegionName; compact row UI swaps the Region meta cell for an Image meta cell. Table styling adjusts minimum width and body cell padding. Compact breakpoint is lowered from 1200 to 1024 to accommodate the narrower layout.
Page wiring
apps/dashboard/src/pages/Boxes.tsx
Boxes.tsx removes the useRegions import, getRegionName hook destructuring, and prop pass-through to BoxTable.

Onboarding code examples: Docker image reference update

Layer / File(s) Summary
Update Docker image tag across all language examples
apps/dashboard/src/lib/onboarding-code-examples.ts
Four string replacements in the TypeScript, Python, Go, and Rust onboarding code examples change the image from boxlite/base to ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • DorianZheng

Poem

🐇 Hop hop, the region's gone away,
An image column blooms today!
The callback dropped, the hook is lean,
A GHCR tag joins the scene.
Less wiring left, more joy to find —
A tidier table, by design! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the three main changes: removing the Region column from the box table, tightening the table density (reducing padding and adjusting breakpoints), and updating image references in onboarding code examples.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/dashboard-box-table-image-onboarding

Comment @coderabbitai help to get the list of available commands and usage tips.

@law-chain-hot law-chain-hot force-pushed the feat/dashboard-box-table-image-onboarding branch from 4b70890 to 8486c41 Compare June 16, 2026 09:05
@law-chain-hot law-chain-hot changed the title feat(dashboard): box table shows image instead of region; full image refs in onboarding feat(dashboard): drop region column from box table; full image refs in onboarding Jun 16, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/dashboard/src/components/BoxTable/useBoxTable.ts`:
- Around line 79-84: The initializer function is unintentionally overwriting
persisted column visibility by always setting labels: false regardless of what
was saved in localStorage. In the useBoxTable hook, modify the logic to preserve
the user's saved visibility settings from the parsed JSON instead of spreading
it and then overwriting with hardcoded defaults. Additionally, filter out or
exclude legacy keys like region from the saved state to prevent stale visibility
entries from being restored. Only apply default values (id: true, labels: false)
for keys that do not exist in the saved state, allowing previously persisted
visibility preferences for id and labels to be respected.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: cbee87dd-cac9-423a-b41e-55d07d9b1f75

📥 Commits

Reviewing files that changed from the base of the PR and between a1740c6 and 4b70890.

📒 Files selected for processing (6)
  • apps/dashboard/src/components/BoxTable/columns.tsx
  • apps/dashboard/src/components/BoxTable/index.tsx
  • apps/dashboard/src/components/BoxTable/types.ts
  • apps/dashboard/src/components/BoxTable/useBoxTable.ts
  • apps/dashboard/src/lib/onboarding-code-examples.ts
  • apps/dashboard/src/pages/Boxes.tsx
💤 Files with no reviewable changes (2)
  • apps/dashboard/src/components/BoxTable/types.ts
  • apps/dashboard/src/pages/Boxes.tsx

Comment thread apps/dashboard/src/components/BoxTable/useBoxTable.ts Outdated
…n onboarding

- BoxTable: remove the Region column from the desktop table and the Region
  entry from the compact mobile meta. The box table no longer surfaces region.
- Remove the now-unused getRegionName plumbing from the box-table path
  (Boxes page, BoxTable, useBoxTable, columns, types) and the stale 'region'
  entry from persisted column visibility. useRegions/getRegionName stay in
  place for the other consumers (Runners, Org Settings, Box details).
- onboarding-code-examples: use the fully-qualified image reference
  ghcr.io/boxlite-ai/boxlite-agent-base:20260605-p0-r3 across all four SDK
  snippets (JS/TS, Python, Go, Rust) instead of the short 'boxlite/base'.
- BoxTable: drop the stale min-w-[1360px] (sized for removed columns) to
  min-w-[1120px] so the table fills the viewport without horizontal scroll,
  and tighten row vertical padding (py-2 -> py-1, scoped to this table) so
  rows are ~41px instead of ~46px.
- use-mobile: lower COMPACT_BREAKPOINT 1200 -> 1024 so the dashboard keeps
  the full table (not the compact card layout) down to 1024px.
@law-chain-hot law-chain-hot force-pushed the feat/dashboard-box-table-image-onboarding branch from 8486c41 to e50f76c Compare June 16, 2026 09:19
@law-chain-hot law-chain-hot changed the title feat(dashboard): drop region column from box table; full image refs in onboarding feat(dashboard): box table cleanup — drop region, tighten density, full image refs in onboarding Jun 16, 2026
… visibility

Removing the Region column left a 'region: true' entry in the persisted
columnVisibility localStorage that was spread back on every load. react-table
ignores visibility keys without a matching column, so it was harmless cruft,
but strip it on load to keep persisted state clean (CodeRabbit review).

@DorianZheng DorianZheng left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@DorianZheng DorianZheng added this pull request to the merge queue Jun 16, 2026
Merged via the queue into main with commit 9a74191 Jun 16, 2026
31 checks passed
@DorianZheng DorianZheng deleted the feat/dashboard-box-table-image-onboarding branch June 16, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants