blindxfish/devplacepy
1
0
Fork 0
forked from retoor/devplacepy
Code Pull Requests Activity

feat: enforce hard test-tier requirement across all DevPlace workflow agents and feature-builder docs

Browse Source 
Update the feature-builder agent prompt, test-maintainer agent, and all four workflow JS files (devii-tool, endpoint, feature, job-service) to codify the DevPlace test standard as a non-optional project requirement: one test file per endpoint, directory tree mirroring the URL/source path, split into three tiers (unit, api, e2e). Add explicit Test phases to devii-tool, endpoint, feature, and job-service workflows, and embed tier-specific test instructions (path mapping, fixture choice, coverage scope) directly in each workflow's meta description and TESTS constant.
This commit is contained in:
retoor
2026-06-15 12:10:14 +00:00
parent 3c7527988e
commit e1874f9b6a
71 changed files with 2198 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devplacepy/static/css/base.css
+1 -1
View File
@@ -900,7 +900,7 @@ body:has(.page-messages) {
}
.page:has(.page-messages) {
padding-top: 0;
padding-top: var(--nav-height);
padding-bottom: 0;
flex: 1 1 auto;
min-height: 0;
devplacepy/static/css/devii.css
+15
View File
@@ -143,6 +143,14 @@ devii-terminal.devii-state-fullscreen .devii-window {
resize: none;
}
/* On-screen keyboard inset: devii-terminal.js sets inline top/height from
visualViewport so the window ends exactly at the keyboard top and the
input row stays reachable. Drop the fixed bottom/height so the inline wins. */
devii-terminal.devii-keyboard-visible.devii-state-fullscreen .devii-window {
bottom: auto;
transition: none;
}
/* Title bar */
devii-terminal .devii-titlebar {
display: flex;
@@ -493,6 +501,13 @@ devii-terminal.devii-mobile .devii-winctl button[data-win="fullscreen"] {
height: 30px;
font-size: 16px;
}
devii-terminal .devii-inputrow {
min-height: 44px;
}
devii-terminal .devii-input {
min-height: 44px;
font-size: 16px;
}
}
/* Devii client-side tutorial overlays (attached to document.body) */
devplacepy/static/css/docs.css
+4
View File
@@ -496,6 +496,10 @@ textarea.param-input {
.code-copy-btn {
opacity: 1;
}
.content-copy-btn {
opacity: 1;
}
}
/* ---- Unified code blocks: highlight + line numbers + copy (widget tabs, response, prose) ---- */
devplacepy/static/css/floating-window.css
+9
View File
@@ -95,6 +95,15 @@
resize: none;
}
/* On-screen keyboard inset: visualViewport sets inline top/height from
FloatingWindow.js so the window shrinks above the keyboard instead of
being pushed off-screen. Drop the fixed bottom/height so the inline wins. */
.fw-host.fw-state-fullscreen.fw-keyboard-visible .fw-window,
.fw-host.fw-state-maximized.fw-keyboard-visible .fw-window {
bottom: auto;
transition: none;
}
.fw-host .fw-titlebar {
display: flex;
align-items: center;
devplacepy/static/css/issues.css
+6
View File
@@ -14,6 +14,12 @@
font-size: 1.5rem;
font-weight: 700;
}
.issues-header-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.issues-filters {
display: flex;
gap: 0.5rem;
devplacepy/static/css/landing.css
+62 -9
View File
@@ -399,20 +399,20 @@
}
}
.landing-bots-intro {
.landing-help-intro {
max-width: 760px;
margin: 0 0 1.5rem;
color: var(--text-secondary);
line-height: 1.6;
}
.landing-bots-grid {
.landing-help-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.landing-bot-card {
.landing-help-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
@@ -422,34 +422,87 @@
gap: 0.5rem;
}
.landing-bot-card:hover {
.landing-help-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.landing-bot-card-lead {
.landing-help-card-lead {
border-color: var(--accent);
}
.landing-bot-icon {
.landing-help-icon {
font-size: 1.75rem;
}
.landing-bot-card h3 {
.landing-help-card h3 {
margin: 0;
color: var(--text-primary);
font-size: 1.05rem;
}
.landing-bot-card p {
.landing-help-card p {
margin: 0;
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.5;
}
.landing-help-link {
margin-top: auto;
color: var(--accent);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.landing-help-link:hover {
text-decoration: underline;
}
.landing-help-links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: auto;
}
.landing-help-links a {
color: var(--accent);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.landing-help-links a:hover {
text-decoration: underline;
}
.landing-help-cta {
margin-top: auto;
align-self: flex-start;
background: var(--accent);
color: var(--white);
border: none;
border-radius: var(--radius-lg);
padding: 0.6rem 1.1rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s ease;
}
.landing-help-cta:hover {
filter: brightness(1.08);
}
@media (max-width: 480px) {
.landing-bots-grid {
.landing-help-grid {
grid-template-columns: 1fr;
}
.landing-help-cta {
width: 100%;
text-align: center;
}
}
devplacepy/static/css/markdown.css
+30
View File
@@ -120,6 +120,36 @@
overflow-x: auto;
}
dp-content.rendered-content {
position: relative;
}
.content-copy-btn {
position: absolute;
top: 0.25rem;
right: 0.25rem;
z-index: 2;
padding: 0.2rem 0.6rem;
font-size: 0.75rem;
color: var(--text-secondary);
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
}
dp-content:hover .content-copy-btn,
.content-copy-btn:focus {
opacity: 1;
}
.content-copy-btn:hover {
color: var(--white);
border-color: var(--accent);
}
.embed-youtube {
position: relative;
width: 100%;
devplacepy/static/css/messages.css
+22
View File
@@ -5,6 +5,7 @@
min-height: 0;
display: flex;
width: 100%;
--kb-inset: 0px;
}
.messages-layout {
@@ -292,11 +293,16 @@
.messages-input-area {
padding: 0.75rem 1rem;
padding-bottom: calc(0.75rem + var(--kb-inset) + env(safe-area-inset-bottom));
padding-left: calc(1rem + env(safe-area-inset-left));
padding-right: calc(1rem + env(safe-area-inset-right));
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
min-height: 56px;
background: var(--bg-card);
}
.messages-input-area input[type="text"] {
@@ -403,13 +409,23 @@
.messages-layout {
grid-template-columns: 1fr;
min-height: 0;
height: 100%;
border-radius: 0;
border-left: none;
border-right: none;
}
.messages-list {
display: flex;
min-height: 0;
height: 100%;
}
.messages-list.hide {
display: none;
}
.messages-main {
min-height: 0;
height: 100%;
}
.messages-main.hide {
display: none;
}
@@ -418,6 +434,9 @@
align-items: center;
justify-content: center;
}
.messages-input-area input[type="text"] {
font-size: 16px;
}
}
@media (max-width: 360px) {
@@ -427,6 +446,9 @@
.messages-input-area {
padding: 0.5rem 0.75rem;
padding-bottom: calc(0.5rem + var(--kb-inset) + env(safe-area-inset-bottom));
padding-left: calc(0.75rem + env(safe-area-inset-left));
padding-right: calc(0.75rem + env(safe-area-inset-right));
}
.message-bubble {
devplacepy/static/css/planning.css
+82
View File
@@ -0,0 +1,82 @@
/* retoor <retoor@molodetz.nl> */
.planning-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.planning-subtitle {
margin: 0.25rem 0 0;
color: var(--text-secondary);
font-size: 0.9rem;
}
.planning-status {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
margin: 1.5rem 0;
color: var(--text-secondary);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.planning-spinner {
width: 1.1rem;
height: 1.1rem;
border: 2px solid var(--border-light);
border-top-color: var(--accent);
border-radius: 50%;
animation: planning-spin 0.8s linear infinite;
}
@keyframes planning-spin {
to {
transform: rotate(360deg);
}
}
.planning-result {
margin: 1.5rem 0;
}
.planning-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.planning-hint {
color: var(--text-secondary);
font-size: 0.85rem;
}
.planning-report {
display: block;
padding: 1.5rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.planning-empty {
margin: 1.5rem 0;
}
@media (max-width: 600px) {
.planning-header {
flex-direction: column;
align-items: stretch;
}
.planning-report {
padding: 1rem;
}
}
devplacepy/static/js/Application.js
+2
View File
@@ -27,6 +27,7 @@ import { DeviiTerminal } from "./DeviiTerminal.js";
import { ZipDownloader } from "./ZipDownloader.js";
import { ProjectForker } from "./ProjectForker.js";
import { IssueReporter } from "./IssueReporter.js";
import { PlanningGenerator } from "./PlanningGenerator.js";
import { MediaGallery } from "./MediaGallery.js";
import WindowManager from "./components/WindowManager.js";
import { ContainerTerminalManager } from "./ContainerTerminalManager.js";
@@ -67,6 +68,7 @@ class Application {
this.zipDownloader = new ZipDownloader();
this.projectForker = new ProjectForker();
this.issueReporter = new IssueReporter();
this.planningGenerator = new PlanningGenerator();
this.mediaGallery = new MediaGallery();
this.pubsub = new PubSubClient();
}
devplacepy/static/js/CommentManager.js
+119
View File
@@ -1,10 +1,45 @@
// retoor <retoor@molodetz.nl>
import { Http } from "./Http.js";
import { contentRenderer } from "./ContentRenderer.js";
export class CommentManager {
constructor() {
this.initCommentReply();
this.initCommentEdit();
this.initCommentDelete();
}
initCommentDelete() {
document.addEventListener("submit", (e) => {
const form = e.target.closest(".comment-delete-form");
if (!form) return;
e.preventDefault();
this.submitDelete(form);
});
}
async submitDelete(form) {
const wrapper = form.closest(".comment");
if (!wrapper) return;
const button = form.querySelector("button[type='submit']");
if (button) button.disabled = true;
const anchor = wrapper.previousElementSibling
&& wrapper.previousElementSibling.classList.contains("comment")
? wrapper.previousElementSibling
: wrapper.parentElement.closest(".comment, .comments-section, .post-card");
const anchorTop = anchor
? anchor.getBoundingClientRect().top + window.scrollY
: wrapper.getBoundingClientRect().top + window.scrollY;
try {
await Http.send(form.action);
wrapper.remove();
window.scrollTo({ top: Math.max(anchorTop, 0) });
} catch (err) {
if (button) button.disabled = false;
}
}
initCommentReply() {
@@ -16,6 +51,90 @@ export class CommentManager {
});
}
initCommentEdit() {
document.addEventListener("click", (e) => {
const btn = e.target.closest("[data-action='edit']");
if (!btn) return;
e.preventDefault();
this.toggleEditForm(btn);
});
}
toggleEditForm(btn) {
const body = btn.closest(".comment-body");
if (!body) return;
const text = body.querySelector(":scope > .comment-text");
if (!text) return;
const existing = body.querySelector(":scope > .comment-edit-form");
if (existing) {
existing.remove();
text.style.display = "";
return;
}
const form = document.createElement("form");
form.className = "comment-form comment-edit-form";
form.method = "POST";
form.action = btn.dataset.editUrl;
const textarea = document.createElement("textarea");
textarea.name = "content";
textarea.className = "emoji-picker-target";
textarea.value = text.dataset.raw || text.textContent;
textarea.rows = 3;
form.appendChild(textarea);
const actions = document.createElement("div");
actions.className = "comment-form-actions";
const save = document.createElement("button");
save.type = "submit";
save.className = "btn btn-primary btn-sm";
save.textContent = "Save";
const cancel = document.createElement("button");
cancel.type = "button";
cancel.className = "comment-action-btn";
cancel.textContent = "Cancel";
cancel.addEventListener("click", () => {
form.remove();
text.style.display = "";
});
actions.appendChild(save);
actions.appendChild(cancel);
form.appendChild(actions);
form.addEventListener("submit", (e) => {
e.preventDefault();
this.submitEdit(form, text);
});
text.style.display = "none";
text.insertAdjacentElement("afterend", form);
const enhancer = window.app && window.app.content;
if (enhancer) enhancer.initEmojiPickers();
textarea.focus();
}
async submitEdit(form, text) {
const save = form.querySelector("button[type='submit']");
if (save) save.disabled = true;
const content = form.querySelector("textarea").value;
try {
const result = await Http.send(form.action, { content });
text.dataset.raw = result.content;
text.textContent = result.content;
contentRenderer.applyTo(text);
text.querySelectorAll("img:not(.avatar-img)").forEach((img) => {
img.dataset.lightbox = "";
});
form.remove();
text.style.display = "";
} catch (err) {
if (save) save.disabled = false;
}
}
toggleReplyForm(btn) {
const comment = btn.closest(".comment");
if (!comment) return;
devplacepy/static/js/ContentRenderer.js
+5
View File
@@ -43,8 +43,13 @@ export class ContentRenderer {
});
}
normalizeDashes(text) {
return text.replace(/\u2014/g, "-");
}
render(text) {
if (!text) return "";
text = this.normalizeDashes(text);
text = this.replaceShortcodes(text);
let html;
devplacepy/static/js/MessagesLayout.js
+24
View File
@@ -38,9 +38,33 @@ export class MessagesLayout {
this.connect();
this.bindForm();
this.bindTyping();
this.bindViewport();
this.markRead();
}
bindViewport() {
const viewport = window.visualViewport;
if (!viewport || !this.input) {
return;
}
const applyInset = () => {
const inset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
this.layout.style.setProperty("--kb-inset", `${Math.round(inset)}px`);
this.scrollThreadToEnd();
};
viewport.addEventListener("resize", applyInset);
viewport.addEventListener("scroll", applyInset);
this.input.addEventListener("focus", () => {
window.setTimeout(() => {
this.scrollThreadToEnd();
this.input.scrollIntoView({ block: "end" });
}, 250);
});
this.input.addEventListener("blur", () => {
this.layout.style.setProperty("--kb-inset", "0px");
});
}
connect() {
this.socket = new MessagesSocket({
onReady: () => this.onReady(),
devplacepy/static/js/PlanningGenerator.js
+87
View File
@@ -0,0 +1,87 @@
// retoor <retoor@molodetz.nl>
import { Http } from "./Http.js";
import { JobPoller } from "./JobPoller.js";
export class PlanningGenerator {
constructor() {
this.active = false;
document.addEventListener("click", (event) => {
const button = event.target.closest("[data-planning-generate]");
if (!button) return;
event.preventDefault();
this.generate(button);
});
}
elements() {
return {
status: document.querySelector("[data-planning-status]"),
result: document.querySelector("[data-planning-result]"),
empty: document.querySelector("[data-planning-empty]"),
report: document.querySelector("[data-planning-report]"),
download: document.querySelector("[data-planning-download]"),
};
}
async generate(button) {
if (this.active) return;
this.active = true;
button.disabled = true;
button.classList.add("is-loading");
const ui = this.elements();
if (ui.empty) ui.empty.hidden = true;
if (ui.result) ui.result.hidden = true;
if (ui.status) ui.status.hidden = false;
try {
const action = button.dataset.action || "/issues/planning";
const job = await Http.sendForm(action, {});
await this.poll(job.status_url, ui);
} catch (error) {
window.app.toast.show("Could not start the planning report", { type: "error" });
if (ui.status) ui.status.hidden = true;
if (ui.empty) ui.empty.hidden = false;
} finally {
this.active = false;
button.disabled = false;
button.classList.remove("is-loading");
}
}
poll(statusUrl, ui) {
return JobPoller.run(statusUrl, {
onDone: (status) => {
if (ui.status) ui.status.hidden = true;
this.renderReport(status, ui);
if (ui.result) ui.result.hidden = false;
window.app.toast.show("Planning report ready", { type: "success" });
},
onFailed: (status) => {
if (ui.status) ui.status.hidden = true;
if (ui.empty) ui.empty.hidden = false;
window.app.toast.show(
"Planning failed: " + (status.error || "unknown error"),
{ type: "error" },
);
},
onTimeout: () => {
if (ui.status) {
ui.status.querySelector(".planning-status-text").textContent =
"Still generating, this is taking longer than expected...";
}
},
});
}
renderReport(status, ui) {
if (ui.download && status.download_url) {
ui.download.href = status.download_url;
}
if (!ui.report) return;
const fresh = document.createElement("dp-content");
fresh.className = ui.report.className;
fresh.setAttribute("data-planning-report", "");
fresh.textContent = status.markdown || "";
ui.report.replaceWith(fresh);
}
}
devplacepy/static/js/components/AppContent.js
+27
View File
@@ -13,11 +13,38 @@ export class AppContent extends Component {
return;
}
this._rendered = true;
this._source = this.textContent;
this.classList.add("rendered-content");
contentRenderer.applyTo(this);
if (typeof hljs !== "undefined") {
this.querySelectorAll("pre code").forEach((block) => hljs.highlightElement(block));
}
if (!this.hasAttribute("no-copy")) {
this.addCopyButton();
}
}
addCopyButton() {
if (!this._source || !this._source.trim()) {
return;
}
if (this.querySelector(":scope > .content-copy-btn")) {
return;
}
const btn = document.createElement("button");
btn.type = "button";
btn.className = "content-copy-btn";
btn.textContent = "Copy";
btn.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(this._source);
btn.textContent = "Copied";
} catch {
btn.textContent = "Failed";
}
setTimeout(() => { btn.textContent = "Copy"; }, 1500);
});
this.appendChild(btn);
}
}
devplacepy/static/js/components/AppContextMenu.js
+16 -5
View File
@@ -26,7 +26,13 @@ export class AppContextMenu extends Component {
if (!this.menu.contains(e.target)) this.close();
});
document.addEventListener("scroll", () => this.close(), true);
window.addEventListener("resize", () => this.close());
this._lastWidth = window.innerWidth;
window.addEventListener("resize", () => {
if (window.innerWidth !== this._lastWidth) {
this._lastWidth = window.innerWidth;
this.close();
}
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") this.close();
});
@@ -67,12 +73,17 @@ export class AppContextMenu extends Component {
this.render(items);
this.menu.classList.add("visible");
const rect = this.menu.getBoundingClientRect();
const vv = window.visualViewport;
const safeW = vv ? vv.width : window.innerWidth;
const safeH = vv ? vv.height : window.innerHeight;
const offX = vv ? vv.offsetLeft : 0;
const offY = vv ? vv.offsetTop : 0;
let left = x;
let top = y;
if (left + rect.width > window.innerWidth) left = window.innerWidth - rect.width - 8;
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 8;
this.menu.style.left = Math.max(8, left) + "px";
this.menu.style.top = Math.max(8, top) + "px";
if (left + rect.width > offX + safeW) left = offX + safeW - rect.width - 8;
if (top + rect.height > offY + safeH) top = offY + safeH - rect.height - 8;
this.menu.style.left = Math.max(offX + 8, left) + "px";
this.menu.style.top = Math.max(offY + 8, top) + "px";
}
close() {
devplacepy/static/js/components/ContainerTerminal.js
+1
View File
@@ -239,6 +239,7 @@ export default class ContainerTerminalElement extends FloatingWindow {
return;
}
this._sendResize();
if (this.term.scrollToBottom) this.term.scrollToBottom();
}
_onShow() {
devplacepy/static/js/components/FloatingWindow.js
+46 -9
View File
@@ -5,6 +5,7 @@ import { assetUrl } from "../assetVersion.js";
const FW_CSS_ID = "floating-window-css";
const MOBILE_QUERY = "(max-width: 640px)";
const KEYBOARD_INSET_THRESHOLD = 120;
export default class FloatingWindow extends Component {
constructor() {
@@ -14,6 +15,18 @@ export default class FloatingWindow extends Component {
this._drag = null;
this._rafResize = null;
this._mobile = window.matchMedia(MOBILE_QUERY);
this._vv = window.visualViewport || null;
}
get _safeViewport() {
return {
width: window.innerWidth,
height: this._vv ? this._vv.height : window.innerHeight,
};
}
get _keyboardVisible() {
return !!(this._vv && window.innerHeight - this._vv.height > KEYBOARD_INSET_THRESHOLD);
}
get windowKey() {
@@ -52,6 +65,11 @@ export default class FloatingWindow extends Component {
this._scheduleResize();
};
window.addEventListener("resize", this._winResize);
this._vvHandler = () => this._onVisualViewport();
if (this._vv) {
this._vv.addEventListener("resize", this._vvHandler);
this._vv.addEventListener("scroll", this._vvHandler);
}
const saved = this._loadGeometry();
if (saved) {
this.geometry = saved;
@@ -66,6 +84,10 @@ export default class FloatingWindow extends Component {
disconnectedCallback() {
window.removeEventListener("resize", this._winResize);
this._mobile.removeEventListener("change", this._viewportHandler);
if (this._vv && this._vvHandler) {
this._vv.removeEventListener("resize", this._vvHandler);
this._vv.removeEventListener("scroll", this._vvHandler);
}
if (this._ro) this._ro.disconnect();
if (globalThis.app && globalThis.app.windows) globalThis.app.windows.unregister(this);
this._onHide();
@@ -155,7 +177,7 @@ export default class FloatingWindow extends Component {
_atSize([width, height]) {
if (!this.geometry) return false;
const w = Math.max(320, Math.min(width, window.innerWidth - 16));
const h = Math.max(220, Math.min(height, window.innerHeight - 16));
const h = Math.max(220, Math.min(height, this._safeViewport.height - 16));
return Math.abs(this.geometry.width - w) <= 4 && Math.abs(this.geometry.height - h) <= 4;
}
@@ -204,13 +226,14 @@ export default class FloatingWindow extends Component {
}
_presetGeometry(width, height) {
const safeHeight = this._safeViewport.height;
const w = Math.max(320, Math.min(width, window.innerWidth - 16));
const h = Math.max(220, Math.min(height, window.innerHeight - 16));
const h = Math.max(220, Math.min(height, safeHeight - 16));
this.geometry = {
width: w,
height: h,
left: Math.max(8, Math.round((window.innerWidth - w) / 2)),
top: Math.max(8, Math.round((window.innerHeight - h) / 2)),
top: Math.max(8, Math.round((safeHeight - h) / 2)),
};
this._setState("normal");
this._persistGeometry();
@@ -246,13 +269,14 @@ export default class FloatingWindow extends Component {
}
_defaultGeometry() {
const safeHeight = this._safeViewport.height;
const width = Math.min(820, Math.round(window.innerWidth * 0.94));
const height = Math.min(560, Math.round(window.innerHeight * 0.82));
const height = Math.min(560, Math.round(safeHeight * 0.82));
return {
width,
height,
left: Math.max(12, Math.round((window.innerWidth - width) / 2)),
top: Math.max(12, Math.round((window.innerHeight - height) / 2)),
top: Math.max(12, Math.round((safeHeight - height) / 2)),
};
}
@@ -268,10 +292,11 @@ export default class FloatingWindow extends Component {
_clampGeometry() {
if (!this.geometry) return;
const g = this.geometry;
const safeHeight = this._safeViewport.height;
g.width = Math.min(g.width, window.innerWidth - 16);
g.height = Math.min(g.height, window.innerHeight - 16);
g.height = Math.min(g.height, safeHeight - 16);
g.left = Math.max(8, Math.min(g.left, window.innerWidth - g.width - 8));
g.top = Math.max(8, Math.min(g.top, window.innerHeight - g.height - 8));
g.top = Math.max(8, Math.min(g.top, safeHeight - g.height - 8));
}
_clampWindow() {
@@ -287,6 +312,16 @@ export default class FloatingWindow extends Component {
this._setState("normal");
}
_onVisualViewport() {
if (!this._vv) return;
this.classList.toggle("fw-keyboard-visible", this._keyboardVisible);
if (this.win && (this.state === "fullscreen" || this.state === "maximized")) {
this.win.style.height = `${this._vv.height}px`;
this.win.style.top = `${this._vv.offsetTop}px`;
}
this._scheduleResize();
}
_startDrag(event) {
if (this.state !== "normal") return;
if (event.target.tagName === "BUTTON") return;
@@ -308,8 +343,9 @@ export default class FloatingWindow extends Component {
if (event.cancelable) event.preventDefault();
const point = event.touches ? event.touches[0] : event;
const g = this.geometry;
const safeHeight = this._safeViewport.height;
g.left = Math.max(8, Math.min(point.clientX - this._drag.dx, window.innerWidth - g.width - 8));
g.top = Math.max(8, Math.min(point.clientY - this._drag.dy, window.innerHeight - g.height - 8));
g.top = Math.max(8, Math.min(point.clientY - this._drag.dy, safeHeight - g.height - 8));
this.win.style.left = `${g.left}px`;
this.win.style.top = `${g.top}px`;
}
@@ -345,8 +381,9 @@ export default class FloatingWindow extends Component {
if (event.cancelable) event.preventDefault();
const point = event.touches ? event.touches[0] : event;
const g = this.geometry;
const safeHeight = this._safeViewport.height;
g.width = Math.max(320, Math.min(this._resize.w + (point.clientX - this._resize.x), window.innerWidth - g.left - 8));
g.height = Math.max(220, Math.min(this._resize.h + (point.clientY - this._resize.y), window.innerHeight - g.top - 8));
g.height = Math.max(220, Math.min(this._resize.h + (point.clientY - this._resize.y), safeHeight - g.top - 8));
this.win.style.width = `${g.width}px`;
this.win.style.height = `${g.height}px`;
this._scheduleResize();
devplacepy/static/js/devii/devii-terminal.js
+34 -2
View File
@@ -84,6 +84,12 @@ export default class DeviiTerminalElement extends FloatingWindow {
this._applyFont(this._readFont());
this._mobile.addEventListener("change", () => this._onViewportChange());
window.addEventListener("resize", () => this._clampWindow());
this._vv = window.visualViewport || null;
this._vvHandler = () => this._onVisualViewport2();
if (this._vv) {
this._vv.addEventListener("resize", this._vvHandler);
this._vv.addEventListener("scroll", this._vvHandler);
}
window.addEventListener("pagehide", () => this._captureFocusForUnload());
window.addEventListener("beforeunload", () => this._captureFocusForUnload());
this._identity = null;
@@ -416,18 +422,25 @@ export default class DeviiTerminalElement extends FloatingWindow {
this.win.style.width = "";
this.win.style.height = "";
}
const keyboardVisible = this._keyboardVisible;
this.classList.toggle("devii-keyboard-visible", keyboardVisible);
if (resolved === "fullscreen" && keyboardVisible && this._vv) {
this.win.style.height = `${this._vv.height}px`;
this.win.style.top = `${this._vv.offsetTop}px`;
}
this._syncControls();
this._persist();
}
_defaultGeometry() {
const safeHeight = this._safeViewport.height;
const width = Math.min(760, Math.round(window.innerWidth * 0.94));
const height = Math.min(600, Math.round(window.innerHeight * 0.82));
const height = Math.min(600, Math.round(safeHeight * 0.82));
return {
width,
height,
left: Math.max(12, window.innerWidth - width - 24),
top: Math.max(12, window.innerHeight - height - 24),
top: Math.max(12, safeHeight - height - 24),
};
}
@@ -436,6 +449,25 @@ export default class DeviiTerminalElement extends FloatingWindow {
this._setState("open");
}
_onVisualViewport2() {
if (this.state === "closed" || !this._vv) return;
this.classList.toggle("devii-keyboard-visible", this._keyboardVisible);
if (this.state === "fullscreen") {
this.win.style.height = `${this._vv.height}px`;
this.win.style.top = `${this._vv.offsetTop}px`;
}
this._ensureInputVisible();
}
_ensureInputVisible() {
window.requestAnimationFrame(() => {
if (document.activeElement === this.input && this.input.scrollIntoView) {
this.input.scrollIntoView({ block: "end" });
}
if (this.output) this.output.scrollTop = this.output.scrollHeight;
});
}
_onKey(event) {
if (event.key === "Enter") {
event.preventDefault();