diff --git a/packages/open-workflow-diagram-editor/src/core/taskDetails.ts b/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
index 1e849281..93f5c554 100644
--- a/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
+++ b/packages/open-workflow-diagram-editor/src/core/taskDetails.ts
@@ -24,7 +24,11 @@ const MAX_DEPTH = 4;
 
 /* Flattened task row - kind: how the view should render it */
 export type DetailField =
-  | { path: string; kind: "text"; display: string }
+  | { path: string; kind: "scalar"; value: string | number | boolean }
+  | { path: string; kind: "enum"; value: string; options: string[] }
+  | { path: string; kind: "runtime-expression"; value: string }
+  | { path: string; kind: "duration"; value: string }
+  | { path: string; kind: "long-string"; value: string }
   | { path: string; kind: "array"; count: number }
   | { path: string; kind: "object" };
 
@@ -32,6 +36,26 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 
+function isLongStringField(path: string): boolean {
+  return path === "run.shell.command" || path === "run.script.code";
+}
+
+function isRuntimeExpressionField(path: string): boolean {
+  return path === "if";
+}
+
+function isDurationField(path: string): boolean {
+  return path === "timeout" || path === "timeout.after";
+}
+
+const ENUM_FIELDS: Record<string, string[]> = {
+  "with.output": ["raw", "content", "response"],
+};
+
+function getEnumOptions(path: string): string[] | undefined {
+  return ENUM_FIELDS[path];
+}
+
 function flattenFields(
   value: unknown,
   path: string = "",
@@ -57,9 +81,58 @@ function flattenFields(
     for (const [key, val] of Object.entries(value)) {
       flattenFields(val, path ? `${path}.${key}` : key, depth + 1, outputFields);
     }
+
+    return;
+  }
+
+  if (typeof value === "string" && isLongStringField(path)) {
+    outputFields.push({
+      path,
+      kind: "long-string",
+      value,
+    });
     return;
   }
-  outputFields.push({ path, kind: "text", display: String(value) });
+
+  if (typeof value === "string" && isRuntimeExpressionField(path)) {
+    outputFields.push({
+      path,
+      kind: "runtime-expression",
+      value,
+    });
+    return;
+  }
+
+  if (typeof value === "string" && isDurationField(path)) {
+    outputFields.push({
+      path,
+      kind: "duration",
+      value,
+    });
+    return;
+  }
+
+  if (typeof value === "string") {
+    const options = getEnumOptions(path);
+
+    if (options) {
+      outputFields.push({
+        path,
+        kind: "enum",
+        value,
+        options,
+      });
+      return;
+    }
+  }
+
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+    outputFields.push({
+      path,
+      kind: "scalar",
+      value,
+    });
+  }
 }
 
 /* Builds the flattened detail rows for a task: task-specific fields first, inherited base fields last */
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx b/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
index debb04a8..d5419248 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/Fields.tsx
@@ -14,6 +14,24 @@
  * limitations under the License.
  */
 
+import { useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import type { DetailField } from "@/core/taskDetails";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Switch } from "@/components/ui/switch";
+import {
+  Combobox,
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxTrigger,
+  ComboboxList,
+  ComboboxValue,
+} from "@/components/ui/combobox";
+
+const ISO_8601_DURATION_REGEX =
+  /^P(?=\d|T)(?:\d+Y)?(?:\d+M)?(?:\d+W)?(?:\d+D)?(?:T(?=\d)(?:\d+H)?(?:\d+M)?(?:\d+(?:\.\d+)?S)?)?$/;
+
 export function SectionHeader({ label }: { label: string }) {
   return (
     <div className="dec-sidebar-section-header">
@@ -32,11 +50,88 @@ export function InlineField({ label, value }: { label: string; value: string })
   );
 }
 
