feat(studio): trust pass — friendly errors + store clarity + MCP i18n
Second half of the May-2026 trust pass. Drops the wall of gRPC trailers from every error surface and makes the Store honest about what is and isn't installable. Friendly errors: - New `friendlyError(Object, AppLocalizations)` mapper turns GrpcError + arbitrary throwables into a localised headline, optional recovery hint, and a verbatim detail string kept behind a "Show details" expander. Duck-typed on `.code` / `.message` so Studio doesn't have to depend on package:grpc directly. - `FaiErrorBox` gains an `error:` constructor that runs the mapper. Every call site that used to render `snap.error.toString()` (flows, welcome, store) switches to it. - 9 .arb entries per locale cover the gRPC codes we actually emit (INVALID_ARGUMENT, NOT_FOUND, ALREADY_EXISTS, PERMISSION_DENIED, FAILED_PRECONDITION, INTERNAL, UNAVAILABLE, UNAUTHENTICATED) plus copy/details affordances. - `test/friendly_error_test.dart` — 6 unit tests for the mapper. Covers the mapping table, locale-switching, and the non-gRPC fallback so future regressions show up in CI. Capability discovery: - New `HubService.allCapabilities()` reads the kind-aware capability list (wasm + builtin + federated) and returns a Dart-side `CapabilityInfo` value type. The flow page's missing-dependency check uses it so `system.approval` and federated MCP/n8n tools count as "available" — fixes the Run button staying disabled forever. - `HubService.listModules()` filters to kind=wasm so the Modules page doesn't sprout synthetic "system" entries that the operator can't uninstall. Store clarity: - New "Installable only" filter, on by default. Roughly 2/3 of seed entries currently carry `status: planned`; the default view stops being noise. - Featured-strip cards for planned modules now show a "Coming soon" pill instead of an empty action area. - Main-grid cards for non-installable modules dim to 60% opacity so the eye lands on actionable cards first. - Detail-sheet "Nicht installierbar" tooltip → inline hint box. The reason is visible without hovering. MCP localisation: - `_kMcpSuggestions` no longer holds 11 hardcoded English description strings. The `description` field is replaced with a `resolveDescription(AppLocalizations)` lookup that switches on the suggestion `name` to read the matching `mcpSuggestion*Desc` .arb key. EN + DE shipped. - New `FaiEnBadge` widget renders a small `[EN]` pill when the active locale isn't English. Used next to MCP / federated store entries' tagline + description because the server supplies them in English and we can't translate on the fly yet — the badge is the honest signal until the planned `studio.translate` plugin lands. Plus housekeeping: removed the unused `_keepImport` lint escape in the test and the dangling library doc-comment in `format.dart`. Signed-off-by: flemming-it <sf@flemming.it> Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it
parent
34f2b7b313
commit
c11461b0f9
15 changed files with 1219 additions and 104 deletions
61
lib/widgets/fai_en_badge.dart
Normal file
61
lib/widgets/fai_en_badge.dart
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// FaiEnBadge — small "[EN]" pill shown next to text that came
|
||||
// from outside Studio's localization pipeline (MCP server tool
|
||||
// names, n8n endpoint descriptions, native LLM responses).
|
||||
//
|
||||
// The honest move: when the active locale isn't English and we
|
||||
// show a piece of text that we know is English, mark it so the
|
||||
// operator doesn't blame Studio for a half-translated page.
|
||||
// `studio.translate` plugin will eventually rewrite these in
|
||||
// place — until then, the badge is the right amount of
|
||||
// transparency.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../l10n/app_localizations.dart';
|
||||
import '../theme/tokens.dart';
|
||||
|
||||
class FaiEnBadge extends StatelessWidget {
|
||||
/// When true, the badge renders. When false (e.g. the active
|
||||
/// locale already is English), it returns
|
||||
/// `SizedBox.shrink()` so callers can drop it inline without
|
||||
/// guarding visibility themselves.
|
||||
final bool visible;
|
||||
|
||||
const FaiEnBadge({super.key, required this.visible});
|
||||
|
||||
/// Convenience constructor: derives `visible` from the active
|
||||
/// Localizations locale. Use this from inside a Build method
|
||||
/// where you already have a BuildContext.
|
||||
factory FaiEnBadge.forContext(BuildContext context) {
|
||||
final lang = Localizations.localeOf(context).languageCode;
|
||||
return FaiEnBadge(visible: lang != 'en');
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (!visible) return const SizedBox.shrink();
|
||||
final theme = Theme.of(context);
|
||||
final l = AppLocalizations.of(context)!;
|
||||
return Tooltip(
|
||||
message: l.mcpServerEnLanguageBadge,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 1),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainerHighest,
|
||||
borderRadius: BorderRadius.circular(FaiRadius.sm),
|
||||
border: Border.all(
|
||||
color: theme.colorScheme.outlineVariant,
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
'EN',
|
||||
style: theme.textTheme.labelSmall?.copyWith(
|
||||
fontSize: 9,
|
||||
letterSpacing: 0.4,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,13 +10,15 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import '../data/friendly_error.dart';
|
||||
import '../l10n/app_localizations.dart';
|
||||
import '../theme/theme.dart';
|
||||
import '../theme/tokens.dart';
|
||||
|
||||
class FaiErrorBox extends StatefulWidget {
|
||||
/// The text the operator wants to read (and copy). Rendered
|
||||
/// monospace, selectable, multi-line.
|
||||
/// monospace, selectable, multi-line. Ignored when [error] is
|
||||
/// supplied.
|
||||
final String text;
|
||||
/// When true, the box border + foreground colour come from the
|
||||
/// error palette. False renders neutral chrome — useful for
|
||||
|
|
@ -27,13 +29,25 @@ class FaiErrorBox extends StatefulWidget {
|
|||
/// box. Falls back to no constraint when null so short
|
||||
/// messages don't get a useless scrollbar.
|
||||
final double? maxHeight;
|
||||
/// When non-null, the box renders the [friendlyError] mapping
|
||||
/// of this error: a one-line headline, a recovery-hint line
|
||||
/// (when one applies), and the verbatim original message
|
||||
/// collapsed behind a "Details" expander. Use this instead of
|
||||
/// [text] anywhere we'd otherwise show a raw
|
||||
/// `e.toString()` — gRPC-Errors come out as walls of code +
|
||||
/// trailers otherwise.
|
||||
final Object? error;
|
||||
|
||||
const FaiErrorBox({
|
||||
super.key,
|
||||
required this.text,
|
||||
this.text = '',
|
||||
this.isError = false,
|
||||
this.maxHeight,
|
||||
});
|
||||
this.error,
|
||||
}) : assert(
|
||||
text != '' || error != null,
|
||||
'FaiErrorBox needs either text or error',
|
||||
);
|
||||
|
||||
@override
|
||||
State<FaiErrorBox> createState() => _FaiErrorBoxState();
|
||||
|
|
@ -41,9 +55,10 @@ class FaiErrorBox extends StatefulWidget {
|
|||
|
||||
class _FaiErrorBoxState extends State<FaiErrorBox> {
|
||||
bool _justCopied = false;
|
||||
bool _detailExpanded = false;
|
||||
|
||||
Future<void> _copy() async {
|
||||
await Clipboard.setData(ClipboardData(text: widget.text));
|
||||
Future<void> _copy(String what) async {
|
||||
await Clipboard.setData(ClipboardData(text: what));
|
||||
if (!mounted) return;
|
||||
setState(() => _justCopied = true);
|
||||
Future.delayed(const Duration(seconds: 2), () {
|
||||
|
|
@ -61,6 +76,10 @@ class _FaiErrorBoxState extends State<FaiErrorBox> {
|
|||
final fg = widget.isError
|
||||
? theme.colorScheme.error
|
||||
: theme.colorScheme.onSurface;
|
||||
final friendly = widget.error == null
|
||||
? null
|
||||
: friendlyError(widget.error!, l);
|
||||
final copyText = friendly?.detail ?? widget.text;
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
|
|
@ -75,37 +94,101 @@ class _FaiErrorBoxState extends State<FaiErrorBox> {
|
|||
border: Border.all(color: accent.withValues(alpha: 0.4)),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Copy button sits above the text on its own row so
|
||||
// long messages never collide with it. Compact enough
|
||||
// not to dominate short single-line messages.
|
||||
Tooltip(
|
||||
message: _justCopied ? l.buttonCopied : l.buttonCopy,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
_justCopied ? Icons.check : Icons.content_copy,
|
||||
size: 14,
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: Tooltip(
|
||||
message: _justCopied ? l.buttonCopied : l.buttonCopy,
|
||||
child: IconButton(
|
||||
icon: Icon(
|
||||
_justCopied ? Icons.check : Icons.content_copy,
|
||||
size: 14,
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
padding: const EdgeInsets.all(4),
|
||||
constraints: const BoxConstraints(),
|
||||
onPressed: () => _copy(copyText),
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
padding: const EdgeInsets.all(4),
|
||||
constraints: const BoxConstraints(),
|
||||
onPressed: _copy,
|
||||
),
|
||||
),
|
||||
ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxHeight: widget.maxHeight ?? double.infinity,
|
||||
if (friendly != null) ...[
|
||||
SelectableText(
|
||||
friendly.headline,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: fg,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
child: Scrollbar(
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
widget.text,
|
||||
style: FaiTheme.mono(size: 11, color: fg),
|
||||
if (friendly.hint != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
friendly.hint!,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
if (friendly.detail.isNotEmpty) ...[
|
||||
const SizedBox(height: FaiSpace.sm),
|
||||
InkWell(
|
||||
onTap: () => setState(() {
|
||||
_detailExpanded = !_detailExpanded;
|
||||
}),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
_detailExpanded
|
||||
? Icons.expand_less
|
||||
: Icons.expand_more,
|
||||
size: 14,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
_detailExpanded ? l.buttonHideDetails : l.buttonShowDetails,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_detailExpanded) ...[
|
||||
const SizedBox(height: FaiSpace.xs),
|
||||
ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxHeight: widget.maxHeight ?? double.infinity,
|
||||
),
|
||||
child: Scrollbar(
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
friendly.detail,
|
||||
style: FaiTheme.mono(
|
||||
size: 11,
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
] else
|
||||
ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxHeight: widget.maxHeight ?? double.infinity,
|
||||
),
|
||||
child: Scrollbar(
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
widget.text,
|
||||
style: FaiTheme.mono(size: 11, color: fg),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1023,11 +1023,12 @@ class _AddMcpClientDialogState extends State<_AddMcpClientDialog> {
|
|||
/// Pick a suggestion → fill the form. Operators still hit
|
||||
/// "Add + discover" so nothing happens unprompted.
|
||||
void _applySuggestion(_McpSuggestion s) {
|
||||
final l = AppLocalizations.of(context)!;
|
||||
setState(() {
|
||||
_name.text = s.name;
|
||||
_endpoint.text = s.endpoint;
|
||||
_apiKey.text = s.apiKeyEnv;
|
||||
_desc.text = s.description;
|
||||
_desc.text = s.resolveDescription(l);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -1770,36 +1771,73 @@ class _McpSuggestion {
|
|||
final IconData icon;
|
||||
final String endpoint;
|
||||
final String apiKeyEnv;
|
||||
final String description;
|
||||
/// Localizable description. Use [resolveDescription] to fetch
|
||||
/// the actual text in the active locale — the const list
|
||||
/// can't hold a closure that takes [AppLocalizations], and
|
||||
/// hardcoding English here is what got us into the
|
||||
/// untranslated-helper-text bug.
|
||||
String resolveDescription(AppLocalizations l) =>
|
||||
_suggestionDescription(l, name);
|
||||
const _McpSuggestion({
|
||||
required this.name,
|
||||
required this.icon,
|
||||
required this.endpoint,
|
||||
required this.apiKeyEnv,
|
||||
required this.description,
|
||||
});
|
||||
}
|
||||
|
||||
/// Localizable lookup of an MCP-suggestion description. Keyed
|
||||
/// on the same suggestion `name` field as the list below. New
|
||||
/// suggestions need a matching .arb entry; the default-case
|
||||
/// returns an empty string so an unconfigured suggestion fails
|
||||
/// silently instead of leaking a key into the UI.
|
||||
String _suggestionDescription(AppLocalizations l, String name) {
|
||||
switch (name) {
|
||||
case 'deepwiki':
|
||||
return l.mcpSuggestionDeepwikiDesc;
|
||||
case 'semgrep':
|
||||
return l.mcpSuggestionSemgrepDesc;
|
||||
case 'filesystem':
|
||||
return l.mcpSuggestionFilesystemDesc;
|
||||
case 'fetch':
|
||||
return l.mcpSuggestionFetchDesc;
|
||||
case 'github':
|
||||
return l.mcpSuggestionGithubDesc;
|
||||
case 'puppeteer':
|
||||
return l.mcpSuggestionPuppeteerDesc;
|
||||
case 'postgres':
|
||||
return l.mcpSuggestionPostgresDesc;
|
||||
case 'sqlite':
|
||||
return l.mcpSuggestionSqliteDesc;
|
||||
case 'brave-search':
|
||||
return l.mcpSuggestionBraveSearchDesc;
|
||||
case 'memory':
|
||||
return l.mcpSuggestionMemoryDesc;
|
||||
case 'time':
|
||||
return l.mcpSuggestionTimeDesc;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
const _kMcpSuggestions = <_McpSuggestion>[
|
||||
// ── HTTPS / streamable-HTTP servers (no Node, no API key) ──
|
||||
// Same set Studio promotes as one-click cards in the Today
|
||||
// hero — listed here so the operator finds them even after
|
||||
// the hero gets dismissed.
|
||||
// Descriptions are resolved via [_McpSuggestion.resolveDescription]
|
||||
// against the active locale — see `mcpSuggestion*Desc` keys in
|
||||
// app_en.arb / app_de.arb. Adding a suggestion here means
|
||||
// adding a matching key in both .arb files plus a case to
|
||||
// `_suggestionDescription` above.
|
||||
_McpSuggestion(
|
||||
name: 'deepwiki',
|
||||
icon: Icons.menu_book_outlined,
|
||||
endpoint: 'https://mcp.deepwiki.com/mcp',
|
||||
apiKeyEnv: '',
|
||||
description:
|
||||
'Public HTTPS — GitHub repo documentation search (AI-powered). No Node, no API key.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'semgrep',
|
||||
icon: Icons.security,
|
||||
endpoint: 'https://mcp.semgrep.ai/mcp',
|
||||
apiKeyEnv: '',
|
||||
description:
|
||||
'Public HTTPS — security scanning for code vulnerabilities. No Node, no API key.',
|
||||
),
|
||||
// ── stdio servers (require Node + npx) ───────────────────
|
||||
_McpSuggestion(
|
||||
|
|
@ -1807,30 +1845,24 @@ const _kMcpSuggestions = <_McpSuggestion>[
|
|||
icon: Icons.folder_outlined,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-filesystem /tmp',
|
||||
apiKeyEnv: '',
|
||||
description:
|
||||
'Anthropic — read/write files in /tmp. Edit the path before saving.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'fetch',
|
||||
icon: Icons.cloud_download_outlined,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-fetch',
|
||||
apiKeyEnv: '',
|
||||
description: 'Anthropic — fetch arbitrary HTTP(S) URLs as markdown.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'github',
|
||||
icon: Icons.code,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-github',
|
||||
apiKeyEnv: 'GITHUB_PERSONAL_ACCESS_TOKEN',
|
||||
description:
|
||||
'Anthropic — issues, PRs, repo files. Needs a GitHub PAT in the env var.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'puppeteer',
|
||||
icon: Icons.web,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-puppeteer',
|
||||
apiKeyEnv: '',
|
||||
description: 'Anthropic — headless browser automation for screenshots / scraping.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'postgres',
|
||||
|
|
@ -1838,8 +1870,6 @@ const _kMcpSuggestions = <_McpSuggestion>[
|
|||
endpoint:
|
||||
'stdio://npx -y @modelcontextprotocol/server-postgres postgresql://user:pw@host/db',
|
||||
apiKeyEnv: '',
|
||||
description:
|
||||
'Anthropic — read-only SQL queries against a Postgres database. Edit the URL.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'sqlite',
|
||||
|
|
@ -1847,27 +1877,23 @@ const _kMcpSuggestions = <_McpSuggestion>[
|
|||
endpoint:
|
||||
'stdio://npx -y @modelcontextprotocol/server-sqlite --db-path /tmp/db.sqlite',
|
||||
apiKeyEnv: '',
|
||||
description: 'Anthropic — query a local SQLite file. Edit the path.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'brave-search',
|
||||
icon: Icons.search,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-brave-search',
|
||||
apiKeyEnv: 'BRAVE_API_KEY',
|
||||
description: 'Anthropic — web search via Brave. API key required.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'memory',
|
||||
icon: Icons.psychology_outlined,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-memory',
|
||||
apiKeyEnv: '',
|
||||
description: 'Anthropic — persistent knowledge graph for an agent\'s memory.',
|
||||
),
|
||||
_McpSuggestion(
|
||||
name: 'time',
|
||||
icon: Icons.schedule,
|
||||
endpoint: 'stdio://npx -y @modelcontextprotocol/server-time',
|
||||
apiKeyEnv: '',
|
||||
description: 'Anthropic — current time + timezone conversion.',
|
||||
),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export 'fai_card.dart';
|
|||
export 'fai_data_row.dart';
|
||||
export 'fai_delta_mark.dart';
|
||||
export 'fai_empty_state.dart';
|
||||
export 'fai_en_badge.dart';
|
||||
export 'fai_error_box.dart';
|
||||
export 'fai_flow_output.dart';
|
||||
export 'fai_module_sheet.dart';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue