machinaos 0.0.76 → 0.0.78

package/client/src/components/onboarding/steps/ConceptsStep.tsx

@@ -1,15 +1,6 @@
 import React from 'react';
 import { LayoutGrid, GitBranch, Bot, Wrench, ArrowLeftRight } from 'lucide-react';
-
-type NodeRole = 'model' | 'skill' | 'agent' | 'workflow' | 'trigger';
-
-const ROLE_CLASSES: Record<NodeRole, { card: string; text: string }> = {
-  model:    { card: 'bg-node-model-soft border-node-model-border',       text: 'text-node-model' },
-  skill:    { card: 'bg-node-skill-soft border-node-skill-border',       text: 'text-node-skill' },
-  agent:    { card: 'bg-node-agent-soft border-node-agent-border',       text: 'text-node-agent' },
-  workflow: { card: 'bg-node-workflow-soft border-node-workflow-border', text: 'text-node-workflow' },
-  trigger:  { card: 'bg-node-trigger-soft border-node-trigger-border',   text: 'text-node-trigger' },
-};
+import { NODE_ROLE_CLASSES, type NodeRole } from '../nodeRoleClasses';
 
 const concepts: { Icon: typeof LayoutGrid; title: string; desc: string; role: NodeRole }[] = [
   {
@@ -56,7 +47,7 @@ const ConceptsStep: React.FC = () => {
 
       <div className="flex w-full flex-col gap-2.5">
         {concepts.map((c) => {
-          const classes = ROLE_CLASSES[c.role];
+          const classes = NODE_ROLE_CLASSES[c.role];
           return (
             <div
               key={c.title}

package/client/src/components/onboarding/steps/GetStartedStep.tsx

@@ -2,15 +2,7 @@ import React from 'react';
 import { Play, FlaskConical, BookOpen, Settings } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-
-type NodeRole = 'skill' | 'agent' | 'model' | 'workflow';
-
-const ROLE_CLASSES: Record<NodeRole, { card: string; text: string }> = {
-  skill:    { card: 'bg-node-skill-soft border-node-skill-border',       text: 'text-node-skill' },
-  agent:    { card: 'bg-node-agent-soft border-node-agent-border',       text: 'text-node-agent' },
-  model:    { card: 'bg-node-model-soft border-node-model-border',       text: 'text-node-model' },
-  workflow: { card: 'bg-node-workflow-soft border-node-workflow-border', text: 'text-node-workflow' },
-};
+import { NODE_ROLE_CLASSES, type NodeRole } from '../nodeRoleClasses';
 
 type Tip = {
   Icon: typeof Play;
@@ -69,7 +61,7 @@ const GetStartedStep: React.FC = () => {
 
       <div className="flex w-full flex-col gap-2.5">
         {tips.map(({ Icon, title, desc, role }, i) => {
-          const classes = ROLE_CLASSES[role];
+          const classes = NODE_ROLE_CLASSES[role];
           return (
             <Card key={i} className={classes.card}>
               <CardContent className="flex items-start gap-2.5 p-3">

package/client/src/components/parameterPanel/InputSection.tsx

@@ -155,7 +155,7 @@ const DraggableVar: React.FC<DraggableVarProps> = ({
 // ---------------------------------------------------------------------------
 
 const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) => {
-  const { currentWorkflow } = useAppStore();
+  const currentWorkflow = useAppStore((s) => s.currentWorkflow);
   const { getNodeOutput, sendRequest } = useWebSocket();
   const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
   const [connectedNodes, setConnectedNodes] = useState<NodeData[]>([]);
@@ -183,13 +183,15 @@ const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) =
         return false;
       };
 
-      // Helper to check if a node is a config/auxiliary node
+      // Helper to check if a node is a config/auxiliary node.
+      // Backend auto-derives `uiHints.isConfigNode` from group membership
+      // (`memory` / `tool`) at registration time — see
+      // services/plugin/base.py::_derive_auto_ui_hints. Plugins can also
+      // set the flag explicitly to override.
       const isConfigNode = (nodeType: string | undefined): boolean => {
         if (!nodeType) return false;
         const definition = resolveNodeDescription(nodeType);
-        if (!definition) return false;
-        const groups = definition.group || [];
-        return groups.includes('memory') || groups.includes('tool');
+        return definition?.uiHints?.isConfigNode === true;
       };
 
       const currentNode = nodes.find((node: Node) => node.id === nodeId);
@@ -516,7 +518,7 @@ const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) =
       {/* Header */}
       <div className="flex shrink-0 items-center gap-2 border-b border-border bg-background px-4 py-3">
         <Database className="h-4 w-4 text-muted-foreground" />
-        <span className="text-sm font-semibold text-foreground">Input Data &amp; Variables</span>
+        <span className="font-display text-sm font-semibold tracking-[var(--type-tracking-display)] text-fg-default [text-transform:var(--type-uppercase)]">Input Data &amp; Variables</span>
         <Badge variant="info">{connectedNodes.length}</Badge>
       </div>
 
@@ -539,7 +541,7 @@ const InputSection: React.FC<InputSectionProps> = ({ nodeId, visible = true }) =
               >
                 <div className="flex items-center gap-2">
                   <NodeIcon icon={node.icon} className="h-5 w-5 text-lg" />
-                  <span className="text-sm font-semibold text-foreground">{node.name}</span>
+                  <span className="font-display text-sm font-semibold text-fg-default">{node.name}</span>
                 </div>
                 <div className="flex items-center gap-2">
                   <Badge variant={node.hasExecutionData ? 'success' : 'warning'}>

package/client/src/components/parameterPanel/MasterSkillEditor.tsx

@@ -25,7 +25,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 
-import { Button } from '@/components/ui/button';
+import { ActionButton } from '@/components/ui/action-button';
 import { Alert as DSAlert, AlertDescription } from '@/components/ui/alert';
 import {
   Tooltip,
@@ -46,11 +46,11 @@ import {
 } from '@/components/ui/alert-dialog';
 import { toast } from 'sonner';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useAppTheme } from '../../hooks/useAppTheme';
 import { useWebSocket } from '../../contexts/WebSocketContext';
 import { NodeIcon } from '../../assets/icons';
 import { cn } from '@/lib/utils';
 import { useFolderSkills } from '../../hooks/useFolderSkills';
+import { useNodeAllowlist } from '../../hooks/useNodeAllowlist';
 
 // Skill configuration stored in node parameters
 // Key is skillName (folder name like 'whatsapp-skill')
@@ -117,7 +117,6 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
   onSkillFolderChange,
   nodeId
 }) => {
-  const theme = useAppTheme();
   const { sendRequest } = useWebSocket();
   const [selectedSkillName, setSelectedSkillName] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -153,7 +152,18 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
     },
     staleTime: Infinity,
   });
-  const availableFolders = foldersQuery.data ?? [];
+
+  // Filter out skill folders disabled via the allowlist
+  // (server/config/node_allowlist.json -> disabled_skill_folders).
+  // Same mode-independent enforcement as the credential-category and
+  // node-group blocklists. Use to auto-hide skill folders tied to a
+  // disabled feature (e.g. `android_agent` when android nodes +
+  // credentials are blocked).
+  const { isSkillFolderDisabled } = useNodeAllowlist();
+  const availableFolders = useMemo(
+    () => (foldersQuery.data ?? []).filter((f) => !isSkillFolderDisabled(f.name)),
+    [foldersQuery.data, isSkillFolderDisabled],
+  );
   const foldersLoaded = !foldersQuery.isLoading;
 
   const folderSkillsQuery = useFolderSkills(skillFolder);
@@ -507,58 +517,30 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
   const isEditingUserSkill = selectedSkillInfo?.isUserSkill && pendingSkillData;
 
   return (
-    <div style={{
-      display: 'flex',
-      flex: 1,
-      minHeight: 0,
-      gap: theme.spacing.md,
-      overflow: 'hidden'
-    }}>
+    <div className="flex flex-1 min-h-0 gap-3 overflow-hidden">
       {/* Left Panel - Skills List */}
-      <div style={{
-        flex: '0 0 260px',
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.md,
-        border: `1px solid ${theme.colors.border}`,
-        overflow: 'hidden'
-      }}>
+      <div className="flex flex-[0_0_260px] flex-col overflow-hidden rounded-md border border-border-default bg-bg-elevated">
         {/* Header with count and create button */}
-        <div style={{
-          padding: theme.spacing.sm,
-          borderBottom: `1px solid ${theme.colors.border}`,
-          backgroundColor: theme.colors.backgroundAlt,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between'
-        }}>
-          <span style={{ fontSize: theme.fontSize.sm, fontWeight: theme.fontWeight.semibold, color: theme.colors.text }}>
+        <div className="flex items-center justify-between border-b border-border-default bg-bg-panel p-2">
+          <span className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-sm font-semibold text-fg-default">
             Skills
           </span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: theme.spacing.xs }}>
-            <DSBadge
-              style={{ backgroundColor: theme.dracula.purple, color: '#fff' }}
-              className="h-5 min-w-5 justify-center rounded-full px-1.5"
-            >
+          <div className="flex items-center gap-1">
+            <DSBadge className="h-5 min-w-5 justify-center rounded-full bg-action-tools px-1.5 text-white">
               {enabledCount}
             </DSBadge>
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button
-                    size="icon-sm"
-                    variant="outline"
+                  <ActionButton
+                    intent="tools"
                     onClick={handleCreateSkill}
                     disabled={isCreatingNew}
-                    style={{
-                      backgroundColor: `${theme.dracula.green}20`,
-                      borderColor: theme.dracula.green,
-                      color: theme.dracula.green,
-                    }}
+                    className="h-7 px-2"
+                    aria-label="Create new skill"
                   >
                     <Plus className="h-3.5 w-3.5" />
-                  </Button>
+                  </ActionButton>
                 </TooltipTrigger>
                 <TooltipContent>Create new skill</TooltipContent>
               </Tooltip>
@@ -616,7 +598,7 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
         </div>
 
         {/* Skills List */}
-        <div style={{ flex: 1, overflowY: 'auto' }}>
+        <div className="flex-1 overflow-y-auto">
           {folderLoading ? (
             <div className="mt-4 flex items-center justify-center gap-2 text-sm text-muted-foreground">
               <Loader2 className="h-4 w-4 animate-spin" />
@@ -667,11 +649,11 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
                       />
                       <NodeIcon icon={skill.icon} className="h-4 w-4 text-base" />
                       <span
-                        className="flex-1 overflow-hidden text-sm whitespace-nowrap text-ellipsis"
-                        style={{
-                          fontWeight: isSelected ? theme.fontWeight.semibold : theme.fontWeight.medium,
-                          color: isEnabled ? theme.colors.text : theme.colors.textSecondary,
-                        }}
+                        className={cn(
+                          'flex-1 overflow-hidden text-sm whitespace-nowrap text-ellipsis',
+                          isSelected ? 'font-semibold' : 'font-medium',
+                          isEnabled ? 'text-fg-default' : 'text-fg-muted',
+                        )}
                       >
                         {skill.displayName}
                       </span>
@@ -679,23 +661,14 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
                         <TooltipProvider>
                           <Tooltip>
                             <TooltipTrigger asChild>
-                              <div
-                                className="h-2 w-2 shrink-0 rounded-full"
-                                style={{ backgroundColor: theme.dracula.orange }}
-                              />
+                              <div className="h-2 w-2 shrink-0 rounded-full bg-warning" />
                             </TooltipTrigger>
                             <TooltipContent>Customized</TooltipContent>
                           </Tooltip>
                         </TooltipProvider>
                       )}
                       {skill.isUserSkill && (
-                        <DSBadge
-                          className="h-4 px-1 text-[10px]"
-                          style={{
-                            backgroundColor: `${theme.dracula.cyan}20`,
-                            color: theme.dracula.cyan,
-                          }}
-                        >
+                        <DSBadge className="h-4 bg-info/20 px-1 text-[10px] text-info">
                           Custom
                         </DSBadge>
                       )}
@@ -709,27 +682,12 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
       </div>
 
       {/* Right Panel - Skill Editor */}
-      <div style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: theme.colors.background,
-        borderRadius: theme.borderRadius.md,
-        border: `1px solid ${theme.colors.border}`,
-        overflow: 'hidden'
-      }}>
+      <div className="flex flex-1 flex-col overflow-hidden rounded-md border border-border-default bg-bg-elevated">
         {/* Creating new skill */}
         {isCreatingNew && pendingSkillData ? (
           <>
             {/* New Skill Header */}
-            <div style={{
-              padding: theme.spacing.md,
-              borderBottom: `1px solid ${theme.colors.border}`,
-              backgroundColor: theme.colors.backgroundAlt,
-              display: 'flex',
-              alignItems: 'center',
-              gap: theme.spacing.md
-            }}>
+            <div className="flex items-center gap-3 border-b border-border-default bg-bg-panel p-3">
               <div
                 className="flex h-10 w-10 items-center justify-center rounded-md border-2 border-dashed bg-tint-soft"
                 // currentColor is the new skill's brand color;
@@ -742,104 +700,89 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
                   ? <NodeIcon icon={pendingSkillData.icon} className="h-5 w-5 text-xl" />
                   : <Plus className="h-5 w-5" />}
               </div>
-              <div style={{ flex: 1 }}>
-                <div style={{
-                  fontSize: theme.fontSize.sm,
-                  fontWeight: theme.fontWeight.semibold,
-                  color: theme.dracula.green
-                }}>
+              <div className="flex-1">
+                <div className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] text-sm font-semibold text-success">
                   Create New Skill
                 </div>
-                <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginTop: 2 }}>
+                <div className="mt-0.5 text-xs text-fg-muted">
                   Fill in the details below and save
                 </div>
               </div>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={handleCancelCreate}
-                style={{
-                  backgroundColor: `${theme.dracula.red}15`,
-                  borderColor: `${theme.dracula.red}40`,
-                  color: theme.dracula.red,
-                }}
-              >
+              <ActionButton intent="stop" onClick={handleCancelCreate} className="h-8">
                 <X className="h-3.5 w-3.5" />
                 Cancel
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
+              </ActionButton>
+              <ActionButton
+                intent="save"
                 onClick={handleSaveSkill}
                 disabled={savingSkill}
-                style={{
-                  backgroundColor: `${theme.dracula.green}15`,
-                  borderColor: `${theme.dracula.green}40`,
-                  color: theme.dracula.green,
-                }}
+                className="h-8"
               >
                 {savingSkill ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
                 Save
-              </Button>
+              </ActionButton>
             </div>
 
             {/* New Skill Form */}
-            <div ref={editorWrapperRef} style={{ flex: 1, padding: theme.spacing.md, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: theme.spacing.md }}>
+            <div
+              ref={editorWrapperRef}
+              className="flex flex-1 flex-col gap-3 overflow-auto p-3"
+            >
               {/* Display Name */}
               <div>
-                <label style={{ display: 'block', fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginBottom: 4 }}>
+                <label className="mb-1 block text-xs text-fg-muted">
                   Display Name *
                 </label>
                 <Input
                   value={pendingSkillData.display_name}
                   onChange={(e) => handlePendingDataChange('display_name', e.target.value)}
                   placeholder="My Custom Skill"
-                  style={{ backgroundColor: theme.colors.backgroundAlt, borderColor: theme.colors.border }}
+                  className="bg-bg-input border-border-default"
                 />
               </div>
 
               {/* Description */}
               <div>
-                <label style={{ display: 'block', fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginBottom: 4 }}>
+                <label className="mb-1 block text-xs text-fg-muted">
                   Description
                 </label>
                 <Input
                   value={pendingSkillData.description}
                   onChange={(e) => handlePendingDataChange('description', e.target.value)}
                   placeholder="Brief description of what this skill does"
-                  style={{ backgroundColor: theme.colors.backgroundAlt, borderColor: theme.colors.border }}
+                  className="bg-bg-input border-border-default"
                 />
               </div>
 
               {/* Icon and Color */}
-              <div style={{ display: 'flex', gap: theme.spacing.md }}>
-                <div style={{ width: 100 }}>
-                  <label style={{ display: 'block', fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginBottom: 4 }}>
+              <div className="flex gap-3">
+                <div className="w-[100px]">
+                  <label className="mb-1 block text-xs text-fg-muted">
                     Icon (emoji)
                   </label>
                   <Input
                     value={pendingSkillData.icon}
                     onChange={(e) => handlePendingDataChange('icon', e.target.value)}
                     placeholder=""
-                    style={{ backgroundColor: theme.colors.backgroundAlt, borderColor: theme.colors.border, textAlign: 'center' }}
+                    className="bg-bg-input border-border-default text-center"
                   />
                 </div>
-                <div style={{ width: 80 }}>
-                  <label style={{ display: 'block', fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginBottom: 4 }}>
+                <div className="w-20">
+                  <label className="mb-1 block text-xs text-fg-muted">
                     Color
                   </label>
                   <Input
                     type="color"
                     value={pendingSkillData.color}
                     onChange={(e) => handlePendingDataChange('color', e.target.value)}
-                    style={{ backgroundColor: theme.colors.backgroundAlt, borderColor: theme.colors.border, height: 32, padding: 2 }}
+                    className="h-8 bg-bg-input border-border-default p-0.5"
                   />
                 </div>
               </div>
 
               {/* Instructions */}
-              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 200 }}>
-                <label style={{ display: 'block', fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginBottom: 4 }}>
+              <div className="flex flex-1 flex-col min-h-[200px]">
+                <label className="mb-1 block text-xs text-fg-muted">
                   Instructions *
                 </label>
                 <Textarea
@@ -847,13 +790,7 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
                   onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => handlePendingDataChange('instructions', e.target.value)}
                   placeholder="# Skill Instructions..."
                   spellCheck={false}
-                  className="flex-1 min-h-0 resize-none font-mono text-[13px] leading-[1.5]"
-                  style={{
-                    backgroundColor: theme.colors.backgroundAlt,
-                    color: theme.colors.text,
-                    borderColor: theme.colors.border,
-                    borderRadius: theme.borderRadius.md,
-                  }}
+                  className="flex-1 min-h-0 resize-none rounded-md border-border-default bg-bg-input font-mono text-[13px] leading-[1.5] text-fg-default"
                 />
               </div>
             </div>
@@ -861,46 +798,20 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
         ) : selectedSkillInfo ? (
           <>
             {/* Skill Header */}
-            <div style={{
-              padding: theme.spacing.md,
-              borderBottom: `1px solid ${theme.colors.border}`,
-              backgroundColor: theme.colors.backgroundAlt,
-              display: 'flex',
-              alignItems: 'center',
-              gap: theme.spacing.md
-            }}>
+            <div className="flex items-center gap-3 border-b border-border-default bg-bg-panel p-3">
               <NodeIcon icon={selectedSkillInfo.icon} className="h-6 w-6 text-2xl" />
-              <div style={{ flex: 1 }}>
+              <div className="flex-1">
                 {isEditingUserSkill ? (
                   <Input
                     value={pendingSkillData?.display_name || ''}
                     onChange={(e) => handlePendingDataChange('display_name', e.target.value)}
-                    style={{
-                      fontSize: theme.fontSize.sm,
-                      fontWeight: theme.fontWeight.semibold,
-                      backgroundColor: theme.colors.background,
-                      borderColor: theme.colors.border,
-                      marginBottom: 4
-                    }}
+                    className="mb-1 bg-bg-elevated border-border-default text-sm font-semibold"
                   />
                 ) : (
-                  <div style={{
-                    fontSize: theme.fontSize.sm,
-                    fontWeight: theme.fontWeight.semibold,
-                    color: theme.colors.text,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: theme.spacing.sm
-                  }}>
+                  <div className="font-display tracking-[var(--type-tracking-display)] [text-transform:var(--type-uppercase)] flex items-center gap-2 text-sm font-semibold text-fg-default">
                     {selectedSkillInfo.displayName}
                     {selectedSkillConfig?.isCustomized && (
-                      <DSBadge
-                        className="h-4 text-xs"
-                        style={{
-                          backgroundColor: `${theme.dracula.orange}20`,
-                          color: theme.dracula.orange,
-                        }}
-                      >
+                      <DSBadge className="h-4 bg-warning/20 text-xs text-warning">
                         Customized
                       </DSBadge>
                     )}
@@ -911,14 +822,10 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
                     value={pendingSkillData?.description || ''}
                     onChange={(e) => handlePendingDataChange('description', e.target.value)}
                     placeholder="Description"
-                    style={{
-                      fontSize: theme.fontSize.xs,
-                      backgroundColor: theme.colors.background,
-                      borderColor: theme.colors.border,
-                    }}
+                    className="bg-bg-elevated border-border-default text-xs"
                   />
                 ) : (
-                  <div style={{ fontSize: theme.fontSize.xs, color: theme.colors.textSecondary, marginTop: 2 }}>
+                  <div className="mt-0.5 text-xs text-fg-muted">
                     {selectedSkillInfo.description}
                   </div>
                 )}
@@ -928,35 +835,22 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
               {isEditingUserSkill && (
                 <>
                   {hasUnsavedChanges && (
-                    <Button
-                      size="sm"
-                      variant="outline"
+                    <ActionButton
+                      intent="save"
                       onClick={handleSaveSkill}
                       disabled={savingSkill}
-                      style={{
-                        backgroundColor: `${theme.dracula.green}15`,
-                        borderColor: `${theme.dracula.green}40`,
-                        color: theme.dracula.green,
-                      }}
+                      className="h-8"
                     >
                       {savingSkill ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Save className="h-3.5 w-3.5" />}
                       Save
-                    </Button>
+                    </ActionButton>
                   )}
                   <AlertDialog>
                     <AlertDialogTrigger asChild>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        style={{
-                          backgroundColor: `${theme.dracula.red}15`,
-                          borderColor: `${theme.dracula.red}40`,
-                          color: theme.dracula.red,
-                        }}
-                      >
+                      <ActionButton intent="stop" className="h-8">
                         <Trash2 className="h-3.5 w-3.5" />
                         Delete
-                      </Button>
+                      </ActionButton>
                     </AlertDialogTrigger>
                     <AlertDialogContent>
                       <AlertDialogHeader>
@@ -982,25 +876,23 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
 
               {/* Reset Button for built-in skills */}
               {!isEditingUserSkill && selectedSkillConfig?.isCustomized && (
-                <Button
-                  size="sm"
-                  variant="outline"
+                <ActionButton
+                  intent="config"
                   onClick={() => handleResetToDefault(selectedSkillName!)}
                   disabled={isLoading}
-                  style={{
-                    backgroundColor: `${theme.dracula.orange}15`,
-                    borderColor: `${theme.dracula.orange}40`,
-                    color: theme.dracula.orange,
-                  }}
+                  className="h-8"
                 >
                   {isLoading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RotateCcw className="h-3.5 w-3.5" />}
                   Reset
-                </Button>
+                </ActionButton>
               )}
             </div>
 
             {/* Skill Instructions Editor */}
-            <div ref={editorWrapperRef} style={{ flex: 1, padding: theme.spacing.md, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+            <div
+              ref={editorWrapperRef}
+              className="flex flex-1 flex-col overflow-hidden p-3"
+            >
               {isLoading ? (
                 <div className="flex flex-1 items-center justify-center gap-2 text-sm text-muted-foreground">
                   <Loader2 className="h-4 w-4 animate-spin" />
@@ -1022,13 +914,7 @@ const MasterSkillEditor: React.FC<MasterSkillEditorProps> = ({
                   }}
                   placeholder="Loading skill instructions..."
                   spellCheck={false}
-                  className="flex-1 min-h-0 resize-none font-mono text-[13px] leading-[1.5]"
-                  style={{
-                    backgroundColor: theme.colors.backgroundAlt,
-                    color: theme.colors.text,
-                    borderColor: theme.colors.border,
-                    borderRadius: theme.borderRadius.md,
-                  }}
+                  className="flex-1 min-h-0 resize-none rounded-md border-border-default bg-bg-input font-mono text-[13px] leading-[1.5] text-fg-default"
                 />
               )}