From 3a840a1399246046e006c254baba9d9e0f4a92fd Mon Sep 17 00:00:00 2001
From: DevMando <codefilez@gmail.com>
Date: Tue, 21 Jul 2026 00:35:44 -0700
Subject: [PATCH] Add file explorer panel with prompt tagging and transcript
 readability polish

- Docked, resizable file explorer per chat tab (lazy-loaded tree, double-click opens files)
- Tag files/folders into the prompt as @references: per-row @ button, drag & drop from the tree or Windows Explorer, and a drop-to-tag overlay over the transcript
- Transcript: long pasted prompts clamp to ~8 lines with Show more/less; copy buttons and expand/collapse now also work in exported transcript HTML files
---
 .../Controls/ChatTabView.xaml                 | 141 ++++++-
 .../Controls/ChatTabView.xaml.cs              | 350 ++++++++++++++++++
 src/MandoCode.Desktop/Controls/ResizeGrip.cs  |  21 +-
 .../Services/TranscriptHtmlBuilder.cs         | 113 +++++-
 4 files changed, 596 insertions(+), 29 deletions(-)

diff --git a/src/MandoCode.Desktop/Controls/ChatTabView.xaml b/src/MandoCode.Desktop/Controls/ChatTabView.xaml
index d3f6cfc..1a4ec11 100644
--- a/src/MandoCode.Desktop/Controls/ChatTabView.xaml
+++ b/src/MandoCode.Desktop/Controls/ChatTabView.xaml
@@ -3,9 +3,12 @@
     x:Class="MandoCode.Desktop.ChatTabView"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:MandoCode.Desktop">
+    xmlns:local="using:MandoCode.Desktop"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:controls="using:MandoCode.Desktop.Controls">
 
-    <Grid x:Name="ChatRoot">
+    <Grid x:Name="ChatRoot" SizeChanged="ChatRoot_SizeChanged"
+          AllowDrop="True" DragEnter="ChatRoot_DragEnter" DragLeave="ChatRoot_DragLeave">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
@@ -109,10 +112,116 @@
                         ToolTipService.ToolTip="Change this tab's project folder">
                     <FontIcon Glyph="&#xE8B7;" FontSize="15"/>
                 </Button>
+                <Button x:Name="ExplorerButton" Click="ExplorerButton_Click" Padding="8,5"
+                        ToolTipService.ToolTip="Show or hide the file explorer">
+                    <FontIcon Glyph="&#xEC50;" FontSize="15"/>
+                </Button>
             </StackPanel>
         </Grid>
 
