Skip to content

Commit f13f77a

Browse files
mitul-smitul-s
committed
cleanup
1 parent 0b724f2 commit f13f77a

7 files changed

Lines changed: 201 additions & 340 deletions

File tree

‎packages/web-shared/src/components/new-trace-viewer/trace-viewer.tsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -508,43 +508,43 @@ function NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {
508508
<div className="flex-shrink-0 px-4 pt-4 pb-3">
509509
<div className="flex items-start justify-between gap-2">
510510
<div className="min-w-0 flex-1">
511-
<div className="flex items-center gap-2">
512-
<span className="text-[15px] font-semibold text-gray-1000 truncate">
513-
{selectedSpanName}
514-
</span>
515-
{selectedResource && (
516-
<span
517-
className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none ${
518-
selectedResource === 'step'
519-
? 'bg-green-200 text-green-900'
520-
: selectedResource === 'run'
521-
? 'bg-blue-200 text-blue-900'
522-
: selectedResource === 'hook'
523-
? 'bg-yellow-200 text-yellow-900'
524-
: 'bg-gray-200 text-gray-900'
525-
}`}
526-
>
527-
{selectedResource.charAt(0).toUpperCase() +
528-
selectedResource.slice(1)}
529-
</span>
530-
)}
531-
</div>
511+
<span className="text-[15px] font-semibold text-gray-1000 truncate block">
512+
{selectedSpanName}
513+
</span>
532514
{selectedResourceId && (
533-
<button
534-
type="button"
535-
className="mt-1 flex items-center gap-1 text-[13px] font-mono text-gray-700 hover:text-gray-1000 transition-colors group"
536-
onClick={() => {
537-
navigator.clipboard.writeText(selectedResourceId);
538-
}}
539-
title={selectedResourceId}
540-
>
541-
<span className="truncate max-w-[200px]">
542-
{selectedResourceId.length > 20
543-
? `${selectedResourceId.slice(0, 8)} ... ${selectedResourceId.slice(-6)}`
544-
: selectedResourceId}
545-
</span>
546-
<Copy className="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
547-
</button>
515+
<div className="mt-1 flex items-center gap-2">
516+
{selectedResource && (
517+
<span
518+
className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${
519+
selectedResource === 'step'
520+
? 'bg-green-200 text-green-900'
521+
: selectedResource === 'run'
522+
? 'bg-blue-200 text-blue-900'
523+
: selectedResource === 'hook'
524+
? 'bg-yellow-200 text-yellow-900'
525+
: 'bg-gray-200 text-gray-900'
526+
}`}
527+
>
528+
{selectedResource.charAt(0).toUpperCase() +
529+
selectedResource.slice(1)}
530+
</span>
531+
)}
532+
<button
533+
type="button"
534+
className="flex items-center gap-1 text-[13px] font-mono text-gray-700 hover:text-gray-1000 transition-colors group truncate"
535+
onClick={() => {
536+
navigator.clipboard.writeText(selectedResourceId);
537+
}}
538+
title={selectedResourceId}
539+
>
540+
<span className="truncate">
541+
{selectedResourceId.length > 20
542+
? `${selectedResourceId.slice(0, 8)} ... ${selectedResourceId.slice(-6)}`
543+
: selectedResourceId}
544+
</span>
545+
<Copy className="w-3 h-3 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" />
546+
</button>
547+
</div>
548548
)}
549549
</div>
550550
<button

