feat(plugins): show plugin logs on detail page via Docs/Logs tablist

Add a Logs tab beside Documentation on the plugin detail page, showing
the output a plugin prints through the standard Python logger (per the
wiki style guide). Logs are captured from the plugin's stderr by the
plugin runtime and fetched on demand.

- Bump langbot-plugin pin to 0.4.4 (adds GET_PLUGIN_LOGS action)
- plugin_connector/handler: get_plugin_logs RPC client
- HTTP route GET /api/v1/plugins/<author>/<name>/logs (limit + level)
- Frontend: wrap detail right panel in Docs/Logs Tabs; PluginLogs
  component with level filter, manual + 3s auto refresh, bottom-follow
- i18n: 7 new keys across all 8 locales
This commit is contained in:
RockChinQ
2026-06-13 08:01:18 -04:00
parent a97d2040bb
commit 5bfa38cbf2
17 changed files with 328 additions and 7 deletions
@@ -2,10 +2,12 @@ import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
import PluginReadme from '@/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme';
import PluginLogs from '@/app/home/plugins/components/plugin-installed/plugin-logs/PluginLogs';
import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
import { useTranslation } from 'react-i18next';
import { Badge } from '@/components/ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import {
@@ -217,8 +219,35 @@ export default function PluginDetailContent({ id }: { id: string }) {
{dangerZone}
</div>
<div className="hidden w-px shrink-0 bg-border md:block" />
<div className="min-w-0 flex-1 pb-6 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden">
<PluginReadme pluginAuthor={pluginAuthor} pluginName={pluginName} />
<div className="flex min-w-0 flex-1 flex-col pb-6 md:min-h-0 md:overflow-hidden">
<Tabs defaultValue="docs" className="flex min-h-0 flex-1 flex-col">
<TabsList className="mb-2 shrink-0">
<TabsTrigger value="docs" className="flex-none px-4">
{t('plugins.tabDocs')}
</TabsTrigger>
<TabsTrigger value="logs" className="flex-none px-4">
{t('plugins.tabLogs')}
</TabsTrigger>
</TabsList>
<TabsContent
value="docs"
className="min-h-0 flex-1 md:overflow-y-auto md:overflow-x-hidden"
>
<PluginReadme
pluginAuthor={pluginAuthor}
pluginName={pluginName}
/>
</TabsContent>
<TabsContent
value="logs"
className="min-h-0 flex-1 md:overflow-hidden"
>
<PluginLogs
pluginAuthor={pluginAuthor}
pluginName={pluginName}
/>
</TabsContent>
</Tabs>
</div>
</div>
</div>