-        <WebView2 x:Name="TranscriptView" Grid.Row="1" DefaultBackgroundColor="#16121F"/>
+        <!-- Transcript row: the explorer panel DOCKS in the second column (like the snapshot
+             list docks beside the chat), so opening it resizes the transcript instead of
+             covering its text. Column width is set in code (~20% of the window, clamped);
+             Collapsed removes it from layout entirely and the transcript reclaims the width. -->
+        <Grid Grid.Row="1">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+
+            <WebView2 x:Name="TranscriptView" DefaultBackgroundColor="#16121F"/>
+
+            <!-- Drag splitter for the explorer: ResizeGrip shows the ↔ cursor on hover; the
+                 drag itself is pointer events in code-behind (same pattern as the terminal's
+                 splitter in MainWindow). Shown/hidden together with the panel. -->
+            <controls:ResizeGrip x:Name="ExplorerSplitter" Grid.Column="1" Width="6"
+                                 Visibility="Collapsed" Background="Transparent"
+                                 GripOrientation="Vertical"
+                                 PointerPressed="ExplorerSplitter_PointerPressed"
+                                 PointerMoved="ExplorerSplitter_PointerMoved"
+                                 PointerReleased="ExplorerSplitter_PointerReleased"/>
+
+            <!-- ======= File explorer panel (solution-explorer style) =======
+                 Toggled by the header's explorer button. The tree is LAZY: a folder's children
+                 are only read from disk when it is first expanded, so opening the panel never
+                 scans node_modules/bin/obj unless you drill into them. -->
+            <Grid x:Name="ExplorerPanel" Grid.Column="2" Visibility="Collapsed" Width="280"
+                  Background="{StaticResource MandoPanelBrush}"
+                  BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="1,0,0,0">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="*"/>
+                </Grid.RowDefinitions>
+
+                <Grid Grid.Row="0" Padding="12,8,6,8" ColumnSpacing="8"
+                      BorderBrush="{StaticResource MandoBorderBrush}" BorderThickness="0,0,0,1">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto"/>
+                        <ColumnDefinition Width="*"/>
+                        <ColumnDefinition Width="Auto"/>
+                        <ColumnDefinition Width="Auto"/>
+                    </Grid.ColumnDefinitions>
+                    <FontIcon Glyph="&#xEC50;" FontSize="14" VerticalAlignment="Center"
+                              Foreground="{StaticResource MandoAccentBrush}"/>
+                    <TextBlock x:Name="ExplorerRootText" Grid.Column="1" FontWeight="SemiBold"
+                               FontSize="13" VerticalAlignment="Center"
+                               TextTrimming="CharacterEllipsis"/>
+                    <Button Grid.Column="2" Click="ExplorerRefresh_Click" Padding="6"
+                            Background="Transparent" BorderThickness="0"
+                            ToolTipService.ToolTip="Refresh — re-read the folder tree from disk">
+                        <FontIcon Glyph="&#xE72C;" FontSize="12"/>
+                    </Button>
+                    <Button Grid.Column="3" Click="ExplorerClose_Click" Padding="6"
+                            Background="Transparent" BorderThickness="0"
+                            ToolTipService.ToolTip="Close the file explorer">
+                        <FontIcon Glyph="&#xE711;" FontSize="12"/>
+                    </Button>
+                </Grid>
+
+                <TreeView x:Name="ExplorerTree" Grid.Row="1" SelectionMode="Single"
+                          CanDragItems="True" CanReorderItems="False" AllowDrop="False"
+                          DragItemsStarting="ExplorerTree_DragItemsStarting"
+                          Expanding="ExplorerTree_Expanding" ItemInvoked="ExplorerTree_ItemInvoked"
+                          DoubleTapped="ExplorerTree_DoubleTapped"
+                          Padding="4,6,4,6">
+                    <TreeView.ItemContainerStyle>
+                        <Style TargetType="TreeViewItem">
+                            <Setter Property="MinHeight" Value="26"/>
+                        </Style>
+                    </TreeView.ItemContainerStyle>
+                    <TreeView.ItemTemplate>
+                        <DataTemplate x:DataType="muxc:TreeViewNode">
+                            <Grid ColumnSpacing="8">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+                                <FontIcon Glyph="{x:Bind ((local:ExplorerItem)Content).Glyph}"
+                                          FontSize="13" VerticalAlignment="Center"
+                                          Foreground="{x:Bind ((local:ExplorerItem)Content).IconBrush}"/>
+                                <TextBlock Grid.Column="1"
+                                           Text="{x:Bind ((local:ExplorerItem)Content).Name}"
+                                           FontSize="13" VerticalAlignment="Center"
+                                           TextTrimming="CharacterEllipsis"/>
+                                <!-- Tag button: inserts this row's @token into the prompt, same as
+                                     dragging it there. Dim at rest, brightens on hover (code-behind —
+                                     WinUI styles have no triggers). -->
+                                <Button Grid.Column="2" Click="ExplorerTag_Click"
+                                        PointerEntered="ExplorerTag_PointerEntered"
+                                        PointerExited="ExplorerTag_PointerExited"
+                                        Padding="6,1" Background="Transparent" BorderThickness="0"
+                                        Opacity="0.45" VerticalAlignment="Center"
+                                        ToolTipService.ToolTip="{x:Bind ((local:ExplorerItem)Content).TagTooltip}">
+                                    <TextBlock Text="@" FontSize="13"/>
+                                </Button>
+                            </Grid>
+                        </DataTemplate>
+                    </TreeView.ItemTemplate>
+                </TreeView>
+            </Grid>
+        </Grid>
 
         <StackPanel x:Name="PlanProgressPanel" Grid.Row="2" Visibility="Collapsed" Padding="16,6,16,0">
             <TextBlock x:Name="PlanProgressText" FontSize="12" Opacity="0.7" Margin="0,0,0,2"/>
@@ -231,6 +340,31 @@
             </Border>
         </Grid>
 
+        <!-- ======= Drop-to-tag overlay =======
+             Mounts over the transcript row the moment an in-progress drag enters the tab —
+             via ChatRoot's DragEnter for drags over XAML chrome, or the transcript script's
+             'drag-enter' web message for drags over the WebView surface (Chromium owns those;
+             XAML never sees them). Once visible, the OS retargets the drag to THIS element,
+             so the drop arrives in XAML with real file paths. The inner card is hit-test
+             invisible so the whole sheet is one uniform drop target. -->
+        <Grid x:Name="DropOverlay" Grid.Row="1" Visibility="Collapsed" Background="#B0000000"
+              AllowDrop="True" DragOver="DropOverlay_DragOver" Drop="DropOverlay_Drop"
+              DragLeave="DropOverlay_DragLeave">
+            <Border IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center"
+                    Background="{StaticResource MandoPanelBrush}"
+                    BorderBrush="{StaticResource MandoAccentBrush}" BorderThickness="2"
+                    CornerRadius="14" Padding="36,26">
+                <StackPanel Spacing="6" HorizontalAlignment="Center">
+                    <TextBlock Text="@" FontSize="40" FontWeight="Bold" HorizontalAlignment="Center"
+                               Foreground="{StaticResource MandoAccentBrush}"/>
+                    <TextBlock Text="Drop to tag in prompt" FontSize="16" FontWeight="SemiBold"
+                               HorizontalAlignment="Center"/>
+                    <TextBlock Text="Files and folders in the project become @references"
+                               FontSize="12" Opacity="0.6" HorizontalAlignment="Center"/>
+                </StackPanel>
+            </Border>
+        </Grid>
+
         <!-- ======= Plan approval bar =======
              Slides up above the input when the assistant proposes a plan. Unlike the centered
              approval modal, it does NOT cover the transcript — the plan card stays readable above
