Skip to content

Commit ae674ae

Browse files
puneethkothapuneethkotha
committed
Professional polish: remove emojis, fix text tone, add loading splash
- Replace emojis with text labels across dashboard and CLI - 'Failure analysis' instead of 'Flint thinks it knows' - Replace em dashes with periods/colons for professional tone - LoadingScreen splash, favicon.svg, flint logo in nav - Intro wave screen removed (replaced by splash) - AgentNode, AgentReasoningTrace, FailureAnalysisCard: text-only - cli.py, main.py, simulate_cmd.py, mcp/server: no emoji output - Benchmark script: pass/fail instead of checkmarks Made-with: Cursor
1 parent 9690ae2 commit ae674ae

26 files changed

Lines changed: 402 additions & 474 deletions

‎Logo/flint-logo.png‎

282 KB
Loading

‎dashboard/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>" />
5+
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
6+
<link rel="icon" href="/flint-logo.png" type="image/png" sizes="32x32" />
67
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
78
<meta name="color-scheme" content="dark" />
8-
<title>Flint — Workflow Engine</title>
9+
<title>Flint</title>
910
<style>
10-
/* Force dark always — Flint is a dark-only tool */
11+
/* Force dark always. Flint is a dark-only tool */
1112
:root { color-scheme: dark only; }
1213
*, *::before, *::after { box-sizing: border-box; }
1314
html, body, #root {

‎dashboard/public/favicon.svg‎

Lines changed: 12 additions & 0 deletions
Loading

‎dashboard/public/flint-logo.png‎

282 KB
Loading

‎dashboard/src/App.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React, { useState, useEffect } from 'react'
22
import WorkflowCreator from './components/WorkflowCreator'
33
import ExecutionDashboard from './components/ExecutionDashboard'
44
import Templates from './components/Templates'
5-
import Intro from './components/Intro'
65
import TutorialModal from './components/TutorialModal'
6+
import LoadingScreen, { shouldShowSplash } from './components/LoadingScreen'
77
import { useTheme } from './theme'
88

