lotuspod 0.1.0__tar.gz

lotuspod-0.1.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ko Vial
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

lotuspod-0.1.0/PKG-INFO

@@ -0,0 +1,123 @@
+Metadata-Version: 2.4
+Name: lotuspod
+Version: 0.1.0
+Summary: Lotuspod: publish pages people comment on, with decision forms and agents that answer.
+License: MIT
+Requires-Python: >=3.9
+Description-Content-Type: text/markdown
+License-File: LICENSE
+Dynamic: license-file
+
+# Lotuspod
+
+Lotuspod publishes pages for a small, signed-in circle of readers, and lets
+those readers answer on them. A page is written in markdown or HTML and
+published in one command, drawn in one shared lotus theme. Readers comment on
+a section or on a passage they highlight, and answer the decision tables a
+plan page asks the maintainer. Agents (a Claude Code or Codex session, or
+the default responder) pull the comments and answers meant for them, reply in
+the thread, and revise the page when asked.
+
+Try the demo: [https://lotuspod.kovial.co/](https://lotuspod.kovial.co/) (your comments stay in your browser; replies are scripted)
+
+The site runs on one writer host, behind Cloudflare Access, and is reached
+through a Cloudflare Tunnel or over a tailnet.
+
+Lotuspod is a personal project, and issues are off.
+
+## See it
+
+A reader comments on a section of a plan page, the thread waits for the
+page's agent, `hermes`, and its reply appears; then the reader answers the
+page's decisions and comments on a passage:
+
+![A reader comments on the Rollout section of a sample plan page; the comments panel shows the thread checking for a reply from hermes, then hermes writing, then hermes's reply; the reader then answers both decisions and comments on a highlighted passage](docs/images/loop.gif)
+
+![The comments panel open beside a sample plan page at 1280 pixels wide: the reader's comment on the Rollout section and the agent hermes's reply below it](docs/images/thread.png)
+
+![The decisions table of a sample plan page with both questions answered and saved, one with a note, each naming the reader who answered](docs/images/decisions.png)
+
+![A passage of a sample plan page highlighted with its number 1, and its thread open in the comments panel waiting for a reply from hermes](docs/images/passage.png)
+
+The pictures come from a sample page served on loopback by the test fixture;
+[Development](docs/development.md#captures) makes them again.
+
+## Layout
+
+```
+lotuspod/
+├── src/lotuspod/          # package + minimal CLI (`lotuspod render|publish|manifest|index|serve|answers|backup|restore`)
+│   ├── _templates/artifact.html   # artifact template ({{placeholder}} substitution)
+│   ├── _templates/index.html      # index-page template
+│   └── _theme/            # tokens.json (colors, fonts, radii) + lotuspod.css
+├── artifacts/             # rendered output (gitignored)
+└── lotuspod-media/        # markdown pages' images, beside artifacts/ (gitignored)
+```
+
+Beside these, `docs/` holds the reference pages listed below, `deploy/` the
+tunnel config and the systemd units, `tests/` the unit tests and `e2e/` the
+Playwright captures and browser checks.
+
+## Quick start
+
+Install the package, write a markdown page, publish it and serve it:
+
+```sh
+pip install -e .
+printf '# Opening the Pond\n\n## The pond\n\nHello from the pond.\n' > pond.md
+lotuspod publish pond.md --local --summary "Why we started Lotuspod."
+lotuspod serve
+```
+
+`--local` publishes on this machine, even when the config names a
+`[publish] host` to send pages to. `publish` writes `artifacts/pond.html`,
+keeps the source beside it as `artifacts/pond.md`, and rebuilds
+`artifacts/index.html`. `serve` prints the address it listens on; open
+`http://127.0.0.1:8000/` for the index. Serve listens on `127.0.0.1`, this
+machine only, unless `--host` names another address, such as
+`--host "$(tailscale ip -4)"` to serve on a tailnet.
+
+Comments and answers need the reader's routes, which sit behind Cloudflare
+Access: until the config has an `[access]` section they answer 503, and the
+page itself is served as usual.
+
+## Where to read next
+
+- [Publishing pages](docs/publishing.md): for people publishing pages.
+  Markdown and HTML pages, images, the manifest and the index, decision
+  tables, the template and the theme, and what a page may run.
+- [Reading and answering pages](docs/comments.md): for readers and the people
+  answering them. Answers and comments, the comments panel, the popover and
+  bottom sheet, and comments on passages.
+- [Agents](docs/agents.md): for agents and their operators. Agent
+  credentials, the pull loop and the default responder.
+- [Operating the site](docs/operating.md): for the operator of the site.
+  Serve, Cloudflare Access, publishing through the tunnel, deploying from
+  `main`, and backups.
+- [Development](docs/development.md): for people changing Lotuspod. The
+  tests and the captures.
+- [Architecture](docs/architecture.md): for reviewers and new contributors.
+  One diagram of how the parts fit together.
+
+## How it was built
+
+Lotuspod is built by [Holophyte](https://github.com/wevial/holophyte), an
+agent factory. Each change starts as a ticket with acceptance criteria and
+verify commands. An agent implements it in an isolated worktree, the verify
+commands run, and a different agent reviews it. A pull request then runs the
+required `unit` check and merges. The
+[merged pull requests](https://github.com/wevial/lotuspod/pulls?q=is%3Apr+is%3Amerged)
+are the record.
+
+## Security
+
+Report a vulnerability privately ([SECURITY.md](SECURITY.md)). `src/lotuspod/access.py` checks Cloudflare
+Access's RS256 assertions with the standard library: the package has no runtime dependencies, the check only
+verifies (never signs or makes keys), and RS256 is one modular exponentiation plus a comparison of the whole
+re-encoded PKCS#1 v1.5 block, leaving no parser to trick. It refuses any `alg` but RS256, a key id not in
+the team's key set, keys under 2048 bits, and a wrong issuer, audience, time or email; it never reads the
+plain email header. Pinned by `tests.test_access.VerifierTests.test_header_must_name_rs256_and_a_listed_key`,
+`tests.test_access.VerifierTests.test_signature_block_is_compared_whole`,
+`tests.test_access.VerifierTests.test_keys_under_2048_bits_are_not_listed`,
+`tests.test_access.VerifierTests.test_malformed_tokens_are_invalid` and
+`tests.test_access.WhoamiTests.test_email_header_naming_someone_else_is_not_read`.

lotuspod-0.1.0/README.md

@@ -0,0 +1,113 @@
+# Lotuspod
+
+Lotuspod publishes pages for a small, signed-in circle of readers, and lets
+those readers answer on them. A page is written in markdown or HTML and
+published in one command, drawn in one shared lotus theme. Readers comment on
+a section or on a passage they highlight, and answer the decision tables a
+plan page asks the maintainer. Agents (a Claude Code or Codex session, or
+the default responder) pull the comments and answers meant for them, reply in
+the thread, and revise the page when asked.
+
+Try the demo: [https://lotuspod.kovial.co/](https://lotuspod.kovial.co/) (your comments stay in your browser; replies are scripted)
+
+The site runs on one writer host, behind Cloudflare Access, and is reached
+through a Cloudflare Tunnel or over a tailnet.
+
+Lotuspod is a personal project, and issues are off.
+
+## See it
+
+A reader comments on a section of a plan page, the thread waits for the
+page's agent, `hermes`, and its reply appears; then the reader answers the
+page's decisions and comments on a passage:
+
+![A reader comments on the Rollout section of a sample plan page; the comments panel shows the thread checking for a reply from hermes, then hermes writing, then hermes's reply; the reader then answers both decisions and comments on a highlighted passage](docs/images/loop.gif)
+
+![The comments panel open beside a sample plan page at 1280 pixels wide: the reader's comment on the Rollout section and the agent hermes's reply below it](docs/images/thread.png)
+
+![The decisions table of a sample plan page with both questions answered and saved, one with a note, each naming the reader who answered](docs/images/decisions.png)
+
+![A passage of a sample plan page highlighted with its number 1, and its thread open in the comments panel waiting for a reply from hermes](docs/images/passage.png)
+
+The pictures come from a sample page served on loopback by the test fixture;
+[Development](docs/development.md#captures) makes them again.
+
+## Layout
+
+```
+lotuspod/
+├── src/lotuspod/          # package + minimal CLI (`lotuspod render|publish|manifest|index|serve|answers|backup|restore`)
+│   ├── _templates/artifact.html   # artifact template ({{placeholder}} substitution)
+│   ├── _templates/index.html      # index-page template
+│   └── _theme/            # tokens.json (colors, fonts, radii) + lotuspod.css
+├── artifacts/             # rendered output (gitignored)
+└── lotuspod-media/        # markdown pages' images, beside artifacts/ (gitignored)
+```
+
+Beside these, `docs/` holds the reference pages listed below, `deploy/` the
+tunnel config and the systemd units, `tests/` the unit tests and `e2e/` the
+Playwright captures and browser checks.
+
+## Quick start
+
+Install the package, write a markdown page, publish it and serve it:
+
+```sh
+pip install -e .
+printf '# Opening the Pond\n\n## The pond\n\nHello from the pond.\n' > pond.md
+lotuspod publish pond.md --local --summary "Why we started Lotuspod."
+lotuspod serve
+```
+
+`--local` publishes on this machine, even when the config names a
+`[publish] host` to send pages to. `publish` writes `artifacts/pond.html`,
+keeps the source beside it as `artifacts/pond.md`, and rebuilds
+`artifacts/index.html`. `serve` prints the address it listens on; open
+`http://127.0.0.1:8000/` for the index. Serve listens on `127.0.0.1`, this
+machine only, unless `--host` names another address, such as
+`--host "$(tailscale ip -4)"` to serve on a tailnet.
+
+Comments and answers need the reader's routes, which sit behind Cloudflare
+Access: until the config has an `[access]` section they answer 503, and the
+page itself is served as usual.
+
+## Where to read next
+
+- [Publishing pages](docs/publishing.md): for people publishing pages.
+  Markdown and HTML pages, images, the manifest and the index, decision
+  tables, the template and the theme, and what a page may run.
+- [Reading and answering pages](docs/comments.md): for readers and the people
+  answering them. Answers and comments, the comments panel, the popover and
+  bottom sheet, and comments on passages.
+- [Agents](docs/agents.md): for agents and their operators. Agent
+  credentials, the pull loop and the default responder.
+- [Operating the site](docs/operating.md): for the operator of the site.
+  Serve, Cloudflare Access, publishing through the tunnel, deploying from
+  `main`, and backups.
+- [Development](docs/development.md): for people changing Lotuspod. The
+  tests and the captures.
+- [Architecture](docs/architecture.md): for reviewers and new contributors.
+  One diagram of how the parts fit together.
+
+## How it was built
+
+Lotuspod is built by [Holophyte](https://github.com/wevial/holophyte), an
+agent factory. Each change starts as a ticket with acceptance criteria and
+verify commands. An agent implements it in an isolated worktree, the verify
+commands run, and a different agent reviews it. A pull request then runs the
+required `unit` check and merges. The
+[merged pull requests](https://github.com/wevial/lotuspod/pulls?q=is%3Apr+is%3Amerged)
+are the record.
+
+## Security
+
+Report a vulnerability privately ([SECURITY.md](SECURITY.md)). `src/lotuspod/access.py` checks Cloudflare
+Access's RS256 assertions with the standard library: the package has no runtime dependencies, the check only
+verifies (never signs or makes keys), and RS256 is one modular exponentiation plus a comparison of the whole
+re-encoded PKCS#1 v1.5 block, leaving no parser to trick. It refuses any `alg` but RS256, a key id not in
+the team's key set, keys under 2048 bits, and a wrong issuer, audience, time or email; it never reads the
+plain email header. Pinned by `tests.test_access.VerifierTests.test_header_must_name_rs256_and_a_listed_key`,
+`tests.test_access.VerifierTests.test_signature_block_is_compared_whole`,
+`tests.test_access.VerifierTests.test_keys_under_2048_bits_are_not_listed`,
+`tests.test_access.VerifierTests.test_malformed_tokens_are_invalid` and
+`tests.test_access.WhoamiTests.test_email_header_naming_someone_else_is_not_read`.

lotuspod-0.1.0/pyproject.toml

@@ -0,0 +1,20 @@
+[build-system]
+requires = ["setuptools>=68"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "lotuspod"
+version = "0.1.0"
+description = "Lotuspod: publish pages people comment on, with decision forms and agents that answer."
+readme = "README.md"
+requires-python = ">=3.9"
+license = { text = "MIT" }
+
+[project.scripts]
+lotuspod = "lotuspod.cli:main"
+
+[tool.setuptools.packages.find]
+where = ["src"]
+
+[tool.setuptools.package-data]
+lotuspod = ["py.typed", "_templates/*.html", "_theme/*.json", "_theme/*.svg", "_theme/css/*.css", "_theme/js/*.js"]

lotuspod-0.1.0/setup.cfg

@@ -0,0 +1,4 @@
+[egg_info]
+tag_build = 
+tag_date = 0
+

lotuspod-0.1.0/src/lotuspod/__init__.py

@@ -0,0 +1,3 @@
+"""Lotuspod: publish pages people comment on, with decision forms and agents that answer."""
+
+__version__ = "0.1.0"

lotuspod-0.1.0/src/lotuspod/__main__.py

@@ -0,0 +1,6 @@
+"""Entry point for ``python -m lotuspod`` (mirrors the ``lotuspod`` console script)."""
+
+from lotuspod.cli import main
+
+if __name__ == "__main__":
+    raise SystemExit(main())

lotuspod-0.1.0/src/lotuspod/_templates/artifact.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Security-Policy" content="{{policy}}">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{title}} · Lotuspod</title>
+  <meta name="generator" content="lotuspod theme {{theme_name}}">
+  <meta name="lotuspod:visible" content="{{visible}}">
+{{#revision}}  <meta name="lotuspod:revision" content="{{revision}}">
+{{/revision}}{{#owner}}  <meta name="lotuspod:owner" content="{{owner}}">
+{{/owner}}  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="lotuspod.css?v={{theme_hash}}">
+</head>
+<body>
+  <main class="artifact{{variant_class}}" id="top">
+    <div class="artifact-topbar">
+      <a class="artifact-topbar-brand" href="index.html">Lotuspod</a><span class="artifact-topbar-sep">:</span>
+      <a class="artifact-topbar-title" href="#top">{{title}}</a>
+    </div>
+
+    <header class="artifact-header">
+{{#kicker}}      <p class="artifact-kicker">{{kicker}}</p>
+{{/kicker}}      <h1 class="artifact-title">{{title}}</h1>
+      <p class="artifact-meta"><time datetime="{{date}}">{{date}}</time></p>
+{{#owner}}      <p class="artifact-owner">Published by {{owner}}</p>
+{{/owner}}      {{summary_block}}
+    </header>
+
+    <div class="artifact-main">
+      {{#outline}}<nav class="artifact-outline" aria-label="On this page">
+        <details class="artifact-outline-disclosure">
+          <summary class="artifact-outline-summary">On this page</summary>
+          <ol class="artifact-outline-list" role="list">
+{{outline_items}}
+          </ol>
+        </details>
+      </nav>{{/outline}}
+
+      <section class="artifact-body">
+        {{body}}
+      </section>
+    </div>
+
+    <footer class="artifact-footer">
+      <span aria-hidden="true">&#10047;</span> lotuspod
+    </footer>
+  </main>
+{{#mermaid}}  <script type="module">
+    import mermaid from "{{mermaid_dir}}dist/mermaid.esm.min.mjs";
+    mermaid.initialize({
+      startOnLoad: true,
+      theme: "base",
+      themeVariables: {{mermaid_theme_variables}}
+    });
+  </script>
+{{/mermaid}}{{#page_script_needed}}  <script src="{{page_script}}?v={{theme_hash}}" defer></script>
+{{/page_script_needed}}</body>
+</html>

lotuspod-0.1.0/src/lotuspod/_templates/index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Lotuspod</title>
+  <meta name="generator" content="lotuspod theme {{theme_name}}">
+  <link rel="icon" type="image/svg+xml" href="favicon.svg">
+  <link rel="stylesheet" href="lotuspod.css?v={{theme_hash}}">
+</head>
+<body>
+  <main class="index">
+    <header class="index-header">
+      <h1 class="index-title">Lotuspod <span class="index-updated">updated <time datetime="{{generated}}">{{generated}}</time></span></h1>
+    </header>
+
+    <section class="index-body">
+      <div class="index-controls" hidden>
+        <label class="index-search-label" for="index-search">Search</label>
+        <input id="index-search" class="index-search" type="search" autocomplete="off"
+               spellcheck="false" placeholder="Search pages by title, date or summary">
+        <p class="index-count" role="status" aria-live="polite"></p>
+      </div>
+
+      {{entries_block}}
+
+      <p class="index-empty index-no-match" hidden>Nothing matches that search.</p>
+    </section>
+
+    <footer class="artifact-footer">
+      <span aria-hidden="true">&#10047;</span> lotuspod
+    </footer>
+  </main>
+
+  <script>
+    // Progressive enhancement over a listing that is already complete: the table
+    // above stands on its own, and this adds sorting and the search filter on
+    // top. The search field ships hidden and is revealed here, so a reader
+    // without scripting never sees a control that cannot filter anything.
+    (() => {
+      const table = document.querySelector(".index-table");
+      if (!table) return;
+
+      const body = table.tBodies[0];
+      const headers = Array.from(table.tHead.rows[0].cells);
+      // Document order is filename order - the listing's stable base. Sorts run
+      // from it rather than from the current DOM order, so a sort is repeatable
+      // and equal keys keep falling back to filename order.
+      const rows = Array.from(body.rows);
+
+      const cell = (row, column) => row.cells[column].textContent.trim();
+
+      const sorted = (column, ascending) => {
+        const numeric = headers[column].dataset.sortType === "number";
+        const direction = ascending ? 1 : -1;
+        return rows.slice().sort((a, b) => {
+          const left = cell(a, column);
+          const right = cell(b, column);
+          // Blanks (no episode number, no date) sink in both directions, so the
+          // rows that carry the field stay together at the top either way.
+          if (!left || !right) return left ? -1 : right ? 1 : 0;
+          if (numeric) {
+            const [x, y] = [Number(left), Number(right)];
+            if (!Number.isNaN(x) && !Number.isNaN(y)) return (x - y) * direction;
+          }
+          return left.localeCompare(right, undefined, {
+            numeric: true,
+            sensitivity: "base",
+          }) * direction;
+        });
+      };
+
+      let sortColumn = -1;
+      let ascending = true;
+
+      const sortBy = (column) => {
+        ascending = column === sortColumn ? !ascending : true;
+        sortColumn = column;
+        for (const row of sorted(column, ascending)) body.append(row);
+        headers.forEach((header, index) => {
+          header.setAttribute(
+            "aria-sort",
+            index !== column ? "none" : ascending ? "ascending" : "descending"
+          );
+        });
+      };
+
+      // The header label becomes a button so the sort is reachable by keyboard;
+      // aria-sort carries the state, and the theme draws the arrow from it.
+      headers.forEach((header, index) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "sort-button";
+        button.textContent = header.textContent;
+        button.addEventListener("click", () => sortBy(index));
+        header.textContent = "";
+        header.append(button);
+        header.setAttribute("aria-sort", "none");
+      });
+
+      const controls = document.querySelector(".index-controls");
+      const search = document.querySelector(".index-search");
+      const count = document.querySelector(".index-count");
+      const noMatch = document.querySelector(".index-no-match");
+
+      // One case-insensitive substring test against the whole row, so a query
+      // matches any column without the reader having to pick one.
+      const filter = () => {
+        const query = search.value.trim().toLowerCase();
+        let shown = 0;
+        for (const row of rows) {
+          const match = !query || row.textContent.toLowerCase().includes(query);
+          row.hidden = !match;
+          if (match) shown += 1;
+        }
+        const noun = rows.length === 1 ? "page" : "pages";
+        count.textContent =
+          shown === rows.length
+            ? `${rows.length} ${noun}`
+            : `${shown} of ${rows.length} ${noun}`;
+        noMatch.hidden = shown > 0;
+      };
+
+      search.addEventListener("input", filter);
+      controls.hidden = false;
+      filter();
+    })();
+  </script>
+</body>
+</html>

lotuspod-0.1.0/src/lotuspod/_theme/css/attachments.css

@@ -0,0 +1,126 @@
+/* Images on a comment (attachments.js). In a composer the images attached
+   sit under the field's frame, each a thumbnail with its Remove button,
+   beside the "Add image" button, and the status line moves below them.
+   Under a comment its images are a row of thumbnails, each a link to the
+   full size. A thumbnail's width and height attributes are its drawn size,
+   so its box is there before its bytes. Every rule here is one class more
+   specific than the composer's button rules in comments.css, which come
+   later. */
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  margin: 0.45rem 0.6rem 0;
+}
+
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-comment-actions .artifact-comment-status {
+  grid-row: 3;
+}
+
+.artifact-attach .artifact-attach-tray,
+.artifact-comment-col .artifact-comment-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.artifact-attach .artifact-attach-tray[hidden] {
+  display: none;
+}
+
+.artifact-attach .artifact-attach-item,
+.artifact-comment-images > li {
+  margin: 0;
+  padding: 0;
+}
+
+.artifact-attach .artifact-attach-item {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.artifact-attach-thumb {
+  background: var(--color-glow);
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-block);
+  display: block;
+  object-fit: cover;
+}
+
+.artifact-attach .artifact-attach-holder {
+  align-items: center;
+  background: var(--color-glow);
+  border: 1px dashed var(--hairline-strong);
+  border-radius: var(--radius-block);
+  color: var(--color-muted-lavender);
+  display: flex;
+  font-size: 0.78rem;
+  height: 4.5rem;
+  justify-content: center;
+  width: 4.5rem;
+}
+
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach :is(.artifact-attach-add, .artifact-attach-remove) {
+  appearance: none;
+  background: none;
+  border: 1px solid var(--hairline-strong);
+  border-radius: var(--radius-pill);
+  color: var(--color-lavender);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-size: 0.8rem;
+  height: auto;
+  line-height: 1.4;
+  margin: 0;
+  overflow: visible;
+  padding: 0.15rem 0.65rem;
+  position: static;
+  width: auto;
+}
+
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach .artifact-attach-remove {
+  border-color: transparent;
+  color: var(--color-muted-lavender);
+  padding: 0 0.3rem;
+}
+
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach :is(.artifact-attach-add, .artifact-attach-remove)::before,
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach :is(.artifact-attach-add, .artifact-attach-remove)::after {
+  content: none;
+}
+
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach :is(.artifact-attach-add, .artifact-attach-remove):hover {
+  background: none;
+  color: var(--color-pale-lavender);
+}
+
+:is(.artifact-comment-form, .artifact-comment-reply) .artifact-attach :is(.artifact-attach-add, .artifact-attach-remove):disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.artifact-comment-col .artifact-comment-images {
+  margin-top: 0.35rem;
+}
+
+.artifact-comment-item--reader .artifact-comment-images {
+  justify-content: flex-end;
+}
+
+.artifact-comment-image {
+  border-radius: var(--radius-block);
+  display: block;
+}
+
+.artifact-comment-image:focus-visible {
+  outline: 2px solid var(--color-lavender);
+  outline-offset: 2px;
+}