@@ -286,6 +420,7 @@
             <TextBox x:Name="InputBox" Grid.Row="1" Grid.Column="0"
                      PlaceholderText="Ask MandoCode anything… (/ for commands, @file to attach, !cmd for shell)"
                      AcceptsReturn="True" TextWrapping="Wrap" MaxHeight="140"
+                     AllowDrop="True" DragOver="InputBox_DragOver" Drop="InputBox_Drop"
                      PreviewKeyDown="InputBox_PreviewKeyDown" TextChanged="InputBox_TextChanged"/>
 
             <Button x:Name="EmojiButton" Grid.Row="1" Grid.Column="1"
diff --git a/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs b/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
index 3579cb6..c80f052 100644
--- a/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
+++ b/src/MandoCode.Desktop/Controls/ChatTabView.xaml.cs
@@ -9,6 +9,7 @@
 using Microsoft.UI.Xaml.Input;
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Media.Animation;
+using Windows.ApplicationModel.DataTransfer;
 using Windows.System;
 
 namespace MandoCode.Desktop;
@@ -205,6 +206,8 @@ public async Task InitializeAsync()
                     HandleReaction(msg["react:".Length..], add: true);
                 else if (msg != null && msg.StartsWith("unreact:", StringComparison.Ordinal))
                     HandleReaction(msg["unreact:".Length..], add: false);
+                else if (msg == "drag-enter")
+                    ShowDropOverlay();   // a drag crossed onto the WebView surface — see DropOverlay
             };
 
             // Serve bundled web assets (highlight.js) to the transcript document.
@@ -699,6 +702,322 @@ await Task.Run(async () =>
             _transcript.Append(_html.Success("✓ Ready."));
         });
         UpdateHeader();
