jpmschweitzer/clide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

render pasted images inline with lightbox expansion (T-236, T-254, D-89)

Browse Source 
A pasted-image @<path> token now renders as an inline, keyboard-activatable
thumbnail in the Claude conversation that opens the full image in the lightbox;
the composer's attachment chips use the same (larger, 44px) thumbnail. New
ImageThumbnail + openImageLightbox in the Claude layer; ClideMarkdown gains an
onImageToken builder seam (mirroring onRecordTap) that drops a WidgetSpan into
the text flow — it owns no Image.file/lightbox, staying generic. Missing files
degrade to a placeholder; render-only (the sent text + copyText are unchanged).

Resolves the conflicting T-236 (inline thumbnail) / T-254 (image card) designs
into the hybrid the user chose; recorded as D-89.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jpmschweitzer
2026-06-09 17:54:55 +02:00
co-authored by Claude Opus 4.8
parent 6f67757240
commit 529f40996d
9 changed files with 237 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/builtin/claude/src/claude_composer.dart
+5 -12
View File
@@ -9,10 +9,10 @@
library;
import 'dart:async';
import 'dart:io';
import 'package:clide/builtin/claude/src/claude_config.dart';
import 'package:clide/builtin/claude/src/clipboard_paste.dart';
import 'package:clide/builtin/claude/src/image_thumbnail.dart';
import 'package:clide/builtin/claude/src/permission_mode_control.dart';
import 'package:clide/builtin/claude/src/running_indicator.dart';
import 'package:clide/builtin/claude/src/slash_commands.dart';
@@ -574,18 +574,11 @@ class _ClaudeComposerState extends State<ClaudeComposer> {
}
Widget _chipLeading(SurfaceTokens theme, ComposerAttachment a) {
const dim = 28.0;
// A readable preview (not the old 28px speck) that opens the full image in
// the lightbox on click — the same thumbnail the conversation log uses
// (T-236/T-254).
if (a.isImage) {
return ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.file(
File(a.path),
width: dim,
height: dim,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => ClideIcon(PhosphorIcons.image, size: 18, color: theme.globalTextMuted),
),
);
return ImageThumbnail(path: a.path, size: 44);
}
return ClideIcon(PhosphorIcons.fileText, size: 18, color: theme.globalTextMuted);
}
lib/builtin/claude/src/conversation_view.dart
+8 -1
View File
@@ -16,6 +16,7 @@ import 'package:clide/builtin/claude/src/activity_cluster.dart';
import 'package:clide/builtin/claude/src/conversation_card.dart';
import 'package:clide/builtin/claude/src/conversation_controller.dart';
import 'package:clide/builtin/claude/src/holder_card.dart';
import 'package:clide/builtin/claude/src/image_thumbnail.dart';
import 'package:clide/builtin/claude/src/prompt_card.dart';
import 'package:clide/builtin/claude/src/transcript_reader.dart';
import 'package:clide/kernel/src/facade.dart';
@@ -367,7 +368,13 @@ class _ConversationTurn extends StatelessWidget {
accent: tokens.globalFocus,
label: 'you',
copyText: i.text,
body: ClideMarkdown(i.text, onRecordTap: (id) => _openRecord(context, id)),
// Pasted-image @path tokens render as inline thumbnails that open the
// lightbox (T-236/T-254); copyText keeps the original text verbatim.
body: ClideMarkdown(
i.text,
onRecordTap: (id) => _openRecord(context, id),
onImageToken: (path) => ImageThumbnail(path: path, size: 48),
),
),
// Sub-agent (sidechain) prose is NOT the main Claude — attribute it to the
// agent with a muted accent, never the coral "claude" brand (T-265). The
lib/builtin/claude/src/image_thumbnail.dart
+80
View File
@@ -0,0 +1,80 @@
/// Inline image preview for pasted-image references (T-236 / T-254).
///
/// A bounded, keyboard-activatable thumbnail that opens the full image in the
/// shared lightbox (T-252) on tap. Used both for `@<path>` image tokens in the
/// conversation log and for the composer's attachment chips, so the two stay
/// visually consistent. Reads the file directly via `Image.file` (dart:io) —
/// pasted temp files live outside the workspace, so this is not gated by the
/// `files.read` allow-list (D-80); it's display-only. A missing/unreadable file
/// degrades to a muted placeholder instead of throwing.
library;
import 'dart:io';
import 'package:clide/kernel/kernel.dart';
import 'package:clide/widgets/widgets.dart';
import 'package:flutter/widgets.dart';
/// Open [path] full-size in the lightbox via the kernel dialog router.
void openImageLightbox(BuildContext context, String path) {
ClideKernel.of(context).dialog.show<Object>(
(ctx, dismiss) => ClideLightbox(
onDismiss: dismiss,
child: Image.file(
File(path),
fit: BoxFit.contain,
errorBuilder: (ctx, _, __) => _placeholder(ctx, 48),
),
),
);
}
Widget _placeholder(BuildContext context, double size) {
final t = ClideTheme.of(context).surface;
return Container(
width: size,
height: size,
color: t.panelBackground,
alignment: Alignment.center,
child: ClideIcon(PhosphorIcons.image, size: size * 0.45, color: t.globalTextMuted),
);
}
class ImageThumbnail extends StatelessWidget {
const ImageThumbnail({super.key, required this.path, this.size = 56, this.radius = 4});
final String path;
final double size;
final double radius;
String get _fileName => path.split('/').where((s) => s.isNotEmpty).lastOrNull ?? path;
@override
Widget build(BuildContext context) {
final t = ClideTheme.of(context).surface;
return Semantics(
button: true,
label: 'Image $_fileName',
excludeSemantics: true,
child: ClideTappable(
onTap: () => openImageLightbox(context, path),
builder: (ctx, hovered, pressed) => DecoratedBox(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(radius),
border: Border.all(color: hovered ? t.globalFocus : t.globalBorder),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: Image.file(
File(path),
width: size,
height: size,
fit: BoxFit.cover,
errorBuilder: (ctx, _, __) => _placeholder(ctx, size),
),
),
),
),
);
}
}
lib/widgets/src/clide_markdown.dart
+68 -26
View File
@@ -10,8 +10,13 @@ import 'package:markdown/markdown.dart' as md;
typedef RecordTapCallback = void Function(String id);
/// Builds the inline widget for a recognised `@<path>` image token (T-236). The
/// caller owns how the image renders (thumbnail, tap-to-lightbox); the renderer
/// only locates the tokens and drops the widget into the text flow.
typedef ImageTokenBuilder = Widget Function(String path);
class ClideMarkdown extends StatelessWidget {
const ClideMarkdown(this.source, {super.key, this.onRecordTap});
const ClideMarkdown(this.source, {super.key, this.onRecordTap, this.onImageToken});
static const double _fontSize = 16;
static const double _lineHeight = clideLineHeight;
@@ -27,8 +32,15 @@ class ClideMarkdown extends StatelessWidget {
/// refs inside code stay plain.
static final _bareRecordPattern = RegExp(r'\b[DQRT]-\d+\b');
/// A pasted-image `@<path>` token in running text (T-236): an `@` at a token
/// boundary followed by a path ending in an image extension. The lookbehind
/// keeps `foo@bar.png` (email-ish, mid-word) literal — only start-of-string or
/// a preceding space qualifies, which is how the composer emits them.
static final _imageTokenPattern = RegExp(r'(?<![^\s])@(\S+\.(?:png|jpe?g|gif|webp|bmp))', caseSensitive: false);
final String source;
final RecordTapCallback? onRecordTap;
final ImageTokenBuilder? onImageToken;
static String _unescapeHtml(String s) {
return s
@@ -45,7 +57,7 @@ class ClideMarkdown extends StatelessWidget {
final tokens = ClideTheme.of(context).surface;
final doc = md.Document(extensionSet: md.ExtensionSet.gitHubFlavored);
final nodes = doc.parseLines(source.split('\n'));
final widgets = _buildNodes(nodes, tokens, onRecordTap);
final widgets = _buildNodes(nodes, tokens, onRecordTap, onImageToken: onImageToken);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
@@ -61,7 +73,7 @@ class ClideMarkdown extends StatelessWidget {
return false;
}
static List<Widget> _buildNodes(List<md.Node> nodes, SurfaceTokens tokens, RecordTapCallback? onRecordTap) {
static List<Widget> _buildNodes(List<md.Node> nodes, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {ImageTokenBuilder? onImageToken}) {
final out = <Widget>[];
final inlineRun = <md.Node>[];
@@ -70,9 +82,9 @@ class ClideMarkdown extends StatelessWidget {
final spans = <InlineSpan>[];
for (final n in inlineRun) {
if (n is md.Text) {
spans.addAll(_linkifyText(_unescapeHtml(n.text), tokens, onRecordTap));
spans.addAll(_linkifyText(_unescapeHtml(n.text), tokens, onRecordTap, onImageToken: onImageToken));
} else if (n is md.Element) {
spans.add(_inlineElementSpan(n, tokens, onRecordTap));
spans.add(_inlineElementSpan(n, tokens, onRecordTap, onImageToken: onImageToken));
}
}
out.add(Text.rich(
@@ -97,7 +109,7 @@ class ClideMarkdown extends StatelessWidget {
} else {
flushInline();
if (node is md.Element) {
out.add(_buildElement(node, tokens, onRecordTap));
out.add(_buildElement(node, tokens, onRecordTap, onImageToken: onImageToken));
}
}
}
@@ -105,7 +117,7 @@ class ClideMarkdown extends StatelessWidget {
return out;
}
static Widget _buildElement(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap) {
static Widget _buildElement(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {ImageTokenBuilder? onImageToken}) {
switch (el.tag) {
case 'h1':
return Padding(
@@ -132,7 +144,7 @@ class ClideMarkdown extends StatelessWidget {
case 'p':
return Padding(
padding: const EdgeInsets.only(bottom: 14),
child: _inlineRichText(el, tokens, onRecordTap),
child: _inlineRichText(el, tokens, onRecordTap, onImageToken: onImageToken),
);
case 'ul':
return Padding(
@@ -142,7 +154,7 @@ class ClideMarkdown extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
for (final c in el.children ?? const [])
if (c is md.Element) _buildListItem(c, tokens, onRecordTap, ordered: false)
if (c is md.Element) _buildListItem(c, tokens, onRecordTap, ordered: false, onImageToken: onImageToken)
],
),
);
@@ -154,7 +166,8 @@ class ClideMarkdown extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
for (var i = 0; i < (el.children?.length ?? 0); i++)
if (el.children![i] is md.Element) _buildListItem(el.children![i] as md.Element, tokens, onRecordTap, ordered: true, index: i + 1),
if (el.children![i] is md.Element)
_buildListItem(el.children![i] as md.Element, tokens, onRecordTap, ordered: true, index: i + 1, onImageToken: onImageToken),
],
),
);
@@ -166,7 +179,7 @@ class ClideMarkdown extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: _buildNodes(el.children?.cast<md.Node>() ?? const [], tokens, onRecordTap),
children: _buildNodes(el.children?.cast<md.Node>() ?? const [], tokens, onRecordTap, onImageToken: onImageToken),
),
);
case 'pre':
@@ -189,11 +202,12 @@ class ClideMarkdown extends StatelessWidget {
child: _buildTable(el, tokens, onRecordTap),
);
default:
return _inlineRichText(el, tokens, onRecordTap);
return _inlineRichText(el, tokens, onRecordTap, onImageToken: onImageToken);
}
}
static Widget _buildListItem(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {bool ordered = false, int index = 1}) {
static Widget _buildListItem(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap,
{bool ordered = false, int index = 1, ImageTokenBuilder? onImageToken}) {
final bullet = ordered ? '$index. ' : '• ';
return Padding(
padding: const EdgeInsets.only(bottom: 10),
@@ -205,7 +219,7 @@ class ClideMarkdown extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: _buildNodes(el.children?.cast<md.Node>() ?? const [], tokens, onRecordTap),
children: _buildNodes(el.children?.cast<md.Node>() ?? const [], tokens, onRecordTap, onImageToken: onImageToken),
),
),
],
@@ -248,17 +262,18 @@ class ClideMarkdown extends StatelessWidget {
return Text.rich(_buildInlineSpan(el, tokens, onRecordTap, fontSize: fontSize, fontWeight: fontWeight));
}
static Widget _inlineRichText(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap) {
return Text.rich(_buildInlineSpan(el, tokens, onRecordTap));
static Widget _inlineRichText(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {ImageTokenBuilder? onImageToken}) {
return Text.rich(_buildInlineSpan(el, tokens, onRecordTap, onImageToken: onImageToken));
}
static TextSpan _buildInlineSpan(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {double? fontSize, FontWeight? fontWeight}) {
static TextSpan _buildInlineSpan(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap,
{double? fontSize, FontWeight? fontWeight, ImageTokenBuilder? onImageToken}) {
final children = <InlineSpan>[];
for (final child in el.children ?? const []) {
if (child is md.Text) {
children.addAll(_linkifyText(_unescapeHtml(child.text), tokens, onRecordTap));
children.addAll(_linkifyText(_unescapeHtml(child.text), tokens, onRecordTap, onImageToken: onImageToken));
} else if (child is md.Element) {
children.add(_inlineElementSpan(child, tokens, onRecordTap));
children.add(_inlineElementSpan(child, tokens, onRecordTap, onImageToken: onImageToken));
}
}
return TextSpan(
@@ -274,14 +289,17 @@ class ClideMarkdown extends StatelessWidget {
);
}
static InlineSpan _inlineElementSpan(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap) {
static InlineSpan _inlineElementSpan(md.Element el, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {ImageTokenBuilder? onImageToken}) {
switch (el.tag) {
case 'strong':
return TextSpan(
style: const TextStyle(fontWeight: FontWeight.w700),
children: [
for (final c in el.children ?? const [])
if (c is md.Text) ..._linkifyText(_unescapeHtml(c.text), tokens, onRecordTap) else if (c is md.Element) _inlineElementSpan(c, tokens, onRecordTap)
if (c is md.Text)
..._linkifyText(_unescapeHtml(c.text), tokens, onRecordTap, onImageToken: onImageToken)
else if (c is md.Element)
_inlineElementSpan(c, tokens, onRecordTap, onImageToken: onImageToken)
],
);
case 'em':
@@ -289,7 +307,10 @@ class ClideMarkdown extends StatelessWidget {
style: const TextStyle(fontStyle: FontStyle.italic),
children: [
for (final c in el.children ?? const [])
if (c is md.Text) ..._linkifyText(_unescapeHtml(c.text), tokens, onRecordTap) else if (c is md.Element) _inlineElementSpan(c, tokens, onRecordTap)
if (c is md.Text)
..._linkifyText(_unescapeHtml(c.text), tokens, onRecordTap, onImageToken: onImageToken)
else if (c is md.Element)
_inlineElementSpan(c, tokens, onRecordTap, onImageToken: onImageToken)
],
);
case 'code':
@@ -316,10 +337,31 @@ class ClideMarkdown extends StatelessWidget {
}
}
/// Splits plain [text] into spans, turning bare governance/ticket refs
/// (T-281, D-77, Q-5, R-2) into clickable [_recordLinkSpan]s (T-279). With no
/// [onRecordTap] (or no match) the text passes through unchanged.
static List<InlineSpan> _linkifyText(String text, SurfaceTokens tokens, RecordTapCallback? onRecordTap) {
/// Splits plain [text] into spans: pasted-image `@<path>` tokens become inline
/// image widgets via [onImageToken] (T-236), and bare governance/ticket refs
/// (T-281, D-77, Q-5, R-2) become clickable [_recordLinkSpan]s (T-279). With
/// neither callback (or no match) the text passes through unchanged.
static List<InlineSpan> _linkifyText(String text, SurfaceTokens tokens, RecordTapCallback? onRecordTap, {ImageTokenBuilder? onImageToken}) {
if (text.isEmpty) return [TextSpan(text: text)];
// Pass 1: pull out image tokens, record-linkifying the prose between them.
if (onImageToken != null) {
final spans = <InlineSpan>[];
var last = 0;
for (final m in _imageTokenPattern.allMatches(text)) {
if (m.start > last) spans.addAll(_linkifyRecords(text.substring(last, m.start), tokens, onRecordTap));
spans.add(WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: Padding(padding: const EdgeInsets.symmetric(horizontal: 2), child: onImageToken(m.group(1)!)),
));
last = m.end;
}
if (last < text.length) spans.addAll(_linkifyRecords(text.substring(last), tokens, onRecordTap));
return spans.isEmpty ? [TextSpan(text: text)] : spans;
}
return _linkifyRecords(text, tokens, onRecordTap);
}
static List<InlineSpan> _linkifyRecords(String text, SurfaceTokens tokens, RecordTapCallback? onRecordTap) {
if (onRecordTap == null || text.isEmpty) return [TextSpan(text: text)];
final spans = <InlineSpan>[];
var last = 0;