chore: minor UI fixes

ui/src/app/usage/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowDownLeft, ArrowUpRight, ChevronLeft, ChevronRight, Download, Globe, MessageSquare, Phone } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Download, Globe } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useId, useState } from 'react';
 import TimezoneSelect, { type ITimezoneOption } from 'react-timezone-select';
@@ -8,6 +8,7 @@ import { toast } from 'sonner';
 
 import { downloadUsageRunsReportApiV1OrganizationsUsageRunsReportGet, getDailyUsageBreakdownApiV1OrganizationsUsageDailyBreakdownGet, getMpsCreditsApiV1OrganizationsUsageMpsCreditsGet, getUsageHistoryApiV1OrganizationsUsageRunsGet } from '@/client/sdk.gen';
 import type { DailyUsageBreakdownResponse, MpsCreditsResponse, UsageHistoryResponse, WorkflowRunUsageResponse } from '@/client/types.gen';
+import { CallTypeCell } from '@/components/CallTypeCell';
 import { DailyUsageTable } from '@/components/DailyUsageTable';
 import { FilterBuilder } from '@/components/filters/FilterBuilder';
 import { MediaPreviewButton, MediaPreviewDialog } from '@/components/MediaPreviewDialog';
@@ -23,7 +24,6 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useUserConfig } from '@/context/UserConfigContext';
 import { useAuth } from '@/lib/auth';
 import { usageFilterAttributes } from '@/lib/filterAttributes';
@@ -33,53 +33,6 @@ import { ActiveFilter, DateRangeValue } from '@/types/filters';
 // Get local timezone
 const getLocalTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-// Collapse a run's `mode` (from WorkflowRunMode in api/enums.py) into a coarse
-// channel. Telephony providers (twilio, plivo, telnyx, vonage, vobiz, cloudonix,
-// ari, ...) are phone calls; webrtc/smallwebrtc are browser web calls; textchat
-// is a text conversation. Anything unknown falls back to "phone".
-const WEB_CALL_MODES = new Set(['webrtc', 'smallwebrtc']);
-const TEXT_CHAT_MODES = new Set(['textchat']);
-
-const getCallChannel = (mode?: string | null): 'phone' | 'web' | 'chat' => {
-    if (mode && TEXT_CHAT_MODES.has(mode)) return 'chat';
-    if (mode && WEB_CALL_MODES.has(mode)) return 'web';
-    return 'phone';
-};
-
-// Render the call's channel (mode) and direction (call_type) as two compact
-// icons in a single cell, with a tooltip spelling out the full label. The
-// channel icon shows medium/how (phone / web / chat); the colored arrow shows
-// direction (inbound = incoming/emerald, outbound = outgoing/blue).
-const CallTypeCell = ({ mode, callType }: { mode?: string | null; callType?: string | null }) => {
-    if (!mode && !callType) {
-        return <span className="text-sm text-muted-foreground">-</span>;
-    }
-
-    const channel = getCallChannel(mode);
-    const ChannelIcon = channel === 'chat' ? MessageSquare : channel === 'web' ? Globe : Phone;
-    const channelLabel = channel === 'chat' ? 'Text chat' : channel === 'web' ? 'Web call' : 'Phone call';
-
-    const isInbound = callType === 'inbound';
-    const DirectionIcon = isInbound ? ArrowDownLeft : ArrowUpRight;
-    const directionLabel = isInbound ? 'Inbound' : 'Outbound';
-
-    return (
-        <Tooltip>
-            <TooltipTrigger asChild>
-                <span className="inline-flex items-center gap-1">
-                    <ChannelIcon className="h-4 w-4 text-muted-foreground" />
-                    <DirectionIcon
-                        className={`h-3.5 w-3.5 ${isInbound ? 'text-emerald-600' : 'text-blue-600'}`}
-                    />
-                </span>
-            </TooltipTrigger>
-            <TooltipContent sideOffset={4}>
-                {directionLabel} · {channelLabel}
-            </TooltipContent>
-        </Tooltip>
-    );
-};
-
 export default function UsagePage() {
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -677,4 +630,3 @@ export default function UsagePage() {
         </div>
     );
 }
