Fix pane/layout restore and empty panel interactions

Author: vipmax

anycode/App.tsx

@@ -9,6 +9,8 @@
     text-align: center;
     padding: 16px 14px;
     gap: 10px;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .acp-pane-empty-actions {
@@ -22,13 +24,11 @@
 
 .acp-pane-empty-action {
     background: rgba(255, 255, 255, 0.03);
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    color: var(--text-color, #cfd3d8);
     cursor: pointer;
     font-size: 12px;
     font-weight: 450;
     padding: 7px 12px;
-    border-radius: 12px;
+    border-radius: 8px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s;
     line-height: 1.1;
     max-width: 100%;
@@ -47,7 +47,6 @@
     width: min(720px, 100%);
     margin: 0 auto;
     padding: 10px 0 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .acp-pane-opened-agents-title {
@@ -107,38 +106,37 @@
     width: min(720px, 100%);
     margin: 0 auto;
     padding: 10px 0 0;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .acp-pane-start-agents-title {
+    color: #8f8f8f;
+    text-transform: uppercase;
     font-size: 12px;
-    color: #c8ccd2;
+    letter-spacing: 0.08em;
     margin-bottom: 6px;
-    letter-spacing: 0.01em;
-    font-weight: 500;
 }
 
 .acp-pane-settings-btn {
-    border: 1px solid rgba(149, 191, 255, 0.35);
-    background: rgba(149, 191, 255, 0.08);
-    color: #b8d6ff;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.03);
+    color: var(--text-color, #cfd3d8);
     font-size: 12px;
     line-height: 1;
     padding: 7px 12px;
     border-radius: 10px;
     cursor: pointer;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
 }
 
 .acp-pane-settings-btn:hover {
-    color: #d3e6ff;
-    border-color: rgba(149, 191, 255, 0.55);
-    background: rgba(149, 191, 255, 0.16);
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.22);
+    color: #ffffff;
 }
 
 .acp-pane-settings-wrap {
     margin-top: 10px;
     padding-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.08);
     display: flex;
     justify-content: center;
 }

anycode/components/agent/AcpEmptyPane.css

@@ -1,6 +1,18 @@
 .layout {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5px;
+    min-width: 0;
+    min-height: 0;
+}
+
+.layout-main {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .layout-root {
@@ -301,7 +313,12 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     background: var(--background-color, #242424);
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .layout-panel-picker-title {
@@ -312,44 +329,41 @@
 }
 
 .layout-panel-picker-list {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
     gap: 8px;
+    width: min(720px, 100%);
 }
 
 .layout-panel-picker-item {
-    border: 1px solid #4a4a4a;
     background: #2a2a2a;
-    color: #cfcfcf;
     border-radius: 8px;
     padding: 8px 10px;
     text-align: left;
     cursor: pointer;
     font-size: 12px;
+    flex: 0 0 auto;
+    max-width: 100%;
+    white-space: nowrap;
 }
 
 .layout-panel-picker-item:hover {
     color: #ffffff;
     border-color: #666;
 }
 
-.layout-dock-panel--toolbar {
-    border-top: none;
-    border-radius: 0 0 8px 8px;
-}
-
-.app-container.toolbar-header-visible .layout-dock-panel--toolbar {
-    border-top: none;
-    border-radius: 0 0 8px 8px;
-}
-
-.app-container.toolbar-header-compact .layout-dock-panel--toolbar {
-    border-top: 1px solid #4a4a4a;
+.layout-toolbar {
+    flex: 0 0 44px;
+    min-height: 44px;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid #4a4a4a;
     border-radius: 8px;
-}
-
-.app-container.toolbar-header-compact .layout .dv-groupview:has(> .dv-content-container .layout-dock-panel--toolbar) > .dv-tabs-and-actions-container {
-    display: none !important;
+    background: var(--background-color, #242424);
+    box-sizing: border-box;
 }
 
 .dock-split {