+        if (_explorerOpen) BuildExplorerRoot();   // the open tree must follow the new root
+    }
+
+    // ============================================================
+    // File explorer panel
+    // ============================================================
+
+    private bool _explorerOpen;
+    private string? _explorerRoot;   // root the tree was last built for
+
+    private void ExplorerButton_Click(object sender, RoutedEventArgs e) => ToggleExplorer(!_explorerOpen);
+    private void ExplorerClose_Click(object sender, RoutedEventArgs e) => ToggleExplorer(false);
+    private void ExplorerRefresh_Click(object sender, RoutedEventArgs e) => BuildExplorerRoot();
+
+    private void ChatRoot_SizeChanged(object sender, SizeChangedEventArgs e)
+    {
+        if (_explorerOpen) SizeExplorer();
+    }
+
+    private void SizeExplorer()
+    {
+        // Default ~20% of the window, clamped so the tree stays usable on small windows and
+        // doesn't waste half a 4K monitor on the other end. Once the user has dragged the
+        // splitter, their width wins (re-clamped so a shrunken window can't strand the panel).
+        var w = ChatRoot.ActualWidth;
+        if (w <= 0) return;
+        var target = _explorerUserWidth ?? Math.Clamp(w * 0.20, 220, 460);
+        ExplorerPanel.Width = Math.Clamp(target, MinExplorerWidth, MaxExplorerWidth());
+    }
+
+    private const double MinExplorerWidth = 180;
+    private double MaxExplorerWidth() => Math.Max(MinExplorerWidth, ChatRoot.ActualWidth * 0.6);
+
+    // --- splitter drag (same pointer-capture pattern as MainWindow's terminal splitter) ---
+
+    private double? _explorerUserWidth;   // set on first drag; SizeExplorer defers to it
+    private bool _draggingExplorer;
+    private double _explorerDragStartWidth;
+    private double _explorerDragStartX;
+
+    private void ExplorerSplitter_PointerPressed(object sender, PointerRoutedEventArgs e)
+    {
+        _draggingExplorer = true;
+        _explorerDragStartWidth = ExplorerPanel.ActualWidth;
+        _explorerDragStartX = e.GetCurrentPoint(ChatRoot).Position.X;   // stable frame while the grip moves
+        ((UIElement)sender).CapturePointer(e.Pointer);
+    }
+
+    private void ExplorerSplitter_PointerMoved(object sender, PointerRoutedEventArgs e)
+    {
+        if (!_draggingExplorer) return;
+        // Dragging left grows the panel; right shrinks it.
+        var delta = e.GetCurrentPoint(ChatRoot).Position.X - _explorerDragStartX;
+        var next = Math.Clamp(_explorerDragStartWidth - delta, MinExplorerWidth, MaxExplorerWidth());
+        ExplorerPanel.Width = next;
+        _explorerUserWidth = next;
+    }
+
+    private void ExplorerSplitter_PointerReleased(object sender, PointerRoutedEventArgs e)
+    {
+        if (!_draggingExplorer) return;
+        _draggingExplorer = false;
+        ((UIElement)sender).ReleasePointerCapture(e.Pointer);
+    }
+
+    private void ToggleExplorer(bool open)
+    {
+        if (open == _explorerOpen) return;
+        _explorerOpen = open;
+
+        // Docked, not overlaid: the panel sits in the transcript row's second column, so
+        // showing it RESIZES the transcript (text stays fully readable) and collapsing it
+        // gives the width back. No slide animation — animating a WebView2's width forces
+        // continuous relayout of the browser surface, and instant dock/undock is how
+        // solution-explorer-style panels behave anyway.
+        if (open)
+        {
+            SizeExplorer();
+            // (Re)build on open when the tab's root changed since the tree was built — the
+            // panel keeps its expansion state across close/open within the same root.
+            if (_explorerRoot != _controller.ProjectRootPath) BuildExplorerRoot();
+            ExplorerPanel.Visibility = Visibility.Visible;
+            ExplorerSplitter.Visibility = Visibility.Visible;
+        }
+        else
+        {
+            ExplorerPanel.Visibility = Visibility.Collapsed;
+            ExplorerSplitter.Visibility = Visibility.Collapsed;
+        }
+    }
+
+    private void BuildExplorerRoot()
+    {
+        _explorerRoot = _controller.ProjectRootPath;
+        ExplorerRootText.Text = Path.GetFileName(Path.TrimEndingDirectorySeparator(_explorerRoot));
+        ToolTipService.SetToolTip(ExplorerRootText, _explorerRoot);
+        ExplorerTree.RootNodes.Clear();
+        foreach (var node in LoadChildNodes(_explorerRoot)) ExplorerTree.RootNodes.Add(node);
+    }
+
+    /// <summary>One directory level, folders first then files, both alphabetical. Unreadable
+    /// or vanished directories render as empty rather than throwing.</summary>
+    private List<TreeViewNode> LoadChildNodes(string dir)
+    {
+        var root = _explorerRoot ?? _controller.ProjectRootPath;
+        var nodes = new List<TreeViewNode>();
+        string[] dirs, files;
+        try
+        {
+            dirs = Directory.GetDirectories(dir);
+            files = Directory.GetFiles(dir);
+        }
+        catch (Exception) { return nodes; }
+        Array.Sort(dirs, StringComparer.OrdinalIgnoreCase);
+        Array.Sort(files, StringComparer.OrdinalIgnoreCase);
+        foreach (var d in dirs)
+            nodes.Add(new TreeViewNode { Content = ExplorerItem.ForFolder(d, root), HasUnrealizedChildren = true });
+        foreach (var f in files)
+            nodes.Add(new TreeViewNode { Content = ExplorerItem.ForFile(f, root) });
+        return nodes;
+    }
+
+    /// <summary>The row's @ button: tags the file/folder in the prompt — identical result to
+    /// dragging the row onto the input box.</summary>
+    private void ExplorerTag_Click(object sender, RoutedEventArgs e)
+    {
+        if ((sender as FrameworkElement)?.DataContext is TreeViewNode { Content: ExplorerItem item })
+            InsertFileTokens(new[] { item.FullPath });
+    }
+
+    private void ExplorerTag_PointerEntered(object sender, PointerRoutedEventArgs e)
+        => ((UIElement)sender).Opacity = 1;
+
+    private void ExplorerTag_PointerExited(object sender, PointerRoutedEventArgs e)
+        => ((UIElement)sender).Opacity = 0.45;
+
+    private void ExplorerTree_Expanding(TreeView sender, TreeViewExpandingEventArgs args)
+    {
+        if (!args.Node.HasUnrealizedChildren) return;
+        args.Node.HasUnrealizedChildren = false;
+        if (args.Node.Content is not ExplorerItem item || !item.IsDirectory) return;
+        foreach (var child in LoadChildNodes(item.FullPath)) args.Node.Children.Add(child);
+    }
+
+    private void ExplorerTree_ItemInvoked(TreeView sender, TreeViewItemInvokedEventArgs args)
+    {
+        // Single click: folders toggle, files only select. Opening is double-click territory
+        // (ExplorerTree_DoubleTapped) — a stray single click must never launch an app.
+        if (args.InvokedItem is TreeViewNode { Content: ExplorerItem { IsDirectory: true } } node)
+            node.IsExpanded = !node.IsExpanded;
+    }
+
+    private void ExplorerTree_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
+    {
+        // The template's elements inherit the row's TreeViewNode as DataContext.
+        if ((e.OriginalSource as FrameworkElement)?.DataContext is not TreeViewNode node ||
+            node.Content is not ExplorerItem { IsDirectory: false } item)
+            return;
+        try
+        {
+            System.Diagnostics.Process.Start(new System.Diagnostics.ProcessStartInfo
+            {
+                FileName = item.FullPath,
+                UseShellExecute = true,
+            });
+        }
+        catch (Exception ex)
+        {
+            _transcript.Append(_html.Warn($"Couldn't open file: {ex.Message}"));
+        }
+    }
+
+    // ============================================================
+    // Drag & drop @-references
+    // ============================================================
+
+    /// <summary>Dragging explorer rows carries their full paths as text — the input box's
+    /// Drop handler recognizes existing paths and converts them to @tokens.</summary>
+    private void ExplorerTree_DragItemsStarting(TreeView sender, TreeViewDragItemsStartingEventArgs args)
+    {
+        var paths = args.Items.OfType<TreeViewNode>()
+            .Select(n => n.Content).OfType<ExplorerItem>()
+            .Select(i => i.FullPath).ToList();
+        if (paths.Count == 0) { args.Cancel = true; return; }
+        args.Data.SetText(string.Join("\n", paths));
+        args.Data.RequestedOperation = DataPackageOperation.Copy;
+    }
+
+    private void InputBox_DragOver(object sender, DragEventArgs e)
+    {
+        if (e.DataView.Contains(StandardDataFormats.StorageItems) ||
+            e.DataView.Contains(StandardDataFormats.Text))
+        {
+            e.AcceptedOperation = DataPackageOperation.Copy;
+            e.Handled = true;
+        }
+    }
+
+    // --- drop-to-tag overlay choreography ---
+    // Show when a drag enters the tab: over XAML chrome that's ChatRoot's DragEnter; over the
+    // WebView it's the transcript script's 'drag-enter' message (Chromium owns drags there).
+    // Hide when the drag leaves the overlay/tab or when any drop completes. Moving between
+    // those regions can flicker the overlay off/on for a frame — harmless.
+
+    private void ShowDropOverlay() => DropOverlay.Visibility = Visibility.Visible;
+    private void HideDropOverlay() => DropOverlay.Visibility = Visibility.Collapsed;
+
+    private void ChatRoot_DragEnter(object sender, DragEventArgs e)
+    {
+        if (e.DataView.Contains(StandardDataFormats.StorageItems) ||
+            e.DataView.Contains(StandardDataFormats.Text))
+            ShowDropOverlay();
+    }
+
+    private void ChatRoot_DragLeave(object sender, DragEventArgs e) => HideDropOverlay();
+    private void DropOverlay_DragLeave(object sender, DragEventArgs e) => HideDropOverlay();
+
+    private void DropOverlay_DragOver(object sender, DragEventArgs e)
+    {
+        if (e.DataView.Contains(StandardDataFormats.StorageItems) ||
+            e.DataView.Contains(StandardDataFormats.Text))
+        {
+            e.AcceptedOperation = DataPackageOperation.Copy;
+            e.Handled = true;
+        }
+    }
+
+    private async void DropOverlay_Drop(object sender, DragEventArgs e)
+    {
+        HideDropOverlay();
+        await HandleDropAsync(e);
+    }
+
+    private async void InputBox_Drop(object sender, DragEventArgs e)
+    {
+        HideDropOverlay();
+        await HandleDropAsync(e);
+    }
+
+    /// <summary>Shared drop handling for the input box and the drop-to-tag overlay: paths
+    /// become @tokens, ordinary text inserts as text.</summary>
+    private async Task HandleDropAsync(DragEventArgs e)
+    {
+        e.Handled = true;
+        var deferral = e.GetDeferral();
+        try
+        {
+            if (e.DataView.Contains(StandardDataFormats.StorageItems))
+            {
+                // Shell drop (Windows Explorer): real files/folders with paths.
+                var items = await e.DataView.GetStorageItemsAsync();
+                InsertFileTokens(items.Select(i => i.Path).Where(p => !string.IsNullOrEmpty(p)));
+            }
+            else if (e.DataView.Contains(StandardDataFormats.Text))
+            {
+                // Text drop: explorer-tree rows arrive as newline-joined full paths. If every
+                // line is an existing path, tokenize; otherwise it's ordinary dragged text.
+                var text = await e.DataView.GetTextAsync();
+                var lines = text.Split('\n', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+                if (lines.Length > 0 && lines.All(l => File.Exists(l) || Directory.Exists(l)))
+                    InsertFileTokens(lines);
+                else
+                    InsertAtCaret(text);
+            }
+        }
+        catch (Exception ex)
+        {
+            _transcript.Append(_html.Warn($"Couldn't read the dropped item: {ex.Message}"));
+        }
+        finally
+        {
+            deferral.Complete();
+        }
+    }
+
+    /// <summary>Converts full paths into the same @tokens the autocomplete inserts: project-root
+    /// relative, forward slashes, trailing '/' for folders. Items outside this tab's project
+    /// root can't be resolved by the @ pipeline, so they're skipped with a warning.</summary>
+    private void InsertFileTokens(IEnumerable<string> fullPaths)
+    {
+        var root = _controller.ProjectRootPath;
+        var rootPrefix = Path.TrimEndingDirectorySeparator(root) + Path.DirectorySeparatorChar;
+        var tokens = new List<string>();
+        var outside = new List<string>();
+
+        foreach (var raw in fullPaths)
+        {
+            string full;
+            try { full = Path.GetFullPath(raw); }
+            catch { continue; }
+            if (!full.StartsWith(rootPrefix, StringComparison.OrdinalIgnoreCase))
+            {
+                outside.Add(full);
+                continue;
+            }
+            var rel = Path.GetRelativePath(root, full).Replace('\\', '/');
+            tokens.Add("@" + rel + (Directory.Exists(full) ? "/" : ""));
+        }
+
+        if (tokens.Count > 0)
+            InsertAtCaret(string.Join(" ", tokens) + " ");
+        if (outside.Count > 0)
+            _transcript.Append(_html.Warn(
+                $"Skipped {outside.Count} dropped item{(outside.Count == 1 ? "" : "s")} outside this tab's project folder — @ references only work under {root}"));
+    }
+
+    /// <summary>Inserts at the caret with token-safe spacing: a separating space is added when
+    /// the caret touches non-whitespace, so a dropped @token never glues onto existing text.</summary>
+    private void InsertAtCaret(string insert)
+    {
+        var text = InputBox.Text;
+        var caret = Math.Clamp(InputBox.SelectionStart, 0, text.Length);
+        if (caret > 0 && !char.IsWhiteSpace(text[caret - 1])) insert = " " + insert;
+        InputBox.Text = text[..caret] + insert + text[caret..];
+        InputBox.SelectionStart = caret + insert.Length;
+        InputBox.Focus(FocusState.Programmatic);
     }
 
     // ============================================================
@@ -1311,3 +1630,34 @@ public ModelItem(string name, string badge, Brush badgeForeground, Brush badgeBa
     public Brush BadgeForeground { get; }
     public Brush BadgeBackground { get; }
 }
+
+/// <summary>One row in the file-explorer tree. Folder nodes are created with unrealized
+/// children and lazy-load their contents on first expand (ChatTabView.ExplorerTree_Expanding).</summary>
+public sealed class ExplorerItem
+{
+    public string Name { get; private init; } = "";
+    public string FullPath { get; private init; } = "";
+    public bool IsDirectory { get; private init; }
+
+    /// <summary>The exact @token the row produces (root-relative, forward slashes, trailing
+    /// '/' on folders) \u2014 shown in the tag button's tooltip so hovering teaches the @ syntax.</summary>
+    public string Token { get; private init; } = "";
+
+    public string TagTooltip => $"Tag in prompt \u2014 inserts {Token}";
+
+    public string Glyph => IsDirectory ? "\uE8B7" : "\uE8A5";   // folder / document
+
+    /// <summary>Resolved per-realization from app resources, so icons pick up live theme
+    /// switches the next time rows are created (matching how transcript colors retheme).</summary>
+    public Brush? IconBrush =>
+        Application.Current.Resources[IsDirectory ? "MandoGoldBrush" : "MandoDimBrush"] as Brush;
+
+    public static ExplorerItem ForFolder(string path, string root) =>
+        new() { Name = Path.GetFileName(path), FullPath = path, IsDirectory = true, Token = "@" + Rel(path, root) + "/" };
+
+    public static ExplorerItem ForFile(string path, string root) =>
+        new() { Name = Path.GetFileName(path), FullPath = path, IsDirectory = false, Token = "@" + Rel(path, root) };
+
+    private static string Rel(string path, string root) =>
+        Path.GetRelativePath(root, path).Replace('\\', '/');
+}
diff --git a/src/MandoCode.Desktop/Controls/ResizeGrip.cs b/src/MandoCode.Desktop/Controls/ResizeGrip.cs
index d7db47b..5b068ac 100644
--- a/src/MandoCode.Desktop/Controls/ResizeGrip.cs
+++ b/src/MandoCode.Desktop/Controls/ResizeGrip.cs
@@ -5,20 +5,29 @@
 namespace MandoCode.Desktop.Controls;
 
 /// <summary>
-/// A thin horizontal grip that shows the vertical-resize (↕) cursor on hover, so the
-/// terminal's drag splitter reads as draggable. Subclasses <see cref="Grid"/> (a Panel,
-/// which renders its Background and is hit-testable) because <c>Thumb</c> is sealed and
-/// the cursor requires the protected <c>ProtectedCursor</c> member, reachable only from a
-/// derived type. Dragging itself is driven by pointer events in the host (MainWindow).
+/// A thin grip that shows a resize cursor on hover, so a drag splitter reads as draggable.
+/// The default (Horizontal) grip is a horizontal bar showing the vertical-resize (↕) cursor,
+/// as used by the terminal splitter; a Vertical grip is a vertical bar showing ↔, as used by
+/// the file-explorer splitter. Subclasses <see cref="Grid"/> (a Panel, which renders its
+/// Background and is hit-testable) because <c>Thumb</c> is sealed and the cursor requires
+/// the protected <c>ProtectedCursor</c> member, reachable only from a derived type.
+/// Dragging itself is driven by pointer events in the host (MainWindow / ChatTabView).
 /// </summary>
 public sealed class ResizeGrip : Grid
 {
+    /// <summary>The grip bar's own orientation: a Vertical bar resizes horizontally (↔).
+    /// Set from XAML; read when Loaded fires, so markup order doesn't matter.</summary>
+    public Orientation GripOrientation { get; set; } = Orientation.Horizontal;
+
     public ResizeGrip()
     {
         // ProtectedCursor MUST be set after the element is in the visual tree — assigning it
         // in the constructor (during InitializeComponent) fast-fails WinUI natively
         // (STATUS_STOWED_EXCEPTION 0xC000027B). Loaded is the safe point.
         Loaded += (_, _) =>
-            ProtectedCursor = InputSystemCursor.Create(InputSystemCursorShape.SizeNorthSouth);
+            ProtectedCursor = InputSystemCursor.Create(
+                GripOrientation == Orientation.Horizontal
+                    ? InputSystemCursorShape.SizeNorthSouth
+                    : InputSystemCursorShape.SizeWestEast);
     }
 }
diff --git a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
index 1d3e227..964d4af 100644
--- a/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
+++ b/src/MandoCode.Desktop/Services/TranscriptHtmlBuilder.cs
@@ -49,7 +49,7 @@ public string FromMarkdown(string markdown)
     }
 
     public string UserEcho(string text) =>