-

ui/src/app/workflow/[workflowId]/RenderWorkflow.tsx

@@ -25,7 +25,7 @@ import CustomEdge from "../../../components/flow/edges/CustomEdge";
 import { GenericNode } from "../../../components/flow/nodes/GenericNode";
 import { PhoneCallDialog } from './components/PhoneCallDialog';
 import { VersionHistoryPanel, WorkflowVersion } from './components/VersionHistoryPanel';
-import type { WorkflowRuntimeFocusMode, WorkflowRuntimeNodeTransition } from './components/workflow-tester/types';
+import type { WorkflowRuntimeNodeTransition } from './components/workflow-tester/types';
 import { WorkflowEditorHeader } from "./components/WorkflowEditorHeader";
 import { WorkflowTesterPanel } from './components/WorkflowTesterPanel';
 import { WorkflowProvider } from "./contexts/WorkflowContext";
@@ -94,9 +94,7 @@ function RenderWorkflow({
     const [documents, setDocuments] = useState<DocumentResponseSchema[] | undefined>(undefined);
     const [tools, setTools] = useState<ToolResponse[] | undefined>(undefined);
     const [recordings, setRecordings] = useState<RecordingResponseSchema[]>([]);
-    const [runtimeFocusMode, setRuntimeFocusMode] = useState<WorkflowRuntimeFocusMode>("follow");
     const [activeRuntimeNodeId, setActiveRuntimeNodeId] = useState<string | null>(null);
-    const [runtimePulseNonce, setRuntimePulseNonce] = useState(0);
 
     const {
         rfInstance,
@@ -387,12 +385,11 @@ function RenderWorkflow({
                           data: {
                               ...node.data,
                               runtime_active: true,
-                              runtime_pulse_nonce: runtimePulseNonce,
                           },
                       }
                     : node,
             ),
-        [activeRuntimeNodeId, nodes, runtimePulseNonce],
+        [activeRuntimeNodeId, nodes],
     );
 
     const handleRuntimeNodeTransition = useCallback(
@@ -404,9 +401,8 @@ function RenderWorkflow({
             }
 
             setActiveRuntimeNodeId(nodeId);
-            setRuntimePulseNonce((value) => value + 1);
 
-            if (runtimeFocusMode !== "follow" || !instance.viewportInitialized) {
+            if (!instance.viewportInitialized) {
                 return;
             }
 
@@ -417,7 +413,7 @@ function RenderWorkflow({
                 maxZoom: 0.9,
             });
         },
-        [rfInstance, runtimeFocusMode],
+        [rfInstance],
     );
 
     // Guard saveWorkflow so it's a no-op when viewing a historical version.
@@ -669,8 +665,6 @@ function RenderWorkflow({
                                     showWebCallOnboarding={shouldShowWebCallOnboarding}
                                     isVisible={isDesktopViewport}
                                     onClose={() => setIsTesterRailOpen(false)}
-                                    runtimeFocusMode={runtimeFocusMode}
-                                    onRuntimeFocusModeChange={setRuntimeFocusMode}
                                     onRuntimeNodeTransition={handleRuntimeNodeTransition}
                                 />
                             </aside>
@@ -686,8 +680,6 @@ function RenderWorkflow({
                                 disabledReason={testerDisabledReason}
                                 showWebCallOnboarding={shouldShowWebCallOnboarding}
                                 isVisible={isTesterSheetOpen}
-                                runtimeFocusMode={runtimeFocusMode}
-                                onRuntimeFocusModeChange={setRuntimeFocusMode}
                                 onRuntimeNodeTransition={handleRuntimeNodeTransition}
                             />
                         </SheetContent>

ui/src/app/workflow/[workflowId]/components/WorkflowTesterPanel.tsx

@@ -19,8 +19,8 @@ import { cn, getRandomId } from "@/lib/utils";
 import { AiSimulatorPlaceholder } from "./workflow-tester/AiSimulatorPlaceholder";
 import { EmbeddedVoiceTester } from "./workflow-tester/EmbeddedVoiceTester";
 import { ManualTextChatPanel } from "./workflow-tester/ManualTextChatPanel";
-import { ChatModeToggle, DisabledNotice, EmptyState, RuntimeFocusToggle } from "./workflow-tester/shared";
-import type { WorkflowRuntimeFocusMode, WorkflowRuntimeNodeTransition } from "./workflow-tester/types";
+import { ChatModeToggle, DisabledNotice, EmptyState } from "./workflow-tester/shared";
+import type { WorkflowRuntimeNodeTransition } from "./workflow-tester/types";
 import { extractSdkErrorMessage, getErrorMessage } from "./workflow-tester/utils";
 
 interface WorkflowTesterPanelProps {
@@ -32,8 +32,6 @@ interface WorkflowTesterPanelProps {
     isVisible?: boolean;
     className?: string;
     onClose?: () => void;
-    runtimeFocusMode: WorkflowRuntimeFocusMode;
-    onRuntimeFocusModeChange: (mode: WorkflowRuntimeFocusMode) => void;
     onRuntimeNodeTransition?: (transition: WorkflowRuntimeNodeTransition) => void;
 }
 
@@ -46,8 +44,6 @@ export function WorkflowTesterPanel({
     isVisible = true,
     className,
     onClose,
-    runtimeFocusMode,
-    onRuntimeFocusModeChange,
     onRuntimeNodeTransition,
 }: WorkflowTesterPanelProps) {
     const auth = useAuth();
@@ -178,13 +174,6 @@ export function WorkflowTesterPanel({
                             </Button>
                         ) : null}
                     </div>
-                    <div className="mt-3 flex items-center justify-between gap-3">
-                        <p className="text-xs text-muted-foreground">Canvas sync</p>
-                        <RuntimeFocusToggle
-                            value={runtimeFocusMode}
-                            onChange={onRuntimeFocusModeChange}
-                        />
-                    </div>
                 </div>
 
                 <TabsContent value="audio" className="min-h-0 flex-1 px-4 py-4">

ui/src/app/workflow/[workflowId]/components/workflow-tester/shared.tsx

@@ -81,42 +81,6 @@ export function ChatModeToggle({
     );
 }
 
-export function RuntimeFocusToggle({
-    value,
-    onChange,
-}: {
-    value: "pulse" | "follow";
-    onChange: (next: "pulse" | "follow") => void;
-}) {
-    const options: Array<{ id: "pulse" | "follow"; label: string }> = [
-        { id: "pulse", label: "Pulse" },
-        { id: "follow", label: "Follow" },
-    ];
-
-    return (
-        <div className="inline-flex items-center gap-0.5 rounded-md border border-border/70 bg-muted/40 p-0.5">
-            {options.map((option) => {
-                const active = option.id === value;
-                return (
-                    <button
-                        key={option.id}
-                        type="button"
-                        onClick={() => onChange(option.id)}
-                        className={cn(
-                            "rounded-[5px] px-2.5 py-1 text-xs font-medium transition",
-                            active
-                                ? "bg-background text-foreground shadow-xs"
-                                : "text-muted-foreground hover:text-foreground",
-                        )}
-                    >
-                        {option.label}
-                    </button>
-                );
-            })}
-        </div>
-    );
-}
-
 export function TypingIndicator() {
     return (
         <div className="flex justify-start">

ui/src/app/workflow/[workflowId]/components/workflow-tester/types.ts

@@ -47,8 +47,6 @@ export interface TurnActionState {
     type: "rewind" | "edit";
 }
 
-export type WorkflowRuntimeFocusMode = "pulse" | "follow";
-
 export type WorkflowRuntimeNodeTransition = ConversationNodeTransitionItem;
 
 export const EMPTY_TEXT_CHAT_TURNS: TextChatTurn[] = [];