feat: sidebar allows recall, rename and display custom names

src/components/Sidebar/Sidebar.tsx

@@ -50,6 +50,7 @@ function AppCombobox({
   onAppRename?: (name: string) => void;
 }) {
   const currentOption = appOptions.find((o) => o.id === selectedAppId) ?? appOptions[0];
+  const canRename = currentOption?.id !== 'f00';
 
   const [open, setOpen] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -91,8 +92,12 @@ function AppCombobox({
 
   function startEditing(e: React.MouseEvent) {
     e.stopPropagation();
+
+    if (!canRename) return;
+
     setEditing(true);
     setOpen(false);
+
     requestAnimationFrame(() => {
       inputRef.current?.focus();
       inputRef.current?.select();
@@ -100,17 +105,30 @@ function AppCombobox({
   }
 
   function commitRename() {
+    if (!canRename) {
+      setInputValue(currentOption?.name ?? appName);
+      setEditing(false);
+      return;
+    }
+
     const trimmed = inputValue.trim();
+
     setEditing(false);
+
     if (!trimmed) {
       setInputValue(currentOption?.name ?? appName);
       return;
     }
+
     const matched = appOptions.find((o) => o.name === trimmed);
+
     if (matched) {
-      if (matched.id !== selectedAppId) onAppChange?.(matched.id);
+      if (matched.id !== selectedAppId) {
+        onAppChange?.(matched.id);
+      }
       return;
     }
+
     if (trimmed !== currentOption?.name) {
       onAppRename?.(trimmed);
     }
@@ -153,7 +171,8 @@ function AppCombobox({
           ref={inputRef}
           className="sidebar-app-input"
           value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
+          maxLength={14}
+          onChange={(e) => setInputValue(e.target.value.slice(0, 14))}
           onBlur={commitRename}
           onKeyDown={handleKeyDown}
           aria-label="Rename app"

src/components/dsp408/ConnectionSection/ConnectionSection.tsx

@@ -57,7 +57,7 @@ function ConnectionPanel({
 
           <div className="connection-panel__spec">
             <dt>Device ID</dt>
-            <dd className="connection-panel__mono" title={dsp.deviceId || undefined}>
+            <dd className="connection-panel__mono" title={String(dsp.deviceId) || undefined}>
               {dsp.deviceId || '—'}
             </dd>
           </div>