93926741b1
UI parity for operators who never touch a CLI, plus a Store that reads more like an app store. Settings dialog: - Channel rows gain a popup menu: Connect / Make active / Enable autostart / Disable autostart. "Connect" still re-points Studio's wire; "Make active" actually writes ~/.fai/current-channel via `fai channel switch`. - Inline output panel surfaces the spawned binary's stdout on success or stderr on failure, so operators see what happened without opening a terminal. Store page rewrite: - Big top search bar with a clear button. Live filter on every keystroke. - Horizontal category strip auto-populated from the index; segmented status row (All / Published / Alpha / Planned), Installed-only chip, result count. - Grid of cards that reflows to fit the viewport — replaces the previous single-column list. Each card shows category-aware icon, version, status, tagline preview, and a one-click Install (or Details for installed / planned). - Per-module detail sheet renders the full bilingual description with a DE/EN toggle, separate Required- capabilities + Required-host-services sections, repo link, Read-docs button. Install + Uninstall live at the bottom. - StoreItem and HubService.searchStore now carry the German tagline + description so the locale toggle has something to switch to. SystemActions extended with `faiChannelSwitch`, `faiDaemonEnable`, `faiDaemonDisable` so Settings can spawn the right CLI without each call site reimplementing the `fai` resolution rules. Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
613 lines
19 KiB
Dart
613 lines
19 KiB
Dart
// FaiSettingsDialog — modal for changing the hub endpoint.
|
||
// Reads current values from HubService, persists on save via
|
||
// HubService.reconnect.
|
||
|
||
import 'package:fai_dart_sdk/fai_dart_sdk.dart';
|
||
import 'package:flutter/material.dart';
|
||
|
||
import '../data/hub.dart';
|
||
import '../data/system_actions.dart';
|
||
import '../theme/theme.dart';
|
||
import '../theme/tokens.dart';
|
||
import 'fai_pill.dart';
|
||
import 'fai_system_ai_editor.dart';
|
||
|
||
class FaiSettingsDialog extends StatefulWidget {
|
||
const FaiSettingsDialog({super.key});
|
||
|
||
/// Convenience launcher used from the sidebar gear icon.
|
||
static Future<bool> show(BuildContext context) async {
|
||
final ok = await showDialog<bool>(
|
||
context: context,
|
||
builder: (_) => const FaiSettingsDialog(),
|
||
);
|
||
return ok ?? false;
|
||
}
|
||
|
||
@override
|
||
State<FaiSettingsDialog> createState() => _FaiSettingsDialogState();
|
||
}
|
||
|
||
class _FaiSettingsDialogState extends State<FaiSettingsDialog> {
|
||
late final TextEditingController _host;
|
||
late final TextEditingController _port;
|
||
bool _secure = false;
|
||
bool _saving = false;
|
||
String? _error;
|
||
String? _channelToast;
|
||
ChannelStatusSnapshot? _channels;
|
||
SystemAiStatus? _aiStatus;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
final ep = HubService.instance.currentEndpoint;
|
||
_host = TextEditingController(text: ep.host);
|
||
_port = TextEditingController(text: ep.port.toString());
|
||
_secure = ep.secure;
|
||
_loadChannels();
|
||
_loadAiStatus();
|
||
}
|
||
|
||
Future<void> _loadChannels() async {
|
||
try {
|
||
final snap = await HubService.instance.channelStatus();
|
||
if (!mounted) return;
|
||
setState(() => _channels = snap);
|
||
} catch (_) {
|
||
// Silent: channels block stays hidden when the hub is
|
||
// unreachable (the endpoint section is the operator's
|
||
// path back to a working connection).
|
||
}
|
||
}
|
||
|
||
Future<void> _loadAiStatus() async {
|
||
try {
|
||
final s = await HubService.instance.systemAiStatus();
|
||
if (!mounted) return;
|
||
setState(() => _aiStatus = s);
|
||
} catch (_) {
|
||
// Same fail-quiet rule as channels.
|
||
}
|
||
}
|
||
|
||
Future<void> _switchChannel(String name) async {
|
||
setState(() {
|
||
_saving = true;
|
||
_channelToast = null;
|
||
});
|
||
final r = await SystemActions.faiChannelSwitch(name);
|
||
if (!mounted) return;
|
||
setState(() {
|
||
_saving = false;
|
||
_channelToast = r.ok
|
||
? 'Switched active channel to "$name". Daemon restarted.\n${r.stdout.trim()}'
|
||
: 'Channel switch failed: ${r.stderr.isEmpty ? r.stdout : r.stderr}';
|
||
});
|
||
if (r.ok) await _loadChannels();
|
||
}
|
||
|
||
Future<void> _runDaemon(
|
||
String label,
|
||
Future<({bool ok, String stdout, String stderr})> Function() action,
|
||
) async {
|
||
setState(() {
|
||
_saving = true;
|
||
_channelToast = null;
|
||
});
|
||
final r = await action();
|
||
if (!mounted) return;
|
||
setState(() {
|
||
_saving = false;
|
||
_channelToast = r.ok
|
||
? 'OK · $label\n${r.stdout.trim()}'
|
||
: 'Failed · $label\n${(r.stderr.isEmpty ? r.stdout : r.stderr).trim()}';
|
||
});
|
||
}
|
||
|
||
Future<void> _connectToChannel(ChannelInfo ch) async {
|
||
setState(() {
|
||
_host.text = '127.0.0.1';
|
||
_port.text = ch.port.toString();
|
||
_secure = false;
|
||
});
|
||
await _save();
|
||
}
|
||
|
||
@override
|
||
void dispose() {
|
||
_host.dispose();
|
||
_port.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
Future<void> _save() async {
|
||
setState(() {
|
||
_saving = true;
|
||
_error = null;
|
||
});
|
||
final port = int.tryParse(_port.text.trim());
|
||
if (port == null || port <= 0 || port > 65535) {
|
||
setState(() {
|
||
_saving = false;
|
||
_error = 'port must be 1–65535';
|
||
});
|
||
return;
|
||
}
|
||
final endpoint = HubEndpoint(
|
||
host: _host.text.trim().isEmpty ? '127.0.0.1' : _host.text.trim(),
|
||
port: port,
|
||
secure: _secure,
|
||
);
|
||
try {
|
||
await HubService.instance.reconnect(endpoint);
|
||
if (!mounted) return;
|
||
Navigator.pop(context, true);
|
||
} catch (e) {
|
||
setState(() {
|
||
_saving = false;
|
||
_error = e.toString();
|
||
});
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
return AlertDialog(
|
||
title: const Text('Hub endpoint'),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(FaiRadius.md),
|
||
),
|
||
contentPadding: const EdgeInsets.symmetric(
|
||
horizontal: FaiSpace.xl,
|
||
vertical: FaiSpace.lg,
|
||
),
|
||
content: ConstrainedBox(
|
||
constraints: const BoxConstraints(maxWidth: 380),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'Where should Studio connect? Default is the local hub at 127.0.0.1:50051.',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
const SizedBox(height: FaiSpace.lg),
|
||
TextField(
|
||
controller: _host,
|
||
decoration: const InputDecoration(
|
||
labelText: 'Host',
|
||
border: OutlineInputBorder(),
|
||
isDense: true,
|
||
),
|
||
autofocus: true,
|
||
),
|
||
const SizedBox(height: FaiSpace.md),
|
||
Row(
|
||
children: [
|
||
Expanded(
|
||
flex: 2,
|
||
child: TextField(
|
||
controller: _port,
|
||
decoration: const InputDecoration(
|
||
labelText: 'Port',
|
||
border: OutlineInputBorder(),
|
||
isDense: true,
|
||
),
|
||
keyboardType: TextInputType.number,
|
||
),
|
||
),
|
||
const SizedBox(width: FaiSpace.md),
|
||
Expanded(
|
||
flex: 3,
|
||
child: SwitchListTile(
|
||
contentPadding: EdgeInsets.zero,
|
||
dense: true,
|
||
title: const Text('TLS'),
|
||
subtitle: Text(
|
||
'https/grpc-secure',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
value: _secure,
|
||
onChanged: (v) => setState(() => _secure = v),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
if (_error != null) ...[
|
||
const SizedBox(height: FaiSpace.md),
|
||
Text(
|
||
_error!,
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.error,
|
||
),
|
||
),
|
||
],
|
||
const SizedBox(height: FaiSpace.md),
|
||
Container(
|
||
padding: const EdgeInsets.all(FaiSpace.sm),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surfaceContainerHigh,
|
||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
Icon(
|
||
Icons.link,
|
||
size: 14,
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
const SizedBox(width: FaiSpace.sm),
|
||
Text(
|
||
_previewUrl(),
|
||
style: FaiTheme.mono(
|
||
size: 11,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
if (_channels != null) ...[
|
||
const SizedBox(height: FaiSpace.lg),
|
||
Text(
|
||
'CHANNELS',
|
||
style: theme.textTheme.labelSmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
letterSpacing: 0.6,
|
||
fontSize: 10,
|
||
),
|
||
),
|
||
const SizedBox(height: 2),
|
||
Text(
|
||
'Switch hub channel (writes ~/.fai/current-channel and '
|
||
'restarts the daemon). Connect just changes Studio\'s wire.',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
const SizedBox(height: FaiSpace.sm),
|
||
for (final ch in _channels!.channels)
|
||
_ChannelRow(
|
||
channel: ch,
|
||
active: ch.name == _channels!.active,
|
||
onConnect: _saving ? null : () => _connectToChannel(ch),
|
||
onSwitch: _saving ? null : () => _switchChannel(ch.name),
|
||
onEnableAutostart: _saving ? null : () => _runDaemon(
|
||
'enable autostart',
|
||
() => SystemActions.faiDaemonEnable(ch.name),
|
||
),
|
||
onDisableAutostart: _saving ? null : () => _runDaemon(
|
||
'disable autostart',
|
||
() => SystemActions.faiDaemonDisable(ch.name),
|
||
),
|
||
),
|
||
if (_channelToast != null) ...[
|
||
const SizedBox(height: FaiSpace.sm),
|
||
Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.all(FaiSpace.sm),
|
||
decoration: BoxDecoration(
|
||
color: theme.colorScheme.surfaceContainerHigh,
|
||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||
border: Border.all(color: theme.colorScheme.outlineVariant),
|
||
),
|
||
child: SelectableText(
|
||
_channelToast!,
|
||
style: FaiTheme.mono(
|
||
size: 11,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
],
|
||
if (_aiStatus != null) ...[
|
||
const SizedBox(height: FaiSpace.lg),
|
||
_SystemAiPanel(
|
||
status: _aiStatus!,
|
||
onEdit: () async {
|
||
final updated = await FaiSystemAiEditor.show(
|
||
context,
|
||
_aiStatus!,
|
||
);
|
||
if (updated != null && mounted) {
|
||
setState(() => _aiStatus = updated);
|
||
}
|
||
},
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
actions: [
|
||
TextButton(
|
||
onPressed: _saving ? null : () => Navigator.pop(context, false),
|
||
child: const Text('Cancel'),
|
||
),
|
||
FilledButton(
|
||
onPressed: _saving ? null : _save,
|
||
child: _saving
|
||
? const SizedBox(
|
||
width: 16,
|
||
height: 16,
|
||
child: CircularProgressIndicator(strokeWidth: 2),
|
||
)
|
||
: const Text('Save & connect'),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
String _previewUrl() {
|
||
final scheme = _secure ? 'https' : 'http';
|
||
final host =
|
||
_host.text.trim().isEmpty ? '127.0.0.1' : _host.text.trim();
|
||
final port = _port.text.trim().isEmpty ? '50051' : _port.text.trim();
|
||
return '$scheme://$host:$port';
|
||
}
|
||
}
|
||
|
||
class _ChannelRow extends StatelessWidget {
|
||
final ChannelInfo channel;
|
||
final bool active;
|
||
final VoidCallback? onConnect;
|
||
/// Switches the active channel pointer (`fai channel switch`).
|
||
/// Distinct from [onConnect], which only re-points Studio's
|
||
/// gRPC wire at a different running daemon.
|
||
final VoidCallback? onSwitch;
|
||
final VoidCallback? onEnableAutostart;
|
||
final VoidCallback? onDisableAutostart;
|
||
|
||
const _ChannelRow({
|
||
required this.channel,
|
||
required this.active,
|
||
required this.onConnect,
|
||
required this.onSwitch,
|
||
required this.onEnableAutostart,
|
||
required this.onDisableAutostart,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||
child: Row(
|
||
children: [
|
||
Icon(
|
||
channel.running ? Icons.circle : Icons.circle_outlined,
|
||
size: 10,
|
||
color: channel.running
|
||
? FaiColors.success
|
||
: theme.colorScheme.outline,
|
||
),
|
||
const SizedBox(width: FaiSpace.sm),
|
||
SizedBox(
|
||
width: 88,
|
||
child: Text(
|
||
channel.name,
|
||
style: FaiTheme.mono(
|
||
size: 11,
|
||
weight: active ? FontWeight.w600 : FontWeight.w400,
|
||
color: theme.colorScheme.onSurface,
|
||
),
|
||
),
|
||
),
|
||
SizedBox(
|
||
width: 64,
|
||
child: Text(
|
||
':${channel.port}',
|
||
style: FaiTheme.mono(
|
||
size: 11,
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
channel.running ? 'running' : 'stopped',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
if (active)
|
||
const Padding(
|
||
padding: EdgeInsets.only(right: FaiSpace.sm),
|
||
child: FaiPill(label: 'active', tone: FaiPillTone.success),
|
||
),
|
||
PopupMenuButton<String>(
|
||
tooltip: 'Channel actions',
|
||
icon: const Icon(Icons.more_vert, size: 18),
|
||
onSelected: (v) {
|
||
switch (v) {
|
||
case 'connect':
|
||
onConnect?.call();
|
||
break;
|
||
case 'switch':
|
||
onSwitch?.call();
|
||
break;
|
||
case 'enable':
|
||
onEnableAutostart?.call();
|
||
break;
|
||
case 'disable':
|
||
onDisableAutostart?.call();
|
||
break;
|
||
}
|
||
},
|
||
itemBuilder: (_) => [
|
||
PopupMenuItem(
|
||
value: 'connect',
|
||
enabled: channel.running && onConnect != null,
|
||
child: const _MenuRow(
|
||
icon: Icons.link,
|
||
text: 'Connect Studio to this channel',
|
||
),
|
||
),
|
||
PopupMenuItem(
|
||
value: 'switch',
|
||
enabled: !active && onSwitch != null,
|
||
child: const _MenuRow(
|
||
icon: Icons.swap_horiz,
|
||
text: 'Make this the active channel',
|
||
),
|
||
),
|
||
const PopupMenuDivider(),
|
||
PopupMenuItem(
|
||
value: 'enable',
|
||
enabled: onEnableAutostart != null,
|
||
child: const _MenuRow(
|
||
icon: Icons.play_circle_outline,
|
||
text: 'Enable autostart at login',
|
||
),
|
||
),
|
||
PopupMenuItem(
|
||
value: 'disable',
|
||
enabled: onDisableAutostart != null,
|
||
child: const _MenuRow(
|
||
icon: Icons.pause_circle_outline,
|
||
text: 'Disable autostart',
|
||
),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _MenuRow extends StatelessWidget {
|
||
final IconData icon;
|
||
final String text;
|
||
const _MenuRow({required this.icon, required this.text});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Row(
|
||
children: [
|
||
Icon(icon, size: 14),
|
||
const SizedBox(width: FaiSpace.sm),
|
||
Text(text),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
class _SystemAiPanel extends StatelessWidget {
|
||
final SystemAiStatus status;
|
||
final VoidCallback onEdit;
|
||
|
||
const _SystemAiPanel({required this.status, required this.onEdit});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'SYSTEM AI',
|
||
style: theme.textTheme.labelSmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
letterSpacing: 0.6,
|
||
fontSize: 10,
|
||
),
|
||
),
|
||
const SizedBox(width: FaiSpace.sm),
|
||
FaiPill(
|
||
label: status.enabled ? 'enabled' : 'off',
|
||
tone: status.enabled ? FaiPillTone.success : FaiPillTone.neutral,
|
||
),
|
||
if (status.enabled) ...[
|
||
const SizedBox(width: FaiSpace.xs),
|
||
FaiPill(
|
||
label: status.privacyMode,
|
||
tone: status.privacyMode == 'full'
|
||
? FaiPillTone.warning
|
||
: FaiPillTone.neutral,
|
||
),
|
||
],
|
||
const Spacer(),
|
||
TextButton.icon(
|
||
onPressed: onEdit,
|
||
icon: const Icon(Icons.edit_outlined, size: 14),
|
||
label: Text(status.enabled ? 'Edit…' : 'Configure…'),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 4),
|
||
if (status.enabled) ...[
|
||
_StatRow(label: 'provider', value: status.provider),
|
||
_StatRow(label: 'endpoint', value: status.endpoint, mono: true),
|
||
_StatRow(label: 'model', value: status.model, mono: true),
|
||
if (status.apiKeyEnv.isNotEmpty)
|
||
_StatRow(label: 'api_key_env', value: '\$${status.apiKeyEnv}', mono: true),
|
||
] else ...[
|
||
Padding(
|
||
padding: const EdgeInsets.only(top: 2),
|
||
child: Text(
|
||
'Off — failure explanations on the audit page are disabled. '
|
||
'Click Configure… to pick a provider (Ollama / OpenAI / LM '
|
||
'Studio / vLLM / Custom). Operator config is rewritten in place; '
|
||
'no daemon restart needed.',
|
||
style: theme.textTheme.bodySmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
class _StatRow extends StatelessWidget {
|
||
final String label;
|
||
final String value;
|
||
final bool mono;
|
||
|
||
const _StatRow({
|
||
required this.label,
|
||
required this.value,
|
||
this.mono = false,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 1),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
SizedBox(
|
||
width: 96,
|
||
child: Text(
|
||
label,
|
||
style: theme.textTheme.labelSmall?.copyWith(
|
||
color: theme.colorScheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
value.isEmpty ? '—' : value,
|
||
style: mono
|
||
? FaiTheme.mono(size: 11, color: theme.colorScheme.onSurface)
|
||
: theme.textTheme.bodySmall,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|