mirror of
https://github.com/tinyhumansai/openhuman.git
synced 2026-07-28 13:32:23 +00:00
feat: redesign Tauri Command Console with premium UI/UX (#135)
* 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> * 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 <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Steven Enamakel <31011319+senamakel@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Cyrus Gray
co-authored by
Claude
Steven Enamakel
github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Claude
Steven Enamakel
github-actions[bot] <github-actions[bot]@users.noreply.github.com>
parent
c2ff8b693b
commit
71aeb55f2e
+2
-1
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,87 @@
|
||||
import React from 'react';
|
||||
import { CheckIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface ActionPanelProps {
|
||||
children: React.ReactNode;
|
||||
hasChanges?: boolean;
|
||||
success?: boolean;
|
||||
error?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ActionPanel: React.FC<ActionPanelProps> = ({
|
||||
children,
|
||||
hasChanges = false,
|
||||
success = false,
|
||||
error,
|
||||
className = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className={`space-y-6 ${className}`}>
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{children}
|
||||
{hasChanges && (
|
||||
<div className="flex items-center gap-2 text-xs text-amber-300">
|
||||
<div className="h-2 w-2 rounded-full bg-amber-400 animate-pulse" />
|
||||
Unsaved changes
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{success && (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-sage-500/40 bg-sage-500/10 px-3 py-2 text-sm text-sage-200">
|
||||
<CheckIcon className="h-4 w-4" />
|
||||
Operation completed successfully
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 rounded-lg border border-coral-500/40 bg-coral-500/10 px-3 py-2 text-sm text-coral-200">
|
||||
<ExclamationTriangleIcon className="h-4 w-4" />
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface PrimaryButtonProps {
|
||||
onClick: () => void;
|
||||
loading?: boolean;
|
||||
disabled?: boolean;
|
||||
variant?: 'primary' | 'secondary' | 'outline';
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PrimaryButton: React.FC<PrimaryButtonProps> = ({
|
||||
onClick,
|
||||
loading = false,
|
||||
disabled = false,
|
||||
variant = 'primary',
|
||||
children,
|
||||
className = ''
|
||||
}) => {
|
||||
const baseClasses = 'px-6 py-3 rounded-lg font-medium transition-all duration-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed';
|
||||
const variantClasses = {
|
||||
primary: 'bg-primary-600 hover:bg-primary-500 active:bg-primary-700 text-white shadow-soft hover:shadow-lg hover:shadow-primary-500/25 focus:ring-2 focus:ring-primary-500/50 focus:ring-offset-2 focus:ring-offset-black',
|
||||
secondary: 'bg-stone-800 hover:bg-stone-700 active:bg-stone-600 text-white border border-stone-600 focus:ring-2 focus:ring-primary-500/50 focus:ring-offset-2 focus:ring-offset-black',
|
||||
outline: 'border border-stone-600 text-white hover:bg-white/10 active:bg-white/20 focus:ring-2 focus:ring-primary-500/50 focus:ring-offset-2 focus:ring-offset-black'
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${className}`}
|
||||
onClick={onClick}
|
||||
disabled={disabled || loading}
|
||||
>
|
||||
{loading && (
|
||||
<div className="h-4 w-4 border-2 border-white/20 border-t-white rounded-full animate-spin mr-2" />
|
||||
)}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionPanel;
|
||||
export { PrimaryButton };
|
||||
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
|
||||
interface InputGroupProps {
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const InputGroup: React.FC<InputGroupProps> = ({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
className = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className={`space-y-6 ${className}`}>
|
||||
{title && (
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-lg font-medium text-white">{title}</h4>
|
||||
{description && (
|
||||
<p className="text-sm text-gray-400">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-lg border border-white/10 bg-white/5 backdrop-blur-sm p-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface FieldProps {
|
||||
label: string;
|
||||
children: React.ReactNode;
|
||||
helpText?: string;
|
||||
className?: string;
|
||||
fullWidth?: boolean;
|
||||
}
|
||||
|
||||
const Field: React.FC<FieldProps> = ({
|
||||
label,
|
||||
children,
|
||||
helpText,
|
||||
className = '',
|
||||
fullWidth = false
|
||||
}) => {
|
||||
return (
|
||||
<label className={`space-y-3 text-sm text-gray-300 ${fullWidth ? 'md:col-span-2' : ''} ${className}`}>
|
||||
<div>
|
||||
<span className="font-medium">{label}</span>
|
||||
{helpText && (
|
||||
<p className="text-xs text-gray-400 leading-relaxed mt-1">
|
||||
{helpText}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
};
|
||||
|
||||
interface CheckboxFieldProps {
|
||||
label: string;
|
||||
checked: boolean;
|
||||
onChange: (checked: boolean) => void;
|
||||
helpText?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const CheckboxField: React.FC<CheckboxFieldProps> = ({
|
||||
label,
|
||||
checked,
|
||||
onChange,
|
||||
helpText,
|
||||
className = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className={`flex flex-col gap-3 ${className}`}>
|
||||
<label className="flex items-center gap-3 text-sm text-gray-300 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="w-5 h-5 rounded border-2 border-stone-600 bg-stone-900/40 text-primary-500 focus:ring-2 focus:ring-primary-500/30 focus:border-primary-500/50 transition-all duration-200"
|
||||
checked={checked}
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
/>
|
||||
<span className="font-medium">{label}</span>
|
||||
</label>
|
||||
{helpText && (
|
||||
<p className="text-xs text-gray-400 ml-7 leading-relaxed">
|
||||
{helpText}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InputGroup;
|
||||
export { Field, CheckboxField };
|
||||
@@ -0,0 +1,89 @@
|
||||
import React, { useState } from 'react';
|
||||
import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface SectionCardProps {
|
||||
title: string;
|
||||
priority: 'critical' | 'infrastructure' | 'development' | 'tools';
|
||||
icon: React.ReactElement;
|
||||
children: React.ReactNode;
|
||||
collapsible?: boolean;
|
||||
defaultExpanded?: boolean;
|
||||
hasChanges?: boolean;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const priorityStyles = {
|
||||
critical: 'bg-gradient-to-br from-primary-500/10 to-primary-600/5 border-primary-500/20',
|
||||
infrastructure: 'bg-gradient-to-br from-slate-500/8 to-slate-600/4 border-slate-500/15',
|
||||
development: 'bg-gradient-to-br from-amber-500/8 to-amber-600/4 border-amber-500/15',
|
||||
tools: 'bg-black/30 border-stone-600/30'
|
||||
} as const;
|
||||
|
||||
const priorityIconColors = {
|
||||
critical: 'text-primary-400',
|
||||
infrastructure: 'text-slate-400',
|
||||
development: 'text-amber-400',
|
||||
tools: 'text-stone-400'
|
||||
} as const;
|
||||
|
||||
const SectionCard: React.FC<SectionCardProps> = ({
|
||||
title,
|
||||
priority,
|
||||
icon,
|
||||
children,
|
||||
collapsible = false,
|
||||
defaultExpanded = true,
|
||||
hasChanges = false,
|
||||
loading = false
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
|
||||
|
||||
const handleToggle = () => {
|
||||
if (collapsible) {
|
||||
setIsExpanded(!isExpanded);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`rounded-xl border backdrop-blur-sm transition-all duration-200 ${priorityStyles[priority]}`}>
|
||||
<div
|
||||
className={`flex items-center justify-between p-6 ${collapsible ? 'cursor-pointer hover:bg-white/5' : ''}`}
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex-shrink-0 ${priorityIconColors[priority]}`}>
|
||||
{React.cloneElement(icon, { className: 'h-5 w-5' } as any)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-xl font-semibold text-white font-display">{title}</h3>
|
||||
{hasChanges && (
|
||||
<div className="h-2 w-2 rounded-full bg-amber-400 animate-pulse" />
|
||||
)}
|
||||
{loading && (
|
||||
<div className="h-4 w-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{collapsible && (
|
||||
<div className="text-gray-400 transition-transform duration-200">
|
||||
{isExpanded ? (
|
||||
<ChevronDownIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<ChevronRightIcon className="h-5 w-5" />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(!collapsible || isExpanded) && (
|
||||
<div className="px-6 pb-6">
|
||||
<div className="space-y-8">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionCard;
|
||||
Reference in New Issue
Block a user