Show data sources as collapsible panels and reach their settings

app/MindWork AI Studio/Assistants/I18N/allTexts.lua

@@ -8959,6 +8959,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T1946414905"] = "Tried again durin
 -- Skipped files: {0}
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T196379388"] = "Skipped files: {0}"
 
+-- Manage your data sources
+UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2149927097"] = "Manage your data sources"
+
 -- Noticed
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2367007983"] = "Noticed"
 
@@ -8980,6 +8983,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2547971789"] = "Background embedd
 -- Refresh this data source
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2901874229"] = "Refresh this data source"
 
+-- Data source: {0}
+UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2945218010"] = "Data source: {0}"
+
 -- Embedding provider: {0}
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T300213237"] = "Embedding provider: {0}"
 

app/MindWork AI Studio/Components/ExpansionPanel.razor

@@ -1,8 +1,8 @@
-<MudExpansionPanel Class="border-solid border rounded-lg" Expanded="@this.IsExpanded" MaxHeight="@this.MaxHeight" ExpandedChanged="async s => await this.ExpandedChanged(s)">
+<MudExpansionPanel Class="border-solid border rounded-lg" HeaderClass="@this.HeaderClass" Expanded="@this.IsExpanded" MaxHeight="@this.MaxHeight" ExpandedChanged="async s => await this.ExpandedChanged(s)">
     <TitleContent>
         <div class="d-flex align-center">
             <MudIcon Icon="@this.HeaderIcon" Size="@this.IconSize" Color="@this.IconColor" class="mr-3"/>
-            <MudText Typo="Typo.h6">
+            <MudText Typo="@this.HeaderTypo">
                 @this.HeaderText
             </MudText>
             @if (this.ShowEndButton)

app/MindWork AI Studio/Components/ExpansionPanel.razor.cs

@@ -16,6 +16,26 @@ public partial class ExpansionPanel : ComponentBase
     [Parameter]
     public string HeaderText { get; set; } = "n/a";
 
+    /// <summary>
+    /// The typography of the header text.
+    /// </summary>
+    /// <remarks>
+    /// Worth lowering for a panel which sits inside another one, together with the compact header
+    /// class below: two headers of the same size give no clue about which one contains the other.
+    /// </remarks>
+    [Parameter]
+    public Typo HeaderTypo { get; set; } = Typo.h6;
+
+    /// <summary>
+    /// Additional class names for the header, separated by space.
+    /// </summary>
+    /// <remarks>
+    /// The one this exists for is expansion-panel-header-compact, which takes the height of the
+    /// header down for a nested panel.
+    /// </remarks>
+    [Parameter]
+    public string HeaderClass { get; set; } = string.Empty;
+
     [Parameter]
     public int? MaxHeight { get; set; }
     

app/MindWork AI Studio/Pages/Embeddings.razor

@@ -3,7 +3,13 @@
 
 <MudStack Spacing="3" Class="pr-2 pb-4" Style="height: 100%; min-height: 0; overflow-y: auto;">
     <MudPaper Class="pa-4 border-dashed border rounded-lg" Elevation="0">
+        <MudStack Row="true" AlignItems="AlignItems.Center">
             <MudText Typo="Typo.h5">@T("Background embeddings")</MudText>
+            <MudSpacer/>
+            <MudTooltip Text="@T("Manage your data sources")" Placement="Placement.Top">
+                <MudIconButton Icon="@Icons.Material.Filled.Settings" OnClick="@this.OpenDataSourceSettings"/>
+            </MudTooltip>
+        </MudStack>
         <MudText Typo="Typo.body1" Class="mt-2">
             @T("AI Studio indexes local RAG data sources in the background. Finished files stay recorded so unchanged files can be skipped after a restart, while added or deleted files are detected during the next run. The same applies to documents without readable text, such as scanned pages: AI Studio remembers them and reads them again only once they change.")
         </MudText>