-        $"<div class=\"user-echo\">&gt; {E(text)}</div>";
+        $"<div class=\"user-echo\"><span class=\"ue-sigil\">&gt;</span> {E(text)}</div>";
 
     public string AssistantCard(string markdown) =>
         $"<div class=\"assistant\"><div class=\"assistant-label\">MandoCode</div><div class=\"md\">{FromMarkdown(markdown)}</div></div>";
@@ -359,7 +359,19 @@ transparent calc(66.6% - 1px), rgba(0,0,0,0.30) 66.6%, transparent calc(66.6% +
       /* tube-edge vignette */
       radial-gradient(ellipse 100% 100% at center, transparent 60%, rgba(0,0,0,0.55) 100%);
   }
-  .user-echo { color: var(--gold); font-weight: 600; white-space: pre-wrap; margin-top: 14px; }
+  /* User prompts: gold marks the user's voice, at normal weight so an 8-line clamped
+     paste reads as text, not a block of emphasis. Only the sigil stays semibold. */
+  .user-echo { color: var(--gold); white-space: pre-wrap; margin-top: 14px; }
+  .ue-sigil { font-weight: 600; }
+  /* Long prompts clamp to ~8 lines (JS adds the class only when the echo is actually tall).
+     The fade is a mask on the text itself — not an overlay painted in a background color —
+     so it works over chat-background images and every theme. */
+  .user-echo.clamped { max-height: 11.5em; overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2.2em), transparent);
+    mask-image: linear-gradient(to bottom, black calc(100% - 2.2em), transparent); }
+  .ue-toggle { display: block; background: none; border: none; cursor: pointer;
+    color: var(--dim); font-size: 11px; font-family: "Segoe UI", sans-serif; padding: 1px 0; }
+  .ue-toggle:hover { color: var(--fg); }
   .assistant { margin-top: 4px; position: relative; }
   .assistant-label { color: var(--green); font-weight: 700; margin-bottom: 2px; }
   .md p { margin: 6px 0; }