-export function PropertyField({ label, value }: { label: string; value: string }) {
+function AutoGrowTextarea({ value, disabled }: { value: string; disabled: boolean }) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+
+    if (!textarea) {
+      return;
+    }
+
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  return <Textarea ref={textareaRef} value={value} disabled={disabled} />;
+}
+
+export function PropertyField({
+  label,
+  field,
+  isReadOnly,
+}: {
+  label: string;
+  field: DetailField;
+  isReadOnly: boolean;
+}) {
+  let control: ReactNode;
+
+  if (field.kind === "long-string") {
+    control = <AutoGrowTextarea value={field.value} disabled={isReadOnly} />;
+  } else if (field.kind === "runtime-expression") {
+    control = (
+      <div>
+        <span className="dec-sidebar-hint-text">Runtime expression</span>
+        <Input value={field.value} disabled={isReadOnly} />
+      </div>
+    );
+  } else if (field.kind === "duration") {
+    control = (
+      <Input
+        value={field.value}
+        disabled={isReadOnly}
+        pattern={ISO_8601_DURATION_REGEX.source}
+        title="Enter an ISO 8601 duration, for example PT30S or PT5M"
+      />
+    );
+  } else if (field.kind === "enum") {
+    control = (
+      <Combobox value={field.value} disabled={isReadOnly}>
+        <ComboboxTrigger>
+          <ComboboxValue placeholder="Select an option" />
+        </ComboboxTrigger>
+
+        <ComboboxContent>
+          <ComboboxList>
+            {field.options.map((option) => (
+              <ComboboxItem key={option} value={option}>
+                {option}
+              </ComboboxItem>
+            ))}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    );
+  } else if (field.kind === "scalar" && typeof field.value === "string") {
+    control = <Input value={field.value} disabled={isReadOnly} />;
+  } else if (field.kind === "scalar" && typeof field.value === "number") {
+    control = <Input type="number" value={field.value} disabled={isReadOnly} />;
+  } else if (field.kind === "scalar" && typeof field.value === "boolean") {
+    control = <Switch checked={field.value} disabled={isReadOnly} />;
+  } else if (field.kind === "scalar") {
+    control = String(field.value);
+  } else if (field.kind === "array") {
+    control = `${field.count} item${field.count === 1 ? "" : "s"}`;
+  } else {
+    control = "{...}";
+  }
+
   return (
     <div className="dec-sidebar-prop">
       <dt className="dec-sidebar-prop-label">{label}</dt>
-      <dd className="dec-sidebar-prop-value">{value}</dd>
+      <dd className="dec-sidebar-prop-value">{control}</dd>
     </div>
   );
 }
diff --git a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
index 2609e547..b371e77d 100644
--- a/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
+++ b/packages/open-workflow-diagram-editor/src/side-panel/NodeDetailsView.tsx
@@ -28,25 +28,16 @@ type NodeDetailsViewProps = {
   node: RF.Node<BaseNodeData>;
 };
 
-const OBJECT_GLYPH = "{...}";
-
-function itemCount(length: number): string {
-  return `${length} item${length === 1 ? "" : "s"}`;
-}
-
-function fieldText(field: DetailField): string {
-  switch (field.kind) {
-    case "array":
-      return itemCount(field.count);
-    case "text":
-      return field.display;
-    case "object":
-      return OBJECT_GLYPH;
-  }
-}
-
-function FieldRow({ label, field }: { label: string; field: DetailField }) {
-  return <PropertyField label={label} value={fieldText(field)} />;
+function FieldRow({
+  label,
+  field,
+  isReadOnly,
+}: {
+  label: string;
+  field: DetailField;
+  isReadOnly: boolean;
+}) {
+  return <PropertyField label={label} field={field} isReadOnly={isReadOnly} />;
 }
 
 export function NodeDetailsView({ node }: NodeDetailsViewProps) {
@@ -76,7 +67,7 @@ export function NodeDetailsView({ node }: NodeDetailsViewProps) {
           <SectionHeader label={t("sidebar.sectionProperties")} />
           <dl>
             {fields.map((field) => (
-              <FieldRow key={field.path} label={field.path} field={field} />
+              <FieldRow key={field.path} label={field.path} field={field} isReadOnly={isReadOnly} />
             ))}
           </dl>
         </>
diff --git a/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts b/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
index 56ad7aac..d4d590f3 100644
--- a/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
+++ b/packages/open-workflow-diagram-editor/tests/core/taskDetails.test.ts
@@ -30,9 +30,9 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "call", kind: "text", display: "http" },
-      { path: "with.method", kind: "text", display: "GET" },
-      { path: "with.url", kind: "text", display: "http://example.com" },
+      { path: "call", kind: "scalar", value: "http" },
+      { path: "with.method", kind: "scalar", value: "GET" },
+      { path: "with.url", kind: "scalar", value: "http://example.com" },
     ]);
   });
 
