+
+
+ @if (selectedScript()) {
+
+ {{ selectedScript()!.language }}
+ {{ selectedScript()!.name }}
+ v{{ selectedScript()!.version }}
+
+
+ } @else {
+
+ }
+
+
+ @if (dropdownOpen()) {
+
+
+ @if (loading()) {
+
Loading...
+ } @else if (filteredScripts().length === 0) {
+
No scripts found
+ } @else {
+
+ }
+
+ }
+
+ `,
+ styles: [`
+ .script-picker { position: relative; }
+ .script-picker__label { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; }
+
+ .script-picker__control { display: flex; align-items: center; }
+
+ .script-picker__browse { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; font-size: 0.75rem; font-family: inherit; font-weight: 500; border: 1px dashed var(--color-border-primary); border-radius: var(--radius-sm); background: var(--color-surface-secondary); color: var(--color-text-muted); cursor: pointer; transition: all 150ms; }
+ .script-picker__browse:hover { border-color: var(--color-brand-primary); color: var(--color-text-primary); background: var(--color-surface-tertiary); }
+
+ .script-picker__selected { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); background: var(--color-surface-secondary); }
+ .script-picker__name { font-weight: 600; color: var(--color-text-primary); }
+ .script-picker__version { font-family: var(--font-family-mono, monospace); font-size: 0.6875rem; color: var(--color-text-muted); }
+ .script-picker__clear { margin-left: 0.25rem; padding: 0 0.25rem; border: none; background: none; color: var(--color-text-muted); font-size: 1rem; cursor: pointer; line-height: 1; }
+ .script-picker__clear:hover { color: var(--color-status-error-text); }
+
+ .script-picker__dropdown { position: absolute; top: 100%; left: 0; z-index: 100; width: 100%; min-width: 320px; max-height: 280px; margin-top: 0.25rem; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); background: var(--color-surface-primary); box-shadow: var(--shadow-lg, 0 4px 16px rgba(0,0,0,.12)); overflow: hidden; display: flex; flex-direction: column; }
+
+ .script-picker__search { width: 100%; padding: 0.5rem 0.6rem; border: none; border-bottom: 1px solid var(--color-border-primary); background: var(--color-surface-secondary); font-size: 0.75rem; font-family: inherit; color: var(--color-text-primary); outline: none; }
+ .script-picker__search::placeholder { color: var(--color-text-muted); }
+
+ .script-picker__loading, .script-picker__empty { padding: 1rem; text-align: center; font-size: 0.75rem; color: var(--color-text-muted); }
+
+ .script-picker__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: 220px; }
+ .script-picker__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; cursor: pointer; transition: background 100ms; }
+ .script-picker__item:hover { background: var(--color-surface-tertiary); }
+ .script-picker__item-body { flex: 1; min-width: 0; }
+ .script-picker__item-name { display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .script-picker__item-desc { display: block; font-size: 0.65rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
+ .script-picker__item-version { flex-shrink: 0; font-family: var(--font-family-mono, monospace); font-size: 0.65rem; color: var(--color-text-muted); }
+
+ .script-picker__badge { display: inline-block; flex-shrink: 0; padding: 0.0625rem 0.3rem; font-size: 0.5625rem; font-weight: 600; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.03em; background: var(--color-surface-tertiary); color: var(--color-text-secondary); }
+ .script-picker__badge[data-lang="bash"] { background: var(--color-status-success-bg); color: var(--color-status-success-text); }
+ .script-picker__badge[data-lang="csharp"] { background: var(--color-status-info-bg); color: var(--color-status-info-text); }
+ .script-picker__badge[data-lang="python"] { background: #FFF3E0; color: #E65100; }
+ .script-picker__badge[data-lang="typescript"] { background: #E3F2FD; color: #1565C0; }
+ .script-picker__badge[data-lang="powershell"] { background: #EDE7F6; color: #6A1B9A; }
+ `],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScriptPickerComponent implements OnInit {
+ private readonly api = inject(SCRIPTS_API);
+
+ @Input() label = 'Script';
+ @Input() selectedScriptId: string | null = null;
+
+ @Output() scriptSelected = new EventEmitter