agent-loft 0.2.34 → 0.2.35

package/web/css/remote.css

@@ -0,0 +1,350 @@
+/* ---------- 远程控制（views/remote.js、desktop.js） ---------- */
+
+/* 侧栏入口：没权限、没有能用的时藏起来（.side-nav 的 display 会盖过 hidden） */
+.side-nav[hidden] {
+  display: none;
+}
+
+/* 后台连着时右边一个小绿点 */
+.side-nav .live-dot {
+  display: none;
+  width: 7px;
+  height: 7px;
+  margin-left: auto;
+  border-radius: 50%;
+  background: var(--ok);
+}
+
+.side-nav.live .live-dot {
+  display: block;
+}
+
+/* 远程控制页：对话、输入框都藏起来（只是藏，回来时还在），这一页占满顶栏下面 */
+.main.remote-view .messages,
+.main.remote-view .msg-nav,
+.main.remote-view .composer-wrap,
+.main.remote-view .to-bottom,
+.main.remote-view > .term-dock {
+  display: none;
+}
+
+.remote-pane {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin-top: calc(52px + env(safe-area-inset-top));
+}
+
+/* 软键盘盖住的高度（views/remote.js），iOS 上才不为 0 */
+.remote-pane,
+.main > .term-dock {
+  padding-bottom: var(--kb-inset, 0px);
+}
+
+.remote-pane[hidden] {
+  display: none;
+}
+
+/* iOS 主屏 PWA 里顶栏是 sticky 的、本来就占位置 */
+@media (display-mode: standalone) and (max-width: 768px) {
+  .remote-pane {
+    margin-top: 0;
+  }
+}
+
+.remote-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px 6px;
+  min-height: 36px;
+}
+
+.remote-head .grow {
+  flex: 1;
+}
+
+.remote-switch {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--bg-soft);
+}
+
+.remote-switch:empty {
+  display: none;
+}
+
+.remote-tab {
+  display: flex;
+  white-space: nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--fg-soft);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.remote-tab svg {
+  width: 15px;
+  height: 15px;
+}
+
+.remote-tab.on {
+  background: var(--bg);
+  color: var(--fg);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.remote-tools {
+  display: flex;
+  gap: 2px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+/* 手机：切换只留图标，工具栏挤一挤 */
+@media (max-width: 768px) {
+  .remote-head {
+    padding: 0 8px 6px;
+    gap: 4px;
+  }
+
+  .remote-tab {
+    padding: 6px 10px;
+  }
+
+  .remote-tab span {
+    display: none;
+  }
+
+  .desk-tool {
+    width: 30px;
+    flex-shrink: 0;
+  }
+}
+
+.desk-tool {
+  width: 32px;
+  height: 32px;
+}
+
+.desk-tool svg {
+  width: 17px;
+  height: 17px;
+}
+
+.desk-tool.on {
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+
+.desk-tool:disabled {
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.remote-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.remote-body[hidden] {
+  display: none;
+}
+
+/* ---------- 桌面 ---------- */
+
+.desk-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.desk-status[hidden] {
+  display: none;
+}
+
+/* 外框负责裁剪；里面那块交给 noVNC，手机上在它上面做 CSS 放大（views/desktop-touch.js） */
+.desk-viewport {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  background: #111;
+  /* 手势全由页面自己处理：别让浏览器拿去缩放、滚动页面 */
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+
+.desk-screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-origin: 0 0;
+  transition: opacity 0.2s;
+}
+
+/* 触控板模式下的指针（远程那边的指针不画在画面里） */
+.desk-cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 20px;
+  height: 24px;
+  margin: -1px 0 0 -2px;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
+  z-index: 2;
+}
+
+.desk-cursor[hidden] {
+  display: none;
+}
+
+.desk-cursor svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* 长按到了：要开始拖了 */
+.desk-cursor.armed::after,
+.desk-cursor.pressed::after {
+  content: "";
+  position: absolute;
+  left: -12px;
+  top: -12px;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 2px solid var(--accent);
+  background: color-mix(in srgb, var(--accent) 25%, transparent);
+}
+
+/* 放大了：右下角「2.0× · 还原」 */
+.desk-zoom {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  z-index: 3;
+  padding: 5px 10px;
+  border: none;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  font: 12px var(--font);
+}
+
+.desk-zoom[hidden],
+.desk-hint[hidden] {
+  display: none;
+}
+
+.desk-hint {
+  position: absolute;
+  left: 50%;
+  top: 12px;
+  transform: translateX(-50%);
+  z-index: 3;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 13px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.desk-keys .term-key.icon {
+  display: grid;
+  place-items: center;
+}
+
+.desk-keys .term-key.icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.desk-keys .term-key.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+.gesture-sec h4 {
+  margin: 4px 0 8px;
+  font-size: 14px;
+}
+
+.gesture-list {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px 14px;
+  margin-bottom: 14px;
+  font-size: 13px;
+}
+
+.gesture-row {
+  display: contents;
+}
+
+.gesture-row span {
+  color: var(--fg-soft);
+}
+
+.desk-screen.dim {
+  opacity: 0.4;
+}
+
+/* 浏览器全屏时只剩画面 */
+.remote-body:fullscreen .desk-status {
+  display: none;
+}
+
+.desk-clip {
+  width: 100%;
+  margin-top: 10px;
+  font: 13px var(--mono);
+  resize: vertical;
+}
+
+/* 手机上收软键盘输入用：看不见，但要能拿到焦点 */
+.desk-keyinput {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  border: none;
+  padding: 0;
+  resize: none;
+  /* 小于 16px 的输入框，iOS 聚焦时会把整页放大 */
+  font-size: 16px;
+}
+
+/* 设置里按选项显示的一组输入框：照常吃 section 的间距 */
+.field-group {
+  display: contents;
+}
+
+.field-group[hidden] {
+  display: none;
+}

package/web/css/terminal.css

@@ -0,0 +1,243 @@
+/* ---------- 终端（views/terminal.js） ---------- */
+
+/* 底部面板：在输入框下面，高度可拖动 */
+.term-dock {
+  --term-h: 38vh;
+  display: flex;
+  flex-direction: column;
+  height: var(--term-h);
+  min-height: 120px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  position: relative;
+  z-index: 6;
+}
+
+.term-dock[hidden] {
+  display: none;
+}
+
+.term-resizer {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  right: 0;
+  height: 6px;
+  cursor: row-resize;
+  z-index: 1;
+}
+
+body.resizing-v {
+  cursor: row-resize;
+  user-select: none;
+}
+
+.term-head {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px 0;
+  min-height: 36px;
+}
+
+.term-head .grow {
+  flex: 1;
+}
+
+.term-act {
+  width: 30px;
+  height: 30px;
+}
+
+.term-act[hidden] {
+  display: none;
+}
+
+.term-act svg {
+  width: 16px;
+  height: 16px;
+}
+
+.term-tabs {
+  display: flex;
+  gap: 2px;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.term-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 200px;
+  padding: 5px 6px 5px 10px;
+  border-radius: 7px;
+  font-size: 13px;
+  color: var(--fg-soft);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.term-tab:hover {
+  background: var(--bg-hover);
+}
+
+.term-tab.on {
+  background: var(--bg-soft);
+  color: var(--fg);
+}
+
+.term-tab.ended .term-tab-name {
+  text-decoration: line-through;
+  color: var(--fg-faint);
+}
+
+.term-tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.term-tab-x {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.term-tab-x svg {
+  width: 12px;
+  height: 12px;
+}
+
+.term-tab:hover .term-tab-x,
+.term-tab.on .term-tab-x {
+  opacity: 0.7;
+}
+
+/* 触屏上没有悬停：× 一直显示 */
+@media (hover: none) {
+  .term-tab .term-tab-x {
+    opacity: 0.7;
+  }
+}
+
+.term-tab-x:hover {
+  opacity: 1;
+  background: var(--bg-hover);
+}
+
+.term-panes {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  padding: 4px 4px 4px 10px;
+}
+
+.term-pane {
+  position: absolute;
+  inset: 4px 4px 4px 10px;
+}
+
+.term-pane[hidden] {
+  display: none;
+}
+
+.term-pane .xterm {
+  height: 100%;
+}
+
+.term-pane .xterm-viewport {
+  background: transparent !important;
+}
+
+.term-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 100%;
+  padding: 16px;
+  text-align: center;
+}
+
+/* 手机上的快捷键行 */
+.term-keys {
+  display: flex;
+  gap: 6px;
+  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
+  overflow-x: auto;
+  scrollbar-width: none;
+  border-top: 1px solid var(--border);
+}
+
+.term-key {
+  flex-shrink: 0;
+  min-width: 40px;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-soft);
+  color: var(--fg);
+  font: 14px var(--mono);
+}
+
+.term-key.on {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+
+/* 放在远程控制页里：占满那一块，不能拖高度 */
+.term-dock.embedded {
+  flex: 1;
+  height: auto;
+  min-height: 0;
+  border-top: none;
+}
+
+.term-dock.embedded .term-resizer {
+  display: none;
+}
+
+/* 手机上长按选了字：上面一条「复制 / 全选 / 取消」（views/terminal-touch.js） */
+.term-selbar {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 5;
+  display: flex;
+  gap: 1px;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: var(--shadow);
+  background: var(--border);
+}
+
+.term-selbar[hidden] {
+  display: none;
+}
+
+.term-selbar button {
+  padding: 8px 14px;
+  border: none;
+  background: var(--bg-input);
+  color: var(--fg);
+  font: 14px var(--font);
+}
+
+/* 手指翻历史时别让浏览器去滚页面 */
+.term-pane {
+  touch-action: none;
+}

package/web/index.html

@@ -26,6 +26,8 @@
     <link rel="stylesheet" href="/css/schedule.css" />
     <link rel="stylesheet" href="/css/tasks.css" />
     <link rel="stylesheet" href="/css/skills.css" />
+    <link rel="stylesheet" href="/css/terminal.css" />
+    <link rel="stylesheet" href="/css/remote.css" />
     <link rel="stylesheet" href="/css/mobile.css" />
   </head>
   <body>

package/web/lib/dom.js

@@ -46,6 +46,19 @@ export const ICON = {
   trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>',
   folder: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h3.6l2 2.2h7.4A2.5 2.5 0 0 1 21 9.7v7.8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5Z"/><path d="M3 10h18"/></svg>',
   folderOpen: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17.5V7.5A2.5 2.5 0 0 1 5.5 5h3.6l2 2.2h6.4A2.5 2.5 0 0 1 20 9.7V11"/><path d="M3 17.5 5.6 12a2 2 0 0 1 1.8-1.1h13a1 1 0 0 1 .9 1.4l-2.4 6.2a2.2 2.2 0 0 1-2 1.5H5.5A2.5 2.5 0 0 1 3 17.5Z"/></svg>',
+  terminal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="m7 9 3 3-3 3M13 15h4"/></svg>',
+  monitor: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>',
+  keyboard: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M10 13h4M7 16h10"/></svg>',
+  clipboard: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>',
+  command: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>',
+  eye: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>',
+  expand: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>',
+  power: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.8 0"/></svg>',
+  pointer: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3l14 7-6 2-2 6Z"/></svg>',
+  hand: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11V5a1.5 1.5 0 0 1 3 0v5"/><path d="M12 10V4a1.5 1.5 0 0 1 3 0v6"/><path d="M15 10V6a1.5 1.5 0 0 1 3 0v8a7 7 0 0 1-7 7h-.5a6 6 0 0 1-4.6-2.2L3.4 15a1.6 1.6 0 0 1 2.4-2.1L9 15.5V11"/></svg>',
+  help: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9.2a2.6 2.6 0 0 1 5 .9c0 1.7-2.5 2.3-2.5 3.9M12 17h.01"/></svg>',
+  maximize: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>',
+  restore: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"/></svg>',
   laptop: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="11" rx="1.5"/><path d="M2 19h20"/></svg>',
   logo: '<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.5 8.5a8 8 0 0 1 13.2 0 8 8 0 0 1 9 9.4 8 8 0 0 1 0 12.2 8 8 0 0 1-9 9.4 8 8 0 0 1-13.2 0 8 8 0 0 1-9-9.4 8 8 0 0 1 0-12.2 8 8 0 0 1 9-9.4Z"/><path d="m17 18 5 5-5 5M25 30h7"/></svg>',
   feishu:

package/web/lib/ws.js

@@ -98,7 +98,8 @@ export const WS = {
    */
   presence() {
     const visible = document.visibilityState === "visible" && document.hasFocus() && Date.now() - lastInput < IDLE_MS;
-    this.raw({ t: "presence", visible, key: S.current ?? "" });
+    // 在定时任务、远程控制页上：没在看哪条对话（远程控制页不清 S.current，回来时对话还在）
+    this.raw({ t: "presence", visible, key: S.view ? "" : (S.current ?? "") });
   },
 };
 
@@ -241,6 +242,10 @@ function onWsMessage(msg) {
       // 自己的定时任务变了：定时任务页开着的话会去重新拉（views/tasks.js）
       document.dispatchEvent(new Event("aim:tasks"));
       return;
+    case "remote":
+      // 自己的终端开了 / 关了，或者远程控制的权限、设置变了：重新问一下（views/layout.js）
+      document.dispatchEvent(new Event("aim:remote"));
+      return;
     case "skills":
       // 技能变了：设置里的技能页开着就重新拉，@ 补全的缓存作废
       document.dispatchEvent(new Event("aim:skills"));