@@ -43,9 +43,9 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "set.foo", kind: "text", display: "bar" },
-      { path: "if", kind: "text", display: "${ .ok }" },
-      { path: "then", kind: "text", display: "continue" },
+      { path: "set.foo", kind: "scalar", value: "bar" },
+      { path: "if", kind: "runtime-expression", value: "${ .ok }" },
+      { path: "then", kind: "scalar", value: "continue" },
     ]);
   });
 
@@ -61,11 +61,11 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "set.x", kind: "text", display: "1" },
-      { path: "input.from", kind: "text", display: "${ .input }" },
-      { path: "output.as", kind: "text", display: "${ .output }" },
-      { path: "export.as", kind: "text", display: "${ .export }" },
-      { path: "timeout.after", kind: "text", display: "${ .timeout }" },
+      { path: "set.x", kind: "scalar", value: 1 },
+      { path: "input.from", kind: "scalar", value: "${ .input }" },
+      { path: "output.as", kind: "scalar", value: "${ .output }" },
+      { path: "export.as", kind: "scalar", value: "${ .export }" },
+      { path: "timeout.after", kind: "duration", value: "${ .timeout }" },
     ]);
   });
 
@@ -77,8 +77,8 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "timeout.after.minutes", kind: "text", display: "5" },
-      { path: "timeout.after.seconds", kind: "text", display: "30" },
+      { path: "timeout.after.minutes", kind: "scalar", value: 5 },
+      { path: "timeout.after.seconds", kind: "scalar", value: 30 },
     ]);
   });
 
@@ -89,7 +89,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "timeout", kind: "text", display: "MyTimeout" }]);
+    expect(fields).toEqual([{ path: "timeout", kind: "duration", value: "MyTimeout" }]);
   });
 
   it.each([{ length: 0 }, { length: 1 }, { length: 2 }])(
@@ -123,7 +123,7 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "with.a.b.client.name", kind: "text", display: "foo" },
+      { path: "with.a.b.client.name", kind: "scalar", value: "foo" },
       { path: "with.a.b.client.config", kind: "object" },
     ]);
   });
@@ -136,7 +136,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "set.x", kind: "text", display: "1" }]);
+    expect(fields).toEqual([{ path: "set.x", kind: "scalar", value: 1 }]);
   });
 
   it("returns no fields for a task with no displayable fields", () => {
@@ -154,7 +154,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "set.c", kind: "text", display: "value" }]);
+    expect(fields).toEqual([{ path: "set.c", kind: "scalar", value: "value" }]);
   });
 
   it("converts boolean values to text", () => {
@@ -168,8 +168,8 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "set.enabled", kind: "text", display: "true" },
-      { path: "set.disabled", kind: "text", display: "false" },
+      { path: "set.enabled", kind: "scalar", value: true },
+      { path: "set.disabled", kind: "scalar", value: false },
     ]);
   });
 
@@ -236,7 +236,7 @@ describe("getTaskDetails", () => {
       }),
     );
 
