fix(web): wrap phase rail dots and center the context meter ring#7243

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

Closed
nejim123 wants to merge 3 commits into from
Closed

fix(web): wrap phase rail dots and center the context meter ring #7243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e779d71
fix(web): wrap phase rail dots and center the context meter ring
nejim123 Aug 16, 2026
56eade9
Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…
nejim123 Aug 16, 2026
81d3d9f
Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…
nejim123 Aug 17, 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
10 changes: 5 additions & 5 deletions apps/web/src/components/AgentsPanel.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
return (
<div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
{group.phases.map((phase, index) => (
<div key={phase.index} className="flex items-center gap-1">
<div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
{index > 0 ? (
<ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
<ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
) : null}
<div
className={cn(
"flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
"flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
phase.state === "running"
? "border-info/40"
: phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
>
<span
className={cn(
"font-mono text-[.65rem]",
"shrink-0 font-mono text-[.65rem]",

@macroscopeappmacroscopeappBotAug 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change
"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",

Posted via Macroscope — UI Consistency

@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space

When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.

Useful? React with 👍 / 👎.

phase.state === "running"
? "text-info-foreground"
: phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
{phase.state === "done" ? "✓ " : ""}
{phase.title}
</span>
<span className="flex items-center gap-0.5">
<span className="flex min-w-0 flex-wrap items-center gap-0.5">
{phase.members.length === 0 ? (
<span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
) : (
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/chat/ContextWindowMeter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
: `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
}
>
<span className="relative flex size-5 items-center justify-center">
<span className="flex size-5 items-center justify-center">
<svg
viewBox="0 0 24 24"
className="-rotate-90 absolute inset-0 size-full transform-gpu"
className="-rotate-90 size-full shrink-0 transform-gpu"
aria-hidden="true"
>
<circle
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(web): wrap phase rail dots and center the context meter ring#7243

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

 Closed

nejim123
wants to merge
3
commits into

from

 Closed


fix(web): wrap phase rail dots and center the context meter ring
#7243
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


3 commits


Select commit
Hold shift + click to select a range
e779d71

fix(web): wrap phase rail dots and center the context meter ring


nejim123 Aug 16, 2026
56eade9

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 16, 2026
81d3d9f

Merge branch 'main' into fix/agents-panel-phase-rail-overflow-context…


nejim123 Aug 17, 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


10 changes: 5 additions & 5 deletions
apps/web/src/components/AgentsPanel.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -217,13 +217,13 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 return (
 <div className="flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 pb-1 pt-1.5">
 {group.phases.map((phase, index) => (
 <div key={phase.index} className="flex items-center gap-1">
 <div key={phase.index} className="flex min-w-0 max-w-full items-center gap-1">
 {index > 0 ? (
 <ChevronRight aria-hidden className="size-3 text-muted-foreground/40" />
 <ChevronRight aria-hidden className="size-3 shrink-0 text-muted-foreground/40" />
 ) : null}
 <div
 className={cn(
 "flex items-center gap-1 rounded-sm border px-1.5 py-0.5",
 "flex min-w-0 items-center gap-1 rounded-sm border px-1.5 py-0.5",
 phase.state === "running"
 ? "border-info/40"
 : phase.state === "done"
Expand All@@ -233,7 +233,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 >
 <span
 className={cn(
 "font-mono text-[.65rem]",
 "shrink-0 font-mono text-[.65rem]",
@macroscopeappmacroscopeappBotAug 16, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

shrink-0 here works against the min-w-0/max-w-full added to the segment and chip: the chip can now shrink below its content width, but the title can't shrink and has no clipping, so a long phase title renders outside the chip's border (and past the section, which has no overflow-hidden) rather than being contained. Truncating the title instead keeps the chip's border box and single-line geometry intact and matches the workflow-name span in this file (min-w-0 truncate, line 403).

Suggested change

"shrink-0 font-mono text-[.65rem]",
"min-w-0 truncate font-mono text-[.65rem]",
Posted via Macroscope — UI Consistency
@chatgpt-codex-connectorchatgpt-codex-connectorBotAug 17, 2026

Copy link


Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow long phase titles to yield space
When Claude reports a multiword phase title wider than the available rail, shrink-0 forces the title to retain its full intrinsic width. The surrounding min-w-0 elements do not clip that content, so the pill can still overflow the panel while the dot cluster collapses to no usable wrapping width—the exact narrow-panel failure this change is intended to prevent. Keep the title shrinkable, or give it an explicit bounded wrapping/truncation policy.
Useful? React with 👍 / 👎.
 phase.state === "running"
 ? "text-info-foreground"
 : phase.state === "done"
Expand All@@ -244,7 +244,7 @@ function PhaseRail({ group }: { group: AgentPanelWorkflowGroup }) {
 {phase.state === "done" ? "✓ " : ""}
 {phase.title}
 </span>
 <span className="flex items-center gap-0.5">
 <span className="flex min-w-0 flex-wrap items-center gap-0.5">
 {phase.members.length === 0 ? (
 <span className="font-mono text-[.6rem] text-muted-foreground/50">–</span>
 ) : (
Expand Down

4 changes: 2 additions & 2 deletions
apps/web/src/components/chat/ContextWindowMeter.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -47,10 +47,10 @@ export function ContextWindowMeter(props: {
 : `Context window ${formatContextWindowTokens(usage.usedTokens)} tokens used`
 }
 >
 <span className="relative flex size-5 items-center justify-center">
 <span className="flex size-5 items-center justify-center">
 <svg
 viewBox="0 0 24 24"
 className="-rotate-90 absolute inset-0 size-full transform-gpu"
 className="-rotate-90 size-full shrink-0 transform-gpu"
 aria-hidden="true"
 >
 <circle
Expand Down
Loading