@olares/lares-mobile 0.15.35 → 0.15.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olares/lares-mobile",
-  "version": "0.15.35",
+  "version": "0.15.36",
   "description": "Lares chat component for LarePass",
   "type": "module",
   "repository": {
@@ -28,7 +28,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@olares/lares-core": "0.15.35",
+    "@olares/lares-core": "0.15.36",
     "markdown-it": "^14.3.0"
   }
 }

package/src/App.vue

@@ -92,6 +92,7 @@
       @hold-start="onHoldStart"
       @voice-action="onVoiceAction"
       @close-model="modelSheet = false"
+      @choose-permission="choosePermission"
       @choose-model="chooseModel"
       @close-effort="effortSheet = false"
       @choose-effort="chooseEffort"

package/src/chat/ChatBar.vue

@@ -89,7 +89,7 @@ export default {
   gap: 8px;
   flex-shrink: 0;
   min-height: 56px;
-  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
+  padding: 8px 12px;
 }
 
 .lares-bar__icon-btn {

package/src/chat/Composer.vue

@@ -459,7 +459,7 @@ export default {
   flex-direction: column;
   gap: 6px;
   flex-shrink: 0;
-  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  padding: 8px 16px 12px;
 }
 
 .lares-composer--hero {

package/src/mobile/MobileDirectorySheet.vue

@@ -146,7 +146,7 @@ export default {
 .mobile-directory__status,
 .mobile-directory__error { margin:16px 8px; color:var(--q-ink-3); font-size:15px; text-align:center; }
 .mobile-directory__error { color:var(--q-orange-default); }
-.mobile-directory__footer { display:flex; flex-direction:column; gap:10px; padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--q-separator); }
+.mobile-directory__footer { display:flex; flex-direction:column; gap:10px; padding:12px 20px; border-top:1px solid var(--q-separator); }
 .mobile-directory__path { width:100%; margin:0; overflow:hidden; color:var(--q-ink-3); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
 .mobile-directory__tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
 .mobile-directory__new-folder { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--q-separator); border-radius:999px; padding:0 12px; min-height:36px; background:transparent; color:var(--q-ink-2); font:inherit; font-size:14px; }

package/src/mobile/MobileNewSession.vue

@@ -85,7 +85,7 @@ export default {
   display: flex;
   width: 100%;
   flex-direction: column;
-  padding: 8px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  padding: 8px 16px 12px;
 }
 
 .mobile-new-session__composer {

package/src/mobile/MobileShell.vue

@@ -212,6 +212,33 @@
           @click="$emit('choose-effort', row.id)"
         />
       </template>
+      <template v-if="state.permissionRows.length">
+        <p class="lares-shell__heading">{{ t("permission.title") }}</p>
+        <LaresSettingRow
+          v-for="row in state.permissionRows"
+          :key="row.value"
+          :label="row.label"
+          :hint="row.hint"
+          :checked="row.value === state.permissionCurrent"
+          :disabled="state.permissionBusy"
+          @click="pickPermission(row.value)"
+        />
+        <div v-if="accessConfirm" class="lares-shell__access">
+          <p>{{ t("access.confirm.description") }}</p>
+          <label>
+            <input v-model="accessAcknowledged" type="checkbox" />
+            <span>{{ t("access.confirm.acknowledge") }}</span>
+          </label>
+          <div class="lares-shell__access-actions">
+            <button type="button" @click="cancelAccess">{{ t("access.confirm.cancel") }}</button>
+            <button
+              type="button"
+              :disabled="!accessAcknowledged || state.permissionBusy"
+              @click="confirmAccess"
+            >{{ t("access.confirm.enable") }}</button>
+          </div>
+        </div>
+      </template>
       <template #footer>
         <button type="button" class="lares-shell__refresh" @click="state.refreshModels()">{{ t('agent.refresh') }}</button>
       </template>
@@ -280,7 +307,7 @@ export default {
     "history", "create", "toggle-speak", "close-history", "pick-session", "retry", "open-file",
     "answer", "answer-approval", "update-draft", "send", "queue-action", "open-model", "open-effort", "files",
     "voice", "voice-action", "hold-start", "hold-end", "close-model", "choose-model",
-    "close-effort", "choose-effort", "close-preview",
+    "close-effort", "choose-effort", "choose-permission", "close-preview",
     "open-commands", "open-references", "pick-command", "remove-image",
     "refresh-workspaces", "browse-workspaces", "browse-directory",
     "close-directory", "choose-directory", "create-folder", "toggle-hidden",
@@ -289,7 +316,12 @@ export default {
     "dismiss-speak",
   ],
   data() {
-    return { composerMode: "text" };
+    return { composerMode: "text", accessConfirm: false, accessAcknowledged: false };
+  },
+  watch: {
+    "state.modelSheet"(open) {
+      if (!open) this.cancelAccess();
+    },
   },
   computed: {
     newSessionHero() {
@@ -307,6 +339,25 @@ export default {
     },
   },
   methods: {
+    pickPermission(value) {
+      if (!value || value === this.state.permissionCurrent || this.state.permissionBusy) return;
+      if (value === "danger-full-access") {
+        this.accessAcknowledged = false;
+        this.accessConfirm = true;
+        return;
+      }
+      this.cancelAccess();
+      this.$emit("choose-permission", value);
+    },
+    cancelAccess() {
+      this.accessConfirm = false;
+      this.accessAcknowledged = false;
+    },
+    confirmAccess() {
+      if (!this.accessAcknowledged || this.state.permissionBusy) return;
+      this.cancelAccess();
+      this.$emit("choose-permission", "danger-full-access");
+    },
     forwardAnswer(label, row) {
       this.$emit("answer", label, row);
     },
@@ -349,7 +400,7 @@ export default {
 
 .lares-mobile-shell__approval {
   flex: none;
-  margin: 0 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  margin: 0 16px 12px;
 }
 
 .lares-shell__status,
@@ -434,4 +485,60 @@ export default {
   font-weight: 500;
   line-height: 18px;
 }
+
+.lares-shell__access {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 8px 16px 16px;
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--q-background-3);
+  color: var(--q-ink-2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.lares-shell__access p {
+  margin: 0;
+}
+
+.lares-shell__access label {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.lares-shell__access input {
+  width: 18px;
+  height: 18px;
+  flex: none;
+  margin: 1px 0 0;
+}
+
+.lares-shell__access-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.lares-shell__access-actions button {
+  border: 0;
+  border-radius: 8px;
+  padding: 8px 12px;
+  background: transparent;
+  color: var(--q-ink-2);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lares-shell__access-actions button:last-child {
+  background: var(--q-blue-alpha);
+  color: var(--q-blue-default);
+}
+
+.lares-shell__access-actions button:disabled {
+  opacity: 0.45;
+}
 </style>

package/src/settings/SettingRow.vue

@@ -6,7 +6,10 @@
     :disabled="disabled"
     @click="$emit('click')"
   >
-    <span class="lares-set-row__label">{{ label }}</span>
+    <span class="lares-set-row__copy">
+      <span class="lares-set-row__label">{{ label }}</span>
+      <span v-if="hint" class="lares-set-row__hint">{{ hint }}</span>
+    </span>
     <span class="lares-set-row__side">
       <span v-if="value" class="lares-set-row__value">{{ value }}</span>
       <svg v-if="chevron" class="lares-set-row__icon" viewBox="0 0 24 24" aria-hidden="true">
@@ -29,6 +32,7 @@ export default {
   name: "LaresSettingRow",
   props: {
     label: { type: String, required: true },
+    hint: { type: String, default: "" },
     value: { type: String, default: "" },
     chevron: { type: Boolean, default: false },
     checked: { type: Boolean, default: false },
@@ -73,14 +77,28 @@ export default {
   background: var(--q-background-hover);
 }
 
-.lares-set-row__label {
+.lares-set-row__copy {
+  display: flex;
   min-width: 0;
   flex: 1;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.lares-set-row__label {
+  min-width: 0;
   font-size: 16px;
   line-height: 22px;
   word-break: break-word;
 }
 
+.lares-set-row__hint {
+  color: var(--q-ink-3);
+  font-size: 13px;
+  line-height: 18px;
+  word-break: break-word;
+}
+
 .lares-set-row__side {
   display: flex;
   flex-shrink: 0;