99
type Tab = 'create' | 'dashboard' | 'templates'
@@ -28,6 +28,7 @@ export default function App() {
2828
const [activeTab, setActiveTab] = useState<Tab>('create')
2929
const [visible, setVisible] = useState(true)
3030
const [templatePrefill, setTemplatePrefill] = useState<string | null>(null)
31+
const [showSplash, setShowSplash] = useState(shouldShowSplash)
3132
const { colors } = useTheme()
3233
const apiStatus = useAPIStatus()
3334

@@ -37,14 +38,7 @@ export default function App() {
3738
setTimeout(() => { setActiveTab('create'); setVisible(true) }, 150)
3839
}
3940

40-
// Show intro only once per session
41-
const [showIntro, setShowIntro] = useState(() => !sessionStorage.getItem('flint-intro-seen'))
42-
const handleIntroDone = () => {
43-
sessionStorage.setItem('flint-intro-seen', '1')
44-
setShowIntro(false)
45-
}
46-
47-
// Show tutorial popup once per session, after intro (or on first load if intro skipped)
41+
// Show tutorial popup once per session, after splash
4842
const [showTutorial, setShowTutorial] = useState(() => !sessionStorage.getItem('flint-tutorial-seen'))
4943
const handleTutorialClose = () => {
5044
sessionStorage.setItem('flint-tutorial-seen', '1')
@@ -61,6 +55,9 @@ export default function App() {
6155

6256
return (
6357
<>
58+
{showSplash && (
59+
<LoadingScreen onComplete={() => setShowSplash(false)} />
60+
)}
6461
<style>{`
6562
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
6663
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -163,8 +160,7 @@ export default function App() {
163160
`}</style>
164161

165162
<div style={{ background: colors.pageBg, minHeight: '100vh', color: colors.textPrimary, display: 'flex', flexDirection: 'column', transition: 'background 0.2s' }}>
166-
{showIntro && <Intro onDone={handleIntroDone} />}
167-
{!showIntro && showTutorial && <TutorialModal onClose={handleTutorialClose} />}
163+
{showTutorial && <TutorialModal onClose={handleTutorialClose} />}
168164
{/* Navbar */}
169165
<nav style={{
170166
height: 48, display: 'flex', alignItems: 'center',
@@ -177,9 +173,8 @@ export default function App() {
177173
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, #F59E0B 0%, transparent 50%)' }} />
178174

179175
{/* Brand */}
180-
<div style={{ display: 'flex', alignItems: 'center', gap: 6, marginRight: 20, flexShrink: 0 }}>
181-
<span style={{ color: '#F59E0B', fontSize: 15, lineHeight: 1 }}>⚡</span>
182-
<span style={{ fontFamily: 'ui-monospace, "Cascadia Code", monospace', fontWeight: 600, fontSize: 14, color: colors.textPrimary, letterSpacing: '-0.02em' }}>flint</span>
176+
<div style={{ display: 'flex', alignItems: 'center', marginRight: 20, flexShrink: 0 }}>
177+
<img src="/flint-logo.png" alt="Flint" width={36} height={36} style={{ display: 'block' }} />
183178
</div>
184179

185180
{/* Tabs */}

‎dashboard/src/components/AgentNode/AgentNode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const AgentNode = memo(({ data, selected }: NodeProps<AgentNodeData>) =>
102102
}}
103103
>
104104
{/* Robot emoji + label */}
105-
<div style={{ fontSize: 18, marginBottom: 4 }}>🤖</div>
105+
<div style={{ fontSize: 11, fontWeight: 600, color: '#64748b', marginBottom: 4, textTransform: 'uppercase' }}>Agent</div>
106106
<div
107107
style={{
108108
fontSize: 11,

‎dashboard/src/components/AgentNode/AgentReasoningTrace.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,10 @@ interface AgentReasoningTraceProps {
2020
agentDurationMs?: number
2121
}
2222

23-
const TOOL_ICONS: Record<string, string> = {
24-
web_search: '🔍',
25-
http_fetch: '🌐',
26-
python_exec: '🐍',
23+
const TOOL_LABELS: Record<string, string> = {
24+
web_search: 'Search',
25+
http_fetch: 'HTTP',
26+
python_exec: 'Python',
2727
}
2828

2929
export const AgentReasoningTrace: React.FC<AgentReasoningTraceProps> = ({
@@ -65,7 +65,7 @@ export const AgentReasoningTrace: React.FC<AgentReasoningTraceProps> = ({
6565
🧠 Agent reasoning trace ({trace.length} steps)
6666
</span>
6767
<span style={{ fontSize: 11, color: '#64748b' }}>
68-
{expanded ? '▲ collapse' : '▼ expand'}
68+
{expanded ? 'Collapse' : 'Expand'}
6969
</span>
7070
</button>
7171

@@ -104,11 +104,11 @@ export const AgentReasoningTrace: React.FC<AgentReasoningTraceProps> = ({
104104
fontWeight: 500,
105105
}}
106106
>
107-
<span>{TOOL_ICONS[step.tool] ?? '🔧'}</span>
107+
<span>{TOOL_LABELS[step.tool] ?? 'Tool'}</span>
108108
<span style={{ color: '#a78bfa' }}>{step.tool}</span>
109109
<span style={{ color: '#475569', fontSize: 10 }}>({step.duration_ms}ms)</span>
110110
<span style={{ color: '#475569', fontSize: 10 }}>
111-
{expandedStep === i ? '▲' : '▼'}
111+
{expandedStep === i ? '-' : '+'}
112112
</span>
113113
</button>
114114

‎dashboard/src/components/ExecutionDashboard/JobTable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ function JobRow({ job, selected, index, onSelect }: {
4343
</span>
4444
</td>
4545
<td style={{ padding: '11px 16px', color: colors.textMuted, fontSize: 12 }}>
46-
{job.duration_ms ? `${job.duration_ms}ms` : '—'}
46+
{job.duration_ms ? `${job.duration_ms}ms` : '-'}
4747
</td>
4848
<td style={{ padding: '11px 16px', color: colors.textMuted, fontSize: 12 }}>{job.trigger_type}</td>
4949
<td style={{ padding: '11px 16px', color: colors.textMuted, fontSize: 11 }}>
50-
{job.triggered_at ? new Date(job.triggered_at).toLocaleTimeString() : '—'}
50+
{job.triggered_at ? new Date(job.triggered_at).toLocaleTimeString() : '-'}
5151
</td>
5252
<td style={{ padding: '11px 16px', textAlign: 'right' }}>
5353
<span style={{

‎dashboard/src/components/ExecutionDashboard/MetricsCharts.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ function buildMetrics(jobs: JobResponse[]): DataPoint[] {
2323
const p95 = sorted[Math.floor(sorted.length * 0.95)] ?? 0
2424
return { time, throughput: data.count, p95: Math.round(p95) }
2525
})
26-
if (result.length === 0) return [{ time: '—', throughput: 0, p95: 0 }]
26+
if (result.length === 0) return [{ time: '-', throughput: 0, p95: 0 }]
2727
if (result.length === 1) return [...result, { ...result[0], time: '' }]
2828
return result
2929
}

‎dashboard/src/components/ExecutionDashboard/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ function StatCards({ jobs }: { jobs: JobResponse[] }) {
159159
{ label: 'Total Runs', value: jobs.length },
160160
{ label: 'Completed', value: jobs.filter(j => j.status === 'completed').length },
161161
{ label: 'Failed', value: jobs.filter(j => j.status === 'failed').length },
162-
{ label: 'Avg Duration', value: avgDuration > 0 ? `${avgDuration}ms` : '—' },
162+
{ label: 'Avg Duration', value: avgDuration > 0 ? `${avgDuration}ms` : '-' },
163163
]
164164

165165
return (
@@ -236,15 +236,15 @@ function LiveLogPanel({ job }: { job: JobResponse | null }) {
236236
{lines.map((te: TaskExecution) => (
237237
<div key={te.id}>
238238
{te.status === 'completed' ? (
239-
<span style={{ color: '#22c55e' }}>✓ {te.task_id}</span>
239+
<span style={{ color: '#22c55e' }}>Done {te.task_id}</span>
240240
) : (
241-
<span style={{ color: '#ef4444' }}>✗ {te.task_id}</span>
241+
<span style={{ color: '#ef4444' }}>Failed {te.task_id}</span>
242242
)}
243243
{te.duration_ms != null && te.status === 'completed' && (
244-
<span style={{ color: '#888', marginLeft: 8 }}>— {te.duration_ms}ms</span>
244+
<span style={{ color: '#888', marginLeft: 8 }}>· {te.duration_ms}ms</span>
245245
)}
246246
{te.status === 'failed' && te.error && (
247-
<span style={{ color: '#ef4444', marginLeft: 8 }}>— {te.error}</span>
247+
<span style={{ color: '#ef4444', marginLeft: 8 }}>· {te.error}</span>
248248
)}
249249
</div>
250250
))}

0 commit comments

Comments
 (0)