root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-3266): address quick chat FAB CSS token consistency

Browse Source 
Fixed QuickChatFAB styling to align with the design token system, replacing hardcoded CSS values with consistent token variables in the component's stylesheet.

Fusion-Task-Id: FN-3266
This commit is contained in:
Fusion
2026-05-04 09:42:30 -07:00
committed by gsxdsm
parent 276f1953a2
commit a6fdf3703c
4 changed files with 165 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/core/src/mission-store.ts
View File

@@ -3261,57 +3261,49 @@ export class MissionStore extends EventEmitter<MissionStoreEvents> {
// ── ID Generators ───────────────────────────────────────────────────
private generateMissionId(): string {
const timestamp = Date.now();
private idSequence = 0;
private generateId(prefix: string): string {
const timestamp = Date.now().toString(36).toUpperCase();
this.idSequence += 1;
const sequence = this.idSequence.toString(36).toUpperCase().padStart(4, "0");
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `M-${timestamp.toString(36).toUpperCase()}-${random}`;
return `${prefix}-${timestamp}-${sequence}-${random}`;
}
private generateMissionId(): string {
return this.generateId("M");
}
private generateMilestoneId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `MS-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("MS");
}
private generateSliceId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `SL-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("SL");
}
private generateFeatureId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `F-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("F");
}
private generateMissionEventId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `ME-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("ME");
}
private generateAssertionId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `CA-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("CA");
}
private generateValidatorRunId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `VR-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("VR");
}
private generateFailureId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `VF-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("VF");
}
private generateLineageId(): string {
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 6).toUpperCase();
return `FL-${timestamp.toString(36).toUpperCase()}-${random}`;
return this.generateId("FL");
}
}

66
packages/dashboard/app/components/QuickChatFAB.css
View File

@@ -2,9 +2,11 @@
/* Position set via inline style from useDraggable */
.quick-chat-fab {
--quick-chat-fab-size: calc(var(--space-xl) * 2);
position: fixed;
width: 48px;
height: 48px;
width: var(--quick-chat-fab-size);
height: var(--quick-chat-fab-size);
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--todo) 45%, var(--border));
background: var(--todo);
@@ -95,33 +97,33 @@
.quick-chat-resize-handle[data-resize-direction="n"] {
cursor: n-resize;
top: 0;
left: 16px;
right: 16px;
height: 6px;
left: var(--space-lg);
right: var(--space-lg);
height: calc(var(--space-xs) + (var(--space-xs) / 2));
}
.quick-chat-resize-handle[data-resize-direction="s"] {
cursor: s-resize;
bottom: 0;
left: 16px;
right: 16px;
height: 6px;
left: var(--space-lg);
right: var(--space-lg);
height: calc(var(--space-xs) + (var(--space-xs) / 2));
}
.quick-chat-resize-handle[data-resize-direction="e"] {
cursor: e-resize;
top: 16px;
top: var(--space-lg);
right: 0;
bottom: 16px;
width: 6px;
bottom: var(--space-lg);
width: calc(var(--space-xs) + (var(--space-xs) / 2));
}
.quick-chat-resize-handle[data-resize-direction="w"] {
cursor: w-resize;
top: 16px;
top: var(--space-lg);
left: 0;
bottom: 16px;
width: 6px;
bottom: var(--space-lg);
width: calc(var(--space-xs) + (var(--space-xs) / 2));
}
/* Corner handles — sized to clear the panel's 12px border-radius so the
@@ -130,32 +132,32 @@
cursor: nw-resize;
top: 0;
left: 0;
width: 16px;
height: 16px;
width: var(--space-lg);
height: var(--space-lg);
}
.quick-chat-resize-handle[data-resize-direction="ne"] {
cursor: ne-resize;
top: 0;
right: 0;
width: 16px;
height: 16px;
width: var(--space-lg);
height: var(--space-lg);
}
.quick-chat-resize-handle[data-resize-direction="sw"] {
cursor: sw-resize;
bottom: 0;
left: 0;
width: 16px;
height: 16px;
width: var(--space-lg);
height: var(--space-lg);
}
.quick-chat-resize-handle[data-resize-direction="se"] {
cursor: se-resize;
bottom: 0;
right: 0;
width: 16px;
height: 16px;
width: var(--space-lg);
height: var(--space-lg);
}
/* Subtle hover accent on edge handles */
@@ -197,14 +199,14 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
padding: calc(var(--space-sm) + (var(--space-xs) / 2)) var(--space-md);
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--surface) 88%, var(--card));
}
.quick-chat-panel-header h3 {
margin: 0;
font-size: 0.95rem;
font-size: var(--space-md);
font-weight: 600;
color: var(--text);
}
@@ -337,7 +339,7 @@
}
.quick-chat-panel-agent-select {
padding: 10px 12px;
padding: calc(var(--space-sm) + (var(--space-xs) / 2)) var(--space-md);
border-bottom: 1px solid var(--border);
}
@@ -373,7 +375,7 @@
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 9px;
padding: calc(var(--space-sm) - (var(--space-xs) / 4)) calc(var(--space-md) - (var(--space-xs) / 4));
}
.quick-chat-panel-messages {
@@ -381,9 +383,9 @@
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
gap: var(--space-sm);
overflow-y: auto;
padding: 10px 12px;
padding: calc(var(--space-sm) + (var(--space-xs) / 2)) var(--space-md);
background: color-mix(in srgb, var(--bg) 35%, transparent);
}
@@ -396,7 +398,7 @@
.quick-chat-panel-message {
max-width: 86%;
padding: 8px 10px;
padding: var(--space-sm) calc(var(--space-sm) + (var(--space-xs) / 2));
border-radius: var(--radius-md);
border: 1px solid var(--border);
color: var(--text);
@@ -812,7 +814,7 @@
row-gap: 0;
/* iOS PWA: status bar (black-translucent) overlays the panel from top: 0,
clipping the close button. Reserve top inset on mobile. */
padding-top: calc(10px + env(safe-area-inset-top, 0px));
padding-top: calc(var(--space-sm) + (var(--space-xs) / 2) + env(safe-area-inset-top, 0px));
}
.quick-chat-panel-title-wrap {
@@ -885,13 +887,13 @@
.quick-chat-panel .chat-message-thinking summary {
font-size: var(--space-md);
color: var(--text-secondary);
color: var(--text-muted);
cursor: pointer;
}
.quick-chat-panel .chat-message-thinking-content {
font-size: var(--space-md);
color: var(--text-secondary);
color: var(--text-muted);
padding: var(--space-sm);
background: var(--bg);
border-radius: var(--radius-sm);