improve: apply Practical Typography guidelines to frontend

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "uipath-dev"
-version = "0.0.45"
+version = "0.0.46"
 description = "UiPath Developer Console"
 readme = { file = "README.md", content-type = "text/markdown" }
 requires-python = ">=3.11"

src/uipath/dev/server/frontend/src/components/chat/ChatInput.tsx

@@ -36,7 +36,7 @@ export default function ChatInput({ onSend, disabled, placeholder }: Props) {
         onKeyDown={handleKeyDown}
         disabled={disabled}
         placeholder={placeholder ?? "Message..."}
-        className="flex-1 bg-transparent text-xs py-1 focus:outline-none disabled:opacity-40 placeholder:text-[var(--text-muted)]"
+        className="flex-1 bg-transparent text-sm py-1 focus:outline-none disabled:opacity-40 placeholder:text-[var(--text-muted)]"
         style={{ color: "var(--text-primary)" }}
       />
       <button

src/uipath/dev/server/frontend/src/components/chat/ChatInterrupt.tsx

@@ -29,7 +29,7 @@ export default function ChatInterrupt({ interrupt, onRespond }: Props) {
           </span>
           {interrupt.tool_name && (
             <span
-              className="text-[10px] font-mono px-1.5 py-0.5 rounded"
+              className="text-[11px] font-mono px-1.5 py-0.5 rounded"
               style={{
                 background: "color-mix(in srgb, var(--warning) 15%, var(--bg-secondary))",
                 color: "var(--text-primary)",
@@ -41,7 +41,7 @@ export default function ChatInterrupt({ interrupt, onRespond }: Props) {
         </div>
         {interrupt.input_value != null && (
           <pre
-            className="px-3 py-2 text-[11px] font-mono whitespace-pre-wrap break-words overflow-y-auto"
+            className="px-3 py-2 text-[11px] font-mono whitespace-pre-wrap break-words overflow-y-auto leading-normal"
             style={{
               background: "var(--bg-secondary)",
               color: "var(--text-secondary)",
@@ -120,7 +120,7 @@ export default function ChatInterrupt({ interrupt, onRespond }: Props) {
       </div>
       {interrupt.content != null && (
         <div
-          className="px-3 py-2 text-xs"
+          className="px-3 py-2 text-sm leading-relaxed"
           style={{
             background: "var(--bg-secondary)",
             color: "var(--text-secondary)",
@@ -148,7 +148,7 @@ export default function ChatInterrupt({ interrupt, onRespond }: Props) {
             }
           }}
           placeholder="Type your response..."
-          className="flex-1 bg-transparent text-xs py-1 focus:outline-none placeholder:text-[var(--text-muted)]"
+          className="flex-1 bg-transparent text-sm py-1 focus:outline-none placeholder:text-[var(--text-muted)]"
           style={{ color: "var(--text-primary)" }}
         />
         <button

src/uipath/dev/server/frontend/src/components/chat/ChatMessage.tsx

@@ -46,14 +46,14 @@ export default function ChatMessage({ message, onToolCallClick, toolCallIndices
       {message.content && (
         isUser ? (
           <div
-            className="text-xs leading-relaxed pl-2.5"
+            className="text-sm leading-relaxed pl-2.5 max-w-prose"
             style={{ color: "var(--text-primary)" }}
           >
             {message.content}
           </div>
         ) : (
           <div
-            className="text-xs leading-relaxed pl-2.5 chat-markdown"
+            className="text-sm leading-relaxed pl-2.5 max-w-prose chat-markdown"
             style={{ color: "var(--text-secondary)" }}
           >
             <Markdown remarkPlugins={[remarkGfm]}>{message.content}</Markdown>
@@ -67,7 +67,7 @@ export default function ChatMessage({ message, onToolCallClick, toolCallIndices
           {message.tool_calls.map((tc, i) => (
             <span
               key={`${tc.name}-${i}`}
-              className="inline-flex items-center gap-1 text-[10px] font-mono px-1.5 py-0.5 rounded cursor-pointer hover:brightness-125"
+              className="inline-flex items-center gap-1 text-[11px] font-mono px-1.5 py-0.5 rounded cursor-pointer hover:brightness-125"
               style={{
                 background: "var(--bg-primary)",
                 border: "1px solid var(--border)",

src/uipath/dev/server/frontend/src/components/chat/ChatPanel.tsx

@@ -91,7 +91,7 @@ export default function ChatPanel({ messages, runId, runStatus, ws }: Props) {
           className="h-full overflow-y-auto px-3 py-2 space-y-0.5"
         >
           {messages.length === 0 && (
-            <p className="text-[var(--text-muted)] text-xs text-center py-6">
+            <p className="text-[var(--text-muted)] text-sm text-center py-6">
               No messages yet
             </p>
           )}

src/uipath/dev/server/frontend/src/components/graph/GraphPanel.tsx

@@ -853,7 +853,7 @@ export default function GraphPanel({ entrypoint, runId, breakpointNode, breakpoi
               border: `1px solid ${hasAnyBreakpoint ? "var(--error)" : "var(--node-border)"}`,
               borderRadius: 6,
               padding: "4px 10px",
-              fontSize: 11,
+              fontSize: 12,
               cursor: "pointer",
               display: "flex",
               alignItems: "center",

src/uipath/dev/server/frontend/src/components/layout/Sidebar.tsx

@@ -26,26 +26,26 @@ export default function Sidebar({ runs, selectedRunId, onSelectRun, onNewRun }:
           onClick={onNewRun}
           className="flex items-center gap-1.5 cursor-pointer transition-opacity hover:opacity-80"
         >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
             <rect width="24" height="24" rx="4" fill="var(--accent)" />
             <text x="12" y="17" textAnchor="middle" fill="white" fontSize="14" fontWeight="700" fontFamily="Arial, sans-serif">U</text>
           </svg>
           <span
-            className="text-[10px] uppercase tracking-widest font-semibold"
+            className="text-[11px] uppercase tracking-widest font-semibold"
             style={{ color: "var(--text-muted)" }}
           >
             Dev Console
           </span>
         </button>
         <button
           onClick={toggleTheme}
-          className="w-5 h-5 flex items-center justify-center rounded cursor-pointer transition-colors"
+          className="w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-colors"
           style={{ color: "var(--text-muted)" }}
           onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text-primary)"; }}
           onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-muted)"; }}
           title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
         >
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             {theme === "dark" ? (
               <><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></>
             ) : (
@@ -74,7 +74,7 @@ export default function Sidebar({ runs, selectedRunId, onSelectRun, onNewRun }:
 
       {/* Runs label */}
       <div
-        className="px-3 pt-3 pb-1 text-[9px] uppercase tracking-widest font-semibold"
+        className="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest font-semibold"
         style={{ color: "var(--text-muted)" }}
       >
         History
@@ -91,7 +91,7 @@ export default function Sidebar({ runs, selectedRunId, onSelectRun, onNewRun }:
           />
         ))}
         {sorted.length === 0 && (
-          <p className="text-[10px] px-3 py-4 text-center" style={{ color: "var(--text-muted)" }}>
+          <p className="text-xs px-3 py-4 text-center" style={{ color: "var(--text-muted)" }}>
             No runs yet
           </p>
         )}

src/uipath/dev/server/frontend/src/components/logs/LogPanel.tsx

@@ -41,7 +41,7 @@ export default function LogPanel({ logs }: Props) {
 
   return (
     <div className="h-full relative">
-      <div ref={scrollRef} onScroll={handleScroll} className="h-full overflow-y-auto font-mono text-xs">
+      <div ref={scrollRef} onScroll={handleScroll} className="h-full overflow-y-auto font-mono text-xs leading-normal">
         {logs.map((log, i) => {
           const time = new Date(log.timestamp).toLocaleTimeString(undefined, {
             hour12: false,

src/uipath/dev/server/frontend/src/components/runs/NewRunPanel.tsx

@@ -49,14 +49,14 @@ export default function NewRunPanel() {
               style={{ background: entrypointError ? "var(--error)" : "var(--accent)" }}
             />
             <span
-              className="text-[10px] uppercase tracking-widest font-semibold"
+              className="text-xs uppercase tracking-widest font-semibold"
               style={{ color: "var(--text-muted)" }}
             >
               New Run
             </span>
           </div>
           {!entrypointError && (
-            <p className="text-xs" style={{ color: "var(--text-muted)" }}>
+            <p className="text-sm" style={{ color: "var(--text-muted)" }}>
               {entrypoints.length > 1 ? "Select an entrypoint and choose a mode" : "Choose a mode"}
             </p>
           )}
@@ -204,7 +204,7 @@ function ModeCard({
       >
         {title}
       </h3>
-      <p className="text-[11px] leading-relaxed" style={{ color: "var(--text-muted)" }}>
+      <p className="text-xs leading-relaxed" style={{ color: "var(--text-muted)" }}>
         {description}
       </p>
     </button>

src/uipath/dev/server/frontend/src/components/runs/RunDetailsPanel.tsx

@@ -197,7 +197,7 @@ export default function RunDetailsPanel({ run, ws }: Props) {
             <button
               key={tab.id}
               onClick={() => setSidebarTab(tab.id)}
-              className="px-2 py-0.5 h-5 text-[10px] uppercase tracking-wider font-semibold rounded transition-colors cursor-pointer"
+              className="px-2 py-0.5 h-5 text-[11px] uppercase tracking-wider font-semibold rounded transition-colors cursor-pointer"
               style={{
                 color:
                   sidebarTab === tab.id
@@ -301,12 +301,12 @@ function IOView({ run }: { run: RunSummary }) {
               {run.error.code}
             </span>
           </div>
-          <div className="p-4 text-xs" style={{ background: "var(--bg-secondary)" }}>
+          <div className="p-4 text-xs leading-normal" style={{ background: "var(--bg-secondary)" }}>
             <div className="font-semibold mb-2" style={{ color: "var(--text-primary)" }}>
               {run.error.title}
             </div>
             <pre
-              className="whitespace-pre-wrap font-mono text-[11px]"
+              className="whitespace-pre-wrap font-mono text-[11px] max-w-prose"
               style={{ color: "var(--text-secondary)" }}
             >
               {run.error.detail}
@@ -343,7 +343,7 @@ function DataSection({
     <div>
       <div className="flex items-center gap-2 mb-2">
         <div className="w-1 h-4 rounded-full" style={{ background: color }} />
-        <span className="text-xs font-semibold uppercase" style={{ color }}>{title}</span>
+        <span className="text-xs font-semibold uppercase tracking-wider" style={{ color }}>{title}</span>
         {copyText && (
           <button
             onClick={copy}

src/uipath/dev/server/frontend/src/components/runs/RunEventsPanel.tsx

@@ -43,7 +43,7 @@ export default function RunEventsPanel({ events, runStatus }: Props) {
     <div
       ref={scrollRef}
       onScroll={handleScroll}
-      className="h-full overflow-y-auto font-mono text-xs"
+      className="h-full overflow-y-auto font-mono text-xs leading-normal"
     >
       {events.map((event, i) => {
         const time = new Date(event.timestamp).toLocaleTimeString(undefined, {

src/uipath/dev/server/frontend/src/components/runs/SetupView.tsx

@@ -215,7 +215,7 @@ export default function SetupView({ entrypoint, mode, ws, onRunCreated }: Props)
       >
         {/* Header */}
         <div
-          className="px-4 text-xs font-semibold uppercase border-b flex items-center gap-2 h-[33px]"
+          className="px-4 text-xs font-semibold uppercase tracking-wider border-b flex items-center gap-2 h-[33px]"
           style={{
             color: "var(--text-muted)",
             borderColor: "var(--border)",
@@ -250,12 +250,12 @@ export default function SetupView({ entrypoint, mode, ws, onRunCreated }: Props)
           </svg>
           <div className="text-center space-y-1.5">
             <p
-              className="text-xs font-medium"
+              className="text-sm font-medium"
               style={{ color: "var(--text-secondary)" }}
             >
               {isRunMode ? "Ready to execute" : "Ready to chat"}
             </p>
-            <p className="text-[11px]" style={{ color: "var(--text-muted)" }}>
+            <p className="text-xs leading-relaxed" style={{ color: "var(--text-muted)" }}>
               Click nodes to set breakpoints
               {isRunMode ? (
                 <>,<br />configure input below, then run</>
@@ -366,7 +366,7 @@ export default function SetupView({ entrypoint, mode, ws, onRunCreated }: Props)
               }}
               disabled={loading || loadingSchema}
               placeholder={loading ? "Starting..." : "Message..."}
-              className="flex-1 bg-transparent text-xs py-1 focus:outline-none disabled:opacity-40 placeholder:text-[var(--text-muted)]"
+              className="flex-1 bg-transparent text-sm py-1 focus:outline-none disabled:opacity-40 placeholder:text-[var(--text-muted)]"
               style={{ color: "var(--text-primary)" }}
             />
             <button

src/uipath/dev/server/frontend/src/components/traces/SpanDetails.tsx

@@ -128,7 +128,7 @@ export default function SpanDetails({ span }: Props) {
   ];
 
   return (
-    <div className="overflow-y-auto h-full text-xs">
+    <div className="overflow-y-auto h-full text-xs leading-normal">
       {/* Header: name + pills */}
       <div
         className="px-2 py-1.5 border-b flex items-center gap-2 flex-wrap"
@@ -138,7 +138,7 @@ export default function SpanDetails({ span }: Props) {
           {span.span_name}
         </span>
         <span
-          className="shrink-0 inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase"
+          className="shrink-0 inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider"
           style={{
             background: `color-mix(in srgb, ${status.color} 15%, var(--bg-secondary))`,
             color: status.color,

src/uipath/dev/server/frontend/src/components/traces/TraceTree.tsx

@@ -337,7 +337,7 @@ function TreeNodeView({
       <button
         data-span-id={span.span_id}
         onClick={() => onSelect(span)}
-        className="w-full text-left text-xs py-1.5 pr-2 flex items-center gap-1.5 transition-colors relative"
+        className="w-full text-left text-xs leading-normal py-1.5 pr-2 flex items-center gap-1.5 transition-colors relative"
         style={{
           paddingLeft: `${indent + 4}px`,
           background: isSelected

src/uipath/dev/server/frontend/src/styles/global.css

@@ -7,7 +7,7 @@
   --bg-secondary: #1e293b;
   --bg-tertiary: #334155;
   --bg-hover: #1e293b;
-  --text-primary: #f1f5f9;
+  --text-primary: #cbd5e1;
   --text-secondary: #94a3b8;
   --text-muted: #64748b;
   --border: #334155;

src/uipath/dev/server/static/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>UiPath Developer Console</title>
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <script type="module" crossorigin src="/assets/index-oogYitGy.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-6F6REBFy.css">
+    <script type="module" crossorigin src="/assets/index-BCpwNbOJ.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-VWiU7WyX.css">
   </head>
   <body>
     <div id="root"></div>