@firstflow/react 0.0.1

package/README.md

@@ -0,0 +1,315 @@
+# @cdn/react-issue-reporter
+
+Firstflow platform React SDK. Issue reporting is one feature module; the root API is a platform instance with `agentId`, `apiUrl`, and feature modules (e.g. `firstflow.issue`).
+
+Three modes for issues: **inline** (form in a container), **modal** (form in a modal), and **programmatic** (submit without UI).
+
+## Installation
+
+```bash
+npm install @cdn/react-issue-reporter
+```
+
+Peer dependencies: `react` and `react-dom` (>= 18).
+
+## Quick start
+
+### 1. Create the platform instance
+
+```ts
+import { createFirstflow } from '@cdn/react-issue-reporter';
+
+const firstflow = createFirstflow({
+  agentId: 'your-agent-id',
+  apiUrl: 'https://api.example.com',
+});
+```
+
+The instance has read-only `agentId`, `apiUrl`, a platform **analytics** API (`firstflow.analytics.track()`, etc.), an **issue** module (`open`, `submit`, `getConfig`, `destroy`), and a **feedback** module for per-message ratings (`submit`, `getConfig`, `isEnabled`). Issue and message-feedback submissions are sent via the analytics layer (Jitsu event `issue_submitted` / `feedback_submitted`); no backend POST for those events.
+
+To load **issues**, **message feedback**, and **active experiences** (including saved `flow` graphs) from the backend (`GET {apiUrl}/agents/{agentId}/config`), use `useCreateFirstflow(agentId, apiUrl, { fetchConfig: true })`. Pass the returned `firstflow` and **`config`** to `FirstflowProvider` (`config={config}`). Children can call **`useFirstflowConfig()`** to read `config.experiences` (and issues/feedback fields) without a second request.
+
+Alternatively pass `feedbackConfig` into `createFirstflow({ ..., feedbackConfig })` if you are not using `fetchConfig` but still want the message feedback UI enabled.
+
+### 2. Use with React (inline or modal)
+
+Wrap your app with `FirstflowProvider` and pass the instance:
+
+```tsx
+import { FirstflowProvider, InlineIssueForm, useFirstflow } from '@cdn/react-issue-reporter';
+
+<FirstflowProvider firstflow={firstflow}>
+  <YourApp />
+  <InlineIssueForm />
+</FirstflowProvider>
+```
+
+- **Inline:** `<InlineIssueForm />` renders the form in place.
+- **Modal:** Call `firstflow.issue.open()` or `useIssueReporter().open()` to open the form in a modal (e.g. a “Report issue” button).
+
+### 3. Programmatic submit (no UI)
+
+```ts
+await firstflow.issue.submit({
+  name: 'Jane',
+  email: 'j@example.com',
+  subject: 'Bug',
+  description: '…',
+  messageId: 'msg_1',
+  conversationId: 'conv_1',
+});
+```
+
+Form fields are validated; context metadata (`messageId`, `conversationId`, etc.) is passed through without validation.
+
+#### Headless issue form: `useIssueForm()`
+
+Inside `IssueReporterProvider` / `FirstflowProvider`, build your own layout (Tailwind, etc.):
+
+```tsx
+import { useIssueForm } from '@cdn/react-issue-reporter';
+
+function CustomIssueForm() {
+  const { values, setValue, errors, submit, submitting, isEnabled, fields, promptText } = useIssueForm();
+  if (!isEnabled) return null;
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        void submit();
+      }}
+    >
+      {promptText && <p>{promptText}</p>}
+      {fields.map((f) => (
+        <div key={f.id}>
+          <label>{f.label}</label>
+          <input value={values[f.id] ?? ''} onChange={(e) => setValue(f.id, e.target.value)} />
+          {errors[f.id] && <span>{errors[f.id]}</span>}
+        </div>
+      ))}
+      <button type="submit" disabled={submitting}>Send</button>
+    </form>
+  );
+}
+```
+
+`submit()` merges context from `open({ messageId, conversationId, … })` the same way as `FormEngine` / `InlineIssueForm`.
+
+### 4. Message feedback (per assistant message)
+
+Host must pass stable **`conversationId`** and **`messageId`** (the assistant message being rated). **`agent_id`** is added automatically on the Jitsu payload.
+
+Two integration styles (similar to Clerk’s ready components vs hooks):
+
+| Style | Use when |
+|-------|----------|
+| **`MessageFeedback`** | You want the built-in card / inline thumbs UI. |
+| **`useFeedback({ conversationId, messageId, messagePreview })`** | Headless per-message ratings (Tailwind, custom buttons). |
+| **`useFeedback()`** (no args) | Programmatic feedback only: `submit(payload)`, `getConfig()`, `isEnabled()` (e.g. custom slots). |
+
+#### Headless message ratings: `useFeedback({ ... })`
+
+Inside `FirstflowProvider`, pass `conversationId`, `messageId`, and `messagePreview`. Returns `rating`, `selectedTags`, `comment`, `setRating`, `toggleTag`, `setComment`, `submit`, `isEnabled`, `config`, `sideConfig`, plus `submitting`, `submitted`, `error`, `clearError`.
+
+```tsx
+import { useFeedback } from '@cdn/react-issue-reporter';
+
+function MyFeedbackRow({ conversationId, messageId, preview }: Props) {
+  const { rating, setRating, submit, isEnabled, submitting, sideConfig, selectedTags, toggleTag, comment, setComment } =
+    useFeedback({
+      conversationId,
+      messageId,
+      messagePreview: preview,
+      metadata: { surface: 'chat' },
+    });
+
+  if (!isEnabled) return null;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        <button
+          type="button"
+          className={rating === 'like' ? 'bg-green-600 text-white' : 'bg-gray-200'}
+          onClick={() => setRating('like')}
+        >
+          Helpful
+        </button>
+        <button
+          type="button"
+          className={rating === 'dislike' ? 'bg-red-500 text-white' : 'bg-gray-200'}
+          onClick={() => setRating('dislike')}
+        >
+          Not helpful
+        </button>
+      </div>
+      {rating && sideConfig && (
+        <>
+          <p className="text-xs font-semibold">{sideConfig.heading}</p>
+          <div className="flex flex-wrap gap-1">
+            {sideConfig.tags.map((tag) => (
+              <button key={tag} type="button" onClick={() => toggleTag(tag)} className={selectedTags.includes(tag) ? 'ring-2 ring-blue-500' : ''}>
+                {tag}
+              </button>
+            ))}
+          </div>
+          <textarea value={comment} onChange={(e) => setComment(e.target.value)} placeholder={sideConfig.placeholder} />
+          <button type="button" disabled={submitting} onClick={() => void submit()}>
+            {submitting ? 'Sending…' : 'Send'}
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+```
+
+#### Ready component: `MessageFeedback`
+
+Use **`MessageFeedback`** when `feedback_config.enabled` is true (from agent or from `createFirstflow({ feedbackConfig })`):
+
+```tsx
+// App root: one provider after firstflow is ready
+<FirstflowProvider firstflow={firstflow}>
+  <ChatMessage conversationId={cid} messageId={mid} text={assistantText} />
+</FirstflowProvider>
+
+function ChatMessage({ conversationId, messageId, text }) {
+  return (
+    <MessageFeedback
+      conversationId={conversationId}
+      messageId={messageId}
+      messagePreview={text}
+    />
+  );
+}
+```
+
+- **`variant="default"`** (default): preview box + thumbs + form.
+- **`variant="inline"`**: thumbs only in the first fragment node (place beside the message in a flex row); after the user picks like/dislike, the tag/comment form renders in a second fragment node — use a wrapping flex container with `flex-wrap: wrap` and give the form child `flex: 1 1 100%` so it spans the full width below.
+- **`inlineFormSurface="dark"`**: when using `variant="inline"`, styles the expanded form for dark chat backgrounds.
+
+Programmatic (no UI):
+
+```ts
+await firstflow.feedback.submit({
+  conversationId: 'conv_1',
+  messageId: 'msg_assistant_42',
+  rating: 'like', // or 'dislike'
+  comment: 'optional',
+  messagePreview: 'snippet for analytics',
+  metadata: { page: '/chat', locale: 'en' },
+});
+```
+
+**Jitsu event `feedback_submitted`** — properties (snake_case) include:
+
+| Property | Required | Notes |
+|----------|----------|--------|
+| `agent_id` | yes | Injected by SDK |
+| `session_id`, `device_type` | yes | Injected by SDK |
+| `anonymousId` | yes | On envelope (Segment-style) |
+| `conversation_id` | yes | From host |
+| `message_id` | yes | From host |
+| `rating` | yes | `like` \| `dislike` |
+| `comment` | no | Free text |
+| `message_preview` | no | Truncated (~2000 chars) |
+| `metadata` | no | Arbitrary JSON object (serializable keys/values; max ~32KB serialized) |
+| `submitted_at` | yes | ISO timestamp |
+
+**Analytics:** “Current” feedback per user per message is the **latest** row by timestamp for the same `message_id` and identity (`anonymousId` / `userId`), e.g. `ROW_NUMBER() OVER (PARTITION BY message_id, anonymous_id ORDER BY timestamp DESC) = 1` in your warehouse.
+
+### 5. Experience flow: Message nodes (`useExperienceMessageNode`)
+
+Headless hook for a **Message** step in an experience (config matches the dashboard message node: text, carousel, quick replies, CTAs, **`ctaUrl`** / **`ctaPrompt`**). It returns **`blocks`** in fixed order (`text` → `carousel` → `quick_replies` → `cta_primary` → `cta_dismiss`), **`blocksVersion`** (currently **4**; quick-reply options are `{ label, prompt? }` and `quick_reply` actions include optional **`promptText`**; v3 added primary CTA **`promptText`**; v2 added per-card carousel CTA fields), **`ui`** flags, and **`handlers`** for clicks. Integrate navigation in **`onAction`** (map `kind` / `label` / `promptText` / `url` / `index` / `cardId` / `actionId` to your graph — e.g. send **`promptText`** or **`label`** as the user message for button CTAs and quick replies, open **`url`** for link CTAs).
+
+| Topic | Behavior |
+|-------|----------|
+| **Shown** | `EXPERIENCE_SHOWN` on mount by default (`trackShownOnMount: true`). |
+| **Dedupe** | Module-scoped Set: same default key (`agentId` + `experienceId` + `nodeId` + `conversationId`) fires **once** per page load. Re-showing the same node in a new run needs a unique **`impressionKey`** (e.g. append `flowInstanceId`) or **`dedupeShown: false`**. |
+| **Virtualized lists** | `trackShownOnMount: false` and call **`reportShown()`** when the row is visible (e.g. IntersectionObserver). |
+| **Clicks** | `EXPERIENCE_CLICKED` with `action` from **`EXPERIENCE_MESSAGE_ANALYTICS_ACTION`** (`cta_primary`, `cta_dismiss`, `quick_reply`, `carousel_cta`). For `cta_primary`, props may include **`cta_url`** (link) and **`cta_prompt`** (button prompt text). For `quick_reply`, props include **`quick_reply_label`**, **`quick_reply_index`**, and optional **`quick_reply_prompt`**. For `carousel_cta`, props include **`card_id`**, **`carousel_action_id`** (`primary` / `secondary`), and when the card is in config: **`carousel_button_action`** (`prompt` / `link`), **`carousel_button_label`**, **`carousel_link_url`**, **`carousel_prompt`**. Use **`buildExperienceCarouselCtaAction(config, cardId, actionId)`** if you build clicks outside **`handlers.onCarouselCta`**. **`message_style`** normalizes legacy `inline` to `message`. |
+| **Errors** | `onAction` / `mapAnalytics` throws are logged; analytics still runs (`onAction` first, then track; if `mapAnalytics` throws, base props are tracked). |
+
+Optional **`mapAnalytics(eventName, props)`** transforms payloads before `track` (avoid renaming events unless intentional).
+
+**Next step (not in SDK yet):** a thin `<MessageNode />` wrapper around this hook for default markup.
+
+### 6. Imperative mount (optional DOM adapter)
+
+```ts
+import { createFirstflow, mount } from '@cdn/react-issue-reporter';
+
+const firstflow = createFirstflow({ agentId, apiUrl });
+const unmount = mount(firstflow, document.getElementById('issue-root'));
+// Later: firstflow.issue.open() opens the modal.
+// Teardown: unmount(); firstflow.issue.destroy();
+```
+
+## API
+
+### createFirstflow(options)
+
+Returns a **FirstflowInstance** (root platform context).
+
+- `options.agentId` (string)
+- `options.apiUrl` (string)
+- `options.jitsuHost?` (string) — Jitsu host for analytics; defaults to shared Firstflow Jitsu if omitted
+- `options.jitsuWriteKey?` (string) — Jitsu write key; defaults to shared key if omitted
+
+**FirstflowInstance:**
+
+- `agentId`, `apiUrl` (read-only)
+- `analytics` — platform analytics API (used by all feature modules):
+  - `track(eventName, properties?)` — send a track event to Jitsu (Segment-compatible)
+  - `identify(userId?, traits?)` — identify a user (optional)
+  - `page(name?, properties?)` — page view (optional)
+- `issue` — public issue module API:
+  - `open(options?)` — open the issue UI (modal or inline depending on integration)
+  - `submit(data)` — submit an issue (form values + optional context)
+  - `getConfig()` — read-only config (enabled, promptText, fields)
+  - `destroy()` — tear down handlers
+- `feedback` — message feedback (Jitsu `feedback_submitted`):
+  - `submit({ conversationId, messageId, rating, comment?, messagePreview?, metadata? })` — tag pills in the UI are not sent to Jitsu; put anything you need for analytics in `metadata`
+  - `getConfig()`, `isEnabled()`
+
+Naming: issue uses **open** + **submit**; feedback uses **submit** (and optional **MessageFeedback** UI).
+
+### React exports
+
+- **FirstflowProvider** — accepts `firstflow: FirstflowInstance`; provides the platform instance to the tree. Transitional: it delegates to the existing issue provider; the final architecture may use a single provider for multiple modules.
+- **useFirstflow()** — returns the platform instance from context.
+- **useCreateFirstflow(agentId, apiUrl, { fetchConfig? })** — returns `{ firstflow, loading, error }`. With `fetchConfig: true`, loads `issues_config` and `feedback_config` from the agent on `GET .../config` (supports `{ meta, data: { agent } }`).
+- **useFeedback()** — returns `firstflow.feedback` (must be inside `FirstflowProvider`).
+- **MessageFeedback** — props: `conversationId`, `messageId`, `messagePreview`, optional `metadata`; renders nothing when feedback is disabled.
+- **fetchSdkAgentConfig(apiUrl, agentId)** — low-level fetch of `{ issues_config, feedback_config }`.
+- **useIssueReporter()** — returns `{ reporter, open, reportIssue, submit, config, isModalOpen, closeModal }` for issue-specific state.
+- **InlineIssueForm** — renders the form inline (only when `config.enabled`).
+- **IssueModal** — modal wrapper (rendered by the provider).
+- **FormEngine** — headless-friendly form (config + onSubmit + optional onCancel).
+
+### mount(firstflow, target)
+
+DOM adapter only: renders `FirstflowProvider` + `InlineIssueForm` into `target` with React 18 `createRoot`. Returns an unmount function.
+
+## Issue types (platform-first exports)
+
+Issue-specific types are under the **Issue** namespace so the root package stays platform-first:
+
+- `Issue.FormValues`, `Issue.ContextMetadata`, `Issue.Payload`, `Issue.OpenOptions`
+- `Issue.NormalizedConfig`, `Issue.NormalizedFieldConfig`, `Issue.RawIssueFieldConfig`, `Issue.RawIssuesConfig`, `Issue.ValidationResult`
+
+Platform types at root: `FirstflowInstance`, `CreateFirstflowOptions`, `IssueModulePublic`, `AnalyticsModulePublic`. Event names: `ISSUE_SUBMITTED`, `FEEDBACK_SUBMITTED`, `SURVEY_COMPLETED`, etc. (see `analytics/events`).
+
+## Analytics and validation
+
+- **Analytics:** Issue submissions (and future modules) go through the platform analytics layer. Feature modules call `firstflow.analytics.track(eventName, properties)`; the analytics service sends Segment-compatible events to Jitsu. See [ANALYTICS.md](./ANALYTICS.md).
+- **Validation:** `validatePayload(data, fields)` applies to form field keys only; used by the issue module before calling `analytics.track("issue_submitted", payload)`.
+
+## Architecture
+
+See [ARCHITECTURE.md](./ARCHITECTURE.md) for the platform instance, analytics layer, transitional provider design, and data flow.
+
+## License
+
+Private / Firstflow.