@@ -673,7 +685,13 @@ function highlightNew() {
     });
   }
   function doCopy(text, chip) {
-    window.chrome.webview.postMessage('copy:' + text);
+    // In the app, the host writes the clipboard (copy: message). In an EXPORTED transcript
+    // there is no webview bridge, so fall back to the browser clipboard API — file:// pages
+    // are a secure context in Chromium/Firefox, and this runs on a user gesture.
+    if (window.chrome && window.chrome.webview)
+      window.chrome.webview.postMessage('copy:' + text);
+    else if (navigator.clipboard)
+      navigator.clipboard.writeText(text).catch(function () { });
     chip.classList.add('copied');
     setTimeout(function () { chip.classList.remove('copied'); }, 1400);
   }
@@ -682,26 +700,33 @@ function addCopyChips() {
       pre.setAttribute('data-copy', '1');
       const chip = document.createElement('button');
       chip.className = 'copy-chip';
-      chip.addEventListener('click', function (ev) {
-        ev.stopPropagation();
-        const code = pre.querySelector('code');
-        doCopy(code ? code.innerText : pre.innerText, chip);
-      });
-      pre.appendChild(chip);
+      pre.appendChild(chip);      // click is handled by the delegated .copy-chip handler
     });
     log.querySelectorAll('.assistant:not([data-copy])').forEach(function (card) {
       card.setAttribute('data-copy', '1');
-      const md = card.querySelector('.md');
-      if (!md) return;
+      if (!card.querySelector('.md')) return;
       const chip = document.createElement('button');
       chip.className = 'copy-chip';
-      chip.addEventListener('click', function (ev) {
-        ev.stopPropagation();
-        doCopy(md.innerText, chip);
-      });
       card.appendChild(chip);
     });
   }