@@ -23,23 +29,36 @@
     }
     else
     {
+        @*
+            One panel per data source, and only one of them open: a folder with thousands of files
+            fills the page by itself. What a closed panel still has to say stays in its header, so
+            nobody has to open every one of them to see how their data sources are doing.
+        *@
+        <MudExpansionPanels>
             @foreach (var status in this.Statuses)
             {
-            <MudPaper Class="pa-4 border rounded-lg" Elevation="0">
+                <MudExpansionPanel Class="border-solid border rounded-lg" Expanded="@(this.expandedDataSourceId == status.DataSourceId)" ExpandedChanged="@(isExpanded => this.DataSourcePanelExpandedChanged(status, isExpanded))">
-                <MudStack Spacing="2">
+                    <TitleContent>
-                    <MudStack Row="true" Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center">
+                        <div class="d-flex align-center">
-                        <MudText Typo="Typo.h6">@status.DataSourceName</MudText>
+                            <MudText Typo="Typo.h6">@string.Format(T("Data source: {0}"), status.DataSourceName)</MudText>
-                        <MudStack Row="true" Spacing="1" AlignItems="AlignItems.Center">
+                            <MudSpacer/>
                             <MudChip T="string" Color="@GetStatusColor(status)" Variant="Variant.Filled">@status.StateLabel</MudChip>
                             @if (CanRefresh(status))
                             {
+                                @*
+                                    This opens or closes the panel along the way. The header is what
+                                    toggles it, and neither stopping the event nor swallowing the
+                                    click works in this project — see the end button of our own
+                                    ExpansionPanel component, which behaves the same way.
+                                *@
                                 <MudTooltip Text="@T("Refresh this data source")">
                                     <MudIconButton Icon="@Icons.Material.Filled.Sync" Color="Color.Info" Size="Size.Small" OnClick="@(async () => await this.RefreshDataSource(status))" />
                                 </MudTooltip>
                             }
-                        </MudStack>
+                        </div>
-                    </MudStack>
+                    </TitleContent>
-
+                    <ChildContent>
+                        <MudStack Spacing="2">
                             <MudProgressLinear Value="@status.ProgressPercent" Rounded="@true" Color="@GetStatusColor(status)" />
 
                             <MudText Typo="Typo.body2">
@@ -77,7 +96,7 @@
                                 <MudExpansionPanels MultiExpansion="@true" Class="mt-2">
                                     @foreach (var group in this.GetFailureGroups(status))
                                     {
-                                <ExpansionPanel HeaderIcon="@group.Cause.Icon" IconColor="@group.Cause.Color" IconSize="Size.Small" HeaderText="@GetGroupHeader(group)">
+                                        <ExpansionPanel HeaderIcon="@group.Cause.Icon" IconColor="@group.Cause.Color" IconSize="Size.Small" HeaderTypo="Typo.subtitle1" HeaderClass="expansion-panel-header-compact" HeaderText="@GetGroupHeader(group)">
                                             <MudStack Spacing="3">
                                                 <MudStack Row="@true" Wrap="Wrap.Wrap" Spacing="2" AlignItems="AlignItems.Center">
                                                     <MudChip T="string" Size="Size.Small" Color="@group.Cause.Color" Variant="Variant.Outlined">
@@ -149,7 +168,9 @@
                                 </MudAlert>
                             }
                         </MudStack>
-            </MudPaper>
+                    </ChildContent>
+                </MudExpansionPanel>
             }
+        </MudExpansionPanels>
     }
 </MudStack>

app/MindWork AI Studio/Pages/Embeddings.razor.cs

@@ -1,4 +1,5 @@
 using AIStudio.Components;
+using AIStudio.Dialogs.Settings;
 using AIStudio.Provider;
 using AIStudio.Settings.DataModel;
 using AIStudio.Tools.Rust;
@@ -6,6 +7,8 @@ using AIStudio.Tools.Services;
 
 using Microsoft.AspNetCore.Components;
 
+using DialogOptions = AIStudio.Dialogs.DialogOptions;
+
 namespace AIStudio.Pages;
 
 public partial class Embeddings : MSGComponentBase
@@ -21,11 +24,17 @@ public partial class Embeddings : MSGComponentBase
     [Inject]
     private RustService RustService { get; init; } = null!;
 
+    [Inject]
+    private IDialogService DialogService { get; init; } = null!;
+
     [Inject]
     private ILogger<Embeddings> Logger { get; init; } = null!;
 
     private IReadOnlyList<DataSourceEmbeddingStatus> Statuses { get; set; } = [];
 
+    private string? expandedDataSourceId;
+    private bool userChoseExpansion;
+
     private int TotalIndexedFiles => this.Statuses.Sum(status => status.IndexedFiles);
 
     private int TotalPendingFiles => this.Statuses.Sum(status => Math.Max(0, status.TotalFiles - status.IndexedFiles - status.FailedFiles - status.PermanentlySkippedFiles));
@@ -70,6 +79,67 @@ public partial class Embeddings : MSGComponentBase
             .OrderBy(status => status.SortOrder)
             .ThenBy(status => status.DataSourceName, StringComparer.OrdinalIgnoreCase)
             .ToList();
