Skip to content

feat(web): promote Segments to default server-load style, cull bake-off candidates #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DanielGGordon merged 2 commits into from
Jul 23, 2026
Merged

feat(web): promote Segments to default server-load style, cull bake-off candidates #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4274cbd
feat(web): promote segments to default host-stats style, cull the rest
DanielGGordon Jul 23, 2026
e8d04a3
feat(web): taller sidebar footer with full-height server-load readout
DanielGGordon Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3311,7 +3311,11 @@ const SidebarHostStats = memo(function SidebarHostStats() {
}

const { Component } = HOST_STATS_VARIANTS[style];
return <Component stats={stats} history={history} />;
return (
<div className="ml-auto flex h-full min-w-0 flex-1 items-center justify-end">
<Component stats={stats} history={history} />
</div>
);
});

const SidebarChromeFooter = memo(function SidebarChromeFooter() {
Expand All @@ -3329,10 +3333,12 @@ const SidebarChromeFooter = memo(function SidebarChromeFooter() {
<SidebarProviderUpdatePill />
<SidebarUpdatePill />
<SidebarMenu>
<SidebarMenuItem className="flex items-center">
{/* Desktop: 1.5× a project row (h-18 = 72px vs the 48px project rows), Settings squished to its
content, and the host-stats readout stretched to the full height. */}
<SidebarMenuItem className="flex items-center gap-2 md:h-18">
<SidebarMenuButton
size="sm"
className="w-auto flex-1 gap-2 px-2 py-1.5 text-muted-foreground/70 hover:bg-accent hover:text-foreground"
className="w-auto shrink-0 gap-2 px-2 py-1.5 text-muted-foreground/70 hover:bg-accent hover:text-foreground md:h-full"
onClick={handleSettingsClick}
>
<SettingsIcon className="size-3.5" />
Expand Down
50 changes: 0 additions & 50 deletions apps/web/src/components/host-stats/VariantBadge.tsx
View file
Open in desktop

This file was deleted.

64 changes: 0 additions & 64 deletions apps/web/src/components/host-stats/VariantBars.tsx
View file
Open in desktop

This file was deleted.

88 changes: 0 additions & 88 deletions apps/web/src/components/host-stats/VariantEqualizer.tsx
View file
Open in desktop

This file was deleted.

94 changes: 0 additions & 94 deletions apps/web/src/components/host-stats/VariantRings.tsx
View file
Open in desktop

This file was deleted.

16 changes: 10 additions & 6 deletions apps/web/src/components/host-stats/VariantSegments.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function SegmentMeter({ percent, peakPercent }: SegmentMeterProps) {
<span
key={index}
className={cn(
"h-1.5 min-w-0 flex-1 rounded-[2px] transition-colors duration-700 ease-out",
"h-1.5 min-w-0 flex-1 rounded-[2px] transition-colors duration-700 ease-out md:h-2.5",
index < litCount ? color : index < peakCount ? "bg-muted-foreground/30" : "bg-muted",
)}
/>
Expand All @@ -57,19 +57,23 @@ export function VariantSegments({ stats, history }: HostStatsVariantProps) {

return (
<div
className="grid h-7 w-[150px] shrink-0 grid-cols-[22px_1fr_59px] items-center gap-x-1 whitespace-nowrap rounded-md border border-border/60 bg-muted/25 px-1.5 py-0.5 tabular-nums"
className="grid h-7 w-[150px] shrink-0 grid-cols-[22px_1fr_59px] content-center items-center gap-x-1 whitespace-nowrap rounded-md border border-border/60 bg-muted/25 px-1.5 py-0.5 tabular-nums md:h-full md:w-full md:grid-cols-[28px_1fr_70px] md:gap-x-1.5 md:gap-y-2 md:px-2.5"
title={detail}
aria-label={detail}
>
<span className="text-[9px] font-semibold tracking-wide text-muted-foreground">CPU</span>
<span className="text-[9px] font-semibold tracking-wide text-muted-foreground md:text-[10px]">
CPU
</span>
<SegmentMeter percent={cpuPercent} peakPercent={cpuPeak} />
<span className="text-right text-[11px] font-semibold leading-none text-foreground">
<span className="text-right text-[11px] font-semibold leading-none text-foreground md:text-[13px]">
{cpuPercent.toFixed(1)}%
</span>

<span className="text-[9px] font-semibold tracking-wide text-muted-foreground">MEM</span>
<span className="text-[9px] font-semibold tracking-wide text-muted-foreground md:text-[10px]">
MEM
</span>
<SegmentMeter percent={memoryPercent} peakPercent={memoryPeak} />
<span className="text-right text-[11px] font-semibold leading-none text-foreground">
<span className="text-right text-[11px] font-semibold leading-none text-foreground md:text-[13px]">
{formatFooterGigabytes(stats.memUsedBytes)}/{formatFooterGigabytes(stats.memTotalBytes)}G
</span>
</div>
Expand Down
Loading
Loading