feat: redesign project AI agent page

apps/web_v1/src/App.css

@@ -1388,6 +1388,174 @@
   text-overflow: ellipsis;
 }
 
+.agent-chat-shell {
+  min-height: calc(100vh - 170px);
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 0;
+  margin: -12px -16px -16px;
+  background: var(--senlin-panel);
+}
+
+.agent-session-list.queue-section.arco-card,
+.agent-chat-panel.queue-section.arco-card {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.agent-session-list.queue-section.arco-card {
+  border-left: 0;
+  background: color-mix(in srgb, var(--senlin-bg) 72%, var(--senlin-panel));
+}
+
+.agent-session-list.queue-section .arco-card-body {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  padding: 18px 20px;
+}
+
+.agent-new-chat.arco-btn {
+  height: 48px;
+  justify-content: center;
+  border: 1px solid var(--senlin-border);
+  border-radius: 999px;
+  background: var(--senlin-panel);
+  color: var(--senlin-text);
+  font-size: 16px;
+  font-weight: 600;
+  box-shadow: 0 4px 14px rgba(29, 33, 41, 0.08);
+}
+
+.agent-new-chat .arco-icon {
+  font-size: 18px;
+}
+
+.agent-session-groups {
+  display: grid;
+  gap: 28px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.agent-session-groups:hover {
+  scrollbar-width: thin;
+}
+
+.agent-session-group {
+  display: grid;
+  gap: 12px;
+}
+
+.agent-session-group > .arco-typography {
+  font-size: 14px;
+}
+
+.agent-session {
+  width: 100%;
+  overflow: hidden;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--senlin-text);
+  padding: 5px 0;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1.55;
+}
+
+.agent-session:hover,
+.agent-session.active {
+  color: var(--senlin-primary);
+}
+
+.agent-chat-panel.queue-section .arco-card-body {
+  position: relative;
+  min-height: calc(100vh - 170px);
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  padding: 0;
+}
+
+.agent-chat-main {
+  display: grid;
+  place-items: center;
+  padding: 80px 32px 190px;
+}
+
+.agent-chat-main h2 {
+  margin: 0;
+  color: var(--senlin-text);
+  font-size: 28px;
+  font-weight: 800;
+}
+
+.agent-composer {
+  width: min(860px, calc(100% - 80px));
+  display: grid;
+  gap: 12px;
+  justify-self: center;
+  margin: 0 0 28px;
+  border: 1px solid var(--senlin-border);
+  border-radius: 24px;
+  background: var(--senlin-panel);
+  padding: 18px 16px 14px;
+  box-shadow: 0 16px 40px rgba(29, 33, 41, 0.08);
+}
+
+.agent-composer .arco-textarea-wrapper {
+  border: 0;
+  background: transparent;
+  padding: 0 8px;
+}
+
+.agent-composer textarea {
+  color: var(--senlin-text);
+  font-size: 18px;
+}
+
+.agent-composer textarea::placeholder {
+  color: #a9b0bc;
+}
+
+.agent-composer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.agent-model-chip.arco-btn {
+  height: 36px;
+  border-color: color-mix(in srgb, var(--senlin-primary) 32%, var(--senlin-border));
+  border-radius: 999px;
+  background: var(--senlin-soft-blue);
+  color: var(--senlin-primary);
+  font-weight: 700;
+}
+
+.agent-send-button.arco-btn {
+  width: 38px;
+  height: 38px;
+  background: #aebeff;
+}
+
+.theme-dark .agent-session-list.queue-section.arco-card {
+  background: #1f1f1f;
+}
+
+.theme-dark .agent-composer,
+.theme-dark .agent-new-chat.arco-btn {
+  box-shadow: 0 16px 40px rgb(0 0 0 / 22%);
+}
+
 .reply-box,
 .chat-input {
   display: grid;