+  // Delegated so copy still works in exported transcripts (see the toggle handlers below).
+  document.addEventListener('click', function (e) {
+    const chip = e.target.closest('.copy-chip');
+    if (!chip) return;
+    e.stopPropagation();
+    const pre = chip.closest('pre');
+    let text = '';
+    if (pre) {
+      const code = pre.querySelector('code');
+      text = code ? code.innerText : pre.innerText;
+    } else {
+      const card = chip.closest('.assistant');
+      const md = card && card.querySelector('.md');
+      if (md) text = md.innerText;
+    }
+    doCopy(text, chip);
+  });
 
   // --- emoji reactions on assistant responses: hover ghost → picker card → pills ---
   // Toggling posts react:/unreact: with a JSON payload; the snippet lets the preamble
@@ -855,16 +880,51 @@ function addCollapsers() {
         const b = document.createElement('button');
         b.className = 'expand-btn ' + side;
         b.title = 'Maximize / minimize this block';
-        b.addEventListener('click', function (ev) {
-          ev.stopPropagation();
-          setCollapsed(pre, !pre.classList.contains('collapsed'));
-        });
-        panel.appendChild(b);
+        panel.appendChild(b);   // click is handled by the delegated .expand-btn handler
       });
       setCollapsed(pre, true);                                          // start minimized
     });
   }
 
