LGram16
82cf4b8fd0
Backend changes (C#): - Add SelectRecipe method to MachineBridge for recipe selection - Add currentRecipeId tracking in MainForm - Implement SELECT_RECIPE handler in WebSocketServer Frontend changes (React/TypeScript): - Add selectRecipe method to communication layer - Update handleSelectRecipe to call backend and handle response - Recipe selection updates ModelInfoPanel automatically - Add error handling and logging for recipe operations Layout improvements: - Add Layout component with persistent Header and Footer - Create separate IOMonitorPage for full-screen I/O monitoring - Add dynamic IO tab switcher in Header (Inputs/Outputs) - Ensure consistent UI across all pages 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
59 lines
2.7 KiB
TypeScript
59 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { Box, Cpu, Activity } from 'lucide-react';
|
|
import { Recipe } from '../types';
|
|
import { CyberPanel } from './common/CyberPanel';
|
|
|
|
interface ModelInfoPanelProps {
|
|
currentRecipe: Recipe;
|
|
}
|
|
|
|
export const ModelInfoPanel: React.FC<ModelInfoPanelProps> = ({ currentRecipe }) => {
|
|
return (
|
|
<CyberPanel className="flex-none">
|
|
<div className="mb-3 flex items-center justify-between text-xs text-neon-blue font-bold tracking-widest uppercase border-b border-white/10 pb-2">
|
|
<span>Model Information</span>
|
|
<Box className="w-3 h-3" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="text-[10px] text-slate-500 font-mono mb-1">SELECTED MODEL</div>
|
|
<div className="text-xl font-bold text-white tracking-wide truncate flex items-center gap-2">
|
|
<Cpu className="w-4 h-4 text-neon-blue" />
|
|
{currentRecipe.name}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="bg-white/5 rounded p-2 border border-white/5">
|
|
<div className="text-[9px] text-slate-500 font-mono uppercase">Model ID</div>
|
|
<div className="text-sm font-mono text-neon-blue">{currentRecipe.id}</div>
|
|
</div>
|
|
<div className="bg-white/5 rounded p-2 border border-white/5">
|
|
<div className="text-[9px] text-slate-500 font-mono uppercase">Last Mod</div>
|
|
<div className="text-sm font-mono text-slate-300">{currentRecipe.lastModified}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<div className="flex justify-between text-[10px] font-mono text-slate-400">
|
|
<span>TARGET CYCLE</span>
|
|
<span className="text-neon-green">12.5s</span>
|
|
</div>
|
|
<div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
|
|
<div className="h-full w-[85%] bg-neon-green/50"></div>
|
|
</div>
|
|
|
|
<div className="flex justify-between text-[10px] font-mono text-slate-400 mt-2">
|
|
<span>EST. YIELD</span>
|
|
<span className="text-neon-blue">99.8%</span>
|
|
</div>
|
|
<div className="w-full h-1 bg-slate-800 rounded-full overflow-hidden">
|
|
<div className="h-full w-[99%] bg-neon-blue/50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CyberPanel>
|
|
);
|
|
};
|