chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: migrate remaining components to Design System v4

Browse Source 
111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/public/FlowTemplateCard.tsx
View File

@@ -18,19 +18,19 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
<button
type="button"
onClick={onClick}
className="glass-card text-left w-full flex flex-col gap-3 p-5"
className="card-interactive text-left w-full flex flex-col gap-3 p-5"
>
<div className="flex items-start justify-between gap-2">
<h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
<h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
{template.name}
</h3>
<span className="shrink-0">
<GitBranch className="w-4 h-4 text-muted-foreground" />
<GitBranch className="w-4 h-4 text-[#848b9b]" />
</span>
</div>
{template.description && (
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
<p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
{template.description}
</p>
)}
@@ -40,33 +40,33 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
{template.tags.slice(0, 3).map((tag) => (
<span
key={tag}
className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
>
{tag}
</span>
))}
{template.tags.length > 3 && (
<span className="font-label text-[0.625rem] text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
+{template.tags.length - 3}
</span>
)}
</div>
)}
<div className="flex items-center gap-4 mt-auto pt-2 border-t border-border">
<div className="flex items-center gap-4 mt-auto pt-2 border-t border-[#1e2130]">
{template.category && (
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{template.category}
</span>
)}
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] flex items-center gap-1">
<Layers className="w-3 h-3" />
{template.step_count} steps
</span>
{template.success_rate !== null && (
<span
className={cn(
'font-label text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
template.success_rate >= 80
? 'text-emerald-400'
: template.success_rate >= 50
@@ -82,12 +82,12 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
<div className="flex items-center justify-between">
<span className={cn(
'font-label text-[0.625rem] px-2 py-0.5 rounded-md border',
'bg-primary/5 border-primary/20 text-primary'
'font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md border',
'bg-primary/5 border-primary/20 text-[#22d3ee]'
)}>
{typeLabels[template.tree_type] || template.tree_type}
</span>
<span className="font-label text-[0.625rem] text-[#5a6170]">
<span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
{template.usage_count.toLocaleString()} uses
</span>
</div>

26
frontend/src/components/public/ScriptTemplateCard.tsx
View File

@@ -18,24 +18,24 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
<button
type="button"
onClick={onClick}
className="glass-card text-left w-full flex flex-col gap-3 p-5"
className="card-interactive text-left w-full flex flex-col gap-3 p-5"
>
<div className="flex items-start justify-between gap-2">
<div className="flex items-center gap-2 min-w-0">
<h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
<h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
{template.name}
</h3>
{template.is_verified && (
<CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
<CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
)}
</div>
<span className="shrink-0">
<Terminal className="w-4 h-4 text-muted-foreground" />
<Terminal className="w-4 h-4 text-[#848b9b]" />
</span>
</div>
{template.description && (
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
<p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
{template.description}
</p>
)}
@@ -45,31 +45,31 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
{template.tags.slice(0, 3).map((tag) => (
<span
key={tag}
className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
>
{tag}
</span>
))}
{template.tags.length > 3 && (
<span className="font-label text-[0.625rem] text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
+{template.tags.length - 3}
</span>
)}
</div>
)}
<div className="flex items-center gap-3 mt-auto pt-2 border-t border-border">
<div className="flex items-center gap-3 mt-auto pt-2 border-t border-[#1e2130]">
{template.complexity && (
<span
className={cn(
'font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
complexityColors[template.complexity] || 'text-muted-foreground border-border bg-card'
'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
complexityColors[template.complexity] || 'text-[#848b9b] border-[#1e2130] bg-[#14161d]'
)}
>
{template.complexity}
</span>
)}
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
{template.parameter_count} param{template.parameter_count !== 1 ? 's' : ''}
</span>
{template.requires_elevation && (
@@ -82,7 +82,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
{template.requires_modules.slice(0, 2).map((mod) => (
<span
key={mod}
className="font-label text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
>
<Package className="w-3 h-3" />
{mod}
@@ -92,7 +92,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
)}
<div className="flex items-center justify-end">
<span className="font-label text-[0.625rem] text-[#5a6170]">
<span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
{template.usage_count.toLocaleString()} uses
</span>
</div>

64
frontend/src/components/public/TemplateDetailModal.tsx
View File

@@ -58,29 +58,29 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
onClick={onClose}
>
{/* Backdrop */}
<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
<div className="absolute inset-0 bg-black/60" />
{/* Modal */}
<div
className="glass-card-static relative w-full max-w-2xl max-h-[85vh] flex flex-col"
className="card-flat relative w-full max-w-2xl max-h-[85vh] flex flex-col"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-start justify-between gap-4 p-6 border-b border-border">
<div className="flex items-start justify-between gap-4 p-6 border-b border-[#1e2130]">
<div className="flex items-center gap-3 min-w-0">
{type === 'flow' ? (
<GitBranch className="w-5 h-5 text-primary shrink-0" />
<GitBranch className="w-5 h-5 text-[#22d3ee] shrink-0" />
) : (
<Terminal className="w-5 h-5 text-primary shrink-0" />
<Terminal className="w-5 h-5 text-[#22d3ee] shrink-0" />
)}
<div className="min-w-0">
<h2 className="font-heading text-foreground text-xl font-semibold leading-tight flex items-center gap-2">
<h2 className="font-heading text-[#e2e5eb] text-xl font-semibold leading-tight flex items-center gap-2">
{template.name}
{type === 'script' && (template as PublicScriptDetail).is_verified && (
<CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
<CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
)}
</h2>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mt-1">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mt-1">
{type === 'flow' ? 'Flow Template' : 'Script Template'}
</p>
</div>
@@ -88,7 +88,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
<button
type="button"
onClick={onClose}
className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
className="p-1.5 rounded-lg text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
>
<X className="w-5 h-5" />
</button>
@@ -97,7 +97,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
{/* Body */}
<div className="flex-1 overflow-y-auto p-6 space-y-6">
{template.description && (
<p className="text-muted-foreground text-sm leading-relaxed">
<p className="text-[#848b9b] text-sm leading-relaxed">
{template.description}
</p>
)}
@@ -139,7 +139,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
value={(template as PublicScriptDetail).complexity!}
valueClassName={
complexityColors[(template as PublicScriptDetail).complexity!] ||
'text-foreground'
'text-[#e2e5eb]'
}
/>
)}
@@ -161,14 +161,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
{/* Tags */}
{template.tags.length > 0 && (
<div>
<h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
Tags
</h4>
<div className="flex flex-wrap gap-1.5">
{template.tags.map((tag) => (
<span
key={tag}
className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
>
{tag}
</span>
@@ -180,10 +180,10 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
{/* Flow preview structure */}
{type === 'flow' && (template as PublicFlowDetail).preview_structure && (
<div>
<h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
Flow Preview
</h4>
<div className="bg-card border border-border rounded-xl p-4">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
<PreviewTree structure={(template as PublicFlowDetail).preview_structure!} />
</div>
</div>
@@ -192,22 +192,22 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
{/* Script parameters */}
{type === 'script' && (template as PublicScriptDetail).parameters.length > 0 && (
<div>
<h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
Parameters
</h4>
<div className="space-y-2">
{(template as PublicScriptDetail).parameters.map((param) => (
<div
key={param.name}
className="flex items-start gap-3 bg-card border border-border rounded-xl p-3"
className="flex items-start gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-3"
>
<code className="font-label text-xs text-primary shrink-0">
<code className="font-sans text-xs text-xs text-[#22d3ee] shrink-0">
{param.name}
</code>
<span className="text-muted-foreground text-sm flex-1">
<span className="text-[#848b9b] text-sm flex-1">
{param.description}
</span>
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
{param.type}
</span>
</div>
@@ -219,14 +219,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
{/* Script modules */}
{type === 'script' && (template as PublicScriptDetail).requires_modules.length > 0 && (
<div>
<h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
<h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
Required Modules
</h4>
<div className="flex flex-wrap gap-1.5">
{(template as PublicScriptDetail).requires_modules.map((mod) => (
<span
key={mod}
className="font-label text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
>
<Package className="w-3 h-3" />
{mod}
@@ -238,17 +238,17 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
</div>
{/* Footer */}
<div className="flex items-center justify-between gap-4 p-6 border-t border-border">
<div className="flex items-center justify-between gap-4 p-6 border-t border-[#1e2130]">
<button
type="button"
onClick={onClose}
className="px-4 py-2.5 rounded-[10px] text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
className="px-4 py-2.5 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
>
Close
</button>
<Link
to="/register"
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
>
Sign Up to Use This
<ChevronRight className="w-4 h-4" />
@@ -271,11 +271,11 @@ function MetaStat({
valueClassName?: string
}) {
return (
<div className="bg-card border border-border rounded-xl p-3">
<div className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
<div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3">
<div className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1">
{label}
</div>
<div className={cn('text-foreground text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
<div className={cn('text-[#e2e5eb] text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
{icon}
{value}
</div>
@@ -293,17 +293,17 @@ function PreviewTree({ structure }: { structure: Record<string, unknown> }) {
return (
<div className="text-sm">
<div className="flex items-center gap-2 text-foreground">
<ChevronRight className="w-3.5 h-3.5 text-primary" />
<div className="flex items-center gap-2 text-[#e2e5eb]">
<ChevronRight className="w-3.5 h-3.5 text-[#22d3ee]" />
<span>{name}</span>
</div>
{children.length > 0 && (
<div className="ml-5 mt-1 space-y-1 border-l border-border pl-3">
<div className="ml-5 mt-1 space-y-1 border-l border-[#1e2130] pl-3">
{children.slice(0, 8).map((child, i) => (
<PreviewTree key={i} structure={child} />
))}
{children.length > 8 && (
<span className="text-muted-foreground text-xs">
<span className="text-[#848b9b] text-xs">
+{children.length - 8} more steps...
</span>
)}