15ea403c86
Replaces the read-only System AI block in Settings with a real
editor. Operator never has to touch ~/.fai/config.yaml again
to change provider, endpoint, model, API-key env-var, or
privacy mode.
UX choices that align with the zero-learning-curve rule:
* Provider dropdown lists Ollama / OpenAI / LM Studio / vLLM
/ Custom by friendly name. Each selection auto-fills the
endpoint and api_key_env defaults — but only when the
field is still empty or matches a different preset's
default, so manual overrides are never clobbered.
* Each provider has a one-line description rendered under
the dropdown ("Ollama → Local `ollama serve`. Models stay
on your machine. No API key needed.") and a model-hint
placeholder ("gemma3:4b · llama3.2:3b · qwen2.5-coder:7b")
that goes away when a model is typed.
* Privacy mode is a vertical radio group with each option's
description in place — no doc-lookup needed.
* "Test connection" sends an `ok`-ping and renders the
same error-kind → fix-hint mapping the audit drill-down
uses.
* "Save" persists + hot-reloads the hub. No daemon restart
required. UI status badge flips to "enabled · <privacy>"
immediately.
`fai_dart_sdk` 0.5.0 carries the underlying `updateSystemAi` /
`testSystemAi` RPCs.
Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
469 lines
14 KiB
Dart
469 lines
14 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 '../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;
|
||
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> _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: 4),
|
||
for (final ch in _channels!.channels)
|
||
_ChannelRow(
|
||
channel: ch,
|
||
active: ch.name == _channels!.active,
|
||
onConnect: _saving ? null : () => _connectToChannel(ch),
|
||
),
|
||
],
|
||
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;
|
||
|
||
const _ChannelRow({
|
||
required this.channel,
|
||
required this.active,
|
||
required this.onConnect,
|
||
});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final theme = Theme.of(context);
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 2),
|
||
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)
|
||
Padding(
|
||
padding: const EdgeInsets.only(right: FaiSpace.sm),
|
||
child: Text(
|
||
'active',
|
||
style: theme.textTheme.labelSmall?.copyWith(
|
||
color: theme.colorScheme.primary,
|
||
),
|
||
),
|
||
),
|
||
TextButton(
|
||
onPressed: channel.running ? onConnect : null,
|
||
child: const Text('Connect'),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
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,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|