fix(apollo-wind): address PR #219 review feedback

- Type internalRowSelection state as Record<string, boolean> (data-table)
- Sanitize CSS tokens and remove dangerouslySetInnerHTML (chart)
- Fix zero-value hidden by truthiness check in chart tooltip
- Add onTabChange prop and wire tab buttons (flow-properties-expanded)
- Add type="button" to all <button> elements in custom components
- Rename Panel → MaestroPanel to avoid generic naming collisions
- Remove unused imports (Input, FileText, MoreHorizontal, CreditCard, Settings)

Made-with: Cursor

Author: 1980computer

packages/apollo-wind/src/components/custom/chat-composer.tsx

@@ -68,14 +68,14 @@ export function ChatComposer({
         <div className="flex items-center justify-between">
           {/* Left actions */}
           <div className="flex items-center gap-1">
-            <button
+            <button type="button"
               type="button"
               className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80"
               aria-label="Add attachment"
             >
               <Plus className="h-5 w-5 text-foreground-inverse" />
             </button>
-            <button
+            <button type="button"
               type="button"
               className="flex h-8 w-8 items-center justify-center rounded-2xl border border-border-inverse bg-surface-inverse transition-opacity hover:opacity-80"
               aria-label="Add workflow"
@@ -85,7 +85,7 @@ export function ChatComposer({
           </div>
 
           {/* Submit button */}
-          <button
+          <button type="button"
             type="button"
             className="flex h-8 w-8 items-center justify-center rounded-2xl bg-brand transition-opacity hover:opacity-90"
             onClick={handleSubmit}

packages/apollo-wind/src/components/custom/chat-prompt-suggestions.tsx

@@ -37,7 +37,7 @@ export function PromptSuggestions({
   return (
     <div className={cn('flex flex-col items-start gap-2', className)}>
       {suggestions.map((suggestion) => (
-        <button
+        <button type="button"
           key={suggestion.id}
           className="flex h-10 items-center rounded-xl border border-border bg-surface-overlay px-4 py-2.5 text-sm font-medium leading-5 text-foreground transition-colors hover:bg-surface-hover"
           onClick={() => onSelect?.(suggestion)}

packages/apollo-wind/src/components/custom/chat-steps-view.tsx

@@ -89,7 +89,7 @@ function ActionButton({
   onClick?: () => void;
 }) {
   return (
-    <button
+    <button type="button"
       className="flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:border-border-hover hover:text-foreground-hover"
       onClick={onClick}
     >
@@ -231,7 +231,7 @@ export function StepsView({
       <div className="flex min-h-[78px] shrink-0 items-center gap-8 overflow-x-auto px-10 py-5">
         {/* Back + Title */}
         <div className="flex shrink-0 items-center gap-4">
-          <button
+          <button type="button"
             type="button"
             className="shrink-0 text-foreground transition-colors hover:text-foreground"
             onClick={onBack}

packages/apollo-wind/src/components/custom/flow-properties-bar.tsx

@@ -62,7 +62,7 @@ export function PropertiesBar({
 
       {/* Right: Properties / Variables tabs */}
       <div className="flex h-10 items-center rounded-xl bg-surface-overlay border border-border-deep p-1">
-        <button
+        <button type="button"
           className={cn(
             'flex h-8 items-center gap-2 rounded-[10px] px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground-hover',
             activeTab === 'properties' && 'text-foreground-subtle'
@@ -75,7 +75,7 @@ export function PropertiesBar({
           <TableProperties className="h-5 w-5" />
           <span>Properties</span>
         </button>
-        <button
+        <button type="button"
           className={cn(
             'flex h-7 items-center gap-2 rounded-xl px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors',
             activeTab === 'variables' && 'text-foreground-subtle'

packages/apollo-wind/src/components/custom/flow-properties-expanded.tsx

@@ -25,6 +25,8 @@ export interface PropertiesExpandedProps {
   nodeType?: string;
   /** Active top tab: 'properties' | 'variables' */
   activeTab?: 'properties' | 'variables';
+  /** Callback when top tab is changed */
+  onTabChange?: (tab: 'properties' | 'variables') => void;
   /** Callback when close button is clicked */
   onClose?: () => void;
 }
@@ -44,6 +46,7 @@ function MiniTab({
 }) {
   return (
     <button
+      type="button"
       className={cn(
         'flex h-6 items-center rounded-lg px-2 text-xs font-medium leading-5',
         active ? 'bg-surface text-foreground' : 'text-foreground-subtle'
@@ -141,6 +144,7 @@ export function PropertiesExpanded({
   nodeName = 'Validate invoice',
   nodeType = 'AI Agent',
   activeTab = 'properties',
+  onTabChange,
   onClose,
 }: PropertiesExpandedProps) {
   return (
@@ -171,23 +175,27 @@ export function PropertiesExpanded({
         <div className="flex items-center gap-2">
           <div className="flex h-10 items-center rounded-xl border border-border-deep bg-surface-overlay p-1">
             <button
+              type="button"
               className={cn(
                 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
                 activeTab === 'properties'
                   ? 'border border-border bg-surface text-foreground'
                   : 'text-foreground-subtle'
               )}
+              onClick={() => onTabChange?.('properties')}
             >
               <TableProperties className="h-5 w-5" />
               <span>Properties</span>
             </button>
             <button
+              type="button"
               className={cn(
                 'flex h-8 items-center gap-2 rounded-[10px] px-3 py-2 text-sm font-medium leading-5 transition-colors',
                 activeTab === 'variables'
                   ? 'border border-border bg-surface text-foreground'
                   : 'text-foreground-subtle'
               )}
+              onClick={() => onTabChange?.('variables')}
             >
               <Variable className="h-5 w-5" />
               <span>Variables</span>

packages/apollo-wind/src/components/custom/flow-properties-simple.tsx

@@ -105,7 +105,7 @@ function FieldItem({
           {field.required && '*'}
         </span>
         {field.showGraphControl && (
-          <button
+          <button type="button"
             className="flex h-6 w-6 items-center justify-center rounded-lg bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
             onClick={() => onGraphControl?.(field.label)}
             aria-label="Graph control"
@@ -148,7 +148,7 @@ function FieldItem({
             placeholder={field.placeholder}
             className="h-full flex-1 rounded-none border-0 bg-transparent text-sm font-medium text-foreground-muted shadow-none placeholder:text-foreground-subtle focus-visible:ring-0"
           />
-          <button
+          <button type="button"
             type="button"
             className="flex h-full w-[50px] items-center justify-center border-l border-border text-foreground-muted transition-colors hover:text-foreground"
             aria-label="Browse files"
@@ -198,7 +198,7 @@ const sampleJsonLines = [
 
 function EditorToolbarButton({ icon, label }: { icon: React.ReactNode; label: string }) {
   return (
-    <button
+    <button type="button"
       className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
       aria-label={label}
     >
@@ -217,7 +217,7 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
         <span className="text-base font-semibold leading-5 tracking-[-0.4px] text-foreground">
           JSON editor
         </span>
-        <button
+        <button type="button"
           className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
           onClick={onClose}
           aria-label="Close editor"
@@ -243,7 +243,7 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
               <FileJson className="h-4 w-4" />
               <span className="text-sm font-medium leading-none">script.js</span>
             </div>
-            <button
+            <button type="button"
               className="flex h-5 w-5 items-center justify-center text-foreground-muted transition-colors hover:text-foreground"
               aria-label="Refresh"
             >
@@ -274,13 +274,13 @@ function JsonEditorDrawer({ open, onClose }: { open: boolean; onClose: () => voi
 
       {/* ── Footer ──────────────────────────────────────────── */}
       <div className="flex items-center justify-end gap-2 px-6 py-4">
-        <button
+        <button type="button"
           className="flex h-10 items-center gap-2 rounded-xl border border-border px-4 py-2 text-sm font-medium leading-5 text-foreground-subtle transition-colors hover:text-foreground"
           onClick={onClose}
         >
           <span>Cancel</span>
         </button>
-        <button
+        <button type="button"
           className="flex h-10 items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold leading-5 text-foreground-inverse transition-colors hover:bg-brand/90"
           onClick={onClose}
         >
@@ -346,7 +346,7 @@ export function PropertiesSimple({
               {title}
             </span>
           </div>
-          <button
+          <button type="button"
             className="flex h-10 w-10 items-center justify-center rounded-xl bg-surface-overlay text-foreground-muted transition-colors hover:text-foreground"
             onClick={onClose}
             aria-label="Close properties"

packages/apollo-wind/src/components/custom/global-header.tsx

@@ -79,7 +79,7 @@ function HeaderIconButton({
   disabled?: boolean;
 }) {
   return (
-    <button
+    <button type="button"
       className={cn(
         'flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors',
         disabled ? 'cursor-default opacity-50' : 'hover:text-foreground'
@@ -102,7 +102,7 @@ function NotificationsDropdown({ themeClass }: { themeClass: string }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
+        <button type="button"
           className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
           aria-label="Notifications"
         >
@@ -152,7 +152,7 @@ function HelpDropdown({ themeClass }: { themeClass: string }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
+        <button type="button"
           className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
           aria-label="Help"
         >
@@ -197,7 +197,7 @@ function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeC
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <button className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
+        <button type="button" className="flex items-center gap-1 rounded-lg px-2 py-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
           <span>
             Tenant: <span className="font-medium">{selected}</span>
           </span>
@@ -210,7 +210,7 @@ function TenantSelector({ tenantName, themeClass }: { tenantName: string; themeC
         className={cn(themeClass, 'w-56 border-border bg-surface-overlay p-1')}
       >
         {tenants.map((tenant) => (
-          <button
+          <button type="button"
             key={tenant.id}
             className={cn(
               'flex w-full items-center rounded-md px-3 py-2 text-sm transition-colors hover:bg-surface-hover',
@@ -236,7 +236,7 @@ function AvatarDropdown({ themeClass }: { themeClass: string }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button className="rounded-full focus:outline-none" aria-label="User menu">
+        <button type="button" className="rounded-full focus:outline-none" aria-label="User menu">
           <Avatar className="h-6 w-6 bg-brand">
             <AvatarFallback className="bg-brand text-[10px] font-bold text-foreground-on-accent">
               UI
@@ -327,7 +327,7 @@ export function MaestroHeader({
       >
         {/* Left: waffle + title */}
         <div className="flex items-center gap-3">
-          <button
+          <button type="button"
             className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted transition-colors hover:text-foreground"
             onClick={() => menuContent && setMenuOpen((prev) => !prev)}
             aria-label="App launcher"

packages/apollo-wind/src/components/custom/panel-delegate.tsx

@@ -80,7 +80,7 @@ function ExpandedNavItem({
 
   if (!isExpandable) {
     return (
-      <button
+      <button type="button"
         className="flex h-10 w-full items-center gap-2 rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover"
         onClick={onToggle}
       >
@@ -95,7 +95,7 @@ function ExpandedNavItem({
   return (
     <Collapsible open={isOpen} onOpenChange={() => onToggle()}>
       <CollapsibleTrigger asChild>
-        <button className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover">
+        <button type="button" className="flex h-10 w-full items-center justify-between rounded-2xl px-1 text-foreground-muted transition-colors hover:bg-surface-hover">
           <div className="flex items-center gap-2">
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
               {item.icon}
@@ -112,7 +112,7 @@ function ExpandedNavItem({
       <CollapsibleContent>
         <div className="flex flex-col">
           {item.children?.map((child) => (
-            <button
+            <button type="button"
               key={child.id}
               className={cn(
                 'flex h-10 items-center rounded-2xl pl-12 pr-3 text-sm font-medium text-foreground-muted transition-colors hover:bg-surface-hover',
@@ -143,7 +143,7 @@ function CollapsedNavItem({
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <button
+        <button type="button"
           className={cn(
             'flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground',
             isActive && 'text-brand-foreground'
@@ -247,22 +247,22 @@ export function DelegatePanel({
             {panelOpen && (
               <div className="flex flex-1 items-center justify-between">
                 <div className="flex items-center gap-[18px]">
-                  <button
+                  <button type="button"
                     type="button"
                     className="text-foreground-muted transition-colors hover:text-foreground"
                     aria-label="New conversation"
                   >
                     <MessageCirclePlus className="h-5 w-5" />
                   </button>
-                  <button
+                  <button type="button"
                     type="button"
                     className="text-foreground-muted transition-colors hover:text-foreground"
                     aria-label="Picture in picture"
                   >
                     <PictureInPicture2 className="h-5 w-5" />
                   </button>
                 </div>
-                <button
+                <button type="button"
                   type="button"
                   className="text-foreground-muted transition-colors hover:text-foreground"
                   onClick={() => setPanelOpen(false)}
@@ -301,7 +301,7 @@ export function DelegatePanel({
                 {/* Expand button */}
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <button
+                    <button type="button"
                       className="flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground"
                       onClick={() => setPanelOpen(true)}
                     >

packages/apollo-wind/src/components/custom/panel-flow.tsx

@@ -81,7 +81,7 @@ function IconRail({
           {navItems.map((item) => (
             <Tooltip key={item.id}>
               <TooltipTrigger asChild>
-                <button
+                <button type="button"
                   className={cn(
                     'flex h-12 w-full items-center justify-center text-foreground-muted transition-colors hover:text-foreground',
                     activeId === item.id && 'text-brand-foreground'
@@ -161,22 +161,22 @@ function ChatInput() {
       </div>
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <button
+          <button type="button"
             type="button"
             className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground"
             aria-label="Add attachment"
           >
             <Plus className="h-5 w-5" />
           </button>
-          <button
+          <button type="button"
             type="button"
             className="flex h-8 w-8 items-center justify-center rounded-lg text-foreground-muted hover:text-foreground"
             aria-label="Add workflow"
           >
             <Workflow className="h-5 w-5" />
           </button>
         </div>
-        <button
+        <button type="button"
           type="button"
           className="flex h-8 w-8 items-center justify-center rounded-full bg-brand text-foreground-on-accent"
           aria-label="Submit message"
@@ -209,7 +209,7 @@ function ExpandedPanel({
           <span className="font-bold text-foreground">Flow</span>
           <span className="font-medium text-foreground-subtle">Autopilot</span>
         </div>
-        <button
+        <button type="button"
           className="text-foreground-muted transition-colors hover:text-foreground"
           onClick={onClose}
           aria-label="Close panel"