+
+        this.UpdateAutoExpansion();
+    }
+
+    /// <summary>
+    /// Opens the data source which is worth reading, as long as the user has not chosen one.
+    /// </summary>
+    /// <remarks>
+    /// It never closes what is open. A data source which finishes its run while somebody is reading
+    /// it would otherwise fold up at the very moment its result becomes interesting. From the first
+    /// click on, the page stops rearranging itself at all.
+    /// </remarks>
+    private void UpdateAutoExpansion()
+    {
+        if (this.userChoseExpansion)
+            return;
+
+        // The list is sorted by state, so the first match is the most pressing one: a running data
+        // source before a queued one, and a failed one before a completed one:
+        var worthOpening = this.Statuses.FirstOrDefault(IsWorthOpening);
+        if (worthOpening is null)
+            return;
+
+        this.expandedDataSourceId = worthOpening.DataSourceId;
+    }
+
+    /// <remarks>
+    /// Whoever opens this page does so because a run is under way or because something went wrong.
+    /// Meeting nothing but closed panels would be a step back from the version which showed every
+    /// data source at once.
+    /// </remarks>
+    private static bool IsWorthOpening(DataSourceEmbeddingStatus status) =>
+        status.State is DataSourceEmbeddingState.RUNNING or DataSourceEmbeddingState.QUEUED or DataSourceEmbeddingState.FAILED || status.FailedFiles > 0;
+
+    /// <remarks>
+    /// MudBlazor keeps track of which panel is open on its own, so this only records the decision.
+    /// Both events of a switch arrive, in either order — the one closing the old panel and the one
+    /// opening the new one — which is why the closing event only clears what it actually named.
+    /// </remarks>
+    private void DataSourcePanelExpandedChanged(DataSourceEmbeddingStatus status, bool isExpanded)
+    {
+        this.userChoseExpansion = true;
+
+        if (isExpanded)
+            this.expandedDataSourceId = status.DataSourceId;
+        else if (this.expandedDataSourceId == status.DataSourceId)
+            this.expandedDataSourceId = null;
+    }
+
+    /// <summary>
+    /// Opens the data source settings, the same dialog the chat offers next to its data source selection.
+    /// </summary>
+    /// <remarks>
+    /// Nothing is left to do once it closes: the dialog writes the settings itself and publishes
+    /// CONFIGURATION_CHANGED, which this page already listens to.
+    /// </remarks>
+    private async Task OpenDataSourceSettings()
+    {
+        var dialogParameters = new DialogParameters();
+        var dialogReference = await this.DialogService.ShowAsync<SettingsDialogDataSources>(null, dialogParameters, DialogOptions.FULLSCREEN);
+        await dialogReference.Result;
     }
 
     private static Color GetStatusColor(DataSourceEmbeddingStatus status) => status.State switch

app/MindWork AI Studio/Plugins/languages/de-de-43065dbc-78d0-45b7-92be-f14c2926e2dc/plugin.lua

@@ -3871,7 +3871,7 @@ UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::DATASOURCESELECTION::T2113594442"] = "Sie
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::DATASOURCESELECTION::T21181525"] = "Wählen Sie hier die Daten aus, die Sie verwenden möchten."
 
 -- Manage your data sources
-UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::DATASOURCESELECTION::T2149927097"] = "Verwalten Sie ihre Datenquellen"
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::DATASOURCESELECTION::T2149927097"] = "Ihre Datenquellen verwalten"
 
 -- Select data
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::DATASOURCESELECTION::T274155039"] = "Daten auswählen"
@@ -8961,6 +8961,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T1946414905"] = "Beim nächsten Du
 -- Skipped files: {0}
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T196379388"] = "Übersprungene Dateien: {0}"
 
+-- Manage your data sources
+UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2149927097"] = "Ihre Datenquellen verwalten"
+
 -- Noticed
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2367007983"] = "Zur Kenntnis genommen"
 
@@ -8982,6 +8985,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2547971789"] = "Einbettungen im H
 -- Refresh this data source
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2901874229"] = "Diese Datenquelle aktualisieren"
 
+-- Data source: {0}
+UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2945218010"] = "Datenquelle: {0}"
+
 -- Embedding provider: {0}
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T300213237"] = "Einbettungsanbieter: {0}"
 

app/MindWork AI Studio/Plugins/languages/en-us-97dfb1ba-50c4-4440-8dfa-6575daf543c8/plugin.lua

@@ -8961,6 +8961,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T1946414905"] = "Tried again durin
 -- Skipped files: {0}
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T196379388"] = "Skipped files: {0}"
 
+-- Manage your data sources
+UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2149927097"] = "Manage your data sources"
+
 -- Noticed
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2367007983"] = "Noticed"
 
@@ -8982,6 +8985,9 @@ UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2547971789"] = "Background embedd
 -- Refresh this data source
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2901874229"] = "Refresh this data source"
 
+-- Data source: {0}
+UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T2945218010"] = "Data source: {0}"
+
 -- Embedding provider: {0}
 UI_TEXT_CONTENT["AISTUDIO::PAGES::EMBEDDINGS::T300213237"] = "Embedding provider: {0}"
 

app/MindWork AI Studio/wwwroot/app.css

@@ -444,3 +444,16 @@ tr:has(> .provider-group-header) .mud-icon-button {
 .provider-group-header {
     font-weight: 600;
 }
+
+/*
+ * Headers of an expansion panel which sits inside another one, such as the failure groups of a
+ * data source on the embeddings page. Two headers of the same size give no clue about which one
+ * contains the other. MudBlazor's own Dense is no help here: it takes the padding off the content,
+ * not off the header, whose height is fixed in the framework. Hence this rule — and it has to name
+ * the MudBlazor classes to outweigh their specificity.
+ */
+.mud-expand-panel .mud-expand-panel-header.expansion-panel-header-compact {
+    min-height: 2rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}