@peers-app/peers-ui 0.12.1 → 0.12.2

package/dist/components/chat-overlay.js

@@ -83,6 +83,7 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
     const [voiceSettings, setVoiceSettings] = (0, react_1.useState)(DEFAULT_VOICE_SETTINGS);
     const [overlayPosition, setOverlayPosition] = (0, react_1.useState)(DEFAULT_POSITION);
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [pendingInitialMessage, setPendingInitialMessage] = (0, react_1.useState)(undefined);
     const messagesEndRef = (0, react_1.useRef)(null);
     const messagesContainerRef = (0, react_1.useRef)(null);
     const currentAudioRef = (0, react_1.useRef)(null);
@@ -185,6 +186,14 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
     // Subscribe to voice events
     (0, react_1.useEffect)(() => {
         const subscriptions = [
+            (0, peers_sdk_1.subscribe)('chat:openWithMessage', (event) => {
+                const { message } = event.data || {};
+                if (message) {
+                    setPendingInitialMessage(message);
+                }
+                setIsExpanded(true);
+                setShowSettings(false);
+            }),
             (0, peers_sdk_1.subscribe)('voice:stateChanged', (event) => {
                 setVoiceState(event.data.state);
                 if (event.data.state === 'idle') {
@@ -354,6 +363,8 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
     const handleMessageSubmit = (0, react_1.useCallback)(async (message) => {
         // Notify voice service of text activity (resets inactivity timer)
         peers_sdk_1.rpcServerCalls.voiceNotifyTextActivity?.().catch(() => { });
+        // Clear any pending initial message that was pre-filled
+        setPendingInitialMessage(undefined);
         // If no thread yet, this message becomes the thread root
         if (!threadId) {
             message.messageParentId = undefined;
@@ -480,7 +491,7 @@ const ChatOverlay = ({ position = 'bottom-right', }) => {
                     voiceState === 'recording' && (react_1.default.createElement("div", { className: "progress flex-grow-1", style: { height: '4px' } },
                         react_1.default.createElement("div", { className: "progress-bar bg-danger", style: { width: `${Math.min(100, volumeLevel * 500)}%` } })))))),
             !showSettings && (react_1.default.createElement("div", { className: "card-footer p-2" },
-                react_1.default.createElement(message_compose_1.MessageCompose, { channelId: globals_1.me?.userId || 'default', threadId: threadId || (0, peers_sdk_1.newid)(), onMessageSubmit: handleMessageSubmit }))))),
+                react_1.default.createElement(message_compose_1.MessageCompose, { channelId: globals_1.me?.userId || 'default', threadId: threadId || (0, peers_sdk_1.newid)(), onMessageSubmit: handleMessageSubmit, initialMessage: pendingInitialMessage, key: pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : 'default' }))))),
         react_1.default.createElement("div", { className: "d-flex gap-2 justify-content-end", onMouseDown: handleDragStart, style: { userSelect: isDragging ? 'none' : undefined } },
             voiceSettings.enabled && isExpanded && (react_1.default.createElement("button", { className: getButtonClass(), style: {
                     width: '56px',

package/dist/components/messages/message-compose.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     channelId: string;
     threadId?: string;
     onMessageSubmit: (message: IMessage, files?: IFile[]) => any;
+    initialMessage?: string;
 }
 export declare const MessageCompose: (props: IProps) => React.JSX.Element;
 export declare function isMobile(): boolean;

package/dist/components/messages/message-compose.js

@@ -61,7 +61,7 @@ function getContentPersistenceValue(channelId, threadId) {
     return pVarCache[contentPersistenceName];
 }
 const MessageCompose = (props) => {
-    const { channelId, threadId, onMessageSubmit } = props;
+    const { channelId, threadId, onMessageSubmit, initialMessage } = props;
     const [contentObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
     const [mdEffects] = (0, react_1.useState)(() => ({}));
     const composeBottomRef = react_1.default.useRef(null);
@@ -75,7 +75,8 @@ const MessageCompose = (props) => {
         let sub;
         getContentPersistenceValue(channelId, threadId).loadingPromise.then(pVar => {
             if (!disposed) {
-                contentObs(pVar() ?? '');
+                const persistedValue = pVar() ?? '';
+                contentObs(initialMessage ?? persistedValue);
                 sub = contentObs.subscribe(() => pVar(contentObs()));
                 setTimeout(() => scrollToBottom(), 100);
             }

package/dist/screens/network-viewer/connection-troubleshooter.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface IDiagnosticCheck {
+    id: string;
+    label: string;
+    layer: string;
+    status: 'pass' | 'fail' | 'warn' | 'skip' | 'running';
+    detail: string;
+    suggestion?: string;
+}
+interface Props {
+    onBack: () => void;
+}
+export declare function ConnectionTroubleshooter({ onBack }: Props): React.JSX.Element;
+export {};

package/dist/screens/network-viewer/connection-troubleshooter.js

@@ -0,0 +1,298 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectionTroubleshooter = ConnectionTroubleshooter;
+const react_1 = __importStar(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const STATUS_ICON = {
+    pass: react_1.default.createElement("i", { className: "bi bi-check-circle-fill text-success" }),
+    fail: react_1.default.createElement("i", { className: "bi bi-x-circle-fill text-danger" }),
+    warn: react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill text-warning" }),
+    skip: react_1.default.createElement("i", { className: "bi bi-dash-circle text-muted" }),
+    running: (react_1.default.createElement("span", { className: "spinner-border spinner-border-sm text-primary", role: "status", "aria-hidden": "true" })),
+};
+const STATUS_BADGE_CLASS = {
+    pass: 'bg-success',
+    fail: 'bg-danger',
+    warn: 'bg-warning text-dark',
+    skip: 'bg-secondary',
+    running: 'bg-primary',
+};
+const LAYER_ORDER = [
+    'Local System',
+    'Cloud Relay',
+    'Local Network',
+    'Protocol Support',
+    'WebRTC / TURN',
+    'Peer State',
+    'Active Connections',
+];
+function groupByLayer(checks) {
+    const groups = {};
+    for (const check of checks) {
+        if (!groups[check.layer])
+            groups[check.layer] = [];
+        groups[check.layer].push(check);
+    }
+    return groups;
+}
+function getSummary(checks) {
+    return {
+        issues: checks.filter(c => c.status === 'fail').length,
+        warnings: checks.filter(c => c.status === 'warn').length,
+        passes: checks.filter(c => c.status === 'pass').length,
+        skips: checks.filter(c => c.status === 'skip').length,
+    };
+}
+function formatReportForAI(checks) {
+    const lines = ['Connection Troubleshooter Report', '================================'];
+    const groups = groupByLayer(checks);
+    for (const layer of LAYER_ORDER) {
+        const layerChecks = groups[layer];
+        if (!layerChecks)
+            continue;
+        lines.push(`\n[${layer}]`);
+        for (const check of layerChecks) {
+            const statusStr = check.status.toUpperCase().padEnd(7);
+            lines.push(`  ${statusStr} ${check.label}: ${check.detail}`);
+            if (check.suggestion) {
+                lines.push(`         Suggestion: ${check.suggestion}`);
+            }
+        }
+    }
+    const { issues, warnings, skips } = getSummary(checks);
+    lines.push(`\nSummary: ${issues} issue(s), ${warnings} warning(s), ${skips} skipped.`);
+    return lines.join('\n');
+}
+function ConnectionTroubleshooter({ onBack }) {
+    const [checks, setChecks] = (0, react_1.useState)([]);
+    const [running, setRunning] = (0, react_1.useState)(false);
+    const [done, setDone] = (0, react_1.useState)(false);
+    const [expanded, setExpanded] = (0, react_1.useState)(new Set());
+    const hasRun = (0, react_1.useRef)(false);
+    const runDiagnostics = async () => {
+        setRunning(true);
+        setDone(false);
+        setChecks([]);
+        setExpanded(new Set());
+        const api = window.electronAPI?.networkViewer;
+        if (!api) {
+            setChecks([{
+                    id: 'no-api',
+                    label: 'Electron API unavailable',
+                    layer: 'Local System',
+                    status: 'fail',
+                    detail: 'The Electron network API is not available. This tool only works in the desktop app.',
+                }]);
+            setRunning(false);
+            setDone(true);
+            return;
+        }
+        try {
+            // Stream results by running all checks on the backend and updating as they come in.
+            // Show a placeholder "running" row immediately while the full batch executes.
+            const placeholders = LAYER_ORDER.map(layer => ({
+                id: `placeholder-${layer}`,
+                label: `Checking ${layer}…`,
+                layer,
+                status: 'running',
+                detail: '',
+            }));
+            setChecks(placeholders);
+            const results = await api.runDiagnostics();
+            setChecks(results);
+            // Auto-expand all failed/warned checks so they're visible immediately
+            const toExpand = new Set();
+            for (const r of results) {
+                if ((r.status === 'fail' || r.status === 'warn') && r.suggestion) {
+                    toExpand.add(r.id);
+                }
+            }
+            setExpanded(toExpand);
+        }
+        catch (err) {
+            setChecks([{
+                    id: 'run-error',
+                    label: 'Diagnostics failed to run',
+                    layer: 'Local System',
+                    status: 'fail',
+                    detail: `Error: ${err?.message || 'Unknown error'}`,
+                    suggestion: 'Restart the application and try again.',
+                }]);
+        }
+        finally {
+            setRunning(false);
+            setDone(true);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!hasRun.current) {
+            hasRun.current = true;
+            runDiagnostics();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const toggleExpand = (id) => {
+        setExpanded(prev => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const handleAskAssistant = () => {
+        const report = formatReportForAI(checks.filter(c => c.status !== 'running'));
+        const message = `I ran the Peers connection troubleshooter and got the following results. Please help me understand what's wrong and how to fix it:\n\n${report}`;
+        (0, peers_sdk_1.emit)({ name: 'chat:openWithMessage', data: { message } }).catch(() => {
+            // Fallback: copy to clipboard
+            navigator.clipboard.writeText(message).then(() => {
+                alert('Diagnostic report copied to clipboard. Paste it into the AI assistant chat.');
+            }).catch(() => {
+                alert('Could not open AI assistant. Please open the chat manually and paste the diagnostic report.');
+            });
+        });
+    };
+    const groups = groupByLayer(checks.filter(c => !c.id.startsWith('placeholder-')));
+    const placeholders = checks.filter(c => c.id.startsWith('placeholder-'));
+    const summary = getSummary(checks);
+    const completedCount = checks.filter(c => c.status !== 'running').length;
+    const totalCount = checks.length;
+    const progressPct = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+    const overallStatus = !done
+        ? 'running'
+        : summary.issues > 0
+            ? 'fail'
+            : summary.warnings > 0
+                ? 'warn'
+                : 'pass';
+    return (react_1.default.createElement("div", { className: "container-fluid p-4" },
+        react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
+            react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
+                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", onClick: onBack },
+                    react_1.default.createElement("i", { className: "bi bi-arrow-left me-1" }),
+                    "Back"),
+                react_1.default.createElement("h4", { className: "mb-0" },
+                    react_1.default.createElement("i", { className: "bi bi-stethoscope me-2 text-primary" }),
+                    "Connection Troubleshooter")),
+            react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: runDiagnostics, disabled: running }, running ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-1", role: "status", "aria-hidden": "true" }),
+                "Running\u2026")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("i", { className: "bi bi-arrow-clockwise me-1" }),
+                "Re-run")))),
+        running && (react_1.default.createElement("div", { className: "mb-4" },
+            react_1.default.createElement("div", { className: "d-flex justify-content-between mb-1" },
+                react_1.default.createElement("small", { className: "text-muted" }, "Running diagnostics\u2026"),
+                react_1.default.createElement("small", { className: "text-muted" },
+                    completedCount,
+                    " / ",
+                    totalCount)),
+            react_1.default.createElement("div", { className: "progress", style: { height: '6px' } },
+                react_1.default.createElement("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: `${progressPct}%` } })))),
+        done && checks.length > 0 && (react_1.default.createElement("div", { className: `alert ${overallStatus === 'pass' ? 'alert-success' : overallStatus === 'warn' ? 'alert-warning' : 'alert-danger'} d-flex justify-content-between align-items-center mb-4` },
+            react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
+                overallStatus === 'pass' && react_1.default.createElement("i", { className: "bi bi-check-circle-fill fs-5" }),
+                overallStatus === 'warn' && react_1.default.createElement("i", { className: "bi bi-exclamation-triangle-fill fs-5" }),
+                overallStatus === 'fail' && react_1.default.createElement("i", { className: "bi bi-x-circle-fill fs-5" }),
+                react_1.default.createElement("div", null,
+                    overallStatus === 'pass' && react_1.default.createElement("strong", null, "All checks passed."),
+                    overallStatus === 'warn' && react_1.default.createElement("strong", null,
+                        summary.warnings,
+                        " warning",
+                        summary.warnings > 1 ? 's' : '',
+                        " found."),
+                    overallStatus === 'fail' && react_1.default.createElement("strong", null,
+                        summary.issues,
+                        " issue",
+                        summary.issues > 1 ? 's' : '',
+                        " found",
+                        summary.warnings > 0 ? `, ${summary.warnings} warning${summary.warnings > 1 ? 's' : ''}` : '',
+                        "."),
+                    ' ',
+                    react_1.default.createElement("span", { className: "opacity-75" },
+                        summary.passes,
+                        " passed \u00B7 ",
+                        summary.issues,
+                        " failed \u00B7 ",
+                        summary.warnings,
+                        " warnings \u00B7 ",
+                        summary.skips,
+                        " skipped"))),
+            react_1.default.createElement("button", { className: "btn btn-sm btn-dark d-flex align-items-center gap-1", onClick: handleAskAssistant },
+                react_1.default.createElement("i", { className: "bi bi-chat-dots-fill" }),
+                "Ask AI Assistant"))),
+        running && placeholders.length > 0 && (react_1.default.createElement("div", { className: "card mb-3" },
+            react_1.default.createElement("div", { className: "card-body p-2" }, placeholders.map(p => (react_1.default.createElement("div", { key: p.id, className: "d-flex align-items-center gap-2 p-2 border-bottom" },
+                STATUS_ICON[p.status],
+                react_1.default.createElement("span", { className: "text-muted small" }, p.label))))))),
+        LAYER_ORDER.map(layer => {
+            const layerChecks = groups[layer];
+            if (!layerChecks || layerChecks.length === 0)
+                return null;
+            const layerStatus = layerChecks.some(c => c.status === 'fail')
+                ? 'fail'
+                : layerChecks.some(c => c.status === 'warn')
+                    ? 'warn'
+                    : layerChecks.some(c => c.status === 'running')
+                        ? 'running'
+                        : layerChecks.every(c => c.status === 'skip')
+                            ? 'skip'
+                            : 'pass';
+            return (react_1.default.createElement("div", { className: "card mb-3", key: layer },
+                react_1.default.createElement("div", { className: "card-header d-flex align-items-center justify-content-between py-2" },
+                    react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" },
+                        STATUS_ICON[layerStatus],
+                        react_1.default.createElement("strong", { className: "small" }, layer)),
+                    react_1.default.createElement("span", { className: `badge ${STATUS_BADGE_CLASS[layerStatus]}` }, layerStatus === 'running' ? 'running' : layerStatus)),
+                react_1.default.createElement("div", { className: "list-group list-group-flush" }, layerChecks.map(check => (react_1.default.createElement("div", { key: check.id, className: "list-group-item p-0" },
+                    react_1.default.createElement("div", { className: `d-flex align-items-start gap-2 px-3 py-2 ${check.suggestion ? 'cursor-pointer' : ''}`, style: { cursor: check.suggestion ? 'pointer' : 'default' }, onClick: () => check.suggestion && toggleExpand(check.id), role: check.suggestion ? 'button' : undefined },
+                        react_1.default.createElement("div", { className: "pt-1 flex-shrink-0" }, STATUS_ICON[check.status]),
+                        react_1.default.createElement("div", { className: "flex-grow-1 min-width-0" },
+                            react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-start" },
+                                react_1.default.createElement("span", { className: "small fw-medium" }, check.label),
+                                check.suggestion && (react_1.default.createElement("i", { className: `bi bi-chevron-${expanded.has(check.id) ? 'up' : 'down'} text-muted ms-2 flex-shrink-0 small` }))),
+                            react_1.default.createElement("div", { className: "small text-muted mt-1" }, check.detail))),
+                    check.suggestion && expanded.has(check.id) && (react_1.default.createElement("div", { className: "px-3 pb-2 pt-0 ms-4" },
+                        react_1.default.createElement("div", { className: "alert alert-info py-2 px-3 mb-0 small d-flex gap-2" },
+                            react_1.default.createElement("i", { className: "bi bi-lightbulb-fill text-info flex-shrink-0 mt-1" }),
+                            react_1.default.createElement("span", null, check.suggestion))))))))));
+        }),
+        done && checks.length > 0 && (react_1.default.createElement("div", { className: "text-center py-3" },
+            react_1.default.createElement("button", { className: "btn btn-outline-primary", onClick: handleAskAssistant },
+                react_1.default.createElement("i", { className: "bi bi-chat-dots-fill me-2" }),
+                "Ask AI Assistant for Help"),
+            react_1.default.createElement("p", { className: "text-muted small mt-2 mb-0" }, "Sends the full diagnostic report to the AI assistant for guided troubleshooting.")))));
+}

package/dist/screens/network-viewer/index.d.ts

@@ -3,3 +3,4 @@ export * from "./network-viewer";
 export * from "./device-details-modal";
 export * from "./cpu-usage-graph";
 export * from "./usage-graph";
+export * from "./connection-troubleshooter";

package/dist/screens/network-viewer/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./network-viewer"), exports);
 __exportStar(require("./device-details-modal"), exports);
 __exportStar(require("./cpu-usage-graph"), exports);
 __exportStar(require("./usage-graph"), exports);
+__exportStar(require("./connection-troubleshooter"), exports);

package/dist/screens/network-viewer/network-viewer.js

@@ -43,6 +43,7 @@ const globals_1 = require("../../globals");
 const device_details_modal_1 = require("./device-details-modal");
 const group_details_modal_1 = require("./group-details-modal");
 const usage_graph_1 = require("./usage-graph");
+const connection_troubleshooter_1 = require("./connection-troubleshooter");
 /** Format bytes to human-readable string (KB, MB, GB) */
 function formatBytes(bytes) {
     if (bytes < 1024)
@@ -74,6 +75,7 @@ function NetworkViewerList() {
     const [selectedDeviceId, setSelectedDeviceId] = (0, react_1.useState)(null);
     const [selectedGroupId, setSelectedGroupId] = (0, react_1.useState)(null);
     const [connecting, setConnecting] = (0, react_1.useState)(new Set());
+    const [showTroubleshooter, setShowTroubleshooter] = (0, react_1.useState)(false);
     const loadData = async () => {
         try {
             if (!globals_1.isDesktop)
@@ -198,12 +200,19 @@ function NetworkViewerList() {
         return (react_1.default.createElement("div", { className: "container-fluid p-4" },
             react_1.default.createElement("div", { className: "alert alert-warning" }, "Unable to load network information.")));
     }
+    if (showTroubleshooter) {
+        return react_1.default.createElement(connection_troubleshooter_1.ConnectionTroubleshooter, { onBack: () => setShowTroubleshooter(false) });
+    }
     return (react_1.default.createElement("div", { className: "container-fluid p-4" },
         react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-4" },
             react_1.default.createElement("h2", null, "Network Viewer"),
-            react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing },
-                react_1.default.createElement("i", { className: `bi bi-arrow-clockwise ${refreshing ? 'spin' : ''}` }),
-                refreshing ? ' Refreshing...' : ' Refresh')),
+            react_1.default.createElement("div", { className: "d-flex gap-2" },
+                react_1.default.createElement("button", { className: "btn btn-sm btn-outline-warning", onClick: () => setShowTroubleshooter(true), title: "Run connection diagnostics" },
+                    react_1.default.createElement("i", { className: "bi bi-stethoscope me-1" }),
+                    "Troubleshoot"),
+                react_1.default.createElement("button", { className: "btn btn-sm btn-primary", onClick: handleRefresh, disabled: refreshing },
+                    react_1.default.createElement("i", { className: `bi bi-arrow-clockwise ${refreshing ? 'spin' : ''}` }),
+                    refreshing ? ' Refreshing...' : ' Refresh'))),
         react_1.default.createElement("div", { className: "card mb-2" },
             react_1.default.createElement("div", { className: "card-body" },
                 react_1.default.createElement("h5", { className: "card-title" }, "Local Device"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -26,7 +26,7 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.12.1",
+    "@peers-app/peers-sdk": "^0.12.2",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.12.1",
+    "@peers-app/peers-sdk": "0.12.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/components/chat-overlay.tsx

@@ -82,6 +82,7 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
   const [voiceSettings, setVoiceSettings] = useState<VoiceSettingsData>(DEFAULT_VOICE_SETTINGS);
   const [overlayPosition, setOverlayPosition] = useState<OverlayPosition>(DEFAULT_POSITION);
   const [isDragging, setIsDragging] = useState(false);
+  const [pendingInitialMessage, setPendingInitialMessage] = useState<string | undefined>(undefined);
   
   const messagesEndRef = useRef<HTMLDivElement>(null);
   const messagesContainerRef = useRef<HTMLDivElement>(null);
@@ -201,6 +202,14 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
   // Subscribe to voice events
   useEffect(() => {
     const subscriptions = [
+      subscribe('chat:openWithMessage', (event: any) => {
+        const { message } = event.data || {};
+        if (message) {
+          setPendingInitialMessage(message);
+        }
+        setIsExpanded(true);
+        setShowSettings(false);
+      }),
       subscribe('voice:stateChanged', (event: any) => {
         setVoiceState(event.data.state);
         if (event.data.state === 'idle') {
@@ -385,6 +394,9 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
   const handleMessageSubmit = useCallback(async (message: IMessage) => {
     // Notify voice service of text activity (resets inactivity timer)
     rpcServerCalls.voiceNotifyTextActivity?.().catch(() => {});
+
+    // Clear any pending initial message that was pre-filled
+    setPendingInitialMessage(undefined);
     
     // If no thread yet, this message becomes the thread root
     if (!threadId) {
@@ -646,6 +658,8 @@ export const ChatOverlay: React.FC<ChatOverlayProps> = ({
                 channelId={me?.userId || 'default'}
                 threadId={threadId || newid()}
                 onMessageSubmit={handleMessageSubmit}
+                initialMessage={pendingInitialMessage}
+                key={pendingInitialMessage ? `pre-${pendingInitialMessage.slice(0, 20)}` : 'default'}
               />
             </div>
           )}

package/src/components/messages/message-compose.tsx

@@ -32,10 +32,11 @@ interface IProps {
   channelId: string
   threadId?: string
   onMessageSubmit: (message: IMessage, files?: IFile[]) => any
+  initialMessage?: string
 }
 
 export const MessageCompose = (props: IProps) => {
-  const { channelId, threadId, onMessageSubmit } = props;
+  const { channelId, threadId, onMessageSubmit, initialMessage } = props;
 
   const [contentObs] = useState(() => observable(''));
   const [mdEffects] = useState<IEditorEffects>(() => ({}));
@@ -52,7 +53,8 @@ export const MessageCompose = (props: IProps) => {
     let sub: Subscription | undefined;
     getContentPersistenceValue(channelId, threadId).loadingPromise.then(pVar => {
       if (!disposed) {
-        contentObs(pVar() ?? '');
+        const persistedValue = pVar() ?? '';
+        contentObs(initialMessage ?? persistedValue);
         sub = contentObs.subscribe(() => pVar(contentObs()));
         setTimeout(() => scrollToBottom(), 100);
       }

package/src/screens/network-viewer/connection-troubleshooter.tsx

@@ -0,0 +1,358 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { emit } from '@peers-app/peers-sdk';
+
+export interface IDiagnosticCheck {
+  id: string;
+  label: string;
+  layer: string;
+  status: 'pass' | 'fail' | 'warn' | 'skip' | 'running';
+  detail: string;
+  suggestion?: string;
+}
+
+interface Props {
+  onBack: () => void;
+}
+
+const STATUS_ICON: Record<IDiagnosticCheck['status'], React.ReactNode> = {
+  pass: <i className="bi bi-check-circle-fill text-success" />,
+  fail: <i className="bi bi-x-circle-fill text-danger" />,
+  warn: <i className="bi bi-exclamation-triangle-fill text-warning" />,
+  skip: <i className="bi bi-dash-circle text-muted" />,
+  running: (
+    <span className="spinner-border spinner-border-sm text-primary" role="status" aria-hidden="true" />
+  ),
+};
+
+const STATUS_BADGE_CLASS: Record<IDiagnosticCheck['status'], string> = {
+  pass: 'bg-success',
+  fail: 'bg-danger',
+  warn: 'bg-warning text-dark',
+  skip: 'bg-secondary',
+  running: 'bg-primary',
+};
+
+const LAYER_ORDER = [
+  'Local System',
+  'Cloud Relay',
+  'Local Network',
+  'Protocol Support',
+  'WebRTC / TURN',
+  'Peer State',
+  'Active Connections',
+];
+
+function groupByLayer(checks: IDiagnosticCheck[]): Record<string, IDiagnosticCheck[]> {
+  const groups: Record<string, IDiagnosticCheck[]> = {};
+  for (const check of checks) {
+    if (!groups[check.layer]) groups[check.layer] = [];
+    groups[check.layer].push(check);
+  }
+  return groups;
+}
+
+function getSummary(checks: IDiagnosticCheck[]): { issues: number; warnings: number; passes: number; skips: number } {
+  return {
+    issues: checks.filter(c => c.status === 'fail').length,
+    warnings: checks.filter(c => c.status === 'warn').length,
+    passes: checks.filter(c => c.status === 'pass').length,
+    skips: checks.filter(c => c.status === 'skip').length,
+  };
+}
+
+function formatReportForAI(checks: IDiagnosticCheck[]): string {
+  const lines: string[] = ['Connection Troubleshooter Report', '================================'];
+  const groups = groupByLayer(checks);
+
+  for (const layer of LAYER_ORDER) {
+    const layerChecks = groups[layer];
+    if (!layerChecks) continue;
+    lines.push(`\n[${layer}]`);
+    for (const check of layerChecks) {
+      const statusStr = check.status.toUpperCase().padEnd(7);
+      lines.push(`  ${statusStr} ${check.label}: ${check.detail}`);
+      if (check.suggestion) {
+        lines.push(`         Suggestion: ${check.suggestion}`);
+      }
+    }
+  }
+
+  const { issues, warnings, skips } = getSummary(checks);
+  lines.push(`\nSummary: ${issues} issue(s), ${warnings} warning(s), ${skips} skipped.`);
+
+  return lines.join('\n');
+}
+
+export function ConnectionTroubleshooter({ onBack }: Props) {
+  const [checks, setChecks] = useState<IDiagnosticCheck[]>([]);
+  const [running, setRunning] = useState(false);
+  const [done, setDone] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const hasRun = useRef(false);
+
+  const runDiagnostics = async () => {
+    setRunning(true);
+    setDone(false);
+    setChecks([]);
+    setExpanded(new Set());
+
+    const api = (window as any).electronAPI?.networkViewer;
+    if (!api) {
+      setChecks([{
+        id: 'no-api',
+        label: 'Electron API unavailable',
+        layer: 'Local System',
+        status: 'fail',
+        detail: 'The Electron network API is not available. This tool only works in the desktop app.',
+      }]);
+      setRunning(false);
+      setDone(true);
+      return;
+    }
+
+    try {
+      // Stream results by running all checks on the backend and updating as they come in.
+      // Show a placeholder "running" row immediately while the full batch executes.
+      const placeholders: IDiagnosticCheck[] = LAYER_ORDER.map(layer => ({
+        id: `placeholder-${layer}`,
+        label: `Checking ${layer}…`,
+        layer,
+        status: 'running',
+        detail: '',
+      }));
+      setChecks(placeholders);
+
+      const results: IDiagnosticCheck[] = await api.runDiagnostics();
+      setChecks(results);
+
+      // Auto-expand all failed/warned checks so they're visible immediately
+      const toExpand = new Set<string>();
+      for (const r of results) {
+        if ((r.status === 'fail' || r.status === 'warn') && r.suggestion) {
+          toExpand.add(r.id);
+        }
+      }
+      setExpanded(toExpand);
+    } catch (err: any) {
+      setChecks([{
+        id: 'run-error',
+        label: 'Diagnostics failed to run',
+        layer: 'Local System',
+        status: 'fail',
+        detail: `Error: ${err?.message || 'Unknown error'}`,
+        suggestion: 'Restart the application and try again.',
+      }]);
+    } finally {
+      setRunning(false);
+      setDone(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!hasRun.current) {
+      hasRun.current = true;
+      runDiagnostics();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const toggleExpand = (id: string) => {
+    setExpanded(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const handleAskAssistant = () => {
+    const report = formatReportForAI(checks.filter(c => c.status !== 'running'));
+    const message = `I ran the Peers connection troubleshooter and got the following results. Please help me understand what's wrong and how to fix it:\n\n${report}`;
+    emit({ name: 'chat:openWithMessage', data: { message } }).catch(() => {
+      // Fallback: copy to clipboard
+      navigator.clipboard.writeText(message).then(() => {
+        alert('Diagnostic report copied to clipboard. Paste it into the AI assistant chat.');
+      }).catch(() => {
+        alert('Could not open AI assistant. Please open the chat manually and paste the diagnostic report.');
+      });
+    });
+  };
+
+  const groups = groupByLayer(checks.filter(c => !c.id.startsWith('placeholder-')));
+  const placeholders = checks.filter(c => c.id.startsWith('placeholder-'));
+  const summary = getSummary(checks);
+  const completedCount = checks.filter(c => c.status !== 'running').length;
+  const totalCount = checks.length;
+  const progressPct = totalCount > 0 ? Math.round((completedCount / totalCount) * 100) : 0;
+
+  const overallStatus: IDiagnosticCheck['status'] = !done
+    ? 'running'
+    : summary.issues > 0
+    ? 'fail'
+    : summary.warnings > 0
+    ? 'warn'
+    : 'pass';
+
+  return (
+    <div className="container-fluid p-4">
+      {/* Header */}
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <div className="d-flex align-items-center gap-3">
+          <button className="btn btn-sm btn-outline-secondary" onClick={onBack}>
+            <i className="bi bi-arrow-left me-1" />
+            Back
+          </button>
+          <h4 className="mb-0">
+            <i className="bi bi-stethoscope me-2 text-primary" />
+            Connection Troubleshooter
+          </h4>
+        </div>
+        <button
+          className="btn btn-sm btn-primary"
+          onClick={runDiagnostics}
+          disabled={running}
+        >
+          {running ? (
+            <>
+              <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+              Running…
+            </>
+          ) : (
+            <>
+              <i className="bi bi-arrow-clockwise me-1" />
+              Re-run
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Progress bar */}
+      {running && (
+        <div className="mb-4">
+          <div className="d-flex justify-content-between mb-1">
+            <small className="text-muted">Running diagnostics…</small>
+            <small className="text-muted">{completedCount} / {totalCount}</small>
+          </div>
+          <div className="progress" style={{ height: '6px' }}>
+            <div
+              className="progress-bar progress-bar-striped progress-bar-animated"
+              style={{ width: `${progressPct}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Summary card — shown when done */}
+      {done && checks.length > 0 && (
+        <div className={`alert ${overallStatus === 'pass' ? 'alert-success' : overallStatus === 'warn' ? 'alert-warning' : 'alert-danger'} d-flex justify-content-between align-items-center mb-4`}>
+          <div className="d-flex align-items-center gap-2">
+            {overallStatus === 'pass' && <i className="bi bi-check-circle-fill fs-5" />}
+            {overallStatus === 'warn' && <i className="bi bi-exclamation-triangle-fill fs-5" />}
+            {overallStatus === 'fail' && <i className="bi bi-x-circle-fill fs-5" />}
+            <div>
+              {overallStatus === 'pass' && <strong>All checks passed.</strong>}
+              {overallStatus === 'warn' && <strong>{summary.warnings} warning{summary.warnings > 1 ? 's' : ''} found.</strong>}
+              {overallStatus === 'fail' && <strong>{summary.issues} issue{summary.issues > 1 ? 's' : ''} found{summary.warnings > 0 ? `, ${summary.warnings} warning${summary.warnings > 1 ? 's' : ''}` : ''}.</strong>}
+              {' '}
+              <span className="opacity-75">
+                {summary.passes} passed · {summary.issues} failed · {summary.warnings} warnings · {summary.skips} skipped
+              </span>
+            </div>
+          </div>
+          <button className="btn btn-sm btn-dark d-flex align-items-center gap-1" onClick={handleAskAssistant}>
+            <i className="bi bi-chat-dots-fill" />
+            Ask AI Assistant
+          </button>
+        </div>
+      )}
+
+      {/* Placeholder rows while waiting for full results */}
+      {running && placeholders.length > 0 && (
+        <div className="card mb-3">
+          <div className="card-body p-2">
+            {placeholders.map(p => (
+              <div key={p.id} className="d-flex align-items-center gap-2 p-2 border-bottom">
+                {STATUS_ICON[p.status]}
+                <span className="text-muted small">{p.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Results grouped by layer */}
+      {LAYER_ORDER.map(layer => {
+        const layerChecks = groups[layer];
+        if (!layerChecks || layerChecks.length === 0) return null;
+
+        const layerStatus: IDiagnosticCheck['status'] = layerChecks.some(c => c.status === 'fail')
+          ? 'fail'
+          : layerChecks.some(c => c.status === 'warn')
+          ? 'warn'
+          : layerChecks.some(c => c.status === 'running')
+          ? 'running'
+          : layerChecks.every(c => c.status === 'skip')
+          ? 'skip'
+          : 'pass';
+
+        return (
+          <div className="card mb-3" key={layer}>
+            <div className="card-header d-flex align-items-center justify-content-between py-2">
+              <div className="d-flex align-items-center gap-2">
+                {STATUS_ICON[layerStatus]}
+                <strong className="small">{layer}</strong>
+              </div>
+              <span className={`badge ${STATUS_BADGE_CLASS[layerStatus]}`}>
+                {layerStatus === 'running' ? 'running' : layerStatus}
+              </span>
+            </div>
+            <div className="list-group list-group-flush">
+              {layerChecks.map(check => (
+                <div key={check.id} className="list-group-item p-0">
+                  <div
+                    className={`d-flex align-items-start gap-2 px-3 py-2 ${check.suggestion ? 'cursor-pointer' : ''}`}
+                    style={{ cursor: check.suggestion ? 'pointer' : 'default' }}
+                    onClick={() => check.suggestion && toggleExpand(check.id)}
+                    role={check.suggestion ? 'button' : undefined}
+                  >
+                    <div className="pt-1 flex-shrink-0">{STATUS_ICON[check.status]}</div>
+                    <div className="flex-grow-1 min-width-0">
+                      <div className="d-flex justify-content-between align-items-start">
+                        <span className="small fw-medium">{check.label}</span>
+                        {check.suggestion && (
+                          <i className={`bi bi-chevron-${expanded.has(check.id) ? 'up' : 'down'} text-muted ms-2 flex-shrink-0 small`} />
+                        )}
+                      </div>
+                      <div className="small text-muted mt-1">{check.detail}</div>
+                    </div>
+                  </div>
+                  {check.suggestion && expanded.has(check.id) && (
+                    <div className="px-3 pb-2 pt-0 ms-4">
+                      <div className="alert alert-info py-2 px-3 mb-0 small d-flex gap-2">
+                        <i className="bi bi-lightbulb-fill text-info flex-shrink-0 mt-1" />
+                        <span>{check.suggestion}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Ask AI Assistant button at bottom (when done, as a secondary option) */}
+      {done && checks.length > 0 && (
+        <div className="text-center py-3">
+          <button className="btn btn-outline-primary" onClick={handleAskAssistant}>
+            <i className="bi bi-chat-dots-fill me-2" />
+            Ask AI Assistant for Help
+          </button>
+          <p className="text-muted small mt-2 mb-0">
+            Sends the full diagnostic report to the AI assistant for guided troubleshooting.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/screens/network-viewer/index.ts

@@ -6,3 +6,4 @@ export * from "./network-viewer";
 export * from "./device-details-modal";
 export * from "./cpu-usage-graph";
 export * from "./usage-graph";
+export * from "./connection-troubleshooter";

package/src/screens/network-viewer/network-viewer.tsx

@@ -7,6 +7,7 @@ import { isDesktop } from '../../globals';
 import { DeviceDetailsModal } from './device-details-modal';
 import { GroupDetailsModal } from './group-details-modal';
 import { UsageGraph } from './usage-graph';
+import { ConnectionTroubleshooter } from './connection-troubleshooter';
 
 /** Format bytes to human-readable string (KB, MB, GB) */
 function formatBytes(bytes: number): string {
@@ -107,6 +108,7 @@ export function NetworkViewerList() {
   const [selectedDeviceId, setSelectedDeviceId] = useState<string | null>(null);
   const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
   const [connecting, setConnecting] = useState<Set<string>>(new Set());
+  const [showTroubleshooter, setShowTroubleshooter] = useState(false);
 
   const loadData = async () => {
     try {
@@ -244,18 +246,32 @@ export function NetworkViewerList() {
     );
   }
 
+  if (showTroubleshooter) {
+    return <ConnectionTroubleshooter onBack={() => setShowTroubleshooter(false)} />;
+  }
+
   return (
     <div className="container-fluid p-4">
       <div className="d-flex justify-content-between align-items-center mb-4">
         <h2>Network Viewer</h2>
-        <button
-          className="btn btn-sm btn-primary"
-          onClick={handleRefresh}
-          disabled={refreshing}
-        >
-          <i className={`bi bi-arrow-clockwise ${refreshing ? 'spin' : ''}`}></i>
-          {refreshing ? ' Refreshing...' : ' Refresh'}
-        </button>
+        <div className="d-flex gap-2">
+          <button
+            className="btn btn-sm btn-outline-warning"
+            onClick={() => setShowTroubleshooter(true)}
+            title="Run connection diagnostics"
+          >
+            <i className="bi bi-stethoscope me-1"></i>
+            Troubleshoot
+          </button>
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={handleRefresh}
+            disabled={refreshing}
+          >
+            <i className={`bi bi-arrow-clockwise ${refreshing ? 'spin' : ''}`}></i>
+            {refreshing ? ' Refreshing...' : ' Refresh'}
+          </button>
+        </div>
       </div>
 
       {/* Device Identifiers */}