-    expect(fields).toEqual([{ path: "call", kind: "text", display: "123" }]);
+    expect(fields).toEqual([{ path: "call", kind: "scalar", value: 123 }]);
   });
 
   it("flattens fields exactly at the maximum supported depth", () => {
@@ -257,8 +257,8 @@ describe("getTaskDetails", () => {
     expect(fields).toEqual([
       {
         path: "with.a.b.c.value",
-        kind: "text",
-        display: "foo",
+        kind: "scalar",
+        value: "foo",
       },
     ]);
   });
@@ -277,12 +277,12 @@ describe("getTaskDetails", () => {
     );
 
     expect(fields).toEqual([
-      { path: "if", kind: "text", display: "${ .condition }" },
-      { path: "input.from", kind: "text", display: "${ .input }" },
-      { path: "output.as", kind: "text", display: "${ .output }" },
-      { path: "export.as", kind: "text", display: "${ .export }" },
-      { path: "timeout", kind: "text", display: "PT5M" },
-      { path: "then", kind: "text", display: "next" },
+      { path: "if", kind: "runtime-expression", value: "${ .condition }" },
+      { path: "input.from", kind: "scalar", value: "${ .input }" },
+      { path: "output.as", kind: "scalar", value: "${ .output }" },
+      { path: "export.as", kind: "scalar", value: "${ .export }" },
+      { path: "timeout", kind: "duration", value: "PT5M" },
+      { path: "then", kind: "scalar", value: "next" },
     ]);
   });
 
@@ -297,4 +297,74 @@ describe("getTaskDetails", () => {
 
     expect(fields).toEqual([]);
   });
+
+  it("classifies shell commands as long-string fields", () => {
+    const fields = getTaskDetails(
+      asTask({
+        run: {
+          shell: {
+            command: 'echo "Hello World"',
+          },
+        },
+      }),
+    );
+
+    expect(fields).toEqual([
+      {
+        path: "run.shell.command",
+        kind: "long-string",
+        value: 'echo "Hello World"',
+      },
+    ]);
+  });
+
+  it("classifies script code as a long-string field", () => {
+    const fields = getTaskDetails(
+      asTask({
+        run: {
+          script: {
+            code: 'console.log("Hello World");',
+          },
+        },
+      }),
+    );
+
+    expect(fields).toEqual([
+      {
+        path: "run.script.code",
+        kind: "long-string",
+        value: 'console.log("Hello World");',
+      },
+    ]);
+  });
+
+  it("extracts enum fields with their available options", () => {
+    const fields = getTaskDetails({
+      call: "http",
+      with: {
+        method: "GET",
+        endpoint: "https://example.com",
+        output: "content",
+      },
+    });
+
+    expect(fields).toContainEqual({
+      path: "with.output",
+      kind: "enum",
+      value: "content",
+      options: ["raw", "content", "response"],
+    });
+  });
+
+  it("classifies timeout as a duration field", () => {
+    const task = {
+      timeout: "PT30S",
+    } as Specification.Task;
+
+    expect(getTaskDetails(task)).toContainEqual({
+      path: "timeout",
+      kind: "duration",
+      value: "PT30S",
+    });
+  });
 });
diff --git a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
index 67bd2698..f3de883f 100644
--- a/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
+++ b/packages/open-workflow-diagram-editor/tests/side-panel/NodeDetailsView.test.tsx
@@ -46,11 +46,51 @@ describe("NodeDetailsView", () => {
     expect(screen.getByTestId("node-details")).toBeInTheDocument();
     expect(screen.getByText("Properties")).toBeInTheDocument();
     expect(screen.getByText("call")).toBeInTheDocument();
-    expect(screen.getByText("http")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("http")).toBeInTheDocument();
     expect(screen.getByText("with.endpoint")).toBeInTheDocument();
-    expect(screen.getByText("https://api.example.com")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("https://api.example.com")).toBeInTheDocument();
     expect(screen.getByText("then")).toBeInTheDocument();
-    expect(screen.getByText("continue")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("continue")).toBeInTheDocument();
+  });
+
+  it("renders number fields as number inputs", () => {
+    const node = makeNode({
+      label: "step",
+      task: {
+        with: {
+          retries: 42,
+        },
+      },
+    });
+
+    renderWithProviders(<NodeDetailsView node={node} />);
+
+    expect(screen.getByText("with.retries")).toBeInTheDocument();
+
+    const input = screen.getByDisplayValue("42");
+
+    expect(input).toHaveAttribute("type", "number");
+    expect(input).toBeDisabled();
+  });
+
+  it("renders boolean fields as switches", () => {
+    const node = makeNode({
+      label: "step",
+      task: {
+        with: {
+          enabled: true,
+        },
+      },
+    });
+
+    renderWithProviders(<NodeDetailsView node={node} />);
+
+    expect(screen.getByText("with.enabled")).toBeInTheDocument();
+
+    const switchControl = screen.getByRole("switch");
+
+    expect(switchControl).toBeChecked();
+    expect(switchControl).toBeDisabled();
   });
 
   it.each([
@@ -179,7 +219,10 @@ describe("NodeDetailsView", () => {
       renderWithProviders(<NodeDetailsView node={child} />, {
         taskReferences: new Set([containerReference, childReference]),
         errors: [
-          { path: `${childReference}/with`, message: "must have required property 'endpoint'" },
+          {
+            path: `${childReference}/with`,
+            message: "must have required property 'endpoint'",
+          },
         ],
       });