From 71aeb55f2eff8390debb3355d38a8c0af7bc0ee2 Mon Sep 17 00:00:00 2001 From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com> Date: Sat, 21 Feb 2026 12:26:25 +0530 Subject: [PATCH] feat: redesign Tauri Command Console with premium UI/UX (#135) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: add .mcp.json for MCP server configuration - Introduced `.mcp.json` with server details for managing MCP integrations - Defines `readme` server with HTTP type and URL endpoint configuration * fix: Update skills submodule with Telegram error handling improvements - Fixed setup flow showing false success when TDLib errors occurred - Improved async error handling in setup steps - Added client reset mechanisms for error recovery - Enhanced error messaging for better user experience - Cleaned up excessive debug logging while maintaining error logs Resolves issue where Telegram setup showed success modal despite underlying TDLib errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * chore: bump version to 0.45.0 [skip ci] * chore: bump version to 0.46.0 [skip ci] * chore: bump version to 0.47.0 * feat: comprehensive redesign of Tauri Command Console Transform 845-line admin interface into premium crypto-styled experience: - Complete architectural redesign with 6 logical categories - Premium card system with priority-based styling (Ocean blue, Slate, Amber) - Progressive disclosure system (Basic → Advanced → Developer modes) - Contextual descriptions for all 60+ form fields - Responsive design with desktop grid and mobile accordion - 100% functionality preservation while dramatically improving UX Categories reorganized: • System Configuration (Critical - API keys, model settings) • Runtime & Execution (Critical - V8 engine, skills, services) • Security & Data (Critical - encryption, integrations) • Network & Infrastructure (Infrastructure - gateway, tunnels, memory) • Development & Operations (Development - diagnostics, hardware) • Interactive Tools (Tools - agent chat, output console) Components added: - SectionCard: Priority-based collapsible sections - InputGroup: Consistent form field organization - ActionPanel: Enhanced action buttons with loading states Features: - Smart progressive disclosure with user preference memory - Contextually accurate field descriptions and guidance - Professional typography using Cabinet Grotesk and Inter - Sophisticated color gradients matching crypto aesthetic - Mobile-responsive accordion behavior - Accessibility improvements with proper ARIA labeling 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * refactor: remove tooltips and reposition descriptions in Tauri Commands Panel - Remove tooltip system entirely from InputGroup components - Move full descriptions directly below labels instead of after input fields - Improve spacing and readability throughout interface - Delete unused Tooltip component and textUtils utilities - Enhance Field and CheckboxField components with better typography 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * style: improve spacing and layout in Tauri Commands Panel - Enhance spacing between sections and components for better readability - Improve grid gaps and padding throughout the interface - Refine ActionPanel and SectionCard component spacing - Better organize skills display with improved item spacing - Polish overall visual hierarchy and component alignment 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * feat: implement comprehensive UI consistency for Tauri Command Console - Replace all white backgrounds with sophisticated dark theme styling - Update input fields with bg-stone-900/40 and proper focus states - Implement custom button system replacing DaisyUI dependencies - Apply consistent glass morphism patterns throughout interface - Enhance checkbox and form component styling for better integration - Fix textarea elements with proper dark theme colors and borders - Add professional hover states and accessibility improvements - Achieve perfect visual consistency with Intelligence and Skills pages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * feat: implement accordion pattern for System Configuration, Runtime & Execution, and Security & Data sections - Convert three critical sections to use collapsible accordion pattern - Add isSectionVisible() conditional wrappers for progressive disclosure - Change collapsible={false} to collapsible={true} for all three sections - Add defaultExpanded={!isCollapsed()} for consistent state management - Fix section ID consistency in getSectionVisibility() function - Maintain all existing functionality and content - Provide consistent UX matching Network & Infrastructure pattern 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * style: standardize all sections with Network & Infrastructure color scheme - Change all priority values to "infrastructure" for visual consistency - System Configuration: priority="critical" → "infrastructure" - Runtime & Execution: priority="critical" → "infrastructure" - Security & Data: priority="critical" → "infrastructure" - Development & Operations: priority="development" → "infrastructure" - Interactive Tools: priority="tools" → "infrastructure" All sections now use unified slate gradient backgrounds and icon colors for a cohesive, professional appearance throughout the interface. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * fix: resolve JSX syntax error in Interactive Tools section - Fix extra '>' character in ChatBubbleLeftRightIcon icon prop - Corrects TypeScript compilation error on line 1050 - Ensures proper JSX syntax for SectionCard component 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude * feat: remove view mode selector and always show all 6 sections - Remove view mode state and selector UI (basic/advanced/developer) - Always show all sections: System Configuration, Runtime & Execution, Security & Data, Network & Infrastructure, Development & Operations, Interactive Tools - All sections start expanded by default for immediate access - Simplify section visibility logic to always return true - Keep loading indicator positioned on the right - Improve UX by removing unnecessary progressive disclosure 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --------- Co-authored-by: Claude Co-authored-by: Steven Enamakel <31011319+senamakel@users.noreply.github.com> Co-authored-by: github-actions[bot] --- package.json | 3 +- src-tauri/tauri.conf.json | 2 +- .../settings/panels/TauriCommandsPanel.tsx | 1364 ++++++---- .../panels/components/ActionPanel.tsx | 87 + .../settings/panels/components/InputGroup.tsx | 102 + .../panels/components/SectionCard.tsx | 89 + yarn.lock | 2233 ++++++++--------- 7 files changed, 2104 insertions(+), 1776 deletions(-) create mode 100644 src/components/settings/panels/components/ActionPanel.tsx create mode 100644 src/components/settings/panels/components/InputGroup.tsx create mode 100644 src/components/settings/panels/components/SectionCard.tsx diff --git a/package.json b/package.json index 1ef85ac84..934ba1058 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "alphahuman", "private": true, - "version": "0.44.0", + "version": "0.47.0", "type": "module", "scripts": { "dev": "vite", @@ -39,6 +39,7 @@ "prepare": "husky" }, "dependencies": { + "@heroicons/react": "^2.2.0", "@reduxjs/toolkit": "^2.11.2", "@sentry/react": "^10.38.0", "@tauri-apps/api": "^2", diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 40868c3c1..2423e82bb 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -1,7 +1,7 @@ { "$schema": "https://schema.tauri.app/config/2", "productName": "AlphaHuman", - "version": "0.44.0", + "version": "0.46.0", "identifier": "com.alphahuman.app", "build": { "beforeDevCommand": "npm run dev", diff --git a/src/components/settings/panels/TauriCommandsPanel.tsx b/src/components/settings/panels/TauriCommandsPanel.tsx index 8c7752f25..e57b11691 100644 --- a/src/components/settings/panels/TauriCommandsPanel.tsx +++ b/src/components/settings/panels/TauriCommandsPanel.tsx @@ -1,7 +1,19 @@ import { useMemo, useState } from 'react'; +import { + CogIcon, + CpuChipIcon, + ShieldCheckIcon, + ServerIcon, + WrenchScrewdriverIcon, + ChatBubbleLeftRightIcon, + DocumentTextIcon, +} from '@heroicons/react/24/outline'; import SettingsHeader from '../components/SettingsHeader'; import { useSettingsNavigation } from '../hooks/useSettingsNavigation'; +import SectionCard from './components/SectionCard'; +import InputGroup, { Field, CheckboxField } from './components/InputGroup'; +import ActionPanel, { PrimaryButton } from './components/ActionPanel'; import { alphahumanAgentChat, alphahumanDecryptSecret, @@ -38,8 +50,17 @@ const formatJson = (value: unknown) => JSON.stringify(value, null, 2); const TauriCommandsPanel = () => { const { navigateBack } = useSettingsNavigation(); + + // View mode removed - always show all sections + const [expandedSections] = useState>( + new Set(['system-configuration', 'runtime-execution', 'security-data', 'network-infrastructure', 'development-operations', 'interactive-tools']) + ); + + // Output and error states const [output, setOutput] = useState(''); const [error, setError] = useState(''); + + // Form states (preserved from original) const [providerOverride, setProviderOverride] = useState(''); const [integrationName, setIntegrationName] = useState(''); const [hardwarePath, setHardwarePath] = useState(''); @@ -76,6 +97,10 @@ const TauriCommandsPanel = () => { const [chatModel, setChatModel] = useState(''); const [chatTemperature, setChatTemperature] = useState('0.7'); const [chatLog, setChatLog] = useState>([]); + + // Loading states + const [operationLoading, setOperationLoading] = useState(''); + const tauriAvailable = useMemo(() => isTauri(), []); const parseOptionalNumber = (value: string): number | null => { if (!value.trim()) { @@ -85,19 +110,23 @@ const TauriCommandsPanel = () => { return Number.isFinite(parsed) ? parsed : null; }; - const run = async (fn: () => Promise) => { + const run = async (fn: () => Promise, operationName?: string) => { setError(''); + if (operationName) setOperationLoading(operationName); try { const result = await fn(); setOutput(formatJson(result)); } catch (err) { const message = err instanceof Error ? err.message : String(err); setError(message); + } finally { + setOperationLoading(''); } }; - const runWithResult = async (fn: () => Promise): Promise => { + const runWithResult = async (fn: () => Promise, operationName?: string): Promise => { setError(''); + if (operationName) setOperationLoading(operationName); try { const result = await fn(); setOutput(formatJson(result)); @@ -106,11 +135,13 @@ const TauriCommandsPanel = () => { const message = err instanceof Error ? err.message : String(err); setError(message); return null; + } finally { + setOperationLoading(''); } }; const loadConfig = async () => { - const response = await runWithResult(() => alphahumanGetConfig()); + const response = await runWithResult(() => alphahumanGetConfig(), 'loadConfig'); if (!response) { return; } @@ -188,10 +219,11 @@ const TauriCommandsPanel = () => { default_provider: defaultProvider.trim() ? defaultProvider : null, default_model: defaultModel.trim() ? defaultModel : null, default_temperature: parseOptionalNumber(defaultTemp), - }) + }), + 'saveModelSettings' ); - const saveTunnelSettings = () => run(() => alphahumanUpdateTunnelSettings(buildTunnelConfig())); + const saveTunnelSettings = () => run(() => alphahumanUpdateTunnelSettings(buildTunnelConfig()), 'saveTunnelSettings'); const saveGatewaySettings = () => run(() => @@ -200,7 +232,8 @@ const TauriCommandsPanel = () => { port: parseOptionalNumber(gatewayPort), require_pairing: gatewayPairing, allow_public_bind: gatewayPublic, - }) + }), + 'saveGatewaySettings' ); const saveMemorySettings = () => @@ -211,7 +244,8 @@ const TauriCommandsPanel = () => { embedding_provider: embeddingProvider.trim() ? embeddingProvider : null, embedding_model: embeddingModel.trim() ? embeddingModel : null, embedding_dimensions: parseOptionalNumber(embeddingDims), - }) + }), + 'saveMemorySettings' ); const saveRuntimeSettings = () => @@ -219,7 +253,8 @@ const TauriCommandsPanel = () => { alphahumanUpdateRuntimeSettings({ kind: runtimeKind.trim() ? runtimeKind : null, reasoning_enabled: reasoningEnabled, - }) + }), + 'saveRuntimeSettings' ); const loadSkills = async () => { @@ -244,9 +279,9 @@ const TauriCommandsPanel = () => { const toggleSkill = async (skillId: string, nextEnabled: boolean) => { if (nextEnabled) { - await run(() => runtimeEnableSkill(skillId)); + await run(() => runtimeEnableSkill(skillId), 'enableSkill'); } else { - await run(() => runtimeDisableSkill(skillId)); + await run(() => runtimeDisableSkill(skillId), 'disableSkill'); } setSkills((prev) => prev.map((item) => @@ -270,13 +305,34 @@ const TauriCommandsPanel = () => { chatProvider.trim() ? chatProvider : undefined, chatModel.trim() ? chatModel : undefined, parseOptionalNumber(chatTemperature) ?? undefined - ) + ), + 'sendChat' ); if (response) { setChatLog((prev) => [...prev, { role: 'agent', text: response.result }]); } }; + // Always show all sections + const isSectionVisible = () => { + return true; // Always show all sections + }; + + const isCollapsed = (sectionId: string) => { + return !expandedSections.has(sectionId); + }; + + // Helper to check if a section is collapsed (currently unused but kept for future expansion) + // const toggleSection = (sectionId: string) => { + // const newExpanded = new Set(expandedSections); + // if (newExpanded.has(sectionId)) { + // newExpanded.delete(sectionId); + // } else { + // newExpanded.add(sectionId); + // } + // setExpandedSections(newExpanded); + // }; + return (
{ onBack={navigateBack} /> -
+
{!tauriAvailable && (
Tauri runtime not detected. Commands will fail in browser mode.
)} -
-

Config

-
- + {operationLoading && ( +
+
+
+ {operationLoading} +
-
+ )} -
-

Model API Keys

-
- - - - - -
- -
- -
-

Diagnostics

-
- - - setProviderOverride(event.target.value)} - /> -
-
+ + setApiKey(event.target.value)} + /> + + + setApiUrl(event.target.value)} + /> + + + setDefaultProvider(event.target.value)} + /> + + + setDefaultModel(event.target.value)} + /> + + + setDefaultTemp(event.target.value)} + /> + + -
-

Integrations

-
- - - setIntegrationName(event.target.value)} - /> -
-
+ + setRuntimeKind(event.target.value)} + /> + + + -
-

Models

-
-
+ + {/* Category 3: Security & Data - Full width in basic mode, grid in advanced+ */} + {isSectionVisible() && ( + } + collapsible={true} + defaultExpanded={!isCollapsed('security-data')} + hasChanges={false} + loading={operationLoading?.includes('Secret') || operationLoading?.includes('Models') || operationLoading?.includes('Integration')} + > +
+ + +