‎packages/web-shared/src/components/sidebar/attribute-panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,7 @@ export const AttributeBlock = ({
637637
<div
638638
className={`my-2 flex flex-col ${attribute === 'input' || attribute === 'output' ? 'gap-2 my-3.5' : 'gap-0'}`}
639639
>
640-
<span className="text-label-14 text-gray-1000 font-medium">
640+
<span className="text-label-14 text-gray-1000 font-medium first-letter:uppercase">
641641
{attribute}
642642
</span>
643643
<Skeleton className="h-9 w-full rounded-md" />

‎packages/web-shared/src/components/sidebar/entity-detail-panel.tsx‎

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -347,59 +347,21 @@ export function EntityDetailPanel({
347347
return null;
348348
}
349349

350-
const resourceLabel = resource.charAt(0).toUpperCase() + resource.slice(1);
351350
const hasPendingActions =
352351
(resource === 'sleep' && canWakeUp) ||
353352
(resource === 'hook' && canResolveHook);
354-
const runStateLabel = run.completedAt ? 'Completed' : 'Live';
355353

356354
return (
357355
<div className="flex h-full flex-col">
358-
<div
359-
className="border-b px-3 py-3"
360-
style={{ borderColor: 'var(--ds-gray-200)' }}
361-
>
362-
<div className="flex items-start justify-between gap-2">
363-
<div className="min-w-0">
364-
<div className="flex items-center gap-2">
365-
<span
366-
className="inline-flex items-center rounded-full border px-2 py-0.5 text-[13px] font-medium"
367-
style={{
368-
borderColor: 'var(--ds-gray-300)',
369-
color: 'var(--ds-gray-900)',
370-
backgroundColor: 'var(--ds-background-100)',
371-
}}
372-
>
373-
{resourceLabel}
374-
</span>
375-
<span
376-
className="text-[13px]"
377-
style={{
378-
color: run.completedAt
379-
? 'var(--ds-gray-700)'
380-
: 'var(--ds-green-800)',
381-
}}
382-
>
383-
{runStateLabel}
384-
</span>
385-
</div>
386-
<p
387-
className="mt-1 truncate font-mono text-[13px]"
388-
style={{ color: 'var(--ds-gray-700)' }}
389-
title={resourceId}
390-
>
391-
{resourceId}
392-
</p>
393-
</div>
394-
{(hasEncryptedFields || encryptionKey) && onDecrypt && (
395-
<DecryptButton
396-
decrypted={!!encryptionKey}
397-
loading={isDecrypting}
398-
onClick={onDecrypt}
399-
/>
400-
)}
356+
{(hasEncryptedFields || encryptionKey) && onDecrypt && (
357+
<div className="px-3 pt-3">
358+
<DecryptButton
359+
decrypted={!!encryptionKey}
360+
loading={isDecrypting}
361+
onClick={onDecrypt}
362+
/>
401363
</div>
402-
</div>
364+
)}
403365

404366
<div className="flex-1 overflow-y-auto px-3 pt-3 pb-8">
405367
{hasPendingActions && (

‎packages/web/app/components/flow-graph/workflow-graph-execution-viewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ function getExecutionNodeStyle(nodeKind: string, executions?: StepExecution[]) {
256256
// If no execution data, show faded state with gray border
257257
if (!executions || executions.length === 0) {
258258
return {
259-
color: 'hsl(var(--card-foreground))',
259+
color: 'var(--card-foreground)',
260260
backgroundColor,
261261
borderColor: '#9ca3af', // gray-400
262262
opacity: 0.4,
@@ -293,7 +293,7 @@ function getExecutionNodeStyle(nodeKind: string, executions?: StepExecution[]) {
293293
}
294294

295295
return {
296-
color: 'hsl(var(--card-foreground))',
296+
color: 'var(--card-foreground)',
297297
backgroundColor,
298298
borderColor,
299299
borderWidth,

‎packages/web/app/components/flow-graph/workflow-graph-viewer.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,13 @@
2222
/* Custom styling for React Flow controls in dark mode */
2323
.react-flow__controls {
2424
button {
25-
background-color: hsl(var(--background));
26-
border: 1px solid hsl(var(--border));
27-
color: hsl(var(--foreground));
25+
background-color: var(--background);
26+
border: 1px solid var(--border);
27+
color: var(--foreground);
2828
}
2929

3030
button:hover {
31-
background-color: hsl(var(--accent));
31+
background-color: var(--accent);
3232
}
3333

3434
button path {
@@ -92,7 +92,7 @@
9292
left: 12px;
9393
font-size: 11px;
9494
font-weight: 600;
95-
color: hsl(var(--muted-foreground));
95+
color: var(--muted-foreground);
9696
text-transform: uppercase;
9797
letter-spacing: 0.5px;
9898
}

‎packages/web/app/components/flow-graph/workflow-graph-viewer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -408,7 +408,7 @@ export function getNodeBorderColor(nodeKind: string): string {
408408
// Get node styling based on node kind - theme-aware colors using CSS variables
409409
export function getNodeStyle(nodeKind: string): NodeStyleResult {
410410
return {
411-
color: 'hsl(var(--card-foreground))',
411+
color: 'var(--card-foreground)',
412412
backgroundColor: getNodeBackgroundColor(nodeKind),
413413
borderColor: getNodeBorderColor(nodeKind),
414414
};

0 commit comments

Comments
 (0)