willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-ai/src/components/Composer/index.css

@@ -0,0 +1,137 @@
+.willa-composer {
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  gap: 0;
+  border: 1px solid var(--willa-composer-border);
+  border-radius: 1.05rem;
+  background: var(--willa-composer-bg);
+  color: var(--willa-composer-text);
+  font-family: var(--willa-body-font);
+  overflow: hidden;
+  box-shadow: var(--willa-composer-shadow);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.willa-composer:focus-within {
+  border-color: var(--willa-composer-border-focus);
+  box-shadow: var(--willa-composer-shadow);
+}
+
+.willa-composer-header {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0.9rem;
+  border-bottom: 0;
+  background: var(--willa-composer-header-bg);
+  padding: 0.9rem 1rem 0.68rem;
+}
+
+.willa-composer-meta {
+  display: grid;
+  min-width: 0;
+  gap: 0.34rem;
+}
+
+.willa-composer-title {
+  min-width: 0;
+  color: var(--willa-composer-title);
+  font-size: 0.9rem;
+  font-weight: 680;
+  line-height: 1.4;
+}
+
+.willa-composer-model,
+.willa-composer-tools,
+.willa-composer-attachments {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.34rem;
+}
+
+.willa-composer-attachments {
+  flex-wrap: wrap;
+  border-bottom: 0;
+  background: var(--willa-composer-strip-bg);
+  color: var(--willa-composer-muted);
+  padding: 0.48rem 1rem;
+}
+
+.willa-composer .willa-composer-input {
+  border: 0;
+  border-radius: 0;
+  background: var(--willa-composer-input-bg);
+  box-shadow: none;
+}
+
+.willa-composer .willa-composer-input:hover:not(.willa-prompt-input--disabled) {
+  background: var(--willa-composer-input-bg-hover);
+}
+
+.willa-composer .willa-composer-input:focus-within {
+  box-shadow: none;
+}
+
+.willa-composer .willa-composer-input.willa-prompt-input--md {
+  padding: 0.94rem 1rem 0.88rem;
+}
+
+.willa-composer .willa-composer-input.willa-prompt-input--lg {
+  padding: 1.06rem 1.08rem 0.96rem;
+}
+
+.willa-composer
+  .willa-composer-input.willa-prompt-input--md
+  .willa-prompt-input-footer {
+  margin: 0 -1rem -0.88rem;
+  padding: 0.68rem 1rem 0.74rem;
+}
+
+.willa-composer
+  .willa-composer-input.willa-prompt-input--lg
+  .willa-prompt-input-footer {
+  margin: 0 -1.08rem -0.96rem;
+  padding: 0.76rem 1.08rem 0.82rem;
+}
+
+.willa-composer .willa-prompt-input-footer {
+  border-top-color: transparent;
+}
+
+.willa-composer-input .willa-prompt-input-control {
+  color: var(--willa-composer-title);
+}
+
+@media (max-width: 767px) {
+  .willa-composer {
+    border-radius: 0.88rem;
+  }
+
+  .willa-composer-header {
+    padding: 0.68rem 0.72rem 0.6rem;
+    align-items: flex-start;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.55rem;
+  }
+
+  .willa-composer-tools {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .willa-composer-attachments {
+    padding: 0.38rem 0.72rem;
+  }
+
+  .willa-composer .willa-composer-input.willa-prompt-input--md,
+  .willa-composer .willa-composer-input.willa-prompt-input--lg {
+    padding: 0.78rem 0.72rem 0.72rem;
+  }
+}

package/packages/willa-ai/src/components/Composer/index.tsx

@@ -0,0 +1,92 @@
+import type { AriaRole, CSSProperties, ReactNode } from "react";
+import classNames from "classnames";
+import {
+  AttachmentList,
+  type AttachmentListItem,
+  type AttachmentListProps,
+} from "#ai/components/AttachmentList";
+import { PromptInput, type PromptInputProps } from "#ai/components/PromptInput";
+
+export type ComposerProps = Omit<
+  PromptInputProps,
+  "actions" | "className" | "footer" | "id" | "role" | "style"
+> & {
+  header?: ReactNode;
+  model?: ReactNode;
+  tools?: ReactNode;
+  attachments?: Array<AttachmentListItem>;
+  attachmentListProps?: Omit<AttachmentListProps, "items">;
+  actions?: ReactNode;
+  footer?: ReactNode;
+  id?: string;
+  role?: AriaRole;
+  className?: string;
+  style?: CSSProperties;
+  inputClassName?: string;
+  inputStyle?: CSSProperties;
+};
+
+export function Composer(props: ComposerProps) {
+  const {
+    header,
+    model,
+    tools,
+    attachments,
+    attachmentListProps,
+    actions,
+    footer,
+    id,
+    role,
+    style,
+    inputClassName,
+    inputStyle,
+    className,
+    ...promptInputProps
+  } = props;
+  const hasHeader = isRenderable(header);
+  const hasToolbar = isRenderable(model) || isRenderable(tools);
+  const hasAttachments = attachments !== undefined && attachments.length > 0;
+
+  return (
+    <section
+      id={id}
+      className={classNames("willa-composer", className)}
+      style={style}
+      role={role}
+    >
+      {hasHeader || hasToolbar ? (
+        <div className="willa-composer-header">
+          {hasHeader || model ? (
+            <div className="willa-composer-meta">
+              {hasHeader ? (
+                <div className="willa-composer-title">{header}</div>
+              ) : null}
+              {model ? (
+                <div className="willa-composer-model">{model}</div>
+              ) : null}
+            </div>
+          ) : null}
+          {tools ? <div className="willa-composer-tools">{tools}</div> : null}
+        </div>
+      ) : null}
+      {hasAttachments ? (
+        <div className="willa-composer-attachments">
+          <AttachmentList items={attachments} {...attachmentListProps} />
+        </div>
+      ) : null}
+      <PromptInput
+        {...promptInputProps}
+        className={classNames("willa-composer-input", inputClassName)}
+        style={inputStyle}
+        actions={actions}
+        footer={footer}
+      />
+    </section>
+  );
+}
+
+const isRenderable = (value: ReactNode) => {
+  return value !== undefined && value !== null && value !== false;
+};
+
+Composer.displayName = "Composer";

package/packages/willa-ai/src/components/ContextPanel/index.css

@@ -0,0 +1,252 @@
+.willa-context-panel {
+  display: grid;
+  gap: 0.72rem;
+  width: 100%;
+  min-width: 0;
+  color: var(--willa-context-panel-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-context-panel--compact {
+  gap: 0.58rem;
+}
+
+.willa-context-panel__header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  border: 1px solid var(--willa-context-panel-border);
+  border-radius: 0.82rem;
+  padding: 0.72rem 0.82rem;
+  background: color-mix(
+    in srgb,
+    var(--willa-context-panel-border) 18%,
+    transparent
+  );
+}
+
+.willa-context-panel__title {
+  color: var(--willa-context-panel-title);
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.willa-context-panel__actions {
+  display: inline-flex;
+  gap: 0.38rem;
+  flex-wrap: wrap;
+}
+
+.willa-context-panel__tabs {
+  min-width: 0;
+}
+
+.willa-context-panel__status {
+  color: var(--willa-context-panel-muted);
+  font-size: 0.78rem;
+  line-height: 1.35;
+  margin-top: 0.2rem;
+}
+
+.willa-context-panel__status-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.32rem;
+}
+
+.willa-context-panel__list {
+  width: 100%;
+  min-width: 0;
+}
+
+.willa-context-panel__list.willa-list--panel {
+  border-radius: 0.9rem;
+}
+
+.willa-context-panel__list.willa-list--md .willa-list__main {
+  gap: 0.56rem;
+  padding: 0.78rem 0.9rem;
+}
+
+.willa-context-panel__list .willa-list__body {
+  gap: 0.18rem;
+}
+
+.willa-context-panel__list .willa-list__header {
+  align-items: center;
+  gap: 0.42rem;
+}
+
+.willa-context-panel__list .willa-list__title {
+  color: var(--willa-context-panel-title);
+  font-size: 0.94rem;
+  font-weight: 640;
+  letter-spacing: -0.01em;
+  line-height: 1.32;
+}
+
+.willa-context-panel__list .willa-list__description {
+  color: var(--willa-context-panel-text);
+  font-size: 0.82rem;
+  line-height: 1.48;
+}
+
+.willa-context-panel__list .willa-list__meta {
+  margin-top: 0.08rem;
+}
+
+.willa-context-panel__list .willa-list__actions {
+  padding-right: 0.9rem;
+}
+
+.willa-context-panel__list .willa-list__item--selected {
+  background: color-mix(
+    in srgb,
+    var(--willa-context-panel-accent) 9%,
+    var(--willa-context-panel-bg)
+  );
+}
+
+.willa-context-panel__list .willa-list__item--selected::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0.18rem;
+  border-radius: 999px;
+  background: var(--willa-context-panel-accent);
+  content: "";
+}
+
+.willa-context-panel__list .willa-list__main {
+  min-width: 0;
+}
+
+.willa-context-panel__item-title {
+  display: inline-flex;
+  gap: 0.42rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.willa-context-panel__item-title-text {
+  display: inline-block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: inherit;
+}
+
+.willa-context-panel__item-meta {
+  display: grid;
+  gap: 0.22rem;
+  color: var(--willa-context-panel-muted);
+  min-width: 0;
+}
+
+.willa-context-panel__item-meta-line {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.28rem 0.36rem;
+  align-items: center;
+  min-width: 0;
+  font-size: 0.73rem;
+  line-height: 1.35;
+}
+
+.willa-context-panel__item-preview,
+.willa-context-panel__item-snippet {
+  display: inline;
+  color: var(--willa-context-panel-text);
+  font-size: 0.82rem;
+  line-height: 1.48;
+}
+
+.willa-context-panel__item-snippet code {
+  font-size: 0.78rem;
+}
+
+.willa-context-panel__item-preview-label {
+  color: var(--willa-context-panel-muted);
+  font-weight: 600;
+}
+
+.willa-context-panel__item-reason {
+  color: var(--willa-context-panel-warning);
+  font-size: 0.73rem;
+  line-height: 1.35;
+}
+
+.willa-context-panel__item-badge {
+  display: inline-flex;
+}
+
+.willa-context-panel__item-actions {
+  display: inline-flex;
+  gap: 0.3rem;
+}
+
+.willa-context-panel__item-actions .willa-button {
+  min-width: 0;
+}
+
+.willa-context-panel__item-checkbox {
+  margin: 0;
+}
+
+.willa-context-panel__item-checkbox > .willa-checkbox {
+  margin: 0;
+}
+
+.willa-context-panel__empty {
+  border: 1px dashed var(--willa-context-panel-border);
+  border-radius: 0.72rem;
+  padding: 0.82rem;
+  color: var(--willa-context-panel-muted);
+  text-align: left;
+}
+
+.willa-context-panel__error {
+  display: flex;
+  align-items: center;
+  gap: 0.48rem;
+  padding: 0.65rem;
+  border: 1px solid var(--willa-context-panel-warning);
+  border-radius: 0.68rem;
+  color: var(--willa-context-panel-warning);
+  background: var(--willa-context-panel-warning-bg);
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.willa-context-panel__footer {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  color: var(--willa-context-panel-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.willa-context-panel__source-tag {
+  max-width: max-content;
+  font-size: 0.72rem;
+  font-weight: 620;
+  gap: 0.2rem;
+  min-height: 1.36rem;
+  line-height: 1.25;
+  padding-block: 0.12rem;
+}
+
+@media (max-width: 767px) {
+  .willa-context-panel__actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .willa-context-panel__item-meta-line {
+    font-size: 0.72rem;
+  }
+}