+  // --- clamp long user prompts: a big pasted prompt (log, file contents) otherwise
+  // dominates the scrollback, so echoes taller than ~9 lines clamp to ~8 with a toggle ---
+  function addEchoClamps() {
+    log.querySelectorAll('.user-echo:not([data-clamp])').forEach(function (echo) {
+      echo.setAttribute('data-clamp', '1');
+      const lh = parseFloat(getComputedStyle(echo).lineHeight) || 20;
+      if (echo.scrollHeight <= lh * 9 + 6) return;   // short enough — no chrome
+      // Count hidden lines while the echo is still unclamped; ~8 lines stay visible.
+      const hidden = Math.max(1, Math.round(echo.scrollHeight / lh) - 8);
+      echo.classList.add('clamped');
+      const btn = document.createElement('button');
+      btn.className = 'ue-toggle';
+      // The expanded label lives in a data attribute (not a closure) so it survives
+      // outerHTML serialization when the transcript is exported.
+      btn.dataset.more = 'Show more (' + hidden + ' more line' + (hidden === 1 ? '' : 's') + ')';
+      btn.textContent = btn.dataset.more;
+      echo.after(btn);
+    });
+  }
+  // Toggles are DELEGATED document handlers, not per-button listeners: exporting the
+  // transcript serializes outerHTML, which keeps the buttons but drops bound listeners.
+  // These handlers re-register when the exported page runs this script on load, so
+  // clamped prompts and collapsed panels stay expandable in the saved file.
+  document.addEventListener('click', function (e) {
+    const btn = e.target.closest('.ue-toggle');
+    if (!btn) return;
+    const echo = btn.previousElementSibling;
+    if (!echo || !echo.classList.contains('user-echo')) return;
+    const clamped = echo.classList.toggle('clamped');
+    btn.textContent = clamped ? btn.dataset.more : 'Show less';
+  });
+  document.addEventListener('click', function (e) {
+    const b = e.target.closest('.expand-btn:not(.web-collapse)');
+    if (!b) return;
+    const panel = b.closest('.panel');
+    const pre = panel && panel.querySelector('pre.collapsible');
+    if (pre) setCollapsed(pre, !pre.classList.contains('collapsed'));
+  });
+
   window.__append = function (html) {
     const nearBottom = (window.innerHeight + window.scrollY) >= (document.body.scrollHeight - 60);
     const wrap = document.createElement('div');
@@ -874,6 +934,7 @@ function addCollapsers() {
     addCopyChips();
     addReactionGhosts();
     addCollapsers();
+    addEchoClamps();
     if (nearBottom) window.scrollTo(0, document.body.scrollHeight);
     updatePill();
   };
@@ -886,6 +947,18 @@ function addCollapsers() {
     window.chrome.webview.postMessage('open-file:' + link.getAttribute('data-file'));
   });
 
+  // --- drag hand-off: Chromium owns drags over the transcript surface, so XAML never sees
+  // them. On dragenter we alert the host, which mounts its drop overlay over this WebView;
+  // the OS then retargets the drag (and the drop, with real file paths) to that overlay.
+  // preventDefault on dragover/drop is the safety net for a drop that lands in the instant
+  // before the overlay mounts — without it the browser would navigate to the dropped file.
+  window.addEventListener('dragenter', function (e) {
+    e.preventDefault();
+    if (window.chrome && window.chrome.webview) window.chrome.webview.postMessage('drag-enter');
+  });
+  window.addEventListener('dragover', function (e) { e.preventDefault(); });
+  window.addEventListener('drop', function (e) { e.preventDefault(); });
+
   // Web fetch/search preview toggle: the inline chip opens the hidden detail box; the box's own
   // Collapse button (and the chip again) closes it. Chip label and box visibility stay in sync.
   document.addEventListener('click', function (e) {