ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

studio: use Hugeicons AI Security glyph for Run automatically (#7409)

Browse source 
Swap the lucide CircleOff icon on the Run automatically permission mode
for the Hugeicons AI Security 03 glyph, matching the app's existing
Hugeicons usage. A small lucide-compatible wrapper lets it drop into the
option list. Icon-only change, no behavior change.

Co-authored-by: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
This commit is contained in:
Michael Han 2026-07-24 04:48:29 -07:00 • committed by GitHub
commit 275c046c09
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

14
studio/frontend/src/features/chat/permission-mode-select.tsx
View file

@ -1,13 +1,8 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
import {
ChevronDown,
CircleAlert,
CircleOff,
Hand,
ShieldCheck,
} from "lucide-react";
import { ChevronDown, CircleAlert, Hand, ShieldCheck } from "lucide-react";
import type { ComponentType } from "react";
import { useState } from "react";
import {
@ -29,6 +24,7 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ChevronDownStandardIcon } from "@/lib/chevron-icons";
import { SparklesGlyph } from "@/lib/sparkles-icon";
import { Tick02Icon } from "@/lib/tick-icon";
import { cn } from "@/lib/utils";
import { HugeiconsIcon } from "@hugeicons/react";
@ -45,7 +41,7 @@ export const PERMISSION_MODE_OPTIONS: readonly {
value: PermissionMode;
label: string;
description: string;
icon: typeof Hand;
icon: ComponentType<{ className?: string; strokeWidth?: number }>;
}[] = [
{
value: "ask",
@ -63,7 +59,7 @@ export const PERMISSION_MODE_OPTIONS: readonly {
value: "off",
label: "Run automatically",
description: "Run tool calls without approval prompts inside the sandbox",
icon: CircleOff,
icon: SparklesGlyph,
},
{
value: "full",

51
studio/frontend/src/lib/sparkles-icon.tsx Normal file
View file

@ -0,0 +1,51 @@
// SPDX-License-Identifier: AGPL-3.0-only
// Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
// Hugeicons "AI Security 03" (stroke-rounded). A four-point sparkle inside a
// shield. https://hugeicons.com/icon/ai-security-03
export const SparklesIcon: IconSvgElement = [
[
"path",
{
d: "M11.6769 8.67348C11.8274 8.43697 12.1726 8.43697 12.3231 8.67348L12.7586 9.35767C13.2401 10.1143 13.8818 10.756 14.6384 11.2375L15.3226 11.6729C15.5591 11.8235 15.5591 12.1687 15.3226 12.3192L14.6384 12.7547C13.8818 13.2362 13.2401 13.8779 12.7586 14.6345L12.3231 15.3187C12.1726 15.5552 11.8274 15.5552 11.6769 15.3187L11.2414 14.6345C10.7599 13.8779 10.1182 13.2362 9.36157 12.7547L8.67738 12.3192C8.44087 12.1687 8.44087 11.8235 8.67738 11.6729L9.36157 11.2375C10.1182 10.756 10.7599 10.1143 11.2414 9.35767L11.6769 8.67348Z",
stroke: "currentColor",
strokeLinejoin: "round",
strokeWidth: "1.5",
key: "0",
},
],
[
"path",
{
d: "M3.9068 5.28387C6.87149 5.4984 8.78311 2.49713 12.0262 2.49713C15.2208 2.43341 16.784 5.32395 20.059 5.32395C21.8147 14.2606 18.1622 19.8743 12.053 21.4961C6.38992 20.15 2.13481 14.4788 3.9068 5.28387Z",
stroke: "currentColor",
strokeLinejoin: "round",
strokeWidth: "1.5",
key: "1",
},
],
];
/**
* AI Security shield glyph wrapped as a lucide-compatible component so it can drop
* into the permission-mode option list alongside lucide icons (same className /
* strokeWidth props). strokeWidth is a number here (lucide style); Hugeicons
* accepts it directly.
*/
export function SparklesGlyph({
className,
strokeWidth,
}: {
className?: string;
strokeWidth?: number;
}) {
return (
<HugeiconsIcon
icon={SparklesIcon}
className={className}
strokeWidth={strokeWidth}
/>
);
}