package/dist/index.css

@@ -0,0 +1,360 @@
+/* src/components/FormEngine.module.css */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #334155;
+}
+.input,
+.textarea,
+.select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.5rem;
+  color: #0f172a;
+  background: #fff;
+  box-sizing: border-box;
+}
+.textarea {
+  min-height: 5rem;
+  resize: vertical;
+}
+.input:focus,
+.textarea:focus,
+.select:focus {
+  outline: none;
+  border-color: #0f766e;
+  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);
+}
+.inputError,
+.textareaError,
+.selectError {
+  border-color: #dc2626;
+}
+.errorText {
+  font-size: 0.75rem;
+  color: #dc2626;
+}
+.actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+.prompt {
+  font-size: 0.875rem;
+  color: #64748b;
+  margin: 0 0 0.5rem 0;
+}
+.submitError {
+  font-size: 0.8125rem;
+  color: #dc2626;
+  margin: 0;
+}
+
+/* src/components/IssueModal.module.css */
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.panel {
+  position: relative;
+  width: 90%;
+  max-width: 400px;
+  background: #fff;
+  border-radius: 1rem;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  z-index: 9999;
+  padding: 1.5rem;
+}
+.close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: #94a3b8;
+  padding: 0.25rem;
+}
+.close:hover {
+  color: #0f172a;
+}
+.title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 0.5rem 0;
+}
+
+/* src/components/MessageFeedback.module.css */
+.card {
+  margin-top: 0.75rem;
+  padding: 1rem 1.125rem;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    Segoe UI,
+    Roboto,
+    sans-serif;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.previewLabel {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #64748b;
+  margin: 0 0 0.5rem 0;
+}
+.previewBox {
+  padding: 0.75rem 0.875rem;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  color: #1e293b;
+  margin-bottom: 0.875rem;
+}
+.thumbs {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+.thumbBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  border: 2px solid #cbd5e1;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    border-color 0.15s,
+    background 0.15s,
+    color 0.15s;
+  color: #64748b;
+}
+.thumbBtn:hover {
+  border-color: #94a3b8;
+  background: #f1f5f9;
+}
+.thumbBtnLike {
+  border-color: #86efac;
+  color: #15803d;
+  background: #ecfdf5;
+}
+.thumbBtnLike:hover {
+  border-color: #4ade80;
+  background: #d1fae5;
+  color: #166534;
+}
+.thumbBtnActiveLike {
+  border-color: #16a34a;
+  color: #fff;
+  background:
+    linear-gradient(
+      180deg,
+      #22c55e 0%,
+      #16a34a 100%);
+  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.35);
+}
+.thumbBtnActiveLike:hover {
+  border-color: #15803d;
+  background:
+    linear-gradient(
+      180deg,
+      #16a34a 0%,
+      #15803d 100%);
+  color: #fff;
+}
+.thumbBtnActiveDislike {
+  border-color: #f87171;
+  color: #dc2626;
+  background: #fef2f2;
+}
+.sectionHeading {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #334155;
+  margin: 1.125rem 0 0.625rem 0;
+}
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+.tag {
+  padding: 0.375rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  font-size: 0.8125rem;
+  color: #475569;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.tag:hover {
+  border-color: #cbd5e1;
+}
+.tagSelected {
+  border-color: #3b82f6;
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+.textarea {
+  width: 100%;
+  min-height: 72px;
+  padding: 0.625rem 0.75rem;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  font-size: 0.8125rem;
+  font-family: inherit;
+  resize: vertical;
+  box-sizing: border-box;
+  margin-bottom: 0.75rem;
+}
+.textarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+.submitBtn {
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  border: none;
+  background: #0f172a;
+  color: #fff;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.submitBtn:hover:not(:disabled) {
+  background: #1e293b;
+}
+.submitBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.hint {
+  font-size: 0.75rem;
+  color: #64748b;
+  margin: 0.5rem 0 0 0;
+}
+.error {
+  font-size: 0.75rem;
+  color: #dc2626;
+  margin: 0.5rem 0 0 0;
+}
+.cardInline {
+  margin-top: 0;
+  padding: 0.45rem 0.55rem;
+  align-self: flex-start;
+  width: auto;
+  max-width: 100%;
+}
+.cardInline .thumbs {
+  gap: 0.35rem;
+}
+.cardInline .thumbBtn {
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+}
+.cardInline .thumbBtn svg {
+  width: 18px;
+  height: 18px;
+}
+.cardInline .sectionHeading {
+  margin-top: 0.65rem;
+}
+.inlineFormBelow {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  margin-top: 0.125rem;
+}
+.inlineFormBelow .sectionHeading {
+  margin-top: 0;
+}
+.inlineFormBelowDark {
+  border-color: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+}
+.inlineFormBelowDark .sectionHeading {
+  color: rgba(255, 255, 255, 0.65);
+}
+.inlineFormBelowDark .tag {
+  border-color: rgba(255, 255, 255, 0.15);
+  background: rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.85);
+}
+.inlineFormBelowDark .tag:hover {
+  border-color: rgba(255, 255, 255, 0.25);
+  background: rgba(0, 0, 0, 0.35);
+}
+.inlineFormBelowDark .tagSelected {
+  border-color: #60a5fa;
+  background: rgba(59, 130, 246, 0.2);
+  color: #93c5fd;
+}
+.inlineFormBelowDark .textarea {
+  background: rgba(0, 0, 0, 0.25);
+  border-color: rgba(255, 255, 255, 0.12);
+  color: #f1f5f9;
+}
+.inlineFormBelowDark .textarea:focus {
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+.inlineFormBelowDark .hint {
+  color: rgba(255, 255, 255, 0.5);
+}
+.inlineFormBelowDark .submitBtn {
+  background: #e2e8f0;
+  color: #0f172a;
+}
+.inlineFormBelowDark .submitBtn:hover:not(:disabled) {
+  background: #f8fafc;
+}
+
+/* src/components/InlineIssueForm.module.css */
+.wrapper {
+  margin-top: 1rem;
+}
+.title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 0.5rem 0;
+}