All files / web/src/components/settings developer-mode-toggle.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@web/components/ui/card';
import { Switch } from '@web/components/ui/switch';
import { CodeIcon } from 'lucide-react';
import type { ReactElement } from 'react';
 
export interface DeveloperModeToggleProps {
  /** Whether developer mode is enabled */
  checked: boolean;
  /** Callback when developer mode is toggled */
  onCheckedChange: (checked: boolean) => void;
  /** Whether the toggle is disabled */
  disabled?: boolean;
}
 
export function DeveloperModeToggle({
  checked,
  onCheckedChange,
  disabled = false,
}: DeveloperModeToggleProps): ReactElement {
  const switchId = 'developer-mode-switch';
  const labelId = 'developer-mode-label';
  const descriptionId = 'developer-mode-description';
 
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <CodeIcon className="h-5 w-5" aria-hidden="true" />
          Developer Mode
        </CardTitle>
        <CardDescription>
          Advanced settings for development and debugging purposes.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center justify-between py-4">
          <div className="space-y-1">
            <h4 id={labelId} className="font-medium">
              Enable Developer Mode
            </h4>
            <p id={descriptionId} className="text-sm text-muted-foreground">
              When enabled, shows the internal super-agents agent and all its
              skills and data. This is useful for debugging and development.
            </p>
          </div>
          <Switch
            id={switchId}
            checked={checked}
            onCheckedChange={onCheckedChange}
            disabled={disabled}
            aria-labelledby={labelId}
            aria-describedby={descriptionId}
          />
        </div>
      </CardContent>
    </Card>
  );
}